feat：完善功能

src/hooks/echart.js

@@ -3,21 +3,21 @@ import * as echarts from 'echarts'
 import { guid } from '@/utils/util'
 
 export function useEchart() {
-  let chart = null
+  let chart = ref(null)
   let id = ref(guid())
   const initChart = () => {
     const dom = document.getElementById(id.value)
-    chart = echarts.init(dom)
+    chart.value = echarts.init(dom)
   }
   const setOption = (params, update = false) => {
-    chart.setOption(params, update)
+    chart.value.setOption(params, update)
   }
   const dispose = () => {
-    chart.dispose()
+    chart.value.dispose()
-    chart = null
+    chart.value = null
   }
   const resize = () => {
-    chart.resize()
+    chart.value.resize()
   }
   onMounted(() => {
     initChart()

src/views/monitor/components/alarmRate.vue

@@ -27,16 +27,10 @@
     }
   })
 
-  const { id, setOption } = useEchart()
+  const { id, chart, setOption } = useEchart()
 
   let params = null
 
-  let getTotal = () => {
-    return props.dataList.reduce((per, cur) => {
-      return per + cur.count
-    }, 0)
-  }
-
   let defaultCofig = {
     color: [],
     legend: {
@@ -48,7 +42,7 @@
       itemGap: fitChartSize(6),
       formatter: (name) => {
         let obj = props.dataList.find((item) => item.name == name)
-        return `{name|${name}} {value|${obj?.value}}{value|%}`
+        return `{name|${name}} {value|${obj?.value}}{value|次}`
       },
       textStyle: {
         rich: {
@@ -97,13 +91,17 @@
     ]
   }
 
+  let getTotal = () => {
+    return props.dataList.reduce((per, cur) => {
+      return per + cur.value
+    }, 0)
+  }
+
   watch(
-    () => props.dataList,
+    () => [props.dataList, chart.value],
-    (val) => {
+    () => {
-      if (val.length > 0) {
+      if (props.dataList.length > 0 && chart.value) {
-        setTimeout(() => {
         init()
-        }, 1000)
       }
     },
     { immediate: true }

src/views/monitor/components/box-1.vue

@@ -3,32 +3,58 @@
     <template v-if="!scenicSpotId">
       <Title1 title="AI分析统计" />
       <div class="traffic">
-        <div class="traffic-item" v-for="(item, index) in trafficData" :key="index">
+        <div class="traffic-item">
-          <span class="traffic-item__title">{{ item.name }}</span>
+          <span class="traffic-item__title">总核心监控点位 </span>
-          <span  :class="{
+          <countup
-              'traffic-item__value--primary': item.type == 0,
+            class="traffic-item__value--primary"
-              'traffic-item__value--success': item.type == 1,
+            :end-val="aiAnalyzeData.allCoreMonitoringPoints"
-              'traffic-item__value--error': item.type == 2
+          />
-            }"> {{item.value}}</span>
+        </div>
+        <div class="traffic-item">
+          <span class="traffic-item__title">总核心分析点位 </span>
+          <countup
+            class="traffic-item__value--success"
+            :end-val="aiAnalyzeData.allAnalysisPoints"
+          />
+        </div>
+        <div class="traffic-item">
+          <span class="traffic-item__title">总异常点位 </span>
+          <countup class="traffic-item__value--error" :end-val="aiAnalyzeData.abnormalPoints" />
         </div>
       </div>
       <Title1 title="景区智能AI分析" />
       <div class="scenic">
-        <div class="scenic-item" v-for="(item, index) in scenicSpotData.headList" :key="index">
+        <div class="scenic-item">
-          <span class="scenic-item__label">{{ item.name }}</span>
+          <span class="scenic-item__label">核心景区分析点位</span>
-<!--          <countup class="scenic-item__value" :end-val="item.value" />-->
+          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.coreMonitoringPoints" />
-          <span class="scenic-item__value"> {{item.value}}</span>
+        </div>
+        <div class="scenic-item">
+          <span class="scenic-item__label">异常点位</span>
+          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalPoints" />
+        </div>
+        <div class="scenic-item">
+          <span class="scenic-item__label">异常告警</span>
+          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalAlarm" />
+        </div>
+        <div class="scenic-item">
+          <span class="scenic-item__label">已处理</span>
+          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.handled" />
         </div>
       </div>
       <div class="flex pt-20">
         <div class="box">
           <Title3 title="异常告警" />
-          <Line :width="370" :height="180" :data="abnormalData" :xAxisData="abnormalXAxisData" />
+          <Line
+            :width="370"
+            :height="180"
+            :data="abnormalAlarm"
+            :xAxisData="abnormalAlarmXAxisData"
+          />
         </div>
         <div class="box">
           <Title3 title="异常告警占比" />
           <div class="flex">
-            <alarmRate :dataList="scenicSpotData.dataLists" />
+            <alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
             <!-- <alarmList /> -->
           </div>
         </div>
@@ -41,8 +67,8 @@
           :key="index"
         >
           <span class="scenic-item__label">{{ item.name }}</span>
-<!--          <countup class="scenic-item__value" :end-val="item.value" />-->
+          <!--          <countup class="scenic-item__value" :end-val="item.value" />-->
-          <span class="scenic-item__value"> {{item.value}}</span>
+          <span class="scenic-item__value"> {{ item.value }}</span>
         </div>
       </div>
       <div class="flex pt-20">
@@ -74,12 +100,7 @@
           src="@/assets/images/sxzd.png"
           alt=""
         />
-        <img
+        <img v-if="scenicSpotId == '龙桥河'" class="map-img" src="@/assets/images/lqh.jpg" alt="" />
-            v-if="scenicSpotId == '龙桥河'"
-            class="map-img"
-            src="@/assets/images/lqh.jpg"
-            alt=""
-        />
       </div>
       <div class="flex">
         <div class="monitor">
@@ -94,30 +115,18 @@
               :key="index"
             >
               <span class="monitor-statistics-item__label">{{ item.name }}</span>
-              <div class="monitor-statistics-item__value" v-if="index==0">
+              <div class="monitor-statistics-item__value" v-if="index == 0">
-                <span v-if="scenicSpotId=='root000000'">
+                <span v-if="scenicSpotId == 'root000000'"> 550 </span>
-                    550
+                <span v-else-if="scenicSpotId == '三峡之巅'"> 295 </span>
-                </span>
+                <span v-else-if="scenicSpotId == '龙桥河'"> 54 </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__value" v-if="index == 1">
-                <span v-if="scenicSpotId=='root000000'">
+                <span v-if="scenicSpotId == 'root000000'"> 28 </span>
-                    28
+                <span v-else-if="scenicSpotId == '三峡之巅'"> 28 </span>
-                </span>
+                <span v-else-if="scenicSpotId == '龙桥河'"> 5 </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>
+              <div class="monitor-statistics-item__value" v-if="index == 2">调试中</div>
-<!--              <countup class="monitor-statistics-item__value" :end-val="item.value" />-->
+              <!--              <countup class="monitor-statistics-item__value" :end-val="item.value" />-->
             </div>
           </div>
           <div class="bg">
@@ -138,7 +147,7 @@
             >
               <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" />-->
+              <!--              <countup class="traffic-alarm-statistics-item__value" :end-val="item.value" />-->
             </div>
           </div>
           <div class="bg">
@@ -170,16 +179,22 @@
 
   // 景区id
   let scenicSpotId = ref('')
-  //  交通信息
+  //  AI分析统计
-  let trafficData = ref([
+  let aiAnalyzeData = ref({
-    { name: '总核心监控点位', type: 0, value: 0 },
+    abnormalPoints: 0,
-    { name: '总核心分析点位', type: 1, value: 0 },
+    allAnalysisPoints: 0,
-    { name: '总异常点位', type: 2, value: 0 }
+    allCoreMonitoringPoints: 0
-  ])
+  })
-  // 景区信息
+  // 景区智能AI分析
-  let scenicSpotData = ref({
+  let scenicAiAnalyzeData = ref({
-    dataList: [],
+    abnormalAlarm: 0,
-    dataLists: []
+    abnormalPoints: 0,
+    coreMonitoringPoints: 0,
+    handled: 0
+  })
+  let abnormalData = ref({
+    abnormalAlarm: [],
+    abnormalAlarmPercent: []
   })
   // 交通告警信息
   let trafficAbnormalityData = ref({
@@ -207,11 +222,11 @@
   })
 
   // 异常告警
-  let abnormalData = computed(() => {
+  let abnormalAlarm = computed(() => {
-    return [{ data: scenicSpotData.value.dataList.map((item) => item.value) }]
+    return [{ data: abnormalData.value.abnormalAlarm.map((item) => item.value) }]
   })
-  let abnormalXAxisData = computed(() => {
+  let abnormalAlarmXAxisData = computed(() => {
-    return scenicSpotData.value.dataList.map((item) => item.name)
+    return abnormalData.value.abnormalAlarm.map((item) => item.name)
   })
 
   // 拥堵告警
@@ -242,11 +257,14 @@
       if (val) {
         console.log(val, '安全接受消息')
         switch (val.type) {
-          case 'trafficData':
+          case 'AI分析统计':
-            trafficData.value = val.headList
+            aiAnalyzeData.value = val.data
             break
-          case 'scenicSpotData':
+          case '获取景区智能AI分析':
-            scenicSpotData.value = val
+            scenicAiAnalyzeData.value = val.data
+            break
+          case '异常警告图表和警告比例图表':
+            abnormalData.value = val.data
             break
           case 'trafficAbnormalityData':
             trafficAbnormalityData.value = val