feat：对接消息相关接口

src/components/CircleProgress/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div
+    class="progress"
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { guid } from '@/utils/util'
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+  let progressChart = null
+  let id = ref(guid())
+  let defaultCofig = {
+    title: [
+      {
+        text: '45.5%',
+        x: 'center',
+        top: '34%',
+        textStyle: {
+          color: '#00D0FF',
+          fontSize: fitChartSize(12)
+        }
+      },
+      {
+        text: '完成率',
+        x: 'center',
+        top: '56%',
+        textStyle: {
+          color: '#fff',
+          fontSize: fitChartSize(12)
+        }
+      }
+    ],
+    series: [
+      // 内侧环
+      {
+        type: 'gauge',
+        radius: '100%',
+        center: ['50%', '60%'],
+        min: 0,
+        max: 100,
+        startAngle: 180,
+        endAngle: 0,
+        itemStyle: {
+          color: '#00D0FF'
+        },
+        axisLine: {
+          show: true,
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(6)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(6)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      },
+      {
+        type: 'gauge',
+        radius: '90%',
+        center: ['50%', '60%'],
+        min: 0,
+        max: 100,
+        startAngle: 180,
+        endAngle: 0,
+        itemStyle: {
+          color: '#057EB9'
+        },
+        axisLine: {
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(6)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(6)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      }
+    ]
+  }
+
+  onMounted(() => {
+    init()
+  })
+  const init = () => {
+    // 基于准备好的dom，初始化echarts实例
+    progressChart = echarts.init(document.getElementById(id.value))
+    progressChart.setOption({ ...defaultCofig })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (progressChart) {
+      progressChart.dispose()
+      init()
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>

src/components/CoreVideo/index.vue

@@ -11,12 +11,11 @@
       >
         <div>
           <p :class="[index % 2 === 0 ? 'item-title--primary' : 'item-title--error']">
-            三峡之巅-最新异常名称三峡之巅-最新异常名称三峡之巅-最新异常名称
+            {{ item.cameraName }}
           </p>
-          <!-- <img class="item-img" src="@/assets/images/cover.png" /> -->
           <video
             class="item-img"
-            :ref="(el) => getRefs(el, index)"
+            :ref="(el) => getRefs(el, item, index)"
             muted
             autoplay
             controls
@@ -38,10 +37,15 @@
 
   let list = ref([])
 
-  const getRefs = (el) => {
+  const getRefs = async (el, item) => {
     if (el) {
+      let res = await postRefreshApi({
+        businessVideoDisplayPosition: item.businessVideoDisplayPosition,
+        cameraIndexCode: item.cameraIndexCode
+      })
+      let hlsUrl = res.data.hlsUrl.replace('http://172.22.15.170:8050', 'http://36.138.38.16:6150')
       const hls = new Hls()
-      hls.loadSource('http://36.138.38.16:6106/live/042f4987808b444aa96c1e8bc6e3ad2a/hls.m3u8')
+      hls.loadSource(hlsUrl)
       hls.attachMedia(el)
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
         el.play()
@@ -135,7 +139,7 @@
       }
       &-img {
         width: 100%;
-        height: vw(164);
+        height: vh(164);
         display: block;
         object-fit: cover;
       }

src/components/CountItem/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="count-item">
     <div class="flex align-center">
-      <img src="@/assets/images/dian.svg" />
+      <img src="@/assets/images/dot-primary.svg" />
       <span class="label">{{ label }}</span>
     </div>
     <div class="count">

src/components/Header/index.vue

@@ -131,10 +131,8 @@
           { name: '交通', path: '/traffic' }
         ]
         navRight.value = [
-          { name: '停车' },
           { name: '工单', path: '/workOrder' },
-          { name: '舆情', path: '/sentiment' },
-          { name: '酒店' }
+          { name: '舆情', path: '/sentiment' }
         ]
         break
       case '/scenic':

src/components/Map/index.vue

@@ -3,28 +3,11 @@
 </template>
 
 <script setup>
-  onMounted(() => {
-    var map = new BMapGL.Map('container')
-    map.centerAndZoom(new BMapGL.Point(109.643452, 31.028006), 15)
-    map.enableScrollWheelZoom(true)
-    map.setMapType(BMAP_SATELLITE_MAP)
+  import { useMap } from '@/hooks/map'
 
-    // 绘制线
-    var polyline = new BMapGL.Polyline(
-      [
-        new BMapGL.Point(109.65053, 31.034752),
-        new BMapGL.Point(109.647332, 31.033104),
-        new BMapGL.Point(109.646883, 31.031797),
-        new BMapGL.Point(109.640254, 31.021136)
-      ],
-      {
-        strokeStyle: 'solid',
-        strokeColor: 'red ',
-        strokeWeight: 4,
-        strokeOpacity: 0.8
-      }
-    )
-    map.addOverlay(polyline)
+  onMounted(() => {
+    const { initMap, addMarker } = useMap()
+    initMap('car-ship', 109.491961, 31.024285, 13)
   })
 </script>