feat：完善功能

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

@@ -4,11 +4,11 @@
       <div class="box mr-8">
         <Title1 title="排队信息" />
         <div class="count-box flex justify-between">
-<!--          <count-item-->
-<!--            label="今日出票"-->
-<!--            :count="scenicStore.scenicQueueData.header.jrcp"-->
-<!--            suffix="张"-->
-<!--          />-->
+          <!--          <count-item-->
+          <!--            label="今日出票"-->
+          <!--            :count="scenicStore.scenicQueueData.header.jrcp"-->
+          <!--            suffix="张"-->
+          <!--          />-->
           <count-item
             label="今日接待人数"
             :count="scenicStore.scenicQueueData.header.jrjdrs"
@@ -237,7 +237,8 @@
                 <span>总数：</span>
                 <countup
                   :end-val="
-                    scenicStore.carShipData.car.count?.drivingCount +scenicStore.carShipData.car.count?.nonDrivingCount
+                    scenicStore.carShipData.car.count?.drivingCount +
+                    scenicStore.carShipData.car.count?.nonDrivingCount
                   "
                 />
               </div>
@@ -299,7 +300,7 @@
       </div>
     </div>
   </div>
-  <big-car-ship-map
+  <big-map
     v-model="show"
     :carList="scenicStore.carShipData.car.list"
     :shipList="scenicStore.carShipData.ship.list"
@@ -307,39 +308,27 @@
 </template>
 
 <script setup>
+  import countup from 'vue-countup-v3'
+  import PubSub from 'pubsub-js'
+
   import carIcon from '@/assets/images/car.png'
   import shipIcon from '@/assets/images/ship.png'
 
   import age from './age'
   import jam from './jam'
+  import BigMap from './big-map'
   import TrafficFlow from './traffic-flow'
-  import BigCarShipMap from './big-car-ship-map'
-  import countup from 'vue-countup-v3'
 
   import { useMap } from '@/hooks/map'
   import { useScenicStore } from '@/stores/scenic'
 
-  import PubSub from 'pubsub-js'
-
   const scenicStore = useScenicStore()
-  const { initMap, addMarker, clearOverlays } = useMap()
+  const { initMap, addMarker, marker } = useMap()
 
   const garageList = computed(() => {
     return scenicStore.stopCarData.headList
   })
 
-  const channelTotal = computed(() => {
-    return scenicStore.userPortraitData.data.channel.reduce((pre, cur) => {
-      return pre + parseInt(cur.count)
-    }, 0)
-  })
-
-  const ageTotal = computed(() => {
-    return scenicStore.userPortraitData.data.genderRate.reduce((pre, cur) => {
-      return pre + parseInt(cur.count)
-    }, 0)
-  })
-
   const alarmTotal = computed(() => {
     return scenicStore.secureData.dataList.reduce((pre, cur) => {
       return pre + cur.count
@@ -375,20 +364,55 @@
 
   let show = ref(false)
   let scenicChange = null
+  let carOverlays = ref([])
+  let shipOverlays = ref([])
 
   watch(
     () => scenicStore.carShipData,
     (val) => {
       setTimeout(() => {
         clearOverlays()
-        if (val.car.list.length) {
-          val.car.list.map((item) => {
+        if (carOverlays.value.length > 0) {
+          let flag = false
+          for (let i = 0; i < carOverlays.value.length; i++) {
+            if (flag) break
+            for (let j = 0; j < val.car.list.length; j++) {
+              if (carOverlays.value[i].sim == val.car.list[j].sim) {
+                carOverlays.value[i].setPosition({
+                  lng: val.car.list[j].lng,
+                  lat: val.car.list[j].lat
+                })
+                flag = true
+                break
+              }
+            }
+          }
+        } else {
+          val.car.list.map((item, i) => {
             addMarker(carIcon, [item.lng, item.lat], [36, 50])
+            carOverlays.value[i] = marker.value
           })
         }
-        if (val.ship.list.length) {
-          val.ship.list.map((item) => {
+
+        if (shipOverlays.value.length > 0) {
+          let flag = false
+          for (let i = 0; i < shipOverlays.value.length; i++) {
+            if (flag) break
+            for (let j = 0; j < val.ship.list.length; j++) {
+              if (carOverlays.value[i].sim == val.ship.list[j].sim) {
+                carOverlays.value[i].setPosition({
+                  lng: val.ship.list[j].lng,
+                  lat: val.ship.list[j].lat
+                })
+                flag = true
+                break
+              }
+            }
+          }
+        } else {
+          val.ship.list.map((item, i) => {
             addMarker(shipIcon, [item.lng, item.lat], [36, 50])
+            shipOverlays.value[i] = marker.value
           })
         }
       }, 1000)