feat:视屏分页修改

src/views/device/components/lib/custom/video-custom.js

@@ -103,14 +103,25 @@ const clearClss = ($wsControl) => {
     if ($flex1) $flex1.remove()
 }
 
-export const rendererVideoPage = (opts = {}) => {
+export const rendererVideoPage = async (opts = {}) => {
+    const defaults = { total: 0, pageSize: 10, current: 1, onChange: () => { }, onInit: undefined }
+    const params = { ...defaults, ...opts }
+    // 在 DOM 渲染完成后的下一个帧触发初始化回调
+    if (typeof params.onInit === 'function') {
+        try {
+            const total = await params.onInit()
+            if (total && typeof total === "number") {
+                params.total = total
+            }
+        } catch (e) {
+            console.warn('[rendererVideoPage] onInit 回调执行异常', e)
+        }
+    }
     const $wsControl = document.querySelector(".ws-control")
     if (!$wsControl) return
     clearClss($wsControl)
     // 先查找有没有 video-page 元素
     let $page = $wsControl.querySelector(`#${pageDivId}`)
-    const defaults = { total: 0, pageSize: 10, current: 1, onChange: () => { } }
-    const params = { ...defaults, ...opts }
     if (!$page) {
         const node = rendererPage(params.current, params.pageSize, params.total, params.onChange)
         if (typeof $wsControl.prepend === 'function') {

src/views/device/components/preview-video/index.vue

@@ -54,7 +54,7 @@ async function init(channelCodelist: any, deviceCode: any) {
         }
         state.current = 1
         state.num = 16
-        initVideo()
+        refreshPage()
     } catch (error: any) {
         console.error("|视频预览初始化|,意外的错误", error);
     }
@@ -63,7 +63,10 @@ async function init(channelCodelist: any, deviceCode: any) {
 // 初始化视频
 async function initVideo() {
     if (query.list && query.list.length) {
-        state.num = findSuitableNum(query.list.length, state.numList)
+        const length = query.list.length
+        if (length < 16) {
+            state.num = findSuitableNum(length, state.numList)
+        }
     }
     const _params = {
         deviceChannelCodeList: query.list ?? [],
@@ -121,7 +124,6 @@ function initPlayerManager() {
                         realPlayer.setPlayerAdapter("stretching");
                     }
                     playReal();
-                    refreshPage()
                     break;
                 // 主/辅码流切换回调
                 case "changeStreamType":
@@ -154,6 +156,7 @@ function initPlayerManager() {
                 case "windowNumChanged":
                     console.log("每页", data);
                     if (data == state.num) return
+                    state.current = 1
                     state.num = data
                     refreshPage()
                     break;
@@ -216,11 +219,15 @@ async function playReal() {
 }
 
 function refreshPage() {
-    console.log("total:", state.total);
     rendererVideoPage({
         current: state.current,
         pageSize: state.num,
         total: state.total,
+        onInit: async () => {
+            destroy();
+            await initVideo();
+            return state.total
+        },
         onChange: (page: any, pageSize: any) => {
             console.log("分页", page, pageSize);
             if (page == state.current && pageSize == state.num) {
@@ -228,8 +235,7 @@ function refreshPage() {
             }
             state.current = page;
             state.num = pageSize;
-            destroy()
-            initVideo();
+            refreshPage()
         }
     })
 }