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'>
+    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 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 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 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 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
  }

  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
@@ -110,10 +110,7 @@
                :height="300"
              />
            </div>
-			<div class="null-box" v-else>
-				暂无数据
-			</div>
-
+            <div class="null-box" v-else> 暂无数据 </div>
          </div>
        </div>
      </div>
@@ -344,11 +341,11 @@
  //查看交通信息
  let latitude = ref('')
  let longitude = ref('')
-  const hanldeLookMap = ()=>{
+  const hanldeLookMap = () => {
    router.push('/traffic')
    // traMapShow.value = true
  }
-  const handleToWorkOrder = ()=>{
+  const handleToWorkOrder = () => {
    router.push('/workOrder')
  }
  const garageList = computed(() => {
@@ -360,7 +357,7 @@
      return pre + cur.count
    }, 0)
  })
-  const stopCarDataLists = computed(()=>{
+  const stopCarDataLists = computed(() => {
    return scenicStore.stopCarData.dataLists
  })
  const carTotal = computed(() => {
@@ -391,12 +388,12 @@
  })
  let dataLists = ref([])
  watch(
-	()=>scenicStore.stopCarData.dataLists,
-	(val) =>{
-		console.log(val.length,'watch 监听')
-		if(val.length){
+    () => scenicStore.stopCarData.dataLists,
+    (val) => {
+      console.log(val.length, 'watch 监听')
+      if (val.length) {
        dataLists.value = val
-		}else{
+      } else {
        dataLists.value = []
      }
    },
@@ -404,11 +401,11 @@
  )
  let headList = ref([])
  watch(
-  	()=>scenicStore.secureData.headList,
-  	(val) =>{
-  		if(val.length){
+    () => scenicStore.secureData.headList,
+    (val) => {
+      if (val.length) {
        headList.value = scenicStore.secureData.headList
-  		}else{
+      } else {
        headList.value = []
      }
    },
@@ -419,16 +416,13 @@
    (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
              }
            }
@@ -497,30 +488,30 @@
 </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);
+  .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%;
+  .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;
+      font-size: vw(14);
+      color: #fff;
    }
  }
  :deep(.BMap_cpyCtrl) {