车船信息

src/hooks/socket.js

@@ -16,6 +16,7 @@ export function useWebSocket(url) {
       console.log('WebSocket connected')
     }
     socket.value.onerror = (error) => {
+		connectWebSocket()
       console.error('WebSocket error:', error)
     }
     socket.value.onmessage = (message) => {

src/layout/components/Header/index.vue

@@ -203,6 +203,7 @@
           otherLeftLabel.value = '其他酒店'
           otherRightLabel.value = '其他场馆'
           pubSub.publish('hotelChange', item)
+		  // console.log(item,'hotelChange')
           break
       }
     }
@@ -235,11 +236,16 @@
           { name: '交通', path: '/traffic' }
         ]
         navRight.value = [
+		  { name:'车船', path:'/vehicles'},
           { name: '工单', path: '/workOrder' },
           { name: '舆情', path: '/sentiment' },
           { name: '酒店', path: '/hotel' }
         ]
         break
+		case '/vehicles':
+		title.value = '车船信息'
+		isBack.value = true
+		break
       case '/scenic':
         otherLeftLabel.value = '其他景区'
         isSkip.value = false

src/router/index.js

@@ -58,7 +58,12 @@ const router = createRouter({
           path: '/hotel',
           name: 'hotel',
           component: () => import('@/views/hotel/index.vue')
-        }
+        },
+		{
+		  path: '/vehicles',
+		  name: 'vehicles',
+		  component: () => import('@/views/vehicles/index.vue')
+		},
       ]
     },
     {

src/stores/scenic.js

@@ -2,6 +2,8 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useScenicStore = defineStore('scenic', () => {
+  // 车船数据
+  let vehicleData = ref({})
   // 门票销售数据
   let scenicSpotData = ref({
     data: [
@@ -82,7 +84,9 @@ export const useScenicStore = defineStore('scenic', () => {
       list: []
     }
   })
-
+  const setVehicleData = (val) =>{
+	  vehicleData.value = val
+  }
   const setCarShipData = (val) => {
     carShipData.value = val
   }
@@ -133,6 +137,8 @@ export const useScenicStore = defineStore('scenic', () => {
     setSecureData,
     setTrafficData,
     setUserPortraitData,
-    setCarShipData
+    setCarShipData,
+	vehicleData,
+	setVehicleData
   }
 })

src/utils/config.js

@@ -1,10 +1,10 @@
-export const baseUrl = 'http://127.0.0.1:81'
+export const baseUrl = 'http://192.168.77.209:81'
 export const proBaseUrl = 'http://192.168.77.200'
 
-export const socketBaseUrl = 'ws://127.0.0.1:81/fjtcc-api'
+export const socketBaseUrl = 'ws://192.168.77.209:81/fjtcc-api'
 export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
 
-export const mode = 'pro' // 测试 dev  正式 pro
+export const mode = 'dev' // 测试 dev  正式 pro
 
 export const devToken =
   'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ'

src/views/hotel/components/video-box.vue

@@ -1,5 +1,57 @@
 <template>
   <div class="video-box">
+	  <div class="left-nav">
+	    <div v-if="showNav" class="ul">
+	      <div
+	        class="li"
+	        :class="{ active: current == index }"
+	        v-for="(item, index) in navList"
+	        :key="index"
+	        @click="handleNav(index)"
+	      >
+	        <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span>
+	        <span v-else>
+	          {{ item.dictLabel }}
+	        </span>
+	      </div>
+	  	<div
+	  	 :class="{ active: current == 3 }"
+	  	@click="handleNav(3)" class="li">
+	  		<span>自定义</span>
+	  	</div>
+	    </div>
+	    <div class="bom-box">
+	      <Title2 title="检索" />
+	      <div class="search-box">
+	        <el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
+	        <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
+	      </div>
+	  
+	      <div class="tree-box">
+	        <div class="tree-item" v-for="(item, i) in regionList" :key="i">
+	          <div class="tree-item__node" @click="handleRegions(i)">
+	            <img
+	              class="tree-item__icon"
+	              :class="{ 'tree-item__icon-up': item.show }"
+	              src="@/assets/images/arrow-down.png"
+	              alt=""
+	            />
+	            <span class="tree-item__name">{{ item.regions }}</span>
+	          </div>
+	          <div v-if="item.show" class="tree-item__child">
+	            <div
+	              class="tree-item__child-item"
+	              v-for="(resource, x) in item.videoResources"
+	              :key="x"
+	              @click="handleCamera(resource.cameraIndexCode,resource)"
+	            >
+	              {{ resource.cameraName || resource.cameraIndexCode }}
+	            </div>
+	          </div>
+	        </div>
+	      </div>
+	    </div>
+	  </div>
 	  <div v-if="videoLog == 1" class="video-wrapper">
 	    <div class="video-list">
 			<div class="empty-box" v-if="videoList.length==0&&cond">
@@ -124,6 +176,7 @@
       <el-pagination background layout="prev, pager, next" :total="1000" />
     </div> -->
   </div>
+  <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode"  :isCollect="isCollect" :src="videoSrc" />
 </template>
 
 <script setup>
@@ -138,6 +191,7 @@
 	import pubSub from 'pubsub-js'
 	import Hls from 'hls.js'
 	import emptyIco from '@/assets/images/n-icon.png'
+	import { debounce } from 'lodash'
 	const Z00M_IN = 'ZOOM_IN' // 焦距变大
 	const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
 	const UP = 'UP' // 上转
@@ -158,12 +212,15 @@
 	let total = ref(0)
 	let loading = ref(false)
 	let command = ref('')
+	let cameraName = ref('')
+	let regionList = ref()
 	let params = reactive({
 	    businessScenicArea: "",
 	    cameraName: "",
 		pageNum: 1,
 		pageSize: 6,
 	})
+	let show = ref(false)
 	const onMonitorChange = () => {
 	  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
 	    params.businessScenicArea = data.name
@@ -214,6 +271,18 @@
 	  hlsRef.destroy()
 	  initVideo()
 	}
+	let isCollect = ref(0)
+	let videoSrc = ref('')
+	const handleCamera = async (itemCode,resource) => {
+	  show.value = true
+	  let res = await getPreviewUrlApi({
+	    type: 'hls',
+	    cameraIndexCode:itemCode
+	  })
+	  cameraIndexCode.value = itemCode;
+	  isCollect.value = resource.isCollect
+	  videoSrc.value = res.data.url
+	}
 	//清除 hls
 	const clearHlsRefs = () => {
 	  if (hlsRefs.length > 0) {
@@ -240,7 +309,6 @@
 			   videoList.value = res.data
 			   cond.value = true
 			   total.value = res.total
-			   console.log(videoList.value,'酒店视频列表')
 			   nextTick(() => {
 				   if(!videoList.value.length) return false
 			     videoList.value.forEach(async (x, index) => {
@@ -313,11 +381,35 @@
 	    })
 	  }, 3000)
 	}
+	const getVideoRegions = async () => {
+		console.log(params.businessScenicArea,7788888)
+	  let res = await getVideoRegionsApi({
+	    cameraName: cameraName.value,
+	    businessScenicArea: params.businessScenicArea
+	  })
+	  regionList.value = res.data
+	  regionList.value[0].show = true
+	  console.log(regionList.value, ' regionList.value')
+	}
+	const handleRegions = (e) => {
+	  regionList.value[e].show = !regionList.value[e].show
+	}
+	const onInput = debounce((e) => {
+	  getVideoRegions()
+	}, 500)
+	let hotelChange = null;
 	onMounted(()=>{
+		hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
+			params.businessScenicArea = data.name
+			getVideoRegions()
+		  console.log(data,'777888888')
+		})
 		onMonitorChange()
+		
 	})
 	onUnmounted(() => {
 	  clearHlsRefs()
+	  if (hotelChange) pubSub.unsubscribe(hotelChange)
 	  if (timer) clearInterval(timer)
 	  pubSub.unsubscribe(monitorChange)
 	})
@@ -365,6 +457,9 @@
 	  }
 	}
   .video-box {
+	
+	display: flex;
+	flex: 1;
     flex: 1;
     height: vh(950);
     margin-top: vh(120);
@@ -379,7 +474,7 @@
       gap: vw(6);
       .video-item {
         position: relative;
-        width: vw(610);
+        width: vw(210);
         height: vh(380);
         padding: vh(12) vw(12);
         box-sizing: border-box;
@@ -438,7 +533,7 @@
     }
     &-item {
       position: relative;
-      width: vw(810);
+      width: vw(720);
       height: vh(380);
       padding: vh(10) vw(10);
       background-image: url('/src/assets/images/item-primary.png');
@@ -708,4 +803,132 @@
       }
     }
 }
