新增地图弹窗 bug修改

src/api/home.js

@@ -7,7 +7,14 @@ export function getWeatherApi() {
     method: 'get'
   })
 }
-
+//关注视频列表
+export function getColletListApi(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/video/collectList',
+    method: 'post',
+    data
+  })
+}
 // 核心景区视频
 export function getVideoListApi(data) {
   return request({

src/components/VideoDialog/index.vue

@@ -32,7 +32,22 @@
             />
             <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">
+			  <div
+			    v-if="colletCond == 1"
+			    class="video-follow"
+			    @click.stop="handleCollect()"
+			    >取消关注
+			  </div>
+			  <div
+			    v-if="colletCond == 0"
+			    class="video-unfollow"
+			    @click.stop="handleCollect()"
+			    >关注
+			  </div>
+		  </div>
         </div>
       </div>
       <img class="close" src="@/assets/images/close.png" @click="handleClose" />
@@ -43,9 +58,11 @@
 <script setup>
   import Hls from 'hls.js'
   import { ElMessage } from 'element-plus'
-
+  import {
+    postVideoCollectApi
+  } from '@/api/monitor'
   import { postVideoControlApi } from '@/api/monitor'
-
+  import pubSub from 'pubsub-js'
   const Z00M_IN = 'ZOOM_IN' // 焦距变大
   const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
   const UP = 'UP' // 上转
@@ -64,28 +81,45 @@
     cameraIndexCode: {
       type: String,
       default: ''
-    }
+    },
+	isCollect:{
+		type: Number,
+		default: 0
+	}
   })
-
+  let colletCond = ref(0)
   let modelValue = defineModel()
   let videoRef = ref()
   let webRtcServer = null
   let hlsRef = null
 
-  // watch(
+  watch(
-  //   () => modelValue.value,
+    () => props.isCollect,
-  //   (val) => {
+    (val) => {
-  //     if (val) {
+      if (val) {
-  //       setTimeout(() => {
+		  colletCond.value = val
-  //         init()
+        // setTimeout(() => {
-  //       }, 1000)
+        //   init()
-  //     }
+        // }, 1000)
-  //   },
+      }
-  //   {
+    },
-  //     immediate: true
+    {
-  //   }
+      immediate: true
-  // )
+    }
-
+  )
+  // 关注
+  const handleCollect = async (id, status, index) => {
+    await postVideoCollectApi({
+      cameraIndexCode:props.cameraIndexCode,
+      isCollect: colletCond.value == 0 ? 1 : 0
+    })
+    if (colletCond.value == 0) {
+      colletCond.value = 1
+    } else {
+      colletCond.value = 0
+    }
+    pubSub.publish('videoCollect', props.cameraIndexCode)
+  }
   const handleAction = async (e) => {
     if (e == STOP) {
       ACTION = '1'
@@ -143,9 +177,34 @@
       }
     })
   }
+  onMounted(()=>{
+	  
+  })
 </script>
 
 <style scoped lang="scss">
+	.video-follow,.video-unfollow {
+	  // cursor: pointer;
+	  // display: none;
+	  // position: absolute;
+	  // right: vw(8);
+	  // top: vw(8);
+	  // z-index: 9999;
+	  // margin-left:vw(20);
+	  padding: 0 vw(20);
+	  height: vh(24);
+	  text-align: center;
+	  line-height: vh(24);
+	  font-weight: 400;
+	  font-size: vw(16);
+	  color: #ffffff;
+	  // background-image: url('@/assets/images/unfollow.png');
+	  background-size: 100% 100%;
+	}
+	.video-item__follow {
+	  
+	  // background-image: url('@/assets/images/unfollow.png');
+	}
   .dialog {
     z-index: 9999;
     .action {

src/layout/components/CoreVideo/allList.vue

@@ -11,7 +11,7 @@
           :key="index"
           @click="handleItem(item)"
         >
-          <div class="item-unfollow" @click.stop="handleCollect(item.id, index)">取消关注</div>
+          <div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
           <video class="item-video" :id="'video' + index" muted autoplay :controls="false">
             <source type="application/x-mpegURL" />
           </video>
@@ -75,7 +75,7 @@
   }
   const handleCollect = async (id, index) => {
     await postVideoCollectApi({
-      id,
+      cameraIndexCode:id,
       isCollect: 0
     })
     clearHlsRefs()

src/layout/components/CoreVideo/index.vue

@@ -11,7 +11,7 @@
         @click="handleItem(item)"
       >
         <HlsPlayer :url="item.hlsUrl" />
-        <div class="item-unfollow" @click.stop="handleUnfollow(item.id, index)">取消关注</div>
+        <div class="item-unfollow" @click.stop="handleUnfollow(item.cameraIndexCode, index)">取消关注</div>
         <!-- <div>
           <p class="item-title--primary">
             {{ item.cameraName || item.cameraIndexCode }}
@@ -31,7 +31,7 @@
       </li>
     </ul>
   </div>
-  <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
+  <video-dialog v-model="videoShow" :src="src" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
   <all-list v-model="allShow" />
 </template>
 
@@ -41,7 +41,7 @@
   import primary from '@/assets/images/item-primary.png'
   import error from '@/assets/images/item-error.png'
 
-  import { getVideoListApi, getPreviewUrlApi } from '@/api/home'
+  import { getVideoListApi, getPreviewUrlApi,getColletListApi } from '@/api/home'
   import { postVideoCollectApi, postVideoRemainApi } from '@/api/monitor'
 
   import Hls from 'hls.js'
@@ -61,6 +61,7 @@
     }
   )
 
