diff --git a/dist.zip b/dist.zip
new file mode 100644
index 0000000..a029c52
Binary files /dev/null and b/dist.zip differ
diff --git a/public/antd_color.less b/public/antd_color.less
index ec14664..b746b9c 100644
--- a/public/antd_color.less
+++ b/public/antd_color.less
@@ -1397,7 +1397,7 @@ tr.ant-table-expanded-row:hover {background: #fbfbfb;}
 .ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;}
 .ant-tag-geekblue {color: #2f54eb;background: #f0f5ff;border-color: #adc6ff;}
 .ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;}
-.ant-tag-purple {color: #722ed1;background: color(~`colorPalette("@{text-color-secondary}", 1)`);border-color: #d3adf7;}
+.ant-tag-purple {color: #722ed1;background: #f9f0ff;border-color: #d3adf7;}
 .ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;}
 .ant-time-picker-panel {color: @text-color;}
 .ant-time-picker-panel-inner {background-color: #fff;background-clip: padding-box;border-radius: 4px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}
diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index c9da053..e4ecd99 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -81,6 +81,11 @@ export default  {
         url: "/realTime/allCameras3",
         name: "获取全部球机"
     },
+    getAllCameras4:{
+        method: "GET",
+        url: "/realTime/allCameras4",
+        name: "获取全部球机"
+    },
     getWallStyle:{
         method: "GET",
         url: "/realTime/wallStyle",
diff --git a/src/router/index.js b/src/router/index.js
index 285b666..27208db 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -55,6 +55,15 @@ const routes = [{
                 name: '视频墙3'
             },
             component: () => import('@/views/videoWall3/index'),
+        }, 
+        {
+            path: 'videoWall4',
+            name: 'videoWall4',
+            meta: {
+                icon: 'desktop',
+                name: '视频墙4'
+            },
+            component: () => import('@/views/videoWall4/index'),
         },
         {
             path: 'realTimeMonitoring',
@@ -76,41 +85,41 @@ const routes = [{
             },
             component: () => import('@/views/historyMonitoring/index')
         },
-        {
-            path: 'alarmLog',
-            name: 'alarmLog',
-            meta: {
-                icon: 'eye',
-                name: '告警日志'
-            },
-            component: () => import('@/views/alarmVideos/alarmLog')
-        },
-        {
-            path: 'checkManage',
-            name: 'checkManage',
-            meta: {
-                icon: 'form',
-                name: '盘点管理',
-            },
-            component: () => import('@/views/checkManage/index'),
-        },
-        {
-            path: 'checkOperation',
-            name: 'checkOperation',
-            meta: {
-                name: '盘点操作'
-            },
-            component: () => import('@/views/checkManage/checkOperation'),
-        },
-        {
-            path: 'checkHistory',
-            name: 'checkHistory',
-            meta: {
-                icon: 'tag',
-                name: '盘点历史',
-            },
-            component: () => import('@/views/historyCheck/index'),
-        },
+        // {
+        //     path: 'alarmLog',
+        //     name: 'alarmLog',
+        //     meta: {
+        //         icon: 'eye',
+        //         name: '告警日志'
+        //     },
+        //     component: () => import('@/views/alarmVideos/alarmLog')
+        // },
+        // {
+        //     path: 'checkManage',
+        //     name: 'checkManage',
+        //     meta: {
+        //         icon: 'form',
+        //         name: '盘点管理',
+        //     },
+        //     component: () => import('@/views/checkManage/index'),
+        // },
+        // {
+        //     path: 'checkOperation',
+        //     name: 'checkOperation',
+        //     meta: {
+        //         name: '盘点操作'
+        //     },
+        //     component: () => import('@/views/checkManage/checkOperation'),
+        // },
+        // {
+        //     path: 'checkHistory',
+        //     name: 'checkHistory',
+        //     meta: {
+        //         icon: 'tag',
+        //         name: '盘点历史',
+        //     },
+        //     component: () => import('@/views/historyCheck/index'),
+        // },
         // {
         //     path: 'stockHistory',
         //     name: 'stockHistory',
diff --git a/src/views/cameraManage/model.vue b/src/views/cameraManage/model.vue
index 8e125bb..6f5cbd9 100644
--- a/src/views/cameraManage/model.vue
+++ b/src/views/cameraManage/model.vue
@@ -38,64 +38,6 @@
                  </a-form>
              </a-modal>
          </template>
-         <!-- <template v-else-if="type=='test'">
-             <a-modal
-                 v-model="isShow"
-                 @cancel="handleCancel"
-                 :footer="null"
-                 :maskClosable="false"
-                 width="1600px"
-                 :bodyStyle="{padding:0,display:'flex'}"
-                 :centered="true"
-                 class="config-model"
-             >
-                <div class="test-model">
-                    <video 
-                    
-                    width="80%"
-                            height="80%"
-                    :id="`camera${id}`" 
-                    autoplay muted ></video>
-                    
-                    <div class="operation-list">
-                        <div class="operation-item">
-                            <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
-                                @mouseup="zoomDecStop">
-                            <span>变倍</span>
-                            <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
-                                @mouseup="zoomAddStop">
-                        </div>
-                        <div class="operation-item">
-                            <img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
-                            <span>变焦</span>
-                            <img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop">
-                        </div>
-                        <div class="operation-item">
-                            <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
-                            <span>光圈</span>
-                            <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop">
-                        </div>
-                    </div>
-                    <div class="direction-list">
-                        <div class="direction-item">
-                            <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop">
-                            <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop">
-                            <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop">
-                        </div>
-                        <div class="direction-item">
-                            <img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop">
-                            <img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop">
-                        </div>
-                        <div class="direction-item">
-                            <img :src="leftDownUrl" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop">
-                            <img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop">
-                            <img :src="rightDownUrl" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop">
-                        </div>
-                    </div>
-                </div>
-             </a-modal>
-         </template> -->
-
          <template v-else-if="type=='config'">
              <a-modal
                  v-model="isShow"
diff --git a/src/views/videoWall4/index.vue b/src/views/videoWall4/index.vue
new file mode 100644
index 0000000..235f55b
--- /dev/null
+++ b/src/views/videoWall4/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.getAllCameras4({
+                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