Skip to content

A
apaas-ui
Commit db0a7b41 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

assets地址

parent dd3161f6
Hide whitespace changes
Inline Side-by-side
Showing with 3983 additions and 2445 deletions
src/pages/data-analysis/my-application.vue
View file @ db0a7b41
......@@ -15,7 +15,7 @@
<div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
<div class="left_1_msg">
<div class="left_1_title">应用总数</div>
<div class="left_1_title">应用总数</div>
<div class="left_1_num">{{overview.total}}</div>
</div>
</div>
......@@ -102,17 +102,7 @@
<!-- 折线图 -->
<p class="sparkline-text">
<span>{{sparkline1.num}}</span>
<span
:style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
>
{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}%
<img
v-if="sparkline1.up>0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt />
</span>
<span :style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}">{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}% <img v-if="sparkline1.up>0" src="../../assets/imgs/icon_up.png" alt=""> <img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt=""></span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparklineCurve
......@@ -131,17 +121,7 @@
<!-- 折线图 -->
<p class="sparkline-text sparkline-text-user">
<span>{{sparkline2.num}}</span>
<span
:style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
>
{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}%
<img
v-if="sparkline2.up>0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt />
</span>
<span :style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}">{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}% <img v-if="sparkline2.up>0" src="../../assets/imgs/icon_up.png" alt=""> <img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt=""></span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparklineCurve
......@@ -175,12 +155,7 @@
:buttons_arr="['近14天', '近30天']"
@changeButton="changeAppTotalChangeBtn"
>
<line-chart
v-if="JSON.stringify(line_data)!=='{}'"
class="block-radius-content"
:data="line_data"
:zzfw="true"
></line-chart>
<line-chart v-if="JSON.stringify(line_data)!=='{}'" class="block-radius-content" :data="line_data"></line-chart>
</block-radius>
</el-col>
</el-row>
......@@ -238,31 +213,9 @@
<BarChart :data="bar_data_org" :colors="['#274fee', '#274fee']" :x_router="30" />
</block-radius>
</el-col>
<el-col :span="12" class="in_block">
<block-radius
:show_header="true"
title="应用审批变化趋势"
class="block"
:buttons_arr="['近14天', '近30天']"
@changeButton="changeAppSpChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="serviceSpData"></line-chart>
</block-radius>
</el-col>
<el-col :span="6" class="in_block">
<block-radius
:show_header="true"
title="应用审批状态分析"
class="block"
:buttons_arr="['申请状态', '待审批']"
@changeButton="changeAppSpBtn"
>
<multiple-circle
class="block-radius-content"
:data="Yysp_data"
:text="Yysp_text"
:isFwsp="isyysp"
></multiple-circle>
<el-col :span="18" class="in_block default">
<block-radius class="block">
<img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
</block-radius>
</el-col>
</el-row>
......@@ -296,430 +249,79 @@ export default {
WaterPolo
},
data: () => ({
isyysp: true,
water_polo: [64, 36],
water_polo: [0, 0],
overview: {
month_chain: 12,
week_chain: 20,
total: 1324,
day_count: 21
},
now_used_count_day: 7,
now_app_type: 1,
now_app_used_area: 1,
now_app_count: 14,
now_app_deploy: 1,
now_app_evalute: 1,
mult_data: [
{ name: "基础工具", value: 22 },
{ name: "通用应用", value: 12 },
{ name: "业务应用", value: 10 }
],
month_chain: 0,
week_chain: 0,
total:0,
day_count:0
},
now_used_count_day:7,
now_app_type:1,
now_app_used_area:1,
now_app_count:14,
now_app_deploy:1,
now_app_evalute:1,
mult_data: [],
text: "应用总数",
spIndicatorStyles1: false,
spRefLineStyles3: {
stroke: "#d14",
strokeOpacity: 0,
strokeDasharray: "2, 2"
strokeDasharray: "2, 2",
},
spCurveStyles2: {
stroke: "#274fee",
fill: "#274fee"
},
Yysp_data: [
{ name: "已审批", value: 15 },
{ name: "待审批", value: 45 }
],
Yysp_text: "应用审批",
serviceSpData: {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
}
]
fill: "#274fee",
},
spCurveStyles3: {
stroke: "#e56600",
fill: "#e56600"
fill: "#e56600",
},
sparkline1: {
arr: [1, 2, 3, 4, 8, 9, 10, 21],
num: 21,
up: 15.3
sparkline1:{
arr:[1,2,3,4,8,9,10,21],
num:21,
up:15.3
},
sparkline2: {
arr: [1, 2, 3, 4, 8, 9, 10, 21],
num: 18,
up: -19.3
sparkline2:{
arr:[1,2,3,4,8,9,10,21],
num:18,
up:-19.3
},
single_data: {
num: 54,
num: 0,
color: "#274fee",
text: "平台应用"
},
single_data1: {
num: 56,
num: 0,
color: "#e56600",
text: "开发者应用"
},
line_data: {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "开发者应用",
data: [
300,
200,
150,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222
]
},
{
name: "平台应用",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
100,
200,
350,
280,
260,
320,
500,
222
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350
]
}
]
},
bar_data_org: {
legendData: [
"省公安厅",
"省发改委",
"贵州省公安厅",
"贵州省发改委",
"贵州省公安厅"
],
seriesData: [322, 454, 266, 399, 222, 167]
},
bar_data_area: {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [322, 454, 566, 399, 222, 167]
},
graph_arr: {
legend: {
data: ["被调用次数", "调用次数"]
},
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
]
},
toplistData: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 22
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
], // 应用部署排名分析
line_data: {},
bar_data_org: {},
bar_data_area: {},
graph_arr: {},
toplistData: [], // 应用部署排名分析
toplistTargetValue: 150, // 应用部署排名分析 目标值
appInfoBtnIndex: 0,
commentlistData: [
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "大锤",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "阿水",
add_time: "2020-08-01 19:00:00",
score: 3,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
}
], // 应用评价
starlistData: [
{
star: 5,
count: 5,
unit: "个"
},
{
star: 4,
count: 4,
unit: "个"
},
{
star: 3,
count: 3,
unit: "个"
},
{
star: 2,
count: 2,
unit: "个"
},
{
star: 1,
count: 1,
unit: "个"
}
], // 应用评分
commentlistData: [], // 应用评价
starlistData: [], // 应用评分
starlistTotal: 10,
hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [
{
id: 1,
hotIndex: 1,
name: "地图视频融合服务",
count: 9964,
increases: 568
},
{
id: 1,
hotIndex: 2,
name: "消息队列服务",
count: 8964,
increases: 528
},
{
id: 1,
hotIndex: 3,
name: "即时通讯服务",
count: 7864,
increases: 89
},
{
id: 1,
hotIndex: 4,
name: "即时通讯服务这里最多显示十五字地图视频融合服务",
count: 4964,
increases: -8
},
{
id: 1,
hotIndex: 5,
name: "即时通讯服务这里最多显示十五字地图视频融合服务",
count: 3364,
increases: -18
}
] // 热门搜索 数据
hotSearchData: [] // 热门搜索 数据
}),
mounted() {
// this.getAppOverview();
// this.getAppUsedCount();
// this.getAppType();
// this.getAppSourceOri();
// this.getAppUsedArea();
// this.getAppCount();
// this.getAppDeployRank();
// this.getAppEvaluate();
// this.getAppOnlineState();
// this.getAppHot();
this.getAppOverview()
this.getAppUsedCount()
this.getAppType()
this.getAppSourceOri()
this.getAppUsedArea()
this.getAppCount()
this.getAppDeployRank()
this.getAppEvaluate()
this.getAppOnlineState()
this.getAppHot()
this.hotSearchHeader = [
{
label: "排名",
......@@ -749,960 +351,227 @@ export default {
];
},
methods: {
getAppOverview() {
getAppOverview(){
this.$api.dataAnalysis.getAppOverview().then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.overview = {
let data = response.data.data
this.overview= {
month_chain: parseFloat(data.month_lr),
week_chain: parseFloat(data.week_lr),
total: data.total,
day_count: data.ave_deploy_count
};
this.water_polo = [
parseFloat(data.developable_ratio),
parseFloat(data.un_developable_ratio)
];
total:data.total,
day_count:data.ave_deploy_count
}
this.water_polo = [parseFloat(data.developable_ratio),parseFloat(data.un_developable_ratio)]
}
});
})
},
getAppUsedCount() {
this.$api.dataAnalysis
.getAppUsedCount({ day: this.now_used_count_day })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.graph_arr = data;
}
});
getAppUsedCount(){
this.$api.dataAnalysis.getAppUsedCount({day:this.now_used_count_day}).then(response => {
if (response.data.success == 1) {
let data = response.data.data
this.graph_arr= data
}
})
},
getAppType() {
this.$api.dataAnalysis
.getAppType({ type: this.now_app_type })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.mult_data = data.series[0].data;
}
});
getAppType(){
this.$api.dataAnalysis.getAppType({type:this.now_app_type}).then(response => {
if (response.data.success == 1) {
let data = response.data.data
this.mult_data= data.series[0].data
}
})
},
getAppSourceOri() {
getAppSourceOri(){
this.$api.dataAnalysis.getAppSourceOri().then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.bar_data_org = {
let data = response.data.data
this.bar_data_org= {
legendData: data.xAxis.data,
seriesData: data.series[0].data
};
}
}
});
})
},
getAppUsedArea() {
this.$api.dataAnalysis
.getAppUsedArea({ type: this.now_app_used_area })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.bar_data_area = {
legendData: data.xAxis.data,
seriesData: data.series[0].data
};
getAppUsedArea(){
this.$api.dataAnalysis.getAppUsedArea({type:this.now_app_used_area}).then(response => {
if (response.data.success == 1) {
let data = response.data.data
this.bar_data_area= {
legendData: data.xAxis.data,
seriesData: data.series[0].data
}
});
}
})
},
getAppCount() {
this.$api.dataAnalysis
.getAppCount({ day: this.now_app_count })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.line_data = {
xAxisData: data.data,
seriesData: data.series
};
getAppCount(){
this.$api.dataAnalysis.getAppCount({day:this.now_app_count}).then(response => {
if (response.data.success == 1) {
let data = response.data.data
this.line_data= {
xAxisData: data.data,
seriesData: data.series
}
});
}
})
},
getAppDeployRank() {
this.$api.dataAnalysis
.getAppDeployRank({ type: this.now_app_deploy })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.toplistData = [];
if (data && data.length) {
this.toplistTargetValue = data[0].num;
getAppDeployRank(){
this.$api.dataAnalysis.getAppDeployRank({type:this.now_app_deploy}).then(response => {
if (response.data.success == 1) {
let data = response.data.data
this.toplistData = []
if(data&&data.length){
this.toplistTargetValue =data[0].num
data.forEach(e => {
this.toplistData.push({
service_name: e.name,
request_count: e.num,
cover:e.logo,
service_id:{
id:e.app_id,
source:e.source
},
data_service_type1:124
})
});
}
}
})
},
getAppEvaluate(){
this.$api.dataAnalysis.getAppEvaluate({type:this.now_app_evalute}).then(response => {
if (response.data.success == 1) {
let data = response.data.data
if(this.now_app_evalute==1){
this.commentlistData = []
if(data&&data.length){
data.forEach(e => {
this.toplistData.push({
service_name: e.name,
request_count: e.num,
cover: e.logo,
service_id: {
id: e.app_id,
source: e.source
},
data_service_type1: 124
});
this.commentlistData.push({
add_time: e.add_time,
message: e.content,
picture_path: e.picture_path,
score: e.score,
user_name: e.picture_path,
})
});
}
}
});
},
getAppEvaluate() {
this.$api.dataAnalysis
.getAppEvaluate({ type: this.now_app_evalute })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
if (this.now_app_evalute == 1) {
this.commentlistData = [];
if (data && data.length) {
data.forEach(e => {
this.commentlistData.push({
add_time: e.add_time,
message: e.content,
picture_path: e.picture_path,
score: e.score,
user_name: e.picture_path
});
});
}
} else {
this.starlistTotal = 10;
this.starlistData = [];
var temp = [];
if (data && data.length) {
data.forEach(e => {
temp.push(e.num);
this.starlistData.push({
star: e.name,
count: e.num
});
});
this.starlistTotal = Math.max(...temp);
}
}else{
this.starlistTotal = 10
this.starlistData = []
var temp = []
if(data&&data.length){
data.forEach(e => {
temp.push(e.num)
this.starlistData.push({
star: e.name,
count: e.num,
})
});
this.starlistTotal = Math.max(...temp)
}
}
});
}
})
},
getAppOnlineState() {
this.$api.dataAnalysis.getAppOnlineState().then(response => {
getAppOnlineState(){
this.$api.dataAnalysis.getAppOnlineState().then(response =>{
if (response.data.success == 1) {
let data = response.data.data;
let data = response.data.data
this.single_data = {
num: data.platform,
color: "#274fee",
text: "平台应用"
};
this.single_data1 = {
}
this.single_data1= {
num: data.develop,
color: "#e56600",
text: "开发者应用"
};
}
}
});
})
},
getAppHot() {
this.$api.dataAnalysis.getAppHot().then(response => {
getAppHot(){
this.$api.dataAnalysis.getAppHot().then(response =>{
if (response.data.success == 1) {
let data = response.data.data;
let user = data.user || {};
let ave_search = data.ave_search || {};
let search_app = data.search_app || [];
this.sparkline1 = {
arr: user.line_chart ? user.line_chart.series[0].data : [],
num: user.today_num ? user.today_num : 0,
up: user.ratio ? parseFloat(user.ratio) : 0
};
this.sparkline2 = {
arr: ave_search.line_chart
? ave_search.line_chart.series[0].data
: [],
num: ave_search.today_num ? ave_search.today_num : 0,
up: ave_search.ratio ? parseFloat(ave_search.ratio) : 0
};
this.hotSearchData = [];
search_app.forEach((e, idx) => {
let data = response.data.data
let user = data.user||{}
let ave_search = data.ave_search||{}
let search_app = data.search_app||[]
this.sparkline1={
arr:user.line_chart?user.line_chart.series[0].data:[],
num:user.today_num?user.today_num:0,
up:user.ratio?parseFloat(user.ratio):0
}
this.sparkline2={
arr:ave_search.line_chart?ave_search.line_chart.series[0].data:[],
num:ave_search.today_num?ave_search.today_num:0,
up:ave_search.ratio?parseFloat(ave_search.ratio):0
}
this.hotSearchData = []
search_app.forEach((e,idx) => {
this.hotSearchData.push({
id: e.app_id,
source: e.source,
hotIndex: idx + 1,
id:e.app_id,
source:e.source,
hotIndex:idx + 1,
name: e.name,
count: e.num,
increases: parseFloat(e.ratio)
});
})
});
}
});
})
},
detailHotSearch(item) {
console.log("查看热搜详情");
this.$router.push(`/yygl/0/0/detail/${item.id}?source=${item.source}`);
this.$router.push(`/yygl/0/0/detail/${item.id}?source=${item.source}`)
},
hotSearchSortChange(sortInfo) {
console.log("应用热门搜索: " + sortInfo);
},
changeAppSpChangeBtn(val) {
if (val === 0) {
this.serviceSpData = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
}
]
};
} else {
this.serviceSpData = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460,
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350,
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
}
]
};
}
},
changeAppSpBtn(val) {
if (val === 0) {
this.Yysp_data = [
{ name: "已审批", value: 15 },
{ name: "待审批", value: 45 }
];
this.isyysp = true;
} else {
this.Yysp_data = [
{ name: "申请部署", value: 5 },
{ name: "申请开发", value: 15 }
];
this.isyysp = false;
}
},
changeServiceTypeBtn(index) {
if (index === 0) {
this.mult_data = [
{ name: "基础工具", value: 22 },
{ name: "通用应用", value: 12 },
{ name: "业务应用", value: 10 }
];
} else {
this.mult_data = [
{ name: "基础工具", value: 6 },
{ name: "通用应用", value: 20 },
{ name: "业务应用", value: 14 }
];
if(index == 0){
this.now_app_type = 1
}else{
this.now_app_type = 2
}
// if (index == 0) {
// this.now_app_type = 1;
// } else {
// this.now_app_type = 2;
// }
// this.getAppType();
this.getAppType()
},
changeAppAreaTypeBtn(index) {
if (index === 0) {
this.bar_data_area = {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [322, 454, 566, 399, 222, 167]
};
} else {
this.bar_data_area = {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [222, 354, 466, 499, 422, 367]
};
if(index == 0){
this.now_app_used_area = 1
}else{
this.now_app_used_area = 2
}
// if (index == 0) {
// this.now_app_used_area = 1;
// } else {
// this.now_app_used_area = 2;
// }
// this.getAppUsedArea();
this.getAppUsedArea()
},
changeApplicationFieldBtn(index) {
console.log("xxx: " + index);
},
changeServiceCellBtn(index) {
if (index === 0) {
this.graph_arr = {
legend: {
data: ["被调用次数", "调用次数"]
},
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
]
};
} else {
this.graph_arr = {
legend: {
data: ["被调用次数", "调用次数"]
},
data: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
series: [
{
name: "被调用次数",
data: [
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
333,
444
]
},
{
name: "调用次数",
data: [
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
333,
444,
400,
350,
280,
480,
520,
500,
222
]
}
]
};
if(index==0){
this.now_used_count_day = 7
}else{
this.now_used_count_day = 30
}
// if (index == 0) {
// this.now_used_count_day = 7;
// } else {
// this.now_used_count_day = 30;
// }
// this.getAppUsedCount();
this.getAppUsedCount()
},
changeServeiceApplyCountBtn(index) {
if (index === 0) {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 22
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
];
} else {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 35
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 27
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 25
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 11
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
];
}
// console.log("应用部署排名分析: " + index);
// this.now_app_deploy = index + 1;
// this.getAppDeployRank();
console.log("应用部署排名分析: " + index);
this.now_app_deploy = index+1
this.getAppDeployRank()
},
changeAppInfoBtn(index) {
this.appInfoBtnIndex = index;
this.now_app_evalute = index + 1;
// this.getAppEvaluate();
// console.log("应用评价及评分: " + index);
this.now_app_evalute = index+1
this.getAppEvaluate()
console.log("应用评价及评分: " + index);
},
changeAppTotalChangeBtn(index) {
if (index === 0) {
this.line_data = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "开发者应用",
data: [
300,
200,
150,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222
]
},
{
name: "平台应用",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
100,
200,
350,
280,
260,
320,
500,
222
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350
]
}
]
};
} else {
this.line_data = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
seriesData: [
{
name: "开发者",
data: [
300,
100,
250,
280,
380,
220,
300,
122,
200,
300,
550,
480,
380,
420,
300,
122,
200,
250,
266,
380,
220,
350,
466,
250,
400,
250,
266,
380,
220,
350
]
},
{
name: "平台应用",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350,
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520
]
}
]
};
if(index == 0){
this.now_app_count = 14
}else{
this.now_app_count = 30
}
// if (index == 0) {
// this.now_app_count = 14;
// } else {
// this.now_app_count = 30;
// }
// this.getAppCount();
this.getAppCount()
}
}
};
......@@ -1851,30 +720,30 @@ export default {
.hot-line-chart {
height: calc(100% - 36px);
}
.single-charts {
.single-charts{
float: left;
width: 50%;
}
.sparkline-text {
.sparkline-text{
width: 100%;
line-height: 20px;
}
.sparkline-text span:nth-of-type(1) {
.sparkline-text span:nth-of-type(1){
font-size: 20px;
color: #274fee;
}
.sparkline-text span:nth-of-type(2) {
.sparkline-text span:nth-of-type(2){
font-size: 12px;
width: 62px;
float: right;
text-align: center;
line-height: 20px;
height: 20px;
height: 20px;
border-radius: 3px;
margin-top: 3px;
margin-right: 2px;
}
.sparkline-text-user span:nth-of-type(1) {
.sparkline-text-user span:nth-of-type(1){
font-size: 20px;
color: #e56600;
}
......@@ -1891,4 +760,4 @@ export default {
word-break: break-all;
white-space: nowrap;
}
</style>
\ No newline at end of file
</style>
src/pages/data-analysis/my-service.vue
View file @ db0a7b41
......@@ -40,7 +40,6 @@
v-if="left_1_state == 0"
class="block-radius-content"
:data="mult_data_state"
:isPercent="false"
:show_center_data="false"
:bar_width="10 "
></multiple-circle>
......@@ -166,7 +165,7 @@
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceTotalChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="line_data"></line-chart>
<line-chart class="block-radius-content" :data="line_data"></line-chart>
</block-radius>
</el-col>
</el-row>
......@@ -242,25 +241,9 @@
<BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" />
</block-radius>
</el-col>
<el-col :span="12" class="in_block">
<block-radius
:show_header="true"
title="服务审批变化趋势"
class="block"
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceSpChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="serviceSpData"></line-chart>
</block-radius>
</el-col>
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务审批状态分析" class="block">
<multiple-circle
class="block-radius-content"
:data="fwsp_data"
:text="fwsp_text"
:isFwsp="true"
></multiple-circle>
<el-col :span="18" class="in_block default">
<block-radius class="block">
<img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
</block-radius>
</el-col>
</el-row>
......@@ -297,7 +280,7 @@ export default {
},
data: () => ({
overview: {
serviceTotal: 28
serviceTotal: 0
},
left_1_state: 0,
left_2_state: 0,
......@@ -308,23 +291,8 @@ export default {
right_2_state: 0,
right_3_state: 0,
last_id: 0,
mult_data_state: [
{ name: "正常", value: 22 },
{ name: "警告", value: 12 },
{ name: "错误", value: 14 },
{ name: "未使用", value: 19 }
],
mult_data: [
{ name: "数据服务", value: 22 },
{ name: "时空服务", value: 12 },
{ name: "视频服务", value: 14 },
{ name: "感知服务", value: 14 },
{ name: "综合服务", value: 1 }
],
fwsp_data: [
{ name: "已审批", value: 25 },
{ name: "待审批", value: 75 }
],
mult_data_state: [],
mult_data: [],
spIndicatorStyles1: false,
spRefLineStyles3: {
stroke: "#d14",
......@@ -340,291 +308,59 @@ export default {
fill: "#e56600"
},
sparkline1: {
num: 8848,
up: 32,
arr: [20, 29, 40, 33, 45, 58]
num:0,
up:0,
arr:[]
},
sparkline2: {
num: 9964,
up: 20,
arr: [33, 29, 36, 33, 45, 58]
num:0,
up:0,
arr:[]
},
text: "服务总数",
fwsp_text: "服务审批",
single_data: {
num: 32,
num: 0,
color: "#25bdb1",
text: "共享"
},
single_data1: {
num: 28,
num: 0,
color: "#f5ab4c",
text: "受限"
},
single_data2: {
num: 30,
num: 0,
color: "#e15260",
text: "敏感"
},
serviceSpData: {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
}
]
},
line_data: {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
xAxisData: [],
seriesData: [
{
name: "上架中",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222
]
name: "",
data: []
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350
]
name: "",
data: []
}
]
},
das_data: {
data: 85,
data: 90,
text: "健康占比"
},
bar_data: {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [322, 454, 566, 399, 222, 167]
legendData: [],
seriesData: []
},
bar_data_org: {
legendData: [
"省公安厅",
"省发改委",
"贵州省公安厅",
"贵州省发改委",
"贵州省公安厅"
],
seriesData: [322, 454, 266, 399, 222, 167]
legendData: [],
seriesData: []
},
toplistData: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 22
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
], // 服务调用排名分析
toplistTargetValue: 40, // 服务调用排名分析 目标值
commentlistData: [
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "大锤",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "阿水",
add_time: "2020-08-01 19:00:00",
score: 3,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
}
], // 服务评价
toplistData: [], // 服务调用排名分析
toplistTargetValue: 0, // 服务调用排名分析 目标值
commentlistData: [], // 服务评价
linelistData: [
{
count: 6,
......@@ -686,67 +422,28 @@ export default {
], // 服务评分
starlistTotal: 15,
hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [
{
id: 1,
hotIndex: 1,
name: "地图视频融合服务",
count: 9964,
increases: 568
},
{
id: 1,
hotIndex: 2,
name: "消息队列服务",
count: 8964,
increases: 528
},
{
id: 1,
hotIndex: 3,
name: "即时通讯服务",
count: 7864,
increases: 89
},
{
id: 1,
hotIndex: 4,
name: "即时通讯服务这里最多显示十五字地图视频融合服务",
count: 4964,
increases: -8
},
{
id: 1,
hotIndex: 5,
name: "即时通讯服务这里最多显示十五字地图视频融合服务",
count: 3364,
increases: -18
}
], // 热门搜索 数据
hotSearchData: [], // 热门搜索 数据
graph_arr: {
legend: {
data: ["被调用次数", "调用次数"]
data: []
},
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
]
data: [],
series: [{ data: [] }, { data: [] }]
},
topology_datas: { }
topology_datas: {}
}),
mounted() {
// this.getServiceOverview();
// this.getServiceHealth();
// this.getServiceTrend();
// this.getServiceType();
// this.getServiceSectorse();
// this.getServiceOrg();
// this.getServiceOpenness();
// this.getServiceRequest();
// this.getServiceOnlineState();
// this.getServiceEstimated();
// this.getServiceHotSearch();
this.getServiceOverview();
this.getServiceHealth();
this.getServiceTrend();
this.getServiceType();
this.getServiceSectorse();
this.getServiceOrg();
this.getServiceOpenness();
this.getServiceRequest();
this.getServiceOnlineState();
this.getServiceEstimated();
this.getServiceHotSearch();
this.hotSearchHeader = [
{
label: "服务排名",
......@@ -777,46 +474,33 @@ export default {
this.getTopologyData();
},
methods: {
getServiceHotSearch() {
getServiceHotSearch(){
this.$api.dataAnalysis.getServiceHotSearch().then(response => {
if (response.data.success == 1) {
let data = response.data.data;
let data = response.data.data
this.sparkline1 = {
num: data.search_user.count,
up:
data.trend == "up"
? data.search_user.per
: data.trend == "down"
? 0 - data.search_user.per
: data.search_user.per,
arr: data.search_user_trend.seriesData
};
num:data.search_user.count,
up:data.trend=='up'?data.search_user.per:data.trend=='down'?0-data.search_user.per:data.search_user.per,
arr:data.search_user_trend.seriesData
}
this.sparkline2 = {
num: data.search_user_avg.count,
up:
data.trend == "up"
? data.search_user_avg.per
: data.trend == "down"
? 0 - data.search_user_avg.per
: data.search_user_avg.per,
arr: data.search_user_avg_trend.seriesData
};
num:data.search_user_avg.count,
up:data.trend=='up'?data.search_user_avg.per:data.trend=='down'?0-data.search_user_avg.per:data.search_user_avg.per,
arr:data.search_user_avg_trend.seriesData
}
// top5_rank
this.hotSearchData = [];
if (data.top5_rank && data.top5_rank.length) {
data.top5_rank.forEach((e, idx) => {
this.hotSearchData.push({
id: e.service_id,
hotIndex: top_rank,
name: e.service_name,
count: e.search_count,
increases:
e.trend == "up"
? e.search_user.per
: e.trend == "down"
? 0 - e.search_user.per
: e.search_user.per
});
this.hotSearchData = []
if(data.top5_rank&&data.top5_rank.length){
data.top5_rank.forEach((e,idx) => {
this.hotSearchData.push(
{
id:e.service_id,
hotIndex: top_rank,
name: e.service_name,
count: e.search_count,
increases: e.trend=='up'?e.search_user.per:e.trend=='down'?0-e.search_user.per:e.search_user.per
}
)
});
}
}
......@@ -927,718 +611,35 @@ export default {
});
},
detailHotSearch(item) {
this.$router.push("/fwgl/0/0/servicedetail/" + item.id);
},
changeServeiceSpChangeBtn(val) {
if (val === 0) {
this.serviceSpData = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
}
]
};
} else {
this.serviceSpData = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460,
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350,
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
}
]
};
}
this.$router.push('/fwgl/0/0/servicedetail/'+item.id)
},
changeServiceTypeBtn(index) {
if (index === 0) {
this.mult_data = [
{ name: "数据服务", value: 22 },
{ name: "时空服务", value: 12 },
{ name: "视频服务", value: 14 },
{ name: "感知服务", value: 14 },
{ name: "综合服务", value: 1 }
];
} else {
this.mult_data = [
{ name: "数据服务", value: 12 },
{ name: "时空服务", value: 15 },
{ name: "视频服务", value: 13 },
{ name: "感知服务", value: 13 },
{ name: "综合服务", value: 1 }
];
}
// this.left_2_state = index;
// this.getServiceType();
this.left_2_state = index;
this.getServiceType();
},
changeApplicationFieldBtn(index) {
if (index === 0) {
this.bar_data = {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [322, 454, 566, 399, 222, 167]
};
} else {
this.bar_data = {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [422, 254, 366, 299, 422, 267]
};
}
// this.left_3_state = index;
// this.getServiceSectorse();
this.left_3_state = index;
this.getServiceSectorse();
},
changeServeiceApplyCountBtn(index) {
if (index === 0) {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 22
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
];
} else {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 35
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 27
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 25
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 11
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
];
}
// this.right_0_state = index;
// this.getServiceRequest();
this.right_0_state = index;
this.getServiceRequest();
},
changeServeiceInfoBtn(index) {
this.right_3_state = index;
// this.getServiceEstimated();
this.getServiceEstimated();
},
changeOpenessBtnindex(index) {
if (index === 1) {
this.single_data = {
num: 32,
color: "#25bdb1",
text: "共享"
};
this.single_data1 = {
num: 28,
color: "#f5ab4c",
text: "受限"
};
this.single_data2 = {
num: 30,
color: "#e15260",
text: "敏感"
};
} else {
this.single_data = {
num: 42,
color: "#25bdb1",
text: "共享"
};
this.single_data1 = {
num: 18,
color: "#f5ab4c",
text: "受限"
};
this.single_data2 = {
num: 20,
color: "#e15260",
text: "敏感"
};
}
// this.right_2_state = index;
// this.getServiceOpenness();
this.right_2_state = index;
this.getServiceOpenness();
},
changeServiceCellBtn(index) {
if (index === 0) {
this.graph_arr = {
legend: {
data: ["被调用次数", "调用次数"]
},
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
]
};
} else {
this.graph_arr = {
legend: {
data: ["被调用次数", "调用次数"]
},
data: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
series: [
{
name: "被调用次数",
data: [
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
333,
444
]
},
{
name: "调用次数",
data: [
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
333,
444,
400,
350,
280,
480,
520,
500,
222
]
}
]
};
}
// this.right_1_state = index;
// this.getServiceTrend();
this.right_1_state = index;
this.getServiceTrend();
},
changeServeiceTotalChangeBtn(index) {
if (index === 0) {
this.line_data = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "上架中",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350
]
}
]
};
} else {
this.line_data = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
seriesData: [
{
name: "上架中",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350,
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520
]
}
]
};
}
// this.center_3_state = index;
// this.getServiceOnlineState();
this.center_3_state = index;
this.getServiceOnlineState();
},
getTopologyData() {
this.$api.workbench.getServiceTopology().then(response => {
......@@ -1646,25 +647,12 @@ export default {
});
},
changeServiceStateBtn(index) {
if (index === 0) {
this.mult_data_state = [
{ name: "正常", value: 22 },
{ name: "警告", value: 12 },
{ name: "错误", value: 14 },
{ name: "未使用", value: 19 }
];
this.left_1_state = index;
if (index == 0) {
this.getServiceHealth();
} else {
this.mult_data_state = [
{ name: "已调用", value: 33 },
{ name: "未调用", value: 23 }
];
this.a();
}
// this.left_1_state = index;
// if (index == 0) {
// this.getServiceHealth();
// } else {
// this.a();
// }
}
}
};
......@@ -1810,4 +798,4 @@ export default {
word-break: break-all;
white-space: nowrap;
}
</style>
\ No newline at end of file
</style>
src/pages/data-analysis/org-application.vue
View file @ db0a7b41
<template>
<div>
组织-应用
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.data_analysis") }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.my_application_data_analysis") }}</el-breadcrumb-item>
</el-breadcrumb>
<el-row class="in_analysis">
<!-- 可横向铺满 -->
<el-col :span="6" class="in_left">
<el-row>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="应用总体概况" class="block">
<div class="left_1">
<div class="left_block">
<div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
<div class="left_1_msg">
<div class="left_1_title">应用总数</div>
<div class="left_1_num">{{overview.total}}</div>
</div>
</div>
<div class="chain">
月环比
<span
class="chain_mid"
:class="overview.month_chain >= 0 ? 'chain_up' : 'chain_down'"
>
{{ Math.abs(overview.month_chain) }}%
<img
:src="overview.month_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
/>
</span>周环比
<span :class="overview.week_chain >= 0 ? 'chain_up' : 'chain_down'">
{{ Math.abs(overview.week_chain) }}%
<img
:src="overview.week_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
/>
</span>
</div>
<div class="left_1_line"></div>
<div class="left_1_l_bottom">
日均被部署次数
<span class="left_1_l_bottom_msg">{{overview.day_count}}</span>（次）
</div>
</div>
<div class="left_1_right">
<WaterPolo :datas="water_polo" class="water_polo" />
</div>
</div>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="应用调用次数分析"
:buttons_arr="['近7天', '近30天']"
@changeButton="changeServiceCellBtn"
class="block"
>
<Graph v-if="JSON.stringify(graph_arr)!=='{}'" :data="graph_arr" />
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="应用类型分析"
:buttons_arr="['构建的应用', '申请的应用 ']"
@changeButton="changeServiceTypeBtn"
class="block"
>
<multiple-circle class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="12" class="in_center">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="应用使用领域统计"
:buttons_arr="['构建的应用', '申请的应用']"
@changeButton="changeAppAreaTypeBtn"
class="block"
>
<BarChart
:data="bar_data_area"
:colors="['#1034eb', '#4274f8']"
:bar_border_radius="[20, 20, 0, 0]"
:bar_width="26"
:show_split="true"
/>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="应用热门搜索" class="block">
<div class="block-radius-content service-hot-search">
<div class="left-content">
<div class="hot-line">
<p class="hot-line-title">搜索用户数</p>
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text">
<span>{{sparkline1.num}}</span>
<span
:style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
>
{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}%
<img
v-if="sparkline1.up>0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt />
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
:data="sparkline1.arr"
:limit="sparkline1.arr.length"
:styles="spCurveStyles2"
/>
</sparkline>
</div>
</div>
<div class="hot-line">
<p class="hot-line-title">人均搜索次数</p>
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text sparkline-text-user">
<span>{{sparkline2.num}}</span>
<span
:style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
>
{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}%
<img
v-if="sparkline2.up>0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt />
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
:data="sparkline2.arr"
:limit="sparkline2.arr.length"
:styles="spCurveStyles3"
/>
</sparkline>
</div>
</div>
</div>
<div class="right-content apaas_scroll">
<apass-table
class="hot-search-table"
:header="hotSearchHeader"
:data="hotSearchData"
:padding-left="0"
@sort-change="hotSearchSortChange"
></apass-table>
</div>
</div>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
class="block"
:show_header="true"
title="应用总数变化趋势"
:buttons_arr="['近14天', '近30天']"
@changeButton="changeAppTotalChangeBtn"
>
<line-chart
v-if="JSON.stringify(line_data)!=='{}'"
class="block-radius-content"
:data="line_data"
:zzfw="true"
></line-chart>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="in_right">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="应用部署排名分析"
:buttons_arr="['被部署次数', '部署次数']"
@changeButton="changeServeiceApplyCountBtn"
class="block"
>
<toplist
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
></toplist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="应用评价及评分"
:buttons_arr="['应用评价', '应用评分']"
@changeButton="changeAppInfoBtn"
class="block"
>
<commentlist
v-if="appInfoBtnIndex == 0"
class="block-radius-content"
:data="commentlistData"
></commentlist>
<starlist
v-else
class="block-radius-content"
:options="starlistData"
:total="starlistTotal"
style="margin-top: 30px;height: calc(100% - 51px);"
></starlist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block" :show_header="true" title="应用在线状态统计">
<single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
<single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
</block-radius>
</el-col>
</el-row>
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="应用来源机构分析" class="block">
<BarChart :data="bar_data_org" :colors="['#274fee', '#274fee']" :x_router="30" />
</block-radius>
</el-col>
<el-col :span="12" class="in_block">
<block-radius
:show_header="true"
title="应用审批变化趋势"
class="block"
:buttons_arr="['近14天', '近30天']"
@changeButton="changeAppSpChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="serviceSpData"></line-chart>
</block-radius>
</el-col>
<el-col :span="6" class="in_block">
<block-radius
:show_header="true"
title="应用审批状态分析"
class="block"
:buttons_arr="['申请状态', '待审批']"
@changeButton="changeAppSpBtn"
>
<multiple-circle
class="block-radius-content"
:data="Yysp_data"
:text="Yysp_text"
:isFwsp="isyysp"
></multiple-circle>
</block-radius>
</el-col>
</el-row>
</div>
</template>
<script>
import BlockRadius from "@/components/general/block-radius";
import multipleCircle from "@/components/e-charts/multiple_circle";
import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
import Commentlist from "@/components/e-charts/commentlist";
import BarChart from "@/components/e-charts/bar-chart";
import ApassTable from "@/components/apass-table";
import Graph from "@/components/e-charts/graph";
import WaterPolo from "@/components/e-charts/water-polo";
export default {
components: {
BlockRadius,
multipleCircle,
singleCircle,
Toplist,
Starlist,
Commentlist,
lineChart,
BarChart,
ApassTable,
Graph,
WaterPolo
},
data: () => ({
isyysp: true,
water_polo: [64, 36],
overview: {
month_chain: 12,
week_chain: 20,
total: 1324,
day_count: 21
},
now_used_count_day: 7,
now_app_type: 1,
now_app_used_area: 1,
now_app_count: 14,
now_app_deploy: 1,
now_app_evalute: 1,
mult_data: [
{ name: "基础工具", value: 22 },
{ name: "通用应用", value: 12 },
{ name: "业务应用", value: 10 }
],
text: "应用总数",
spIndicatorStyles1: false,
spRefLineStyles3: {
stroke: "#d14",
strokeOpacity: 0,
strokeDasharray: "2, 2"
},
spCurveStyles2: {
stroke: "#274fee",
fill: "#274fee"
},
Yysp_data: [
{ name: "已审批", value: 15 },
{ name: "待审批", value: 45 }
],
Yysp_text: "应用审批",
serviceSpData: {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
}
]
},
spCurveStyles3: {
stroke: "#e56600",
fill: "#e56600"
},
sparkline1: {
arr: [1, 2, 3, 4, 8, 9, 10, 21],
num: 21,
up: 15.3
},
sparkline2: {
arr: [1, 2, 3, 4, 8, 9, 10, 21],
num: 18,
up: -19.3
},
single_data: {
num: 54,
color: "#274fee",
text: "平台应用"
},
single_data1: {
num: 56,
color: "#e56600",
text: "开发者应用"
},
line_data: {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "开发者应用",
data: [
300,
200,
150,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222
]
},
{
name: "平台应用",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
100,
200,
350,
280,
260,
320,
500,
222
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350
]
}
]
},
bar_data_org: {
legendData: [
"省公安厅",
"省发改委",
"贵州省公安厅",
"贵州省发改委",
"贵州省公安厅"
],
seriesData: [322, 454, 266, 399, 222, 167]
},
bar_data_area: {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [322, 454, 566, 399, 222, 167]
},
graph_arr: {
legend: {
data: ["被调用次数", "调用次数"]
},
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
]
},
toplistData: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 22
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
], // 应用部署排名分析
toplistTargetValue: 150, // 应用部署排名分析 目标值
appInfoBtnIndex: 0,
commentlistData: [
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "大锤",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "阿水",
add_time: "2020-08-01 19:00:00",
score: 3,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
}
], // 应用评价
starlistData: [
{
star: 5,
count: 5,
unit: "个"
},
{
star: 4,
count: 4,
unit: "个"
},
{
star: 3,
count: 3,
unit: "个"
},
{
star: 2,
count: 2,
unit: "个"
},
{
star: 1,
count: 1,
unit: "个"
}
], // 应用评分
starlistTotal: 10,
hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [
{
id: 1,
hotIndex: 1,
name: "地图视频融合服务",
count: 9964,
increases: 568
},
{
id: 1,
hotIndex: 2,
name: "消息队列服务",
count: 8964,
increases: 528
},
{
id: 1,
hotIndex: 3,
name: "即时通讯服务",
count: 7864,
increases: 89
},
{
id: 1,
hotIndex: 4,
name: "即时通讯服务这里最多显示十五字地图视频融合服务",
count: 4964,
increases: -8
},
{
id: 1,
hotIndex: 5,
name: "即时通讯服务这里最多显示十五字地图视频融合服务",
count: 3364,
increases: -18
}
] // 热门搜索 数据
}),
mounted() {
// this.getAppOverview();
// this.getAppUsedCount();
// this.getAppType();
// this.getAppSourceOri();
// this.getAppUsedArea();
// this.getAppCount();
// this.getAppDeployRank();
// this.getAppEvaluate();
// this.getAppOnlineState();
// this.getAppHot();
this.hotSearchHeader = [
{
label: "排名",
type: "hot-index",
width: 100,
align: "center"
},
{
label: "应用名称",
prop: "name",
type: "button",
callback: this.detailHotSearch
},
{
label: "搜索次数",
prop: "count",
width: 100,
align: "center"
},
{
label: "日涨幅",
prop: "increases",
width: 100,
sortType: "0", // 0：升序 1：降序
align: "center"
}
];
},
methods: {
getData() {}
getAppOverview() {
this.$api.dataAnalysis.getAppOverview().then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.overview = {
month_chain: parseFloat(data.month_lr),
week_chain: parseFloat(data.week_lr),
total: data.total,
day_count: data.ave_deploy_count
};
this.water_polo = [
parseFloat(data.developable_ratio),
parseFloat(data.un_developable_ratio)
];
}
});
},
getAppUsedCount() {
this.$api.dataAnalysis
.getAppUsedCount({ day: this.now_used_count_day })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.graph_arr = data;
}
});
},
getAppType() {
this.$api.dataAnalysis
.getAppType({ type: this.now_app_type })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.mult_data = data.series[0].data;
}
});
},
getAppSourceOri() {
this.$api.dataAnalysis.getAppSourceOri().then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.bar_data_org = {
legendData: data.xAxis.data,
seriesData: data.series[0].data
};
}
});
},
getAppUsedArea() {
this.$api.dataAnalysis
.getAppUsedArea({ type: this.now_app_used_area })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.bar_data_area = {
legendData: data.xAxis.data,
seriesData: data.series[0].data
};
}
});
},
getAppCount() {
this.$api.dataAnalysis
.getAppCount({ day: this.now_app_count })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.line_data = {
xAxisData: data.data,
seriesData: data.series
};
}
});
},
getAppDeployRank() {
this.$api.dataAnalysis
.getAppDeployRank({ type: this.now_app_deploy })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.toplistData = [];
if (data && data.length) {
this.toplistTargetValue = data[0].num;
data.forEach(e => {
this.toplistData.push({
service_name: e.name,
request_count: e.num,
cover: e.logo,
service_id: {
id: e.app_id,
source: e.source
},
data_service_type1: 124
});
});
}
}
});
},
getAppEvaluate() {
this.$api.dataAnalysis
.getAppEvaluate({ type: this.now_app_evalute })
.then(response => {
if (response.data.success == 1) {
let data = response.data.data;
if (this.now_app_evalute == 1) {
this.commentlistData = [];
if (data && data.length) {
data.forEach(e => {
this.commentlistData.push({
add_time: e.add_time,
message: e.content,
picture_path: e.picture_path,
score: e.score,
user_name: e.picture_path
});
});
}
} else {
this.starlistTotal = 10;
this.starlistData = [];
var temp = [];
if (data && data.length) {
data.forEach(e => {
temp.push(e.num);
this.starlistData.push({
star: e.name,
count: e.num
});
});
this.starlistTotal = Math.max(...temp);
}
}
}
});
},
getAppOnlineState() {
this.$api.dataAnalysis.getAppOnlineState().then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.single_data = {
num: data.platform,
color: "#274fee",
text: "平台应用"
};
this.single_data1 = {
num: data.develop,
color: "#e56600",
text: "开发者应用"
};
}
});
},
getAppHot() {
this.$api.dataAnalysis.getAppHot().then(response => {
if (response.data.success == 1) {
let data = response.data.data;
let user = data.user || {};
let ave_search = data.ave_search || {};
let search_app = data.search_app || [];
this.sparkline1 = {
arr: user.line_chart ? user.line_chart.series[0].data : [],
num: user.today_num ? user.today_num : 0,
up: user.ratio ? parseFloat(user.ratio) : 0
};
this.sparkline2 = {
arr: ave_search.line_chart
? ave_search.line_chart.series[0].data
: [],
num: ave_search.today_num ? ave_search.today_num : 0,
up: ave_search.ratio ? parseFloat(ave_search.ratio) : 0
};
this.hotSearchData = [];
search_app.forEach((e, idx) => {
this.hotSearchData.push({
id: e.app_id,
source: e.source,
hotIndex: idx + 1,
name: e.name,
count: e.num,
increases: parseFloat(e.ratio)
});
});
}
});
},
detailHotSearch(item) {
console.log("查看热搜详情");
this.$router.push(`/yygl/0/0/detail/${item.id}?source=${item.source}`);
},
hotSearchSortChange(sortInfo) {
console.log("应用热门搜索: " + sortInfo);
},
changeAppSpChangeBtn(val) {
if (val === 0) {
this.serviceSpData = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
}
]
};
} else {
this.serviceSpData = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460,
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350,
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
}
]
};
}
},
changeAppSpBtn(val) {
if (val === 0) {
this.Yysp_data = [
{ name: "已审批", value: 15 },
{ name: "待审批", value: 45 }
];
this.isyysp = true;
} else {
this.Yysp_data = [
{ name: "申请部署", value: 5 },
{ name: "申请开发", value: 15 }
];
this.isyysp = false;
}
},
changeServiceTypeBtn(index) {
if (index === 0) {
this.mult_data = [
{ name: "基础工具", value: 22 },
{ name: "通用应用", value: 12 },
{ name: "业务应用", value: 10 }
];
} else {
this.mult_data = [
{ name: "基础工具", value: 6 },
{ name: "通用应用", value: 20 },
{ name: "业务应用", value: 14 }
];
}
// if (index == 0) {
// this.now_app_type = 1;
// } else {
// this.now_app_type = 2;
// }
// this.getAppType();
},
changeAppAreaTypeBtn(index) {
if (index === 0) {
this.bar_data_area = {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [322, 454, 566, 399, 222, 167]
};
} else {
this.bar_data_area = {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [222, 354, 466, 499, 422, 367]
};
}
// if (index == 0) {
// this.now_app_used_area = 1;
// } else {
// this.now_app_used_area = 2;
// }
// this.getAppUsedArea();
},
changeApplicationFieldBtn(index) {
console.log("xxx: " + index);
},
changeServiceCellBtn(index) {
if (index === 0) {
this.graph_arr = {
legend: {
data: ["被调用次数", "调用次数"]
},
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
]
};
} else {
this.graph_arr = {
legend: {
data: ["被调用次数", "调用次数"]
},
data: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
series: [
{
name: "被调用次数",
data: [
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
333,
444
]
},
{
name: "调用次数",
data: [
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
333,
444,
400,
350,
280,
480,
520,
500,
222
]
}
]
};
}
// if (index == 0) {
// this.now_used_count_day = 7;
// } else {
// this.now_used_count_day = 30;
// }
// this.getAppUsedCount();
},
changeServeiceApplyCountBtn(index) {
if (index === 0) {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 22
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
];
} else {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 35
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 27
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 25
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 11
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
];
}
// console.log("应用部署排名分析: " + index);
// this.now_app_deploy = index + 1;
// this.getAppDeployRank();
},
changeAppInfoBtn(index) {
this.appInfoBtnIndex = index;
this.now_app_evalute = index + 1;
// this.getAppEvaluate();
// console.log("应用评价及评分: " + index);
},
changeAppTotalChangeBtn(index) {
if (index === 0) {
this.line_data = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "开发者应用",
data: [
300,
200,
150,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222
]
},
{
name: "平台应用",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
100,
200,
350,
280,
260,
320,
500,
222
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350
]
}
]
};
} else {
this.line_data = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
seriesData: [
{
name: "开发者",
data: [
300,
100,
250,
280,
380,
220,
300,
122,
200,
300,
550,
480,
380,
420,
300,
122,
200,
250,
266,
380,
220,
350,
466,
250,
400,
250,
266,
380,
220,
350
]
},
{
name: "平台应用",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350,
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520
]
}
]
};
}
// if (index == 0) {
// this.now_app_count = 14;
// } else {
// this.now_app_count = 30;
// }
// this.getAppCount();
}
}
};
</script>
<style scoped>
.in_analysis {
padding: 0 10px 10px;
height: 100%;
width: 100%;
min-width: 1700px;
}
.in_l {
}
.in_r {
}
.in_c {
}
.in_block {
height: 280px;
padding: 10px;
}
.height_2x {
height: 560px;
}
.block {
width: 100%;
height: 100%;
}
.left_1 {
height: 100%;
display: flex;
justify-content: space-around;
}
.left_block {
width: 280px;
height: 100%;
padding: 10px 0 0 0;
}
.left_1_l {
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.left_1_title {
width: 100%;
}
.left_1_num {
font-size: 32px;
color: #515fe7;
width: 100%;
}
.left_1_img {
width: 120px;
height: 120px;
display: inline-block;
}
.chain {
color: #58617a;
font-size: 14px;
padding: 10px 0 10px 10px;
}
.chain_down {
background-color: #fbe8e8;
border-radius: 3px;
padding: 2px 4px;
font-size: 12px;
margin-left: 8px;
color: #e15260;
}
.chain_up {
background-color: #e7fdfc;
border-radius: 3px;
padding: 1px 4px;
font-size: 12px;
margin-left: 8px;
color: #25bdb1;
}
.chain_mid {
margin-right: 20px;
}
.left_1_l_bottom {
color: #58617a;
padding: 10px;
}
.left_1_l_bottom_msg {
margin-left: 20px;
}
.left_1_msg {
display: inline-block;
width: 120px;
padding: 0 0 10px 10px;
}
.left_1_line {
width: 90%;
margin-left: 5%;
height: 1px;
background-color: #f2f2f2;
}
.left_1_right {
width: 120px;
height: 100%;
display: inline-block;
}
.water_polo {
width: 110px;
margin: 0 auto 20px;
}
.default {
text-align: center;
}
.default_img {
width: 330px;
height: 230px;
}
.block-radius-content {
height: calc(100% - 36px);
margin-top: 15px;
}
.service-hot-search {
display: flex;
justify-content: flex-start;
align-items: stretch;
height: calc(100% - 21px);
margin-top: 0;
}
.service-hot-search > .left-content {
width: 260px;
flex-shrink: 0;
padding: 0 20px;
box-sizing: border-box;
margin-right: 10px;
}
.service-hot-search > .right-content {
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
}
.hot-line {
height: 50%;
}
.hot-line-title {
font-size: 14px;
line-height: 36px;
color: #8890a7;
}
.hot-line-chart {
height: calc(100% - 36px);
}
.single-charts {
float: left;
width: 50%;
}
.sparkline-text {
width: 100%;
line-height: 20px;
}
.sparkline-text span:nth-of-type(1) {
font-size: 20px;
color: #274fee;
}
.sparkline-text span:nth-of-type(2) {
font-size: 12px;
width: 62px;
float: right;
text-align: center;
line-height: 20px;
height: 20px;
border-radius: 3px;
margin-top: 3px;
margin-right: 2px;
}
.sparkline-text-user span:nth-of-type(1) {
font-size: 20px;
color: #e56600;
}
</style>
<style>
.hot-search-table .el-table td,
.hot-search-table .el-table th {
padding: 6px 0;
}
.hot-search-table .el-table div.row_action {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
</style>
\ No newline at end of file
src/pages/data-analysis/org-service.vue
View file @ db0a7b41
<template>
<div>
组织-服务
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">
{{
$t("lang.data_analysis")
}}
</el-breadcrumb-item>
<el-breadcrumb-item>
{{
$t("lang.my_service_data_analysis")
}}
</el-breadcrumb-item>
</el-breadcrumb>
<el-row class="in_analysis">
<!-- 可横向铺满 -->
<el-col :span="6" class="in_left">
<el-row>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="服务总体概况" class="block">
<div class="left_1">
<div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
<div class="left_1_title">服务总数</div>
<div class="left_1_num">{{ overview.serviceTotal }}</div>
</div>
<dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
</div>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务状态统计"
:buttons_arr="['健康状态', '调用状态']"
@changeButton="changeServiceStateBtn"
class="block"
>
<multiple-circle
v-if="left_1_state == 0"
class="block-radius-content"
:data="mult_data_state"
:isPercent="false"
:show_center_data="false"
:bar_width="10 "
></multiple-circle>
<starlist
v-else
class="block-radius-content"
:options="linelistData"
:show_star="false"
style="margin-top: 30px;height: calc(100% - 51px);"
></starlist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务类型分析"
:buttons_arr="['发布的服务', '调用的服务']"
@changeButton="changeServiceTypeBtn"
class="block"
>
<multiple-circle class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务应用领域统计"
:buttons_arr="['发布的服务', '调用的服务']"
@changeButton="changeApplicationFieldBtn"
class="block"
>
<BarChart :data="bar_data" />
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="12" class="in_center">
<el-row>
<el-col :span="24" class="in_block height_2x">
<block-radius :show_header="true" title="运行拓扑图" class="block">
<Topology class="topology" :datas="topology_datas" />
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="服务热门搜索" class="block">
<div class="block-radius-content service-hot-search">
<div class="left-content">
<div class="hot-line">
<p class="hot-line-title">搜索用户数</p>
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text">
<span>{{sparkline1.num}}</span>
<span
:style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
>
{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}%
<img
v-if="sparkline1.up>0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt />
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
:data="sparkline1.arr"
:limit="sparkline1.arr.length"
:styles="spCurveStyles2"
/>
</sparkline>
</div>
</div>
<div class="hot-line">
<p class="hot-line-title">人均搜索次数</p>
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text sparkline-text-user">
<span>{{sparkline2.num}}</span>
<span
:style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
>
{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}%
<img
v-if="sparkline2.up>0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt />
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
:data="sparkline2.arr"
:limit="sparkline2.arr.length"
:styles="spCurveStyles3"
/>
</sparkline>
</div>
</div>
</div>
<div class="right-content apaas_scroll">
<apass-table
class="hot-search-table"
:header="hotSearchHeader"
:data="hotSearchData"
:padding-left="0"
></apass-table>
</div>
</div>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
class="block"
:show_header="true"
title="服务总数变化趋势"
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceTotalChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="line_data"></line-chart>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="in_right">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务调用排名分析"
:buttons_arr="['被调用次数', '调用次数']"
@changeButton="changeServeiceApplyCountBtn"
class="block"
>
<toplist
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
></toplist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务调用次数分析"
:buttons_arr="['近7天', '近30天']"
@changeButton="changeServiceCellBtn"
class="block"
>
<Graph :data="graph_arr" />
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务开放程度统计"
:buttons_arr="['发布的服务', '调用的服务']"
@changeButton="changeOpenessBtnindex"
class="block"
>
<single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
<single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
<single-circle class="block-radius-content single-charts" :data="single_data2"></single-circle>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务评价及评分"
:buttons_arr="['服务评价', '服务评分']"
@changeButton="changeServeiceInfoBtn"
class="block"
>
<commentlist
v-if="right_3_state == 0"
class="block-radius-content"
:data="commentlistData"
></commentlist>
<starlist
v-else
class="block-radius-content"
:options="starlistData"
:total="starlistTotal"
style="margin-top: 30px;height: calc(100% - 51px);"
></starlist>
</block-radius>
</el-col>
</el-row>
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务来源机构分析" class="block">
<BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" />
</block-radius>
</el-col>
<el-col :span="12" class="in_block">
<block-radius
:show_header="true"
title="服务审批变化趋势"
class="block"
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceSpChangeBtn"
>
<line-chart class="block-radius-content" :zzfw="true" :data="serviceSpData"></line-chart>
</block-radius>
</el-col>
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务审批状态分析" class="block">
<multiple-circle
class="block-radius-content"
:data="fwsp_data"
:text="fwsp_text"
:isFwsp="true"
></multiple-circle>
</block-radius>
</el-col>
</el-row>
</div>
</template>
<script>
import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard";
import multipleCircle from "@/components/e-charts/multiple_circle";
import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
import Commentlist from "@/components/e-charts/commentlist";
import BarChart from "@/components/e-charts/bar-chart";
import ApassTable from "@/components/apass-table";
import Graph from "@/components/e-charts/graph";
import Topology from "@/components/topology.vue";
export default {
components: {
BlockRadius,
Dashboard,
multipleCircle,
singleCircle,
Toplist,
Commentlist,
Starlist,
lineChart,
BarChart,
ApassTable,
Graph,
Topology
},
data: () => ({
overview: {
serviceTotal: 28
},
left_1_state: 0,
left_2_state: 0,
left_3_state: 0,
center_3_state: 0,
right_0_state: 0,
right_1_state: 0,
right_2_state: 0,
right_3_state: 0,
last_id: 0,
mult_data_state: [
{ name: "正常", value: 22 },
{ name: "警告", value: 12 },
{ name: "错误", value: 14 },
{ name: "未使用", value: 19 }
],
mult_data: [
{ name: "数据服务", value: 22 },
{ name: "时空服务", value: 12 },
{ name: "视频服务", value: 14 },
{ name: "感知服务", value: 14 },
{ name: "综合服务", value: 1 }
],
fwsp_data: [
{ name: "已审批", value: 25 },
{ name: "待审批", value: 75 }
],
spIndicatorStyles1: false,
spRefLineStyles3: {
stroke: "#d14",
strokeOpacity: 0,
strokeDasharray: "2, 2"
},
spCurveStyles2: {
stroke: "#274fee",
fill: "#274fee"
},
spCurveStyles3: {
stroke: "#e56600",
fill: "#e56600"
},
sparkline1: {
num: 8848,
up: 32,
arr: [20, 29, 40, 33, 45, 58]
},
sparkline2: {
num: 9964,
up: 20,
arr: [33, 29, 36, 33, 45, 58]
},
text: "服务总数",
fwsp_text: "服务审批",
single_data: {
num: 32,
color: "#25bdb1",
text: "共享"
},
single_data1: {
num: 28,
color: "#f5ab4c",
text: "受限"
},
single_data2: {
num: 30,
color: "#e15260",
text: "敏感"
},
serviceSpData: {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
}
]
},
line_data: {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "上架中",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350
]
}
]
},
das_data: {
data: 85,
text: "健康占比"
},
bar_data: {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [322, 454, 566, 399, 222, 167]
},
bar_data_org: {
legendData: [
"省公安厅",
"省发改委",
"贵州省公安厅",
"贵州省发改委",
"贵州省公安厅"
],
seriesData: [322, 454, 266, 399, 222, 167]
},
toplistData: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 22
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
], // 服务调用排名分析
toplistTargetValue: 40, // 服务调用排名分析 目标值
commentlistData: [
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "大锤",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "阿水",
add_time: "2020-08-01 19:00:00",
score: 3,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
},
{
picture_path:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
user_name: "孤独的狼",
add_time: "2020-08-01 19:00:00",
score: 4,
message: "这个应用非常实用，可以应用到多个业务领域！"
}
], // 服务评价
linelistData: [
{
count: 6,
percent: 75,
title: "0.1% 错误",
unit: "个"
},
{
count: 2,
percent: 25,
title: "0.1 - 20% 错误",
unit: "个"
},
{
count: 0,
percent: 0,
title: "20% 错误",
unit: "个"
},
{
count: 0,
percent: 0,
title: "TCP连接",
unit: "个"
},
{
count: 0,
percent: 0,
title: "Idle",
unit: "个"
}
], // 服务状态统计
starlistData: [
{
star: 5,
count: 5,
unit: "个"
},
{
star: 4,
count: 4,
unit: "个"
},
{
star: 3,
count: 3,
unit: "个"
},
{
star: 2,
count: 2,
unit: "个"
},
{
star: 1,
count: 1,
unit: "个"
}
], // 服务评分
starlistTotal: 15,
hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [
{
id: 1,
hotIndex: 1,
name: "地图视频融合服务",
count: 9964,
increases: 568
},
{
id: 1,
hotIndex: 2,
name: "消息队列服务",
count: 8964,
increases: 528
},
{
id: 1,
hotIndex: 3,
name: "即时通讯服务",
count: 7864,
increases: 89
},
{
id: 1,
hotIndex: 4,
name: "即时通讯服务这里最多显示十五字地图视频融合服务",
count: 4964,
increases: -8
},
{
id: 1,
hotIndex: 5,
name: "即时通讯服务这里最多显示十五字地图视频融合服务",
count: 3364,
increases: -18
}
], // 热门搜索 数据
graph_arr: {
legend: {
data: ["被调用次数", "调用次数"]
},
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
]
},
topology_datas: { }
}),
mounted() {
// this.getServiceOverview();
// this.getServiceHealth();
// this.getServiceTrend();
// this.getServiceType();
// this.getServiceSectorse();
// this.getServiceOrg();
// this.getServiceOpenness();
// this.getServiceRequest();
// this.getServiceOnlineState();
// this.getServiceEstimated();
// this.getServiceHotSearch();
this.hotSearchHeader = [
{
label: "服务排名",
type: "hot-index",
width: 100,
align: "center"
},
{
label: "服务名称",
prop: "name",
type: "button",
callback: this.detailHotSearch
},
{
label: "搜索次数",
prop: "count",
width: 100,
align: "center"
},
{
label: "日涨幅",
prop: "increases",
width: 100,
sortType: "0", // 0：升序 1：降序
align: "center"
}
];
this.getTopologyData();
},
methods: {
getData() {}
getServiceHotSearch() {
this.$api.dataAnalysis.getServiceHotSearch().then(response => {
if (response.data.success == 1) {
let data = response.data.data;
this.sparkline1 = {
num: data.search_user.count,
up:
data.trend == "up"
? data.search_user.per
: data.trend == "down"
? 0 - data.search_user.per
: data.search_user.per,
arr: data.search_user_trend.seriesData
};
this.sparkline2 = {
num: data.search_user_avg.count,
up:
data.trend == "up"
? data.search_user_avg.per
: data.trend == "down"
? 0 - data.search_user_avg.per
: data.search_user_avg.per,
arr: data.search_user_avg_trend.seriesData
};
// top5_rank
this.hotSearchData = [];
if (data.top5_rank && data.top5_rank.length) {
data.top5_rank.forEach((e, idx) => {
this.hotSearchData.push({
id: e.service_id,
hotIndex: top_rank,
name: e.service_name,
count: e.search_count,
increases:
e.trend == "up"
? e.search_user.per
: e.trend == "down"
? 0 - e.search_user.per
: e.search_user.per
});
});
}
}
});
},
getServiceOverview() {
this.$api.dataAnalysis.getServiceOverview().then(response => {
if (response.data.success == 1) {
this.overview = response.data.data;
this.das_data.data = Math.round(
(response.data.data.seriesData[0].value /
(response.data.data.seriesData[0].value +
response.data.data.seriesData[1].value)) *
100
);
}
});
},
getServiceHealth() {
this.$api.dataAnalysis.getServiceHealth().then(response => {
if (response.data.success == 1) {
this.mult_data_state = response.data.data.seriesData;
}
});
},
getServiceTrend() {
this.$api.dataAnalysis
.getServiceTrend({ type: this.right_1_state })
.then(response => {
if (response.data.success == 1) {
this.graph_arr = response.data.data;
}
});
},
getServiceType() {
this.$api.dataAnalysis
.getServiceType({ type: this.left_2_state })
.then(response => {
if (response.data.success == 1) {
this.mult_data = response.data.data.seriesData;
}
});
},
getServiceSectorse() {
this.$api.dataAnalysis
.getServiceSectorse({ type: this.left_3_state })
.then(response => {
if (response.data.success == 1) {
this.bar_data = response.data.data;
}
});
},
getServiceOrg() {
this.$api.dataAnalysis
.getServiceOrg({ type: this.left_3_state })
.then(response => {
if (response.data.success == 1) {
this.bar_data_org = response.data.data;
}
});
},
getServiceOpenness() {
this.$api.dataAnalysis
.getServiceOpenness({ type: this.right_2_state })
.then(response => {
if (response.data.success == 1) {
this.single_data.num = response.data.data.shared;
this.single_data1.num = response.data.data.privacy;
this.single_data2.num = response.data.data.sensitive;
}
});
},
getServiceRequest() {
this.$api.dataAnalysis
.getServiceRequest({ type: this.right_0_state })
.then(response => {
if (response.data.success == 1) {
this.toplistData = response.data.data;
if (this.toplistData && this.toplistData.length != 0) {
this.toplistTargetValue = this.toplistData[0].request_count;
}
}
});
},
getServiceOnlineState() {
this.$api.dataAnalysis
.getServiceOnlineState({ type: this.center_3_state })
.then(response => {
if (response.data.success == 1) {
this.line_data = response.data.data;
console.log(this.line_data);
}
});
},
getServiceEstimated() {
this.$api.dataAnalysis
.getServiceEstimated({
type: this.right_3_state,
last_id: this.last_id
})
.then(response => {
if (response.data.success == 1) {
this.commentlistData = response.data.data.concat(
this.commentlistData
);
this.last_id = this.commentlistData[0].last_id;
}
});
},
detailHotSearch(item) {
this.$router.push("/fwgl/0/0/servicedetail/" + item.id);
},
changeServeiceSpChangeBtn(val) {
if (val === 0) {
this.serviceSpData = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
}
]
};
} else {
this.serviceSpData = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
seriesData: [
{
name: "已审批",
data: [
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460,
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
},
{
name: "未审批",
data: [
300,
350,
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350,
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
}
]
};
}
},
changeServiceTypeBtn(index) {
if (index === 0) {
this.mult_data = [
{ name: "数据服务", value: 22 },
{ name: "时空服务", value: 12 },
{ name: "视频服务", value: 14 },
{ name: "感知服务", value: 14 },
{ name: "综合服务", value: 1 }
];
} else {
this.mult_data = [
{ name: "数据服务", value: 12 },
{ name: "时空服务", value: 15 },
{ name: "视频服务", value: 13 },
{ name: "感知服务", value: 13 },
{ name: "综合服务", value: 1 }
];
}
// this.left_2_state = index;
// this.getServiceType();
},
changeApplicationFieldBtn(index) {
if (index === 0) {
this.bar_data = {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [322, 454, 566, 399, 222, 167]
};
} else {
this.bar_data = {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [422, 254, 366, 299, 422, 267]
};
}
// this.left_3_state = index;
// this.getServiceSectorse();
},
changeServeiceApplyCountBtn(index) {
if (index === 0) {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 22
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
];
} else {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 35
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 30
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 27
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 25
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 11
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 10
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2
}
];
}
// this.right_0_state = index;
// this.getServiceRequest();
},
changeServeiceInfoBtn(index) {
this.right_3_state = index;
// this.getServiceEstimated();
},
changeOpenessBtnindex(index) {
if (index === 1) {
this.single_data = {
num: 32,
color: "#25bdb1",
text: "共享"
};
this.single_data1 = {
num: 28,
color: "#f5ab4c",
text: "受限"
};
this.single_data2 = {
num: 30,
color: "#e15260",
text: "敏感"
};
} else {
this.single_data = {
num: 42,
color: "#25bdb1",
text: "共享"
};
this.single_data1 = {
num: 18,
color: "#f5ab4c",
text: "受限"
};
this.single_data2 = {
num: 20,
color: "#e15260",
text: "敏感"
};
}
// this.right_2_state = index;
// this.getServiceOpenness();
},
changeServiceCellBtn(index) {
if (index === 0) {
this.graph_arr = {
legend: {
data: ["被调用次数", "调用次数"]
},
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
]
};
} else {
this.graph_arr = {
legend: {
data: ["被调用次数", "调用次数"]
},
data: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
series: [
{
name: "被调用次数",
data: [
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
333,
444
]
},
{
name: "调用次数",
data: [
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
400,
350,
280,
480,
520,
500,
222,
333,
444,
400,
350,
280,
480,
520,
500,
222
]
}
]
};
}
// this.right_1_state = index;
// this.getServiceTrend();
},
changeServeiceTotalChangeBtn(index) {
if (index === 0) {
this.line_data = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14"
],
seriesData: [
{
name: "上架中",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350
]
}
]
};
} else {
this.line_data = {
xAxisData: [
"07-01",
"07-02",
"07-03",
"07-04",
"07-05",
"07-06",
"07-07",
"07-08",
"07-09",
"07-10",
"07-11",
"07-12",
"07-13",
"07-14",
"07-15",
"07-16",
"07-17",
"07-18",
"07-19",
"07-20",
"07-21",
"07-22",
"07-23",
"07-24",
"07-25",
"07-26",
"07-27",
"07-28",
"07-29",
"07-30"
],
seriesData: [
{
name: "上架中",
data: [
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222,
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450
]
},
{
name: "未上架",
data: [
300,
350,
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350,
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520
]
}
]
};
}
// this.center_3_state = index;
// this.getServiceOnlineState();
},
getTopologyData() {
this.$api.workbench.getServiceTopology().then(response => {
this.topology_datas = response.data.elements;
});
},
changeServiceStateBtn(index) {
if (index === 0) {
this.mult_data_state = [
{ name: "正常", value: 22 },
{ name: "警告", value: 12 },
{ name: "错误", value: 14 },
{ name: "未使用", value: 19 }
];
} else {
this.mult_data_state = [
{ name: "已调用", value: 33 },
{ name: "未调用", value: 23 }
];
}
// this.left_1_state = index;
// if (index == 0) {
// this.getServiceHealth();
// } else {
// this.a();
// }
}
}
};
</script>
<style scoped>
.in_analysis {
padding: 0 10px 10px;
height: 100%;
width: 100%;
min-width: 1700px;
}
.in_l {
}
.in_r {
}
.in_c {
}
.in_block {
height: 280px;
padding: 10px;
}
.height_2x {
height: 560px;
}
.block {
width: 100%;
height: 100%;
}
.left_1 {
height: 100%;
display: flex;
justify-content: space-between;
}
.left_1_l {
width: 40%;
height: 100%;
display: inline-block;
padding: 10px 0 0 0;
}
.left_1_title {
width: 100%;
text-align: center;
}
.left_1_num {
font-size: 32px;
color: #515fe7;
width: 100%;
text-align: center;
}
.left_1_img {
width: 120px;
display: block;
margin: 0 auto;
}
.left_1_r {
width: 50%;
height: 100%;
display: inline-block;
}
.default {
text-align: center;
}
.default_img {
width: 330px;
height: 230px;
}
.block-radius-content {
height: calc(100% - 36px);
margin-top: 15px;
}
.service-hot-search {
display: flex;
justify-content: flex-start;
align-items: stretch;
height: calc(100% - 21px);
margin-top: 0;
}
.service-hot-search > .left-content {
width: 260px;
flex-shrink: 0;
padding: 0 20px;
box-sizing: border-box;
margin-right: 10px;
}
.service-hot-search > .right-content {
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
}
.hot-line {
height: 50%;
}
.hot-line-title {
font-size: 14px;
line-height: 36px;
color: #8890a7;
}
.hot-line-chart {
height: calc(100% - 36px);
position: relative;
}
.sparkline-text {
width: 100%;
line-height: 20px;
}
.sparkline-text span:nth-of-type(1) {
font-size: 20px;
color: #274fee;
}
.sparkline-text span:nth-of-type(2) {
font-size: 12px;
padding: 0 10px;
float: right;
text-align: center;
line-height: 20px;
height: 20px;
border-radius: 3px;
margin-top: 3px;
margin-right: 2px;
}
.sparkline-text-user span:nth-of-type(1) {
font-size: 20px;
color: #e56600;
}
.topology {
width: 100%;
height: calc(100% - 20px);
}
.single-charts {
float: left;
width: 33.3%;
}
</style>
<style>
.hot-search-table .el-table td,
.hot-search-table .el-table th {
padding: 6px 0;
}
.hot-search-table .el-table div.row_action {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment