自动窗口大小

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

@@ -44,6 +44,7 @@ const state = reactive({
     loading: false,
     treeLoading: false,
     videoNum: 0,
+    numList: [1, 4, 9, 16, 25],
 })
 
 const detail = reactive<any>({
@@ -51,7 +52,8 @@ const detail = reactive<any>({
 })
 
 const channel = reactive<any>({
-    treeList: []
+    treeList: [],
+    list: []
 })
 
 const handleClose = () => {
@@ -72,11 +74,13 @@ const openDialog = async (id: string) => {
 const handleNodeClick = (e: any) => {
     destroy()
     if (e.id == -1) {
+        state.videoNum = findSuitableNum(channel.list.length, state.numList);
         initVideo()
         playReal()
         return
     }
-    initVideo(1, e.channelCode)
+    state.videoNum = 1
+    initVideo(e.channelCode)
 }
 
 // 初始化表单数据
@@ -103,6 +107,7 @@ const getDeviceChannelList = async () => {
         if (code != 0) throw new Error()
         channel.treeList = data
         channel.list = data
+        state.videoNum = findSuitableNum(channel.list.length, state.numList);
         // 处理树
         if (data && data.length) {
             const tree = data.map((v: any) => {
@@ -131,7 +136,7 @@ const getDeviceChannelList = async () => {
 }
 
 // 初始化视频
-function initVideo(num: number = 4, channelCode?: string) {
+function initVideo(channelCode?: string) {
     if (realPlayer) {
         realPlayer = null;
     }
@@ -139,7 +144,7 @@ function initVideo(num: number = 4, channelCode?: string) {
         el: "ws-real-player" /** 实时预览容器id，创建多个播放器，传入不同的容器id即可 **/,
         type: "real" /** real - 实时预览  record - 录像回放 **/,
         maxNum: 25 /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/,
-        num: num /** 初始化，页面显示的路数 **/,
+        num: state.videoNum /** 初始化，页面显示的路数 **/,
         showControl: true /** 是否显示工具栏，默认显示 **/,
         prefixUrl: "lib" /** 解码库所在位置的前缀 **/,
         isRTPStream: true /** true-标准码流拉流 false-私有码流拉流 **/,
@@ -247,6 +252,16 @@ function destroy() {
     }
 }
 
+// 根据当前数量在numList中找到合适的值（大于等于当前值的最小值）
+function findSuitableNum(currentNum: any, numList: any) {
+    const suitableNums = numList.filter((num: any) => num >= currentNum);
+    if (suitableNums.length > 0) {
+        return Math.min(...suitableNums);
+    } else {
+        return Math.max(...numList);
+    }
+}
+
 defineExpose({
     openDialog
 });

src/views/device/components/replay-video/replay-video-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="state.dialogVisible" title="预览" width="75%" :before-close="handleClose">
+    <el-dialog v-model="state.dialogVisible" title="回放" width="75%" :before-close="handleClose">
         <div class="flex justify-center items-start">
             <div v-if="state.type == 'device'" class="min-w-[20%]">
                 <el-tree :data="channel.treeList" :props="{
@@ -14,7 +14,7 @@
                 </el-tree>
             </div>
             <div class="flex-1 flex flex-col overflow-hidden video-container">
-                <el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="initVideo">
+                <el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="doSearch">
                     <el-form-item style="width: 450px;" label="录像时间" prop="videoDateList">
                         <el-date-picker v-model="queryForm.videoDateList" value-format="YYYY-MM-DD HH:mm:ss"
                             type="datetimerange" :disabled-date="disabledDate" placeholder="请选择日期范围"
@@ -29,7 +29,7 @@
                             placeholder="请选择录像来源" />
                     </el-form-item>
                     <el-form-item>
-                        <el-button icon="search" type="primary" @click="initVideo">
+                        <el-button icon="search" type="primary" @click="doSearch">
                             确定
                         </el-button>
                     </el-form-item>
@@ -69,7 +69,9 @@ const state = reactive<any>({
     loading: false,
     treeLoading: false,
     currentNum: 4,
-    type: "device"
+    numList: [1, 4, 9, 16, 25],
+    type: "device",
+    code: null
 })
 
 const detail = reactive<any>({})
@@ -93,6 +95,7 @@ const openDialog = async (type: string, code: string, timeRange?: { startTime: s
     console.log("type:", type, "code:", code, "timeRange:", timeRange);
     if (!type || !code) return
     state.type = type
+    state.code = code
     state.dialogVisible = true
     if (!code) return
 
@@ -103,13 +106,16 @@ const openDialog = async (type: string, code: string, timeRange?: { startTime: s
         state.startTimestamp = Math.floor(new Date(timeRange.startTime).getTime() / 1000)
         state.endTimestamp = Math.floor(new Date(timeRange.endTime).getTime() / 1000)
     }
+    await doSearch()
+}
 
+const doSearch = async () => {
     // 设备详情
-    if (type === "device") {
-        await getdeviceManageData(code);
+    if (state.type === "device") {
+        await getdeviceManageData(state.code);
     }
     // 设备通道详情
-    await getDeviceChannelList(code)
+    await getDeviceChannelList(state.code)
 }
 
 const handleClose = () => {
@@ -122,7 +128,7 @@ const handleNodeClick = (e: any) => {
     console.log("点击树:", e);
     destroy()
     if (e.id == -1) {
-        state.currentNum = 4
+        state.currentNum = findSuitableNum(channel.list.length, state.numList);
         initVideo()
         return
     }
@@ -167,6 +173,7 @@ const getDeviceChannelList = async (codeStr: any) => {
 
         channel.treeList = data
         channel.list = data
+        state.currentNum = findSuitableNum(channel.list.length, state.numList);
         // 处理树
         if (data && data.length) {
             const tree = data.map((v: any) => {
@@ -367,6 +374,16 @@ const disabledDate = (time: Date) => {
     return false
 }
 
+// 根据当前数量在numList中找到合适的值（大于等于当前值的最小值）
+function findSuitableNum(currentNum: any, numList: any) {
+    const suitableNums = numList.filter((num: any) => num >= currentNum);
+    if (suitableNums.length > 0) {
+        return Math.min(...suitableNums);
+    } else {
+        return Math.max(...numList);
+    }
+}
+
 // 暴露变量
 defineExpose({
     openDialog