修改布局

src/router/index.js

@@ -34,28 +34,11 @@ 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: 'realTimeMonitoring',
             name: 'realTimeMonitoring',
@@ -76,15 +59,15 @@ const routes = [{
             },
             component: () => import('@/views/historyMonitoring/index')
         },
-        {
+        // {
-            path: 'alarmLog',
+        //     path: 'alarmLog',
-            name: 'alarmLog',
+        //     name: 'alarmLog',
-            meta: {
+        //     meta: {
-                icon: 'eye',
+        //         icon: 'eye',
-                name: '告警日志'
+        //         name: '告警日志'
-            },
+        //     },
-            component: () => import('@/views/alarmVideos/alarmLog')
+        //     component: () => import('@/views/alarmVideos/alarmLog')
-        },
+        // },
         {
             path: 'checkManage',
             name: 'checkManage',

src/views/checkManage/Subsection.vue

@@ -89,7 +89,7 @@ export default {
             default: () => {
                 return {
                     row: 10,
-                    column: 30
+                    column: 24
                 }
             }
         },

src/views/checkManage/checkOperation.vue

@@ -44,7 +44,7 @@
                         </div>
                         <p>盘点图1</p>
                     </div>
-                    <div class="img-box">
+                    <!-- <div class="img-box">
                             <viewer v-if="checkObj.checkPic" style="height: 300px">
                                 <img :src="imgUrl+checkObj.checkPic2"/>
                             </viewer>
@@ -54,7 +54,7 @@
                             暂无图片
                         </div>
                         <p>盘点图2</p>
-                    </div>
+                    </div> -->
                     <!-- <div class="img-box">
                         <viewer v-if="checkObj.preoperationPic" style="height:300px;">
                             <img  :src="imgUrl+checkObj.preoperationPic"/>
@@ -330,7 +330,7 @@ export default {
                 &-content {
                     display: flex;
                     align-items: center;
-                    justify-content: space-between;
+                    justify-content: center;
                     padding-left: 25px;
 
                     .img-box {
@@ -340,7 +340,7 @@ export default {
                         flex-direction: column;
                         font-size: 17px;
                         height: 400px;
-                        margin-right: 10px;
+                        margin-right: 150px;
                         img {
                             height: 100%
                         }

src/views/checkManage/index.vue

@@ -46,13 +46,13 @@
                 ></a-tag>
                 盘点正确
             </span>
-            <span class="info-text">
+            <!-- <span class="info-text">
                 <a-tag
                     color="#f2ed48"
                     style="width: 30px; height: 20px; margin-right: 6px"
                 ></a-tag>
                 需盘点
-            </span>
+            </span> -->
             <span class="info-text">
                 <a-tag
                     color="#bfbfbf"

src/views/historyCheck/index.vue

@@ -108,7 +108,7 @@
                     <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box" style="width:320px;height:90px;">
                         <viewer>
                             <img class="historyImg" :src="imgUrl+text.pic"/> 
-                            <img class="historyImg" :src="imgUrl+text.pic+'.jpg'"/>
+                            <!-- <img class="historyImg" :src="imgUrl+text.pic+'.jpg'"/> -->
                         </viewer>
                     </happy-scroll>
                 </span>

src/views/historyMonitoring/index.vue

@@ -156,12 +156,6 @@ export default {
                     scopedSlots: {customRender: 'pics'},
                     width:320,
                 },
-                {
-                    title: "视频状态",
-                    // dataIndex: "status",
-                    scopedSlots: {customRender: 'status'},
-                    width: 90
-                },
                 {
                     title: "工单时长",
                     dataIndex: "timeLength",

src/views/videoWall/index.vue

@@ -1,58 +1,108 @@
 <template>
     <div id="videos">
 
-        <a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button>
+        <a-button
-        <a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button>
+            type="primary"
-        <a-row v-for='rowIndex in row' :key='rowIndex'>
+            @click="full"
-            <a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}" >
+            v-if="!isFullscreen"
-                <video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted :style="{'height': '100%',width:'100%','object-fit':'fill'}" ></video>
+        > 全屏<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-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-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>
 
 <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 () {
+            default() {
-                return ''
+                return "";
-            }
+            },
-        }
+        },
     },
-    data () {
+    data() {
         return {
-            row : 0,
+            row: 0,
-            column : 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()
+            console.log("DOM已更新完成");
+
+            this.playPageCameras();
         });
+
         let isFullscreen =
             document.fullscreenElement ||
             document.mozFullScreenElement ||
@@ -76,128 +126,190 @@ export default {
             that.isFullscreen = !that.isFullscreen;
         });
     },
+    updated() {},
     methods: {
-        
+        getWallStyle() {
-        getWallStyle(){
+            this.$api.httpApi
-            this.$api.httpApi.getWallStyle({
+                .getWallStyle({
-                data: {}
+                    data: {},
-            }).then(res => {
+                })
-                if(res.code == 200) {
+                .then((res) => {
+                    if (res.code == 200) {
                         this.row = res.data[0];
                         this.column = res.data[1];
                         this.getClientHeight();
-                    sessionStorage.setItem('originHeight', this.clientHeight)
+                        sessionStorage.setItem(
+                            "originHeight",
+                            this.clientHeight
+                        );
                     }
-            }).catch(err => {
-                console.log(err)
                 })
+                .catch((err) => {
+                    console.log(err);
+                });
         },
         getClientHeight() {
-            this.clientHeight = this.$el.clientHeight-40;
+            this.clientHeight = this.$el.clientHeight - 40;
 
-            console.log("clientHeight:"+this.clientHeight)
+            console.log("clientHeight:" + this.clientHeight);
         },
-        getAllCameras(){
+        onEdit(targetKey, action) {
-            this.$api.httpApi.getAllCameras1({
+            const index = this.panes.findIndex(
-                data: {}
+                (pane) => pane.key === targetKey
-            }).then(res => {
+            );
-                if(res.code == 200) {
+            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();
+        },
+
+        playPageCameras() {
+            this.$nextTick(() => {
+                this.$api.httpApi
+                    .getAllCameras({
+                        data: {},
+                    })
+                    .then((res) => {
+                        if (res.code == 200) {
                             let cameras = res.data;
-                    for(let i = 1;i<=cameras.length;i++){
+                            this.pageInfo(cameras);
-                        let rowIndex = Math.floor((i-1) / this.column) + 1;
+                            var pageSize = this.row * this.column;
-                        if(rowIndex > this.row){
+                            var camerasPage = cameras.slice(
-                            return
+                                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){
+                                if (columnIndex == 0) {
                                     columnIndex = this.column;
                                 }
                                 let idName = rowIndex + "-" + columnIndex;
-                        console.log("idName:"+idName);
+                                console.log("idName:" + idName);
-                        let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
+                                let server =
+                                    camerasPage[i - 1].rtcServer +
+                                    ":" +
+                                    camerasPage[i - 1].rtcServerPort;
                                 let video = document.getElementById(idName);
-                        let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
+                                console.log(video);
+                                let player = new WebRtcPlayer(
+                                    server,
+                                    video,
+                                    "camera" + camerasPage[i - 1].id
+                                );
                                 this.players.push(player);
                             }
                         }
-            }).catch(err => {
-                console.log(err)
                     })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            });
         },
-        destory(){
+        destory() {
-            for(let player of this.players){
+            for (let player of this.players) {
-                console.log("stop")
+                console.log("stop");
-                player.destroy()
+                player.destroy();
             }
         },
 
-        full () {
+        full() {
-            if(this.isFullscreen){
+            if (this.isFullscreen) {
-                this.exitfullscreen()
+                this.exitfullscreen();
-            }else{
+            } else {
-                this.enterfullscreen()
+                this.enterfullscreen();
             }
-            
         },
         //控制全屏
-        enterfullscreen () { //进入全屏
+        enterfullscreen() {
-            var docElm = document.getElementById('videos')  // 指定容器id
+            //进入全屏
+            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');
+                let origin = sessionStorage.getItem("originHeight");
-                if(origin){
+                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>
-  </style>