5.1

src/views/home/components/allList.vue

@@ -3,7 +3,7 @@
     <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
       <img class="close" src="@/assets/images/close.png" @click="handleClose" />
       <!-- <title2 title="核心景区监控" /> -->
-	  <div class="no-data" v-if="!list.length&&cond">
+	  <div class="no-data" v-if="cond&&!list.length">
 		  暂无排队情况
 	  </div>
 	  <div v-else>
@@ -18,11 +18,11 @@
 		      <div
 			  v-if="item.isCollect == 1"
 			  class="item-unfollow"
-			  @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
+			  @click.stop="handleCollect(item.cameraIndexCode, item.isCollect)">取消关注</div>
 		      <div
 			  v-if="item.isCollect == 0"
 			  class="item-unfollow"
-			  @click.stop="handleCollect(item.cameraIndexCode, index)">关注</div>
+			  @click.stop="handleCollect(item.cameraIndexCode, item.isCollect)">关注</div>
 
 			  <video class="item-video" :id="'video' + index" muted autoplay :controls="false">
 		        <source type="application/x-mpegURL" />
@@ -130,6 +130,7 @@
     }
   }
   const pageNumChange = () => {
+	  cond.value = false
     clearHlsRefs()
     list.value = []
     getVideoList()

src/views/scenic/components/allList.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="z-dialog">
+    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
+      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
+      <!-- <title2 title="核心景区监控" /> -->
+	  <div class="no-data" v-if="cond&&!list.length">
+		  暂无排队情况
+	  </div>
+	  <div v-else>
+		  <ul class="list" >
+		    <li
+		      class="item"
+		      :style="{ backgroundImage: `url(${primary})` }"
+		      v-for="(item, index) in list"
+		      :key="index"
+		      @click="handleItem(item)"
+		    >
+		      <div
+			  v-if="item.isCollect == 1"
+			  class="item-unfollow"
+			  @click.stop="handleCollect(item.cameraIndexCode, item.isCollect)">取消关注</div>
+		      <div
+			  v-if="item.isCollect == 0"
+			  class="item-unfollow"
+			  @click.stop="handleCollect(item.cameraIndexCode, item.isCollect)">关注</div>
+
+			  <video class="item-video" :id="'video' + index" muted autoplay :controls="false">
+		        <source type="application/x-mpegURL" />
+		      </video>
+		      <p>
+		        <span> {{ item.cameraName || item.cameraIndexCode }}</span>
+		      </p>
+		    </li>
+		  </ul>
+		  <div class="pagination">
+		    <el-pagination
+		      v-model:current-page="params.pageNum"
+		      :page-size="params.pageSize"
+		      :total="total"
+		      background
+		      layout="prev, pager, next"
+		      @current-change="pageNumChange"
+		    />
+		  </div>
+	  </div>
+
+
+    </el-dialog>
+  </div>
+  <video-dialog v-model="videoShow" :src="src" :isDiy="isDiy" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
+</template>
+
+<script setup>
+  import { getSpotVideoEvents,getColletListApi } from '@/api/home'
+  import { postVideoCollectApi } from '@/api/monitor'
+
+  import primary from '@/assets/images/item-primary.png'
+
+  import Hls from 'hls.js'
+  import pubSub from 'pubsub-js'
+
+  let props = defineProps({
+    events: {
+      type: String,
+      default: ''
+    },
+  })
+  let modelValue = defineModel()
+  let isCollect = ref(0)
+  let list = ref([])
+  let hlsRefs = []
+  let total = ref(0)
+  let src = ref('')
+  let cameraIndexCode = ref('')
+  let videoShow = ref(false)
+  let isDiy = ref(0)
+  let params = reactive({
+    pageNum: 1,
+    pageSize: 6,
+	businessScenicArea:'',
+  })
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val) {
+		  params.pageNum = 1
+		  cond.value = false
+		  params.businessScenicArea = props.events
+		  list.value = []
+        setTimeout(() => {
+          getVideoList()
+        }, 1000)
+      }
+    }
+  )
+  const onVideoCollect = () => {
+    pubSub.subscribe('videoCollect', () => {
+      clearHlsRefs()
+  	  getVideoList()
+    })
+  }
+  const handleItem = (item) => {
+	  console.log(item,'iscollect')
+    src.value = item.hlsUrl
+	isCollect.value = item.isCollect
+	isDiy.value = item.isDiy
+    cameraIndexCode.value = item.cameraIndexCode
+    videoShow.value = true
+  }
+  const handleCollect = async (id, status) => {
+    await postVideoCollectApi({
+      cameraIndexCode:id,
+      isCollect: status == 0 ? 1 : 0
+    })
+    clearHlsRefs()
+    params.pageNum = 1
+    getVideoList()
+    pubSub.publish('videoCollect')
+  }
+  const handleClose = () => {
+    clearHlsRefs()
+    modelValue.value = false
+  }
+  const clearHlsRefs = () => {
+    if (hlsRefs.length > 0) {
+      hlsRefs.map((item) => {
+        item.destroy()
+      })
+      hlsRefs = []
+    }
+  }
+  const pageNumChange = () => {
+	  cond.value = false
+    clearHlsRefs()
+    list.value = []
+    getVideoList()
+  }
+  let cond = ref(false)
+  const getVideoList = async () => {
+    let res = await getSpotVideoEvents(params)
+    list.value = res.data
+    total.value = res.total
+	setTimeout(()=>{cond.value = true},1500)
+
+    nextTick(() => {
+      list.value.forEach(async (item, index) => {
+        var video = document.getElementById(`video${index}`)
+        const hls = new Hls({
+          enableWorker: false, // 禁用 Worker 来避免额外的线程
+          enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
+          cache: true, // 启用缓存
+          maxBufferLength: 10, // 最大缓冲长度（秒）
+          maxMaxBufferLength: 15, // 缓冲区长度的上限
+          maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
+        })
+        hls.loadSource(item.hlsUrl)
+        hls.attachMedia(video)
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          video.play()
+        })
+        hlsRefs.push(hls)
+      })
+    })
+  }
+
+  onMounted(() => {
+	  onVideoCollect()
+  })
+  onUnmounted(() => {})
+</script>
+
+<style scoped lang="scss">
+  .z-dialog {
+    :deep(.el-dialog) {
+      width: vw(2100);
+      padding: vw(8);
+      background-image: url('@/assets/images/dialog-bg.png') !important;
+      background-size: 100% 100%;
+    }
+    :deep(.el-dialog__header) {
+      padding-bottom: 0 !important;
+    }
+  }
+  .no-data{
+	  height:vh(860);
+	  line-height: vh(860);
+	  text-align: center;
+	  font-size:vw(30);
+	  color:#02f9fa;
+  }
+  .list {
+    margin-top: vw(30);
+    gap: vw(8);
+    height: vh(860);
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+	padding:vw(10);
+    .item {
+      position: relative;
+      width: 33%;
+      height: vh(400);
+      padding: vw(12);
+	  margin-top:vh(20);
+      box-sizing: border-box;
+      background-image: url('@/assets/images/item-primary.png');
+      background-size: 100% 100%;
+      &-video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      > p {
+        position: absolute;
+        bottom: vw(12);
+        width: calc(100% - vw(24));
+        padding: vw(10) 0;
+        background: rgba(4, 30, 69, 0.72);
+        > span {
+          padding-left: vw(10);
+          font-weight: 400;
+          font-size: vw(14);
+          line-height: vw(14);
+          color: #ffffff;
+        }
+      }
+      &-unfollow {
+        cursor: pointer;
+        display: none;
+        position: absolute;
+        right: vw(4);
+        top: vw(4);
+        z-index: 99;
+        width: vw(64);
+        height: vw(30);
+        text-align: center;
+        line-height: vw(30);
+        font-weight: 400;
+        font-size: vw(12);
+        color: #ffffff;
+        background-image: url('@/assets/images/unfollow.png');
+        background-size: 100% 100%;
+      }
+      &:hover {
+        .item-unfollow {
+          display: block;
+        }
+      }
+    }
+  }
+  .pagination {
+    padding-top: vw(20);
+    margin-right: vw(20);
+    padding-bottom: vw(20);
+    display: flex;
+    justify-content: flex-end;
+  }
+  .close {
+    cursor: pointer;
+    position: absolute;
+    right: vw(20);
+    top: vw(20);
+    width: vw(60);
+    z-index: 9999;
+  }
+</style>

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

