lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:对接监控-切换景区后监控点位统计和异常告警统计

Browse Source
This commit is contained in:
zjc
2025-03-11 12:40:51 +08:00
parent 8c985befd7
commit 6c5827ac18
1 changed files with 74 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/views/monitor/components/box-1.vue
View File

@@ -55,7 +55,6 @@
<Title3 title="异常告警占比" />
<div class="flex">
<alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
<!-- <alarmList /> -->
</div>
</div>
</div>
@@ -80,7 +79,6 @@
<Title3 title="拥堵告警占比" />
<div class="flex">
<alarmRate :dataList="trafficAbnormalityData.dataLists" />
<!-- <alarmList /> -->
</div>
</div>
</div>
@@ -109,29 +107,36 @@
</div>
<div class="monitor-statistics">
<img class="monitor-statistics-icon" src="@/assets/images/t-ico-0.png" />
<div
class="monitor-statistics-item"
v-for="(item, index) in monitoringPointData.headList"
:key="index"
>
<span class="monitor-statistics-item__label">{{ item.name }}</span>
<div class="monitor-statistics-item__value" v-if="index == 0">
<span v-if="scenicSpotId == 'root000000'"> 550 </span>
<span v-else-if="scenicSpotId == '三峡之巅'"> 295 </span>
<span v-else-if="scenicSpotId == '龙桥河'"> 54 </span>
</div>
<div class="monitor-statistics-item__value" v-if="index == 1">
<span v-if="scenicSpotId == 'root000000'"> 28 </span>
<span v-else-if="scenicSpotId == '三峡之巅'"> 28 </span>
<span v-else-if="scenicSpotId == '龙桥河'"> 5 </span>
</div>
<div class="monitor-statistics-item__value" v-if="index == 2">调试中</div>
<!-- <countup class="monitor-statistics-item__value" :end-val="item.value" />-->
<div class="monitor-statistics-item">
<span class="monitor-statistics-item__label">监控点位</span>
<countup
class="monitor-statistics-item__value"
:end-val="pointAlarmData.coreMonitoringPoints"
/>
</div>
<div class="monitor-statistics-item">
<span class="monitor-statistics-item__label">核心点位</span>
<countup
class="monitor-statistics-item__value"
:end-val="pointAlarmData.analysisPoints"
/>
</div>
<div class="monitor-statistics-item">
<span class="monitor-statistics-item__label">异常点位</span>
<countup
class="monitor-statistics-item__value"
:end-val="pointAlarmData.abnormalPoints"
/>
</div>
</div>
<div class="bg">
<Title3 title="今日安全告警" />
<alarm-today :list="monitoringPointData.dataList" />
<Line
:width="370"
:height="180"
:data="abnormalAlarm"
:xAxisData="abnormalAlarmXAxisData"
/>
</div>
</div>
<div class="traffic-alarm">
@@ -140,22 +145,32 @@
</div>
<div class="traffic-alarm-statistics">
<img class="traffic-alarm-statistics-icon" src="@/assets/images/t-ico-2.png" />
<div
class="traffic-alarm-statistics-item"
v-for="(item, index) in abnormalAlarmData.headList"
:key="index"
>
<span class="traffic-alarm-statistics-item__label">{{ item.name }}</span>
<div class="traffic-alarm-statistics-item__value">调试中</div>
<!-- <countup class="traffic-alarm-statistics-item__value" :end-val="item.value" />-->
<div class="traffic-alarm-statistics-item">
<span class="traffic-alarm-statistics-item__label">当前告警总数</span>
<countup
class="traffic-alarm-statistics-item__value"
:end-val="pointAlarmData.abnormalAlarm"
/>
</div>
<div class="traffic-alarm-statistics-item">
<span class="traffic-alarm-statistics-item__label">安全告警总数</span>
<countup
class="traffic-alarm-statistics-item__value"
:end-val="pointAlarmData.allAbnormalAlarm"
/>
</div>
<div class="traffic-alarm-statistics-item">
<span class="traffic-alarm-statistics-item__label">已解除告警总数</span>
<countup
class="traffic-alarm-statistics-item__value"
:end-val="pointAlarmData.handled"
/>
</div>
</div>
<div class="bg">
<Title3 title="异常告警占比" />
<div class="flex">
<!-- <alarmRate :dataList="[]" /> -->
<div class="none">异常数据为测试数据</div>
<!-- <alarmList /> -->
<alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
</div>
</div>
</div>
@@ -202,23 +217,14 @@
dataLists: [],
headList: []
})
// 监控点位统计
let monitoringPointData = ref({
dataList: [],
headList: [
{ name: '监控点位', type: 0, value: 0 },
{ name: '核心点位', type: 0, value: 0 },
{ name: '异常点位', type: 1, value: 0 }
]
})
// 监控点位统计
let abnormalAlarmData = ref({
dataList: [],
headList: [
{ name: '当前告警总数', type: 0, value: 0 },
{ name: '安全告警总数', type: 0, value: 0 },
{ name: '已解除告警数', type: 1, value: 0 }
]
// 监控点位异常告警统计
let pointAlarmData = ref({
abnormalPoints: 0, // 异常点位
analysisPoints: 0, // 核心点位
coreMonitoringPoints: 0, // 监控点位
abnormalAlarm: 0, // 当前告警总数
allAbnormalAlarm: 0, // 安全告警总数
handled: 0 // 已处理告警数
})
// 异常告警
@@ -266,15 +272,12 @@
case '异常警告图表和警告比例图表':
abnormalData.value = val.data
break
case '监控点位统计和异常告警统计':
pointAlarmData.value = val.data
break
case 'trafficAbnormalityData':
trafficAbnormalityData.value = val
break
case 'monitoringPointLocation':
monitoringPointData.value = val
break
case 'abnormalAlarmData':
abnormalAlarmData.value = val
break
}
}
}
@@ -312,9 +315,24 @@
.detection-top {
width: 100%;
height: vh(580);
overflow-x: auto;
overflow-y: hidden;
background-color: #fff;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
height: vh(10); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
.map-img {
width: 100%;
width: auto;
height: 100%;
}
}