+ .left-nav {
+    margin: 0 vw(8);
+    width: vw(250);
+    background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
+    .bom-box {
+      margin-top: vh(20);
+      .search-box {
+        border-radius: vw(2);
+        height: vh(36);
+        border: 1px solid #0096ff;
+        margin: vh(10) auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .search-icon {
+          width: vw(20);
+          height: vw(20);
+          margin-right: vw(10);
+        }
+      }
+
+      .tree-box {
+        position: relative;
+        height: vh(750);
+        padding: 0 vw(20);
+        overflow-y: auto;
+        overflow-x: hidden;
+        /* 滚动条整体样式 */
+        &::-webkit-scrollbar {
+          width: vw(4); /* 滚动条的宽度 */
+        }
+        /* 滚动条轨道 */
+        &::-webkit-scrollbar-track {
+          background: 'transparent'; /* 轨道的背景色 */
+        }
+        /* 滚动条滑块 */
+        &::-webkit-scrollbar-thumb {
+          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+          border-radius: 5px; /* 滑块的圆角 */
+        }
+        .tree-item {
+          cursor: pointer;
+          position: relative;
+          padding-top: vh(20);
+          // border-left: vw(2) solid #37d8fc;
+          &:nth-child(1) {
+            padding-top: 0;
+          }
+          &__node {
+            position: relative;
+            display: flex;
+            align-items: flex-start;
+          }
+          &__icon {
+            margin-left: vw(-8);
+            width: vw(16);
+            height: auto;
+          }
+          &__icon-up {
+            @extend .tree-item__icon;
+            transform: rotate(180deg);
+          }
+          &__name {
+            padding: 0 vw(20);
+            display: block;
+            font-weight: 400;
+            font-size: vw(15);
+            color: #ffffff;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+          &__child {
+            position: relative;
+            margin-top: vh(20);
+            margin-left: vw(20);
+            // border-left: vw(2) solid #37d8fc;
+          }
+          &-top__icon {
+            position: absolute;
+            left: vw(-8);
+            top: vh(0);
+            width: vw(16);
+            height: vw(16);
+          }
+          &-bottom__icon {
+            position: absolute;
+            left: vw(-8);
+            bottom: vh(0);
+            width: vw(16);
+            height: vw(16);
+          }
+          &__child-item {
+            padding: vh(0) vw(20) vh(20) vw(20);
+            cursor: pointer;
+            color: rgb(192,216,254);
+            font-weight: 400;
+            font-size: vw(15);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: flex;
+            align-items: flex-start;
+            &:nth-last-of-type(1) {
+              padding: vh(0) vw(20);
+            }
+          }
+        }
+      }
+    }
+}
+ //背景色设置为透明
+  :deep(.el-input__wrapper) {
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    box-shadow: none;
+  }
+  //输入框颜色
+  :deep(.el-input__inner) {
+    background-color: rgba(0, 0, 0, 0) !important;
+    color: #fff;
+  }
+  :deep(.el-input__inner) {
+    height: vh(36);
+    font-size: vw(16);
+    color: #ffffff;
+  }
 </style>

