feat：完善功能

2025-02-26 22:18:09 +08:00
parent 5bdb5ea5c6
commit 01e3aabbfc
9 changed files with 456 additions and 108 deletions
--- a/src/components/CoreVideo/allList.vue
+++ b/src/components/CoreVideo/allList.vue
@@ -0,0 +1,220 @@
+<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="核心景区监控" />
+      <ul class="list">
+        <li
+          class="item"
+          :style="{ backgroundImage: `url(${primary})` }"
+          v-for="(item, index) in list"
+          :key="index"
+          @click="handleItem(item)"
+        >
+          <div class="item-unfollow" @click.stop="handleCollect(item.id, index)">取消关注</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>
+    </el-dialog>
+  </div>
+  <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
+</template>
+
+<script setup>
+  import { getVideoListApi } 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 modelValue = defineModel()
+
+  let list = ref([])
+  let hlsRefs = []
+  let total = ref(0)
+  let src = ref('')
+  let cameraIndexCode = ref('')
+  let videoShow = ref(false)
+  let params = reactive({
+    pageNum: 1,
+    pageSize: 6,
+    isCollect: 1
+  })
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val) {
+        setTimeout(() => {
+          getVideoList()
+        }, 1000)
+      }
+    }
+  )
+  const handleItem = (item) => {
+    src.value = item.hlsUrl
+    cameraIndexCode.value = item.cameraIndexCode
+    videoShow.value = true
+  }
+  const handleCollect = async (id, index) => {
+    await postVideoCollectApi({
+      id,
+      isCollect: 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 = () => {
+    clearHlsRefs()
+    list.value = []
+    getVideoList()
+  }
+  const getVideoList = async () => {
+    let res = await getVideoListApi(params)
+    list.value = res.data
+    total.value = res.total
+    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(() => {})
+  onUnmounted(() => {})
+</script>
+
+<style scoped lang="scss">
+  .z-dialog {
+    :deep(.el-dialog) {
+      width: vw(1864);
+      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 {
+    gap: vw(8);
+    height: vw(840);
+    margin-top: vw(30);
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    .item {
+      position: relative;
+      width: vw(610);
+      height: vw(420);
+      padding: vw(12);
+      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>
--- a/src/components/CoreVideo/index.vue
+++ b/src/components/CoreVideo/index.vue
@@ -1,20 +1,20 @@
 <template>
  <div class="core-video">
    <div class="title">核心景区视频</div>
-
+    <div class="btn-all" @click="allShow = true" />
    <ul class="list">
      <li
        class="item"
        :style="{ backgroundImage: `url(${primary})` }"
        v-for="(item, index) in list"
        :key="index"
-        @click.shop="handleItem(item)"
+        @click="handleItem(item)"
      >
        <div>
          <p class="item-title--primary">
            {{ item.cameraName || item.cameraIndexCode }}
          </p>
-          <div class="item-unfollow">取消关注</div>
+          <div class="item-unfollow" @click.stop="handleUnfollow(item.id, index)">取消关注</div>
          <video
            class="item-img"
            :id="'video' + index"
@@ -30,46 +30,42 @@
    </ul>
  </div>
  <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
+  <all-list v-model="allShow" />
 </template>

 <script setup>
+  import allList from './allList'
+
  import primary from '@/assets/images/item-primary.png'
  import error from '@/assets/images/item-error.png'
-  import { getVideoListApi, postRefreshApi } from '@/api/home'
-  import Hls from 'hls.js'

-  import { mode, baseUrl, proBaseUrl } from '@/utils/config'
+  import { getVideoListApi } from '@/api/home'
+  import { postVideoCollectApi } from '@/api/monitor'
+
+  import Hls from 'hls.js'
+  import pubSub from 'pubsub-js'

  let list = ref([])
  let src = ref('')
  let cameraIndexCode = ref('')
  let videoShow = ref(false)
-
-  let webRtcServerList = ref([])
+  let allShow = ref(false)
+  let hlsRefs = []

  const handleItem = (item) => {
    src.value = item.hlsUrl
-    // src.value = item.rtspUrl
    cameraIndexCode.value = item.cameraIndexCode
    videoShow.value = true
  }

  const getVideoList = async () => {
    let res = await getVideoListApi({
-      isCollect: 1
+      isCollect: 1,
+      pageNum: 1,
+      pageSize: 5
    })
+    console.log(res, 'res')
    list.value = res.data
-    // nextTick(() => {
-    //   list.value.forEach(async (item, index) => {
-    //     let webRtcServer = new WebRtcStreamer(
-    //       `video${index}`,
-    //       `${mode == 'dev' ? baseUrl : proBaseUrl}/webrtc`
-    //     )
-    //     webRtcServer.connect(item.rtspUrl, '', 'rtptransport=tcp')
-    //     webRtcServerList.value.push(webRtcServer)
-    //   })
-    // })
-
    nextTick(() => {
      list.value.forEach(async (item, index) => {
        var video = document.getElementById(`video${index}`)
@@ -86,10 +82,39 @@
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          video.play()
        })
+        hlsRefs.push(hls)
      })
    })
  }
+
+  const initList = () => {
+    // 释放hls实例
+    if (hlsRefs.length > 0) {
+      hlsRefs.map((item) => {
+        item.destroy()
+      })
+      hlsRefs = []
+    }
+    getVideoList()
+  }
+  const onVideoCollect = () => {
+    pubSub.subscribe('videoCollect', () => {
+      initList()
+    })
+  }
+
+  const handleUnfollow = async (id, index) => {
+    await postVideoCollectApi({
+      id,
+      isCollect: 0
+    })
+    list.value.splice(index, 1)
+    hlsRefs[index].destroy()
+    hlsRefs.splice(index, 1)
+  }
+
  onMounted(() => {
+    onVideoCollect()
    getVideoList()
  })
 </script>
@@ -99,6 +124,7 @@
    background-color: transparent !important;
  }
  .core-video {
+    position: relative;
    margin: vw(8);
    width: vw(300);
    border-radius: vw(2);
@@ -114,6 +140,17 @@
      font-weight: 800;
      color: #fff;
    }
+    .btn-all {
+      cursor: pointer;
+      position: absolute;
+      right: vw(0);
+      top: vw(0);
+      z-index: 999;
+      width: vw(60);
+      height: vw(24);
+      background-image: url('@/assets/images/all.png');
+      background-size: 100% 100%;
+    }

    .list {
      overflow-y: auto;
@@ -147,10 +184,12 @@
      padding: vw(10);
      background-size: 100% 100%;
      &-unfollow {
+        cursor: pointer;
        display: none;
        position: absolute;
-        right: vw(8);
-        top: vw(8);
+        right: vw(4);
+        top: vw(4);
+        z-index: 99;
        width: vw(64);
        height: vh(24);
        text-align: center;
--- a/src/components/VideoDialog/index.vue
+++ b/src/components/VideoDialog/index.vue
@@ -12,14 +12,8 @@
        <video class="video" ref="videoRef" muted autoplay controls>
          <source type="application/x-mpegURL" />
        </video>
-        <!-- <video class="video" id="bigVideo" muted autoplay controls style="object-fit: cover" /> -->

        <div class="action-box">
-          <!-- <div class="action-item">
-            <img src="@/assets/images/plus.png" alt="" />
-            <span>变倍</span>
-            <img src="@/assets/images/minus.png" alt="" />
-          </div> -->
          <div class="action-item">
            <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
            <span>聚焦</span>
@@ -50,16 +44,16 @@
  import { ElMessage } from 'element-plus'

  import { postVideoControlApi } from '@/api/monitor'
-  import { mode, baseUrl, proBaseUrl } from '@/utils/config'

  const Z00M_IN = 'ZOOM_IN' // 焦距变大
  const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-  const ACTION = '0'
  const UP = 'UP' // 上转
  const DOWN = 'DOWN' // 下转
  const LEFT = 'LEFT' // 左转
  const RIGHT = 'RIGHT' // 右转
  const STOP = 'STOP' // 停止操作
+  let ACTION = '0'
+  let command = ref('')

  const props = defineProps({
    src: {
@@ -96,26 +90,27 @@
      ACTION = '1'
    } else {
      ACTION = '0'
+      command.value = e
    }
    await postVideoControlApi({
-      command: e,
+      command: command.value,
      action: ACTION,
      cameraIndexCode: props.cameraIndexCode
    })
+    if (e == STOP) {
+      command.value = ''
+    }
    ElMessage({
      message: '操作成功',
      type: 'success'
    })
  }
  const handleClose = () => {
-    // webRtcServer.disconnect()
    hlsRef.destroy()
    hlsRef = null
    modelValue.value = false
  }
  const init = () => {
-    // webRtcServer = new WebRtcStreamer('bigVideo', `${mode == 'dev' ? baseUrl : proBaseUrl}/webrtc`)
-    // webRtcServer.connect(props.src)
    hlsRef = new Hls({
      enableWorker: false, // 禁用 Worker 来避免额外的线程
      enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求