diff --git a/dist.zip b/dist.zip
deleted file mode 100644
index e1473f9..0000000
Binary files a/dist.zip and /dev/null differ
diff --git a/public/index.html b/public/index.html
index fe2c68b..2313cf1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,12 +10,12 @@
     
     <!-- <script src="/video_play_plugins/video.js"></script> -->
     <script src="/video_play_plugins/webrtcplayer.js"></script>
-    <title>昆船垛机视觉系统</title>
+    <title>堆垛机视觉系统</title>
 </head>
 
 <body>
     <noscript>
-        <strong>We're sorry but 昆船垛机视觉系统 doesn't work properly without JavaScript enabled. Please enable it to
+        <strong>We're sorry but 堆垛机视觉系统 doesn't work properly without JavaScript enabled. Please enable it to
             continue.</strong>
     </noscript>
     
diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index 2216346..08708fe 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -66,6 +66,16 @@ export default  {
         url: "/realTime/allCameras",
         name: "获取全部球机"
     },
+    allCamerasByArea:{
+        method: "GET",
+        url: "/realTime/allCamerasByArea",
+        name: "根据库区查询球机"
+    },
+    getAllAreas:{
+        method: "GET",
+        url: "/realTime/allAreas",
+        name: "获取全部库区"
+    },
     getWallStyle:{
         method: "GET",
         url: "/realTime/wallStyle",
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index 5e195ca..239a6a9 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@@ -1,66 +1,67 @@
 <template>
     <div class="realTime bg-white">
         <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange" padding:10px>
-            <a-tab-pane :key="item.streetId.toString()" :tab="item.streetName" v-for="item in realTimeListData"></a-tab-pane>
+            <a-tab-pane :key="item.streetId.toString()" :tab="item.streetName" v-for="item in realTimeListData">
+                
+            </a-tab-pane>
         </a-tabs>
-<!--        {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
         <a-row :gutter="20">
-            <a-col
-                v-for="(item, index) in cameras.slice(0, selectTab.videoStyleRow * selectTab.videoStyleColumn)"
-                :span="24 / selectTab.videoStyleColumn"
-                :key="index"
-                :style="{
-                        height: videoHeight,
+                    <a-col
+                        v-for="(item, index) in cameras.slice(0, selectTab.videoStyleRow * selectTab.videoStyleColumn)"
+                        :span="24 / selectTab.videoStyleColumn"
+                        :key="index"
+                        :style="{
+                                height: videoHeight,
+                                
+                                marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
+                            }"
+                    >
+                    <div style="position: relative;width: 100%;">
+                        <video :style="{ height: videoHeight,}" :id="`camera${item.id}`"  autoplay muted controls>
+                        </video>
+                        <div class="operation-list">
+                                <div class="operation-item">
+                                    <img :src="zoomSubUrl" alt="" @mousedown=zoomDecStart($event,item.id) @mouseleave=zoomDecStop($event,item.id)
+                                        >
+                                    <span>变倍</span>
+                                    <img :src="zoomAddUrl" alt="" @mousedown=zoomAddStart($event,item.id) @mouseleave=zoomAddStop($event,item.id)
+                                        >
+                                </div>
+                                <div class="operation-item">
+                                    <img :src="focusSubUrl" alt="" @mousedown=focusDecStart($event,item.id) @mouseleave=focusDecStop($event,item.id)
+                                        @mouseup=focusDecStop($event,item.id)>
+                                    <span>变焦</span>
+                                    <img :src="focusAddUrl" alt="" @mousedown=focusAddStart($event,item.id) @mouseleave=focusAddStop($event,item.id)
+                                        @mouseup=focusAddStop($event,item.id)>
+                                </div>
+                                <div class="operation-item">
+                                    <img :src="irisSubUrl" alt="" @mousedown=irisDecStart($event,item.id) @mouseup=irisDecStop($event,item.id) @mouseleave=irisDecStop($event,item.id)>
+                                    <span>光圈</span>
+                                    <img :src="irisAddUrl" alt="" @mousedown=irisAddStart($event,item.id) @mouseup=irisAddStop($event,item.id) @mouseleave=irisAddStop($event,item.id)>
+                                </div>
+                            </div>
+                            <div class="direction-list">
+                                <div class="direction-item">
+                                    <img :src="leftUpUrl" alt="" @mousedown=leftUpStart($event,item.id) @mouseup=leftUpStop($event,item.id) @mouseleave=leftUpStop($event,item.id)>
+                                    <img :src="upUrl" alt="" @mousedown=upStart($event,item.id) @mouseup=upStop($event,item.id) @mouseleave=upStop($event,item.id) >
+                                    <img :src="rightUpUrl" alt="" @mousedown=rightUpStart($event,item.id) @mouseup=rightUpStop($event,item.id) @mouseleave=rightUpStop($event,item.id) >
+                                </div>
+                                <div class="direction-item">
+                                    <img :src="leftUrl" alt="" @mousedown=leftStart($event,item.id) @mouseup=leftStop($event,item.id) @mouseleave=leftStop($event,item.id)>
+                                    <img :src="rightUrl" alt="" @mousedown=rightStart($event,item.id) @mouseup=rightStop($event,item.id) @mouseleave=rightStop($event,item.id)>
+                                </div>
+                                <div class="direction-item">
+                                    <img :src="leftDownUrl" alt="" @mousedown=leftDownStart($event,item.id)
+                                        @mouseup=leftDownStop($event,item.id) @mouseleave=leftDownStop($event,item.id)>
+                                    <img :src="downUrl" alt="" @mousedown=downStart($event,item.id) @mouseup=downStop($event,item.id) @mouseleave=downStop($event,item.id)>
+                                    <img :src="rightDownUrl" alt="" @mousedown=rightDownStart($event,item.id)
+                                        @mouseup=rightDownStop($event,item.id) @mouseleave=rightDownStop($event,item.id)>
+                                </div>
+                            </div>
+                    </div>
                         
-                        marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
-                    }"
-            >
-            <div style="position: relative;width: 100%;">
-                <video :style="{ height: videoHeight,}" :id="`camera${item.id}`"  autoplay muted controls>
-                </video>
-                <div class="operation-list">
-                     <div class="operation-item">
-                         <img :src="zoomSubUrl" alt="" @mousedown=zoomDecStart($event,item.id) @mouseleave=zoomDecStop($event,item.id)
-                              >
-                         <span>变倍</span>
-                         <img :src="zoomAddUrl" alt="" @mousedown=zoomAddStart($event,item.id) @mouseleave=zoomAddStop($event,item.id)
-                              >
-                     </div>
-                     <div class="operation-item">
-                         <img :src="focusSubUrl" alt="" @mousedown=focusDecStart($event,item.id) @mouseleave=focusDecStop($event,item.id)
-                              @mouseup=focusDecStop($event,item.id)>
-                         <span>变焦</span>
-                         <img :src="focusAddUrl" alt="" @mousedown=focusAddStart($event,item.id) @mouseleave=focusAddStop($event,item.id)
-                              @mouseup=focusAddStop($event,item.id)>
-                     </div>
-                     <div class="operation-item">
-                         <img :src="irisSubUrl" alt="" @mousedown=irisDecStart($event,item.id) @mouseup=irisDecStop($event,item.id) @mouseleave=irisDecStop($event,item.id)>
-                         <span>光圈</span>
-                         <img :src="irisAddUrl" alt="" @mousedown=irisAddStart($event,item.id) @mouseup=irisAddStop($event,item.id) @mouseleave=irisAddStop($event,item.id)>
-                     </div>
-                 </div>
-                 <div class="direction-list">
-                     <div class="direction-item">
-                         <img :src="leftUpUrl" alt="" @mousedown=leftUpStart($event,item.id) @mouseup=leftUpStop($event,item.id) @mouseleave=leftUpStop($event,item.id)>
-                         <img :src="upUrl" alt="" @mousedown=upStart($event,item.id) @mouseup=upStop($event,item.id) @mouseleave=upStop($event,item.id) >
-                         <img :src="rightUpUrl" alt="" @mousedown=rightUpStart($event,item.id) @mouseup=rightUpStop($event,item.id) @mouseleave=rightUpStop($event,item.id) >
-                     </div>
-                     <div class="direction-item">
-                         <img :src="leftUrl" alt="" @mousedown=leftStart($event,item.id) @mouseup=leftStop($event,item.id) @mouseleave=leftStop($event,item.id)>
-                         <img :src="rightUrl" alt="" @mousedown=rightStart($event,item.id) @mouseup=rightStop($event,item.id) @mouseleave=rightStop($event,item.id)>
-                     </div>
-                     <div class="direction-item">
-                         <img :src="leftDownUrl" alt="" @mousedown=leftDownStart($event,item.id)
-                              @mouseup=leftDownStop($event,item.id) @mouseleave=leftDownStop($event,item.id)>
-                         <img :src="downUrl" alt="" @mousedown=downStart($event,item.id) @mouseup=downStop($event,item.id) @mouseleave=downStop($event,item.id)>
-                         <img :src="rightDownUrl" alt="" @mousedown=rightDownStart($event,item.id)
-                              @mouseup=rightDownStop($event,item.id) @mouseleave=rightDownStop($event,item.id)>
-                     </div>
-                 </div>
-            </div>
-                
-                
-            </a-col>
+                        
+                    </a-col>
         </a-row>
         
     </div>
