From a327c651be34023498b848490cc6ea8eb4136001 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E9=91=AB?= <zhangxin@zhehekeji.com>
Date: Thu, 31 Dec 2020 16:05:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=90=83=E6=9C=BA=E7=AE=A1=E7=90=86=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95rtsp=E6=B5=81=E8=A7=86=E9=A2=91=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=EF=BC=88=E9=99=84=E6=96=B0=E5=A2=9E=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E9=80=BB=E8=BE=91=E5=BE=AE=E8=B0=83=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/cameraManage/index.vue |  14 +-
 src/views/cameraManage/model.vue | 555 ++++++++++++++++++++++++++++---
 2 files changed, 519 insertions(+), 50 deletions(-)

diff --git a/src/views/cameraManage/index.vue b/src/views/cameraManage/index.vue
index 1716591..1699c14 100644
--- a/src/views/cameraManage/index.vue
+++ b/src/views/cameraManage/index.vue
@@ -16,7 +16,7 @@
             @change="handleGetCameraList"
         >
           <span slot="action" slot-scope="text, record">
-          <a>
+          <a @click="showModel('test',record)">
             测试
           </a>
           <a-divider type="vertical"/>
@@ -38,7 +38,7 @@
         </a-table>
         <Model
             :visible.sync="visible"
-            :modelTitle="modelTitle"
+            :modelType="modelType"
             :modelData.sync="modelData"
             @sure="submit"
             @close="closeModel"
@@ -85,7 +85,7 @@ export default {
             loading: false,
             columns,
             visible:false,
-            modelTitle:'',
+            modelType:'',
             modelData:[]
         };
     },
