From a96998dacde61c8d63d3affa1fe5cc14c629c3b7 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Thu, 20 Feb 2025 15:27:03 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/map.js                              |  21 ---
 .../{big-car-ship-map.vue => big-map.vue}     | 140 +++++++++++++-----
 src/views/scenic/components/box-2.vue         |  80 ++++++----
 3 files changed, 152 insertions(+), 89 deletions(-)
 rename src/views/scenic/components/{big-car-ship-map.vue => big-map.vue} (62%)

diff --git a/src/hooks/map.js b/src/hooks/map.js
index 05751a4..05e9e46 100644
--- a/src/hooks/map.js
+++ b/src/hooks/map.js
@@ -28,27 +28,6 @@ export function useMap() {
     // 创建标注对象并添加到地图
     marker.value = new BMapGL.Marker(point, { icon: iconPath })
     map.value.addOverlay(marker.value)
-    // marker.value.addEventListener('click', (e) => {
-    //   console.log(e, '===')
-    //   if (!infoBox.value) {
-    //     setInfoBox(e.latLng)
-    //   } else {
-    //     if (lastInfoBox.value) lastInfoBox.value?.close()
-    //     infoBox.value.open(e.latLng)
-    //     lastInfoBox.value = infoBox.value
-    //   }
-    //   // const content = `
-    //   //   <div style="padding: 10px;">
-    //   //     <h4>标题</h4>
-    //   //     <p>这里是详细信息</p>
-    //   //   </div>
-    //   // `
-    //   // var infoWindow = new BMapGL.InfoWindow(content) // 创建信息窗口对象
-    //   // console.log(map.value.getCenter())
-    //   // map.value.openInfoWindow(infoWindow, e.latLng) // 打开信息窗口
-    //   // const infoWindow = new BMapGL.InfoWindow('这里是一些信息') // 创建信息窗口对象
-    //   // marker.value.openInfoWindow(infoWindow) // 打开信息窗口
-    // })
   }
 
   // 清除覆盖物
diff --git a/src/views/scenic/components/big-car-ship-map.vue b/src/views/scenic/components/big-map.vue
similarity index 62%
rename from src/views/scenic/components/big-car-ship-map.vue
rename to src/views/scenic/components/big-map.vue
index e41425f..fbb6800 100644
--- a/src/views/scenic/components/big-car-ship-map.vue
+++ b/src/views/scenic/components/big-map.vue
@@ -8,6 +8,7 @@
 </template>
 
 <script setup>
+  import closeIcon from '@/assets/images/close.png'
   import carIcon from '@/assets/images/car.png'
   import shipIcon from '@/assets/images/ship.png'
   import icon13 from '@/assets/images/icon-13.png'
@@ -22,7 +23,7 @@
   import { useMap } from '@/hooks/map'
 
   let modelValue = defineModel()
