球机管理=>球机配置列表、指令写入、覆盖接口联调

src/api/http/http-api.js

@@ -71,6 +71,16 @@ export default  {
     //     name: "球机IO导入"
     // },
     //注释:导出接口路径已采用ant design vue的upload组件action属性动态定义
+    writeInCameraIoptz: {
+        method: "POST",
+        url: "/camera/io/ptz",
+        name: "球机IO指令写入"
+    },
+    coverageCameraIo: {
+        method: "PUT",
+        url: "/camera/io",
+        name: "球机IO指令覆盖"
+    },
     queryList: {
         url: '/order/list',
         name: '查询',

src/layouts/AsideMenu.vue

@@ -140,7 +140,7 @@ export default {
         font-size: 18px;
         font-weight: 600;
         color: #ffffff;
-        background:#001529;
+        background:#022342;
         /*text-align: center;*/
         img{
             width: 24px;

src/views/cameraManage/index.vue

@@ -19,8 +19,8 @@
           <a @click="showModel('test',record)">
             测试
           </a>
-          <a-divider type="vertical" />
+          <a-divider type="vertical"/>
-          <a>
+          <a @click="showModel('config',record)">
             配置
           </a>
           <a-divider type="vertical"/>

src/views/cameraManage/model.vue

@@ -9,7 +9,7 @@
                  @cancel="handleCancel"
                  ok-text="确认"
                  cancel-text="取消"
-                 class="p-model"
+                 class="add-edit-model"
              >
                  <a-form
                      :form="form"
@@ -34,7 +34,7 @@
              </a-modal>
          </template>
          <template v-else-if="type=='test'">
-             <div class="video-mask">
+             <div class="test-model">
                  <!--       <canvas class="video-canvas"></canvas>-->
                  <div class="vxgplayer" id="video-test"
                       :url="mdata.rtsp"
@@ -84,6 +84,121 @@
              </div>
          </template>
 
+         <template v-else-if="type=='config'">
+             <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="vxgplayer" id="video-config"
+                      :url="mdata.rtsp"
+                      autostart
+                      avsync
+                      nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"
+                      nmf-path="media_player.nmf"
+                      latency="0"
+                 >
+                 </div>
+                 <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>
+                 <a-table
+                     :columns="columns"
+                     :row-key="record => record.name"
+                     :data-source="configData"
+                     @change="getConfigIoList"
+                     class="config-table"
+                     bordered
+                     :pagination="false"
+                     :scroll="{y: 450 }"
+                 >
+                      <span slot="position" slot-scope="text, record">
+                            <div v-if="text">
+                               已写入
+                               <a-button type="link" class="plc" @click="coverage(0,record)">
+                                    覆盖
+                               </a-button>
+                            </div>
+                            <a-button type="primary" class="plc" v-else @click="writeIn(0,record)">
+                                    写入
+                            </a-button>
+
+                      </span>
+                     <span slot="focusing" slot-scope="text, record">
+                            <div v-if="text">
+                               已写入
+                               <a-button type="link" class="plc" @click="coverage(1,record)">
+                                    覆盖
+                               </a-button>
+                            </div>
+                            <a-button type="primary" class="plc" v-else @click="writeIn(1,record)">
+                                    写入
+                            </a-button>
+
+                      </span>
+                     <span slot="multiple" slot-scope="text, record">
+                            <div v-if="text">
+                               已写入
+                               <a-button type="link" class="plc" @click="coverage(2,record)">
+                                    覆盖
+                               </a-button>
+                            </div>
+                            <a-button type="primary" class="plc" v-else @click="writeIn(2,record)">
+                                    写入
+                            </a-button>
+
+                      </span>
+                     <span slot="aperture" slot-scope="text, record">
+                            <div v-if="text">
+                               已写入
+                               <a-button type="link" class="plc" @click="coverage(3,record)">
+                                    覆盖
+                               </a-button>
+                            </div>
+                            <a-button type="primary" class="plc" v-else @click="writeIn(3,record)">
+                                    写入
+                            </a-button>
+
+                      </span>
+                 </a-table>
+             </a-modal>
+         </template>
+
      </div>
 </template>
 <script>
@@ -95,6 +210,32 @@ var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排
     labelCol: { span: 4 },
     wrapperCol: { span: 8, offset: 4 },
 };
+const columns = [
+    {
+        title: 'PLC IO指令',
+        dataIndex: 'name',
+    },
+    {
+        title: '位置',
+        dataIndex: 'position',
+        scopedSlots: { customRender: 'position' }
+    },
+    {
+        title: '对焦',
+        dataIndex: 'focusing',
+        scopedSlots: { customRender: 'focusing' }
+    },
+    {
+        title: '倍数',
+        dataIndex: 'multiple',
+        scopedSlots: { customRender: 'multiple' }
+    },
+    {
+        title: '光圈',
+        dataIndex: 'aperture',
+        scopedSlots: { customRender: 'aperture' }
+    },
+];
 export default {
     props:[ 'visible', 'modelType', 'modelData'],
     watch: {
@@ -128,6 +269,15 @@ export default {
                     console.log(newVal.rtsp)
                     this.getTestVideo(newVal.rtsp)
                 })
+            }else if (newVal.id && this.type=='config'){
+                this.id = newVal.id
+                this.mdata = newVal
+                console.log(newVal)
+                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                    console.log(newVal.rtsp)
+                    this.getConfigVideo(newVal.rtsp)
+                    this.getConfigIoList()
+                })
             }
 
         },
