Skip to content

A
apaas-ui
Commit a978d92c authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

服务管控

parent 7a87dd1e
Show whitespace changes
Inline Side-by-side
Showing with 525 additions and 956 deletions
src/components/e-charts/doubleLine.vue → src/components/e-charts/doubleBar.vue
View file @ a978d92c
......@@ -9,112 +9,82 @@ export default {
data: {
type: Object,
default: () => {
return {
title:[],
dataOne:[],
dataTwo:[]
};
}
return null;
},
},
bar_width: {
type: Number,
default: 12
default: 12,
},
colors: {
type: Array,
default: () => {
return [ "#1034eb", "#e56600"];
}
return ["#1034eb", "#e56600"];
},
},
bar_border_radius: {
type: Array,
default: () => {
return [10, 0, 0, 10];
}
},
},
bar_border_radius_two: {
type: Array,
default: () => {
return [0, 10, 10, 0];
}
},
},
show_split: {
type: Boolean,
default: false
default: false,
},
x_router: {
type: Number,
default: 0
}
default: 0,
},
},
data: () => ({}),
mounted() {},
methods: {
bar() {
let self = this;
let yAxis = (self.data && self.data.yAxis) || [];
let series = (self.data && self.data.series) || [{}, {}];
return {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params, ticket, callback) {
// console.log(params);
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
params[i].seriesName +
" : " +
Math.abs(params[i].value);
}
setTimeout(function() {
// 仅为了模拟异步回调
callback(ticket, res);
}, 500);
return "loading...";
}
type: "shadow",
},
},
legend: {
data: ["设置警告值", "实际访问值"],
data: series.map((item) => item.name),
left: "right",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
// backgroundColor: "#f4f7fc"
},
color:self.colors,
color: self.colors,
grid: {
top: 35,
left: 10,
right: 30,
bottom: 0,
containLabel: true
containLabel: true,
},
xAxis: [
{
axisLabel: {
formatter: function(value) {
return Math.abs(value); //显示的数值都取绝对值
}
return Math.abs(value);
},
},
type: "value",
axisTick: {
show: false
},
// splitLine: {
// show: false
// }
// splitArea: {
// show: true,
// areaStyle: {
// color: ["#fff", "#f8f9fd"],
// opacity: 0.5
// },
// interval: 0
// }
}
show: false,
},
},
],
yAxis: [
{
......@@ -123,31 +93,27 @@ export default {
axisLabel: {
color: "#333",
textStyle: {
fontSize: 12
}
fontSize: 12,
},
},
minInterval: 1,
data: self.data.title,
// splitLine: {
// show: false
// },
axisLine:{
show:false
}
}
data: yAxis,
axisLine: {
show: false,
},
},
],
series: [
{
name: "设置警告值",
type: "bar",
stack: "总量",
label: {
normal: {
show: false,
position: "right"
}
position: "right",
},
},
barWidth : 10,//柱图宽度
barWidth: 10,
itemStyle: {
normal: {
color: function(params) {
......@@ -159,23 +125,23 @@ export default {
[
{
offset: 0,
color: self.colors[1] // 0% 处的颜色
color: self.colors[1], // 0% 处的颜色
},
{
offset: 1,
color: self.colors[1] // 100% 处的颜色
}
color: self.colors[1], // 100% 处的颜色
},
],
false
);
},
barBorderRadius: self.bar_border_radius_two
}
barBorderRadius: self.bar_border_radius_two,
},
},
data: self.data.dataOne
name: series[0].name,
data: series[0].data,
},
{
name: "实际访问值",
type: "bar",
stack: "总量",
label: {
......@@ -184,10 +150,10 @@ export default {
position: "left",
formatter: function(v) {
return Math.abs(v.data);
}
}
},
barWidth : 10,//柱图宽度
},
},
barWidth: 10,
itemStyle: {
normal: {
color: function(params) {
......@@ -199,25 +165,26 @@ export default {
[
{
offset: 0,
color: self.colors[0] // 0% 处的颜色
color: self.colors[0], // 0% 处的颜色
},
{
offset: 1,
color: self.colors[0] // 100% 处的颜色
}
color: self.colors[0], // 100% 处的颜色
},
],
false
);
},
barBorderRadius: self.bar_border_radius
}
barBorderRadius: self.bar_border_radius,
},
},
name: series[1].name,
data: series[1].data.map((v) => v * -1),
},
data: self.data.dataTwo
}
]
],
};
}
}
},
},
};
</script>
<style scoped>
......
src/components/e-charts/rankList.vue 0 → 100644
View file @ a978d92c
<template>
<div
class="top_list apaas_scroll"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
<ul>
<li class="rank_list" v-for="(option, index) in options" :key="index">
<div class="item_index">
<span v-text="'TOP' + (index + 1)"></span>
</div>
<div class="item_logo">
<el-avatar
shape="square"
:size="28"
:src="option.cover"
fit="cover"
/>
</div>
<div class="item_detail">
<p class="item_info">
<span>{{ option.name }}</span>
<span v-text="option.percentage + '%'"></span>
</p>
<el-progress
class="item_progress"
:percentage="option.percentage"
:show-text="false"
color="#e56600"
></el-progress>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
default: () => [],
},
},
data() {
return {
timer: null,
};
},
watch: {
options: {
handler() {
this.autoScroll();
},
deep: true,
},
},
methods: {
autoScroll() {
if (this.timer) {
clearInterval(this.timer);
}
this.$el.scrollTop = 0;
this.timer = setInterval(() => {
let itemHeight = 50;
let curScrollTop = this.$el.scrollTop + itemHeight;
if (
curScrollTop >=
this.$el.scrollHeight - this.$el.clientHeight + itemHeight
) {
curScrollTop = 0;
}
this.$el.scrollTop = Math.min(
curScrollTop,
this.$el.scrollHeight - this.$el.clientHeight
);
}, 1500);
},
mouseenter() {
if (this.timer) {
clearInterval(this.timer);
}
},
mouseleave() {
this.autoScroll();
},
},
mounted() {
this.autoScroll();
window.addEventListener("resize", () => {
this.autoScroll();
});
},
destroyed() {
if (this.timer) {
clearInterval(this.timer);
}
},
};
</script>
<style scoped>
.top_list {
overflow-x: hidden;
overflow-y: auto;
}
.rank_list {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 18px;
}
.item_index {
width: 35px;
flex-shrink: 0;
margin-right: 10px;
font-size: 12px;
color: #58617a;
}
.item_logo {
margin-right: 10px;
flex-shrink: 0;
font-size: 0;
border: 2px solid #e3e5ef;
border-radius: 6px;
overflow: hidden;
}
.item_info {
flex-grow: 1;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
line-height: 20px;
color: #58617a;
}
.item_detail {
flex-grow: 1;
}
.item_info > span:first-child {
width: 100px;
flex-grow: 1;
margin-right: 10px;
}
.item_info > span:first-child > i {
font-weight: bold;
font-size: 12px;
color: #8e96ab;
}
.item_info > span:nth-child(2) {
flex-shrink: 0;
white-space: nowrap;
color: #0d1847;
}
.item_progress {
margin-top: 6px;
}
.is_link {
cursor: pointer;
}
</style>
src/pages/data-analysis/org-control.vue
View file @ a978d92c
......@@ -21,25 +21,25 @@
<div style="height:25px;"></div>
<gk-circle
ref="left_1_r"
:data="gk_data[0]"
:data="controlData[0]"
:is_word="true"
class="left_1_r"
></gk-circle>
<gk-circle
ref="left_1_r"
:data="gk_data[1]"
:data="controlData[1]"
:is_word="true"
class="left_1_r"
></gk-circle>
<gk-circle
ref="left_1_r"
:data="gk_data[2]"
:data="controlData[2]"
:is_word="true"
class="left_1_r"
></gk-circle>
<gk-circle
ref="left_1_r"
:data="gk_data[3]"
:data="controlData[3]"
:is_word="true"
class="left_1_r"
></gk-circle>
......@@ -59,7 +59,7 @@
<el-col :span="12">
<gkmultiple-circle
class="block-radius-content"
:data="mult_data_state"
:data="sensitivityLeftData"
:show_center_data="false"
:bar_width="10"
style="height:200px;margin-top:0;"
......@@ -67,7 +67,7 @@
</el-col>
<el-col :span="12">
<line-chart
:data="line_data"
:data="sensitivityRightData"
:zzfw="true"
style="height:200px;"
:showShadow="false"
......@@ -82,10 +82,10 @@
:show_header="true"
title="应用构建数量排名"
>
<doubleLine
:data="doubleData"
<doubleBar
:data="requestData"
style="margin-top: -20px;"
></doubleLine>
></doubleBar>
</block-radius>
</el-col>
</el-row>
......@@ -99,14 +99,12 @@
class="block"
style="height:540px;"
:buttons_arr="['完整性', '正确性', '一致性', '时效性']"
@changeButton="changeServeiceGkBtn"
@changeButton="changeRankTab"
>
<toplist
<rankList
class="block-radius-content"
:options="toplistData"
:isPercent="true"
:target-value="toplistTargetValue"
></toplist>
:options="rankData"
></rankList>
</block-radius>
</el-col>
</el-row>
......@@ -130,459 +128,179 @@ import BlockRadius from "@/components/general/block-radius";
import GkCircle from "@/components/e-charts/gk-circle";
import GkmultipleCircle from "@/components/e-charts/gkmultiple_circle";
import lineChart from "@/components/e-charts/line_chart";
import doubleLine from "@/components/e-charts/doubleLine";
import Toplist from "@/components/e-charts/toplist";
import doubleBar from "@/components/e-charts/doubleBar";
import rankList from "@/components/e-charts/rankList";
export default {
components: {
BlockRadius,
GkCircle,
GkmultipleCircle,
lineChart,
doubleBar,
rankList,
},
data() {
return {
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,
},
controlData: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2,
},
], // 服务管控排名分析
toplistTargetValue: 40, // 服务管控排名分析 目标值
gk_data: [
{
data: 85,
data: 0,
text: "数据完整率",
},
{
data: 50,
data: 0,
text: "数据正确性",
},
{
data: 40,
data: 0,
text: "数据一致性",
},
{
data: 20,
data: 0,
text: "数据时效性",
},
],
doubleData: {
title: [
"人脸识别API",
"通知中心服务字符",
"省送达服务",
"数据传输服务",
"证据检查服务",
],
dataOne: [100, 300, 256, 288, 176, 327],
dataTwo: [-60, -340, -226, -228, -136, -227],
},
mult_data_state: [
{ name: "含敏感字段的服务", value: 50 },
{ name: "不含敏感字段的服务", value: 41 },
],
line_data: {
xAxisData: [
"08-01",
"08-02",
"08-03",
"08-04",
"08-05",
"08-06",
"08-07",
],
], // 管控分析概况
sensitivityLeftData: [
{ name: "含敏感字段的服务", value: 0 },
{ name: "不含敏感字段的服务", value: 0 },
], // 敏感信息服务统计 左侧饼图
sensitivityRightData: {
xAxisData: [],
seriesData: [
{
name: "含敏感字段的服务",
data: [300, 400, 350, 280, 480, 520, 500, 460],
data: [],
},
{
name: "不含敏感字段的服务",
data: [300, 350, 400, 280, 320, 450, 400, 350],
data: [],
},
],
},
};
},
components: {
BlockRadius,
GkCircle,
GkmultipleCircle,
lineChart,
doubleLine,
Toplist,
},
methods: {
getData() {},
changeServeiceGkBtn(val) {
if (val === 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 if (val === 1) {
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,
},
}, // 敏感信息服务统计 右侧折线图
requestData: {
yAxis: [],
series: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 27,
name: "服务注册数量",
data: [],
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 25,
name: "服务发布数量",
data: [],
},
{
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,
},
];
} else if (val === 2) {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 33,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 25,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 20,
},
{
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: 11,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 10,
],
}, // 应用构建数量排名
rankData: [], // 服务管控排名
};
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6,
methods: {
init() {
this.initControl();
this.initSensitivity();
this.initRequest();
this.initRank();
},
initControl() {
this.$http
.get("/apaas/service/v3/control/service/data/control")
.then(({ data }) => {
if (data.success === 1) {
this.controlData = [
{
data: data.data.integrity,
text: "数据完整率",
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6,
data: data.data.correctness,
text: "数据正确性",
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4,
data: data.data.coherence,
text: "数据一致性",
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2,
data: data.data.timeliness,
text: "数据时效性",
},
];
} else {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 36,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 34,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 32,
},
{
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: 14,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 12,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 9,
},
{
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.$message.error(data.errMsg || "获取管控分析概况失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("获取管控分析概况失败");
});
}, // 获取 管控分析概况
initSensitivity() {
Promise.all([
this.$http.get(
"/apaas/service/v3/control/service/data/sensitivity?tab=1"
),
this.$http.get(
"/apaas/service/v3/control/service/data/sensitivity?tab=2"
),
])
.then((response) => {
let datas = response.map((item) => item.data.data);
this.sensitivityLeftData = [
{ name: "含敏感字段的服务", value: datas[0].have_sensitivity },
{ name: "不含敏感字段的服务", value: datas[0].not_sensitivity },
];
this.sensitivityRightData = {
xAxisData: datas[1].xAxis.data,
seriesData: datas[1].series,
};
})
.catch((error) => {
console.log(error);
this.$message.error("获取敏感信息服务统计失败");
});
}, // 获取 敏感信息服务统计
initRequest() {
this.$http
.get("/apaas/service/v3/control/service/data/sensitivity/request")
.then(({ data }) => {
if (data.success === 1) {
this.requestData = {
yAxis: data.data.xAxis.data,
series: data.data.series,
};
} else {
this.$message.error(data.errMsg || "获取应用构建数量排名失败");
}
},
})
.catch((error) => {
console.log(error);
this.$message.error("获取应用构建数量排名失败");
});
}, // 获取 应用构建数量排名
initRank(tab = 1) {
this.$http
.get(`/apaas/service/v3/control/service/data/control/rank?tab=${tab}`)
.then(({ data }) => {
if (data.success === 1) {
this.rankData = data.data;
} else {
this.$message.error(data.errMsg || "获取服务管控排名失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("获取服务管控排名失败");
});
}, // 获取 服务管控排名
changeRankTab(val) {
this.initRank(val + 1);
}, // 切换 服务管控排名
},
created() {
this.init();
},
};
</script>
<style scoped>
.in_block {
height: 280px;
......
src/pages/data-analysis/super-control.vue
View file @ a978d92c
......@@ -21,25 +21,25 @@
<div style="height:25px;"></div>
<gk-circle
ref="left_1_r"
:data="gk_data[0]"
:data="controlData[0]"
:is_word="true"
class="left_1_r"
></gk-circle>
<gk-circle
ref="left_1_r"
:data="gk_data[1]"
:data="controlData[1]"
:is_word="true"
class="left_1_r"
></gk-circle>
<gk-circle
ref="left_1_r"
:data="gk_data[2]"
:data="controlData[2]"
:is_word="true"
class="left_1_r"
></gk-circle>
<gk-circle
ref="left_1_r"
:data="gk_data[3]"
:data="controlData[3]"
:is_word="true"
class="left_1_r"
></gk-circle>
......@@ -59,7 +59,7 @@
<el-col :span="12">
<gkmultiple-circle
class="block-radius-content"
:data="mult_data_state"
:data="sensitivityLeftData"
:show_center_data="false"
:bar_width="10"
style="height:200px;margin-top:0;"
......@@ -67,7 +67,7 @@
</el-col>
<el-col :span="12">
<line-chart
:data="line_data"
:data="sensitivityRightData"
:zzfw="true"
style="height:200px;"
:showShadow="false"
......@@ -82,7 +82,10 @@
:show_header="true"
title="应用构建数量排名"
>
<doubleLine :data="doubleData" style="margin-top: -20px;"></doubleLine>
<doubleBar
:data="requestData"
style="margin-top: -20px;"
></doubleBar>
</block-radius>
</el-col>
</el-row>
......@@ -96,14 +99,12 @@
class="block"
style="height:540px;"
:buttons_arr="['完整性', '正确性', '一致性', '时效性']"
@changeButton="changeServeiceGkBtn"
@changeButton="changeRankTab"
>
<toplist
<rankList
class="block-radius-content"
:options="toplistData"
:isPercent="true"
:target-value="toplistTargetValue"
></toplist>
:options="rankData"
></rankList>
</block-radius>
</el-col>
</el-row>
......@@ -127,459 +128,179 @@ import BlockRadius from "@/components/general/block-radius";
import GkCircle from "@/components/e-charts/gk-circle";
import GkmultipleCircle from "@/components/e-charts/gkmultiple_circle";
import lineChart from "@/components/e-charts/line_chart";
import doubleLine from "@/components/e-charts/doubleLine";
import Toplist from "@/components/e-charts/toplist";
import doubleBar from "@/components/e-charts/doubleBar";
import rankList from "@/components/e-charts/rankList";
export default {
components: {
BlockRadius,
GkCircle,
GkmultipleCircle,
lineChart,
doubleBar,
rankList,
},
data() {
return {
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,
},
controlData: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 21,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 18,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 15,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 12,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 10,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 8,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2,
},
], // 服务管控排名分析
toplistTargetValue: 40, // 服务管控排名分析 目标值
gk_data: [
{
data: 85,
data: 0,
text: "数据完整率",
},
{
data: 50,
data: 0,
text: "数据正确性",
},
{
data: 40,
data: 0,
text: "数据一致性",
},
{
data: 20,
data: 0,
text: "数据时效性",
},
],
doubleData: {
title: [
"人脸识别API",
"通知中心服务字符",
"省送达服务",
"数据传输服务",
"证据检查服务",
],
dataOne: [100, 300, 256, 288, 176, 327],
dataTwo: [-60, -340, -226, -228, -136, -227],
},
mult_data_state: [
{ name: "含敏感字段的服务", value: 50 },
{ name: "不含敏感字段的服务", value: 41 },
],
line_data: {
xAxisData: [
"08-01",
"08-02",
"08-03",
"08-04",
"08-05",
"08-06",
"08-07",
],
], // 管控分析概况
sensitivityLeftData: [
{ name: "含敏感字段的服务", value: 0 },
{ name: "不含敏感字段的服务", value: 0 },
], // 敏感信息服务统计 左侧饼图
sensitivityRightData: {
xAxisData: [],
seriesData: [
{
name: "含敏感字段的服务",
data: [300, 400, 350, 280, 480, 520, 500, 460],
data: [],
},
{
name: "不含敏感字段的服务",
data: [300, 350, 400, 280, 320, 450, 400, 350],
data: [],
},
],
},
};
},
components: {
BlockRadius,
GkCircle,
GkmultipleCircle,
lineChart,
doubleLine,
Toplist,
},
methods: {
getData() {},
changeServeiceGkBtn(val) {
if (val === 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 if (val === 1) {
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,
},
}, // 敏感信息服务统计 右侧折线图
requestData: {
yAxis: [],
series: [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 27,
name: "服务注册数量",
data: [],
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 25,
name: "服务发布数量",
data: [],
},
{
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,
},
];
} else if (val === 2) {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 33,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 25,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 20,
},
{
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: 11,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 10,
],
}, // 应用构建数量排名
rankData: [], // 服务管控排名
};
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 6,
methods: {
init() {
this.initControl();
this.initSensitivity();
this.initRequest();
this.initRank();
},
initControl() {
this.$http
.get("/apaas/service/v3/control/service/data/control")
.then(({ data }) => {
if (data.success === 1) {
this.controlData = [
{
data: data.data.integrity,
text: "数据完整率",
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 6,
data: data.data.correctness,
text: "数据正确性",
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 4,
data: data.data.coherence,
text: "数据一致性",
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 2,
data: data.data.timeliness,
text: "数据时效性",
},
];
} else {
this.toplistData = [
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 36,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "钉钉 V1.0",
request_count: 34,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "易智瑞 V11.3",
request_count: 32,
},
{
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: 14,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "postgresql V11.1",
request_count: 12,
},
{
cover:
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
service_name: "CAS单点登录 V1.0",
request_count: 9,
},
{
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.$message.error(data.errMsg || "获取管控分析概况失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("获取管控分析概况失败");
});
}, // 获取 管控分析概况
initSensitivity() {
Promise.all([
this.$http.get(
"/apaas/service/v3/control/service/data/sensitivity?tab=1"
),
this.$http.get(
"/apaas/service/v3/control/service/data/sensitivity?tab=2"
),
])
.then((response) => {
let datas = response.map((item) => item.data.data);
this.sensitivityLeftData = [
{ name: "含敏感字段的服务", value: datas[0].have_sensitivity },
{ name: "不含敏感字段的服务", value: datas[0].not_sensitivity },
];
this.sensitivityRightData = {
xAxisData: datas[1].xAxis.data,
seriesData: datas[1].series,
};
})
.catch((error) => {
console.log(error);
this.$message.error("获取敏感信息服务统计失败");
});
}, // 获取 敏感信息服务统计
initRequest() {
this.$http
.get("/apaas/service/v3/control/service/data/sensitivity/request")
.then(({ data }) => {
if (data.success === 1) {
this.requestData = {
yAxis: data.data.xAxis.data,
series: data.data.series,
};
} else {
this.$message.error(data.errMsg || "获取应用构建数量排名失败");
}
},
})
.catch((error) => {
console.log(error);
this.$message.error("获取应用构建数量排名失败");
});
}, // 获取 应用构建数量排名
initRank(tab = 1) {
this.$http
.get(`/apaas/service/v3/control/service/data/control/rank?tab=${tab}`)
.then(({ data }) => {
if (data.success === 1) {
this.rankData = data.data;
} else {
this.$message.error(data.errMsg || "获取服务管控排名失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("获取服务管控排名失败");
});
}, // 获取 服务管控排名
changeRankTab(val) {
this.initRank(val + 1);
}, // 切换 服务管控排名
},
created() {
this.init();
},
};
</script>
<style scoped>
.in_block {
height: 280px;
......
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