From d1e2cae60666ba37576e3fe7c531e263fa27c0ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LAPTOP-S9HJSOEB=5C=E6=98=8A=E5=A4=A9?=
 <wang.haotian@hzleaper.com>
Date: Mon, 26 May 2025 10:19:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E6=8B=A9=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/checkManage/checkOperation.vue |   3 +-
 src/views/videoWall/index.vue            | 539 +++++++++++------------
 2 files changed, 255 insertions(+), 287 deletions(-)

diff --git a/src/views/checkManage/checkOperation.vue b/src/views/checkManage/checkOperation.vue
index 08f09bd..0da3209 100644
--- a/src/views/checkManage/checkOperation.vue
+++ b/src/views/checkManage/checkOperation.vue
@@ -32,8 +32,7 @@
                                     <a-select showSearch
                                         ref="select"
                                         style="width: 100%"
-                                        :placeholder="checkObj.category"
-                                        :defaultValue="checkObj.category"
+                                        :value="checkObj.category"
                                         @change="change"
 
                                     >
diff --git a/src/views/videoWall/index.vue b/src/views/videoWall/index.vue
index 306eb97..ee666e9 100644
--- a/src/views/videoWall/index.vue
+++ b/src/views/videoWall/index.vue
@@ -1,315 +1,284 @@
-    <template>
-        <div id="videos">
+<template>
+    <div id="videos">
+        <a-button type="primary" @click="full" v-if="!isFullscreen">
+            全屏<a-icon type="right" />
+        </a-button>
+        <a-button type="primary" @click="full" v-if="isFullscreen"
+            ><a-icon type="left" /> 退出全屏
+        </a-button>
 
-            <a-button
-                type="primary"
-                @click="full"
-                v-if="!isFullscreen"
-            > 全屏<a-icon type="right" /> </a-button>
-            <a-button
-                type="primary"
-                @click="full"
-                v-if="isFullscreen"
-            ><a-icon type="left" /> 退出全屏 </a-button>
+        <a-button type="primary" @click="countVideo(2)"> <a-icon type="appstore"/></a-button>
+        <a-button type="primary" @click="countVideo(3)"> <a-icon type="number"/></a-button>
 
-            <a-button
-                type="primary"
-                @click="countVideo(2)"
-            > <a-icon type="appstore" /></a-button>
-            <a-button
-                type="primary"
-                @click="countVideo(3)"
-            > <a-icon type="number" /></a-button>
+        <a-tabs :activeKey="activeKey" default-active-key="1" @edit="onEdit" @change="onTabClick">
+            <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title"> </a-tab-pane>
+        </a-tabs>
 
-            <a-tabs
-                :activeKey="activeKey"
-                default-active-key="1"
-                @edit="onEdit"
-                @change="onTabClick"
+        <a-row v-for="rowIndex in row" :key="rowIndex">
+            <a-col
+                v-for="colIndex in column"
+                :key="colIndex"
+                :span="24 / column"
+                :style="{ height: videoHeight }"
             >
-                <a-tab-pane
-                    v-for="pane in panes"
-                    :key="pane.key"
-                    :tab="pane.title"
-                >
+                <video
+                    class="camera"
+                    :id="rowIndex + '-' + colIndex"
+                    autoplay
+                    muted
+                    :style="{ height: '100%', width: '100%', 'object-fit': 'fill' }"
+                ></video>
+            </a-col>
+        </a-row>
+    </div>
+</template>
 