diff --git a/src/views/roadwayManage/index.vue b/src/views/roadwayManage/index.vue
index 19b085c..c18c13c 100644
--- a/src/views/roadwayManage/index.vue
+++ b/src/views/roadwayManage/index.vue
@@ -98,6 +98,10 @@ const columns = [
         title: '巷道标识',
         dataIndex: 'plcId',
     },
+    {
+        title: '库区',
+        dataIndex: 'area',
+    },
     {
         title: '光源IP',
         scopedSlots: { customRender: 'lightSourceIp' }
diff --git a/src/views/roadwayManage/model.vue b/src/views/roadwayManage/model.vue
index 0eccc36..4961b34 100644
--- a/src/views/roadwayManage/model.vue
+++ b/src/views/roadwayManage/model.vue
@@ -25,6 +25,15 @@
                             v-decorator="['plcId', { rules: [{ required: true, message: '请输入巷道标识!' }] }]"
                         />
                     </a-form-item>
+                    
+                </div>
+                <div class="across-layout">
+                    
+                    <a-form-item label="库区" :label-col="formItemAcrossLayout.labelCol">
+                        <a-input
+                            v-decorator="['area']"
+                        />
+                    </a-form-item>
                 </div>
                 <div class="across-layout">
                     <a-form-item label="PLC IP" :label-col="formItemAcrossLayout.labelCol">
@@ -277,7 +286,8 @@ export default {
                         camera1Id:newVal.camera1Id,
                         camera2Id:newVal.camera2Id,
                         camera1Name:newVal.camera1Name,
-                        camera2Name:newVal.camera2Name
+                        camera2Name:newVal.camera2Name,
+                        area:newVal.area
                     })
                 })
             }