+let isCollect = ref(0)
   let list = ref([])
   let src = ref('')
   let cameraIndexCode = ref('')
@@ -72,6 +73,7 @@
   const handleItem = (item) => {
     src.value = item.hlsUrl
     cameraIndexCode.value = item.cameraIndexCode
+	isCollect.value = item.isCollect
     videoShow.value = true
   }
 
@@ -92,12 +94,12 @@
     videoShow.value = true
   }
   const getVideoList = async () => {
-    let res = await getVideoListApi({
+    let res = await getColletListApi({
-      isCollect: 1,
       pageNum: 1,
       pageSize: 5
     })
     list.value = res.data
+	console.log(list.value,'list.valuelist.valuelist.valuelist.value')
     postVideoRemain()
     // nextTick(() => {
     //   list.value.forEach(async (item, index) => {
@@ -138,7 +140,7 @@
 
   const handleUnfollow = async (id, index) => {
     await postVideoCollectApi({
-      id,
+      cameraIndexCode:id,
       isCollect: 0
     })
     clearHlsRefs()

src/layout/components/Header/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="header">
+	  <div v-if="isBack" class="back2" @click="handleHome">
+	    <img class="icon" src="@/assets/images/home.png" alt="" /> 首页
+	  </div>
     <ul class="nav-left">
       <li
         class="nav-left-item"
@@ -142,11 +145,14 @@
       minute
     )}:${fillZero(second)}`
   }
-  // 返回首页
+  // 返回上一页
   const handleBack = () => {
-    router.push('/home')
+    router.back()
+  }
+  // 返回首页
+  const handleHome = ()=>{
+	 router.push('/home')
   }
-
   const handleCommand = (item, type) => {
 	  
     current.value = ''
@@ -172,7 +178,7 @@
   
   // 点击导航
   const handleNav = (item) => {
-	  console.log(item,'测试一下 ')
+	  // console.log(item.path,'测试一下 ')
     if (isSkip.value) {
       router.push(item.path)
     } else {
@@ -222,8 +228,8 @@
         isSkip.value = true
         isBack.value = false
         navLeft.value = [
+		  { name: '景区', path: '/scenic' },
           { name: '监控', path: '/monitor' },
-          { name: '景区', path: '/scenic' },
           { name: '交通', path: '/traffic' }
         ]
         navRight.value = [
@@ -238,9 +244,10 @@
         isBack.value = true
         let res = await getSpotListApi()
         navLeft.value = res.data
-        current.value = 0
+		console.log(res.data,'22220000')
+        current.value = res.data[0].id
         title.value = navLeft.value[current.value].name
-        pubSub.publish('scenicChange', navLeft.value[current.value])
+        pubSub.publish('scenicChange', navLeft.value[0])
         otherLeftNav.value = [
           // {
           //   name: '大窝景区'
@@ -399,6 +406,28 @@
         height: auto;
       }
     }
+	.back2 {
+	  position: absolute;
+	  left: 0;
+	  top: vh(50);
+	  width: vw(130);
+	  height: vh(36);
+	  font-weight: 600;
+	  font-size: vw(20);
+	  color: #ffffff;
+	  cursor: pointer;
+	  display: flex;
+	  align-items: center;
+	  justify-content: center;
+	  border-radius: vw(60);
+	  border: 1px solid rgba(0, 114, 220, 0.3);
+	  background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
+	  .icon {
+	    margin-right: vw(10);
+	    width: vw(24);
+	    height: auto;
+	  }
+	}
     .title {
       width: vw(3170);
       height: vh(120);

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

@@ -12,13 +12,13 @@
 	          <div
 	            v-if="item.isCollect == 1"
 	            class="video-item__follow"
-	            @click.stop="handleCollect(item.id, item.isCollect, index)"
+	            @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
 	            >取消关注
 	          </div>
 	          <div
 	            v-if="item.isCollect == 0"
 	            class="video-item__unfollow"
-	            @click.stop="handleCollect(item.id, item.isCollect, index)"
+	            @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
 	            >关注
 	          </div>
 	          <video
@@ -170,7 +170,7 @@
 	// 关注
 	const handleCollect = async (id, status, index) => {
 	  await postVideoCollectApi({
-	    id,
+	    cameraIndexCode:id,
 	    isCollect: status == 0 ? 1 : 0
 	  })
 	  if (status == 0) {

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

@@ -14,11 +14,16 @@
             {{ item.dictLabel }}
           </span>
         </div>
+		<div 
+		 :class="{ active: current == 3 }"
+		@click="handleNav(3)" class="li">
+			<span>自定义</span>
+		</div>
       </div>
       <div class="bom-box">
         <Title2 title="检索" />
         <div class="search-box">
-          <el-input placeholder="请输入内容" v-model="cameraName" clearable @input="onInput" />
+          <el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
           <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
         </div>
 
@@ -38,7 +43,7 @@
                 class="tree-item__child-item"
                 v-for="(resource, x) in item.videoResources"
                 :key="x"
-                @click="handleCamera(resource.cameraIndexCode)"
+                @click="handleCamera(resource.cameraIndexCode,resource)"
               >
                 {{ resource.cameraName || resource.cameraIndexCode }}
               </div>
@@ -60,13 +65,13 @@
             <div
               v-if="item.isCollect == 1"
               class="video-item__follow"
-              @click.stop="handleCollect(item.id, item.isCollect, index)"
+              @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
               >取消关注
             </div>
             <div
               v-if="item.isCollect == 0"
               class="video-item__unfollow"
-              @click.stop="handleCollect(item.id, item.isCollect, index)"
+              @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
               >关注
             </div>
             <video
@@ -157,7 +162,7 @@
       </div>
     </div>
   </div>
-  <VideoDialog v-model="show" :src="videoSrc" />
+  <VideoDialog v-model="show" :isCollect="isCollect" :src="videoSrc" />
 </template>
 
 <script setup>
@@ -188,6 +193,7 @@
     label: 'label',
     children: 'children'
   }
+  let isCollect = ref(0)
   let command = ref('')
   let videoList = ref([])
   let navList = ref([])
@@ -264,6 +270,10 @@
     videoList.value = []
     total.value = 0
     current.value = e
+	if(e==3){
+		getVideoList(3)
+		return false
+	}
     getVideoList()
   }
   const handleBack = () => {
@@ -311,17 +321,18 @@
   const handleRegions = (e) => {
     regionList.value[e].show = !regionList.value[e].show
   }
-  const handleCamera = async (cameraIndexCode) => {
+  const handleCamera = async (cameraIndexCode,resource) => {
     show.value = true
     let res = await getPreviewUrlApi({
       type: 'hls',
       cameraIndexCode
     })
+	isCollect.value = resource.isCollect
     videoSrc.value = res.data.url
   }
   const handleCollect = async (id, status, index) => {
     await postVideoCollectApi({
-      id,
+      cameraIndexCode:id,
       isCollect: status == 0 ? 1 : 0
     })
     if (status == 0) {
@@ -331,15 +342,22 @@
     }
     pubSub.publish('videoCollect', id)
   }
-  const getVideoList = async () => {
+  const getVideoList = async (val) => {
+	  
     try {
       if (loading.value) return
       loading.value = true
-      params.businessVideoDisplayPosition = navList.value[current.value].dictValue
+	  if(val==3){
+		  params.businessVideoDisplayPosition = ''
+	  }else{
+		 params.businessVideoDisplayPosition = navList.value[current.value].dictValue 
+	  }
+	  
       let res = await getVideoListApi(params)
+	  console.log(res,'list   55555')
       total.value = res.total
       if (res.data.length > 0) {
-        postVideoRemain()
+        // postVideoRemain()
         videoList.value = res.data
         nextTick(() => {
           videoList.value.forEach(async (x, index) => {
@@ -386,7 +404,9 @@
     console.log(regionList.value, ' regionList.value')
   }
   const onMonitorChange = () => {
+	  
     monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
+		current.value = 0
       params.businessScenicArea = data.scenicSpotId
       params.pageNum = 1
       videoList.value = []
@@ -558,7 +578,7 @@
           &__child-item {
             padding: vh(0) vw(20) vh(20) vw(20);
             cursor: pointer;
-            color: #999;
+            color: rgb(192,216,254);
             font-weight: 400;
             font-size: vw(15);
             white-space: nowrap;

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

@@ -366,6 +366,7 @@
 
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+		console.log(data,'99999999999999999999999999999999999999')
       scenicSpotId.value = data.scenicSpotId
       lat.value = data.lat
       lng.value = data.lng

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

@@ -139,7 +139,10 @@
     </div>
     <div class="flex mt-8">
       <div class="box-3 mr-8">
-        <Title1 title="交通信息" />
+		  <div class="look-box">
+			  <Title1 title="交通信息" />
+			  <div @click="hanldeLookMap" class="look-btn">查看详情</div>
+		  </div>
         <div class="count-box flex">
           <count-item
             v-for="(item, index) in scenicStore.trafficData.infoList"
@@ -270,7 +273,7 @@
               </div>
             </div>
             <div class="car-box mt-10">
-              <img class="icon" src="@/assets/images/icon-6.png" />
+              <img class="icon" src="@/assets/images/icon-7.png" />
               <div class="car-item pr-20">
                 <div class="label">运营船只</div>
                 <div class="value flex">
@@ -300,6 +303,7 @@
     :carList="scenicStore.carShipData.car.list"
     :shipList="scenicStore.carShipData.ship.list"
   />
+  <traMap :longitude="longitude" :latitude="latitude" v-model="traMapShow"></traMap>
 </template>
 
 <script setup>
@@ -317,6 +321,7 @@
   import age from './age'
   import jam from './jam'
   import BigMap from './big-map'
+  import traMap from './tra-map'
   import TrafficFlow from './traffic-flow'
 
   import { useMap } from '@/hooks/map'
@@ -329,7 +334,13 @@
   let scenicChange = null
   let carOverlays = ref([])
   let shipOverlays = ref([])
-
+  let traMapShow = ref(false)
+  //查看交通信息
+  let latitude = ref('')
+  let longitude = ref('')
+  const hanldeLookMap = ()=>{
+	  traMapShow.value = true
+  }
   const garageList = computed(() => {
     return scenicStore.stopCarData.headList
   })
@@ -437,6 +448,8 @@
 
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+		latitude.value = data.lat
+		longitude.value = data.lng
       carOverlays.value = []
       shipOverlays.value = []
       initMap('car-ship', data.lng, data.lat, 15)
@@ -448,6 +461,22 @@
 </script>
 
 <style scoped lang="scss">
+	.look-box{
+		position:relative;
+		.look-btn{
+			position:absolute;
+			right:vw(20);
+			top:50%;
+			transform: translateY(-50%);
+			padding: vw(16);
+			display: flex;
+			align-items: center;
+			background: #0a4190;
+			border-radius: vw(8);
+			font-size:vw(24);
+			color:#fff;
+		}
+	}
   :deep(.BMap_cpyCtrl) {
     display: none;
   }

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

@@ -0,0 +1,63 @@
+<template>
+	<div class="dialog">
+	  <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
+		  <img @click="modelValue = false" class="close" src="@/assets/images/close.png"  />
+		  <div id="big-car-ship" class="big-car-ship" />
+	  </el-dialog>
+    </div>
+</template>
+
+<script setup>
+	import { useMap } from '@/hooks/map'
+	const { map, marker, initMap, addMarker } = useMap()
+	let modelValue = defineModel()
+	let props = defineProps({
+	  longitude: {
+	    type: String,
+	    default: ''
+	  },
+	  latitude: {
+	    type: String,
+	    default: ''
+	  }
+	})
+	watch(
+	  () => modelValue.value,
+	  (val) => {
+	    if (val) {
+	      setTimeout(() => {
+			  console.log(props.longitude,props.latitude)
+	        initMap('big-car-ship', props.longitude, props.latitude, 17)
+			map.value.setTrafficOn()
+	      }, 1000)
+	    }
+	  },
+	  { immediate: true }
+	)
+</script>
+
+<style scoped lang="scss">
+	.big-car-ship {
+	  flex: 1;
+	  height: vh(820);
+	}
+	.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;
+	  }
+	}
+	.close {
+	  cursor: pointer;
+	  position: absolute;
+	  right: vw(20);
+	  top: vw(20);
+	  width: vw(60);
+	  z-index: 9999;
+	}
+</style>

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

@@ -109,6 +109,7 @@
       if (val[0].length > 0) {
         nextTick(() => {
           let { longitude, latitude, level } = val[0][0]
+		  console.log(longitude, latitude, level,'longitude, latitude, level')
           initMap('traffic-map', longitude, latitude, level)
           map.value.setTrafficOn()
         })