-                </a-tab-pane>
-            </a-tabs>
+<script>
+import WebRtcPlayer from "../../../public/static/webrtcplayer";
+export default {
+    name: "top",
+    components: {},
+    props: {
+        id: {
+            type: String,
+            default() {
+                return "";
+            }
+        }
+    },
+    data() {
+        return {
+            row: 0,
+            column: 0,
+            a: 0,
+            clientHeight: 0,
+            panes: [],
+            activeKey: 0, //当前页，当前页id，从零开始
+            videoH: 0,
+            isFullscreen: false,
+            originHeight: 0,
+            fullHeight: 0,
+            players: []
+        };
+    },
+    //watch: {},
+    computed: {
+        videoHeight() {
+            return this.clientHeight / this.row + "px";
+        }
+    },
+    destroyed() {
+        this.destory();
+    },
+    mounted() {
+        this.getWallStyle();
+        this.$nextTick(() => {
+            console.log("DOM已更新完成");
 
-            <a-row
-                v-for='rowIndex in row'
-                :key='rowIndex'
-            >
-                <a-col
-                    v-for='colIndex in column'
-                    :key='colIndex'
-                    :span="24/column"
-                    :style="{height: videoHeight}"
-                >
-                    <video
-                        class="camera"
-                        :id="rowIndex+'-'+colIndex"
-                        autoplay
-                        muted
-                        :style="{'height': '100%',width:'100%','object-fit':'fill'}"
-                    ></video>
-                </a-col>
-            </a-row>
-        </div>
-    </template>
+            this.playPageCameras();
+        });
 
-    <script>
-    import WebRtcPlayer from "../../../public/static/webrtcplayer";
-    export default {
-        name: "top",
-        components: {},
-        props: {
-            id: {
-                type: String,
-                default() {
-                    return "";
-                },
-            },
-        },
-        data() {
-            return {
-                row: 0,
-                column: 0,
-                a: 0,
-                clientHeight: 0,
-                panes: [],
-                activeKey: 0, //当前页，当前页id，从零开始
-                videoH: 0,
-                isFullscreen: false,
-                originHeight: 0,
-                fullHeight: 0,
-                players: [],
-            };
+        let isFullscreen =
+            document.fullscreenElement ||
+            document.mozFullScreenElement ||
+            document.webkitFullscreenElement ||
+            document.fullScreen ||
+            document.mozFullScreen ||
+            document.webkitIsFullScreen;
+        this.isFullscreen = !!isFullscreen;
+
+        let that = this;
+        document.addEventListener("fullscreenchange", () => {
+            that.isFullscreen = !that.isFullscreen;
+        });
+        document.addEventListener("mozfullscreenchange", () => {
+            that.isFullscreen = !that.isFullscreen;
+        });
+        document.addEventListener("webkitfullscreenchange", () => {
+            that.isFullscreen = !that.isFullscreen;
+        });
+        document.addEventListener("msfullscreenchange", () => {
+            that.isFullscreen = !that.isFullscreen;
+        });
+    },
+    updated() {},
+    methods: {
+        getWallStyle() {
+            this.$api.httpApi
+                .getWallStyle({
+                    data: {}
+                })
+                .then(res => {
+                    if (res.code == 200) {
+                        this.row = res.data[0];
+                        this.column = res.data[1];
+                        this.getClientHeight();
+                        sessionStorage.setItem("originHeight", this.clientHeight);
+                    }
+                })
+                .catch(err => {
+                    console.log(err);
+                });
         },
-        //watch: {},
-        computed: {
-            videoHeight() {
-                return (this.clientHeight / this.row )+ "px";
-            },
+        getClientHeight() {
+            this.clientHeight = this.$el.clientHeight - 40;
+
+            console.log("clientHeight:" + this.clientHeight);
         },
-        destroyed() {
-            this.destory();
+        onEdit(targetKey, action) {
+            const index = this.panes.findIndex(pane => pane.key === targetKey);
+            if (index !== -1) {
+                this.panes.splice(index, 1);
+            }
         },
-        mounted() {
-            this.getWallStyle();
-            this.$nextTick(() => {
-                console.log("DOM已更新完成");
+        //一页个数
+        countVideo(i) {
+            this.row = i;
+            this.column = i;
 
-                this.playPageCameras();
-            });
-
-            let isFullscreen =
-                document.fullscreenElement ||
-                document.mozFullScreenElement ||
-                document.webkitFullscreenElement ||
-                document.fullScreen ||
-                document.mozFullScreen ||
-                document.webkitIsFullScreen;
-            this.isFullscreen = !!isFullscreen;
+            this.activeKey = 0;
+            this.playPageCameras();
+        },
+        //墙信息
+        pageInfo(cameras) {
+            var page = Math.ceil(cameras.length / (this.row * this.column));
+            this.panes = [];
+            for (var i = 1; i <= page; i++) {
+                this.panes.push({
+                    title: "视频墙 " + i,
+                    content: "Content of Tab " + i,
+                    key: i - 1
+                });
+            }
+        },
+        changeTab(key) {
+            console.log(key);
+        },
+        onTabClick(key) {
+            this.destory();
 
-            let that = this;
-            document.addEventListener("fullscreenchange", () => {
-                that.isFullscreen = !that.isFullscreen;
-            });
-            document.addEventListener("mozfullscreenchange", () => {
-                that.isFullscreen = !that.isFullscreen;
-            });
-            document.addEventListener("webkitfullscreenchange", () => {
-                that.isFullscreen = !that.isFullscreen;
-            });
-            document.addEventListener("msfullscreenchange", () => {
-                that.isFullscreen = !that.isFullscreen;
-            });
+            console.log(key);
+            this.activeKey = key;
+            this.playPageCameras();
         },
-        updated() {},
-        methods: {
-            getWallStyle() {
+
+        playPageCameras() {
+            this.$nextTick(() => {
                 this.$api.httpApi
-                    .getWallStyle({
-                        data: {},
+                    .getAllCameras({
+                        data: {}
                     })
-                    .then((res) => {
+                    .then(res => {
                         if (res.code == 200) {
-                            this.row = res.data[0];
-                            this.column = res.data[1];
-                            this.getClientHeight();
-                            sessionStorage.setItem(
-                                "originHeight",
-                                this.clientHeight
+                            let cameras = res.data;
+                            this.pageInfo(cameras);
+                            var pageSize = this.row * this.column;
+                            var camerasPage = cameras.slice(
+                                this.activeKey * pageSize,
+                                (this.activeKey + 1) * pageSize
                             );
+                            console.log(camerasPage);
+                            this.players = [];
+                            for (let i = 1; i <= camerasPage.length; i++) {
+                                let rowIndex = Math.floor((i - 1) / this.column) + 1;
+                                if (rowIndex > this.row) {
+                                    return;
+                                }
+                                let columnIndex = i % this.column;
+                                if (columnIndex == 0) {
+                                    columnIndex = this.column;
+                                }
+                                let idName = rowIndex + "-" + columnIndex;
+                                console.log("idName:" + idName);
+                                let server =
+                                    camerasPage[i - 1].rtcServer +
+                                    ":" +
+                                    camerasPage[i - 1].rtcServerPort;
+                                let video = document.getElementById(idName);
+                                console.log(video);
+                                let player = new WebRtcPlayer(
+                                    server,
+                                    video,
+                                    "camera" + camerasPage[i - 1].id
+                                );
+                                this.players.push(player);
+                            }
                         }
                     })
-                    .catch((err) => {
+                    .catch(err => {
                         console.log(err);
                     });
-            },
-            getClientHeight() {
-                this.clientHeight = this.$el.clientHeight - 40;
-
-                console.log("clientHeight:" + this.clientHeight);
-            },
-            onEdit(targetKey, action) {
-                const index = this.panes.findIndex(
-                    (pane) => pane.key === targetKey
-                );
-                if (index !== -1) {
-                    this.panes.splice(index, 1);
-                }
-            },
-            //一页个数
-            countVideo(i) {
-                this.row = i;
-                this.column = i;
-
-                this.activeKey = 0;
-                this.playPageCameras();
-            },
-            //墙信息
-            pageInfo(cameras) {
-                var page = Math.ceil(cameras.length / (this.row * this.column));
-                this.panes = [];
-                for (var i = 1; i <= page; i++) {
-                    this.panes.push({
-                        title: "视频墙 " + i,
-                        content: "Content of Tab " + i,
-                        key: i - 1,
-                    });
-                }
-            },
-            changeTab(key) {
-                console.log(key);
-            },
-            onTabClick(key) {
-                this.destory();
-
-                console.log(key);
-                this.activeKey = key;
-                this.playPageCameras();
-            },
+            });
+        },
+        destory() {
+            for (let player of this.players) {
+                console.log("stop");
+                player.destroy();
+            }
+        },
 
-            playPageCameras() {
-                this.$nextTick(() => {
-                    this.$api.httpApi
-                        .getAllCameras({
-                            data: {},
-                        })
-                        .then((res) => {
-                            if (res.code == 200) {
-                                let cameras = res.data;
-                                this.pageInfo(cameras);
-                                var pageSize = this.row * this.column;
-                                var camerasPage = cameras.slice(
-                                    this.activeKey * pageSize,
-                                    (this.activeKey + 1) * pageSize
-                                );
-                                console.log(camerasPage);
-                                this.players = [];
-                                for (let i = 1; i <= camerasPage.length; i++) {
-                                    let rowIndex =
-                                        Math.floor((i - 1) / this.column) + 1;
-                                    if (rowIndex > this.row) {
-                                        return;
-                                    }
-                                    let columnIndex = i % this.column;
-                                    if (columnIndex == 0) {
-                                        columnIndex = this.column;
-                                    }
-                                    let idName = rowIndex + "-" + columnIndex;
-                                    console.log("idName:" + idName);
-                                    let server =
-                                        camerasPage[i - 1].rtcServer +
-                                        ":" +
-                                        camerasPage[i - 1].rtcServerPort;
-                                    let video = document.getElementById(idName);
-                                    console.log(video);
-                                    let player = new WebRtcPlayer(
-                                        server,
-                                        video,
-                                        "camera" + camerasPage[i - 1].id
-                                    );
-                                    this.players.push(player);
-                                }
-                            }
-                        })
-                        .catch((err) => {
-                            console.log(err);
-                        });
-                });
-            },
-            destory() {
-                for (let player of this.players) {
-                    console.log("stop");
-                    player.destroy();
-                }
-            },
+        full() {
+            if (this.isFullscreen) {
+                this.exitfullscreen();
+            } else {
+                this.enterfullscreen();
+            }
+        },
+        //控制全屏
+        enterfullscreen() {
+            //进入全屏
+            var docElm = document.getElementById("videos"); // 指定容器id
+            //W3C
+            if (docElm.requestFullscreen) {
+                docElm.requestFullscreen();
+            }
 
-            full() {
-                if (this.isFullscreen) {
-                    this.exitfullscreen();
+            //FireFox
+            else if (docElm.mozRequestFullScreen) {
+                docElm.mozRequestFullScreen();
+            }
+            //Chrome等
+            else if (docElm.webkitRequestFullScreen) {
+                docElm.webkitRequestFullScreen();
+            }
+            //IE11
+            else if (elem.msRequestFullscreen) {
+                elem.msRequestFullscreen();
+            }
+            this.$nextTick(() => {
+                this.clientHeight = document.body.clientHeight;
+                console.log("full:" + document.body.clientHeight);
+            });
+        },
+        //退出全屏
+        exitfullscreen() {
+            console.log("tuichu");
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            } else if (document.webkitCancelFullScreen) {
+                document.webkitCancelFullScreen();
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
+            }
+            this.$nextTick(() => {
+                let origin = sessionStorage.getItem("originHeight");
+                if (origin) {
+                    this.clientHeight = origin;
                 } else {
-                    this.enterfullscreen();
-                }
-            },
-            //控制全屏
-            enterfullscreen() {
-                //进入全屏
-                var docElm = document.getElementById("videos"); // 指定容器id
-                //W3C
-                if (docElm.requestFullscreen) {
-                    docElm.requestFullscreen();
-                }
-
-                //FireFox
-                else if (docElm.mozRequestFullScreen) {
-                    docElm.mozRequestFullScreen();
-                }
-                //Chrome等
-                else if (docElm.webkitRequestFullScreen) {
-                    docElm.webkitRequestFullScreen();
+                    this.getClientHeight();
                 }
-                //IE11
-                else if (elem.msRequestFullscreen) {
-                    elem.msRequestFullscreen();
-                }
-                this.$nextTick(() => {
-                    this.clientHeight = document.body.clientHeight;
-                    console.log("full:" + document.body.clientHeight);
-                });
-            },
-            //退出全屏
-            exitfullscreen() {
-                console.log("tuichu");
-                if (document.exitFullscreen) {
-                    document.exitFullscreen();
-                } else if (document.mozCancelFullScreen) {
-                    document.mozCancelFullScreen();
-                } else if (document.webkitCancelFullScreen) {
-                    document.webkitCancelFullScreen();
-                } else if (document.msExitFullscreen) {
-                    document.msExitFullscreen();
-                }
-                this.$nextTick(() => {
-                    let origin = sessionStorage.getItem("originHeight");
-                    if (origin) {
-                        this.clientHeight = origin;
-                    } else {
-                        this.getClientHeight();
-                    }
-                });
-            },
-        },
-    };
-    </script>
-    <style>
-    /* #videos > .ant-row  {
+            });
+        }
+    }
+};
+</script>
+<style>
+/* #videos > .ant-row  {
             height: calc(100% / 8);
         }
         #videos > .ant-row  > .ant-col{
             height: calc(100% / 8);
         } */
-    </style>
\ No newline at end of file
+</style>