fix:修复车船位置更新问题

2025-04-13 16:58:24 +08:00
parent 340d340ce6
commit 2764037d64
2 changed files with 134 additions and 134 deletions
--- a/src/views/scenic/components/big-map.vue
+++ b/src/views/scenic/components/big-map.vue
@@ -151,17 +151,15 @@
      if (map.value && modelValue.value) {
        // 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 < props.carList.length; j++) {
-              if (carOverlays.value[i].sim == props.carList[j].sim) {
+              let carOverlay = carOverlays.value[i]
+              let car = props.carList[j]
+              if (carOverlay && car && carOverlays.value[i].sim == car.sim) {
                carOverlays.value[i].setPosition({
-                  lng: props.carList[j].lng,
-                  lat: props.carList[j].lat
+                  lng: car.lng,
+                  lat: car.lat
                })
-                flag = true
                continue
              }
            }
@@ -173,15 +171,12 @@
              infoBox.value &&
              props.carList[i].sim == currentMarker.value.sim
            ) {
+              console.log('变化了')
+              let { lng, lat } = props.carList[i]
              infoBox.value.setContent(setHtml(props.carList[i]))
-              infoBox.value.setPosition({
-                lng: props.carList[i].lng,
-                lat: props.carList[i].lat
-              })
-              currentMarker.value.setPosition({
-                lng: props.carList[i].lng,
-                lat: props.carList[i].lat
-              })
+              infoBox.value.setPosition(new BMapGL.Point(lng, lat))
+              currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
+              map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
              break
            }
          }
@@ -199,7 +194,9 @@
              }
              marker.value.addEventListener('click', (e) => {
                e.sim = e.target.sim
-                currentMarker.value = e
+                currentMarker.value = carOverlays.value.find(
+                  (item) => item && item.sim == e.target.sim
+                )
                let obj = props.carList.find((item) => item.sim == e.target.sim)
                setInfoBox(e.latLng, obj)
              })
@@ -208,18 +205,18 @@
            }
          })
        }
+
        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) {
+              let shipOverlay = shipOverlays.value[i]
+              let ship = props.shipList[j]
+              if (shipOverlay && ship && shipOverlay.sim == ship.sim) {
                shipOverlays.value[i].setPosition({
-                  lng: props.shipList[j].lng,
-                  lat: props.shipList[j].lat
+                  lng: ship.lng,
+                  lat: ship.lat
                })
-                flag = true
                continue
              }
            }
@@ -231,11 +228,11 @@
              infoBox.value &&
              props.shipList[i].sim == currentMarker.value.sim
            ) {
+              let { lng, lat } = props.carList[i]
              infoBox.value.setContent(setHtml(props.shipList[i]))
-              infoBox.value.setPosition({
-                lng: props.shipList[i].lng,
-                lat: props.shipList[i].lat
-              })
+              infoBox.value.setPosition(new BMapGL.Point(lng, lat))
+              currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
+              map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
              break
            }
          }
@@ -252,7 +249,9 @@
                addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
              }
              marker.value.addEventListener('click', (e) => {
-                currentMarker.value = e
+                currentMarker.value = carOverlays.value.find(
+                  (item) => item && item.sim == e.target.sim
+                )
                let obj = props.shipList.find((item) => item.sim == e.target.sim)
                setInfoBox(e.latLng, obj)
              })
