Skip to content

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

fix(图表)： 数据替换

上级 ad78f66e
隐藏空白字符变更
内嵌 并排
正在显示 包含 857 行增加 和 202 行删除
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>
......@@ -181,7 +213,7 @@ export default {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
}
}
</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;
cursor: pointer;
&.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/config.js
浏览文件 @ c7a1eb48
// 终端
export const terminal = [
{
label: '终端数量(已接入)',
label: "终端数量(已接入)",
key: 'terminal_all',
value: 1364,
unit: '台',
unit: "台",
upValue: 106,
type: 'tem1',
ratioKey: 'terminal_ratio',
type: "tem1",
span: 8,
path: "/terminalSupervise/terminalStanding/collect",
children: [
{
label: '接入',
label: "接入",
value: 10,
color: '#1183F5'
key: 'terminal_1',
color: "#1183F5",
},
{
label: '变更',
label: "变更",
value: 10,
color: '#F39800'
key: 'terminal_2',
color: "#F39800",
},
{
label: '撤销',
label: "撤销",
value: 10,
color: '#959595'
key: 'terminal_3',
color: "#959595",
},
]
],
},
{
label: '个人证书(使用中)',
label: "个人证书(使用中)",
value: 1364,
unit: '个',
key: 'certificates_all',
unit: "个",
upValue: 106,
type: 'tem1',
ratioKey: 'certificates_ratio',
type: "tem1",
span: 8,
path: "/terminalSupervise/terminalStanding/certificateCollect",
children: [
{
label: '接入',
label: "接入",
value: 10,
color: '#1183F5'
key: 'certificates_1',
color: "#1183F5",
},
{
label: '撤销',
label: "撤销",
value: 10,
color: '#959595'
key: 'certificates_2',
color: "#959595",
},
]
],
},
{
label: '单位证书(使用中)',
label: "单位证书(使用中)",
value: 1364,
unit: '个',
key: 'key_all',
unit: "个",
upValue: 106,
type: 'tem1',
ratioKey: 'key_ratio',
type: "tem1",
span: 8,
children: [
{
label: '接入',
label: "接入",
value: 10,
color: '#1183F5'
key: 'key_1',
color: "#1183F5",
},
{
label: '变更',
label: "变更",
value: 10,
color: '#F39800'
key: 'key_2',
color: "#F39800",
},
{
label: '接入',
label: "接入",
value: 10,
color: '#959595'
key: 'key_3',
color: "#959595",
},
]
}
]
],
},
];
// 应用
export const application = [
{
label: '应用数量(监测中)',
label: "应用数量(监测中)",
value: 1364,
unit: '套',
key: 'application_all',
unit: "套",
upValue: 106,
type: 'tem1',
ratioKey: 'application_ratio',
type: "tem1",
span: 24,
path: "/applySupervise/applyStanding/collect",
children: [
{
label: '上线',
label: "上线",
value: 10,
color: '#1183F5'
key: 'application_1',
color: "#1183F5",
},
{
label: '下线',
label: "下线",
value: 10,
color: '#959595'
key: 'application_2',
color: "#959595",
},
]
}
]
],
},
];
// 机房
export const computerData = [
{
label: '设备资产',
label: "设备资产",
value: 1364,
unit: '台',
key: "computerData_all",
unit: "台",
upValue: 106,
type: 'tem1',
ratioKey: 'computerData_ratio',
type: "tem1",
span: 12,
path: "/computerSupervise/computerHome",
children: [
{
label: '进入',
label: "进入",
value: 10,
color: '#1183F5'
key: "computerData_1",
color: "#1183F5",
},
{
label: '搬出',
label: "搬出",
value: 10,
color: '#959595',
key: "computerData_2",
color: "#959595",
},
]
],
},
{
type: 'tem2',
type: "tem2",
span: 12,
children: [
{
label: '机房',
label: "机房",
value: 1364,
unit: '个',
key: "computerData_3",
unit: "个",
path: "/computerSupervise/assetManagement",
},
{
label: '监测采集器',
label: "监测采集器",
value: 1364,
unit: '台',
style: 'margin-top: 16px;'
}
]
}
]
key: "computerData_4",
unit: "台",
style: "margin-top: 16px;",
path: "/computerSupervise/machineMonitoring/ringMonitoring",
},
],
},
];
// 数据中心
export const dataCenter = [
{
label: '资源实例',
label: "资源实例",
value: 1364,
unit: '个',
key: "dataCenter_all",
unit: "个",
upValue: 106,
type: 'tem1',
ratioKey: 'dataCenter_ratio',
type: "tem1",
span: 12,
path: "/cloudSupervise/resourceSupervisiorn/resourceMonitoring",
children: [
{
label: '申请',
label: "申请",
value: 10,
color: '#1183F5'
key: "dataCenter_1",
color: "#1183F5",
},
{
label: '释放',
label: "释放",
value: 10,
color: '#959595'
key: "dataCenter_2",
color: "#959595",
},
]
],
},
{
type: 'tem4',
type: "tem4",
span: 12,
children: [
{
label: 'CPU资源余量',
label: "CPU资源余量",
value: 0,
unit: '',
key: "dataCenter_percent_1",
unit: "",
},
{
label: '内存资源余量',
label: "内存资源余量",
value: 20,
unit: '',
style: 'margin-top: 16px;'
key: "dataCenter_percent_2",
unit: "",
style: "margin-top: 16px;",
},
{
label: '存储资源余量',
label: "存储资源余量",
value: 80,
unit: '',
style: 'margin-top: 16px;'
}
]
}
]
key: "dataCenter_percent_3",
unit: "",
style: "margin-top: 16px;",
},
],
},
];
// 网络
export const netData = [
{
label: '网络接入单位',
label: "网络接入单位",
value: 1364,
unit: '家',
key: "netData_all",
unit: "家",
upValue: 106,
type: 'tem3',
ratioKey: 'netData_ratio',
type: "tem3",
span: 6,
path: "net",
},
{
type: 'tem2',
type: "tem2",
span: 18,
children: [
{
label: '汇聚交换机',
label: "汇聚交换机",
value: 1364,
unit: '台',
key: "netData_1",
unit: "台",
path: "net",
},
{
label: '防火墙',
label: "防火墙",
value: 1364,
unit: '台',
key: "netData_2",
unit: "台",
path: "net",
},
{
label: '核心交换机',
label: "核心交换机",
value: 1364,
unit: '台',
key: "netData_3",
unit: "台",
path: "net",
},
{
label: '接入交换机',
label: "接入交换机",
value: 1364,
unit: '台',
style: 'margin-top: 16px;'
key: "netData_4",
unit: "台",
path: "net",
style: "margin-top: 16px;",
},
{
label: '应用服务器',
label: "应用服务器",
value: 1364,
unit: '台',
style: 'margin-top: 16px;'
key: "netData_5",
unit: "台",
path: "net",
style: "margin-top: 16px;",
},
{
label: '安全产品服务器',
label: "安全产品服务器",
value: 1364,
unit: '台',
style: 'margin-top: 16px;'
key: "netData_6",
unit: "台",
path: "net",
style: "margin-top: 16px;",
},
]
}
]
],
},
];
// 网络
// 用户数据
export const userData = [
{
label: '内网用户',
label: "内网用户",
value: 1364,
unit: '人',
key: "userData_all",
unit: "人",
upValue: 106,
type: 'tem3',
ratioKey: 'userData_ratio',
type: "tem3",
span: 6,
path: "/userSupervise/userList",
},
{
label: '涉密用户',
label: "涉密用户",
value: 1364,
unit: '人',
key: "userData_1",
unit: "人",
upValue: 106,
type: 'tem3',
ratioKey: 'userData_ratio1',
type: "tem3",
span: 6,
path: "/userSupervise/userList",
},
{
label: '非涉密用户',
label: "非涉密用户",
value: 1364,
unit: '人',
key: "userData_2",
unit: "人",
upValue: 106,
type: 'tem3',
ratioKey: 'userData_ratio2',
type: "tem3",
span: 6,
path: "/userSupervise/userList",
},
]
];
// 运维
export const ywData = [
{
label: '告警派单',
label: "告警派单",
value: 1364,
unit: '单',
type: 'tem3',
key: "ywData_1",
unit: "单",
type: "tem3",
path: "/operation/accounts/alarm",
span: 8,
},
{
label: '人工派单',
label: "人工派单",
value: 1364,
unit: '单',
type: 'tem3',
key: "ywData_2",
unit: "单",
type: "tem3",
path: "/operation/accounts/ywServer?dispatchType=1",
span: 8,
},
{
label: '电话咨询',
label: "电话咨询",
value: 1364,
unit: '单',
type: 'tem3',
key: "ywData_3",
unit: "单",
type: "tem3",
path: "/operation/accounts/ywServer?dispatchType=2",
span: 8,
},
]
];
// fb
export const fbData = [
{
label: '日常备案',
label: "日常备案",
value: 1364,
unit: '个',
type: 'tem3',
key: "fbData_1",
unit: "个",
type: "tem3",
path: "/datas/reinsuranceBusinessManage/ponitRecordManage",
span: 8,
},
{
label: '自测任务',
label: "自测任务",
value: 1364,
unit: '次',
type: 'tem3',
key: "fbData_2",
unit: "次",
type: "tem3",
path: "/datas/reinsuranceBusinessManage/FBTaskManage?currentIndex=1",
span: 8,
},
{
label: '自查自测',
label: "自查自测",
value: 1364,
unit: '次',
type: 'tem3',
key: "fbData_3",
unit: "次",
type: "tem3",
path: "/datas/reinsuranceBusinessManage/FBTaskManage?currentIndex=2",
span: 8,
},
]
\ No newline at end of file
];
export const result = {
// 终端数据
terminal: {
all: 3,
ratio: '10', //上升会下降
'1': 1,
'2': 1,
'3': 1,
},
// 个人证书数据
certificates: {
all: 0,
ratio: '-10', //上升会下降
'1': 1,
'2': 1,
},
// 单位证书数据
key: {
all: 0,
ratio: '0', //上升会下降
'1': 1,
'2': 1,
'3': 1,
},
// 应用数据
application: {
all: 0,
ratio: '10', //上升会下降
'1': 1,
'2': 1,
},
// 机房数据
computerData: {
all: 0,
ratio: '10', //上升会下降
'1': 1,
'2': 1,
'3': 3,
'4': 4,
},
// 数据中心数据
dataCenter: {
all: 0,
ratio: '10', //上升会下降
'1': 1,
'2': 1,
percent: {
1: 10,
2: 20,
3: 70
}
},
// 网络数据
netData: {
all: 0,
ratio: '10', //上升会下降
'1': 1,
'2': 1,
'3': 3,
'4': 4,
'5': 3,
'6': 4,
},
// 用户数据
userData: {
all: 0,
ratio: '0', //涉密用户上升会下降
ratio1: '-10', //涉密用户上升会下降
// ratio2: '10', //非涉密用户上升会下降
'1': 1,
'2': 1,
},
// 运维数据
ywData: {
'1': 1,
'2': 1,
'3': 1,
},
// 分保数据
fbData: {
'1': 1,
'2': 1,
'3': 1,
},
// 态势分析研判报告
report:{
value: 88,
mess: {
'analysis': '现状分析',
'problem': '问题识别',
'reason': '原因分析',
'trend': '趋势预测',
'warning': '风险预警',
}
},
// 本月场景告警环比图
alarmLists: [
{
date: '2024-9',
terminal: '1',
application: '12',
computerData: '13',
netData: '14',
dataCenter: '15',
userData: '16',
},
{
date: '2024-9',
terminal: '11',
application: '21',
computerData: '31',
netData: '41',
dataCenter: '51',
userData: '61',
}
],
// 本月场景告警趋势图
warningLists:[
{
date: '10-1',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-2',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-3',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-4',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-5',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-6',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-7',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-8',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-9',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-10',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-11',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-12',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-13',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-14',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-15',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-16',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-17',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-18',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-19',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-20',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},{
date: '10-21',
terminal: '1',
application: '2',
computerData: '3',
netData: '4',
dataCenter: '5',
userData: '6',
},
{
date: '10-22',
terminal: '17',
application: '16',
computerData: '15',
netData: '14',
dataCenter: '13',
userData: '12',
},
]
}
\ No newline at end of file
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,32 +316,41 @@ export default {
userData,
ywData,
fbData,
detailData: {}, //数据详情
};
},
created() {
this.getDetailData();
},
methods: {
getDetailData() {
this.detailData = mergeObjectsWithUnderscoreKey(result);
},
},
};
</script>
<style lang="scss">
.page_box {
background: #f2f2f2;
.rightOne {
display: flex;
justify-content: space-between;
align-items: center;
.rightPie {
width: 230px;
height: 230px;
}
.rightItem {
width: calc(100% - 230px - 16px);
height: auto;
}
.rightOne {
display: flex;
justify-content: space-between;
align-items: center;
.rightPie {
width: 230px;
height: 230px;
}
.rightHeight {
height: calc((100% - 300px - 32px) / 2);
.rightItem {
width: calc(100% - 230px - 16px);
height: auto;
}
}
.rightHeight {
height: calc((100% - 300px - 32px) / 2);
}
.baseFlex {
display: flex;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论