@@ -121,12 +121,8 @@ export default {
         showModel(type,data){
             this.visible = true
             console.log(type)
-            if(type=='add'){
-                this.modelTitle = "新增球机"
-            }else if(type=='edit'){
-                this.modelTitle = "编辑球机"
-                this.modelData = data
-            }
+            this.modelType = type
+            this.modelData = data
         },
         submit(visible){
             this.visible = visible
diff --git a/src/views/cameraManage/model.vue b/src/views/cameraManage/model.vue
index 136761c..251c6a5 100644
--- a/src/views/cameraManage/model.vue
+++ b/src/views/cameraManage/model.vue
@@ -1,37 +1,90 @@
 <template>
-    <div v-if="isShow">
-        <a-modal
-            v-model="isShow"
-            :title="title"
-            :closable="closable"
-            @ok="handleOk"
-            @cancel="handleCancel"
-            ok-text="确认"
-            cancel-text="取消"
-            class="p-model"
-        >
-            <a-form
-                :form="form"
-                :wrapper-col="formItemAcrossLayout.wrapperCol"
-            >
-                <a-form-item label="球机名称" :label-col="formItemVerticalLayout.labelCol">
-                    <a-input
-                        v-decorator="['name', { rules: [{ required: true, message: '请输入球机名称!' }] }]"
-                    />
-                </a-form-item>
-                <a-form-item label="球机IP" :label-col="formItemVerticalLayout.labelCol">
-                    <a-input
-                        v-decorator="['ip', { rules: [{ required: true, message: '请输入球机ip!' }] }]"
-                    />
-                </a-form-item>
-                <a-form-item label="rtsp流地址" :label-col="formItemVerticalLayout.labelCol">
-                    <a-input
-                        v-decorator="['rtsp', { rules: [{ required: true, message: '请输入rtsp流地址!' }] }]"
-                    />
-                </a-form-item>
-            </a-form>
-        </a-modal>
-    </div>
+     <div v-if="isShow">
+         <template v-if="type=='add' || type=='edit'">
+             <a-modal
+                 v-model="isShow"
+                 :title="[type =='add' ? '新增球机':'编辑球机']"
+                 :closable="closable"
+                 @ok="handleOk"
+                 @cancel="handleCancel"
+                 ok-text="确认"
+                 cancel-text="取消"
+                 class="p-model"
+             >
+                 <a-form
+                     :form="form"
+                     :wrapper-col="formItemAcrossLayout.wrapperCol"
+                 >
+                     <a-form-item label="球机名称" :label-col="formItemVerticalLayout.labelCol">
+                         <a-input
+                             v-decorator="['name', { rules: [{ required: true, message: '请输入球机名称!' }] }]"
+                         />
+                     </a-form-item>
+                     <a-form-item label="球机IP" :label-col="formItemVerticalLayout.labelCol">
+                         <a-input
+                             v-decorator="['ip', { rules: [{ required: true, message: '请输入球机ip!' }] }]"
+                         />
+                     </a-form-item>
+                     <a-form-item label="rtsp流地址" :label-col="formItemVerticalLayout.labelCol">
+                         <a-input
+                             v-decorator="['rtsp', { rules: [{ required: true, message: '请输入rtsp流地址!' }] }]"
+                         />
+                     </a-form-item>
+                 </a-form>
+             </a-modal>
+         </template>
+         <template v-else-if="type=='test'">
+             <div class="video-mask">
+                 <!--       <canvas class="video-canvas"></canvas>-->
+                 <div class="vxgplayer" id="video-test"
+                      :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="video-close" @click="handleCancel">
+                     ╳
+                 </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>
+             </div>
+         </template>
+
+     </div>
 </template>
 <script>
 var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
@@ -43,20 +96,20 @@ var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排
     wrapperCol: { span: 8, offset: 4 },
 };
 export default {
-    props:[ 'visible', 'modelTitle', 'modelData'],
+    props:[ 'visible', 'modelType', 'modelData'],
     watch: {
         //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
         visible: function(newVal){
             this.isShow = newVal;  //newVal即是visible
             // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
         },
-        modelTitle: function(newVal){
-            this.title = newVal;
+        modelType: function(newVal){
+            this.type = newVal;
         },
         modelData: function(newVal){
             // console.log(newVal)
-            if(newVal.id){
-                this.mdata=newVal
+            this.mdata=newVal
+            if(newVal.id && this.type=='edit'){
                 this.id = newVal.id
                 // console.log('触发了watch，重新赋值')
                 this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
@@ -66,6 +119,14 @@ export default {
                         rtsp:newVal.rtsp
                     })
                 })
+            }else if (newVal.id && this.type=='test'){
+                this.id = newVal.id
+                this.mdata = newVal
+                console.log(newVal)
+                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                    console.log(newVal.rtsp)
+                    this.getTestVideo(newVal.rtsp)
+                })
             }
 
         },
