Skip to content

M
monthReport_smzx
提交 c7a1eb48 authored 作者: 邓文彬's avatar 邓文彬
浏览文件
操作

fix(图表)： 数据替换

上级 ad78f66e
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 340 行增加 和 69 行删除
pages/monthReport/_monthReportUtil.js 0 → 100644
浏览文件 @ c7a1eb48
function isPlainObject(value) {
return typeof value === 'object' && value !== null && !Array.isArray(value) && Object.keys(value).length > 0;;
}
export function mergeObjectsWithUnderscoreKey(obj, parentKey='') {
const result = {};
for (const key in obj) {
if (isPlainObject(obj[key])) {
const subObject = mergeObjectsWithUnderscoreKey(obj[key], parentKey + (parentKey ? '_' : '') + key);
Object.assign(result, subObject);
} else {
result[parentKey + (parentKey ? '_' : '') + key] = obj[key];
}
}
return result;
}
// 监测当前路径是否在所有权限路径中，没有包含返回true
export function isFlagHasRouter(e) {
let permission_realRoutes = store.getters.permission_realRoutes;
let router = e.split("?");
let index = permission_realRoutes.indexOf(router[0]);
// console.log(index);
return index >= 0 ? false : true;
}
\ No newline at end of file
pages/monthReport/components/rightBar.vue
浏览文件 @ c7a1eb48
...@@ -12,14 +12,52 @@ ...@@ -12,14 +12,52 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
export default { export default {
props: {}, props: {
alarmLists: {
type: Array,
default: () => {
return [];
}
}
},
data() { data() {
return {}; return {
lists: [
{
name: "终端告警",
key: 'terminal',
},
{
name: "应用告警",
key: 'application',
},
{
name: "机房告警",
key: 'computerData',
},
{
name: "网络告警",
key: 'netData',
},
{
name: "数据中心告警",
key: 'dataCenter',
},
{
name: "用户疑似违规",
key: 'userData',
},
],
xData: [],
yData: [],
};
}, },
computed: { computed: {
option() { option() {
let data1 = [1, 2, 3, 4, 5, 61], let xData = this.xData
data2 = [6, 5, 4, 3, 2, 1]; let data1 = this.yData[0] || [],
data2 = this.yData[1] || [];
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -43,14 +81,7 @@ export default { ...@@ -43,14 +81,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: [ data: xData,
"终端告警",
"应用告警",
"机房告警",
"网络告警",
"数据中心告警",
"用户疑似违规",
],
}, },
series: [ series: [
{ {
...@@ -75,7 +106,9 @@ export default { ...@@ -75,7 +106,9 @@ export default {
}; };
}, },
}, },
async mounted() {}, async mounted() {
this.setData(this.alarmLists);
},
methods: { methods: {
changeOption() { changeOption() {
// const data = this.option.series[0].data; // const data = this.option.series[0].data;
...@@ -84,7 +117,33 @@ export default { ...@@ -84,7 +117,33 @@ export default {
// data.splice(index, 1, Math.random() * 40); // data.splice(index, 1, Math.random() * 40);
// }); // });
}, },
setData(arr = []){
// x轴
let xData = []
this.lists.forEach((item,i)=>{
xData.push(item.name)
})
// y轴
let yData = []
arr.forEach((item,i)=>{
yData[i] = []
this.lists.forEach(ele=>{
yData[i].push(item?.[ele.key] || 0)
})
})
this.xData = xData
this.yData = yData
},
}, },
watch: {
alarmLists: {
immediate: true,
handler(val){
this.setData(val);
}
}
}
}; };
</script> </script>
......
pages/monthReport/components/rightItem.vue
浏览文件 @ c7a1eb48
<template> <template>
<ul> <ul>
<li v-for="item in rightOneData" :key="item.label"> <li v-for="item in rightOneData" :key="item.label">
<view class="label">{{ item.label }}</view> <div class="label">{{ item.label }}</div>
<view class="value">{{ item.value }}</view> <div class="value">{{ getDataItemValue(item.key, item.value) }}</div>
</li> </li>
</ul> </ul>
</template> </template>
<script> <script>
export default { export default {
props: {}, props: {
detailData: {
type: Object,
default: () => {
return {};
},
},
},
data() { data() {
return { return {
rightOneData: [ rightOneData: [
{ {
label: "现状分析:", label: "现状分析:",
key: "report_mess_analysis",
value: value:
"本月告警总数X次。终端告警X次、应用告警X次、网络告警X次、机房告警X次、数据中心告警X次。总体环比上升（下降 | 持平）XX%。", "本月告警总数X次。终端告警X次、应用告警X次、网络告警X次、机房告警X次、数据中心告警X次。总体环比上升（下降 | 持平）XX%。",
}, },
{ {
label: "问题识别:", label: "问题识别:",
key: "report_mess_problem",
value: value:
"本月对比上月，XX场景告警、XX场景告警发生率正在上升；本月对比上月，XX场景告警、XX场景告警发生率明显下降。", "本月对比上月，XX场景告警、XX场景告警发生率正在上升；本月对比上月，XX场景告警、XX场景告警发生率明显下降。",
}, },
{ {
label: "原因分析:", label: "原因分析:",
key: "report_mess_reason",
value: value:
"XX场景告警（XXXXXX告警项）本月发生X次；XX场景告警的（XXXXXX告警项）本月发生X次 。", "XX场景告警（XXXXXX告警项）本月发生X次；XX场景告警的（XXXXXX告警项）本月发生X次 。",
}, },
{ {
label: "趋势预测:", label: "趋势预测:",
key: "report_mess_trend",
value: value:
"基于以上数据，XXXXX类、XXXX类告警有上升趋势，近期需重点关注，加强防范。", "基于以上数据，XXXXX类、XXXX类告警有上升趋势，近期需重点关注，加强防范。",
}, },
{ {
label: "风险预警:", label: "风险预警:",
key: "report_mess_warning",
value: value:
"请重点关注机房环控状态，加强巡检力度；请重点关注行为违规，加强规范机房人员个人行为。", "请重点关注机房环控状态，加强巡检力度；请重点关注行为违规，加强规范机房人员个人行为。",
}, },
], ],
}; };
}, },
methods: {
getDataItemValue(key, value) {
if (!key) return value || "-";
return this.detailData?.[key] || "-";
},
},
watch: {
detailData: {
immediate: true,
handler(val) {
if (!val) return;
},
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
ul{ ul {
list-style: none; list-style: none;
li{ li {
list-style: none; list-style: none;
display: flex; display: flex;
.label{ .label {
width: 65px; width: 65px;
height: auto; height: auto;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: #000000; color: #000000;
} }
.value{ .value {
width: calc(100% - 75px); width: calc(100% - 75px);
height: auto; height: auto;
margin-left: 10px; margin-left: 10px;
font-size: 14px; font-size: 14px;
color: #4A4A4A; color: #4a4a4a;
line-height: 22px; line-height: 22px;
} }
} }
......
pages/monthReport/components/rightLine.vue
浏览文件 @ c7a1eb48
...@@ -11,55 +11,63 @@ ...@@ -11,55 +11,63 @@
<script> <script>
export default { export default {
props: {
warningLists: {
type: Array,
default: () => {
return [];
},
},
},
data() { data() {
return { return {
lists: [ lists: [
{ {
name: "终端", name: "终端",
key: "terminal",
yData: [], yData: [],
}, },
{ {
name: "应用", name: "应用",
key: "application",
yData: [], yData: [],
}, },
{ {
name: "机房", name: "机房",
key: "computerData",
yData: [], yData: [],
}, },
{ {
name: "网络", name: "网络",
key: "netData",
yData: [], yData: [],
}, },
{ {
name: "数据中心", name: "数据中心",
key: "dataCenter",
yData: [], yData: [],
}, },
{ {
name: "用户疑似违规", name: "用户疑似违规",
key: "userData",
yData: [], yData: [],
}, },
], ],
xData: [],
}; };
}, },
computed: { computed: {
option() { option() {
let legendData = []; let legendData = [];
let serverData = []; let serverData = [];
let xData = []; let xData = this.xData;
this.lists.forEach((item) => { this.lists.forEach((item) => {
legendData.push(item.name); legendData.push(item.name);
let yData = [];
xData = [];
for (let i = 1; i <= 31; i++) {
yData.push(Math.floor(Math.random() * 100));
xData.push("10-" + i.toString().padStart(2, "0"));
}
serverData.push({ serverData.push({
name: item.name, name: item.name,
type: "line", type: "line",
data: yData, data: item.yData,
}); });
}); });
return { return {
...@@ -117,6 +125,30 @@ export default { ...@@ -117,6 +125,30 @@ export default {
// data.splice(index, 1, Math.random() * 40); // data.splice(index, 1, Math.random() * 40);
// }); // });
}, },
setData(arr = []) {
let xData = [];
arr.forEach((item, i) => {
xData.push(item.date);
});
this.xData = xData;
this.lists.map((item) => {
let Data = [];
arr.forEach((ele) => {
Data.push(ele[item.key] || 0);
});
item.yData = Data;
});
},
},
watch: {
warningLists: {
immediate: true,
handler(val) {
this.setData(val);
},
},
}, },
}; };
</script> </script>
...@@ -181,7 +213,7 @@ export default { ...@@ -181,7 +213,7 @@ export default {
// 监听 service 层数据变更 // 监听 service 层数据变更
myChart.setOption(newValue) myChart.setOption(newValue)
}, },
} }
} }
</script> </script>
......
pages/monthReport/components/tem1.vue
浏览文件 @ c7a1eb48
...@@ -2,9 +2,23 @@ ...@@ -2,9 +2,23 @@
<view class="tem1 padding_all_16"> <view class="tem1 padding_all_16">
<view class="label">{{ item.label }}</view> <view class="label">{{ item.label }}</view>
<view class="value"> <view class="value">
<text>{{ item.value || 0 }}</text> <text>{{ getValue(item.key, item.value) }}</text>
<text class="unit">{{ item.unit || "" }}</text> <text class="unit">{{ item.unit || "" }}</text>
<text class="upValue" v-if="item.upValue">{{ item.upValue }}</text> <text
class="upValue"
:class="{
up: getValue(item.ratioKey, item.upValue) > 0,
down: getValue(item.ratioKey, item.upValue) < 0,
}"
v-if="getValue(item.ratioKey, item.upValue) != 0"
>
{{ Math.abs(getValue(item.ratioKey, item.upValue)) }}
<!-- <svg-icon
:icon-class="
getValue(item.ratioKey, item.upValue) > 0 ? 'up' : 'down1'
"
/> -->
</text>
</view> </view>
<view <view
class="flex-row children" class="flex-row children"
...@@ -21,7 +35,7 @@ ...@@ -21,7 +35,7 @@
{{ child.label }} {{ child.label }}
</view> </view>
<view class="childrenValue"> <view class="childrenValue">
{{ child.value || 0 }} {{ getValue(child.key, child.value) }}
</view> </view>
</view> </view>
</view> </view>
...@@ -29,17 +43,29 @@ ...@@ -29,17 +43,29 @@
</template> </template>
<script> <script>
export default { export default {
props: { props: {
item: { item: {
typeof: Object, typeof: Object,
default: () => ({}), default: () => ({}),
}, },
detailData: {
typeof: Object,
default: () => ({}),
},
}, },
data() { data() {
return {}; return {};
}, },
created() {}, created() {},
methods: {
getValue(key, value) {
if (!key) return value || "0";
return this.detailData?.[key] || "0";
},
},
}; };
</script> </script>
...@@ -49,7 +75,9 @@ export default { ...@@ -49,7 +75,9 @@ export default {
height: 100%; height: 100%;
background: #f9f9f9; background: #f9f9f9;
border-radius: 3px; border-radius: 3px;
cursor: pointer; &.on {
cursor: pointer;
}
.label { .label {
font-size: 14px; font-size: 14px;
color: #000000; color: #000000;
...@@ -65,8 +93,11 @@ export default { ...@@ -65,8 +93,11 @@ export default {
} }
.upValue { .upValue {
font-size: 16px; font-size: 16px;
color: #ef5e59; // color: #ef5e59;
margin-left: 12px; margin-left: 12px;
&.up {
color: #ef5e59;
}
&.down { &.down {
color: #0cc991; color: #0cc991;
} }
......
pages/monthReport/components/tem2.vue
浏览文件 @ c7a1eb48
...@@ -2,24 +2,35 @@ ...@@ -2,24 +2,35 @@
<view class="tem2" :style="item.style || ''"> <view class="tem2" :style="item.style || ''">
<view class="label">{{ item.label }}</view> <view class="label">{{ item.label }}</view>
<view class="value"> <view class="value">
<text>{{ item.value || 0 }}</text> <text>{{ getValue(item.key, item.value) }}</text>
<text class="unit">{{ item.unit || "" }}</text> <text class="unit">{{ item.unit || "" }}</text>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { isFlagHasRouter } from "../_monthReportUtil.js";
export default { export default {
props: { props: {
item: { item: {
typeof: Object, typeof: Object,
default: () => ({}), default: () => ({}),
}, },
detailData: {
typeof: Object,
default: () => ({}),
},
}, },
data() { data() {
return {}; return {};
}, },
created() {}, created() {},
methods: {
getValue(key, value) {
if(!key) return value || '0'
return this.detailData?.[key] || '0'
},
},
}; };
</script> </script>
......
pages/monthReport/components/tem3.vue
浏览文件 @ c7a1eb48
...@@ -2,9 +2,23 @@ ...@@ -2,9 +2,23 @@
<view class="tem1 padding_all_16"> <view class="tem1 padding_all_16">
<view class="label">{{ item.label }}</view> <view class="label">{{ item.label }}</view>
<view class="value"> <view class="value">
<text>{{ item.value || 0 }}</text> <text>{{ getValue(item.key, item.value) }}</text>
<text class="unit">{{ item.unit || "" }}</text> <text class="unit">{{ item.unit || "" }}</text>
<text class="upValue" v-if="item.upValue">{{ item.upValue }}</text> <text
class="upValue"
:class="{
up: getValue(item.ratioKey, item.upValue) > 0,
down: getValue(item.ratioKey, item.upValue) < 0,
}"
v-if="getValue(item.ratioKey, item.upValue) != 0"
>
{{ Math.abs(getValue(item.ratioKey, item.upValue)) }}
<svg-icon
:icon-class="
getValue(item.ratioKey, item.upValue) > 0 ? 'up' : 'down1'
"
/>
</text>
</view> </view>
</view> </view>
</template> </template>
...@@ -16,11 +30,21 @@ export default { ...@@ -16,11 +30,21 @@ export default {
typeof: Object, typeof: Object,
default: () => ({}), default: () => ({}),
}, },
detailData: {
typeof: Object,
default: () => ({}),
},
}, },
data() { data() {
return {}; return {};
}, },
created() {}, created() {},
methods: {
getValue(key, value) {
if (!key) return value || "0";
return this.detailData?.[key] || "0";
},
},
}; };
</script> </script>
......
pages/monthReport/components/tem4.vue
浏览文件 @ c7a1eb48
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<view class="lineItem" :style="item.style || ''"> <view class="lineItem" :style="item.style || ''">
<view class="topContent"> <view class="topContent">
<view>{{ item.label }}</view> <view>{{ item.label }}</view>
<view>{{ item.value }}%</view> <view>{{ getValue(item.key, item.value) }}%</view>
</view> </view>
<view class="line"> <view class="line">
<view <view
class="activeLine" class="activeLine"
:style="{ :style="{
width: item.value + '%', width: getValue(item.key, item.value) + '%',
backgroundColor: item.value >= 60 ? '#00D7A4' : '#F39800', backgroundColor: getValue(item.key, item.value) >= 60 ? '#00D7A4' : '#F39800',
}" }"
></view> ></view>
</view> </view>
...@@ -23,11 +23,17 @@ export default { ...@@ -23,11 +23,17 @@ export default {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
data: { detailData: {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
}, },
methods: {
getValue(key, value) {
if(!key) return value || '0'
return this.detailData?.[key] || '0'
},
}
}; };
</script> </script>
......
pages/monthReport/index.vue
浏览文件 @ c7a1eb48
...@@ -7,8 +7,11 @@ ...@@ -7,8 +7,11 @@
:isTitleNormal="false" :isTitleNormal="false"
></common-top-title> ></common-top-title>
<view class="rightOne"> <view class="rightOne">
<rightPie class="margin_t_16 rightPie" :value="70" /> <rightPie
<rightItem class="rightItem" /> class="margin_t_16 rightPie"
:value="detailData.report_value"
/>
<rightItem :detailData="detailData" class="rightItem" />
</view> </view>
</view> </view>
...@@ -19,6 +22,7 @@ ...@@ -19,6 +22,7 @@
:isTitleNormal="false" :isTitleNormal="false"
></common-top-title> ></common-top-title>
<rightBar <rightBar
:alarmLists="detailData.alarmLists"
class="margin_t_16" class="margin_t_16"
style="width: 100%; height: calc(100% - 32px)" style="width: 100%; height: calc(100% - 32px)"
/> />
...@@ -31,6 +35,7 @@ ...@@ -31,6 +35,7 @@
:isTitleNormal="false" :isTitleNormal="false"
></common-top-title> ></common-top-title>
<rightLine <rightLine
:warningLists="detailData.warningLists"
class="margin_t_16" class="margin_t_16"
style="width: 100%; height: calc(100% - 32px)" style="width: 100%; height: calc(100% - 32px)"
/> />
...@@ -55,7 +60,11 @@ ...@@ -55,7 +60,11 @@
:span="item.span" :span="item.span"
class="flex-average flex-row-gutter-8" class="flex-average flex-row-gutter-8"
> >
<tem1 :item="item" style="height: 137px" /> <tem1
:detailData="detailData"
:item="item"
style="height: 137px"
/>
</view> </view>
</view> </view>
</view> </view>
...@@ -71,7 +80,11 @@ ...@@ -71,7 +80,11 @@
:span="item.span" :span="item.span"
class="flex-average" class="flex-average"
> >
<tem1 :item="item" style="height: 137px" /> <tem1
:detailData="detailData"
:item="item"
style="height: 137px"
/>
</view> </view>
</view> </view>
</view> </view>
...@@ -95,10 +108,17 @@ ...@@ -95,10 +108,17 @@
:item="child" :item="child"
:key="child.label" :key="child.label"
style="height: 60px" style="height: 60px"
:detailData="detailData"
/> />
</template> </template>
</view> </view>
<tem1 v-else :item="item" style="height: 137px" />
<tem1
v-else
:detailData="detailData"
:item="item"
style="height: 137px"
/>
</view> </view>
</view> </view>
</view> </view>
...@@ -120,10 +140,17 @@ ...@@ -120,10 +140,17 @@
:item="child" :item="child"
:key="child.label" :key="child.label"
style="height: 33px" style="height: 33px"
:detailData="detailData"
/> />
</template> </template>
</view> </view>
<tem1 v-else :item="item" style="height: 137px" />
<tem1
v-else
:detailData="detailData"
:item="item"
style="height: 137px"
/>
</view> </view>
</view> </view>
</view> </view>
...@@ -152,13 +179,18 @@ ...@@ -152,13 +179,18 @@
:key="child.label" :key="child.label"
class="el-col-8 flex-row-gutter-8" class="el-col-8 flex-row-gutter-8"
> >
<tem2 :item="child" style="height: 30px" /> <tem2
:detailData="detailData"
:item="child"
style="height: 30px"
/>
</view> </view>
</view> </view>
<tem3 <tem3
v-else-if="item.type == 'tem3'" v-else-if="item.type == 'tem3'"
:item="item" :item="item"
style="height: 76px" style="height: 76px"
:detailData="detailData"
/> />
</view> </view>
</view> </view>
...@@ -177,7 +209,11 @@ ...@@ -177,7 +209,11 @@
:span="item.span" :span="item.span"
class="el-col-6 flex-row-gutter-8" class="el-col-6 flex-row-gutter-8"
> >
<tem3 :item="item" style="height: 76px" /> <tem3
:detailData="detailData"
:item="item"
style="height: 76px"
/>
</view> </view>
</view> </view>
</view> </view>
...@@ -200,7 +236,11 @@ ...@@ -200,7 +236,11 @@
:key="item.label" :key="item.label"
class="el-col-8 flex-row-gutter-8" class="el-col-8 flex-row-gutter-8"
> >
<tem3 :item="item" style="height: 78px" /> <tem3
:detailData="detailData"
:item="item"
style="height: 78px"
/>
</view> </view>
</view> </view>
</view> </view>
...@@ -215,7 +255,11 @@ ...@@ -215,7 +255,11 @@
:key="item.label" :key="item.label"
class="el-col-8 flex-row-gutter-8" class="el-col-8 flex-row-gutter-8"
> >
<tem3 :item="item" style="height: 78px" /> <tem3
:detailData="detailData"
:item="item"
style="height: 78px"
/>
</view> </view>
</view> </view>
</view> </view>
...@@ -236,6 +280,7 @@ import rightPie from "./components/rightPie.vue"; ...@@ -236,6 +280,7 @@ import rightPie from "./components/rightPie.vue";
import rightItem from "./components/rightItem.vue"; import rightItem from "./components/rightItem.vue";
import rightBar from "./components/rightBar.vue"; import rightBar from "./components/rightBar.vue";
import rightLine from "./components/rightLine.vue"; import rightLine from "./components/rightLine.vue";
import {mergeObjectsWithUnderscoreKey} from "./_monthReportUtil.js"
import { import {
terminal, terminal,
...@@ -246,6 +291,7 @@ import { ...@@ -246,6 +291,7 @@ import {
userData, userData,
ywData, ywData,
fbData, fbData,
result,
} from "./config.js"; } from "./config.js";
export default { export default {
components: { components: {
...@@ -270,32 +316,41 @@ export default { ...@@ -270,32 +316,41 @@ export default {
userData, userData,
ywData, ywData,
fbData, fbData,
detailData: {}, //数据详情
}; };
}, },
created() {
this.getDetailData();
},
methods: {
getDetailData() {
this.detailData = mergeObjectsWithUnderscoreKey(result);
},
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.page_box { .page_box {
background: #f2f2f2; background: #f2f2f2;
.rightOne { .rightOne {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.rightPie { .rightPie {
width: 230px; width: 230px;
height: 230px; height: 230px;
}
.rightItem {
width: calc(100% - 230px - 16px);
height: auto;
}
} }
.rightHeight { .rightItem {
height: calc((100% - 300px - 32px) / 2); width: calc(100% - 230px - 16px);
height: auto;
} }
}
.rightHeight {
height: calc((100% - 300px - 32px) / 2);
}
.baseFlex { .baseFlex {
display: flex; display: flex;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论