417

2025-04-17 20:18:38 +08:00
parent d7eeea3efe
commit 09dcabadda
23 changed files with 1302 additions and 269 deletions
--- a/dist417大屏.zip
+++ b/dist417大屏.zip
--- a/src/api/home.js
+++ b/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({
--- a/src/components/HlsPlayer/index.vue
+++ b/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) {
--- a/src/components/Line/index.vue
+++ b/src/components/Line/index.vue
@@ -1,11 +1,16 @@
 <template>
-  <div
-    :id="id"
-    :style="{
-      width: styleUtil.px2vw(width),
-      height: styleUtil.px2vh(height)
-    }"
-  />
+	<div style="position: relative;">
+		<div
+		  :id="id"
+		  :style="{
+		    width: styleUtil.px2vw(width),
+		    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,14 +167,22 @@
    }
    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>
--- a/src/layout/components/CoreVideo/index.vue
+++ b/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)
-	}
+	postVideoRemain()
+	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) {
--- a/src/layout/components/Correspondence/index.vue
+++ b/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);
--- a/src/layout/components/Header/index.vue
+++ b/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
        ]
-		current.value = navLeft.value[0].id
-		title.value = navLeft.value[0].name
+		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()
--- a/src/utils/config.js
+++ b/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'
--- a/src/views/home/components/box-2.vue
+++ b/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);
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -35,13 +35,14 @@
      <div class="box">
        <div class="pt-10">
          <Title3 title="拥堵路段总数" />
-          <Line
-            :width="250"
-            :height="150"
-            :config="{ legend: false }"
-            :data="congestionData"
-            :xAxisData="congestionXAxisData"
-          />
+		  <Line
+		    :width="250"
+		    :height="150"
+		    :config="{ legend: false }"
+		    :data="congestionData"
+		    :xAxisData="congestionXAxisData"
+		  />
+        
        </div>
      </div>
      <div class="box">
--- a/src/views/home/components/jam-count.vue
+++ b/src/views/home/components/jam-count.vue
@@ -1,6 +1,11 @@
 <!-- 拥堵次数占比 -->
 <template>
-  <div class="jam-count" :id="id" />
+	<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);
--- a/src/views/home/components/jam-duration.vue
+++ b/src/views/home/components/jam-duration.vue
@@ -1,6 +1,11 @@
 <template>
  <!-- 拥堵时长 -->
-  <div class="jam" :id="id" />
+  <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)
      }
@@ -29,7 +40,7 @@
  )

  let params = null
-
+	
  const setSeriesData = () => {
    return props.list.map((item) => {
      return {
@@ -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);
--- a/src/views/hotel/components/video-box.vue
+++ b/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()
 		
--- a/src/views/monitor/components/box-1.vue
+++ b/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({
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -1,24 +1,28 @@
 <template>
  <div class="box-2">
    <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 v-if="showNav" >
+		  <div 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>
+			      {{ item.dictLabel }} 
+			    </span>
+			  </div>
+			  <div
+			   :class="{ active: current == navList.length }"
+			  @click="handleNav(navList.length)" class="li">
+			  	<span>收藏夹</span>
+			  </div>
+		  </div>
+       
+		
      </div>
      <div class="bom-box">
        <Title2 title="检索" />
@@ -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);
--- a/src/views/scenic/components/big-map
+++ b/src/views/scenic/components/big-map
@@ -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>
--- a/src/views/scenic/components/big-map.vue
+++ b/src/views/scenic/components/big-map.vue
@@ -8,33 +8,45 @@
          <el-input
            v-model="keyword"
            clearable
-            placeholder="设备号/设备名称SIM卡号"
-            @input="onInput"
+            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)"
            >
-              <p class="item__label">{{ item.licenseNumber }}</p>
+        	<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="" />
+                >{{ 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="{
@@ -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,120 +160,117 @@
    { 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
-            }
-          })
-        }
+    () => [scenicStore.vehicleData,tabsIndex.value,map.value],
+    (val) => {
+		// console.log(scenicStore.vehicleData,'scenicStore.vehicleDatascenicStore.vehicleDatascenicStore.vehicleData')
+		list.value = val[0].map
+		if(val[0].map){
+			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
+		}
+		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 = 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 == '行驶') {
+  					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 = 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 }
@@ -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
-    active.value = index
-    getGpsList()
+    if (tabsIndex.value == index) return
+    tabsIndex.value = index
  }

  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 {
--- a/src/views/scenic/components/box-1.vue
+++ b/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 = ()=>{
-	  router.push('/traffic')
+  let hrefItem = ref(null)
+  const hanldeToDetails = async()=>{
+	  // let spotRes = await getSpotListApi()
+	  // return false;
+	  pubSub.publish('navToChange',hrefItem.value)
+	  
+	  router.push('/monitor')
  }
  let src = ref('')
  let cameraIndexCode = ref('')
@@ -144,29 +149,31 @@
    }
  });

