From 657fba01cac2e04beb2e75e571b8f0b859539e05 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: Tue, 26 Dec 2023 19:12:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=A2=99=E9=87=87=E7=94=A8?=
 =?UTF-8?q?=E5=8D=95=E5=A2=99=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js           |  38 ++--
 src/views/videoWall/index.vue | 345 ++++++++++++++++++++++++----------
 2 files changed, 260 insertions(+), 123 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 285b666..a3983e3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,28 +34,28 @@ const routes = [{
             name: 'videoWall1`',
             meta: {
                 icon: 'desktop',
-                name: '视频墙1'
+                name: '视频墙'
             },
             component: () => import('@/views/videoWall/index'),
         },
-        {
-            path: 'videoWall2',
-            name: 'videoWall2',
-            meta: {
-                icon: 'desktop',
-                name: '视频墙2'
-            },
-            component: () => import('@/views/videoWall2/index'),
-        },
-        {
-            path: 'videoWall3',
-            name: 'videoWall3',
-            meta: {
-                icon: 'desktop',
-                name: '视频墙3'
-            },
-            component: () => import('@/views/videoWall3/index'),
-        },
+        // {
+        //     path: 'videoWall2',
+        //     name: 'videoWall2',
+        //     meta: {
+        //         icon: 'desktop',
+        //         name: '视频墙2'
+        //     },
+        //     component: () => import('@/views/videoWall2/index'),
+        // },
+        // {
+        //     path: 'videoWall3',
+        //     name: 'videoWall3',
+        //     meta: {
+        //         icon: 'desktop',
+        //         name: '视频墙3'
+        //     },
+        //     component: () => import('@/views/videoWall3/index'),
+        // },
         {
             path: 'realTimeMonitoring',
             name: 'realTimeMonitoring',
diff --git a/src/views/videoWall/index.vue b/src/views/videoWall/index.vue
index dfd81b8..a85b8bb 100644
--- a/src/views/videoWall/index.vue
+++ b/src/views/videoWall/index.vue
@@ -1,57 +1,104 @@
 <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-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>
+        <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-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>
+            </a-tab-pane>
+        </a-tabs>
+
     </div>
 </template>
 
 <script>
-import WebRtcPlayer from "../../../public/static/webrtcplayer"
+import WebRtcPlayer from "../../../public/static/webrtcplayer";
 export default {
-    name: 'top',
+    name: "top",
     components: {},
     props: {
         id: {
             type: String,
-            default () {
-                return ''
-            }
-        }
+            default() {
+                return "";
+            },
+        },
     },
-    data () {
+    data() {
         return {
-            row : 0,
-            column : 0,
+            row: 0,
+            column: 0,
             a: 0,
             clientHeight: 0,
+            panes: [ ],
+            activeKey: 0,//当前页，当前页id，从零开始
             videoH: 0,
             isFullscreen: false,
             originHeight: 0,
             fullHeight: 0,
-            players: []
-        }
+            players: [],
+        };
     },
     //watch: {},
     computed: {
         videoHeight() {
-            return( this.clientHeight/ this.row ) + 'px';
-        }
+            return this.clientHeight / this.row + "px";
+        },
     },
     destroyed() {
-        this.destory()
+        this.destory();
     },
-    mounted () {
+    mounted() {
         this.getWallStyle();
-        
+
         this.$nextTick(() => {
-            this.getAllCameras()
+            this.playPageCameras();
         });
         let isFullscreen =
             document.fullscreenElement ||
@@ -61,7 +108,7 @@ export default {
             document.mozFullScreen ||
             document.webkitIsFullScreen;
         this.isFullscreen = !!isFullscreen;
-       
+
         let that = this;
         document.addEventListener("fullscreenchange", () => {
             that.isFullscreen = !that.isFullscreen;
@@ -77,127 +124,217 @@ export default {
         });
     },
     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)
-            })
+        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)
+            this.clientHeight = this.$el.clientHeight - 40;
+
+            console.log("clientHeight:" + this.clientHeight);
         },
