Skip to content

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

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

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