@@ -3,7 +3,9 @@
     <div class="flex">
       <div class="box mr-8">
         <Title1 title="排队信息" />
-        <div class="count-box flex justify-between">
+        <div @click="handleLineUp()" 
+		style="cursor: pointer;" 
+		class="count-box flex justify-between">
           <count-item
             label="今日入园人数"
             :count="scenicStore.scenicQueueData.header.jrjdrs"
@@ -308,12 +310,13 @@
     :shipList="scenicStore.carShipData.ship.list"
   />
   <traMap :longitude="longitude" :latitude="latitude" v-model="traMapShow"></traMap>
+  <all-list :events="scenicSpotId" v-model="allShow" />
 </template>
 
 <script setup>
   import countup from 'vue-countup-v3'
   import PubSub from 'pubsub-js'
-
+  import allList from './allList'
   import carIcon from '@/assets/images/car.png'
   import carStopIcon from '@/assets/images/car-stop.png'
   import carOfflineIcon from '@/assets/images/car-offline.png'
@@ -330,10 +333,24 @@
   import { useRouter } from 'vue-router'
   import { useMap } from '@/hooks/map'
   import { useScenicStore } from '@/stores/scenic'
+  let props = defineProps({
+    scenicSpotId: {
+      type: String,
+      default: () => ''
+    }
+  })
   const router = useRouter()
   const scenicStore = useScenicStore()
   const { initMap, addMarker, marker } = useMap()
-
+  //景区排队
+  let allShow = ref(false)
+  let events = ref({})
+  
+  const handleLineUp = (item)=>{
+  	  allShow.value = true
+  	  events.value = item
+  	  console.log(item,7777777)
+  }
   let show = ref(false)
   let scenicChange = null
   let carOverlays = ref([])

src/views/scenic/index.vue

@@ -1,6 +1,6 @@
 <template>
   <box1 :scenicSpotId="scenicSpotId" />
-  <box2 />
+  <box2 :scenicSpotId="scenicSpotId" />
 </template>
 
 <script setup>