From 6c5827ac1874e6406339867bca3c28cccaf5e5de Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Tue, 11 Mar 2025 12:40:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AF=B9=E6=8E=A5=E7=9B=91=E6=8E=A7-?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=99=AF=E5=8C=BA=E5=90=8E=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E7=82=B9=E4=BD=8D=E7=BB=9F=E8=AE=A1=E5=92=8C=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=E5=91=8A=E8=AD=A6=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/components/box-1.vue | 130 ++++++++++++++-----------
 1 file changed, 74 insertions(+), 56 deletions(-)

diff --git a/src/views/monitor/components/box-1.vue b/src/views/monitor/components/box-1.vue
index 432e601..6a69c49 100644
--- a/src/views/monitor/components/box-1.vue
+++ b/src/views/monitor/components/box-1.vue
@@ -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%;
     }
   }