feat：完善功能

src/components/Header/index.vue

@@ -175,6 +175,7 @@
         isSkip.value = false
         isBack.value = true
         let res = await getSpotListApi()
+        console.log(res, '============')
         navLeft.value = res.data
         current.value = 0
         title.value = navLeft.value[current.value].name

src/components/TicketSource/index.vue

@@ -91,7 +91,7 @@
             }
           }
         },
-        color: ['#F15A25', '#01FEFE', '#12B5FD'],
+        // color: ['#F15A25', '#01FEFE', '#12B5FD'],
         polar: {
           center: ['50%', '40%']
         },

src/hooks/map.js

@@ -27,6 +27,10 @@ export function useMap() {
     var marker = new BMapGL.Marker(point, { icon: iconPath })
     map.value.addOverlay(marker)
   }
+  // 清除覆盖物
+  const clearOverlays = () => {
+    map.value.clearOverlays()
+  }
 
-  return { map, initMap, addMarker }
+  return { map, initMap, addMarker, clearOverlays }
 }

src/hooks/socket.js

@@ -19,14 +19,13 @@ export function useWebSocket(url) {
       console.error('WebSocket error:', error)
     }
     socket.value.onmessage = (message) => {
-      // 处理接收到的消息
       if (JSON.parse(message.data)) {
         let data = JSON.parse(message.data)
         dataRes.value = data
       }
     }
-    socket.value.onclose = () => {
+    socket.value.onclose = (event) => {
-      console.log('WebSocket disconnected')
+      console.log('WebSocket close：', event)
     }
   }
 

src/stores/home.js

@@ -79,6 +79,18 @@ export const useHomeStore = defineStore('home', () => {
     spotInfo: []
   })
   // 车船信息
+  // {
+  //   car: {
+  //     count: 0,
+  //     info: [],
+  //     list: []
+  //   },
+  //   ship: {
+  //     count: 0,
+  //     info: [],
+  //     list: []
+  //   }
+  // }
   let carShipData = ref(null)
   // 酒店数据
   let hotelData = ref(null)

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

@@ -131,6 +131,8 @@
   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'
@@ -139,7 +141,7 @@
 
   let emit = defineEmits(['switch-spot'])
 
-  const { map, initMap } = useMap()
+  const { map, initMap, addMarker } = useMap()
 
   let spotList = ref([])
 
@@ -162,6 +164,27 @@
     }
   ])
   let current = ref(0)
+
+  watch(
+    () => [map.value, homeStore.carShipData],
+    () => {
+      if (map.value && homeStore.carShipData) {
+        homeStore.carShipData?.car?.list.map((item) => {
+          if (item.lng && item.lat) {
+            addMarker(carIcon, [item.lng, item.lat], [36, 50])
+          }
+        })
+        homeStore.carShipData?.ship?.list.map((item) => {
+          if (item.lng && item.lat) {
+            addMarker(shipIcon, [item.lng, item.lat], [36, 50])
+          }
+        })
+      }
+    },
+    {
+      immediate: true
+    }
+  )
   const handleMap = (e) => {
     emit('switch-spot', e)
     // map.value.centerAndZoom(new BMapGL.Point('108.704166', '30.94776'), 16)

src/views/home/index.vue

@@ -18,6 +18,8 @@
   )
   const homeStore = useHomeStore()
 