@@ -275,34 +274,40 @@
  }

  const setHtml = (data) => {
-    data.gpsTime = timestampToYMD(data?.gpsTime)
-    //  <div class='marker-col'> <img src='${icon16}' /> <p> 18723232323 </p> </div>
-    //  <div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div>
-    let html = `<div class='marker-box'>
-                    <p class='marker-title'> ${data?.licenseNumber} </p>
-                    <div class='marker-header'>
-                        <span class='marker-sim'> ${data?.imei} </span>
-                        <div class='marker-tag'> <div></div> ${data?.status}  （${data?.statusTimeDesc}）</div>
-                      </div>
-                    <div class='marker-line'> </div>
-                    <div class='marker-row'>
-                      <div class='marker-col'> <img src='${icon13}' /> <p> ${data?.contactUser} </p> </div>
-                      <div class='marker-col'> <img src='${icon14}' /> <p> ${data?.contactTel} </p> </div>
-                    </div>
-                    <div class='marker-row'>
-                      <div class='marker-col'> <img src='${icon15}' /> <p> ${data?.gpsTime} </p> </div>
-                    </div>
-                    <div class='marker-row'>
-                      <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
-                    </div>
-                    <div class='marker-row'>
-                      <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> ${data?.address} </p> </div>
-                    </div>
-                  </div>`
-    return html
+    return `<div class='marker-box'>
+                <p class='marker-title'> ${data?.licenseNumber} </p>
+                <div class='marker-header'>
+                <span class='marker-sim'> ${data?.imei} </span>
+                <div class='marker-tag'> 
+                  <div></div> 
+                  ${data?.status}  （${data?.statusTimeDesc}）
+                </div>
+                </div>
+                <div class='marker-line'> </div>
+                <div class='marker-row'>
+                <div class='marker-col'>
+                  <img src='${icon13}' />
+                  <p> ${data?.contactUser} </p> </div>
+                  <div class='marker-col'> 
+                  <img src='${icon14}' /> <p> ${data?.contactTel} </p> 
+                  </div>
+                </div>
+                <div class='marker-row'>
+                <div class='marker-col'> 
+                  <img src='${icon15}' /> 
+                  <p> ${timestampToYMD(data?.gpsTime)} </p> </div>
+                </div>
+                <div class='marker-row'>
+                <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
+                </div>
+                <div class='marker-row'>
+                <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> ${data?.address} </p> </div>
+                </div>
+            </div>`
  }

  const setInfoBox = (e, data) => {
@@ -315,17 +320,21 @@
        align: INFOBOX_AT_TOP,
        offset: new BMapGL.Size(0, 20)
      })
+      infoBox.value.addEventListener('close', () => {
+        currentMarker.value = null
+      })
    } else {
      if (lastInfoBox.value) lastInfoBox.value?.close()
      infoBox.value.setContent(setHtml(data))
      lastInfoBox.value = infoBox.value
    }
    infoBox.value.open(e)
+    map.value.centerAndZoom(e, 15)
  }

  const handleItem = (e, index) => {
    current.value = index
-    currentMarker.value = carOverlays.value.find((item) => item.sim == e.sim)
+    currentMarker.value = carOverlays.value.find((item) => item && item.sim == e.sim)
    setInfoBox(new BMapGL.Point(e.lng, e.lat), e)
  }

@@ -339,6 +348,7 @@
    carOverlays.value = []
    shipOverlays.value = []
    map.value = null
+    current.value = ''
    infoBox.value = null
    lastInfoBox.value = null
    modelValue.value = false
