feat:对接首页地图异常提示数据

src/stores/home.js

@@ -95,6 +95,17 @@ export const useHomeStore = defineStore('home', () => {
   // 酒店数据
   let hotelData = ref(null)
 
+  // 异常消息提醒
+  let notifyInfo = ref([
+    { name: '安全异常', value: 0 },
+    { name: '排队异常', value: 0 },
+    { name: '停车异常', value: 0 },
+    { name: '舆论异常', value: 0 }
+  ])
+
+  const setNotifyInfo = (val) => {
+    notifyInfo.value = val
+  }
   const setVisitorInfoList = (val) => {
     visitorInfoList.value = val
   }
@@ -148,6 +159,8 @@ export const useHomeStore = defineStore('home', () => {
     carStopInfoData,
     carShipData,
     hotelData,
+    notifyInfo,
+    setNotifyInfo,
     setScenicData,
     setUserPortraitData,
     setBaiduMapData,

src/views/home/components/box-2.vue

@@ -32,10 +32,15 @@
     <div class="rela">
       <div class="alarm-box">
         <ul class="flex">
-          <li class="alarm-item" v-for="(item, index) in list" :key="index">
+          <template v-for="(item, index) in homeStore.notifyInfo">
-            <img class="alarm-item__icon" :src="item.icon" />
+            <li v-if="item.value > 0" class="alarm-item" :key="index">
-            <span>{{ item.label }}</span>
+              <img v-if="index == 0" class="alarm-item__icon" :src="icon8" />
-          </li>
+              <img v-if="index == 1" class="alarm-item__icon" :src="icon9" />
+              <img v-if="index == 2" class="alarm-item__icon" :src="icon10" />
+              <img v-if="index == 3" class="alarm-item__icon" :src="icon11" />
+              <span>{{ item.name }}</span>
+            </li>
+          </template>
         </ul>
       </div>
       <div class="map" id="map" />
@@ -132,8 +137,6 @@
   import icon9 from '@/assets/images/icon-9.png'
   import icon10 from '@/assets/images/icon-10.png'
   import icon11 from '@/assets/images/icon-11.png'
-  import carIcon from '@/assets/images/car.png'
-  import shipIcon from '@/assets/images/ship.png'
 
   import { useMap } from '@/hooks/map'
   import { useHomeStore } from '@/stores/home'
@@ -142,59 +145,10 @@
 
   let emit = defineEmits(['switch-spot'])
 
-  const { map, marker, initMap, addMarker, clearOverlays } = useMap()
+  const { map, initMap } = useMap()
 
   let spotList = ref([])
 
-  let list = ref([
-    {
-      label: '安全异常',
-      icon: icon8
-    },
-    {
-      label: '排队异常',
-      icon: icon9
-    },
-    {
-      label: '停车异常',
-      icon: icon10
-    },
-    {
-      label: '舆论异常',
-      icon: icon11
-    }
-  ])
-  let current = ref(0)
-  let markers = []
-  let timter = null
-
-  watch(
-    () => [map.value, homeStore.carShipData],
-    () => {
-      return
-      if (map.value && homeStore.carShipData) {
-        // clearOverlays()
-        markers.forEach((item) => {
-          map.value.removeOverlay(item) // 移除每个标记
-        })
-        homeStore.carShipData?.car?.list.map((item) => {
-          if (item.lng && item.lat) {
-            addMarker(carIcon, [item.lng, item.lat], [36, 50])
-            markers.push(marker.value)
-          }
-        })
-        homeStore.carShipData?.ship?.list.map((item) => {
-          if (item.lng && item.lat) {
-            addMarker(shipIcon, [item.lng, item.lat], [36, 50])
-            markers.push(marker.value)
-          }
-        })
-      }
-    },
-    {
-      immediate: true
-    }
-  )
   const handleMap = (e) => {
     emit('switch-spot', e)
     // map.value.centerAndZoom(new BMapGL.Point('108.704166', '30.94776'), 16)
@@ -314,9 +268,6 @@
   onMounted(() => {
     getSpotList()
   })
-  // onUnmounted(() => {
-  //   if (timer) clearInterval(timer)
-  // })
 </script>
 
 <style lang="scss" scoped>

src/views/home/index.vue

@@ -79,6 +79,9 @@
           case 'hotelData':
             homeStore.setHotelData(val.data)
             break
+          case 'getMapNotifyInfo':
+            homeStore.setNotifyInfo(val.data)
+            break
         }
         if (!timer) sendCarShip()
       }