+  let timer = null
+
   watch(
     () => isConnected.value,
     (val) => {
@@ -25,7 +27,7 @@
         sendMessage(
           JSON.stringify({
             action: 'start',
-            type: 'index',
+            type: '',
             scenicSpot: ''
           })
         )
@@ -35,8 +37,8 @@
   watch(
     () => dataRes.value,
     (val) => {
+      console.log(val, '景区接受消息')
       if (val) {
-        console.log(val, '首页接受消息')
         switch (val.type) {
           case 'userPortrait':
             homeStore.setUserPortraitData(val.data)
@@ -78,9 +80,24 @@
             homeStore.setHotelData(val.data)
             break
         }
+        if (!timer) sendCarShip()
       }
     }
   )
+  const sendCarShip = (e) => {
+    timer = setInterval(() => {
+      if (isConnected.value) {
+        console.log('定时发送车船消息11')
+        sendMessage(
+          JSON.stringify({
+            action: 'start',
+            type: 'carShipData',
+            scenicSpotId: ''
+          })
+        )
+      }
+    }, 5000)
+  }
   const switchSpot = (e) => {
     sendMessage(
       JSON.stringify({
@@ -90,4 +107,8 @@
       })
     )
   }
+
+  onUnmounted(() => {
+    if (timer) clearInterval(timer)
+  })
 </script>

src/views/scenic/components/big-car-ship-map.vue

@@ -13,22 +13,61 @@
   import { useMap } from '@/hooks/map'
 
   let modelValue = defineModel()
-  const { map, initMap, addMarker } = useMap()
+  const { map, initMap, addMarker, clearOverlays } = useMap()
+
+  let props = defineProps({
+    carList: {
+      type: Array,
+      default: () => []
+    },
+    shipList: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  let lat = ref('')
+  let lng = ref('')
+  let scenicChange = null
 
   watch(
     () => modelValue.value,
     (val) => {
-      if (val && !map.value) {
+      if (val) {
         setTimeout(() => {
-          initMap('big-car-ship', 109.552461, 31.049607, 15)
+          initMap('big-car-ship', lng.value, lat.value, 15)
-          addMarker(carIcon, [109.551419, 31.050001], [36, 50])
-          addMarker(shipIcon, [109.551671, 31.04847], [36, 50])
         }, 1000)
       }
-    }
+    },
+    { immediate: true }
+  )
+  watch(
+    () => [map.value, props.carList, props.shipList],
+    (val) => {
+      if (val[0]) {
+        setTimeout(() => {
+          clearOverlays()
+          val[1].map((item) => {
+            if (item.lng && item.lat) addMarker(carIcon, [item.lng, item.lat], [36, 50])
+          })
+          val[2].map((item) => {
+            if (item.lng && item.lat) addMarker(shipIcon, [item.lng, item.lat], [36, 50])
+          })
+        }, 1000)
+      }
+    },
+    { immediate: true }
   )
 
-  onMounted(() => {})
+  onMounted(() => {
+    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+      lat.value = data.lat
+      lng.value = data.lng
+    })
+  })
+  onUnmounted(() => {
+    PubSub.unsubscribe(scenicChange)
+  })
 </script>
 
 <style scoped lang="scss">

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

@@ -283,7 +283,7 @@
                 <div class="label">运营船只</div>
                 <div class="value flex">
                   <countup :end-val="scenicStore.carShipData.ship.count?.drivingCount" />
-                  <span class="suffix">辆</span>
+                  <span class="suffix">只</span>
                 </div>
               </div>
               <div class="car-item">
@@ -303,7 +303,11 @@
       </div>
     </div>
   </div>
-  <BigCarShipMap v-model="show" />
+  <big-car-ship-map
+    v-model="show"
+    :carList="scenicStore.carShipData.car.list"
+    :shipList="scenicStore.carShipData.ship.list"
+  />
 </template>
 
 <script setup>
@@ -319,6 +323,8 @@
   import { useMap } from '@/hooks/map'
   import { useScenicStore } from '@/stores/scenic'
 
+  import PubSub from 'pubsub-js'
+
   const scenicStore = useScenicStore()
   const { initMap, addMarker } = useMap()
 
@@ -372,17 +378,22 @@
   })
 
   let show = ref(false)
+  let scenicChange = null
 
   watch(
     () => scenicStore.carShipData,
     (val) => {
-      if (val.car.list.length > 0) {
+      if (val.car.list.length) {
         setTimeout(() => {
           val.car.list.map((item) => {
-            addMarker(carIcon, [109.551419, 31.050001], [36, 50])
+            addMarker(carIcon, [item.lng, item.lat], [36, 50])
           })
+        }, 1000)
+      }
+      if (val.ship.list.length) {
+        setTimeout(() => {
           val.ship.list.map((item) => {
-            addMarker(shipIcon, [109.551671, 31.04847], [36, 50])
+            addMarker(shipIcon, [item.lng, item.lat], [36, 50])
           })
         }, 1000)
       }
@@ -391,7 +402,12 @@
   )
 
   onMounted(() => {
-    initMap('car-ship', 109.552461, 31.049607, 15)
+    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+      initMap('car-ship', data.lng, data.lat, 15)
+    })
+  })
+  onUnmounted(() => {
+    PubSub.unsubscribe(scenicChange)
   })
 </script>
 

src/views/scenic/index.vue

@@ -6,6 +6,7 @@
 <script setup>
   import box1 from './components/box-1.vue'
   import box2 from './components/box-2.vue'
+
   import { useWebSocket } from '@/hooks/socket'
   import { useScenicStore } from '@/stores/scenic'
   import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
@@ -19,6 +20,8 @@
   )
 
   let scenicSpotId = ref('')
+  let scenicChange = null
+  let timer = null
 
   watch(
     () => [isConnected.value, scenicSpotId.value],
@@ -34,6 +37,7 @@
     () => dataRes.value,
     (val) => {
       if (val) {
+        console.log(val, '景区接受消息')
         switch (val.type) {
           case 'wordkOrderlist':
             scenicStore.setWordkOrderList(val.data)
@@ -66,17 +70,33 @@
             scenicStore.setCarShipData(val.data)
             break
         }
+        if (!timer) sendCarShip()
       }
     }
   )
-  let scenicChange = null
+
+  const sendCarShip = (e) => {
+    timer = setInterval(() => {
+      if (isConnected.value) {
+        console.log('定时发送车船消息22')
+        sendMessage(
+          JSON.stringify({
+            action: 'start',
+            type: 'carShipData',
+            scenicSpotId: scenicSpotId.value
+          })
+        )
+      }
+    }, 5000)
+  }
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
       scenicSpotId.value = data.scenicSpotId
     })
   })
   onUnmounted(() => {
-    PubSub.unsubscribe(scenicChange)
+    if (scenicChange) PubSub.unsubscribe(scenicChange)
+    if (timer) clearInterval(timer)
   })
 </script>
 

vite.config.js

@@ -27,6 +27,13 @@ export default defineConfig({
   server: {
     hmr: true,
     host: '0.0.0.0'
+    // proxy: {
+    //   '/': {
+    //     // 目标服务器的地址
+    //     target: 'http://36.138.38.16:8001',
+    //     changeOrigin: true
+    //   }
+    // }
   },
   resolve: {
     alias: {