-  // onMounted(() => {
-  //   scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
-  //     initMap('scenic-map', data.lng, data.lat, 15)
-  //     map.value.setDisplayOptions({
-  //       poiText: false, // 隐藏poi标注
-  //       poiIcon: false, // 隐藏poi图标
-  //       building: false // 隐藏楼块
-  //     })
-  //     var bounds = new BMapGL.Bounds(
-  //       new BMapGL.Point(109.604998,31.030391),
-  //       new BMapGL.Point(109.624833,31.044965)
-  //     )
-  //     var imgOverlay = new BMapGL.GroundOverlay(bounds, {
-  //       type: 'image',
-  //       url: sxzd,
-  //       opacity: 1
-  //     })
-  //     map.value.addOverlay(imgOverlay)
-  //   })
-  // })
-  // onUnmounted(() => {
-  //   PubSub.unsubscribe(scenicChange)
-  // })
+  onMounted(() => {
+    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标注
+      //   poiIcon: false, // 隐藏poi图标
+      //   building: false // 隐藏楼块
+      // })
+      // var bounds = new BMapGL.Bounds(
+      //   new BMapGL.Point(109.604998,31.030391),
+      //   new BMapGL.Point(109.624833,31.044965)
+      // )
+      // var imgOverlay = new BMapGL.GroundOverlay(bounds, {
+      //   type: 'image',
+      //   url: sxzd,
+      //   opacity: 1
+      // })
+      // map.value.addOverlay(imgOverlay)
+    })
+  })
+  onUnmounted(() => {
+    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%;
--- a/src/views/scenic/components/box-2.vue
+++ b/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++) {
--- a/src/views/scenic/index.vue
+++ b/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) => {
@@ -36,6 +36,14 @@
              scenicSpotId: scenicSpotId.value
            })
        )
+		sendMessage(
+		  JSON.stringify({
+		    action: 'start',
+		    type: 'gpsData',
+			keyword:keyword.value,
+		    scenicSpotId: scenicSpotId.value
+		  })
+	    )
      }
    },
    { immediate: true }
@@ -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)
--- a/src/views/traffic/components/box-2.vue
+++ b/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 () => {
--- a/src/views/traffic/components/spotRate.vue
+++ b/src/views/traffic/components/spotRate.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="spotRate" :id="id" />
+  
+  <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);
--- a/src/views/vehicles/components/big-map.vue
+++ b/src/views/vehicles/components/big-map.vue
@@ -31,7 +31,19 @@
              :key="index"
              @click="handleItem(item, index)"
            >
-              <p class="item__label">{{ item.licenseNumber }}</p>
+			<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){
-						addMarker(carIcon, [item.lng, item.lat], [36, 50])
-					}else{
+					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==0){
-						addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
-					}else{
+					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==0){
-				  	addMarker(carStopIcon, [item.lng, item.lat], [36, 50])
+				  if(item.type==1){
+					  addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
+				  	
 				  }else{
-				  	addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
+				  	 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 {