@@ -144,7 +294,7 @@ export default {
             form: this.$form.createForm(this, { name: 'dynamic_rule' }),
             id:'',
             mdata:[],
-
+            //测试相关
             zoomSubUrl:require('@/assets/sub-icon.png'),
             zoomAddUrl:require('@/assets/add-icon.png'),
             focusSubUrl:require('@/assets/sub-icon.png'),
@@ -159,6 +309,8 @@ export default {
             leftDownUrl:require('@/assets/left-down-icon.png'),
             downUrl:require('@/assets/down-icon.png'),
             rightDownUrl:require('@/assets/right-down-icon.png'),
+            columns,
+            configData:[]
         };
     },
     mounted() {
@@ -201,11 +353,14 @@ export default {
                 this.confirmLoading = false;
             }, 500);
         },
+
         handleCancel() {
             console.log('Clicked cancel button');
             console.log(this.title);
             if(this.type=='test'){
                 window.vxgplayer('video-test').dispose();
+            }else if(this.type=='config'){
+                window.vxgplayer('video-config').dispose();
             }
             this.$emit('close',false,{})
         },
@@ -217,6 +372,63 @@ export default {
                 vxgplayer('video-test').size('100%', '100%');
             })
         },
+        getConfigVideo(rtsp){
+            this.$nextTick(() => {
+                // window.vxgplayer('vxg_media_player1').stop();
+                window.vxgplayer('video-config').src(rtsp);
+                window.vxgplayer('video-config').play();
+                vxgplayer('video-config').size('800px', '450px');
+            })
+        },
+        getConfigIoList(){
+            this.$axios.post('/camera/'+this.id+'/io/list', {
+                data: {
+                }
+            }).then(res => {
+                console.log(res)
+                if(res.code==200){
+                    this.configData=res.data
+                }
+            }).catch(err => {
+
+            });
+        },
+        writeIn(type,data){
+            console.log(this.id)
+            console.log(data.id)
+            console.log(type)
+            this.$api.httpApi.writeInCameraIoptz({
+                data: {
+                    cameraId:this.id,
+                    cameraIOId:data.id,
+                    name:data.name,
+                    type:type
+                }
+            }).then(res => {
+                console.log(res)
+                this.getConfigIoList()
+            }).catch(err => {
+
+            });
+        },
+        coverage(type,data){
+            console.log(this.id)
+            console.log(data.id)
+            console.log(type)
+            this.$api.httpApi.coverageCameraIo({
+                data: {
+                    cameraId:this.id,
+                    cameraIOId:data.id,
+                    name:data.name,
+                    type:type
+                }
+            }).then(res => {
+                console.log(res)
+                this.getConfigIoList()
+            }).catch(err => {
+
+            });
+        },
 
         zoomDecStart(){
             console.log('变倍-按下')
@@ -531,7 +743,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-    .p-model{
+    .add-edit-model{
         .across-layout{
             display: flex;
         }
@@ -539,7 +751,7 @@ export default {
             margin:6px 0;
         }
     }
-    .video-mask{
+    .test-model{
         position:fixed;
         top: 0;
         bottom: 0;
@@ -608,4 +820,57 @@ export default {
             cursor: pointer;
         }
     }
+    .config-model{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .operation-list{
+            position: absolute;
+            right: 1000px;
+            bottom: 20px;
+            /*width: 150px;*/
+            /*border: solid 1px blue;*/
+            z-index: 10;
+            .operation-item{
+                img{
+                    width: 32px;
+                }
+                span{
+                    padding: 3px 6px;
+                    background: rgba(0,0,0,0.5);
+                    font-size: 16px;
+                    color: #ffffff;
+                }
+            }
+        }
+        .direction-list{
+            position: absolute;
+            right: 830px;
+            bottom: 20px;
+            width: 150px;
+            z-index: 10;
+            /*border: solid 1px blue;*/
+            .direction-item{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img{
+                    width: 32px;
+                }
+            }
+        }
+        img{
+            cursor: pointer;
+        }
+        .config-table{
+            width: 800px;
+            height: 450px;
+            overflow: hidden;
+        }
+    }
+    .vxgplayer{
+        border: none;
+        margin: 0;
+        display: block;
+    }
 </style>