-        getAllCameras(){
-            this.$api.httpApi.getAllCameras1({
-                data: {}
-            }).then(res => {
-                if(res.code == 200) {
-                    let cameras = res.data;
-                    for(let i = 1;i<=cameras.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;
+        onEdit(targetKey, action) {
+            const index = this.panes.findIndex((pane) => pane.key === targetKey);
+            if (index !== -1) {
+                this.panes.splice(index, 1);
+            }
+        },
+        getAllCameras() {
+            this.$api.httpApi
+                .getAllCameras1({
+                    data: {},
+                })
+                .then((res) => {
+                    if (res.code == 200) {
+                        let cameras = res.data;
+                        for (let i = 1; i <= cameras.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 =
+                                cameras[i - 1].rtcServer +
+                                ":" +
+                                cameras[i - 1].rtcServerPort;
+                            let video = document.getElementById(idName);
+                            let player = new WebRtcPlayer(
+                                server,
+                                video,
+                                "camera" + cameras[i - 1].id
+                            );
+                            this.players.push(player);
                         }
-                        let idName = rowIndex + "-" + columnIndex;
-                        console.log("idName:"+idName);
-                        let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
-                        let video = document.getElementById(idName);
-                        let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
-                        this.players.push(player);
                     }
-                }
-            }).catch(err => {
-                console.log(err)
-            })
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //一页个数
+        countVideo(i){
+
+            this.row= i;
+            this.column= i;
+            
+            this.activeKey=0;
+            this.playPageCameras();
         },
-        destory(){
-            for(let player of this.players){
-                console.log("stop")
-                player.destroy()
+        //墙信息
+        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();
+            
+        },
         
-        full () {
-            if(this.isFullscreen){
-                this.exitfullscreen()
-            }else{
-                this.enterfullscreen()
-            }
+        playPageCameras() {
             
+            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);
+                            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
+        enterfullscreen() {
+            //进入全屏
+            var docElm = document.getElementById("videos"); // 指定容器id
             //W3C
             if (docElm.requestFullscreen) {
-                docElm.requestFullscreen()
+                docElm.requestFullscreen();
             }
-           
+
             //FireFox
             else if (docElm.mozRequestFullScreen) {
-                docElm.mozRequestFullScreen()
+                docElm.mozRequestFullScreen();
             }
             //Chrome等
             else if (docElm.webkitRequestFullScreen) {
-                docElm.webkitRequestFullScreen()
+                docElm.webkitRequestFullScreen();
             }
             //IE11
             else if (elem.msRequestFullscreen) {
-                elem.msRequestFullscreen()
+                elem.msRequestFullscreen();
             }
             this.$nextTick(() => {
                 this.clientHeight = document.body.clientHeight;
-                console.log("full:"+document.body.clientHeight)
-            })
-            
+                console.log("full:" + document.body.clientHeight);
+            });
         },
         //退出全屏
-        exitfullscreen () {
+        exitfullscreen() {
             console.log("tuichu");
             if (document.exitFullscreen) {
-                document.exitFullscreen()
+                document.exitFullscreen();
             } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen()
+                document.mozCancelFullScreen();
             } else if (document.webkitCancelFullScreen) {
-                document.webkitCancelFullScreen()
+                document.webkitCancelFullScreen();
             } else if (document.msExitFullscreen) {
-                document.msExitFullscreen()
+                document.msExitFullscreen();
             }
             this.$nextTick(() => {
-                let origin = sessionStorage.getItem('originHeight');
-                if(origin){
+                let origin = sessionStorage.getItem("originHeight");
+                if (origin) {
                     this.clientHeight = origin;
-                }else{
+                } else {
                     this.getClientHeight();
                 }
-                
-            })
-        }
-    }
-}
-
+            });
+        },
+    },
+};
 </script>
 <style>
-  
-  /* #videos > .ant-row  {
+/* #videos > .ant-row  {
 		height: calc(100% / 8);
 	}
     #videos > .ant-row  > .ant-col{
 		height: calc(100% / 8);
 	} */
-   
-  </style>
\ No newline at end of file
+</style>
\ No newline at end of file