417

src/api/home.js

@@ -15,6 +15,22 @@ export function getColletListApi(data) {
     data
   })
 }
+// 自定义视频列表
+export function getColletDiyListApi(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/video/diyList',
+    method: 'post',
+    data
+  })
+}
+// 自定义视频列表收藏
+export function getColletDiyApi(data) {
+  return request({
+	url: '/fjtcc-api/api/largeScreen/video/diy',
+	method: 'get',
+	params: data
+  })
+}
 // 核心景区视频
 export function getVideoListApi(data) {
   return request({

src/components/HlsPlayer/index.vue

@@ -75,7 +75,7 @@
         immediate: true
       },
       url(newUrl) {
-		  console.log(newUrl,'77777777777777777777777777777777')
+		  // console.log(newUrl,'77777777777777777777777777777777')
         if (newUrl && this.isActive) {
           this.initializePlayer()
         }
@@ -162,7 +162,6 @@
         if (this.hls) {
           this.immediateCleanup()
         }
-
         this.hls = new Hls({
           // 内存优化配置
           maxBufferSize: 0, // 降低缓冲区大小（15MB）
@@ -200,6 +199,12 @@
           this.safePlay()
         })
         this.hls.on(Hls.Events.ERROR, (event, data) => {
+			console.log('核心视频错误',data.type)
+		  // this.hls.startLoad(); //重连
+		    if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
+		      console.error('缓冲停滞错误，尝试重新加载视频');
+		      this.hls.startLoad(); // 尝试重新加载视频
+		    } 
           this.handleHlsError(data)
         })
 
@@ -207,7 +212,31 @@
           this.cleanupNetworkResources()
         })
       },
+	initVideo() {
+	    this.beforeDestroy()
+		this.hls = new Hls({
+		  maxBufferLength: 30, // 最大缓冲长度（秒）
+		  maxMaxBufferLength: 15, // 缓冲区长度的上限
+		  maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+		})
+	    this.hls.attachMedia(this.video)
+	    this.hls.loadSource(this.url)
 	    
+	    // 事件处理
+	    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+	      this.loading = false
+	      this.retryCount = 0
+	      this.safePlay()
+	    })
+	    this.hls.on(Hls.Events.ERROR, (event, data) => {
+	      this.hls.startLoad(); //重连
+	      this.handleHlsError(data)
+	    })
+	    
+	    this.hls.on(Hls.Events.BUFFER_EOS, () => {
+	      this.cleanupNetworkResources()
+	    })
+	  },
       cleanupNetworkResources() {
         // 清理已播放的缓冲数据
         if (this.hls && this.video) {

src/components/Line/index.vue

@@ -1,4 +1,5 @@
 <template>
+	<div style="position: relative;">
 		<div
 		  :id="id"
 		  :style="{
@@ -6,6 +7,10 @@
 		    height: styleUtil.px2vh(height)
 		  }"
 		/>
+		<div v-if="condShow==0" class="nYong-du">加载中...</div>
+		<div v-if="condShow==1" class="nYong-du">暂无数据</div>
+	</div>
+	
 </template>
 <script setup>
   import styleUtil from '@/utils/styleUtil'
@@ -43,7 +48,7 @@
 
   let timer = null
   let currentIndex = -1
-
+  let condShow = ref(0)
   let params = null
   var defaultColors = ['#06E2FF', '#02FFB8', '#FF465F', '#FFCA36', '#9A4BFC', '#044EFF']
   const defaultSeriesConfig = (index) => {
@@ -162,13 +167,21 @@
     }
     setOption(params)
   }
+  let aIndex = 1
   watch(
     [() => props.data, () => props.xAxisData],
     (val) => {
+	  aIndex+=1
+	  if(aIndex>=3&&!val[0].length){
+		  condShow.value = 1
+	  }
       if (val[0].length > 0 && val[1].length > 0) {
+		  condShow.value = 2
         setTimeout(() => {
           init()
         }, 1000)
+      }else{
+		  
 	  }
     },
     { immediate: true }
@@ -203,4 +216,17 @@
   //   timer = undefined
   // }
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+	.nYong-du{
+		position:absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		font-size:vw(18);
+		color:#999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

src/layout/components/CoreVideo/index.vue

@@ -62,6 +62,7 @@
     }
   )
 
+
 let isCollect = ref(0)
   let list = ref([])
   let src = ref('')
@@ -84,7 +85,7 @@ let isCollect = ref(0)
       postVideoRemainApi({
         cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
       })
-    }, 4000)
+    }, 1500)
   }
 
   const getPreviewUrl = async (code) => {
@@ -101,13 +102,8 @@ let isCollect = ref(0)
       pageSize: 5
     })
     list.value = res.data
-	if(list.value.length){
 	postVideoRemain()
-	}else{
-		console.log('清除定时器')
-		//清除定时器
 	if (timer) clearInterval(timer)
-	}
 	// console.log(list.value,'list.valuelist.valuelist.valuelist.value')
     // nextTick(() => {
     //   list.value.forEach(async (item, index) => {
@@ -129,7 +125,14 @@ let isCollect = ref(0)
     //   })
     // })
   }