@@ -366,7 +376,6 @@

  onMounted(() => {
    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
-		// console.log(data,'99999999999999999999999999999999999999')
      scenicSpotId.value = data.scenicSpotId
      lat.value = data.lat
      lng.value = data.lng
--- a/src/views/scenic/components/box-2.vue
+++ b/src/views/scenic/components/box-2.vue
@@ -101,19 +101,16 @@
            <div class="pt-10">
              <Title3 title="车辆归属地占比" />
            </div>
-			<div v-if="dataLists.length">
-				<PieRow
-				  label="停车总数"
-				  :dataList="dataLists"
-				  :total="carTotal"
-				  :width="360"
-				  :height="300"
-				/>
-			</div>
-			<div class="null-box" v-else>
-				暂无数据
-			</div>
-
+            <div v-if="dataLists.length">
+              <PieRow
+                label="停车总数"
+                :dataList="dataLists"
+                :total="carTotal"
+                :width="360"
+                :height="300"
+              />
+            </div>
+            <div class="null-box" v-else> 暂无数据 </div>
          </div>
        </div>
      </div>
@@ -145,10 +142,10 @@
    </div>
    <div class="flex mt-8">
      <div class="box-3 mr-8">
-		  <div class="look-box">
-			  <Title1 title="交通信息" />
-			  <div @click="hanldeLookMap" class="look-btn">查看详情</div>
-		  </div>
+        <div class="look-box">
+          <Title1 title="交通信息" />
+          <div @click="hanldeLookMap" class="look-btn">查看详情</div>
+        </div>
        <div class="count-box flex">
          <count-item
            v-for="(item, index) in scenicStore.trafficData.infoList"
@@ -344,12 +341,12 @@
  //查看交通信息
  let latitude = ref('')
  let longitude = ref('')
-  const hanldeLookMap = ()=>{
-	  router.push('/traffic')
-	  // traMapShow.value = true
+  const hanldeLookMap = () => {
+    router.push('/traffic')
+    // traMapShow.value = true
  }
-  const handleToWorkOrder = ()=>{
-	  router.push('/workOrder')
+  const handleToWorkOrder = () => {
+    router.push('/workOrder')
  }
  const garageList = computed(() => {
    return scenicStore.stopCarData.headList
@@ -360,8 +357,8 @@
      return pre + cur.count
    }, 0)
  })
-  const stopCarDataLists = computed(()=>{
-	  return scenicStore.stopCarData.dataLists
+  const stopCarDataLists = computed(() => {
+    return scenicStore.stopCarData.dataLists
  })
  const carTotal = computed(() => {
    return dataLists.value.reduce((pre, cur) => {
@@ -391,44 +388,41 @@
  })
  let dataLists = ref([])
  watch(
-	()=>scenicStore.stopCarData.dataLists,
-	(val) =>{
-		console.log(val.length,'watch 监听')
-		if(val.length){
-			dataLists.value = val
-		}else{
-			dataLists.value = []
-		}
-	},
-	{ immediate: true }
+    () => scenicStore.stopCarData.dataLists,
+    (val) => {
+      console.log(val.length, 'watch 监听')
+      if (val.length) {
+        dataLists.value = val
+      } else {
+        dataLists.value = []
+      }
+    },
+    { immediate: true }
  )
  let headList = ref([])
  watch(
-  	()=>scenicStore.secureData.headList,
-  	(val) =>{
-  		if(val.length){
-  			headList.value = scenicStore.secureData.headList
-  		}else{
-  			headList.value = []
-  		}
-  	},
-  	{ immediate: true }
+    () => scenicStore.secureData.headList,
+    (val) => {
+      if (val.length) {
+        headList.value = scenicStore.secureData.headList
+      } else {
+        headList.value = []
+      }
+    },
+    { immediate: true }
  )
  watch(
    () => scenicStore.carShipData,
    (val) => {
      setTimeout(() => {
        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
                continue
              }
            }
@@ -449,16 +443,13 @@
        }

        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
                continue
              }
            }
@@ -484,8 +475,8 @@

  onMounted(() => {
    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
-		latitude.value = data.lat
-		longitude.value = data.lng
+      latitude.value = data.lat
+      longitude.value = data.lng
      carOverlays.value = []
      shipOverlays.value = []
      initMap('car-ship', data.lng, data.lat, 15)
@@ -497,32 +488,32 @@
 </script>

 <style scoped lang="scss">
-	.null-box{
-		width:vw(360);
-		height:vh(300);
-		display:flex;
-		align-items:center;
-		color:#fff;
-		text-align:center;
-		font-size:vw(20);
-		justify-content: center;
-	}
-	.look-box{
-		position:relative;
-		.look-btn{
-			position:absolute;
-			right:vw(20);
-			top:50%;
-			transform: translateY(-50%);
-			padding: vw(12);
-			display: flex;
-			align-items: center;
-			background: #0a4190;
-			border-radius: vw(4);
-			font-size:vw(14);
-			color:#fff;
-		}
-	}
+  .null-box {
+    width: vw(360);
+    height: vh(300);
+    display: flex;
+    align-items: center;
+    color: #fff;
+    text-align: center;
+    font-size: vw(20);
+    justify-content: center;
+  }
+  .look-box {
+    position: relative;
+    .look-btn {
+      position: absolute;
+      right: vw(20);
+      top: 50%;
+      transform: translateY(-50%);
+      padding: vw(12);
+      display: flex;
+      align-items: center;
+      background: #0a4190;
+      border-radius: vw(4);
+      font-size: vw(14);
+      color: #fff;
+    }
+  }
  :deep(.BMap_cpyCtrl) {
    display: none;
  }