Skip to content

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

云服务布局，运营分析差俩接口，导航栏

parent dce8dc67
Hide whitespace changes
Inline Side-by-side
Showing with 2271 additions and 2440 deletions
src/assets/i18n/language-zh.js
View file @ eb2e2bcd
...@@ -23,8 +23,12 @@ export const lang = { ...@@ -23,8 +23,12 @@ export const lang = {
// data analysis // data analysis
data_analysis: "运营管控中心", data_analysis: "运营管控中心",
my_service_data_analysis: "服务分析", operational_analysis: "运营分析",
my_application_data_analysis: "应用分析", operation_control: "运行管控",
service_data_analysis: "服务分析",
application_data_analysis: "应用分析",
operation_overview: "运行概况",
service_control: "服务管控",
// message // message
message: "消息与推送管理", message: "消息与推送管理",
......
src/components/e-charts/gkmultiple_circle.vue
View file @ eb2e2bcd
...@@ -36,7 +36,8 @@ export default { ...@@ -36,7 +36,8 @@ export default {
data: { data: {
handler() { handler() {
this.init_yylx_asy(this.data, this.text); this.init_yylx_asy(this.data, this.text);
} },
deep: true,
} }
}, },
computed: {}, computed: {},
......
src/components/e-charts/graph.vue
View file @ eb2e2bcd
...@@ -25,8 +25,6 @@ export default { ...@@ -25,8 +25,6 @@ export default {
methods: { methods: {
graph() { graph() {
let self = this; let self = this;
console.log(this.data.legend.data);
console.log(this.data.data);
return { return {
color: ["#274fee", "#ef9433"], color: ["#274fee", "#ef9433"],
legend: { legend: {
......
src/components/e-charts/multiple_circle.vue
View file @ eb2e2bcd
...@@ -48,7 +48,8 @@ export default { ...@@ -48,7 +48,8 @@ export default {
data: { data: {
handler() { handler() {
this.init_yylx_asy(this.data, this.text); this.init_yylx_asy(this.data, this.text);
} },
deep: true,
} }
}, },
computed: {}, computed: {},
...@@ -125,9 +126,10 @@ export default { ...@@ -125,9 +126,10 @@ export default {
name: "", name: "",
type: "pie", type: "pie",
clockWise: false, clockWise: false,
radius: [65, 68], radius: [60, 63],
center: ["50%", "50%"], center: ["50%", "46%"],
hoverAnimation: false, hoverAnimation: false,
avoidLabelOverlap: true,
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
...@@ -173,9 +175,9 @@ export default { ...@@ -173,9 +175,9 @@ export default {
subtextStyle: { subtextStyle: {
color: "#c9cedd" color: "#c9cedd"
}, },
itemGap: -10, // 主副标题距离 itemGap: 0, // 主副标题距离
left: "center", left: "center",
top: "center" top: "32%"
}, },
color: this.isFwsp ? color2 : color, color: this.isFwsp ? color2 : color,
tooltip: { tooltip: {
......
src/components/e-charts/single_circle.vue
View file @ eb2e2bcd
...@@ -13,24 +13,24 @@ export default { ...@@ -13,24 +13,24 @@ export default {
return { return {
num: 0, num: 0,
color: "#e15260", color: "#e15260",
text: "敏感" text: "敏感",
}; };
} },
} },
}, },
components: {}, components: {},
data() { data() {
return { return {
health: uuidv1() health: uuidv1(),
}; };
}, },
watch: { watch: {
data: { data: {
handler(val) { handler(val) {
console.log(val);
this.init_health(this.data.num, this.data.color, this.data.text); this.init_health(this.data.num, this.data.color, this.data.text);
} },
} deep: true,
},
}, },
computed: {}, computed: {},
created() {}, created() {},
...@@ -40,22 +40,22 @@ export default { ...@@ -40,22 +40,22 @@ export default {
methods: { methods: {
init_health(num, color, text) { init_health(num, color, text) {
var options = { var options = {
color:[color,'#c9cedd'], color: [color, "#c9cedd"],
title: { title: {
text: num + "%", text: num + "%",
textStyle: { textStyle: {
color: "#000", color: "#000",
fontSize: 26, fontSize: 26,
fontWeight: 200 fontWeight: 200,
}, },
subtext: text, subtext: text,
subtextStyle: { subtextStyle: {
color: "#707693", color: "#707693",
fontSize: 12 fontSize: 12,
}, },
itemGap: 0, // 主副标题距离 itemGap: 0, // 主副标题距离
left: "center", left: "center",
top: "center" top: "center",
}, },
angleAxis: { angleAxis: {
max: 100, // 满分 max: 100, // 满分
...@@ -63,119 +63,124 @@ export default { ...@@ -63,119 +63,124 @@ export default {
startAngle: 90, startAngle: 90,
// 隐藏刻度线 // 隐藏刻度线
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: false show: false,
} },
}, },
radiusAxis: { radiusAxis: {
type: "category", type: "category",
// 隐藏刻度线 // 隐藏刻度线
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: false show: false,
} },
}, },
polar: { polar: {
center: ["50%", "50%"], center: ["50%", "50%"],
radius: "140%" //图形大小 radius: "140%", //图形大小
}, },
series: [ series: [
{ {
type: 'pie', type: "pie",
z:5, z: 5,
center:['50%','50%'], center: ["50%", "50%"],
radius:['68%','72%'], radius: ["68%", "72%"],
silent:true, silent: true,
label: { label: {
normal: { normal: {
show: false show: false,
},
emphasis: {
show: false,
},
}, },
emphasis: { labelLine: {
show: false normal: {
} show: false,
}, },
labelLine: { emphasis: {
normal: { show: false,
show: false },
}, },
emphasis: { tooltip: {
show: false show: false,
} },
}, data: [
tooltip: { {
show: false name: "",
}, value: num,
data:[{ },
name:'', {
value:num name: "",
},{ value: 100 - num,
name:'', },
value:100 - num ],
}] },
},
{ {
type:'pie', type: "pie",
z:4, z: 4,
center:['50%','50%'], center: ["50%", "50%"],
radius:['60%','80%'], radius: ["60%", "80%"],
hoverAnimation:false, hoverAnimation: false,
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: false show: false,
},
emphasis: {
show: false,
},
}, },
emphasis: { labelLine: {
show: false normal: {
} show: false,
}, },
labelLine: { emphasis: {
normal: { show: false,
show: false },
},
tooltip: {
show: false,
},
itemStyle: {
normal: {
color: "#f6f7fc",
},
}, },
emphasis: { emphasis: {
show: false show: false,
} itemStyle: {
}, color: "#f6f7fc",
tooltip: { },
show: false },
}, data: [
itemStyle: { {
normal: { value: 1,
color:'#f6f7fc' },
} ],
}, },
emphasis:{ ],
show:false,
itemStyle:{
color:'#f6f7fc'
}
},
data: [{
value: 1,
}],
}
]
}; };
window[this.health] = echarts.init(document.getElementById(this.health)); window[this.health] = echarts.init(document.getElementById(this.health));
window[this.health].setOption(options, true); window[this.health].setOption(options, true);
} },
} },
}; };
</script> </script>
......
src/components/menu.vue
View file @ eb2e2bcd
...@@ -186,7 +186,6 @@ export default { ...@@ -186,7 +186,6 @@ export default {
}, },
navAction(path) { navAction(path) {
this.now_menu = path; this.now_menu = path;
window.sessionStorage.setItem("menuVisitUrl", path);
this.$router.push(path); this.$router.push(path);
}, },
gotoChildPage(v, parent) { gotoChildPage(v, parent) {
...@@ -200,7 +199,6 @@ export default { ...@@ -200,7 +199,6 @@ export default {
this.$router.push(v.visit_url); this.$router.push(v.visit_url);
} }
this.now_menu = parent; this.now_menu = parent;
window.sessionStorage.setItem("menuVisitUrl", parent);
} }
}, },
getList() { getList() {
...@@ -218,8 +216,7 @@ export default { ...@@ -218,8 +216,7 @@ export default {
}); });
}, },
getMenuIndex() { getMenuIndex() {
let visit_url = window.sessionStorage.getItem("menuVisitUrl"); this.now_menu = this.$route.path;
this.now_menu = visit_url ? visit_url : "";
}, },
getNowMenu() { getNowMenu() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => { this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
...@@ -242,7 +239,6 @@ export default { ...@@ -242,7 +239,6 @@ export default {
} else { } else {
} }
this.menu_arr = arr; this.menu_arr = arr;
console.log(this.user_arr);
this.getMenuIndex(); this.getMenuIndex();
} }
}); });
......
src/components/shop-cloud/shop-cloud.vue
View file @ eb2e2bcd
...@@ -7,19 +7,19 @@ ...@@ -7,19 +7,19 @@
<block-radius> <block-radius>
<el-form ref="form" :inline="true" :rules="ruleBasis" :model="form" class="form_block"> <el-form ref="form" :inline="true" :rules="ruleBasis" :model="form" class="form_block">
<el-row> <el-row>
<el-col :span="11"> <el-col :span="12">
<el-form-item class="form_item"> <el-form-item class="form_item">
<div class="form_item_title">申请部门：</div> <div class="form_item_title">申请组织：</div>
<el-input v-model="form.department_name" :disabled="true" placeholder="请输入申请部门"></el-input> <el-input v-model="form.department_name" :disabled="true" placeholder="请输入申请组织"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11" :offset="1"> <el-col :span="12">
<el-form-item class="form_item" prop="link_man"> <el-form-item class="form_item" prop="link_man">
<div class="form_item_title">部门联系人：</div> <div class="form_item_title">部门联系人：</div>
<el-input v-model="form.link_man" placeholder="请输入联系人姓名"></el-input> <el-input v-model="form.link_man" placeholder="请输入联系人姓名"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<el-form-item class="form_item" prop="phone"> <el-form-item class="form_item" prop="phone">
<div class="form_item_title">联系电话：</div> <div class="form_item_title">联系电话：</div>
<el-input v-model="form.phone" placeholder="请输入联系人电话"></el-input> <el-input v-model="form.phone" placeholder="请输入联系人电话"></el-input>
...@@ -32,25 +32,25 @@ ...@@ -32,25 +32,25 @@
<el-tabs v-model="activeName" class="cloud_form" @tab-click="tabClick"> <el-tabs v-model="activeName" class="cloud_form" @tab-click="tabClick">
<el-tab-pane label="申请新的工作区域" name="0"> <el-tab-pane label="申请新的工作区域" name="0">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="24">
<el-form ref="formNew" :model="formNew" :rules="ruleNew"> <el-form ref="formNew" :model="formNew" :rules="ruleNew">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<div class="form_title">基本信息</div> <div class="form_title">基本信息</div>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="12">
<el-form-item prop="namespace" class="form_item"> <el-form-item prop="namespace" class="form_item">
<div class="form_item_title">工作区域名称：</div> <div class="form_item_title">工作区域名称：</div>
<el-input v-model="formNew.namespace" placeholder="请输入工作区域英文名称"></el-input> <el-input v-model="formNew.namespace" placeholder="请输入工作区域英文名称"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="12">
<el-form-item prop="workplace" class="form_item"> <el-form-item prop="workplace" class="form_item">
<div class="form_item_title">中文名称：</div> <div class="form_item_title">中文名称：</div>
<el-input v-model="formNew.workplace" placeholder="请输入工作区域中文名称"></el-input> <el-input v-model="formNew.workplace" placeholder="请输入工作区域中文名称"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="12">
<el-form-item prop="workplacedesc" class="form_item"> <el-form-item prop="workplacedesc" class="form_item">
<div class="form_item_title">描述信息：</div> <div class="form_item_title">描述信息：</div>
<el-input <el-input
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
<el-col :span="24"> <el-col :span="24">
<div class="form_title">工作区域申请规格</div> <div class="form_title">工作区域申请规格</div>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="6">
<el-form-item prop="cpu" class="form_item input_has_right"> <el-form-item prop="cpu" class="form_item input_has_right">
<div class="form_item_title">CPU：</div> <div class="form_item_title">CPU：</div>
<el-select v-model="formNew.cpu" placeholder="请选择CPU使用量"> <el-select v-model="formNew.cpu" placeholder="请选择CPU使用量">
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
<div class="input_right input_right_top">核</div> <div class="input_right input_right_top">核</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="6">
<el-form-item prop="memory" class="form_item input_has_right"> <el-form-item prop="memory" class="form_item input_has_right">
<div class="form_item_title">内存：</div> <div class="form_item_title">内存：</div>
<el-select <el-select
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
<div class="input_right input_right_top">GB</div> <div class="input_right input_right_top">GB</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="6">
<el-form-item prop="containerGroup" class="form_item input_has_right"> <el-form-item prop="containerGroup" class="form_item input_has_right">
<div class="form_item_title">容器组：</div> <div class="form_item_title">容器组：</div>
<el-input-number <el-input-number
...@@ -108,20 +108,10 @@ ...@@ -108,20 +108,10 @@
<div class="input_right">个</div> <div class="input_right">个</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="24">
<el-form-item class="form_item"> <div class="form_item_title">数据盘（可选）：</div>
<div class="form_item_title">数据盘（可选）：</div>
<!-- <el-select v-model="formNew.store_type" placeholder="请选择数据盘类型">
<el-option
v-for="item in options_store_type"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>-->
</el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="6">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<el-input-number <el-input-number
v-model="formNew.dataDisk" v-model="formNew.dataDisk"
...@@ -133,7 +123,7 @@ ...@@ -133,7 +123,7 @@
<div class="input_right">块</div> <div class="input_right">块</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="6">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<el-input-number <el-input-number
v-model="formNew.perDataDisk" v-model="formNew.perDataDisk"
...@@ -145,14 +135,16 @@ ...@@ -145,14 +135,16 @@
<div class="input_right">GB</div> <div class="input_right">GB</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="form_title">单个容器组规格</div> <div class="form_title">单个容器组规格</div>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="12">
<div class="form_item_title">CPU：</div> <div class="form_item_title">CPU：</div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<div class="form_item_title">内存：</div>
</el-col>
<el-col :span="6">
<el-form-item prop="perCPUs" class="form_item input_has_left_right"> <el-form-item prop="perCPUs" class="form_item input_has_left_right">
<div class="input_left">最高</div> <div class="input_left">最高</div>
<el-input-number <el-input-number
...@@ -165,7 +157,7 @@ ...@@ -165,7 +157,7 @@
<div class="input_right">核</div> <div class="input_right">核</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="6">
<el-form-item prop="perCPU" class="form_item input_has_left_right"> <el-form-item prop="perCPU" class="form_item input_has_left_right">
<div class="input_left">默认</div> <div class="input_left">默认</div>
<el-input-number <el-input-number
...@@ -178,10 +170,7 @@ ...@@ -178,10 +170,7 @@
<div class="input_right">核</div> <div class="input_right">核</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="6">
<div class="form_item_title">内存：</div>
</el-col>
<el-col :span="11">
<el-form-item prop="perRAMs" class="form_item input_has_left_right"> <el-form-item prop="perRAMs" class="form_item input_has_left_right">
<div class="input_left">最高</div> <div class="input_left">最高</div>
<el-input-number <el-input-number
...@@ -194,7 +183,7 @@ ...@@ -194,7 +183,7 @@
<div class="input_right">GB</div> <div class="input_right">GB</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="6">
<el-form-item prop="perRAM" class="form_item input_has_left_right"> <el-form-item prop="perRAM" class="form_item input_has_left_right">
<div class="input_left">默认</div> <div class="input_left">默认</div>
<el-input-number <el-input-number
...@@ -210,7 +199,7 @@ ...@@ -210,7 +199,7 @@
<el-col :span="24"> <el-col :span="24">
<div class="form_title">其他信息</div> <div class="form_title">其他信息</div>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="12">
<el-form-item prop="appDuration" class="form_item input_has_right_select"> <el-form-item prop="appDuration" class="form_item input_has_right_select">
<div class="form_item_title">申请时长：</div> <div class="form_item_title">申请时长：</div>
<el-input-number <el-input-number
...@@ -255,7 +244,7 @@ ...@@ -255,7 +244,7 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="调整现有工作区域" name="1"> <el-tab-pane label="调整现有工作区域" name="1">
<el-row> <el-row>
<el-col :span="11"> <el-col :span="12">
<div class="select_title">选择要进行调整的工作区域：</div> <div class="select_title">选择要进行调整的工作区域：</div>
<div class="form_item"> <div class="form_item">
<el-select v-model="workSpace" @change="getForm" placeholder="请选择"> <el-select v-model="workSpace" @change="getForm" placeholder="请选择">
...@@ -271,7 +260,7 @@ ...@@ -271,7 +260,7 @@
</el-row> </el-row>
<div v-show="formShow"> <div v-show="formShow">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="24">
<el-form ref="formOld" :model="formOld" :rules="ruleOld"> <el-form ref="formOld" :model="formOld" :rules="ruleOld">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
...@@ -308,7 +297,7 @@ ...@@ -308,7 +297,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="6">
<el-form-item prop="cpu" class="form_item input_has_right"> <el-form-item prop="cpu" class="form_item input_has_right">
<div class="form_item_title">申请CPU调整为：</div> <div class="form_item_title">申请CPU调整为：</div>
<el-select v-model="formOld.cpu" placeholder="请选择CPU使用量"> <el-select v-model="formOld.cpu" placeholder="请选择CPU使用量">
...@@ -322,7 +311,7 @@ ...@@ -322,7 +311,7 @@
<div class="input_right input_right_top">核</div> <div class="input_right input_right_top">核</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="6">
<el-form-item prop="memory" class="form_item input_has_right"> <el-form-item prop="memory" class="form_item input_has_right">
<div class="form_item_title">申请内存调整为：</div> <div class="form_item_title">申请内存调整为：</div>
<el-select <el-select
...@@ -340,7 +329,7 @@ ...@@ -340,7 +329,7 @@
<div class="input_right input_right_top">GB</div> <div class="input_right input_right_top">GB</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="6">
<el-form-item prop="containerGroup" class="form_item input_has_right"> <el-form-item prop="containerGroup" class="form_item input_has_right">
<div class="form_item_title">申请容器组调整为：</div> <div class="form_item_title">申请容器组调整为：</div>
<el-input-number <el-input-number
...@@ -353,7 +342,7 @@ ...@@ -353,7 +342,7 @@
<div class="input_right">个</div> <div class="input_right">个</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22" v-if="dataDiskList.length != 0"> <el-col :span="12" v-if="dataDiskList.length != 0">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<div class="form_item_title">调整数据盘：</div> <div class="form_item_title">调整数据盘：</div>
<table-um <table-um
...@@ -366,7 +355,7 @@ ...@@ -366,7 +355,7 @@
></table-um> ></table-um>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="24">
<el-form-item class="form_item"> <el-form-item class="form_item">
<div class="form_item_title">增加数据盘：</div> <div class="form_item_title">增加数据盘：</div>
<!-- <el-select v-model="formOld.store_type" placeholder="请选择数据盘类型"> <!-- <el-select v-model="formOld.store_type" placeholder="请选择数据盘类型">
...@@ -379,7 +368,7 @@ ...@@ -379,7 +368,7 @@
</el-select>--> </el-select>-->
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="6">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<el-input-number <el-input-number
v-model="formOld.dataDisk" v-model="formOld.dataDisk"
...@@ -391,7 +380,7 @@ ...@@ -391,7 +380,7 @@
<div class="input_right">块</div> <div class="input_right">块</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="6">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<el-input-number <el-input-number
v-model="formOld.perDataDisk" v-model="formOld.perDataDisk"
...@@ -439,10 +428,13 @@ ...@@ -439,10 +428,13 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="12">
<div class="form_item_title">CPU：</div> <div class="form_item_title">CPU：</div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<div class="form_item_title">内存：</div>
</el-col>
<el-col :span="6">
<el-form-item prop="perCPUs" class="form_item input_has_left_right"> <el-form-item prop="perCPUs" class="form_item input_has_left_right">
<div class="input_left">最高</div> <div class="input_left">最高</div>
<el-input-number <el-input-number
...@@ -455,7 +447,7 @@ ...@@ -455,7 +447,7 @@
<div class="input_right">核</div> <div class="input_right">核</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="6">
<el-form-item prop="perCPU" class="form_item input_has_left_right"> <el-form-item prop="perCPU" class="form_item input_has_left_right">
<div class="input_left">默认</div> <div class="input_left">默认</div>
<el-input-number <el-input-number
...@@ -468,10 +460,7 @@ ...@@ -468,10 +460,7 @@
<div class="input_right">核</div> <div class="input_right">核</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="6">
<div class="form_item_title">内存：</div>
</el-col>
<el-col :span="11">
<el-form-item prop="perRAMs" class="form_item input_has_left_right"> <el-form-item prop="perRAMs" class="form_item input_has_left_right">
<div class="input_left">最高</div> <div class="input_left">最高</div>
<el-input-number <el-input-number
...@@ -484,7 +473,7 @@ ...@@ -484,7 +473,7 @@
<div class="input_right">GB</div> <div class="input_right">GB</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="6">
<el-form-item prop="perRAM" class="form_item input_has_left_right"> <el-form-item prop="perRAM" class="form_item input_has_left_right">
<div class="input_left">默认</div> <div class="input_left">默认</div>
<el-input-number <el-input-number
...@@ -519,7 +508,7 @@ ...@@ -519,7 +508,7 @@
</div> </div>
</el-col> </el-col>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="12">
<el-form-item class="form_item input_has_right_select"> <el-form-item class="form_item input_has_right_select">
<div class="form_item_title">申请续期：</div> <div class="form_item_title">申请续期：</div>
<el-input-number <el-input-number
...@@ -965,9 +954,9 @@ export default { ...@@ -965,9 +954,9 @@ export default {
], ],
formShow: false, formShow: false,
specArr: [ specArr: [
{ title: "CPU", val: "4", src: "ic_CPU" }, { title: "CPU", val: "0", src: "ic_CPU" },
{ title: "内存", val: "4", src: "ic_neicun" }, { title: "内存", val: "0", src: "ic_neicun" },
{ title: "容器", val: "4", src: "ic_rongqi" }, { title: "容器", val: "0", src: "ic_rongqi" },
], ],
rqzArr: [ rqzArr: [
{ title: "CPU", max: "4", default: "2", src: "ic_CPU" }, { title: "CPU", max: "4", default: "2", src: "ic_CPU" },
......
src/components/work-flow/super-flow.vue
View file @ eb2e2bcd
...@@ -743,7 +743,6 @@ export default { ...@@ -743,7 +743,6 @@ export default {
} }
}, },
nodeItemMouseDown(evt, info) { nodeItemMouseDown(evt, info) {
console.log("dwad");
const { clientX, clientY, currentTarget } = evt; const { clientX, clientY, currentTarget } = evt;
const { top, left } = evt.currentTarget.getBoundingClientRect(); const { top, left } = evt.currentTarget.getBoundingClientRect();
const conf = this.dragConf; const conf = this.dragConf;
......
src/pages/data-analysis/data-analysis.vue
View file @ eb2e2bcd
<template> <template>
<div class="fwgl_container"> <div class="fwgl_container">
<sideNavBar <sideNavBar
v-if="is_admin == 3 || is_admin == 4 || is_admin == 1" v-if="is_admin == 3 || is_admin == 4"
title="运营管控中心" title="运营管控中心"
imgSrc="tool_fuwu" imgSrc="tool_fuwu"
:nav-list="navList" :nav-list="navList"
:title-path="navList[0] && navList[0].path" :title-path="navList[0] && navList[0].path"
></sideNavBar> ></sideNavBar>
<sideNavBarClass <sideNavBarClass
v-else-if="is_admin == 2" v-else-if="is_admin == 1 || is_admin == 2"
title="运营管控中心" title="运营管控中心"
imgSrc="tool_fuwu" imgSrc="tool_fuwu"
:nav-list="navList" :nav-list="navList"
:title-path="navList[0] && navList[0].path" :title-path="navList[0] && navList[0].path"
></sideNavBarClass> ></sideNavBarClass>
<div v-else class="skeleton"></div>
<div class="main_container"> <div class="main_container">
<router-view :key="'type_' + $route.params.type"></router-view> <router-view :key="'type_' + $route.params.type"></router-view>
</div> </div>
...@@ -71,12 +72,32 @@ export default { ...@@ -71,12 +72,32 @@ export default {
], ],
userNav2: [ userNav2: [
{ {
name: "服务分析", name: "运营分析",
path: `/data_analysis/super_service`, path: `/data_analysis/super_service`,
child: [
{
name: "服务分析",
path: `/data_analysis/super_service`,
},
{
name: "应用分析",
path: `/data_analysis/super_application`,
},
],
}, },
{ {
name: "应用分析", name: "运行管控",
path: `/data_analysis/super_application`, path: `/data_analysis/1`,
child: [
{
name: "运行概况",
path: `/data_analysis/1`,
},
{
name: "服务管控",
path: `/data_analysis/1`,
},
],
}, },
], ],
navList: [], navList: [],
...@@ -125,4 +146,8 @@ export default { ...@@ -125,4 +146,8 @@ export default {
background-color: #f6f7fb; background-color: #f6f7fb;
overflow: auto; overflow: auto;
} }
.skeleton {
width: 180px;
background-color: #0d1847;
}
</style> </style>
src/pages/data-analysis/my-application.vue
View file @ eb2e2bcd
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div> <div>
<el-breadcrumb separator="/" class="bread_crumb1"> <el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.data_analysis") }}</el-breadcrumb-item> <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-item>{{ $t("lang.application_data_analysis") }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<el-row class="in_analysis"> <el-row class="in_analysis">
<!-- 可横向铺满 --> <!-- 可横向铺满 -->
......
src/pages/data-analysis/my-service.vue
View file @ eb2e2bcd
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item> <el-breadcrumb-item>
{{ {{
$t("lang.my_service_data_analysis") $t("lang.service_data_analysis")
}} }}
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
@changeButton="changeApplicationFieldBtn" @changeButton="changeApplicationFieldBtn"
class="block" class="block"
> >
<BarChart :data="bar_data" /> <BarChart :x_router="30" :data="bar_data" />
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -635,6 +635,7 @@ export default { ...@@ -635,6 +635,7 @@ export default {
} }
}); });
}, },
getServiceTransfer() {},
detailHotSearch(item) { detailHotSearch(item) {
this.$router.push("/fwgl/0/0/servicedetail/" + item.id); this.$router.push("/fwgl/0/0/servicedetail/" + item.id);
}, },
...@@ -676,7 +677,7 @@ export default { ...@@ -676,7 +677,7 @@ export default {
if (index == 0) { if (index == 0) {
this.getServiceHealth(); this.getServiceHealth();
} else { } else {
this.a(); this.getServiceTransfer();
} }
}, },
}, },
......
src/pages/data-analysis/org-application.vue
View file @ eb2e2bcd
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
<div> <div>
<el-breadcrumb separator="/" class="bread_crumb1"> <el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.data_analysis") }}</el-breadcrumb-item> <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-item :to="{ path: '/data_analysis/org_service' }">
{{
$t("lang.operational_analysis")
}}
</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.application_data_analysis") }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<el-row class="in_analysis"> <el-row class="in_analysis">
<!-- 可横向铺满 --> <!-- 可横向铺满 -->
...@@ -254,7 +259,7 @@ ...@@ -254,7 +259,7 @@
:show_header="true" :show_header="true"
title="应用审批状态分析" title="应用审批状态分析"
class="block" class="block"
:buttons_arr="['申请状态', '待审批']" :buttons_arr="['申请状态', '申请类型']"
@changeButton="changeAppSpBtn" @changeButton="changeAppSpBtn"
> >
<multiple-circle <multiple-circle
...@@ -293,16 +298,16 @@ export default { ...@@ -293,16 +298,16 @@ export default {
BarChart, BarChart,
ApassTable, ApassTable,
Graph, Graph,
WaterPolo WaterPolo,
}, },
data: () => ({ data: () => ({
isyysp: true, isyysp: true,
water_polo: [64, 36], water_polo: [64, 36],
overview: { overview: {
month_chain: 12, month_chain: 0,
week_chain: 20, week_chain: 0,
total: 1324, total: 0,
day_count: 21 day_count: 0,
}, },
now_used_count_day: 7, now_used_count_day: 7,
now_app_type: 1, now_app_type: 1,
...@@ -310,458 +315,216 @@ export default { ...@@ -310,458 +315,216 @@ export default {
now_app_count: 14, now_app_count: 14,
now_app_deploy: 1, now_app_deploy: 1,
now_app_evalute: 1, now_app_evalute: 1,
now_app_approval: 0,
now_app_approval_state: 0,
mult_data: [ mult_data: [
{ name: "基础工具", value: 22 }, { name: "基础工具", value: 0 },
{ name: "通用应用", value: 12 }, { name: "通用应用", value: 0 },
{ name: "业务应用", value: 10 } { name: "业务应用", value: 0 },
], ],
text: "应用总数", text: "应用总数",
spIndicatorStyles1: false, spIndicatorStyles1: false,
spRefLineStyles3: { spRefLineStyles3: {
stroke: "#d14", stroke: "#d14",
strokeOpacity: 0, strokeOpacity: 0,
strokeDasharray: "2, 2" strokeDasharray: "2, 2",
}, },
spCurveStyles2: { spCurveStyles2: {
stroke: "#274fee", stroke: "#274fee",
fill: "#274fee" fill: "#274fee",
}, },
Yysp_data: [ Yysp_data: [
{ name: "已审批", value: 15 }, { name: "已审批", value: 0 },
{ name: "待审批", value: 45 } { name: "待审批", value: 0 },
], ],
Yysp_text: "应用审批", Yysp_text: "应用审批",
serviceSpData: { serviceSpData: {
xAxisData: [ xAxisData: [],
"07-01", seriesData: [],
"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: { spCurveStyles3: {
stroke: "#e56600", stroke: "#e56600",
fill: "#e56600" fill: "#e56600",
}, },
sparkline1: { sparkline1: {
arr: [1, 2, 3, 4, 8, 9, 10, 21], arr: [],
num: 21, num: 0,
up: 15.3 up: 0,
}, },
sparkline2: { sparkline2: {
arr: [1, 2, 3, 4, 8, 9, 10, 21], arr: [],
num: 18, num: 0,
up: -19.3 up: 0,
}, },
single_data: { single_data: {
num: 54, num: 0,
color: "#274fee", color: "#274fee",
text: "平台应用" text: "平台应用",
}, },
single_data1: { single_data1: {
num: 56, num: 0,
color: "#e56600", color: "#e56600",
text: "开发者应用" text: "开发者应用",
}, },
line_data: { line_data: {
xAxisData: [ xAxisData: [],
"07-01", seriesData: [],
"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: { bar_data_org: {
legendData: [ legendData: [],
"省公安厅", seriesData: [],
"省发改委",
"贵州省公安厅",
"贵州省发改委",
"贵州省公安厅"
],
seriesData: [322, 454, 266, 399, 222, 167]
}, },
bar_data_area: { bar_data_area: {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"], legendData: [],
seriesData: [322, 454, 566, 399, 222, 167] seriesData: [],
}, },
graph_arr: { graph_arr: {
legend: { legend: {
data: ["被调用次数", "调用次数"] data: ["被调用次数", "调用次数"],
}, },
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"], data: [],
series: [ series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] }, { name: "被调用次数", data: [] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] } { name: "调用次数", data: [] },
] ],
}, },
toplistData: [ toplistData: [
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1", service_name: "postgresql V11.1",
request_count: 30 request_count: 30,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0", service_name: "钉钉 V1.0",
request_count: 22 request_count: 22,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3", service_name: "易智瑞 V11.3",
request_count: 21 request_count: 21,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0", service_name: "CAS单点登录 V1.0",
request_count: 18 request_count: 18,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1", service_name: "postgresql V11.1",
request_count: 15 request_count: 15,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0", service_name: "CAS单点登录 V1.0",
request_count: 12 request_count: 12,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1", service_name: "postgresql V11.1",
request_count: 10 request_count: 10,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0", service_name: "CAS单点登录 V1.0",
request_count: 8 request_count: 8,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1", service_name: "postgresql V11.1",
request_count: 6 request_count: 6,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0", service_name: "CAS单点登录 V1.0",
request_count: 6 request_count: 6,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1", service_name: "postgresql V11.1",
request_count: 4 request_count: 4,
}, },
{ {
cover: cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0", service_name: "CAS单点登录 V1.0",
request_count: 2 request_count: 2,
} },
], // 应用部署排名分析 ], // 应用部署排名分析
toplistTargetValue: 150, // 应用部署排名分析 目标值 toplistTargetValue: 150, // 应用部署排名分析 目标值
appInfoBtnIndex: 0, appInfoBtnIndex: 0,
commentlistData: [ commentlistData: [], // 应用评价
{ starlistData: [], // 应用评分
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, starlistTotal: 10,
hotSearchHeader: [], // 热门搜索 表头 hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [ 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() { mounted() {
// this.getAppOverview(); this.getAppOverview();
// this.getAppUsedCount(); this.getAppUsedCount();
// this.getAppType(); this.getAppType();
// this.getAppSourceOri(); this.getAppSourceOri();
// this.getAppUsedArea(); this.getAppUsedArea();
// this.getAppCount(); this.getAppCount();
// this.getAppDeployRank(); this.getAppDeployRank();
// this.getAppEvaluate(); this.getAppEvaluate();
// this.getAppOnlineState(); this.getAppOnlineState();
// this.getAppHot(); this.getAppHot();
this.getAppApproval();
this.getAppApprovalState();
this.hotSearchHeader = [ this.hotSearchHeader = [
{ {
label: "排名", label: "排名",
type: "hot-index", type: "hot-index",
width: 100, width: 100,
align: "center" align: "center",
}, },
{ {
label: "应用名称", label: "应用名称",
prop: "name", prop: "name",
type: "button", type: "button",
callback: this.detailHotSearch callback: this.detailHotSearch,
}, },
{ {
label: "搜索次数", label: "搜索次数",
prop: "count", prop: "count",
width: 100, width: 100,
align: "center" align: "center",
}, },
{ {
label: "日涨幅", label: "日涨幅",
prop: "increases", prop: "increases",
width: 100, width: 100,
sortType: "0", // 0：升序 1：降序 sortType: "0", // 0：升序 1：降序
align: "center" align: "center",
} },
]; ];
}, },
methods: { methods: {
getAppOverview() { getAppOverview() {
this.$api.dataAnalysis.getAppOverview().then(response => { this.$api.dataAnalysis.getAppOverview().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
this.overview = { this.overview = {
month_chain: parseFloat(data.month_lr), month_chain: parseFloat(data.month_lr),
week_chain: parseFloat(data.week_lr), week_chain: parseFloat(data.week_lr),
total: data.total, total: data.total,
day_count: data.ave_deploy_count day_count: data.ave_deploy_count,
}; };
this.water_polo = [ this.water_polo = [
parseFloat(data.developable_ratio), parseFloat(data.developable_ratio),
parseFloat(data.un_developable_ratio) parseFloat(data.un_developable_ratio),
]; ];
} }
}); });
...@@ -769,7 +532,7 @@ export default { ...@@ -769,7 +532,7 @@ export default {
getAppUsedCount() { getAppUsedCount() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getAppUsedCount({ day: this.now_used_count_day }) .getAppUsedCount({ day: this.now_used_count_day })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
this.graph_arr = data; this.graph_arr = data;
...@@ -779,7 +542,7 @@ export default { ...@@ -779,7 +542,7 @@ export default {
getAppType() { getAppType() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getAppType({ type: this.now_app_type }) .getAppType({ type: this.now_app_type })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
this.mult_data = data.series[0].data; this.mult_data = data.series[0].data;
...@@ -787,12 +550,12 @@ export default { ...@@ -787,12 +550,12 @@ export default {
}); });
}, },
getAppSourceOri() { getAppSourceOri() {
this.$api.dataAnalysis.getAppSourceOri().then(response => { this.$api.dataAnalysis.getAppSourceOri().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
this.bar_data_org = { this.bar_data_org = {
legendData: data.xAxis.data, legendData: data.xAxis.data,
seriesData: data.series[0].data seriesData: data.series[0].data,
}; };
} }
}); });
...@@ -800,12 +563,12 @@ export default { ...@@ -800,12 +563,12 @@ export default {
getAppUsedArea() { getAppUsedArea() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getAppUsedArea({ type: this.now_app_used_area }) .getAppUsedArea({ type: this.now_app_used_area })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
this.bar_data_area = { this.bar_data_area = {
legendData: data.xAxis.data, legendData: data.xAxis.data,
seriesData: data.series[0].data seriesData: data.series[0].data,
}; };
} }
}); });
...@@ -813,12 +576,12 @@ export default { ...@@ -813,12 +576,12 @@ export default {
getAppCount() { getAppCount() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getAppCount({ day: this.now_app_count }) .getAppCount({ day: this.now_app_count })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
this.line_data = { this.line_data = {
xAxisData: data.data, xAxisData: data.data,
seriesData: data.series seriesData: data.series,
}; };
} }
}); });
...@@ -826,22 +589,22 @@ export default { ...@@ -826,22 +589,22 @@ export default {
getAppDeployRank() { getAppDeployRank() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getAppDeployRank({ type: this.now_app_deploy }) .getAppDeployRank({ type: this.now_app_deploy })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
this.toplistData = []; this.toplistData = [];
if (data && data.length) { if (data && data.length) {
this.toplistTargetValue = data[0].num; this.toplistTargetValue = data[0].num;
data.forEach(e => { data.forEach((e) => {
this.toplistData.push({ this.toplistData.push({
service_name: e.name, service_name: e.name,
request_count: e.num, request_count: e.num,
cover: e.logo, cover: e.logo,
service_id: { service_id: {
id: e.app_id, id: e.app_id,
source: e.source source: e.source,
}, },
data_service_type1: 124 data_service_type1: 124,
}); });
}); });
} }
...@@ -851,19 +614,19 @@ export default { ...@@ -851,19 +614,19 @@ export default {
getAppEvaluate() { getAppEvaluate() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getAppEvaluate({ type: this.now_app_evalute }) .getAppEvaluate({ type: this.now_app_evalute })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
if (this.now_app_evalute == 1) { if (this.now_app_evalute == 1) {
this.commentlistData = []; this.commentlistData = [];
if (data && data.length) { if (data && data.length) {
data.forEach(e => { data.forEach((e) => {
this.commentlistData.push({ this.commentlistData.push({
add_time: e.add_time, add_time: e.add_time,
message: e.content, message: e.content,
picture_path: e.picture_path, picture_path: e.picture_path,
score: e.score, score: e.score,
user_name: e.picture_path user_name: e.picture_path,
}); });
}); });
} }
...@@ -872,11 +635,11 @@ export default { ...@@ -872,11 +635,11 @@ export default {
this.starlistData = []; this.starlistData = [];
var temp = []; var temp = [];
if (data && data.length) { if (data && data.length) {
data.forEach(e => { data.forEach((e) => {
temp.push(e.num); temp.push(e.num);
this.starlistData.push({ this.starlistData.push({
star: e.name, star: e.name,
count: e.num count: e.num,
}); });
}); });
this.starlistTotal = Math.max(...temp); this.starlistTotal = Math.max(...temp);
...@@ -886,24 +649,24 @@ export default { ...@@ -886,24 +649,24 @@ export default {
}); });
}, },
getAppOnlineState() { getAppOnlineState() {
this.$api.dataAnalysis.getAppOnlineState().then(response => { this.$api.dataAnalysis.getAppOnlineState().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
this.single_data = { this.single_data = {
num: data.platform, num: data.platform,
color: "#274fee", color: "#274fee",
text: "平台应用" text: "平台应用",
}; };
this.single_data1 = { this.single_data1 = {
num: data.develop, num: data.develop,
color: "#e56600", color: "#e56600",
text: "开发者应用" text: "开发者应用",
}; };
} }
}); });
}, },
getAppHot() { getAppHot() {
this.$api.dataAnalysis.getAppHot().then(response => { this.$api.dataAnalysis.getAppHot().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
let user = data.user || {}; let user = data.user || {};
...@@ -912,14 +675,14 @@ export default { ...@@ -912,14 +675,14 @@ export default {
this.sparkline1 = { this.sparkline1 = {
arr: user.line_chart ? user.line_chart.series[0].data : [], arr: user.line_chart ? user.line_chart.series[0].data : [],
num: user.today_num ? user.today_num : 0, num: user.today_num ? user.today_num : 0,
up: user.ratio ? parseFloat(user.ratio) : 0 up: user.ratio ? parseFloat(user.ratio) : 0,
}; };
this.sparkline2 = { this.sparkline2 = {
arr: ave_search.line_chart arr: ave_search.line_chart
? ave_search.line_chart.series[0].data ? ave_search.line_chart.series[0].data
: [], : [],
num: ave_search.today_num ? ave_search.today_num : 0, num: ave_search.today_num ? ave_search.today_num : 0,
up: ave_search.ratio ? parseFloat(ave_search.ratio) : 0 up: ave_search.ratio ? parseFloat(ave_search.ratio) : 0,
}; };
this.hotSearchData = []; this.hotSearchData = [];
search_app.forEach((e, idx) => { search_app.forEach((e, idx) => {
...@@ -929,12 +692,38 @@ export default { ...@@ -929,12 +692,38 @@ export default {
hotIndex: idx + 1, hotIndex: idx + 1,
name: e.name, name: e.name,
count: e.num, count: e.num,
increases: parseFloat(e.ratio) increases: parseFloat(e.ratio),
}); });
}); });
} }
}); });
}, },
getAppApproval() {
this.$api.dataAnalysis
.getAppApproval({ day: this.now_app_approval })
.then((response) => {
if (response.data.success == 1) {
let data = response.data.data;
this.serviceSpData = {
xAxisData: data.data,
seriesData: data.series,
};
}
});
},
getAppApprovalState() {
this.$api.dataAnalysis
.getAppApproval({ day: this.now_app_approval_state })
.then((response) => {
if (response.data.success == 1) {
let data = response.data.data;
this.serviceSpData = {
xAxisData: data.data,
seriesData: data.series,
};
}
});
},
detailHotSearch(item) { detailHotSearch(item) {
console.log("查看热搜详情"); 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}`);
...@@ -942,769 +731,65 @@ export default { ...@@ -942,769 +731,65 @@ export default {
hotSearchSortChange(sortInfo) { hotSearchSortChange(sortInfo) {
console.log("应用热门搜索: " + sortInfo); console.log("应用热门搜索: " + sortInfo);
}, },
changeAppSpChangeBtn(val) { changeAppSpChangeBtn(index) {
if (val === 0) { if (index == 0) {
this.serviceSpData = { this.now_app_approval = 14;
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 { } else {
this.serviceSpData = { this.now_app_approval = 30;
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.getAppApproval();
}, },
changeAppSpBtn(val) { changeAppSpBtn(index) {
if (val === 0) { this.now_app_approval_state = index;
this.Yysp_data = [ this.getAppApprovalState();
{ name: "已审批", value: 15 },
{ name: "待审批", value: 45 }
];
this.isyysp = true;
} else {
this.Yysp_data = [
{ name: "申请部署", value: 5 },
{ name: "申请开发", value: 15 }
];
this.isyysp = false;
}
}, },
changeServiceTypeBtn(index) { changeServiceTypeBtn(index) {
if (index === 0) { if (index == 0) {
this.mult_data = [ this.now_app_type = 1;
{ name: "基础工具", value: 22 },
{ name: "通用应用", value: 12 },
{ name: "业务应用", value: 10 }
];
} else { } else {
this.mult_data = [ this.now_app_type = 2;
{ name: "基础工具", value: 6 },
{ name: "通用应用", value: 20 },
{ name: "业务应用", value: 14 }
];
} }
// if (index == 0) { this.getAppType();
// this.now_app_type = 1;
// } else {
// this.now_app_type = 2;
// }
// this.getAppType();
}, },
changeAppAreaTypeBtn(index) { changeAppAreaTypeBtn(index) {
if (index === 0) { if (index == 0) {
this.bar_data_area = { this.now_app_used_area = 1;
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [322, 454, 566, 399, 222, 167]
};
} else { } else {
this.bar_data_area = { this.now_app_used_area = 2;
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
seriesData: [222, 354, 466, 499, 422, 367]
};
} }
// if (index == 0) { this.getAppUsedArea();
// this.now_app_used_area = 1;
// } else {
// this.now_app_used_area = 2;
// }
// this.getAppUsedArea();
}, },
changeApplicationFieldBtn(index) { changeApplicationFieldBtn(index) {
console.log("xxx: " + index); console.log("xxx: " + index);
}, },
changeServiceCellBtn(index) { changeServiceCellBtn(index) {
if (index === 0) { if (index == 0) {
this.graph_arr = { this.now_used_count_day = 7;
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 { } else {
this.graph_arr = { this.now_used_count_day = 30;
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.getAppUsedCount();
// this.now_used_count_day = 7;
// } else {
// this.now_used_count_day = 30;
// }
// this.getAppUsedCount();
}, },
changeServeiceApplyCountBtn(index) { changeServeiceApplyCountBtn(index) {
if (index === 0) { console.log("应用部署排名分析: " + index);
this.toplistData = [ this.now_app_deploy = index + 1;
{ this.getAppDeployRank();
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) { changeAppInfoBtn(index) {
this.appInfoBtnIndex = index; this.appInfoBtnIndex = index;
this.now_app_evalute = index + 1; this.now_app_evalute = index + 1;
// this.getAppEvaluate(); this.getAppEvaluate();
// console.log("应用评价及评分: " + index); console.log("应用评价及评分: " + index);
}, },
changeAppTotalChangeBtn(index) { changeAppTotalChangeBtn(index) {
if (index === 0) { if (index == 0) {
this.line_data = { this.now_app_count = 14;
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 { } else {
this.line_data = { this.now_app_count = 30;
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.getAppCount();
// this.now_app_count = 14; },
// } else { },
// this.now_app_count = 30;
// }
// this.getAppCount();
}
}
}; };
</script> </script>
<style scoped> <style scoped>
......
src/pages/data-analysis/org-service.vue
View file @ eb2e2bcd
...@@ -6,9 +6,14 @@ ...@@ -6,9 +6,14 @@
$t("lang.data_analysis") $t("lang.data_analysis")
}} }}
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/data_analysis/org_service' }">
{{
$t("lang.operational_analysis")
}}
</el-breadcrumb-item>
<el-breadcrumb-item> <el-breadcrumb-item>
{{ {{
$t("lang.my_service_data_analysis") $t("lang.service_data_analysis")
}} }}
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
...@@ -72,7 +77,7 @@ ...@@ -72,7 +77,7 @@
@changeButton="changeApplicationFieldBtn" @changeButton="changeApplicationFieldBtn"
class="block" class="block"
> >
<BarChart :data="bar_data" /> <BarChart :x_router="30" :data="bar_data" />
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -293,492 +298,184 @@ export default { ...@@ -293,492 +298,184 @@ export default {
BarChart, BarChart,
ApassTable, ApassTable,
Graph, Graph,
Topology Topology,
}, },
data: () => ({ data: () => ({
overview: { overview: {
serviceTotal: 28 serviceTotal: 0,
}, },
left_1_state: 0, left_1_state: 0,
left_2_state: 0, left_2_state: 0,
left_3_state: 0, left_3_state: 0,
center_3_state: 0, center_3_state: 0,
center_4_state: 0,
right_0_state: 0, right_0_state: 0,
right_1_state: 0, right_1_state: 0,
right_2_state: 0, right_2_state: 0,
right_3_state: 0, right_3_state: 0,
last_id: 0, last_id: 0,
mult_data_state: [ mult_data_state: [
{ name: "正常", value: 22 }, { name: "正常", value: 0 },
{ name: "警告", value: 12 }, { name: "警告", value: 0 },
{ name: "错误", value: 14 }, { name: "错误", value: 0 },
{ name: "未使用", value: 19 } { name: "未使用", value: 0 },
], ],
mult_data: [ mult_data: [
{ name: "数据服务", value: 22 }, { name: "数据服务", value: 0 },
{ name: "时空服务", value: 12 }, { name: "时空服务", value: 0 },
{ name: "视频服务", value: 14 }, { name: "视频服务", value: 0 },
{ name: "感知服务", value: 14 }, { name: "感知服务", value: 0 },
{ name: "综合服务", value: 1 } { name: "综合服务", value: 0 },
], ],
fwsp_data: [ fwsp_data: [
{ name: "已审批", value: 25 }, { name: "已审批", value: 0 },
{ name: "待审批", value: 75 } { name: "待审批", value: 0 },
], ],
spIndicatorStyles1: false, spIndicatorStyles1: false,
spRefLineStyles3: { spRefLineStyles3: {
stroke: "#d14", stroke: "#d14",
strokeOpacity: 0, strokeOpacity: 0,
strokeDasharray: "2, 2" strokeDasharray: "2, 2",
}, },
spCurveStyles2: { spCurveStyles2: {
stroke: "#274fee", stroke: "#274fee",
fill: "#274fee" fill: "#274fee",
}, },
spCurveStyles3: { spCurveStyles3: {
stroke: "#e56600", stroke: "#e56600",
fill: "#e56600" fill: "#e56600",
}, },
sparkline1: { sparkline1: {
num: 8848, num: 0,
up: 32, up: 0,
arr: [20, 29, 40, 33, 45, 58] arr: [],
}, },
sparkline2: { sparkline2: {
num: 9964, num: 0,
up: 20, up: 0,
arr: [33, 29, 36, 33, 45, 58] arr: [],
}, },
text: "服务总数", text: "服务总数",
fwsp_text: "服务审批", fwsp_text: "服务审批",
single_data: { single_data: {
num: 32, num: 0,
color: "#25bdb1", color: "#25bdb1",
text: "共享" text: "共享",
}, },
single_data1: { single_data1: {
num: 28, num: 0,
color: "#f5ab4c", color: "#f5ab4c",
text: "受限" text: "受限",
}, },
single_data2: { single_data2: {
num: 30, num: 0,
color: "#e15260", color: "#e15260",
text: "敏感" text: "敏感",
}, },
serviceSpData: { serviceSpData: {
xAxisData: [ 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: [ seriesData: [
{ {
name: "已审批", name: "已审批",
data: [ data: [],
300,
400,
350,
280,
480,
520,
500,
460,
300,
400,
350,
280,
480,
520,
500,
460
]
}, },
{ {
name: "未审批", name: "未审批",
data: [ data: [],
300, },
350, ],
400,
280,
320,
450,
400,
350,
300,
350,
400,
280,
320,
450,
400,
350
]
}
]
}, },
line_data: { line_data: {
xAxisData: [ 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: [ seriesData: [
{ {
name: "上架中", name: "上架中",
data: [ data: [],
300,
400,
350,
280,
480,
520,
500,
222,
300,
400,
350,
280,
480,
520,
500,
222
]
}, },
{ {
name: "未上架", name: "未上架",
data: [ data: [],
300, },
350, ],
366,
280,
320,
450,
366,
350,
300,
350,
366,
280,
320,
450,
366,
350
]
}
]
}, },
das_data: { das_data: {
data: 85, data: 0,
text: "健康占比" text: "健康占比",
}, },
bar_data: { bar_data: {
legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"], legendData: [],
seriesData: [322, 454, 566, 399, 222, 167] seriesData: [],
}, },
bar_data_org: { bar_data_org: {
legendData: [ legendData: [],
"省公安厅", seriesData: [],
"省发改委",
"贵州省公安厅",
"贵州省发改委",
"贵州省公安厅"
],
seriesData: [322, 454, 266, 399, 222, 167]
}, },
toplistData: [ 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, // 服务调用排名分析 目标值 toplistTargetValue: 40, // 服务调用排名分析 目标值
commentlistData: [ commentlistData: [], // 服务评价
{ linelistData: [], // 服务状态统计
picture_path: starlistData: [], // 服务评分
"/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, starlistTotal: 15,
hotSearchHeader: [], // 热门搜索 表头 hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [ 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: { graph_arr: {
legend: { legend: {
data: ["被调用次数", "调用次数"] data: [],
}, },
data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"], data: [],
series: [ series: [
{ name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] }, { name: "被调用次数", data: [] },
{ name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] } { name: "调用次数", data: [] },
] ],
}, },
topology_datas: { } topology_datas: {},
}), }),
mounted() { mounted() {
// this.getServiceOverview(); this.getServiceOverview();
// this.getServiceHealth(); this.getServiceHealth();
// this.getServiceTrend(); this.getServiceTrend();
// this.getServiceType(); this.getServiceType();
// this.getServiceSectorse(); this.getServiceSectorse();
// this.getServiceOrg(); this.getServiceOrg();
// this.getServiceOpenness(); this.getServiceOpenness();
// this.getServiceRequest(); this.getServiceRequest();
// this.getServiceOnlineState(); this.getServiceOnlineState();
// this.getServiceEstimated(); this.getServiceEstimated();
// this.getServiceHotSearch(); this.getServiceHotSearch();
this.getServiceApprovalChanges();
this.getServiceApprovalStatus();
this.hotSearchHeader = [ this.hotSearchHeader = [
{ {
label: "服务排名", label: "服务排名",
type: "hot-index", type: "hot-index",
width: 100, width: 100,
align: "center" align: "center",
}, },
{ {
label: "服务名称", label: "服务名称",
prop: "name", prop: "name",
type: "button", type: "button",
callback: this.detailHotSearch callback: this.detailHotSearch,
}, },
{ {
label: "搜索次数", label: "搜索次数",
prop: "count", prop: "count",
width: 100, width: 100,
align: "center" align: "center",
}, },
{ {
label: "日涨幅", label: "日涨幅",
prop: "increases", prop: "increases",
width: 100, width: 100,
sortType: "0", // 0：升序 1：降序 sortType: "0", // 0：升序 1：降序
align: "center" align: "center",
} },
]; ];
this.getTopologyData(); this.getTopologyData();
}, },
methods: { methods: {
getServiceHotSearch() { getServiceHotSearch() {
this.$api.dataAnalysis.getServiceHotSearch().then(response => { this.$api.dataAnalysis.getServiceHotSearch().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; let data = response.data.data;
this.sparkline1 = { this.sparkline1 = {
...@@ -789,7 +486,7 @@ export default { ...@@ -789,7 +486,7 @@ export default {
: data.trend == "down" : data.trend == "down"
? 0 - data.search_user.per ? 0 - data.search_user.per
: data.search_user.per, : data.search_user.per,
arr: data.search_user_trend.seriesData arr: data.search_user_trend.seriesData,
}; };
this.sparkline2 = { this.sparkline2 = {
num: data.search_user_avg.count, num: data.search_user_avg.count,
...@@ -799,7 +496,7 @@ export default { ...@@ -799,7 +496,7 @@ export default {
: data.trend == "down" : data.trend == "down"
? 0 - data.search_user_avg.per ? 0 - data.search_user_avg.per
: data.search_user_avg.per, : data.search_user_avg.per,
arr: data.search_user_avg_trend.seriesData arr: data.search_user_avg_trend.seriesData,
}; };
// top5_rank // top5_rank
this.hotSearchData = []; this.hotSearchData = [];
...@@ -815,7 +512,7 @@ export default { ...@@ -815,7 +512,7 @@ export default {
? e.search_user.per ? e.search_user.per
: e.trend == "down" : e.trend == "down"
? 0 - e.search_user.per ? 0 - e.search_user.per
: e.search_user.per : e.search_user.per,
}); });
}); });
} }
...@@ -823,7 +520,7 @@ export default { ...@@ -823,7 +520,7 @@ export default {
}); });
}, },
getServiceOverview() { getServiceOverview() {
this.$api.dataAnalysis.getServiceOverview().then(response => { this.$api.dataAnalysis.getServiceOverview().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.overview = response.data.data; this.overview = response.data.data;
this.das_data.data = Math.round( this.das_data.data = Math.round(
...@@ -836,7 +533,7 @@ export default { ...@@ -836,7 +533,7 @@ export default {
}); });
}, },
getServiceHealth() { getServiceHealth() {
this.$api.dataAnalysis.getServiceHealth().then(response => { this.$api.dataAnalysis.getServiceHealth().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.mult_data_state = response.data.data.seriesData; this.mult_data_state = response.data.data.seriesData;
} }
...@@ -845,7 +542,7 @@ export default { ...@@ -845,7 +542,7 @@ export default {
getServiceTrend() { getServiceTrend() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getServiceTrend({ type: this.right_1_state }) .getServiceTrend({ type: this.right_1_state })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.graph_arr = response.data.data; this.graph_arr = response.data.data;
} }
...@@ -854,7 +551,7 @@ export default { ...@@ -854,7 +551,7 @@ export default {
getServiceType() { getServiceType() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getServiceType({ type: this.left_2_state }) .getServiceType({ type: this.left_2_state })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.mult_data = response.data.data.seriesData; this.mult_data = response.data.data.seriesData;
} }
...@@ -863,7 +560,7 @@ export default { ...@@ -863,7 +560,7 @@ export default {
getServiceSectorse() { getServiceSectorse() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getServiceSectorse({ type: this.left_3_state }) .getServiceSectorse({ type: this.left_3_state })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.bar_data = response.data.data; this.bar_data = response.data.data;
} }
...@@ -872,7 +569,7 @@ export default { ...@@ -872,7 +569,7 @@ export default {
getServiceOrg() { getServiceOrg() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getServiceOrg({ type: this.left_3_state }) .getServiceOrg({ type: this.left_3_state })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.bar_data_org = response.data.data; this.bar_data_org = response.data.data;
} }
...@@ -881,7 +578,7 @@ export default { ...@@ -881,7 +578,7 @@ export default {
getServiceOpenness() { getServiceOpenness() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getServiceOpenness({ type: this.right_2_state }) .getServiceOpenness({ type: this.right_2_state })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.single_data.num = response.data.data.shared; this.single_data.num = response.data.data.shared;
this.single_data1.num = response.data.data.privacy; this.single_data1.num = response.data.data.privacy;
...@@ -892,7 +589,7 @@ export default { ...@@ -892,7 +589,7 @@ export default {
getServiceRequest() { getServiceRequest() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getServiceRequest({ type: this.right_0_state }) .getServiceRequest({ type: this.right_0_state })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.toplistData = response.data.data; this.toplistData = response.data.data;
if (this.toplistData && this.toplistData.length != 0) { if (this.toplistData && this.toplistData.length != 0) {
...@@ -904,7 +601,7 @@ export default { ...@@ -904,7 +601,7 @@ export default {
getServiceOnlineState() { getServiceOnlineState() {
this.$api.dataAnalysis this.$api.dataAnalysis
.getServiceOnlineState({ type: this.center_3_state }) .getServiceOnlineState({ type: this.center_3_state })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.line_data = response.data.data; this.line_data = response.data.data;
console.log(this.line_data); console.log(this.line_data);
...@@ -915,758 +612,86 @@ export default { ...@@ -915,758 +612,86 @@ export default {
this.$api.dataAnalysis this.$api.dataAnalysis
.getServiceEstimated({ .getServiceEstimated({
type: this.right_3_state, type: this.right_3_state,
last_id: this.last_id last_id: this.last_id,
}) })
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.commentlistData = response.data.data.concat( if (response.data.data) {
this.commentlistData this.commentlistData = response.data.data.concat(
); this.commentlistData
);
}
this.last_id = this.commentlistData[0].last_id; this.last_id = this.commentlistData[0].last_id;
} }
}); });
}, },
getServiceApprovalChanges() {
this.$api.dataAnalysis
.getServiceApprovalChanges({
type: this.center_4_state,
})
.then((response) => {
if (response.data.success == 1) {
}
});
},
getServiceApprovalStatus() {
this.$api.dataAnalysis.getServiceApprovalStatus().then((response) => {
if (response.data.success == 1) {
this.fwsp_data = response.data.data;
}
});
},
getServiceTransfer() {},
detailHotSearch(item) { detailHotSearch(item) {
this.$router.push("/fwgl/0/0/servicedetail/" + item.id); this.$router.push("/fwgl/0/0/servicedetail/" + item.id);
}, },
changeServeiceSpChangeBtn(val) { changeServeiceSpChangeBtn(index) {
if (val === 0) { this.center_4_state = index;
this.serviceSpData = { this.getServiceApprovalChanges();
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) { changeServiceTypeBtn(index) {
if (index === 0) { this.left_2_state = index;
this.mult_data = [ this.getServiceType();
{ 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) { changeApplicationFieldBtn(index) {
if (index === 0) { this.left_3_state = index;
this.bar_data = { this.getServiceSectorse();
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) { changeServeiceApplyCountBtn(index) {
if (index === 0) { this.right_0_state = index;
this.toplistData = [ this.getServiceRequest();
{
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) { changeServeiceInfoBtn(index) {
this.right_3_state = index; this.right_3_state = index;
// this.getServiceEstimated(); this.getServiceEstimated();
}, },
changeOpenessBtnindex(index) { changeOpenessBtnindex(index) {
if (index === 1) { this.right_2_state = index;
this.single_data = { this.getServiceOpenness();
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) { changeServiceCellBtn(index) {
if (index === 0) { this.right_1_state = index;
this.graph_arr = { this.getServiceTrend();
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) { changeServeiceTotalChangeBtn(index) {
if (index === 0) { this.center_3_state = index;
this.line_data = { this.getServiceOnlineState();
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() { getTopologyData() {
this.$api.workbench.getServiceTopology().then(response => { this.$api.workbench.getServiceTopology().then((response) => {
this.topology_datas = response.data.elements; this.topology_datas = response.data.elements;
}); });
}, },
changeServiceStateBtn(index) { changeServiceStateBtn(index) {
if (index === 0) { this.left_1_state = index;
this.mult_data_state = [ if (index == 0) {
{ name: "正常", value: 22 }, this.getServiceHealth();
{ name: "警告", value: 12 },
{ name: "错误", value: 14 },
{ name: "未使用", value: 19 }
];
} else { } else {
this.mult_data_state = [ this.getServiceTransfer();
{ name: "已调用", value: 33 },
{ name: "未调用", value: 23 }
];
} }
// this.left_1_state = index; },
// if (index == 0) { },
// this.getServiceHealth();
// } else {
// this.a();
// }
}
}
}; };
</script> </script>
<style scoped> <style scoped>
......
src/pages/data-analysis/super-application.vue
View file @ eb2e2bcd
...@@ -2,57 +2,976 @@ ...@@ -2,57 +2,976 @@
<div> <div>
<el-breadcrumb separator="/" class="bread_crumb1"> <el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.data_analysis") }}</el-breadcrumb-item> <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-item :to="{ path: '/data_analysis/super_service' }">
{{
$t("lang.operational_analysis")
}}
</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.application_data_analysis") }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<BlockRadius class="default"> <el-row class="in_analysis">
<div class="default_img"> <!-- 可横向铺满 -->
<h1 class="default_title">开发中，敬请期待！</h1> <el-col :span="6" class="in_left">
<h3 class="default_msg"> <el-row>
如需技术支持 <el-col :span="24" class="in_block">
<br />请联系管理员 <block-radius :show_header="true" title="应用总体概况" class="block">
</h3> <div class="left_1">
</div> <div class="left_block">
</BlockRadius> <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="应用部署排名分析"
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> </div>
</template> </template>
<script> <script>
import BlockRadius from "@/components/general/block-radius"; 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 { export default {
methods: {
getData() {},
},
components: { components: {
BlockRadius, BlockRadius,
multipleCircle,
singleCircle,
Toplist,
Starlist,
Commentlist,
lineChart,
BarChart,
ApassTable,
Graph,
WaterPolo,
},
data: () => ({
isyysp: true,
water_polo: [64, 36],
overview: {
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,
now_app_approval: 0,
now_app_approval_state: 0,
mult_data: [
{ name: "基础工具", value: 0 },
{ name: "通用应用", value: 0 },
{ name: "业务应用", value: 0 },
],
text: "应用总数",
spIndicatorStyles1: false,
spRefLineStyles3: {
stroke: "#d14",
strokeOpacity: 0,
strokeDasharray: "2, 2",
},
spCurveStyles2: {
stroke: "#274fee",
fill: "#274fee",
},
Yysp_data: [
{ name: "已审批", value: 0 },
{ name: "待审批", value: 0 },
],
Yysp_text: "应用审批",
serviceSpData: {
xAxisData: [],
seriesData: [],
},
spCurveStyles3: {
stroke: "#e56600",
fill: "#e56600",
},
sparkline1: {
arr: [],
num: 0,
up: 0,
},
sparkline2: {
arr: [],
num: 0,
up: 0,
},
single_data: {
num: 0,
color: "#274fee",
text: "平台应用",
},
single_data1: {
num: 0,
color: "#e56600",
text: "开发者应用",
},
line_data: {
xAxisData: [],
seriesData: [],
},
bar_data_org: {
legendData: [],
seriesData: [],
},
bar_data_area: {
legendData: [],
seriesData: [],
},
graph_arr: {
legend: {
data: ["被调用次数", "调用次数"],
},
data: [],
series: [
{ name: "被调用次数", data: [] },
{ name: "调用次数", data: [] },
],
},
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: [], // 应用评价
starlistData: [], // 应用评分
starlistTotal: 10,
hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [], // 热门搜索 数据
}),
mounted() {
this.getAppOverview();
this.getAppUsedCount();
this.getAppType();
this.getAppSourceOri();
this.getAppUsedArea();
this.getAppCount();
this.getAppDeployRank();
this.getAppEvaluate();
this.getAppOnlineState();
this.getAppHot();
this.getAppApproval();
this.getAppApprovalState();
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: {
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),
});
});
}
});
},
getAppApproval() {
this.$api.dataAnalysis
.getAppApproval({ type: this.now_app_approval })
.then((response) => {
if (response.data.success == 1) {
let data = response.data.data;
this.serviceSpData = {
xAxisData: data.data,
seriesData: data.series,
};
}
});
},
getAppApprovalState() {
this.$api.dataAnalysis
.getAppApprovalState({ type: this.now_app_approval_state })
.then((response) => {
if (response.data.success == 1) {
let data = response.data.data;
this.serviceSpData = {
xAxisData: data.data,
seriesData: data.series,
};
}
});
},
detailHotSearch(item) {
console.log("查看热搜详情");
this.$router.push(`/yygl/0/0/detail/${item.id}?source=${item.source}`);
},
hotSearchSortChange(sortInfo) {
console.log("应用热门搜索: " + sortInfo);
},
changeAppSpChangeBtn(index) {
if (index == 0) {
this.now_app_approval = 14;
} else {
this.now_app_approval = 30;
}
this.getAppApproval();
},
changeAppSpBtn(index) {
this.now_app_approval_state = index;
this.getAppApprovalState();
},
changeServiceTypeBtn(index) {
if (index == 0) {
this.now_app_type = 1;
} else {
this.now_app_type = 2;
}
this.getAppType();
},
changeAppAreaTypeBtn(index) {
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.now_used_count_day = 7;
} else {
this.now_used_count_day = 30;
}
this.getAppUsedCount();
},
changeServeiceApplyCountBtn(index) {
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.now_app_count = 14;
} else {
this.now_app_count = 30;
}
this.getAppCount();
},
}, },
}; };
</script> </script>
<style lang="less" scoped> <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 { .default {
height: calc(100vh - 160px); text-align: center;
}
.default_img {
width: 330px;
height: 230px;
}
.block-radius-content {
height: calc(100% - 36px);
margin-top: 15px;
}
.service-hot-search {
display: flex; display: flex;
align-items: center; justify-content: flex-start;
justify-content: center; align-items: stretch;
margin: 0 20px; height: calc(100% - 21px);
.default_img { margin-top: 0;
width: 1282px; }
height: 629px; .service-hot-search > .left-content {
.default_title { width: 260px;
color: #264dd9; flex-shrink: 0;
font-size: 44px; padding: 0 20px;
font-weight: bold; box-sizing: border-box;
margin-bottom: 40px; margin-right: 10px;
} }
.default_msg { .service-hot-search > .right-content {
color: #58617a; flex-grow: 1;
font-size: 24px; overflow-x: hidden;
line-height: 44px; 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>
<style scoped>
.default_img { <style>
background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center center; .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> </style>
\ No newline at end of file
src/pages/data-analysis/super-service.vue
View file @ eb2e2bcd
...@@ -6,61 +6,831 @@ ...@@ -6,61 +6,831 @@
$t("lang.data_analysis") $t("lang.data_analysis")
}} }}
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/data_analysis/super_service' }">
{{
$t("lang.operational_analysis")
}}
</el-breadcrumb-item>
<el-breadcrumb-item> <el-breadcrumb-item>
{{ {{
$t("lang.my_service_data_analysis") $t("lang.service_data_analysis")
}} }}
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<BlockRadius class="default"> <el-row class="in_analysis">
<div class="default_img"> <!-- 可横向铺满 -->
<h1 class="default_title">开发中，敬请期待！</h1> <el-col :span="6" class="in_left">
<h3 class="default_msg"> <el-row>
如需技术支持 <el-col :span="24" class="in_block">
<br />请联系管理员 <block-radius :show_header="true" title="服务总体概况" class="block">
</h3> <div class="left_1">
</div> <div ref="left_1_l" class="left_1_l">
</BlockRadius> <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 :x_router="30" :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="服务调用排名分析"
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> </div>
</template> </template>
<script> <script>
import BlockRadius from "@/components/general/block-radius"; 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 { export default {
methods: {
getData() {},
},
components: { components: {
BlockRadius, BlockRadius,
Dashboard,
multipleCircle,
singleCircle,
Toplist,
Commentlist,
Starlist,
lineChart,
BarChart,
ApassTable,
Graph,
Topology,
},
data: () => ({
overview: {
serviceTotal: 0,
},
left_1_state: 0,
left_2_state: 0,
left_3_state: 0,
center_3_state: 0,
center_4_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: 0 },
{ name: "警告", value: 0 },
{ name: "错误", value: 0 },
{ name: "未使用", value: 0 },
],
mult_data: [
{ name: "数据服务", value: 0 },
{ name: "时空服务", value: 0 },
{ name: "视频服务", value: 0 },
{ name: "感知服务", value: 0 },
{ name: "综合服务", value: 0 },
],
fwsp_data: [
{ name: "已审批", value: 0 },
{ name: "待审批", value: 0 },
],
spIndicatorStyles1: false,
spRefLineStyles3: {
stroke: "#d14",
strokeOpacity: 0,
strokeDasharray: "2, 2",
},
spCurveStyles2: {
stroke: "#274fee",
fill: "#274fee",
},
spCurveStyles3: {
stroke: "#e56600",
fill: "#e56600",
},
sparkline1: {
num: 0,
up: 0,
arr: [],
},
sparkline2: {
num: 0,
up: 0,
arr: [],
},
text: "服务总数",
fwsp_text: "服务审批",
single_data: {
num: 0,
color: "#25bdb1",
text: "共享",
},
single_data1: {
num: 0,
color: "#f5ab4c",
text: "受限",
},
single_data2: {
num: 0,
color: "#e15260",
text: "敏感",
},
serviceSpData: {
xAxisData: [],
seriesData: [
{
name: "已审批",
data: [],
},
{
name: "未审批",
data: [],
},
],
},
line_data: {
xAxisData: [],
seriesData: [
{
name: "上架中",
data: [],
},
{
name: "未上架",
data: [],
},
],
},
das_data: {
data: 0,
text: "健康占比",
},
bar_data: {
legendData: [],
seriesData: [],
},
bar_data_org: {
legendData: [],
seriesData: [],
},
toplistData: [], // 服务调用排名分析
toplistTargetValue: 40, // 服务调用排名分析 目标值
commentlistData: [], // 服务评价
linelistData: [], // 服务状态统计
starlistData: [], // 服务评分
starlistTotal: 15,
hotSearchHeader: [], // 热门搜索 表头
hotSearchData: [], // 热门搜索 数据
graph_arr: {
legend: {
data: [],
},
data: [],
series: [
{ name: "被调用次数", data: [] },
{ name: "调用次数", data: [] },
],
},
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.getServiceApprovalChanges();
this.getServiceApprovalStatus();
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: {
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) {
if (response.data.data) {
this.commentlistData = response.data.data.concat(
this.commentlistData
);
}
this.last_id = this.commentlistData[0].last_id;
}
});
},
getServiceApprovalChanges() {
this.$api.dataAnalysis
.getServiceApprovalChanges({
type: this.center_4_state,
})
.then((response) => {
if (response.data.success == 1) {
}
});
},
getServiceApprovalStatus() {
this.$api.dataAnalysis.getServiceApprovalStatus().then((response) => {
if (response.data.success == 1) {
this.fwsp_data = response.data.data;
}
});
},
getServiceTransfer() {},
detailHotSearch(item) {
this.$router.push("/fwgl/0/0/servicedetail/" + item.id);
},
changeServeiceSpChangeBtn(index) {
this.center_4_state = index;
this.getServiceApprovalChanges();
},
changeServiceTypeBtn(index) {
this.left_2_state = index;
this.getServiceType();
},
changeApplicationFieldBtn(index) {
this.left_3_state = index;
this.getServiceSectorse();
},
changeServeiceApplyCountBtn(index) {
this.right_0_state = index;
this.getServiceRequest();
},
changeServeiceInfoBtn(index) {
this.right_3_state = index;
this.getServiceEstimated();
},
changeOpenessBtnindex(index) {
this.right_2_state = index;
this.getServiceOpenness();
},
changeServiceCellBtn(index) {
this.right_1_state = index;
this.getServiceTrend();
},
changeServeiceTotalChangeBtn(index) {
this.center_3_state = index;
this.getServiceOnlineState();
},
getTopologyData() {
this.$api.workbench.getServiceTopology().then((response) => {
this.topology_datas = response.data.elements;
});
},
changeServiceStateBtn(index) {
this.left_1_state = index;
if (index == 0) {
this.getServiceHealth();
} else {
this.getServiceTransfer();
}
},
}, },
}; };
</script> </script>
<style lang="less" scoped> <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 { .default {
height: calc(100vh - 160px); text-align: center;
}
.default_img {
width: 330px;
height: 230px;
}
.block-radius-content {
height: calc(100% - 36px);
margin-top: 15px;
}
.service-hot-search {
display: flex; display: flex;
align-items: center; justify-content: flex-start;
justify-content: center; align-items: stretch;
margin: 0 20px; height: calc(100% - 21px);
.default_img { margin-top: 0;
width: 1282px; }
height: 629px; .service-hot-search > .left-content {
.default_title { width: 260px;
color: #264dd9; flex-shrink: 0;
font-size: 44px; padding: 0 20px;
font-weight: bold; box-sizing: border-box;
margin-bottom: 40px; margin-right: 10px;
} }
.default_msg { .service-hot-search > .right-content {
color: #58617a; flex-grow: 1;
font-size: 24px; overflow-x: hidden;
line-height: 44px; 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>
<style scoped>
.default_img { <style>
background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center center; .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> </style>
\ No newline at end of file
src/request/api/data-analysis.js
View file @ eb2e2bcd
...@@ -37,6 +37,12 @@ const dataAnalysis = { ...@@ -37,6 +37,12 @@ const dataAnalysis = {
getServiceHotSearch() { getServiceHotSearch() {
return axios.get(`/apaas/service/v3/statistics/normal/service/search`); return axios.get(`/apaas/service/v3/statistics/normal/service/search`);
}, },
getServiceApprovalChanges() {
return axios.get(``);
},
getServiceApprovalStatus() {
return axios.get(``);
},
//app //app
getAppOverview(){ getAppOverview(){
...@@ -69,6 +75,12 @@ const dataAnalysis = { ...@@ -69,6 +75,12 @@ const dataAnalysis = {
getAppHot(){ getAppHot(){
return axios.get(`/apaas/hubApi/analysis/appSearch`); return axios.get(`/apaas/hubApi/analysis/appSearch`);
}, },
getAppApproval(params) {
return axios.get(`/apaas/hubApi/analysis/approvalChanges?day=${params.type}`);
},
getAppApprovalState(params) {
return axios.get(`/apaas/hubApi/analysis/approvalStatus?style=${params.type}`);
},
} }
export default dataAnalysis; export default dataAnalysis;
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