-
+  watch(
+    () => list.value,
+    (val) => {
+      if(val.length){
+  		  postVideoRemain()
+  	  }
+    }
+  )
   // 释放hls实例
   const clearHlsRefs = () => {
     if (hlsRefs.length > 0) {

src/layout/components/Correspondence/index.vue

@@ -64,6 +64,14 @@
         </div>
       </div>
     </el-dialog>
+	<el-dialog :title="'三峡之巅广播'" center v-model="dialogTableVisible2">
+	  <div class="bom-box bom-box2">
+	    <div class="table2">
+			<!-- <div class="header-title">三峡之巅广播</div> -->
+			<iframe style="width:100%;height:100%;" src="http://192.168.0.2:81/"></iframe>
+	    </div>
+	  </div>
+	</el-dialog>
   </div>
 </template>
 
@@ -71,6 +79,7 @@
   import { getComDeptsApi, getComDeptUsersApi, getComRecordApi } from '@/api/common'
   let deptsList = ref([])
   let dialogTableVisible = ref(false)
+  let dialogTableVisible2 = ref(false)
   const getComDepts = async () => {
     let res = await getComDeptsApi()
     deptsList.value = res.data
@@ -83,7 +92,8 @@
   let gridData = ref([])
   let gridTitle = ref('')
   const goItc = () => {
-    location.href="http://192.168.0.2:81/";
+	  dialogTableVisible2.value = true
+    // location.href="http://192.168.0.2:81/";
   }
   const handleDepsUser = async (id, item) => {
     gridTitle.value = item.name
@@ -99,6 +109,13 @@
 </script>
 
 <style lang="scss" scoped>
+	:deep(.el-dialog__headerbtn .el-dialog__close){
+		color:#fff;
+		font-size:40px;
+		position:relative;
+		top:15px;
+		right:15px;
+	}
   :deep(.el-dialog) {
     background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
     background-size: 100% 100%;
@@ -124,7 +141,23 @@
     background-image: url('@/assets/images/bg-1.png');
     background-size: 100% 100%;
   }
+  .bom-box2{
+	  // margin-top:vh(10);
+	  min-width:vw(900);
+	  height:vh(800);
+	  .header-title{
+		  font-size:vw(24);
+		  color:#fff;
+		  text-align:center;
+		  font-weight:bold;
+		  margin-bottom:vh(20);
+	  }
+  }
   .bom-box {
+	  .table2{
+		  width:100%;
+		  height:vh(740);
+	  }
     .table {
       width: 100%;
       margin-top: vh(5);

src/layout/components/Header/index.vue

@@ -180,7 +180,7 @@
   
   // 点击导航
   const handleNav = (item) => {
-	  // console.log(item.path,'测试一下 ')
+	  console.log(item,router.currentRoute.value.path,'测试一下 ')
     if (isSkip.value) {
       router.push(item.path)
     } else {
@@ -219,8 +219,10 @@
     let res = await getSpotListApi()
     spotList.value = res.data
   }
+  let monitorDefaultData = ref(null)
   // 设置当前路由导航栏
   const setNav = async () => {
+	  console.log(monitorDefaultData.value,'setNav 测试 ++++++++++++')
     navLeft.value = []
     navRight.value = []
     otherLeftNav.value = []
@@ -294,8 +296,16 @@
           },
           ...spotRes.data
         ]
+		if(monitorDefaultData.value){
+			current.value = monitorDefaultData.value.id
+			title.value = monitorDefaultData.value.name
+			pubSub.publish('monitorChange', monitorDefaultData.value)
+		}else{
 			current.value = navLeft.value[0].id
 			title.value = navLeft.value[0].name
+		}
+		
+		
         break
       case '/sceneTesting':
         title.value = '三峡之巅-安全检测'
@@ -362,7 +372,26 @@
     },
     { immediate: true }
   )
-  onMounted(() => {
+  onMounted(async() => {
+	// 获取查询参数
+    
+	
+	PubSub.subscribe('navToChange', (msg, data) => {
+		monitorDefaultData.value = data
+		console.log(monitorDefaultData.value,'monitorDefaultData.valuemonitorDefaultData.value')
+		// getSpotListApi().then((res)=>{
+			// console.log(res.data[0],'spotResspotResspotRes')
+			// router.push('/monitor')
+			// router.currentRoute.value.path = '/monitor'
+			// setTimeout(()=>{
+			// 	current.value = res.data[1].id
+			// 	handleNav(res.data[1])
+			// 	pubSub.publish('monitorChange', res.data[1])
+			// },2000)
+		// })
+		
+		
+	})
     getWeather()
     getSpotList()
     getCurrentDate()

src/utils/config.js

@@ -4,7 +4,7 @@ export const proBaseUrl = 'http://192.168.77.200'
 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/home/components/box-2.vue

@@ -6,13 +6,16 @@
           <div class="item">
             <div class="label">今年总游客数</div>
             <scroll-number :count="homeStore.visitorInfoData.total_count_this_year" prefix="1" />
+			<!-- -->
           </div>
           <div class="item">
             <div class="label">今⽇总游客数</div>
             <scroll-number :count="homeStore.visitorInfoData.total_count_today" prefix="2" />
+			<!--  -->
           </div>
           <div class="item">
             <div class="label">总在园人数</div>
+			<!--  -->
             <scroll-number
               :count="homeStore.visitorInfoData.total_count_today_within_three_hours"
               prefix="3"
@@ -295,13 +298,20 @@
       background-size: 100% 100%;
       .left {
         display: flex;
-        width: vw(740);
+        width: vw(840);
         margin-top: vh(20);
+		flex:1;
+		
       }
       .right {
         flex: 1;
         display: flex;
         margin-top: vh(20);
+		justify-content: center;
+		.item{
+			flex:1;
+			text-align:center;
+		}
       }
       .item {
         margin-right: vh(20);
@@ -326,6 +336,9 @@
           }
         }
       }
+	  .item:last-child{
+		  margin:0;
+	  }
       .countup-wrap {
         display: inline-block;
         width: vw(40);

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

@@ -42,6 +42,7 @@
 		    :data="congestionData"
 		    :xAxisData="congestionXAxisData"
 		  />
+        
         </div>
       </div>
       <div class="box">

src/views/home/components/jam-count.vue

@@ -1,6 +1,11 @@
 <!-- 拥堵次数占比 -->
 <template>
+	<div style="position: relative;">
 		<div class="jam-count" :id="id" />
+		<div v-if="condShow==0" class="nYong-du">加载中...</div>
+		<div v-if="condShow==1" class="nYong-du">暂无数据</div>
+	</div>
+
 </template>
 
 <script setup>
@@ -18,12 +23,18 @@
 
   let params = null
   const colorList = ['#FDC40A', '#FF5232', '#50F0A6']
-
+  let condShow = ref(0)
+  let aIndex = 1
   watch(
     () => props.list,
     (val) => {
+		aIndex+=1
+		if(aIndex>=3&&!val.length){
+		   condShow.value = 1
+		}
       if (val.length > 0) {
         setTimeout(() => {
+			condShow.value = 2
           init()
         }, 1000)
       }
@@ -127,6 +138,18 @@
 </script>
 
 <style scoped lang="scss">
+	.nYong-du{
+		position:absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		font-size:vw(18);
+		color:#999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
   .jam-count {
     width: vw(250);
     height: vh(150);

src/views/home/components/jam-duration.vue

@@ -1,6 +1,11 @@
 <template>
   <!-- 拥堵时长 -->
+  <div style="position:relative;">
 	  <div  class="jam" :id="id" />
+	  <div v-if="condShow==0" class="nYong-du">加载中...</div>
+	  <div v-if="condShow==1" class="nYong-du">暂无数据</div>
+  </div>
+	 
 </template>
 
 <script setup>
@@ -15,12 +20,18 @@
       default: () => []
     }
   })
-
+  let condShow = ref(0)
+  let aIndex = 1
   watch(
     () => props.list,
     (val) => {
+		aIndex+=1
+		if(aIndex>=3&&!val.length){
+		   condShow.value = 1
+		}
       if (val.length > 0) {
         setTimeout(() => {
+			condShow.value = 2
           init()
         }, 1000)
       }
@@ -190,6 +201,18 @@
 </script>
 
 <style scoped lang="scss">
+	.nYong-du{
+		position:absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		font-size:vw(18);
+		color:#999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
   .jam {
     width: vw(250);
     height: vh(160);

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

@@ -323,6 +323,27 @@
 			       hls.on(Hls.Events.MANIFEST_PARSED, () => {
 			         video.play()
 			       })
+				   hls.on(Hls.Events.ERROR, (event, data) => {
+					 console.error('HLS 播放器遇到错误:', data);
+					   // 根据错误类型进行处理
+					   // initVideo()
+					  if (data.fatal) {
+						switch (data.type) {
+						  case Hls.ErrorTypes.NETWORK_ERROR:
+							console.log('网络错误，尝试重新加载');
+							hls.startLoad();
+							break;
+						  case Hls.ErrorTypes.MEDIA_ERROR:
+							console.log('媒体错误，尝试修复');
+							hls.recoverMediaError();
+							break;
+						  default:
+							console.log('无法恢复的错误，销毁播放器');
+							hls.destroy();
+							break;
+						}
+					  }
+				   })
 			       hlsRefs.push(hls)
 			     })
 			   })
@@ -373,23 +394,31 @@
 	    })
 	  })
 	}
+	watch(
+	  () => videoList.value,
+	  (val) => {
+	    if (val.length) {
+	      postVideoRemain()
+	    }
+	  },
+	  { immediate: true }
+	)
 	// 更新视频
 	const postVideoRemain = async () => {
 	  timer = setInterval(() => {
 	    postVideoRemainApi({
 	      cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
 	    })
-	  }, 3000)
+	  }, 1500)
 	}
 	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
@@ -400,9 +429,10 @@
 	let hotelChange = null;
 	onMounted(()=>{
 		hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
+			cameraName.value = ''
 			params.businessScenicArea = data.name
 			getVideoRegions()
-		  console.log(data,'777888888')
+		  
 		})
 		onMonitorChange()
 		

src/views/monitor/components/box-1.vue

@@ -310,6 +310,7 @@
 
   onMounted(() => {
     monitorChange = PubSub.subscribe('monitorChange', (msg, data) => {
+		// console.log(data,'监听测试一下  反馈信息')
       scenicSpotId.value = data.scenicSpotId
       sendMessage(
         JSON.stringify({

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

@@ -1,7 +1,8 @@
 <template>
   <div class="box-2">
     <div class="left-nav">
-      <div v-if="showNav" class="ul">
+      <div v-if="showNav" >
+		  <div class="ul">
 			  <div
 			    class="li"
 			    :class="{ active: current == index }"
@@ -9,17 +10,20 @@
 			    :key="index"
 			    @click="handleNav(index)"
 			  >
-          <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span>
+			    <!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> -->
-          <span v-else>
+			    <span>
 			      {{ item.dictLabel }} 
 			    </span>
 			  </div>
 			  <div
-		 :class="{ active: current == 3 }"
+			   :class="{ active: current == navList.length }"
-		@click="handleNav(3)" class="li">
+			  @click="handleNav(navList.length)" class="li">
-			<span>自定义</span>
+			  	<span>收藏夹</span>
 			  </div>
 		  </div>
+       
+		
+      </div>
       <div class="bom-box">
         <Title2 title="检索" />
         <div class="search-box">
@@ -59,7 +63,7 @@
           class="video-item"
           v-for="(item, index) in videoList"
           :key="index"
-          @click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode)"
+          @click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode,item)"
         >
           <div class="video-item__inner">
             <div
@@ -125,6 +129,10 @@
             <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
             <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
           </div>
+		  <div class="action-item">
+		    <span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-if="thisVideo.isDiy==0">收藏</span>
+			<span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-else="thisVideo.isDiy==1">取消收藏</span>
+		  </div>
         </div>
       </div>
       <div class="video-right">
@@ -140,7 +148,7 @@
             class="item"
             v-for="(item, index) in videoList"
             :key="index"
-            @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo)"
+            @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
           >
             <div>
               <p class="item-title--primary">
@@ -166,7 +174,7 @@
 </template>
 
 <script setup>
-  import { getVideoListApi, getPreviewUrlApi,getColletListApi } from '@/api/home'
+  import { getVideoListApi, getPreviewUrlApi,getColletListApi,getColletDiyListApi,getColletDiyApi} from '@/api/home'
   import {
     getVideoTypeApi,
     getVideoRegionsApi,
@@ -225,7 +233,7 @@
       postVideoRemainApi({
         cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
       })
-    }, 1000)
+    }, 2000)
   }
 
   const initVideo = () => {
@@ -248,7 +256,7 @@
     })
   }
   const onInput = debounce((e) => {
-    getVideoRegions()
+    getVideoRegions('search')
   }, 500)
   const clearHlsRefs = () => {
     if (hlsRefs.length > 0) {
@@ -266,11 +274,9 @@
   const  getColletList = async () => {
 	clearHlsRefs()
 	params.businessVideoDisplayPosition = ''
-    let res = await getColletListApi(params)
+    let res = await getColletDiyListApi(params)
     videoList.value = res.data
-	if(res.data.length){
+	// postVideoRemain()
-		postVideoRemain()
-	}
     total.value = res.total
     nextTick(() => {
       initVideo()
@@ -285,7 +291,7 @@
     videoList.value = []
     total.value = 0
     current.value = e
-    if(e==3){
+    if(e==navList.value.length){
       getColletList()
     }else{
       getVideoList()
@@ -297,7 +303,9 @@
     hlsRef.destroy()
     initVideo()
   }
-  const handleItemVideo = (url, type, code) => {
+  let thisVideo = ref(null)
+  const handleItemVideo = (url, type, code,item) => {
+	thisVideo.value = item
     videoLog.value = 2
     cameraIndexCode.value = code
     setTimeout(() => {
@@ -359,8 +367,36 @@
     }
     pubSub.publish('videoCollect', id)
   }
+  const handleCollectAdd = async (id, status, index) => {
+    await getColletDiyApi({
+      cameraIndexCode:id,
+      isDiy: status == 0 ? 1 : 0
+    })
+	if(status==1){
+		thisVideo.value.isDiy=0
+		// videoList.value.forEach((item,index)=>{
+		// 	if(item.cameraIndexCode==thisVideo.value.cameraIndexCode){
+		// 		videoList.value.splice(index, 1);
+		// 	}
+		// })
+	}else{
+		thisVideo.value.isDiy=1
+	}
+	if(current.value==navList.value.length){
+	  getColletList()
+	}
+  }
+  watch(
+    () => videoList.value,
+    (val) => {
+      if (val.length) {
+		  // console.log(val,'数据更新 内容')
+        postVideoRemain()
+      }
+    },
+    { immediate: true }
+  )
   const getVideoList = async (val) => {
-
     try {
       if (loading.value) return
       loading.value = true
@@ -373,8 +409,10 @@
       let res = await getVideoListApi(params)
       total.value = res.total
       if (res.data.length > 0) {
-        postVideoRemain()
+        
         videoList.value = res.data
+		// console.log(videoList.value,'1111111111111111111111')
+		// postVideoRemain()
         nextTick(() => {
           videoList.value.forEach(async (x, index) => {
             const video = document.getElementById(`monitorVideo${index}`)
@@ -388,6 +426,30 @@
             hls.on(Hls.Events.MANIFEST_PARSED, () => {
               video.play()
             })
+			console.log(7778888)
+			 hls.on(Hls.Events.ERROR, (event, data) => {
+				 console.error('HLS 播放器遇到错误:', data);
+				 // initVideo()
+				   // 根据错误类型进行处理
+				  if (data.fatal) {
+					switch (data.type) {
+					  case Hls.ErrorTypes.NETWORK_ERROR:
+						console.log('网络错误，尝试重新加载');
+						hls.startLoad();
+						break;
+					  case Hls.ErrorTypes.MEDIA_ERROR:
+						console.log('媒体错误，尝试修复');
+						hls.recoverMediaError();
+						break;
+					  default:
+						console.log('无法恢复的错误，销毁播放器');
+						
+						hls.destroy();
+						break;
+					}
+				  }
+			 })
+			
             hlsRefs.push(hls)
           })
         })
@@ -411,17 +473,25 @@
       initVideo()
     }
   }
-  const getVideoRegions = async () => {
+  const getVideoRegions = async (search) => {
     let res = await getVideoRegionsApi({
       cameraName: cameraName.value,
       businessScenicArea: params.businessScenicArea
     })
     regionList.value = res.data
+	regionList.value[0].show = true
+	if(search=='search'){
+		regionList.value.forEach((item,index)=>{
+			item.show = true
+		})
+	}
+
     console.log(regionList.value, ' regionList.value')
   }
   const onMonitorChange = () => {
 
     monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
+		cameraName.value = ''
 		current.value = 0
       params.businessScenicArea = data.scenicSpotId
       params.pageNum = 1
@@ -473,6 +543,9 @@
       .pause {
         margin: 0 vw(10);
       }
+	  .item-sc{
+		  padding:vw(10);
+	  }
     }
   }
   //背景色设置为透明
@@ -617,22 +690,19 @@
       overflow-y: auto;
       overflow-x: hidden;
       /* 滚动条整体样式 */
+      
       &::-webkit-scrollbar {
-        width: vw(0); /* 滚动条的宽度 */
+        width: vw(4); /* 滚动条的宽度 */
       }
       /* 滚动条轨道 */
       &::-webkit-scrollbar-track {
-        background: #f1f1f1; /* 轨道的背景色 */
+        background: 'transparent'; /* 轨道的背景色 */
       }
       /* 滚动条滑块 */
       &::-webkit-scrollbar-thumb {
-        background: #888; /* 滑块的背景色 */
+        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
         border-radius: 5px; /* 滑块的圆角 */
       }
-      /* 当鼠标悬停在滚动条上时滑块的样式 */
-      &::-webkit-scrollbar-thumb:hover {
-        background: #555; /* 滑块的背景色 */
-      }
       .li {
         cursor: pointer;
         width: vw(250);

src/views/scenic/components/big-map - 副本.vue

@@ -0,0 +1,612 @@
+<template>
+  <div class="dialog">
+    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
+      <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="设备号/设备名称SIM卡号"
+            @input="onInput"
+          >
+          </el-input>
+          <ul class="tabs">
+            <li
+              class="tab-item"
+              :class="{ 'tab-item__active': active == index }"
+              v-for="(item, index) in tabs"
+              :key="index"
+              @click="handleTab(index)"
+            >
+              {{ item.label }}({{ item.number }})
+            </li>
+          </ul>
+          <ul class="list">
+            <li
+              class="item"
+              :class="{ item__active: current === index }"
+              v-for="(item, index) in list"
+              :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.status == '行驶'" 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 { debounce } from 'lodash'
+
+  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 carOverlays = ref([])
+  let shipOverlays = ref([])
+  let lastInfoBox = ref(null)
+  let infoBox = ref(null)
+  let currentMarker = ref()
+  let tabs = ref([
+    {
+      label: '所有',
+      value: '',
+      number: 0
+    },
+    {
+      label: '行驶',
+      value: '行驶',
+      number: 0
+    },
+    {
+      label: '静止',
+      value: '静止',
+      number: 0
+    },
+    {
+      label: '离线',
+      value: '离线',
+      number: 0
+    }
+  ])
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val) {
+        setTimeout(() => {
+          initMap('big-car-ship', lng.value, lat.value, 15)
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+  watch(
+    () => [map.value, props.carList, props.shipList, modelValue.value],
+    () => {
+      if (map.value && modelValue.value) {
+        // 109.645729,31.041203
+        if (carOverlays.value.length > 0) {
+          for (let i = 0; i < carOverlays.value.length; i++) {
+            for (let j = 0; j < props.carList.length; j++) {
+              let carOverlay = carOverlays.value[i]
+              let car = props.carList[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 < props.carList.length; i++) {
+            if (
+              currentMarker.value &&
+              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(new BMapGL.Point(lng, lat))
+              currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
+              map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
+              break
+            }
+          }
+        } else {
+          props.carList.map((item, i) => {
+            if (item.lng && item.lat) {
+              if (item.status == '行驶') {
+                addMarker(carIcon, [item.lng, item.lat], [36, 50])
+              }
+              if (item.status == '离线') {
+                addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
+              }
+              if (item.status == '静止') {
+                addMarker(carStopIcon, [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 = props.carList.find((item) => item.sim == e.target.sim)
+                setInfoBox(e.latLng, obj)
+              })
+              marker.value.sim = item.sim
+              carOverlays.value[i] = marker.value
+            }
+          })
+        }
+
+        if (shipOverlays.value.length > 0) {
+          // 更新船只marker位置
+          for (let i = 0; i < shipOverlays.value.length; i++) {
+            for (let j = 0; j < props.shipList.length; j++) {
+              let shipOverlay = shipOverlays.value[i]
+              let ship = props.shipList[j]
+              if (shipOverlay && ship && shipOverlay.sim == ship.sim) {
+                shipOverlays.value[i].setPosition({
+                  lng: ship.lng,
+                  lat: ship.lat
+                })
+                continue
+              }
+            }
+          }
+          // 更新船只infobox位置和内容
+          for (let i = 0; i < props.shipList.length; i++) {
+            if (
+              currentMarker.value &&
+              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(new BMapGL.Point(lng, lat))
+              currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
+              map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
+              break
+            }
+          }
+        } else {
+          props.shipList.map((item, i) => {
+            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) => {
+                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)
+              })
+              marker.value.sim = item.sim
+              shipOverlays.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> ${data?.address} </p> </div>
+                </div>
+            </div>`
+  }
+
+  const setInfoBox = (e, data) => {
+    if (!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 {
+      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 (active.value == index) return
+    active.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
+    })
+    list.value = res.data.list
+    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) => {
+    getGpsList()
+  }, 500)
+
+  onMounted(() => {
+    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+      scenicSpotId.value = data.scenicSpotId
+      lat.value = data.lat
+      lng.value = data.lng
+      getGpsList()
+    })
+  })
+  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 {
+    :deep(.el-dialog) {
+      width: vw(2540);
+      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(330);
+    height: vh(690);
+    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(820);
+  }
+  .close {
+    cursor: pointer;
+    position: absolute;
+    right: vw(20);
+    top: vw(20);
+    width: vw(60);
+    z-index: 9999;
+  }
+</style>

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

@@ -8,33 +8,45 @@
           <el-input
             v-model="keyword"
             clearable
-            placeholder="设备号/设备名称SIM卡号"
+            placeholder="车牌号"
         	@input="onInput"
           >
           </el-input>
           <ul class="tabs">
             <li
               class="tab-item"
-              :class="{ 'tab-item__active': active == index }"
+              :class="{ 'tab-item__active': tabsIndex == index }"
               v-for="(item, index) in tabs"
               :key="index"
               @click="handleTab(index)"
             >
-              {{ item.label }}({{ item.number }})
+              {{ item.label }}({{ item.leng }})
             </li>
           </ul>
           <ul class="list">
             <li
               class="item"
               :class="{ item__active: current === index }"
-              v-for="(item, index) in list"
+              v-for="(item, index) in listTabs"
               :key="index"
               @click="handleItem(item, index)"
             >
+        	<div class="child-box">
         		<p class="item__label">{{ item.licenseNumber }}</p>
+        		<span  v-if="item.type == 0" class="label_img">
+        						  车
+        		</span>
+				<span  v-if="item.type == 2" class="label_img">
+								  直通车
+				</span>
+				<span class="label_img label_img_2" v-if="item.type == 1" >
+					  船
+        		</span>
+        	</div>
+           
               <div class="item__value"
                 >{{ item.speed }}km/h 
-                <img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
+                <img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" />
                 <img v-else src="@/assets/images/unengine.png" alt="" />
                 <div
                   :class="{
@@ -79,7 +91,8 @@
   import { useMap } from '@/hooks/map'
 
   import { debounce } from 'lodash'
-
+  import { useScenicStore } from '@/stores/scenic'
+  const scenicStore = useScenicStore()
   const { map, marker, initMap, addMarker } = useMap()
 
   let props = defineProps({
@@ -133,7 +146,8 @@
       number: 0
     }
   ])
-
+let listTabs = ref([])
+let tabsIndex = ref(0)
   watch(
     () => modelValue.value,
     (val) => {
@@ -146,58 +160,109 @@
     { immediate: true }
   )
   watch(
-    () => [map.value, props.carList, props.shipList, modelValue.value],
+    () => [scenicStore.vehicleData,tabsIndex.value,map.value],
-    () => {
+    (val) => {
-      if (map.value && modelValue.value) {
+		// console.log(scenicStore.vehicleData,'scenicStore.vehicleDatascenicStore.vehicleDatascenicStore.vehicleData')
-        // 109.645729,31.041203
+		list.value = val[0].map
-        if (carOverlays.value.length > 0) {
+		if(val[0].map){
-          for (let i = 0; i < carOverlays.value.length; i++) {
+			tabs.value[0].leng = val[0].all.length
-            for (let j = 0; j < props.carList.length; j++) {
+			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
+		}
+		return false
+   
+    },
+    { 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 = props.carList[j]
+  					  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 < props.carList.length; i++) {
+  			  for (let i = 0; i < list.value.length; i++) {
   			    if (
   			      currentMarker.value &&
   			      infoBox.value &&
-              props.carList[i].sim == currentMarker.value.sim
+  			      list.value[i].sim == currentMarker.value.sim
   			    ) {
   			      console.log('变化了')
-              let { lng, lat } = props.carList[i]
+  			      let { lng, lat } = list.value[i]
-              infoBox.value.setContent(setHtml(props.carList[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)
+  			      // map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
   			      break
   			    }
   			  }
-        } else {
+  			
-          props.carList.map((item, i) => {
+  			  
+  		  }else{
+  			list.value.map((item, i) => {
+  				console.log(item,'item')
   			  if (item.lng && item.lat) {
   			    if (item.status == '行驶') {
+  					if(item.type==1){
+						addMarker(shipIcon, [item.lng, item.lat], [36, 50])
+  						
+  					}else{
   						addMarker(carIcon, [item.lng, item.lat], [36, 50])
   					}
+  			    }
   			    if (item.status == '离线') {
+  					if(item.type==1){
+  						addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
+  					}else{
+  						
 						addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
   					}
+  			      
+  			    }
   			    if (item.status == '静止') {
+  			      
+  				  if(item.type==1){
+					  addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
+  				  }else{
   				  	addMarker(carStopIcon, [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 = props.carList.find((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
@@ -206,60 +271,6 @@
   			})  
   		  }
   		
-        if (shipOverlays.value.length > 0) {
-          // 更新船只marker位置
-          for (let i = 0; i < shipOverlays.value.length; i++) {
-            for (let j = 0; j < props.shipList.length; j++) {
-              let shipOverlay = shipOverlays.value[i]
-              let ship = props.shipList[j]
-              if (shipOverlay && ship && shipOverlay.sim == ship.sim) {
-                shipOverlays.value[i].setPosition({
-                  lng: ship.lng,
-                  lat: ship.lat
-                })
-                continue
-              }
-            }
-          }
-          // 更新船只infobox位置和内容
-          for (let i = 0; i < props.shipList.length; i++) {
-            if (
-              currentMarker.value &&
-              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(new BMapGL.Point(lng, lat))
-              currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
-              map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
-              break
-            }
-          }
-        } else {
-          props.shipList.map((item, i) => {
-            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) => {
-                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)
-              })
-              marker.value.sim = item.sim
-              shipOverlays.value[i] = marker.value
-            }
-          })
-        }
       }
     },
     { immediate: true }
@@ -278,7 +289,7 @@
                 <p class='marker-title'> ${data?.licenseNumber} </p>
                 <div class='marker-header'>
                 <span class='marker-sim'> ${data?.imei} </span>
-                <div class='marker-tag'> 
+                <div class='marker-tag' style="color:#fff;"> 
                   <div></div> 
                   ${data?.status}  （${data?.statusTimeDesc}）
                 </div>
@@ -298,14 +309,14 @@
                   <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 class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM/H </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 class='marker-col' > <img src='${icon20}' /> <p style="line-height:1.4;"> ${data?.address} </p> </div>
                 </div>
             </div>`
   }
@@ -339,9 +350,8 @@
   }
 
   const handleTab = (index) => {
-    if (active.value == index) return
+    if (tabsIndex.value == index) return
-    active.value = index
+    tabsIndex.value = index
-    getGpsList()
   }
 
   const handleClose = () => {
@@ -371,7 +381,7 @@
   }
 
   const onInput = debounce((e) => {
-    getGpsList()
+    PubSub.publish('keywordChange', e)
   }, 500)
 
   onMounted(() => {
@@ -379,7 +389,7 @@
       scenicSpotId.value = data.scenicSpotId
       lat.value = data.lat
       lng.value = data.lng
-      getGpsList()
+      // getGpsList()
     })
   })
   onUnmounted(() => {
@@ -388,6 +398,27 @@
 </script>
 
 <style lang="scss">
+	.child-box{
+		display:flex;
+		flex:1;
+	}
+	.item__label{
+		min-width:vw(110);
+		display:flex;
+		align-items: center;
+	}
+	.label_img{
+		background: #0063ff;
+		padding:vh(5) vw(10);
+		border-radius:vh(2);
+		color:#fff;
+		width:vw(90);
+		text-align:center;
+	
+	}
+	.label_img_2{
+		background: rgba(2, 249, 250, 0.5);
+	}
   .infoBox {
     > img {
       width: vw(40) !important;
@@ -588,7 +619,7 @@
         }
         &--active {
           @extend .item__hot;
-          background-color: #ffffff !important;
+          // background-color: #ffffff !important;
         }
       }
       &__active {

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

@@ -20,7 +20,7 @@
       </div>
     </div>
     <div class="main">
-		<!-- <div @click="hanldeToDetails" class="look-btn">查看详情</div> -->
+		<div @click="hanldeToDetails" class="look-btn">查看详情</div>
       <iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
       <iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
       <iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
@@ -103,14 +103,14 @@
 <script setup>
   import countup from 'vue-countup-v3'
   import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
-
+  import { getSpotListApi } from '@/api/sentiment'
   import { useRouter } from 'vue-router'
 
   import { useScenicStore } from '@/stores/scenic'
 
   import { useMap } from '@/hooks/map'
   import {getPreviewUrlApi} from "@/api/home.js";
-
+import pubSub from 'pubsub-js'
   const router = useRouter()
   const scenicStore = useScenicStore()
   const { initMap, addMarker, map, marker } = useMap()
@@ -126,8 +126,13 @@
   const handleMore = () => {
     router.push('/workOrder')
   }
-  const hanldeToDetails = ()=>{
+  let hrefItem = ref(null)
-	  router.push('/traffic')
+  const hanldeToDetails = async()=>{
+	  // let spotRes = await getSpotListApi()
+	  // return false;
+	  pubSub.publish('navToChange',hrefItem.value)
+	  
+	  router.push('/monitor')
   }
   let src = ref('')
   let cameraIndexCode = ref('')
@@ -144,8 +149,10 @@
     }
   });
 
-  // onMounted(() => {
+  onMounted(() => {
-  //   scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+		hrefItem.value = data
+		console.log(data,'llllllllllllllllllllllllllllllll')
       // initMap('scenic-map', data.lng, data.lat, 15)
       // map.value.setDisplayOptions({
       //   poiText: false, // 隐藏poi标注
@@ -162,11 +169,11 @@
       //   opacity: 1
       // })
       // map.value.addOverlay(imgOverlay)
-  //   })
+    })
-  // })
+  })
-  // onUnmounted(() => {
+  onUnmounted(() => {
-  //   PubSub.unsubscribe(scenicChange)
+    PubSub.unsubscribe(scenicChange)
-  // })
+  })
 </script>
 
 <style scoped lang="scss">
@@ -243,7 +250,7 @@
 	  .look-btn{
 		  position: absolute;
 		  right: vw(20);
-		  top: 50%;
+		  top: 10%;
 		  transform: translateY(-50%);
 		  padding: vw(12);
 		  display: flex;
@@ -252,6 +259,7 @@
 		  border-radius: vw(4);
 		  font-size: vw(14);
 		  color: #fff;
+		  z-index: 999;
 	  }
       .scenic-box {
         width: 100%;

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

@@ -414,6 +414,7 @@
   watch(
     () => scenicStore.carShipData,
     (val) => {
+		return false
       setTimeout(() => {
         if (carOverlays.value.length > 0) {
           for (let i = 0; i < carOverlays.value.length; i++) {

src/views/scenic/index.vue

@@ -23,7 +23,7 @@
   let scenicChange = null
   let timer = null
   let timer2 = null
-
+  let keyword = ref('')
   watch(
     () => [isConnected.value, scenicSpotId.value],
     (val) => {
@@ -35,6 +35,14 @@
               type: 'secureData',
               scenicSpotId: scenicSpotId.value
             })
+        )
+		sendMessage(
+		  JSON.stringify({
+		    action: 'start',
+		    type: 'gpsData',
+			keyword:keyword.value,
+		    scenicSpotId: scenicSpotId.value
+		  })
 	    )
       }
     },
@@ -45,8 +53,11 @@
     () => dataRes.value,
     (val) => {
       if (val) {
-        // console.log(val.type, '=====')
+        // console.log(val, '=====')
         switch (val.type) {
+			case 'gpsData':
+			  scenicStore.setVehicleData(val.data)
+			  break
           case 'wordkOrderlist':
             scenicStore.setWordkOrderList(val.data)
             break
@@ -75,6 +86,7 @@
             scenicStore.setUserPortraitData(val)
             break
           case 'carShipData':
+		  console.log(val,'carShipData')
             scenicStore.setCarShipData(val.data)
             break
         }
@@ -115,8 +127,15 @@
             type: 'carShipData',
             scenicSpotId: scenicSpotId.value
           })
+        ) //车窗数据2
+		sendMessage(
+		  JSON.stringify({
+		    action: 'start',
+		    type: 'gpsData',
+			keyword:keyword.value,
+		    scenicSpotId: scenicSpotId.value
+		  })
 		) //车窗数据
-
       }
     }, 5000)
   }
@@ -124,6 +143,10 @@
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
       scenicSpotId.value = data.scenicSpotId
     })
+	PubSub.subscribe('keywordChange', (msg, data) => {
+	  keyword.value = data
+	   sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
+	})
   })
   onUnmounted(() => {
     if (scenicChange) PubSub.unsubscribe(scenicChange)

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

@@ -20,7 +20,7 @@
           <div class="header-left">
             <img src="@/assets/images/work-icon-xl-1.png" />
             <div class="header-left__title">{{ item.name }}</div>
-            <div class="header-left__camera" @click="videoShow = true">道路监控</div>
+            <!-- <div class="header-left__camera" @click="videoShow = true">道路监控</div> -->
             <!-- <div class="header-left__point" @click="videoShow = true">3号点位</div> -->
           </div>
           <div class="header-status">{{ item.congestLevelText }} </div>
@@ -203,7 +203,7 @@
     let location = e.location.split(',')
     console.log(location, 'location')
     current.value = ''
-    map.value.centerAndZoom(new BMapGL.Point(location[0], location[1]), 15)
+    map.value.centerAndZoom(new BMapGL.Point(location[0], location[1]), 18)
   }
 
   const getRouterList = async () => {

src/views/traffic/components/spotRate.vue

@@ -1,5 +1,10 @@
 <template>
+  
+  <div style="position: relative;">
   	<div class="spotRate" :id="id" />
+  	<div v-if="condShow==0" class="nYong-du">加载中...</div>
+  	<div v-if="condShow==1" class="nYong-du">暂无数据</div>
+  </div>
 </template>
 
 <script setup>
@@ -34,7 +39,8 @@
   const { id, setOption } = useEchart()
 
   let params = null
-
+  let condShow = ref(0)
+  let aIndex = 1
   var defaultCofig = {
     color: [],
     series: [
@@ -74,7 +80,13 @@
   watch(
     () => props.dataList,
     (newVal) => {
+		aIndex+=1
+		console.log(aIndex,'aIndex')
+		if(aIndex>=3&&!newVal.length){
+		   condShow.value = 1
+		}
       if (newVal.length > 0) {
+		  condShow.value = 2
         nextTick(() => {
           if (!params) {
             defaultCofig.color = props.colors
@@ -99,6 +111,18 @@
 </script>
 
 <style scoped lang="scss">
+	.nYong-du{
+		position:absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		font-size:vw(18);
+		color:#999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
   .spotRate {
     width: vw(200);
     height: vh(200);

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

@@ -31,7 +31,19 @@
               :key="index"
               @click="handleItem(item, index)"
             >
+			<div class="child-box">
 				<p class="item__label">{{ item.licenseNumber }}</p>
+				<span  v-if="item.type == 0" class="label_img">
+								  车
+				</span>
+				<span  v-if="item.type == 2" class="label_img">
+								  直通车
+				</span>
+				<span class="label_img label_img_2" v-if="item.type == 1" >
+								  船
+				</span>
+			</div>
+           
               <div class="item__value"
                 >{{ item.speed }}km/h 
                 <img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" />
@@ -141,7 +153,6 @@ import PubSub from 'pubsub-js'
 	(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
@@ -209,26 +220,29 @@ import PubSub from 'pubsub-js'
 				console.log(item,'item')
 			  if (item.lng && item.lat) {
 			    if (item.status == '行驶') {
-					if(item.type==0){
+					if(item.type==1){
-						addMarker(carIcon, [item.lng, item.lat], [36, 50])
-					}else{
 						addMarker(shipIcon, [item.lng, item.lat], [36, 50])
+						
+					}else{
+						addMarker(carIcon, [item.lng, item.lat], [36, 50])
 					}
 			    }
 			    if (item.status == '离线') {
-					if(item.type==0){
+					if(item.type==1){
-						addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
-					}else{
 						addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
+						
+					}else{
+						addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
 					}
 			      
 			    }
 			    if (item.status == '静止') {
 			      
-				  if(item.type==0){
+				  if(item.type==1){
-				  	addMarker(carStopIcon, [item.lng, item.lat], [36, 50])
-				  }else{
 					  addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
+				  	
+				  }else{
+				  	 addMarker(carStopIcon, [item.lng, item.lat], [36, 50])
 				  }
 			    }
 			    marker.value.addEventListener('click', (e) => {
@@ -262,7 +276,7 @@ import PubSub from 'pubsub-js'
                 <p class='marker-title'> ${data?.licenseNumber} </p>
                 <div class='marker-header'>
                 <span class='marker-sim'> ${data?.imei} </span>
-                <div class='marker-tag'> 
+                <div class='marker-tag' style="color:#fff;"> 
                   <div></div> 
                   ${data?.status}  （${data?.statusTimeDesc}）
                 </div>
@@ -282,7 +296,7 @@ import PubSub from 'pubsub-js'
                   <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 class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM/H </p> </div>
                 </div>
                 <div class='marker-row'>
                 <div class='marker-col'> 
@@ -378,6 +392,29 @@ import PubSub from 'pubsub-js'
 </script>
 
 <style lang="scss">
+	.child-box{
+		display:flex;
+		align-items: center;
+		flex:1;
+		height:100%;
+	}
+	.item__label{
+		display:flex;
+		align-items: center;
+		min-width:vw(110);
+	}
+	.label_img{
+		background: #0063ff;
+		padding:vh(5) vw(10);
+		border-radius:vh(2);
+		color:#fff;
+		width:vw(90);
+		text-align:center;
+	}
+	.label_img_2{
+		background: rgba(2, 249, 250, 0.5);
+	}
+	
   .infoBox {
     > img {
       width: vw(40) !important;
@@ -561,7 +598,7 @@ import PubSub from 'pubsub-js'
       color: #0096ff;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: flex-start;
       &__value {
         display: flex;
         align-items: center;
@@ -585,7 +622,7 @@ import PubSub from 'pubsub-js'
         }
         &--active {
           @extend .item__hot;
-          background-color: #ffffff !important;
+          // background-color: #ffffff !important;
         }
       }
       &__active {