@@ -73,6 +134,7 @@ export default {
     data() {
         return {
             isShow:false,
+            type:'',
             title:'',
             closable:false,//取消model模态框右上角的X号
             formItemAcrossLayout,
@@ -80,7 +142,23 @@ export default {
             confirmLoading: false,
             form: this.$form.createForm(this, { name: 'dynamic_rule' }),
             id:'',
-            mdata:[]
+            mdata:[],
+
+
+            zoomSubUrl:require('@/assets/sub-icon.png'),
+            zoomAddUrl:require('@/assets/add-icon.png'),
+            focusSubUrl:require('@/assets/sub-icon.png'),
+            focusAddUrl:require('@/assets/add-icon.png'),
+            irisSubUrl:require('@/assets/sub-icon.png'),
+            irisAddUrl:require('@/assets/add-icon.png'),
+            leftUpUrl:require('@/assets/left-up-icon.png'),
+            upUrl:require('@/assets/up-icon.png'),
+            rightUpUrl:require('@/assets/right-up-icon.png'),
+            leftUrl:require('@/assets/left-icon.png'),
+            rightUrl:require('@/assets/right-icon.png'),
+            leftDownUrl:require('@/assets/left-down-icon.png'),
+            downUrl:require('@/assets/down-icon.png'),
+            rightDownUrl:require('@/assets/right-down-icon.png'),
         };
     },
     mounted() {
@@ -94,7 +172,7 @@ export default {
                     console.log(values)
                     if (!err) {
                         console.log(this.title)
-                        if(this.title=='新增球机'){
+                        if(this.type=='add'){
                             this.$api.httpApi.addCamera({
                                 data:values
                             }).then(res => {
@@ -105,7 +183,7 @@ export default {
                             }).catch(err => {
 
                             });
-                        }else if(this.title=='编辑球机'){
+                        }else if(this.type=='edit'){
                             values.id = this.id
                             this.$api.httpApi.editCamera({
                                 data:values
@@ -126,8 +204,334 @@ export default {
         handleCancel() {
             console.log('Clicked cancel button');
             console.log(this.title);
+            window.vxgplayer('video-test').dispose();
             this.$emit('close',false,{})
         },
+        getTestVideo(rtsp){
+            this.$nextTick(() => {
+                // window.vxgplayer('vxg_media_player1').stop();
+                window.vxgplayer('video-test').src(rtsp);
+                window.vxgplayer('video-test').play();
+                vxgplayer('video-test').size('100%', '100%');
+            })
+        },
+        beforeRouteLeave(to,form,next){
+            if(window.vxgplayer){
+                window.vxgplayer('video-test').dispose();
+                next(true)
+            }else {
+                next(true)
+            }
+        },
+        zoomDecStart(){
+            console.log('变倍-按下')
+            this.zoomSubUrl=require('@/assets/sub-active-icon.png')
+            this.$axios.post('/camera/control/zoomDec/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        zoomDecStop(){
+            console.log('变倍-抬起')
+            this.zoomSubUrl=require('@/assets/sub-icon.png')
+            this.$axios.post('/camera/control/zoomDec/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        zoomAddStart(){
+            console.log('变倍+按下')
+            this.zoomAddUrl=require('@/assets/add-active-icon.png')
+            this.$axios.post('/camera/control/zoomAdd/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        zoomAddStop(){
+            console.log('变倍+抬起')
+            this.zoomAddUrl=require('@/assets/add-icon.png')
+            this.$axios.post('/camera/control/zoomAdd/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        focusDecStart(){
+            console.log('变焦-按下')
+            this.focusSubUrl=require('@/assets/sub-active-icon.png')
+            this.$axios.post('/camera/control/focusDec/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        focusDecStop(){
+            console.log('变焦-抬起')
+            this.focusSubUrl=require('@/assets/sub-icon.png')
+            this.$axios.post('/camera/control/focusDec/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        focusAddStart(){
+            console.log('变焦+按下')
+            this.focusAddUrl=require('@/assets/add-active-icon.png')
+            this.$axios.post('/camera/control/focusAdd/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        focusAddStop(){
+            console.log('变焦+抬起')
+            this.focusAddUrl=require('@/assets/add-icon.png')
+            this.$axios.post('/camera/control/focusAdd/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        irisDecStart(){
+            console.log('光圈-按下')
+            this.irisSubUrl=require('@/assets/sub-active-icon.png')
+            this.$axios.post('/camera/control/irisDec/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        irisDecStop(){
+            console.log('光圈-抬起')
+            this.irisSubUrl=require('@/assets/sub-icon.png')
+            this.$axios.post('/camera/control/irisDec/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        irisAddStart(){
+            console.log('光圈+按下')
+            this.irisAddUrl=require('@/assets/add-active-icon.png')
+            this.$axios.post('/camera/control/irisAdd/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        irisAddStop(){
+            console.log('光圈+抬起')
+            this.irisAddUrl=require('@/assets/add-icon.png')
+            this.$axios.post('/camera/control/irisAdd/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftUpStart(){
+            console.log('左上鼠标按下')
+            this.leftUpUrl=require('@/assets/left-up-active-icon.png')
+            this.$axios.post('/camera/control/leftUp/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftUpStop(){
+            console.log('左上鼠标抬起')
+            this.leftUpUrl=require('@/assets/left-up-icon.png')
+            this.$axios.post('/camera/control/leftUp/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        upStart(){
+            console.log('上鼠标按下')
+            this.upUrl=require('@/assets/up-active-icon.png')
+            this.$axios.post('/camera/control/up/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        upStop(){
+            console.log('上鼠标抬起')
+            this.upUrl=require('@/assets/up-icon.png')
+            this.$axios.post('/camera/control/up/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightUpStart(){
+            console.log('右上鼠标按下')
+            this.rightUpUrl=require('@/assets/right-up-active-icon.png')
+            this.$axios.post('/camera/control/rightUp/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightUpStop(){
+            console.log('右上鼠标抬起')
+            this.rightUpUrl=require('@/assets/right-up-icon.png')
+            this.$axios.post('/camera/control/rightUp/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftStart(){
+            // console.log(this.id)
+            console.log('左转鼠标按下')
+            this.leftUrl=require('@/assets/left-active-icon.png')
+            this.$axios.post('/camera/control/left/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftStop(){
+            this.leftUrl=require('@/assets/left-icon.png')
+            console.log('左转鼠标抬起')
+            this.$axios.post('/camera/control/left/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightStart(){
+            console.log('右转鼠标按下')
+            this.rightUrl=require('@/assets/right-active-icon.png')
+            this.$axios.post('/camera/control/right/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightStop(){
+            console.log('右转鼠标抬起')
+            this.rightUrl=require('@/assets/right-icon.png')
+            this.$axios.post('/camera/control/right/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftDownStart(){
+            console.log('左下鼠标按下')
+            this.leftDownUrl=require('@/assets/left-down-active-icon.png')
+            this.$axios.post('/camera/control/leftDown/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftDownStop(){
+            console.log('左下鼠标抬起')
+            this.leftDownUrl=require('@/assets/left-down-icon.png')
+            this.$axios.post('/camera/control/leftDown/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        downStart(){
+            console.log('下鼠标按下')
+            this.downUrl=require('@/assets/down-active-icon.png')
+            this.$axios.post('/camera/control/down/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        downStop(){
+            console.log('下鼠标抬起')
+            this.downUrl=require('@/assets/down-icon.png')
+            this.$axios.post('/camera/control/down/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightDownStart(){
+            console.log('右下鼠标按下')
+            this.rightDownUrl=require('@/assets/right-down-active-icon.png')
+            this.$axios.post('/camera/control/rightDown/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightDownStop(){
+            console.log('右下鼠标抬起')
+            this.rightDownUrl=require('@/assets/right-down-icon.png')
+            this.$axios.post('/camera/control/rightDown/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
     },
 };
 </script>
@@ -140,4 +544,73 @@ export default {
             margin:6px 0;
         }
     }
+    .video-mask{
+        position:fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color:rgba(0,0,0,0.5);
+        z-index:1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        #video-test{
+
+        }
+        .video-close{
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            color: #ffffff;
+            font-size: 24px;
+            width: 32px;
+            height: 32px;
+            background: rgba(0,0,0,0.5);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 10;
+        }
+        .operation-list{
+            position: absolute;
+            right: 200px;
+            bottom: 20px;
+            /*width: 150px;*/
+            /*border: solid 1px blue;*/
+            z-index: 10;
+            .operation-item{
+                img{
+                    width: 42px;
+                }
+                span{
+                    padding: 5px 10px;
+                    background: rgba(0,0,0,0.5);
+                    font-size: 18px;
+                    color: #ffffff;
+                }
+            }
+        }
+        .direction-list{
+            position: absolute;
+            right: 30px;
+            bottom: 20px;
+            width: 150px;
+            z-index: 10;
+            /*border: solid 1px blue;*/
+            .direction-item{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img{
+                    width: 42px;
+                }
+            }
+        }
+        img{
+            cursor: pointer;
+        }
+    }
 </style>