src/views/vehicles/components/big-map.vue

@@ -0,0 +1,595 @@
+<template>
+  <div class="dialog">
+    <!-- <el-dialog v-model="modelValue" :modal="false" :close-on-click-modal="false" :close-on-press-escape="false"	 align-center > -->
+      <!-- <img class="close" src="@/assets/images/close.png" @click="handleClose" /> -->
+      <div class="flex">
+        <div class="list-box">
+          <title2 title="车船" />
+          <el-input
+            v-model="keyword"
+            clearable
+            placeholder="车牌号"
+			@input="onInput"
+          >
+          </el-input>
+          <ul class="tabs">
+            <li
+              class="tab-item"
+              :class="{ 'tab-item__active': tabsIndex == index }"
+              v-for="(item, index) in tabs"
+              :key="index"
+              @click="handleTab(index)"
+            >
+              {{ item.label }}({{ item.leng }})
+            </li>
+          </ul>
+          <ul class="list">
+            <li
+              class="item"
+              :class="{ item__active: current === index }"
+              v-for="(item, index) in listTabs"
+              :key="index"
+              @click="handleItem(item, index)"
+            >
+              <p class="item__label">{{ item.licenseNumber }}</p>
+              <div class="item__value"
+                >{{ item.speed }}km/h 
+                <img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" />
+                <img v-else src="@/assets/images/unengine.png" alt="" />
+                <div
+                  :class="{
+                    'item__hot--primary': item.status == '行驶',
+                    'item__hot--info': item.status != '行驶',
+                    'item__hot--active': current === index
+                  }"
+                >
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div id="big-car-ship" class="big-car-ship" />
+      </div>
+    <!-- </el-dialog> -->
+  </div>
+</template>
+
+<script setup>
+  import { getGpsListApi, getGpsStatusListApi } from '@/api/scenic'
+
+  import closeIcon from '@/assets/images/close.png'
+
+  import carIcon from '@/assets/images/car.png'
+  import carStopIcon from '@/assets/images/car-stop.png'
+  import carOfflineIcon from '@/assets/images/car-offline.png'
+
+  import shipIcon from '@/assets/images/ship.png'
+  import shipStopIcon from '@/assets/images/ship-stop.png'
+  import shipOfflineIcon from '@/assets/images/ship-offline.png'
+
+  import icon13 from '@/assets/images/icon-13.png'
+  import icon14 from '@/assets/images/icon-14.png'
+  import icon15 from '@/assets/images/icon-15.png'
+  import icon16 from '@/assets/images/icon-16.png'
+  import icon17 from '@/assets/images/icon-17.png'
+  import icon18 from '@/assets/images/icon-18.png'
+  import icon19 from '@/assets/images/icon-19.png'
+  import icon20 from '@/assets/images/icon-20.png'
+  
+  import { useMap } from '@/hooks/map'
+import PubSub from 'pubsub-js'
+  import { debounce } from 'lodash'
+  import { useScenicStore } from '@/stores/scenic'
+  const scenicStore = useScenicStore()
+  const { map, marker, initMap, addMarker } = useMap()
+  
+  let props = defineProps({
+    scenicSpotId: {
+      type: String,
+      default: ''
+    },
+    carList: {
+      type: Array,
+      default: () => []
+    },
+    shipList: {
+      type: Array,
+      default: () => []
+    }
+  })
+  let modelValue = defineModel()
+
+  let lat = ref('')
+  let lng = ref('')
+  let scenicSpotId = ref('')
+  let keyword = ref('')
+  let active = ref(0)
+  let current = ref('')
+  let scenicChange = null
+  let list = ref([])
+  let listTabs = ref([])
+  let carOverlays = ref([])
+  let shipOverlays = ref([])
+  let lastInfoBox = ref(null)
+  let infoBox = ref(null)
+  let currentMarker = ref()
+  let tabsIndex = ref(0)
+  let tabs = ref([
+    {
+      label: '所有',
+      value: '',
+      number: 0
+    },
+    {
+      label: '行驶',
+      value: '行驶',
+      number: 0
+    },
+    {
+      label: '静止',
+      value: '静止',
+      number: 0
+    },
+    {
+      label: '离线',
+      value: '离线',
+      number: 0
+    }
+  ])
+  watch(
+	()=>[scenicStore.vehicleData,tabsIndex.value,map.value],
+	(val)=>{
+		list.value = val[0].map
+		if(val[0].map){
+			console.log(val[0],222222222)
+			tabs.value[0].leng = val[0].all.length
+			tabs.value[1].leng = val[0].moving.length
+			tabs.value[2].leng = val[0].offline.length
+			tabs.value[3].leng = val[0].still.length
+		}
+		if(val[1]==0){
+			listTabs.value = val[0].all
+		}
+		if(val[1]==1){
+			listTabs.value = val[0].moving
+		}
+		if(val[1]==2){
+			listTabs.value = val[0].offline
+		}
+		if(val[1]==3){
+			listTabs.value = val[0].still
+		}
+	},
+	{ immediate: true }
+  )
+  
+  watch(
+    () => [list.value,map.value],
+    (val) => {
+      if (val[0]&&val[1]) {
+		  if(carOverlays.value.length){
+			 
+			  for(let i=0;i<carOverlays.value.length;i++){
+				  for(let j=0;j<list.value.length;j++){
+					  let carOverlay = carOverlays.value[i]
+					  let car = list.value[j]
+					  if (carOverlay && car && carOverlays.value[i].sim == car.sim) {
+						  
+						  carOverlays.value[i].setPosition({
+						      lng: car.lng,
+						      lat: car.lat
+						  })
+						  continue
+					  }
+					
+				  }
+				
+
+			  }
+			  // 更新车辆infobox位置和内容
+			  for (let i = 0; i < list.value.length; i++) {
+			    if (
+			      currentMarker.value &&
+			      infoBox.value &&
+			      list.value[i].sim == currentMarker.value.sim
+			    ) {
+			      console.log('变化了')
+			      let { lng, lat } = list.value[i]
+			      infoBox.value.setContent(setHtml(list.value[i]))
+			      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
+			    }
+			  }
+			
+			  
+		  }else{
+			list.value.map((item, i) => {
+				console.log(item,'item')
+			  if (item.lng && item.lat) {
+			    if (item.status == '行驶') {
+			      addMarker(shipIcon, [item.lng, item.lat], [36, 50])
+			    }
+			    if (item.status == '离线') {
+			      addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
+			    }
+			    if (item.status == '静止') {
+			      addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
+			    }
+			    marker.value.addEventListener('click', (e) => {
+					e.sim = e.target.sim
+					currentMarker.value = carOverlays.value.find(
+					  (item) => item && item.sim == e.target.sim
+					)
+					let obj = scenicStore.vehicleData.all.find((item) => item.sim == e.target.sim)
+			        setInfoBox(e.latLng, obj)
+			    })
+			    marker.value.sim = item.sim
+			    carOverlays.value[i] = marker.value
+			  }
+			})  
+		  }
+		
+      }
+    },
+    { immediate: true }
+  )
+  const timestampToYMD = (timestamp) => {
+    const date = new Date(timestamp * 1000)
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+    return `${year}-${month}-${day}`
+  }
+
+  const setHtml = (data) => {
+    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 style="line-height:1.4;"> ${data?.address} </p> </div>
+                </div>
+            </div>`
+  }
+
+  const setInfoBox = (e, data) => {
+    if (!infoBox.value) {
+		console.log(1111,infoBox.value,'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)
+      })
+      infoBox.value.addEventListener('close', () => {
+        currentMarker.value = null
+      })
+    } else {
+		console.log(222,infoBox.value,'infoBox.value')
+      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 && item.sim == e.sim)
+    setInfoBox(new BMapGL.Point(e.lng, e.lat), e)
+  }
+
+  const handleTab = (index) => {
+    if (tabsIndex.value == index) return
+    tabsIndex.value = index
+    // getGpsList()
+  }
+
+  const handleClose = () => {
+    carOverlays.value = []
+    shipOverlays.value = []
+    map.value = null
+    current.value = ''
+    infoBox.value = null
+    lastInfoBox.value = null
+    modelValue.value = false
+  }
+
+  const getGpsList = async () => {
+    let res = await getGpsListApi({
+      keyword: keyword.value,
+      scenicSpotId: scenicSpotId.value,
+      status: tabs.value[active.value].value
+    })
+	console.log(res,'statusRes')
+
+    list.value = res.data.list
+	//默认
+	lat.value = list.value[0].lat
+	lng.value = list.value[0].lng
+    let statusRes = await getGpsStatusListApi({
+      scenicSpotId: scenicSpotId.value
+    })
+    tabs.value[0].number = statusRes.data['全部']
+    tabs.value[1].number = statusRes.data['行驶']
+    tabs.value[2].number = statusRes.data['静止']
+    tabs.value[3].number = statusRes.data['离线']
+  }
+
+  const onInput = debounce((e) => {
+	  console.log(e)
+	  PubSub.publish('keywordChange', e)
+    // getGpsList()
+  }, 500)
+
+  onMounted(() => {
+	  initMap('big-car-ship', 109.581763,31.047573, 15)
+	  
+		
+  })
+  onUnmounted(() => {
+    PubSub.unsubscribe(scenicChange)
+  })
+</script>
+
+<style lang="scss">
+  .infoBox {
+    > img {
+      width: vw(40) !important;
+      height: auto;
+      z-index: 9999;
+    }
+  }
+  .marker {
+    &-box {
+      position: relative;
+      width: vw(700);
+      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%;
+      height: vh(36);
+      padding-left: vw(16);
+      font-weight: 600;
+      font-size: vw(16);
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      background-image: url('@/assets/images/marker-title.png');
+      background-size: 100% 100%;
+    }
+    &-header {
+      padding: vh(12) vw(14);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &-sim {
+      font-weight: 600;
+      font-size: vw(16);
+      color: #ffffff;
+    }
+    &-tag {
+      padding: vh(5) vw(8);
+      font-weight: 400;
+      font-size: vw(13);
+      color: #0096ff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #0b4599;
+      border-radius: vw(23);
+      border: vw(1) solid #0096ff;
+    }
+    &-line {
+      width: 100%;
+      height: vw(1);
+      background-color: #134fa4;
+    }
+    &-row {
+      padding: vh(10) vw(16);
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #134fa4;
+    }
+    &-col {
+      flex: 1;
+      display: flex;
+      align-items: flex-start;
+      > img {
+        width: vw(32);
+        height: vw(32);
+        margin-right: vw(10);
+      }
+      > p {
+        flex: 1;
+        font-weight: 400;
+        font-size: vw(24);
+        color: #ffffff;
+        line-height: vh(20);
+      }
+    }
+  }
+</style>
+<style scoped lang="scss">
+  :deep(.el-input__inner) {
+    height: vh(32);
+    color: #fff;
+  }
+  :deep(.el-input__wrapper) {
+    margin-top: vh(8);
+    font-size: vw(16);
+    border-radius: vw(2);
+    border: vw(1) solid #0096ff;
+    box-shadow: none !important;
+    background: rgba(217, 217, 217, 0);
+  }
+  .tabs {
+    display: flex;
+    border-bottom: vw(1) solid #0a4190;
+    .tab-item {
+      cursor: pointer;
+      position: relative;
+      flex: 1;
+      height: vh(44);
+      font-weight: 600;
+      font-size: vw(14);
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .tab-item__active {
+      color: #00d0ff;
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: vw(40);
+        height: vh(2);
+        background: #00d0ff;
+      }
+    }
+  }
+  :deep(.BMap_cpyCtrl) {
+    display: none;
+  }
+  :deep(.anchorBL) {
+    display: none;
+  }
+  .dialog {
+	  width: vw(3140);
+	  padding: vw(8);
+	  background-image: url('@/assets/images/dialog-bg.png') !important;
+	  background-size: 100% 100%;
+	  margin: 0 auto;
+	  height:vh(930);
+	  margin-top:vh(130);
+    :deep(.el-dialog) {
+      width: vw(3140);
+      padding: vw(8);
+      background-image: url('@/assets/images/dialog-bg.png') !important;
+      background-size: 100% 100%;
+    }
+    :deep(.el-dialog__header) {
+      padding-bottom: 0 !important;
+    }
+  }
+  .list-box {
+    margin-right: vw(10);
+    background-image: url('@/assets/images/bg-3.png');
+    background-size: 100% 100%;
+  }
+  .list {
+    width: vw(400);
+    height: vh(790);
+    padding-top: vh(10);
+    overflow-y: auto;
+    box-sizing: border-box;
+    /* 滚动条整体样式 */
+    &::-webkit-scrollbar {
+      width: vw(10); /* 滚动条的宽度 */
+    }
+    /* 滚动条轨道 */
+    &::-webkit-scrollbar-track {
+      background: 'transparent'; /* 轨道的背景色 */
+    }
+    /* 滚动条滑块 */
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+      border-radius: 5px; /* 滑块的圆角 */
+    }
+    .item {
+      cursor: pointer;
+      font-weight: 400;
+      font-size: vw(14);
+      height: vh(30);
+      padding: 0 vw(20);
+      color: #0096ff;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      &__value {
+        display: flex;
+        align-items: center;
+        > img {
+          width: vw(16);
+          height: auto;
+          margin: 0 vw(10);
+        }
+      }
+      &__hot {
+        width: vw(8);
+        height: vw(8);
+        border-radius: 50%;
+        &--primary {
+          @extend .item__hot;
+          background-color: #02f9fa;
+        }
+        &--info {
+          @extend .item__hot;
+          background-color: #055498;
+        }
+        &--active {
+          @extend .item__hot;
+          background-color: #ffffff !important;
+        }
+      }
+      &__active {
+        color: #fff !important;
+        background-color: #055498;
+      }
+    }
+  }
+  .big-car-ship {
+    flex: 1;
+    height: vh(910);
+  }
+  .close {
+    cursor: pointer;
+    position: absolute;
+    right: vw(20);
+    top: vw(20);
+    width: vw(60);
+    z-index: 9999;
+  }
+</style>

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>