-  const { map, marker, initMap, addMarker, removeOverlay } = useMap()
+  const { map, marker, initMap, addMarker } = useMap()
 
   let props = defineProps({
     carList: {
@@ -58,71 +59,109 @@
     () => [map.value, props.carList, props.shipList],
     (val) => {
       if (val[0]) {
-        // 109.65274,31.045241
+        // 109.645729,31.041203
         if (carOverlays.value.length > 0) {
+          // 更新车辆marker位置
           let flag = false
           for (let i = 0; i < carOverlays.value.length; i++) {
             if (flag) break
-            for (let j = 0; j < val[1].length; j++) {
-              if (carOverlays.value[i].sim == val[1][j].sim) {
+            for (let j = 0; j < props.carList.length; j++) {
+              if (carOverlays.value[i].sim == props.carList[j].sim) {
                 carOverlays.value[i].setPosition({
-                  lng: val[1][j].lng,
-                  lat: val[1][j].lat
+                  lng: props.carList[j].lng,
+                  lat: props.carList[j].lat
                 })
                 flag = true
                 break
               }
             }
           }
-          for (let i = 0; i < val[1].length; i++) {
+          // 更新车辆infobox位置和内容
+          for (let i = 0; i < props.carList.length; i++) {
             if (
               currentMarker.value &&
               infoBox.value &&
-              val[1][i].sim == currentMarker.value.target.sim
+              props.carList[i].sim == currentMarker.value.target.sim
             ) {
+              infoBox.value.setContent(setHtml(props.carList[i]))
               infoBox.value.setPosition({
-                lng: val[1][i].lng,
-                lat: val[1][i].lat
+                lng: props.carList[i].lng,
+                lat: props.carList[i].lat
               })
-              infoBox.value.setContent(setHtml('么么哒'))
               break
             }
           }
         } else {
-          val[1].map((item, i) => {
+          props.carList.map((item, i) => {
             if (item.lng && item.lat) {
               addMarker(carIcon, [item.lng, item.lat], [36, 50])
               marker.value.addEventListener('click', (e) => {
                 currentMarker.value = e
-                if (!infoBox.value) {
-                  setInfoBox(e.latLng)
-                } else {
-                  if (lastInfoBox.value) lastInfoBox.value?.close()
-                  infoBox.value.open(e.latLng)
-                  infoBox.value.setContent(setHtml('爱你哟'))
-                  lastInfoBox.value = infoBox.value
-                }
+                let obj = props.carList.find((item) => item.sim == e.target.sim)
+                setInfoBox(e.latLng, obj)
               })
               marker.value.sim = item.sim
               carOverlays.value[i] = marker.value
             }
           })
         }
-
-        val[2].map((item) => {
-          if (item.lng && item.lat) addMarker(shipIcon, [item.lng, item.lat], [36, 50])
-        })
+        if (shipOverlays.value.length > 0) {
+          // 更新船只marker位置
+          let flag = false
+          for (let i = 0; i < shipOverlays.value.length; i++) {
+            if (flag) break
+            for (let j = 0; j < props.shipList.length; j++) {
+              if (shipOverlays.value[i].sim == props.shipList[j].sim) {
+                shipOverlays.value[i].setPosition({
+                  lng: props.shipList[j].lng,
+                  lat: props.shipList[j].lat
+                })
+                flag = true
+                break
+              }
+            }
+          }
+          // 更新船只infobox位置和内容
+          for (let i = 0; i < props.shipList.length; i++) {
+            if (
+              currentMarker.value &&
+              infoBox.value &&
+              props.shipList[i].sim == currentMarker.value.target.sim
+            ) {
+              infoBox.value.setContent(setHtml(props.shipList[i]))
+              infoBox.value.setPosition({
+                lng: props.shipList[i].lng,
+                lat: props.shipList[i].lat
+              })
+              break
+            }
+          }
+        } else {
+          props.shipList.map((item, i) => {
+            if (item.lng && item.lat) {
+              addMarker(shipIcon, [item.lng, item.lat], [36, 50])
+              marker.value.addEventListener('click', (e) => {
+                currentMarker.value = e
+                let obj = props.shipList.find((item) => item.sim == e.target.sim)
+                setInfoBox(e.latLng, obj)
+              })
+              marker.value.sim = item.sim
+              shipOverlays.value[i] = marker.value
+            }
+          })
+        }
       }
     },
     { immediate: true }
   )
 
-  const setHtml = (title) => {
+  const setHtml = (data) => {
+    console.log(data, 'data')
     let html = `<div class='marker-box'>
-                  <p class='marker-title'> ${title} </p>
+                  <p class='marker-title'> ${data?.license_number} </p>
                   <div class='marker-header'> 
-                      <span class='marker-sim'> 863014542181060 </span>
-                      <div class='marker-tag'> <div></div> 静止(1分9秒)</div>
+                      <span class='marker-sim'> ${data?.imei} </span>
+                      <div class='marker-tag'> <div></div> ${data.status}  (${data.status_time_desc})</div>
                     </div>
                   <div class='marker-line'> </div>
                   <div class='marker-row'>
@@ -138,7 +177,7 @@
                     <div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div>
                   </div>
                   <div class='marker-row'>
-                    <div class='marker-col'> <img src='${icon19}' /> <p> 31,04736,109.584536 </p> </div>
+                    <div class='marker-col'> <img src='${icon19}' /> <p> ${data.lng},${data.lat} </p> </div>
                   </div>
                   <div class='marker-row'>
                     <div class='marker-col'> <img src='${icon20}' /> <p> 重庆市奉节县(重庆市奉节县白帝城.瞿塘峡景区内.白帝城东南218米） </p> </div>
@@ -146,15 +185,22 @@
                 </div>`
     return html
   }
-  const setInfoBox = (e) => {
-    infoBox.value = new BMapGLLib.InfoBox(map.value, setHtml('场（厂）内渝A·33087'), {
-      boxStyle: {},
-      closeIconMargin: '1px 1px 0 0',
-      closeIconUrl: '',
-      enableAutoPan: true,
-      align: INFOBOX_AT_TOP,
-      offset: new BMapGL.Size(0, 20)
-    })
+
+  const setInfoBox = (e, data) => {
+    if (!infoBox.value) {
+      infoBox.value = new BMapGLLib.InfoBox(map.value, setHtml(data), {
+        boxStyle: {},
+        closeIconMargin: '',
+        closeIconUrl: closeIcon,
+        enableAutoPan: true,
+        align: INFOBOX_AT_TOP,
+        offset: new BMapGL.Size(0, 20)
+      })
+    } else {
+      if (lastInfoBox.value) lastInfoBox.value?.close()
+      infoBox.value.setContent(setHtml(data))
+      lastInfoBox.value = infoBox.value
+    }
     infoBox.value.open(e)
   }
 
@@ -170,12 +216,26 @@
 </script>
 
 <style lang="scss">
+  .infoBox {
+    > img {
+      width: vw(40) !important;
+      height: auto;
+      z-index: 9999;
+    }
+  }
   .marker {
     &-box {
+      position: relative;
       width: 316px;
-
-      background: linear-gradient(180deg, #0a4190 0%, #0e51b1 100%);
       border: 1px solid #0096ff;
+      background: linear-gradient(180deg, #0a4190 0%, #0e51b1 100%);
+    }
+    &-close {
+      position: absolute;
+      right: vw(20);
+      top: vh(10);
+      width: vw(30);
+      height: auto;
     }
     &-title {
       width: 100%;
diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue
index d75817f..5096265 100644
--- a/src/views/scenic/components/box-2.vue
+++ b/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)