diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index 2216346..4043d9e 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -66,6 +66,21 @@ export default  {
         url: "/realTime/allCameras",
         name: "获取全部球机"
     },
+    getAllCameras1:{
+        method: "GET",
+        url: "/realTime/allCameras1",
+        name: "获取全部球机"
+    },
+    getAllCameras2:{
+        method: "GET",
+        url: "/realTime/allCameras2",
+        name: "获取全部球机"
+    },
+    getAllCameras3:{
+        method: "GET",
+        url: "/realTime/allCameras3",
+        name: "获取全部球机"
+    },
     getWallStyle:{
         method: "GET",
         url: "/realTime/wallStyle",
diff --git a/src/router/index.js b/src/router/index.js
index 51c73c7..285b666 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,15 +29,33 @@ const routes = [{
     },
     component: () => import('@/views/index'),
     children: [
-        // {
-        //     path: 'videoWall',
-        //     name: 'videoWall',
-        //     meta: {
-        //         icon: 'desktop',
-        //         name: '视频墙'
-        //     },
-        //     component: () => import('@/views/videoWall/index'),
-        // },
+        {
+            path: 'videoWall1`',
+            name: 'videoWall1`',
+            meta: {
+                icon: 'desktop',
+                name: '视频墙1'
+            },
+            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',
diff --git a/src/views/historyCheck/index.vue b/src/views/historyCheck/index.vue
index 2b51168..db3f02d 100644
--- a/src/views/historyCheck/index.vue
+++ b/src/views/historyCheck/index.vue
@@ -106,7 +106,7 @@
             <template>
                 <span style="height:100%;">
                     <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"/></viewer>
+                        <viewer><img class="historyImg" :src="imgUrl+text.pic"/> <img class="historyImg" :src="imgUrl+text.pic"/></viewer>
                     </happy-scroll>
                 </span>
                 
diff --git a/src/views/videoWall/index.vue b/src/views/videoWall/index.vue
index 34e2846..dfd81b8 100644
--- a/src/views/videoWall/index.vue
+++ b/src/views/videoWall/index.vue
@@ -98,7 +98,7 @@ export default {
             console.log("clientHeight:"+this.clientHeight)
         },
         getAllCameras(){
-            this.$api.httpApi.getAllCameras({
+            this.$api.httpApi.getAllCameras1({
                 data: {}
             }).then(res => {
                 if(res.code == 200) {
diff --git a/src/views/videoWall2/index.vue b/src/views/videoWall2/index.vue
new file mode 100644
index 0000000..f463c1e
--- /dev/null
+++ b/src/views/videoWall2/index.vue
@@ -0,0 +1,203 @@
+<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-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"
+export default {
+    name: 'top',
+    components: {},
+    props: {
+        id: {
+            type: String,
+            default () {
+                return ''
+            }
+        }
+    },
+    data () {
+        return {
+            row : 0,
+            column : 0,
+            a: 0,
+            clientHeight: 0,
+            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(() => {
+            this.getAllCameras()
+        });
+        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;
+        });
+    },
+    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)
+        },
+        getAllCameras(){
+            this.$api.httpApi.getAllCameras2({
+                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);
+                    }
+                }
+            }).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()
+            }
+           
+            //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
diff --git a/src/views/videoWall3/index.vue b/src/views/videoWall3/index.vue
new file mode 100644
index 0000000..92c441a
--- /dev/null
+++ b/src/views/videoWall3/index.vue
@@ -0,0 +1,203 @@
+<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-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"
+export default {
+    name: 'top',
+    components: {},
+    props: {
+        id: {
+            type: String,
+            default () {
+                return ''
+            }
+        }
+    },
+    data () {
+        return {
+            row : 0,
+            column : 0,
+            a: 0,
+            clientHeight: 0,
+            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(() => {
+            this.getAllCameras()
+        });
+        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;
+        });
+    },
+    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)
+        },
+        getAllCameras(){
+            this.$api.httpApi.getAllCameras3({
+                data: {}
+            }).then(res => {
+                if(res.code == 200) {
+                    let cameras = res.data;
+                    for(let i = 14;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);
+                    }
+                }
+            }).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()
+            }
+           
+            //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