|
|
|
@ -1,60 +1,141 @@ |
|
|
|
<template> |
|
|
|
<div class="box"> |
|
|
|
<div class="box-top"> |
|
|
|
<div v-for="index in 3" :key="index" class="box-top-item"> |
|
|
|
<div class="item-box"> |
|
|
|
<div v-for="(item, index) in infoObject" :key="index" class="box-top-item"> |
|
|
|
<div |
|
|
|
class="item-box" |
|
|
|
:style="{ |
|
|
|
'background-image': 'url(' + item.url + ')', |
|
|
|
'background-position': 'center right', |
|
|
|
'background-repeat': 'no-repeat', |
|
|
|
'background-clip': 'content-box', |
|
|
|
'background-origin': 'content-box', |
|
|
|
}"> |
|
|
|
<div class="item-box-icon"> |
|
|
|
<img style="width: 34px; height: 34px" src="./img/icon.png" /> |
|
|
|
</div> |
|
|
|
<div class="item-box-left"> |
|
|
|
<div class="item-box-left-title">设备告警 (今日处理 / 总数) </div> |
|
|
|
<div class="iem-box-left-number"> |
|
|
|
10 / 13 |
|
|
|
{{ item.todayProcessing }} / {{ item.total }} |
|
|
|
<span |
|
|
|
style=" |
|
|
|
color: #04d919; |
|
|
|
font-size: 14px; |
|
|
|
margin-left: 5px; |
|
|
|
font-weight: 700; |
|
|
|
font-style: normal; |
|
|
|
" |
|
|
|
>+10%</span |
|
|
|
v-if="item.liftRatio" |
|
|
|
style="font-size: 12px; margin-left: 5px; font-weight: 700; font-style: normal" |
|
|
|
:style="{ |
|
|
|
color: item.liftRatio > 0 ? 'rgba(243, 97, 99, 1)' : 'rgba(0, 170, 124, 1)', |
|
|
|
}" |
|
|
|
><span v-if="item.liftRatio > 0">+</span>{{ item.liftRatio }}%</span |
|
|
|
> |
|
|
|
<img |
|
|
|
v-if="item.liftRatio" |
|
|
|
style="width: 12px; margin-top: 6px" |
|
|
|
:src="item.liftRatio > 0 ? rise : decline" /> |
|
|
|
<span |
|
|
|
v-if="item.liftRatio === 0" |
|
|
|
style="font-size: 12px; margin-left: 5px; font-weight: 700; font-style: normal"> |
|
|
|
- |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div class="item-box-left-title" |
|
|
|
><span style="color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: 700">{{ |
|
|
|
item.title |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: 6px; font-size: 13px"> 今日处理 / 总数</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item-box-right"> |
|
|
|
<img width="48px" height="48px" src="../../../../src/icon/gaojingtonglan.svg" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="flex: 4; width: 100%; display: flex; gap: 5px"> |
|
|
|
<div |
|
|
|
style="flex: 1; height: 100%; background-color: white; border-radius: 4px; padding: 12px"> |
|
|
|
<div ref="echartPieOne" style="width: 100%; height: 100%"></div> |
|
|
|
<div class="box-center"> |
|
|
|
<div class="box-center-item"> |
|
|
|
<div class="box-center-item-top"> |
|
|
|
<img style="display: flex; position: absolute; top: 5px" :src="priority" /> |
|
|
|
<div class="box-center-item-top-title"> |
|
|
|
<span style="font-size: 18px">优先级</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
width: auto; |
|
|
|
height: 40px; |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
left: 128px; |
|
|
|
top: 13px; |
|
|
|
color: rgba(102, 102, 102, 1); |
|
|
|
font-size: 12px; |
|
|
|
"> |
|
|
|
( 近30天 ) |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div ref="echartPieOne" style="width: 100%; height: calc(100% - 40px)"></div> |
|
|
|
</div> |
|
|
|
<div style="flex: 1; height: 100%; background-color: white; border-radius: 4px"> |
|
|
|
<div ref="echartPieTow" style="width: 100%; height: 100%"></div> |
|
|
|
<div class="box-center-item"> |
|
|
|
<div class="box-center-item-top"> |
|
|
|
<img style="display: flex; position: absolute; top: 5px" :src="priority" /> |
|
|
|
<div class="box-center-item-top-title"> |
|
|
|
<span style="font-size: 18px">处理进度</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
width: auto; |
|
|
|
height: 40px; |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
left: 148px; |
|
|
|
top: 13px; |
|
|
|
color: rgba(102, 102, 102, 1); |
|
|
|
font-size: 12px; |
|
|
|
"> |
|
|
|
( 近30天 ) |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div ref="echartPieTow" style="width: 100%; height: calc(100% - 40px)"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 告警矩形 echarts --> |
|
|
|
<div style="flex: 4; width: 100%; background-color: white; border-radius: 4px; padding: 12px"> |
|
|
|
<div ref="graphChart" style="width: 100%; height: 100%"></div> |
|
|
|
<div class="box-bottom"> |
|
|
|
<div class="box-bottom-top"> |
|
|
|
<img style="display: flex; position: absolute; top: 5px" :src="priority" /> |
|
|
|
<div class="box-bottom-top-title"> |
|
|
|
<span style="font-size: 18px">处理进度</span> |
|
|
|
</div> |
|
|
|
<div class="box-bottom-top-unit"> ( 近30天 ) </div> |
|
|
|
</div> |
|
|
|
<div ref="graphChart" style="width: 100%; height: calc(100% - 40px)"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { ref, onMounted } from 'vue'; // 从 Vue 中导入 ref、onMounted 和 watchEffect |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import gatewayAlarm from './img/gatewayAlarm.png'; |
|
|
|
import equipmentAlarm from './img/equipmentAlarm.png'; |
|
|
|
import energyAlarm from './img/energyAlarm.png'; |
|
|
|
import rise from './img/rise.png'; |
|
|
|
import decline from './img/decline.png'; |
|
|
|
import priority from './img/priority.png'; |
|
|
|
|
|
|
|
import { alarmOverviewApi } from '/@/api/alarmManagement/alarmOverview.ts'; |
|
|
|
import { http } from '/nerv-lib/util'; |
|
|
|
|
|
|
|
defineOptions({ |
|
|
|
name: 'alarmOverviewIndex', // 与页面路由name一致缓存才可生效 |
|
|
|
}); |
|
|
|
|
|
|
|
//组织树 |
|
|
|
const orgId = ref(''); |
|
|
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|
|
|
orgId.value = result; |
|
|
|
const infoObject = ref([ |
|
|
|
{ title: '设备告警', url: gatewayAlarm, liftRatio: 0, todayProcessing: 0, total: 0 }, |
|
|
|
{ title: '网关告警', url: equipmentAlarm, liftRatio: 0, todayProcessing: 0, total: 0 }, |
|
|
|
{ title: '能源告警', url: energyAlarm, liftRatio: 0, todayProcessing: 0, total: 0 }, |
|
|
|
]); |
|
|
|
let chartInstance: echarts.ECharts | null = null; |
|
|
|
let chartInstanceOne: echarts.ECharts | null = null; |
|
|
|
let chartInstanceTow: echarts.ECharts | null = null; |
|
|
|
const graphChart = ref(null); |
|
|
|
const echartPieOne = ref(null); |
|
|
|
const echartPieTow = ref(null); |
|
|
|
const getGraphChart = () => { |
|
|
|
const getGraphChart = async () => { |
|
|
|
let dayData = []; |
|
|
|
// 能源告警 |
|
|
|
let energyAlarm = []; |
|
|
|
@ -63,21 +144,28 @@ |
|
|
|
// 设备告警 |
|
|
|
let equipmentAlarm = []; |
|
|
|
let total = []; |
|
|
|
|
|
|
|
// Extend data for 30 days |
|
|
|
for (let i = 1; i < 30; i++) { |
|
|
|
dayData.push(`3/${i}`); |
|
|
|
energyAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity |
|
|
|
wgAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity |
|
|
|
equipmentAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity |
|
|
|
total.push(0); // Assuming the same value for simplicity |
|
|
|
} |
|
|
|
await http |
|
|
|
.post(alarmOverviewApi.getAlarmTrend, { |
|
|
|
orgId: orgId.value, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
res.data.forEach((item: any, index) => { |
|
|
|
energyAlarm.push(item.alarmEnergyConsumptionNum); |
|
|
|
wgAlarm.push(item.alarmGatewayNum); |
|
|
|
equipmentAlarm.push(item.alarmEquipmentNum); |
|
|
|
total.push(0); |
|
|
|
dayData.push(item.createTime); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
if (chartInstance) { |
|
|
|
chartInstance.dispose(); |
|
|
|
} |
|
|
|
chartInstance = echarts.init(graphChart.value); |
|
|
|
const option = { |
|
|
|
title: { |
|
|
|
show: false, |
|
|
|
text: '告警趋势/ 近30天', |
|
|
|
textStyle: { |
|
|
|
fontSize: 16, |
|
|
|
@ -126,7 +214,7 @@ |
|
|
|
legend: [ |
|
|
|
{ |
|
|
|
top: 5, |
|
|
|
left: 'center', // 将图例居中显示 |
|
|
|
left: 'right', // 将图例居中显示 |
|
|
|
textStyle: { |
|
|
|
color: 'rgb(89, 89, 89)', |
|
|
|
fontSize: '14', |
|
|
|
@ -136,13 +224,6 @@ |
|
|
|
itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素 |
|
|
|
}, |
|
|
|
], |
|
|
|
// toolbox: { |
|
|
|
// show: true, |
|
|
|
// feature: { |
|
|
|
// restore: {}, |
|
|
|
// saveAsImage: {}, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
calculable: true, |
|
|
|
xAxis: [ |
|
|
|
{ |
|
|
|
@ -194,12 +275,12 @@ |
|
|
|
name: '能源告警', |
|
|
|
type: 'bar', |
|
|
|
stack: '能源告警', |
|
|
|
barMaxWidth: 40, |
|
|
|
barMaxWidth: 20, |
|
|
|
barGap: '10%', |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
barBorderRadius: 0, |
|
|
|
color: 'rgb(246, 189, 22)', |
|
|
|
color: 'rgba(85, 125, 255, 1)', |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: energyAlarm, |
|
|
|
@ -208,12 +289,12 @@ |
|
|
|
name: '网关告警', |
|
|
|
type: 'bar', |
|
|
|
stack: '能源告警', |
|
|
|
barMaxWidth: 40, |
|
|
|
barMaxWidth: 20, |
|
|
|
barGap: '10%', |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
barBorderRadius: 0, |
|
|
|
color: 'rgb(91, 143, 249)', |
|
|
|
color: 'rgba(255, 232, 139, 1)', |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: wgAlarm, |
|
|
|
@ -222,12 +303,12 @@ |
|
|
|
name: '设备告警', |
|
|
|
type: 'bar', |
|
|
|
stack: '能源告警', |
|
|
|
barMaxWidth: 40, |
|
|
|
barMaxWidth: 20, |
|
|
|
barGap: '10%', |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
barBorderRadius: 0, |
|
|
|
color: 'rgb(48, 191, 120)', |
|
|
|
color: 'rgba(47, 213, 135, 1)', |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: equipmentAlarm, |
|
|
|
@ -236,7 +317,7 @@ |
|
|
|
name: '总数', |
|
|
|
type: 'bar', |
|
|
|
stack: '能源告警', |
|
|
|
barMaxWidth: 40, |
|
|
|
barMaxWidth: 20, |
|
|
|
barHight: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
@ -264,38 +345,42 @@ |
|
|
|
chartInstance = echarts.init(graphChart.value); |
|
|
|
chartInstance.setOption(option); |
|
|
|
}; |
|
|
|
const getEchartPieOne = () => { |
|
|
|
const getEchartPieOne = async () => { |
|
|
|
if (chartInstanceOne) { |
|
|
|
chartInstanceOne.dispose(); |
|
|
|
} |
|
|
|
chartInstanceOne = echarts.init(echartPieOne.value); |
|
|
|
// 获取接口数据 |
|
|
|
var m2R2Data = [ |
|
|
|
{ value: 335, name: '紧急', itemStyle: { color: '#F56E53' } }, |
|
|
|
{ value: 310, name: '重要', itemStyle: { color: '#F7C122' } }, |
|
|
|
{ value: 234, name: '一般', itemStyle: { color: '#3BC27F' } }, |
|
|
|
{ value: 0, name: '紧急', itemStyle: { color: 'rgba(243, 97, 99, 1)' } }, |
|
|
|
{ value: 0, name: '重要', itemStyle: { color: 'rgba(255, 116, 44, 1)' } }, |
|
|
|
{ value: 0, name: '一般', itemStyle: { color: 'rgba(255, 224, 158, 1)' } }, |
|
|
|
]; |
|
|
|
var total = 0; |
|
|
|
await http |
|
|
|
.post(alarmOverviewApi.getPriority, { |
|
|
|
orgId: orgId.value, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
m2R2Data[0].value = res.data.emergent; |
|
|
|
m2R2Data[1].value = res.data.important; |
|
|
|
m2R2Data[2].value = res.data.general; |
|
|
|
total = res.data.prioritySum; |
|
|
|
} |
|
|
|
}); |
|
|
|
chartInstanceOne = echarts.init(echartPieOne.value); |
|
|
|
|
|
|
|
const option = { |
|
|
|
title: [ |
|
|
|
{ |
|
|
|
text: '优先级 / 近30天', |
|
|
|
text: total, |
|
|
|
subtext: '优先级', |
|
|
|
textStyle: { |
|
|
|
fontSize: 16, |
|
|
|
fontWeight: 'normal', |
|
|
|
color: '#aaaaaa', |
|
|
|
}, |
|
|
|
left: '2%', |
|
|
|
top: '2%', |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '优先级', |
|
|
|
subtext: 12312 + '个', |
|
|
|
textStyle: { |
|
|
|
fontSize: 24, |
|
|
|
fontSize: 22, |
|
|
|
color: 'black', |
|
|
|
}, |
|
|
|
subtextStyle: { |
|
|
|
fontSize: 24, |
|
|
|
fontWeight: '700', |
|
|
|
fontSize: 18, |
|
|
|
color: 'black', |
|
|
|
}, |
|
|
|
textAlign: 'center', |
|
|
|
@ -305,8 +390,8 @@ |
|
|
|
], |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
formatter: function (parms) { |
|
|
|
var str = parms.marker + ' :' + parms.data.value; |
|
|
|
formatter: function (parms: any) { |
|
|
|
var str = parms.marker + ' ' + parms.data.name + ' : ' + parms.data.value; |
|
|
|
return str; |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -316,9 +401,9 @@ |
|
|
|
top: 'center', |
|
|
|
orient: 'vertical', |
|
|
|
// 图例图标设置为圆形 |
|
|
|
icon: 'circle', |
|
|
|
itemWidth: 12, |
|
|
|
itemHeight: 12, |
|
|
|
// icon: 'circle', |
|
|
|
itemWidth: 16, |
|
|
|
itemHeight: 16, |
|
|
|
itemGap: 16, |
|
|
|
textStyle: { |
|
|
|
fontSize: 14, |
|
|
|
@ -345,12 +430,25 @@ |
|
|
|
return '[ ' + parms.data.name + ' ] : ' + parms.data.value; |
|
|
|
}, |
|
|
|
}, |
|
|
|
// emphasis: { |
|
|
|
// show: true, // 鼠标悬停时显示标签 |
|
|
|
// position: 'outside', // 标签位置 |
|
|
|
// textStyle: { |
|
|
|
// fontSize: 14, |
|
|
|
// }, |
|
|
|
// formatter: function (params) { |
|
|
|
// return '[ ' + params.data.name + ' ] : ' + params.data.value; |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: true, // 控制标签线是否显示 |
|
|
|
length: 10, // 标签线长度 |
|
|
|
length2: 0, // 标签线引出部分长度 |
|
|
|
// 其他样式属性，如 lineStyle 等 |
|
|
|
show: true, // 显示标签线 |
|
|
|
length: 15, // 标签线的长度 |
|
|
|
length2: 10, // 标签线引出部分长度 |
|
|
|
lineStyle: { |
|
|
|
width: 2, // 标签线的宽度 |
|
|
|
type: 'solid', // 标签线的样式 |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: m2R2Data, |
|
|
|
}, |
|
|
|
@ -359,38 +457,44 @@ |
|
|
|
chartInstanceOne = echarts.init(echartPieOne.value); |
|
|
|
chartInstanceOne.setOption(option); |
|
|
|
}; |
|
|
|
const getEchartPieTow = () => { |
|
|
|
const getEchartPieTow = async () => { |
|
|
|
if (chartInstanceTow) { |
|
|
|
chartInstanceTow.dispose(); |
|
|
|
} |
|
|
|
chartInstanceTow = echarts.init(echartPieTow.value); |
|
|
|
var m2R2Data = [ |
|
|
|
{ value: 335, name: '紧急', itemStyle: { color: '#F56E53' } }, |
|
|
|
{ value: 310, name: '重要', itemStyle: { color: '#F7C122' } }, |
|
|
|
{ value: 234, name: '一般', itemStyle: { color: '#3BC27F' } }, |
|
|
|
{ value: 0, name: '待处理', itemStyle: { color: '#f36163' } }, |
|
|
|
{ value: 310, name: '处理中', itemStyle: { color: '#2778ff' } }, |
|
|
|
{ value: 234, name: '已完成', itemStyle: { color: '#62daab' } }, |
|
|
|
{ value: 234, name: '超时', itemStyle: { color: '#ffbc46' } }, |
|
|
|
{ value: 234, name: '关闭', itemStyle: { color: '#5e87d2' } }, |
|
|
|
]; |
|
|
|
var total = 0; |
|
|
|
await http |
|
|
|
.post(alarmOverviewApi.getProcessProgress, { |
|
|
|
orgId: orgId.value, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
m2R2Data[0].value = res.data.pendingProcessing; |
|
|
|
m2R2Data[1].value = res.data.processing; |
|
|
|
m2R2Data[2].value = res.data.completed; |
|
|
|
m2R2Data[3].value = res.data.timeout; |
|
|
|
m2R2Data[4].value = res.data.close; |
|
|
|
total = res.data.processSum; |
|
|
|
} |
|
|
|
}); |
|
|
|
const option = { |
|
|
|
title: [ |
|
|
|
{ |
|
|
|
text: '优先级 / 近30天', |
|
|
|
text: total, |
|
|
|
subtext: '进度', |
|
|
|
textStyle: { |
|
|
|
fontSize: 16, |
|
|
|
fontWeight: 'normal', |
|
|
|
color: '#aaaaaa', |
|
|
|
}, |
|
|
|
left: '2%', |
|
|
|
top: '2%', |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '优先级', |
|
|
|
subtext: 12312 + '个', |
|
|
|
textStyle: { |
|
|
|
fontSize: 24, |
|
|
|
fontSize: 22, |
|
|
|
color: 'black', |
|
|
|
}, |
|
|
|
subtextStyle: { |
|
|
|
fontSize: 24, |
|
|
|
fontWeight: '700', |
|
|
|
fontSize: 18, |
|
|
|
color: 'black', |
|
|
|
}, |
|
|
|
textAlign: 'center', |
|
|
|
@ -400,8 +504,8 @@ |
|
|
|
], |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
formatter: function (parms) { |
|
|
|
var str = parms.marker + ' :' + parms.data.value; |
|
|
|
formatter: function (parms: any) { |
|
|
|
var str = parms.marker + ' ' + parms.data.name + ' : ' + parms.data.value; |
|
|
|
return str; |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -410,10 +514,8 @@ |
|
|
|
right: 50, |
|
|
|
top: 'center', |
|
|
|
orient: 'vertical', |
|
|
|
// 图例图标设置为圆形 |
|
|
|
icon: 'circle', |
|
|
|
itemWidth: 12, |
|
|
|
itemHeight: 12, |
|
|
|
itemWidth: 16, |
|
|
|
itemHeight: 16, |
|
|
|
itemGap: 16, |
|
|
|
textStyle: { |
|
|
|
fontSize: 14, |
|
|
|
@ -444,7 +546,7 @@ |
|
|
|
labelLine: { |
|
|
|
show: true, // 控制标签线是否显示 |
|
|
|
length: 10, // 标签线长度 |
|
|
|
length2: 0, // 标签线引出部分长度 |
|
|
|
length2: 10, // 标签线引出部分长度 |
|
|
|
// 其他样式属性，如 lineStyle 等 |
|
|
|
}, |
|
|
|
data: m2R2Data, |
|
|
|
@ -454,7 +556,47 @@ |
|
|
|
chartInstanceTow = echarts.init(echartPieTow.value); |
|
|
|
chartInstanceTow.setOption(option); |
|
|
|
}; |
|
|
|
const getTotal = () => { |
|
|
|
// 获取设备告警数据 |
|
|
|
http |
|
|
|
.post(alarmOverviewApi.getAlarmEquipment, { |
|
|
|
orgId: orgId.value, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
infoObject.value[0].total = res.data.total; |
|
|
|
infoObject.value[0].liftRatio = res.data.liftRatio; |
|
|
|
infoObject.value[0].todayProcessing = res.data.todayProcessing; |
|
|
|
} |
|
|
|
}); |
|
|
|
// 获取网关告警数据 |
|
|
|
http |
|
|
|
.post(alarmOverviewApi.getAlarmGateway, { |
|
|
|
orgId: orgId.value, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
infoObject.value[1].total = res.data.total; |
|
|
|
infoObject.value[1].liftRatio = res.data.liftRatio; |
|
|
|
infoObject.value[1].todayProcessing = res.data.todayProcessing; |
|
|
|
} |
|
|
|
}); |
|
|
|
// 获取能碳告警数据 |
|
|
|
http |
|
|
|
.post(alarmOverviewApi.getAlarmEnergyConsumption, { |
|
|
|
orgId: orgId.value, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
infoObject.value[2].total = res.data.total; |
|
|
|
infoObject.value[2].liftRatio = res.data.liftRatio; |
|
|
|
infoObject.value[2].todayProcessing = res.data.todayProcessing; |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
onMounted(() => { |
|
|
|
// 获取三个告警数量 |
|
|
|
getTotal(); |
|
|
|
//渲染第三个图表 |
|
|
|
getGraphChart(); |
|
|
|
//优先级 |
|
|
|
@ -469,36 +611,41 @@ |
|
|
|
// border: 1px solid red; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 5px; |
|
|
|
gap: 12px; |
|
|
|
background-color: #f0f1f4; |
|
|
|
box-sizing: border-box; |
|
|
|
.box-top { |
|
|
|
flex: 1; |
|
|
|
flex: 1.5; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
gap: 5px; |
|
|
|
gap: 12px; |
|
|
|
.box-top-item { |
|
|
|
height: 100%; |
|
|
|
flex: 1; |
|
|
|
gap: 5px; |
|
|
|
gap: 12px; |
|
|
|
background-color: white; |
|
|
|
border-radius: 4px; |
|
|
|
padding: 20px; |
|
|
|
.item-box { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
.item-box-icon { |
|
|
|
flex: 1.5; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.item-box-left { |
|
|
|
flex: 9; |
|
|
|
flex: 8.5; |
|
|
|
height: 100%; |
|
|
|
padding: 0px !important; |
|
|
|
padding: 20px 4px; |
|
|
|
.item-box-left-title { |
|
|
|
color: rgba(0, 0, 0, 0.45); |
|
|
|
font-weight: 400; |
|
|
|
font-style: normal; |
|
|
|
font-size: 14px; |
|
|
|
color: #aaaaaa; |
|
|
|
font-kerning: normal; |
|
|
|
font-family: '微软雅黑', sans-serif; |
|
|
|
@ -512,13 +659,71 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
.item-box-right { |
|
|
|
flex: 1; |
|
|
|
flex: 5; |
|
|
|
height: 100%; |
|
|
|
display: grid; |
|
|
|
place-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.box-center { |
|
|
|
flex: 4; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
gap: 12px; |
|
|
|
.box-center-item { |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
background-color: white; |
|
|
|
border-radius: 4px; |
|
|
|
padding: 12px; |
|
|
|
.box-center-item-top { |
|
|
|
width: 100%; |
|
|
|
height: 40px; |
|
|
|
padding: 0px 12px; |
|
|
|
display: flex; |
|
|
|
position: relative; |
|
|
|
.box-center-item-top-title { |
|
|
|
width: auto; |
|
|
|
height: 40px; |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
left: 62px; |
|
|
|
top: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.box-bottom { |
|
|
|
flex: 3.5; |
|
|
|
width: 100%; |
|
|
|
background-color: white; |
|
|
|
border-radius: 4px; |
|
|
|
padding: 12px; |
|
|
|
.box-bottom-top { |
|
|
|
width: 100%; |
|
|
|
height: 40px; |
|
|
|
padding: 0px 12px; |
|
|
|
display: flex; |
|
|
|
position: relative; |
|
|
|
.box-bottom-top-title { |
|
|
|
width: auto; |
|
|
|
height: 40px; |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
left: 62px; |
|
|
|
top: 5px; |
|
|
|
} |
|
|
|
.box-bottom-top-unit { |
|
|
|
width: auto; |
|
|
|
height: 40px; |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
left: 148px; |
|
|
|
top: 13px; |
|
|
|
color: rgba(102, 102, 102, 1); |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhaohy
4 months ago
