feat：完善功能

2025-03-07 21:20:51 +08:00
parent 9c5206ff49
commit e31a1bc2f4
3 changed files with 98 additions and 82 deletions
--- a/src/hooks/echart.js
+++ b/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 = null
+    chart.value.dispose()
+    chart.value = null
  }
  const resize = () => {
-    chart.resize()
+    chart.value.resize()
  }
  onMounted(() => {
    initChart()
--- a/src/views/monitor/components/alarmRate.vue
+++ b/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,
-    (val) => {
-      if (val.length > 0) {
-        setTimeout(() => {
-          init()
-        }, 1000)
+    () => [props.dataList, chart.value],
+    () => {
+      if (props.dataList.length > 0 && chart.value) {
+        init()
      }
    },
    { immediate: true }
--- a/src/views/monitor/components/box-1.vue
+++ b/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">
-          <span class="traffic-item__title">{{ item.name }}</span>
-          <span  :class="{
-              'traffic-item__value--primary': item.type == 0,
-              'traffic-item__value--success': item.type == 1,
-              'traffic-item__value--error': item.type == 2
-            }"> {{item.value}}</span>
+        <div class="traffic-item">
+          <span class="traffic-item__title">总核心监控点位 </span>
+          <countup
+            class="traffic-item__value--primary"
+            :end-val="aiAnalyzeData.allCoreMonitoringPoints"
+          />
+        </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">
-          <span class="scenic-item__label">{{ item.name }}</span>
-<!--          <countup class="scenic-item__value" :end-val="item.value" />-->
-          <span class="scenic-item__value"> {{item.value}}</span>
+        <div class="scenic-item">
+          <span class="scenic-item__label">核心景区分析点位</span>
+          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.coreMonitoringPoints" />
+        </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" />-->
-          <span class="scenic-item__value"> {{item.value}}</span>
+          <!--          <countup class="scenic-item__value" :end-val="item.value" />-->
+          <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
-            v-if="scenicSpotId == '龙桥河'"
-            class="map-img"
-            src="@/assets/images/lqh.jpg"
-            alt=""
-        />
+        <img 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">
-                <span v-if="scenicSpotId=='root000000'">
-                    550
-                </span>
-                <span v-else-if="scenicSpotId=='三峡之巅'">
-                   295
-                </span>
-                <span v-else-if="scenicSpotId=='龙桥河'">
-                    54
-                </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 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__value" v-if="index == 2">调试中</div>
+              <!--              <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('')
-  //  交通信息
-  let trafficData = ref([
-    { name: '总核心监控点位', type: 0, value: 0 },
-    { name: '总核心分析点位', type: 1, value: 0 },
-    { name: '总异常点位', type: 2, value: 0 }
-  ])
-  // 景区信息
-  let scenicSpotData = ref({
-    dataList: [],
-    dataLists: []
+  //  AI分析统计
+  let aiAnalyzeData = ref({
+    abnormalPoints: 0,
+    allAnalysisPoints: 0,
+    allCoreMonitoringPoints: 0
+  })
+  // 景区智能AI分析
+  let scenicAiAnalyzeData = ref({
+    abnormalAlarm: 0,
+    abnormalPoints: 0,
+    coreMonitoringPoints: 0,
+    handled: 0
+  })
+  let abnormalData = ref({
+    abnormalAlarm: [],
+    abnormalAlarmPercent: []
  })
  // 交通告警信息
  let trafficAbnormalityData = ref({
@@ -207,11 +222,11 @@
  })

  // 异常告警
-  let abnormalData = computed(() => {
-    return [{ data: scenicSpotData.value.dataList.map((item) => item.value) }]
+  let abnormalAlarm = computed(() => {
+    return [{ data: abnormalData.value.abnormalAlarm.map((item) => item.value) }]
  })
-  let abnormalXAxisData = computed(() => {
-    return scenicSpotData.value.dataList.map((item) => item.name)
+  let abnormalAlarmXAxisData = computed(() => {
+    return abnormalData.value.abnormalAlarm.map((item) => item.name)
  })

  // 拥堵告警
@@ -242,11 +257,14 @@
      if (val) {
        console.log(val, '安全接受消息')
        switch (val.type) {
-          case 'trafficData':
-            trafficData.value = val.headList
+          case 'AI分析统计':
+            aiAnalyzeData.value = val.data
            break
-          case 'scenicSpotData':
-            scenicSpotData.value = val
+          case '获取景区智能AI分析':
+            scenicAiAnalyzeData.value = val.data
+            break
+          case '异常警告图表和警告比例图表':
+            abnormalData.value = val.data
            break
          case 'trafficAbnormalityData':
            trafficAbnormalityData.value = val