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

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
+            <div class="monitor-statistics-item">
-              class="monitor-statistics-item"
+              <span class="monitor-statistics-item__label">监控点位</span>
-              v-for="(item, index) in monitoringPointData.headList"
+              <countup
-              :key="index"
+                class="monitor-statistics-item__value"
-            >
+                :end-val="pointAlarmData.coreMonitoringPoints"
-              <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">
+            <div class="monitor-statistics-item">
-                <span v-if="scenicSpotId == 'root000000'"> 28 </span>
+              <span class="monitor-statistics-item__label">核心点位</span>
-                <span v-else-if="scenicSpotId == '三峡之巅'"> 28 </span>
+              <countup
-                <span v-else-if="scenicSpotId == '龙桥河'"> 5 </span>
+                class="monitor-statistics-item__value"
+                :end-val="pointAlarmData.analysisPoints"
+              />
             </div>
-              <div class="monitor-statistics-item__value" v-if="index == 2">调试中</div>
+            <div class="monitor-statistics-item">
-              <!--              <countup class="monitor-statistics-item__value" :end-val="item.value" />-->
+              <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
+            <div class="traffic-alarm-statistics-item">
-              class="traffic-alarm-statistics-item"
+              <span class="traffic-alarm-statistics-item__label">当前告警总数</span>
-              v-for="(item, index) in abnormalAlarmData.headList"
+              <countup
-              :key="index"
+                class="traffic-alarm-statistics-item__value"
-            >
+                :end-val="pointAlarmData.abnormalAlarm"
-              <span class="traffic-alarm-statistics-item__label">{{ item.name }}</span>
+              />
-              <div class="traffic-alarm-statistics-item__value">调试中</div>
+            </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.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="[]" /> -->
+              <alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
-              <div class="none">异常数据为测试数据</div>
-              <!-- <alarmList /> -->
             </div>
           </div>
         </div>
@@ -202,23 +217,14 @@
     dataLists: [],
     headList: []
   })
-  // 监控点位统计
+  // 监控点位异常告警统计
-  let monitoringPointData = ref({
+  let pointAlarmData = ref({
-    dataList: [],
+    abnormalPoints: 0, // 异常点位
-    headList: [
+    analysisPoints: 0, // 核心点位
-      { name: '监控点位', type: 0, value: 0 },
+    coreMonitoringPoints: 0, // 监控点位
-      { name: '核心点位', type: 0, value: 0 },
+    abnormalAlarm: 0, // 当前告警总数
-      { name: '异常点位', type: 1, value: 0 }
+    allAbnormalAlarm: 0, // 安全告警总数
-    ]
+    handled: 0 // 已处理告警数
-  })
-  // 监控点位统计
-  let abnormalAlarmData = ref({
-    dataList: [],
-    headList: [
-      { name: '当前告警总数', type: 0, value: 0 },
-      { name: '安全告警总数', type: 0, value: 0 },
-      { name: '已解除告警数', type: 1, value: 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%;
     }
   }