feat：视频列表现在分页操作

src/components/CoreVideo/index.vue

@@ -53,18 +53,12 @@
     nextTick(() => {
       list.value.forEach(async (item, index) => {
         var video = document.getElementById(`video${index}`)
-        let res1 = await postRefreshApi({
-          type: 'hls',
-          businessVideoDisplayPosition: item.businessVideoDisplayPosition,
-          cameraIndexCode: item.cameraIndexCode
-        })
-        item.hlsUrl = res1.data.hlsUrl
         const hls = new Hls({
           maxBufferLength: 10, // 最大缓冲长度（秒）
           maxMaxBufferLength: 15, // 缓冲区长度的上限
           maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
         })
-        hls.loadSource(res1.data.hlsUrl)
+        hls.loadSource(item.hlsUrl)
         hls.attachMedia(video)
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
           video.play()

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

@@ -9,9 +9,7 @@
           :key="index"
           @click="handleNav(index)"
         >
-          <span v-if="!params.businessScenicArea && index==0">
-           核心路段
-          </span>
+          <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span>
           <span v-else>
             {{ item.dictLabel }}
           </span>
@@ -45,12 +43,7 @@
     </div>
 
     <div v-if="videoLog == 1" class="video-wrapper">
-      <div
-        class="video-list"
-        v-infinite-scroll="getVideoList"
-        :infinite-scroll-immediate="false"
-        :infinite-scroll-distance="50"
-      >
+      <div class="video-list">
         <div
           class="video-item"
           v-for="(item, index) in videoList"
@@ -74,6 +67,16 @@
           </div>
         </div>
       </div>
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="params.pageNum"
+          background
+          hide-on-single-page
+          :total="total"
+          layout="prev, pager, next"
+          @current-change="currentChange"
+        />
+      </div>
     </div>
 
     <div v-if="videoLog == 2" class="video-detail">
@@ -145,9 +148,10 @@
   let videoSrc = ref('')
   let show = ref(false)
   let loading = ref(false)
+  let total = ref(0)
   let params = reactive({
     pageNum: 1,
-    pageSize: 7,
+    pageSize: 6,
     businessScenicArea: '',
     businessVideoDisplayPosition: ''
   })
@@ -164,18 +168,12 @@
     nextTick(() => {
       videoList.value.forEach(async (item, index) => {
         const video = document.getElementById(`monitorVideo${index}`)
-        let res = await postRefreshApi({
-          type: 'hls',
-          businessVideoDisplayPosition: item.businessVideoDisplayPosition,
-          cameraIndexCode: item.cameraIndexCode
-        })
-        item.hlsUrl = res.data.hlsUrl
         const hls = new Hls({
           maxBufferLength: 10, // 最大缓冲长度（秒）
           maxMaxBufferLength: 15, // 缓冲区长度的上限
           maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
         })
-        hls.loadSource(res.data.hlsUrl)
+        hls.loadSource(item.hlsUrl)
         hls.attachMedia(video)
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
           video.play()
@@ -183,11 +181,16 @@
       })
     })
   }
+  const currentChange = (e) => {
+    videoList.value = []
+    getVideoList()
+  }
   const handleNav = (e) => {
     if (current.value == e) return
     videoLog.value = 1
     params.pageNum = 1
     videoList.value = []
+    total.value = 0
     current.value = e
     getVideoList()
   }
@@ -197,7 +200,7 @@
   }
   const handleItemVideo = (url, type) => {
     videoLog.value = 2
-    nextTick(() => {
+    setTimeout(() => {
       const hls = new Hls({
         maxBufferLength: 10, // 最大缓冲长度（秒）
         maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -209,7 +212,20 @@
         videoRef.value.play()
       })
       if (type == 100) initVideo()
-    })
+    }, 1000)
+    // nextTick(() => {
+    //   const hls = new Hls({
+    //     maxBufferLength: 10, // 最大缓冲长度（秒）
+    //     maxMaxBufferLength: 15, // 缓冲区长度的上限
+    //     maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+    //   })
+    //   hls.loadSource(url)
+    //   hls.attachMedia(videoRef.value)
+    //   hls.on(Hls.Events.MANIFEST_PARSED, () => {
+    //     videoRef.value.play()
+    //   })
+    //   if (type == 100) initVideo()
+    // })
   }
   const handleCamera = async (cameraIndexCode) => {
     show.value = true
@@ -225,22 +241,9 @@
       loading.value = true
       params.businessVideoDisplayPosition = navList.value[current.value].dictValue
       let res = await getVideoListApi(params)
+      total.value = res.total
       if (res.data.length > 0) {
-        let list = res.data
-        list.forEach(async (i) => {
-          let res = await postRefreshApi({
-            type: 'hls',
-            businessVideoDisplayPosition: i.businessVideoDisplayPosition,
-            cameraIndexCode: i.cameraIndexCode
-          })
-          return {
-            ...i,
-            hlsUrl: res.data.hlsUrl
-          }
-        })
-        videoList.value = [...videoList.value, ...res.data]
-        params.pageNum++
-        // postVideoRemain()
+        videoList.value = res.data
         nextTick(() => {
           videoList.value.forEach(async (x, index) => {
             const video = document.getElementById(`monitorVideo${index}`)
@@ -276,21 +279,22 @@
   }
   const getVideoRegions = async () => {
     if (params.businessScenicArea == '三峡之巅') {
-      regionList.value = [{
-        "regions": "调试中",
-        "videoResources": []
+      regionList.value = [
+        {
+          regions: '调试中',
+          videoResources: []
         },
         {
-          "regions": "调试中",
-          "videoResources": []
-        }];
+          regions: '调试中',
+          videoResources: []
+        }
+      ]
     } else {
       let res = await getVideoRegionsApi({
         businessScenicArea: params.businessScenicArea
       })
       regionList.value = res.data
     }
-
   }
   const onMonitorChange = () => {
     monitorChange = PubSub.subscribe('monitorChange', (res, data) => {
@@ -474,37 +478,29 @@
 
   .video {
     &-wrapper {
+      position: relative;
       width: 100%;
       height: vh(960);
       padding: vh(30) vw(20);
+      box-sizing: border-box;
       background-image: url('/src/assets/images/log-v-bg.png');
       background-size: 100% 100%;
+      .pagination {
+        padding: vh(10) vw(30);
+        position: absolute;
+        right: vw(30);
+        bottom: vh(20);
+      }
     }
     &-list {
-      overflow-y: auto;
-      width: 100%;
-      height: 100%;
       gap: vw(8);
       display: flex;
       flex-wrap: wrap;
       align-content: flex-start;
-
-      &::-webkit-scrollbar {
-        width: vw(4); /* 滚动条的宽度 */
-      }
-      /* 滚动条轨道 */
-      &::-webkit-scrollbar-track {
-        background: 'transparent'; /* 轨道的背景色 */
-      }
-      /* 滚动条滑块 */
-      &::-webkit-scrollbar-thumb {
-        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
-        border-radius: 5px; /* 滑块的圆角 */
-      }
     }
     &-item {
       width: vw(686);
-      height: vh(460);
+      height: vh(420);
       padding: vw(10);
       background-image: url('/src/assets/images/item-primary.png');
       background-size: 100% 100%;
@@ -538,7 +534,7 @@
     }
     &-item__video {
       width: 100%;
-      height: vh(446);
+      height: vh(406);
     }
 
     &-detail {