From f6c06f393b433bfa4b8bd317d181cc59c16ca236 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: Wed, 18 Dec 2024 09:42:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=99=E4=BF=A1=E6=81=AF=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/videoWall/index.vue | 566 +++++++++++++++++-----------------
 1 file changed, 283 insertions(+), 283 deletions(-)

diff --git a/src/views/videoWall/index.vue b/src/views/videoWall/index.vue
index cb71e07..306eb97 100644
--- a/src/views/videoWall/index.vue
+++ b/src/views/videoWall/index.vue
@@ -1,315 +1,315 @@
-<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-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-tab-pane>
+            </a-tabs>
 
-        <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-row
+                v-for='rowIndex in row'
+                :key='rowIndex'
             >
-                <video
-                    class="camera"
-                    :id="rowIndex+'-'+colIndex"
-                    autoplay
-                    muted
-                    :style="{'height': '100%',width:'100%','object-fit':'fill'}"
-                ></video>
-            </a-col>
-        </a-row>
-    </div>
-</template>
+                <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>
 
-<script>
-import WebRtcPlayer from "../../../public/static/webrtcplayer";
-export default {
-    name: "top",
-    components: {},
-    props: {
-        id: {
-            type: String,
-            default() {
-                return "";
+    <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";
+        data() {
+            return {
+                row: 0,
+                column: 0,
+                a: 0,
+                clientHeight: 0,
+                panes: [],
+                activeKey: 0, //当前页，当前页id，从零开始
+                videoH: 0,
+                isFullscreen: false,
+                originHeight: 0,
+                fullHeight: 0,
+                players: [],
+            };
         },
-    },
-    destroyed() {
-        this.destory();
-    },
-    mounted() {
-        this.getWallStyle();
-        this.$nextTick(() => {
-            console.log("DOM已更新完成");
-
-            this.playPageCameras();
-        });
-
-        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);
-                });
-        },
-        getClientHeight() {
-            this.clientHeight = this.$el.clientHeight - 40;
-
-            console.log("clientHeight:" + this.clientHeight);
+        //watch: {},
+        computed: {
+            videoHeight() {
+                return (this.clientHeight / this.row )+ "px";
+            },
         },
-        onEdit(targetKey, action) {
-            const index = this.panes.findIndex(
-                (pane) => pane.key === targetKey
-            );
-            if (index !== -1) {
-                this.panes.splice(index, 1);
-            }
+        destroyed() {
+            this.destory();
         },
-        //一页个数
-        countVideo(i) {
-            this.row = i;
-            this.column = i;
+        mounted() {
+            this.getWallStyle();
+            this.$nextTick(() => {
+                console.log("DOM已更新完成");
 
-            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();
+                this.playPageCameras();
+            });
 
-            console.log(key);
-            this.activeKey = key;
-            this.playPageCameras();
-        },
+            let isFullscreen =
+                document.fullscreenElement ||
+                document.mozFullScreenElement ||
+                document.webkitFullscreenElement ||
+                document.fullScreen ||
+                document.mozFullScreen ||
+                document.webkitIsFullScreen;
+            this.isFullscreen = !!isFullscreen;
 
-        playPageCameras() {
-            this.$nextTick(() => {
+            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
-                    .getAllCameras({
+                    .getWallStyle({
                         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
+                            this.row = res.data[0];
+                            this.column = res.data[1];
+                            this.getClientHeight();
+                            sessionStorage.setItem(
+                                "originHeight",
+                                this.clientHeight
                             );
-                            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();
-            }
-        },
+            },
+            getClientHeight() {
+                this.clientHeight = this.$el.clientHeight - 40;
 
-        full() {
-            if (this.isFullscreen) {
-                this.exitfullscreen();
-            } else {
-                this.enterfullscreen();
-            }
-        },
-        //控制全屏
-        enterfullscreen() {
-            //进入全屏
-            var docElm = document.getElementById("videos"); // 指定容器id
-            //W3C
-            if (docElm.requestFullscreen) {
-                docElm.requestFullscreen();
-            }
+                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;
 
-            //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;
+                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();
+            },
+
+            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.getClientHeight();
+                    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();
+                }
+                //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  {
-		height: calc(100% / 8);
-	}
-    #videos > .ant-row  > .ant-col{
-		height: calc(100% / 8);
-	} */
-</style>
\ No newline at end of file
+    };
+    </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