库区设置

3 years ago · 7c8cb04802
parent 06d7eb0bff
commit 7c8cb04802
7 changed files with 146 additions and 63 deletions
--- a/dist.zip
+++ b/dist.zip
--- 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>
    
--- 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",
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@ -1,9 +1,10 @@
 <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)"
--- 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' }
--- 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
                    })
                })
            }
--- 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()