车船信息

src/views/vehicles/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <!-- <box1 />
+  <box2 /> -->
+  
+  <big-map
+    v-model="show"
+    :carList="scenicStore.carShipData.car.list"
+    :shipList="scenicStore.carShipData.ship.list"
+  />
+</template>
+
+<script setup>
+	import BigMap from './components/big-map'
+	import { useWebSocket } from '@/hooks/socket'
+	import { useScenicStore } from '@/stores/scenic'
+	import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
+	
+	import PubSub from 'pubsub-js'
+	
+	const scenicStore = useScenicStore()
+	const { isConnected, sendMessage, dataRes } = useWebSocket(
+	  `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/gps`
+	)
+	let scenicSpotId = ref('')
+	let scenicChange = null
+	let timer = null
+	let timer2 = null
+	let show = ref(true)
+	let keyword = ref('')
+	watch(
+	  () => [isConnected.value],
+	  (val) => {
+	    if (val[0]) {
+	      sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
+	    }
+	  },
+	  { immediate: true }
+	)
+	watch(
+	  () => dataRes.value,
+	  (val) => {
+	    if (val) {
+	      scenicStore.setVehicleData(val)
+	      if (!timer) sendCarShip()
+	      // if (!timer2) sendTimer2()
+	    }
+	  }
+	)
+	
+	const sendCarShip = (e) => {
+	
+	  timer = setInterval(() => {
+	    if (isConnected.value) {
+	      sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
+	    }
+	  }, 5000)
+	}
+	onMounted(() => {
+	   PubSub.subscribe('keywordChange', (msg, data) => {
+	     keyword.value = data
+	      sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
+	   })
+	})
+	onUnmounted(() => {
+	  
+	  if (timer) clearInterval(timer)
+	})
+</script>