"src/pages/data-analysis/data-analysis.vue" did not exist on "f2d05d19da6fbe61efc6a24bbf35a2fd2db607e9"
Commit a978d92c authored by 徐一鸣's avatar 徐一鸣

服务管控

parent 7a87dd1e
...@@ -9,112 +9,82 @@ export default { ...@@ -9,112 +9,82 @@ export default {
data: { data: {
type: Object, type: Object,
default: () => { default: () => {
return { return null;
title:[], },
dataOne:[],
dataTwo:[]
};
}
}, },
bar_width: { bar_width: {
type: Number, type: Number,
default: 12 default: 12,
}, },
colors: { colors: {
type: Array, type: Array,
default: () => { default: () => {
return [ "#1034eb", "#e56600"]; return ["#1034eb", "#e56600"];
} },
}, },
bar_border_radius: { bar_border_radius: {
type: Array, type: Array,
default: () => { default: () => {
return [10, 0, 0, 10]; return [10, 0, 0, 10];
} },
}, },
bar_border_radius_two: { bar_border_radius_two: {
type: Array, type: Array,
default: () => { default: () => {
return [0, 10, 10, 0]; return [0, 10, 10, 0];
} },
}, },
show_split: { show_split: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
x_router: { x_router: {
type: Number, type: Number,
default: 0 default: 0,
} },
}, },
data: () => ({}), data: () => ({}),
mounted() {}, mounted() {},
methods: { methods: {
bar() { bar() {
let self = this; let self = this;
let yAxis = (self.data && self.data.yAxis) || [];
let series = (self.data && self.data.series) || [{}, {}];
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
// 坐标轴指示器,坐标轴触发有效 type: "shadow",
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...";
}
}, },
legend: { legend: {
data: ["设置警告值", "实际访问值"], data: series.map((item) => item.name),
left: "right", left: "right",
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
orient: "horizontal", orient: "horizontal",
// backgroundColor: "#f4f7fc"
}, },
color:self.colors, color: self.colors,
grid: { grid: {
top: 35, top: 35,
left: 10, left: 10,
right: 30, right: 30,
bottom: 0, bottom: 0,
containLabel: true containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
axisLabel: { axisLabel: {
formatter: function(value) { formatter: function(value) {
return Math.abs(value); //显示的数值都取绝对值 return Math.abs(value);
} },
}, },
type: "value", type: "value",
axisTick: { axisTick: {
show: false show: false,
}, },
// splitLine: { },
// show: false
// }
// splitArea: {
// show: true,
// areaStyle: {
// color: ["#fff", "#f8f9fd"],
// opacity: 0.5
// },
// interval: 0
// }
}
], ],
yAxis: [ yAxis: [
{ {
...@@ -123,31 +93,27 @@ export default { ...@@ -123,31 +93,27 @@ export default {
axisLabel: { axisLabel: {
color: "#333", color: "#333",
textStyle: { textStyle: {
fontSize: 12 fontSize: 12,
} },
}, },
minInterval: 1, minInterval: 1,
data: self.data.title, data: yAxis,
// splitLine: { axisLine: {
// show: false show: false,
// }, },
axisLine:{ },
show:false
}
}
], ],
series: [ series: [
{ {
name: "设置警告值",
type: "bar", type: "bar",
stack: "总量", stack: "总量",
label: { label: {
normal: { normal: {
show: false, show: false,
position: "right" position: "right",
} },
}, },
barWidth : 10,//柱图宽度 barWidth: 10,
itemStyle: { itemStyle: {
normal: { normal: {
color: function(params) { color: function(params) {
...@@ -159,23 +125,23 @@ export default { ...@@ -159,23 +125,23 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: self.colors[1] // 0% 处的颜色 color: self.colors[1], // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: self.colors[1] // 100% 处的颜色 color: self.colors[1], // 100% 处的颜色
} },
], ],
false 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", type: "bar",
stack: "总量", stack: "总量",
label: { label: {
...@@ -184,10 +150,10 @@ export default { ...@@ -184,10 +150,10 @@ export default {
position: "left", position: "left",
formatter: function(v) { formatter: function(v) {
return Math.abs(v.data); return Math.abs(v.data);
}
}
}, },
barWidth : 10,//柱图宽度 },
},
barWidth: 10,
itemStyle: { itemStyle: {
normal: { normal: {
color: function(params) { color: function(params) {
...@@ -199,25 +165,26 @@ export default { ...@@ -199,25 +165,26 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: self.colors[0] // 0% 处的颜色 color: self.colors[0], // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: self.colors[0] // 100% 处的颜色 color: self.colors[0], // 100% 处的颜色
} },
], ],
false 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> </script>
<style scoped> <style scoped>
......
<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>
...@@ -21,25 +21,25 @@ ...@@ -21,25 +21,25 @@
<div style="height:25px;"></div> <div style="height:25px;"></div>
<gk-circle <gk-circle
ref="left_1_r" ref="left_1_r"
:data="gk_data[0]" :data="controlData[0]"
:is_word="true" :is_word="true"
class="left_1_r" class="left_1_r"
></gk-circle> ></gk-circle>
<gk-circle <gk-circle
ref="left_1_r" ref="left_1_r"
:data="gk_data[1]" :data="controlData[1]"
:is_word="true" :is_word="true"
class="left_1_r" class="left_1_r"
></gk-circle> ></gk-circle>
<gk-circle <gk-circle
ref="left_1_r" ref="left_1_r"
:data="gk_data[2]" :data="controlData[2]"
:is_word="true" :is_word="true"
class="left_1_r" class="left_1_r"
></gk-circle> ></gk-circle>
<gk-circle <gk-circle
ref="left_1_r" ref="left_1_r"
:data="gk_data[3]" :data="controlData[3]"
:is_word="true" :is_word="true"
class="left_1_r" class="left_1_r"
></gk-circle> ></gk-circle>
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<el-col :span="12"> <el-col :span="12">
<gkmultiple-circle <gkmultiple-circle
class="block-radius-content" class="block-radius-content"
:data="mult_data_state" :data="sensitivityLeftData"
:show_center_data="false" :show_center_data="false"
:bar_width="10" :bar_width="10"
style="height:200px;margin-top:0;" style="height:200px;margin-top:0;"
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<line-chart <line-chart
:data="line_data" :data="sensitivityRightData"
:zzfw="true" :zzfw="true"
style="height:200px;" style="height:200px;"
:showShadow="false" :showShadow="false"
...@@ -82,10 +82,10 @@ ...@@ -82,10 +82,10 @@
:show_header="true" :show_header="true"
title="应用构建数量排名" title="应用构建数量排名"
> >
<doubleLine <doubleBar
:data="doubleData" :data="requestData"
style="margin-top: -20px;" style="margin-top: -20px;"
></doubleLine> ></doubleBar>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -99,14 +99,12 @@ ...@@ -99,14 +99,12 @@
class="block" class="block"
style="height:540px;" style="height:540px;"
:buttons_arr="['完整性', '正确性', '一致性', '时效性']" :buttons_arr="['完整性', '正确性', '一致性', '时效性']"
@changeButton="changeServeiceGkBtn" @changeButton="changeRankTab"
> >
<toplist <rankList
class="block-radius-content" class="block-radius-content"
:options="toplistData" :options="rankData"
:isPercent="true" ></rankList>
:target-value="toplistTargetValue"
></toplist>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -130,459 +128,179 @@ import BlockRadius from "@/components/general/block-radius"; ...@@ -130,459 +128,179 @@ import BlockRadius from "@/components/general/block-radius";
import GkCircle from "@/components/e-charts/gk-circle"; import GkCircle from "@/components/e-charts/gk-circle";
import GkmultipleCircle from "@/components/e-charts/gkmultiple_circle"; import GkmultipleCircle from "@/components/e-charts/gkmultiple_circle";
import lineChart from "@/components/e-charts/line_chart"; import lineChart from "@/components/e-charts/line_chart";
import doubleLine from "@/components/e-charts/doubleLine"; import doubleBar from "@/components/e-charts/doubleBar";
import Toplist from "@/components/e-charts/toplist"; import rankList from "@/components/e-charts/rankList";
export default { export default {
components: {
BlockRadius,
GkCircle,
GkmultipleCircle,
lineChart,
doubleBar,
rankList,
},
data() { data() {
return { return {
toplistData: [ controlData: [
{
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: data: 0,
"/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,
text: "数据完整率", text: "数据完整率",
}, },
{ {
data: 50, data: 0,
text: "数据正确性", text: "数据正确性",
}, },
{ {
data: 40, data: 0,
text: "数据一致性", text: "数据一致性",
}, },
{ {
data: 20, data: 0,
text: "数据时效性", text: "数据时效性",
}, },
], ], // 管控分析概况
doubleData: { sensitivityLeftData: [
title: [ { name: "含敏感字段的服务", value: 0 },
"人脸识别API", { name: "不含敏感字段的服务", value: 0 },
"通知中心服务字符", ], // 敏感信息服务统计 左侧饼图
"省送达服务", sensitivityRightData: {
"数据传输服务", xAxisData: [],
"证据检查服务",
],
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",
],
seriesData: [ seriesData: [
{ {
name: "含敏感字段的服务", name: "含敏感字段的服务",
data: [300, 400, 350, 280, 480, 520, 500, 460], data: [],
}, },
{ {
name: "不含敏感字段的服务", name: "不含敏感字段的服务",
data: [300, 350, 400, 280, 320, 450, 400, 350], data: [],
}, },
], ],
}, }, // 敏感信息服务统计 右侧折线图
}; requestData: {
}, yAxis: [],
components: { series: [
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,
},
{ {
cover: name: "服务注册数量",
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", data: [],
service_name: "易智瑞 V11.3",
request_count: 27,
}, },
{ {
cover: name: "服务发布数量",
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", data: [],
service_name: "CAS单点登录 V1.0",
request_count: 25,
}, },
{ ],
cover: }, // 应用构建数量排名
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", rankData: [], // 服务管控排名
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,
}, },
{ methods: {
cover: init() {
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", this.initControl();
service_name: "postgresql V11.1", this.initSensitivity();
request_count: 6, 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: data: data.data.correctness,
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", text: "数据正确性",
service_name: "CAS单点登录 V1.0",
request_count: 6,
}, },
{ {
cover: data: data.data.coherence,
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", text: "数据一致性",
service_name: "postgresql V11.1",
request_count: 4,
}, },
{ {
cover: data: data.data.timeliness,
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", text: "数据时效性",
service_name: "CAS单点登录 V1.0",
request_count: 2,
}, },
]; ];
} else { } else {
this.toplistData = [ this.$message.error(data.errMsg || "获取管控分析概况失败");
{ }
cover: })
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", .catch((error) => {
service_name: "postgresql V11.1", console.log(error);
request_count: 36, this.$message.error("获取管控分析概况失败");
}, });
{ }, // 获取 管控分析概况
cover: initSensitivity() {
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", Promise.all([
service_name: "钉钉 V1.0", this.$http.get(
request_count: 34, "/apaas/service/v3/control/service/data/sensitivity?tab=1"
}, ),
{ this.$http.get(
cover: "/apaas/service/v3/control/service/data/sensitivity?tab=2"
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", ),
service_name: "易智瑞 V11.3", ])
request_count: 32, .then((response) => {
}, let datas = response.map((item) => item.data.data);
{
cover: this.sensitivityLeftData = [
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", { name: "含敏感字段的服务", value: datas[0].have_sensitivity },
service_name: "CAS单点登录 V1.0", { name: "不含敏感字段的服务", value: datas[0].not_sensitivity },
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.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> </script>
<style scoped> <style scoped>
.in_block { .in_block {
height: 280px; height: 280px;
......
...@@ -21,25 +21,25 @@ ...@@ -21,25 +21,25 @@
<div style="height:25px;"></div> <div style="height:25px;"></div>
<gk-circle <gk-circle
ref="left_1_r" ref="left_1_r"
:data="gk_data[0]" :data="controlData[0]"
:is_word="true" :is_word="true"
class="left_1_r" class="left_1_r"
></gk-circle> ></gk-circle>
<gk-circle <gk-circle
ref="left_1_r" ref="left_1_r"
:data="gk_data[1]" :data="controlData[1]"
:is_word="true" :is_word="true"
class="left_1_r" class="left_1_r"
></gk-circle> ></gk-circle>
<gk-circle <gk-circle
ref="left_1_r" ref="left_1_r"
:data="gk_data[2]" :data="controlData[2]"
:is_word="true" :is_word="true"
class="left_1_r" class="left_1_r"
></gk-circle> ></gk-circle>
<gk-circle <gk-circle
ref="left_1_r" ref="left_1_r"
:data="gk_data[3]" :data="controlData[3]"
:is_word="true" :is_word="true"
class="left_1_r" class="left_1_r"
></gk-circle> ></gk-circle>
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<el-col :span="12"> <el-col :span="12">
<gkmultiple-circle <gkmultiple-circle
class="block-radius-content" class="block-radius-content"
:data="mult_data_state" :data="sensitivityLeftData"
:show_center_data="false" :show_center_data="false"
:bar_width="10" :bar_width="10"
style="height:200px;margin-top:0;" style="height:200px;margin-top:0;"
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<line-chart <line-chart
:data="line_data" :data="sensitivityRightData"
:zzfw="true" :zzfw="true"
style="height:200px;" style="height:200px;"
:showShadow="false" :showShadow="false"
...@@ -82,7 +82,10 @@ ...@@ -82,7 +82,10 @@
:show_header="true" :show_header="true"
title="应用构建数量排名" title="应用构建数量排名"
> >
<doubleLine :data="doubleData" style="margin-top: -20px;"></doubleLine> <doubleBar
:data="requestData"
style="margin-top: -20px;"
></doubleBar>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -96,14 +99,12 @@ ...@@ -96,14 +99,12 @@
class="block" class="block"
style="height:540px;" style="height:540px;"
:buttons_arr="['完整性', '正确性', '一致性', '时效性']" :buttons_arr="['完整性', '正确性', '一致性', '时效性']"
@changeButton="changeServeiceGkBtn" @changeButton="changeRankTab"
> >
<toplist <rankList
class="block-radius-content" class="block-radius-content"
:options="toplistData" :options="rankData"
:isPercent="true" ></rankList>
:target-value="toplistTargetValue"
></toplist>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -127,459 +128,179 @@ import BlockRadius from "@/components/general/block-radius"; ...@@ -127,459 +128,179 @@ import BlockRadius from "@/components/general/block-radius";
import GkCircle from "@/components/e-charts/gk-circle"; import GkCircle from "@/components/e-charts/gk-circle";
import GkmultipleCircle from "@/components/e-charts/gkmultiple_circle"; import GkmultipleCircle from "@/components/e-charts/gkmultiple_circle";
import lineChart from "@/components/e-charts/line_chart"; import lineChart from "@/components/e-charts/line_chart";
import doubleLine from "@/components/e-charts/doubleLine"; import doubleBar from "@/components/e-charts/doubleBar";
import Toplist from "@/components/e-charts/toplist"; import rankList from "@/components/e-charts/rankList";
export default { export default {
components: {
BlockRadius,
GkCircle,
GkmultipleCircle,
lineChart,
doubleBar,
rankList,
},
data() { data() {
return { return {
toplistData: [ controlData: [
{
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: data: 0,
"/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,
text: "数据完整率", text: "数据完整率",
}, },
{ {
data: 50, data: 0,
text: "数据正确性", text: "数据正确性",
}, },
{ {
data: 40, data: 0,
text: "数据一致性", text: "数据一致性",
}, },
{ {
data: 20, data: 0,
text: "数据时效性", text: "数据时效性",
}, },
], ], // 管控分析概况
doubleData: { sensitivityLeftData: [
title: [ { name: "含敏感字段的服务", value: 0 },
"人脸识别API", { name: "不含敏感字段的服务", value: 0 },
"通知中心服务字符", ], // 敏感信息服务统计 左侧饼图
"省送达服务", sensitivityRightData: {
"数据传输服务", xAxisData: [],
"证据检查服务",
],
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",
],
seriesData: [ seriesData: [
{ {
name: "含敏感字段的服务", name: "含敏感字段的服务",
data: [300, 400, 350, 280, 480, 520, 500, 460], data: [],
}, },
{ {
name: "不含敏感字段的服务", name: "不含敏感字段的服务",
data: [300, 350, 400, 280, 320, 450, 400, 350], data: [],
}, },
], ],
}, }, // 敏感信息服务统计 右侧折线图
}; requestData: {
}, yAxis: [],
components: { series: [
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,
},
{ {
cover: name: "服务注册数量",
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", data: [],
service_name: "易智瑞 V11.3",
request_count: 27,
}, },
{ {
cover: name: "服务发布数量",
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", data: [],
service_name: "CAS单点登录 V1.0",
request_count: 25,
}, },
{ ],
cover: }, // 应用构建数量排名
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", rankData: [], // 服务管控排名
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,
}, },
{ methods: {
cover: init() {
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", this.initControl();
service_name: "postgresql V11.1", this.initSensitivity();
request_count: 6, 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: data: data.data.correctness,
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", text: "数据正确性",
service_name: "CAS单点登录 V1.0",
request_count: 6,
}, },
{ {
cover: data: data.data.coherence,
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", text: "数据一致性",
service_name: "postgresql V11.1",
request_count: 4,
}, },
{ {
cover: data: data.data.timeliness,
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", text: "数据时效性",
service_name: "CAS单点登录 V1.0",
request_count: 2,
}, },
]; ];
} else { } else {
this.toplistData = [ this.$message.error(data.errMsg || "获取管控分析概况失败");
{ }
cover: })
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", .catch((error) => {
service_name: "postgresql V11.1", console.log(error);
request_count: 36, this.$message.error("获取管控分析概况失败");
}, });
{ }, // 获取 管控分析概况
cover: initSensitivity() {
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", Promise.all([
service_name: "钉钉 V1.0", this.$http.get(
request_count: 34, "/apaas/service/v3/control/service/data/sensitivity?tab=1"
}, ),
{ this.$http.get(
cover: "/apaas/service/v3/control/service/data/sensitivity?tab=2"
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", ),
service_name: "易智瑞 V11.3", ])
request_count: 32, .then((response) => {
}, let datas = response.map((item) => item.data.data);
{
cover: this.sensitivityLeftData = [
"/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob", { name: "含敏感字段的服务", value: datas[0].have_sensitivity },
service_name: "CAS单点登录 V1.0", { name: "不含敏感字段的服务", value: datas[0].not_sensitivity },
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.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> </script>
<style scoped> <style scoped>
.in_block { .in_block {
height: 280px; 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