diff --git a/src/views/videoWall/index.vue b/src/views/videoWall/index.vue
index 34e2846..ca73bb9 100644
--- a/src/views/videoWall/index.vue
+++ b/src/views/videoWall/index.vue
@@ -3,6 +3,12 @@
         
         <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>
+        <!-- @change="tabsChange"  v-model="tabKey"-->
+        <a-tabs v-model="activeKey" slot="headerContent" @change="tabChange" v-if="areas" padding:10px>
+            <a-tab-pane :key="item.toString()" :tab="item" v-for="item in areas">
+                
+            </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>
@@ -35,7 +41,9 @@ export default {
             isFullscreen: false,
             originHeight: 0,
             fullHeight: 0,
-            players: []
+            players: [],
+            areas:[],
+            activeKey: ''
         }
     },
     //watch: {},
@@ -51,7 +59,8 @@ export default {
         this.getWallStyle();
         
         this.$nextTick(() => {
-            this.getAllCameras()
+            
+            this.getAllAreas()
         });
         let isFullscreen =
             document.fullscreenElement ||
@@ -124,13 +133,62 @@ export default {
                 console.log(err)
             })
         },
+        getAllAreas(){
+            this.$api.httpApi.getAllAreas({
+                data: {}
+            }).then(res => {
+                if(res.code == 200) {
+                    this.areas = res.data;
+                    
+                    if(this.areas.length == 0){
+                        this.getAllCameras()
+                    }else{
+                        this.activeKey = this.areas[0]
+                        this.tabChange();
+                    }
+                }
+            }).catch(err => {
+                console.log(err)
+            })
+        },
         destory(){
             for(let player of this.players){
                 console.log("stop")
                 player.destroy()
             }
+            this.players = []
+        },
+        tabChange(){
+            this.destory();
+            this.$api.httpApi.allCamerasByArea({
+                params:{
+                    area:this.activeKey
+                }
+                
+            }).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)
+            })
         },
-        
         full () {
             if(this.isFullscreen){
                 this.exitfullscreen()
