feat：修改视频列表为6个

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

@@ -142,7 +142,7 @@
   let loading = ref(false)
   let params = reactive({
     pageNum: 1,
-    pageSize: 16,
+    pageSize: 7,
     businessScenicArea: '',
     businessVideoDisplayPosition: ''
   })
@@ -215,39 +215,46 @@
     videoSrc.value = res.data.url
   }
   const getVideoList = async () => {
-    params.businessVideoDisplayPosition = navList.value[current.value].dictValue
-    let res = await getVideoListApi(params)
-    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()
-      nextTick(() => {
-        videoList.value.forEach(async (x, index) => {
-          const video = document.getElementById(`monitorVideo${index}`)
-          const hls = new Hls({
-            maxBufferLength: 10, // 最大缓冲长度（秒）
-            maxMaxBufferLength: 15, // 缓冲区长度的上限
-            maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+    try {
+      if (loading.value) return
+      loading.value = true
+      params.businessVideoDisplayPosition = navList.value[current.value].dictValue
+      let res = await getVideoListApi(params)
+      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
           })
-          hls.loadSource(x.hlsUrl)
-          hls.attachMedia(video)
-          hls.on(Hls.Events.MANIFEST_PARSED, () => {
-            video.play()
+          return {
+            ...i,
+            hlsUrl: res.data.hlsUrl
+          }
+        })
+        videoList.value = [...videoList.value, ...res.data]
+        params.pageNum++
+        // postVideoRemain()
+        nextTick(() => {
+          videoList.value.forEach(async (x, index) => {
+            const video = document.getElementById(`monitorVideo${index}`)
+            const hls = new Hls({
+              maxBufferLength: 10, // 最大缓冲长度（秒）
+              maxMaxBufferLength: 15, // 缓冲区长度的上限
+              maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+            })
+            hls.loadSource(x.hlsUrl)
+            hls.attachMedia(video)
+            hls.on(Hls.Events.MANIFEST_PARSED, () => {
+              video.play()
+            })
           })
         })
-      })
+      }
+      loading.value = false
+    } catch (error) {
+      loading.value = false
     }
   }
   const getVideoType = async (id) => {
@@ -263,17 +270,10 @@
     }
   }
   const getVideoRegions = async () => {
-    if (loading.value) return
-    loading.value = true
-    try {
-      let res = await getVideoRegionsApi({
-        businessScenicArea: params.businessScenicArea
-      })
-      regionList.value = res.data
-      loading.value = false
-    } catch (error) {
-      loading.value = false
-    }
+    let res = await getVideoRegionsApi({
+      businessScenicArea: params.businessScenicArea
+    })
+    regionList.value = res.data
   }
   const onMonitorChange = () => {
     monitorChange = PubSub.subscribe('monitorChange', (res, data) => {
@@ -486,12 +486,12 @@
       }
     }
     &-item {
-      width: vw(406);
-      height: vh(300);
+      width: vw(686);
+      height: vh(460);
       padding: vw(10);
       background-image: url('/src/assets/images/item-primary.png');
       background-size: 100% 100%;
-      &:nth-child(5n) {
+      &:nth-child(3n) {
         margin-right: 0;
       }
     }
@@ -521,7 +521,7 @@
     }
     &-item__video {
       width: 100%;
-      height: vh(286);
+      height: vh(446);
     }
 
     &-detail {