Skip to content

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

fix(图表)： 数据替换

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