From 88d2fe4f34c01b77e25897d45ef1fa0770ab2536 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LAPTOP-S9HJSOEB=5C=E6=98=8A=E5=A4=A9?=
 <wang.haotian@hzleaper.com>
Date: Mon, 17 Feb 2025 16:21:56 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B8=E6=9C=BA=E6=8E=A7=E5=88=B6=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/cameraManage/controllerModel.vue | 848 +++++++++++++++++++++
 src/views/cameraManage/index.vue           |  12 +-
 src/views/cameraManage/model.vue           |   4 +-
 3 files changed, 858 insertions(+), 6 deletions(-)
 create mode 100644 src/views/cameraManage/controllerModel.vue

diff --git a/src/views/cameraManage/controllerModel.vue b/src/views/cameraManage/controllerModel.vue
new file mode 100644
index 0000000..3976d7b
--- /dev/null
+++ b/src/views/cameraManage/controllerModel.vue
@@ -0,0 +1,848 @@
+<template>
+    <div v-if="isShow">
+        
+        <!-- <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 >
+            <a-modal
+                v-model="isShow"
+                @cancel="handleCancel"
+                :footer="null"
+                :maskClosable="false"
+                width="1600px"
+                :bodyStyle="{padding:0,display:'flex'}"
+                :centered="true"
+                class="config-model"
+            >
+               
+                <video width="900"
+                        height="600"
+               :id="`config-camera${id}`" 
+               autoplay muted ></video>
+                <div class="operation-list">
+                    <div class="operation-item">
+                        <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
+                             @mouseup="zoomDecStop" @mouseleave="zoomDecStop">
+                        <span>变倍</span>
+                        <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
+                             @mouseup="zoomAddStop" @mouseleave="zoomAddStop">
+                    </div>
+                    <div class="operation-item">
+                        <img :src="focusSubUrl" alt="" @mousedown="focusDecStart"
+                             @mouseup="focusDecStop" @mouseleave="focusDecStop">
+                        <span>变焦</span>
+                        <img :src="focusAddUrl" alt="" @mousedown="focusAddStart"
+                             @mouseup="focusAddStop" @mouseleave="focusAddStop">
+                    </div>
+                    <div class="operation-item">
+                        <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop" @mouseleave="irisDecStop">
+                        <span>光圈</span>
+                        <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop" @mouseleave="irisAddStop">
+                    </div>
+                </div>
+                <div class="direction-list">
+                    <div class="direction-item">
+                        <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop" @mouseleave="leftUpStop">
+                        <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop" @mouseleave="upStop">
+                        <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop" @mouseleave="rightUpStop">
+                    </div>
+                    <div class="direction-item">
+                        <img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop" @mouseleave="leftStop">
+                        <img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop" @mouseleave="rightStop">
+                    </div>
+                    <div class="direction-item">
+                        <img :src="leftDownUrl" alt="" @mousedown="leftDownStart"
+                             @mouseup="leftDownStop" @mouseleave="leftDownStop">
+                        <img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop" @mouseleave="downStop">
+                        <img :src="rightDownUrl" alt="" @mousedown="rightDownStart"
+                             @mouseup="rightDownStop" @mouseleave="rightDownStop">
+                    </div>
+                </div>
+                <div class="config-table">
+                    <h2>球机配置</h2>
+                    <a-table
+                        :columns="columns"
+                        :row-key="record => record.name"
+                        :data-source="configData"
+                        @change="getConfigIoList"
+                        bordered
+                        :pagination="false"
+                        :scroll="{y:335}"
+                    >
+                    <span slot="name" slot-scope="text,record">
+                        <a-button type="link" @click="toPtz(record)">{{text}}({{record.code}})</a-button>
+                     </span>
+                        <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="coverage(0,record)">
+                                   写入
+                           </a-button>
+
+                     </span>
+                        
+                        
+                    </a-table>
+                </div>
+            </a-modal>
+        </template>
+
+    </div>
+</template>
+<script>
+var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
+   labelCol: { span: 8 },    //lable长度
+   wrapperCol: { span: 14 },  //input长度
+};
+var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
+   labelCol: { span: 4 },
+   wrapperCol: { span: 8, offset: 4 },
+};
+const columns = [
+   {
+       title: 'PLC IO指令',
+       dataIndex: 'name',
+       scopedSlots: { customRender: 'name' }
+   },
+   {
+       title: '配置',
+       dataIndex: 'position',
+       scopedSlots: { customRender: 'position' }
+   }
+];
+import WebRtcPlayer from "../../../public/static/webrtcplayer"
+export default {
+   props:[ 'visible', 'modelType', 'modelData'],
+   watch: {
+       //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+       visible: function(newVal){
+           this.isShow = newVal;  //newVal即是visible
+           // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+       },
+       modelType: function(newVal){
+           this.type = newVal;
+       },
+       modelData: function(newVal){
+           // console.log(newVal)
+           this.mdata=newVal
+           console.log(this.type)
+           if(newVal.id && this.type=='edit'){
+               this.id = newVal.id
+               // console.log('触发了watch，重新赋值')
+               this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                   this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
+                       name:newVal.name,
+                       ip:newVal.ip,
+                       rtsp:newVal.rtsp,
+                       rtcServer:newVal.rtcServer,
+                       rtcServerPort:newVal.rtcServerPort
+                   })
+               })
+           }else if (newVal.id && this.type=='config'){
+               this.id = newVal.id
+               this.mdata = newVal
+               console.log(newVal)
+           }
+
+       },
+   },
+   data() {
+       return {
+           isShow:false,
+           player:null,
+           type:'',
+           title:'',
+           closable:false,//取消model模态框右上角的X号
+           formItemAcrossLayout,
+           formItemVerticalLayout,
+           confirmLoading: false,
+           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'),
+           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'),
+           columns,
+           configData:[]
+       };
+   },
+   mounted() {
+       if (this.$route.query.modelType == 'test') {
+           this.isShow = true
+           this.id = this.$route.query.modelData.id
+           this.type = this.$route.query.modelType
+           this.mdata = this.$route.query.modelData
+           this.$nextTick(() => {
+               this.autoPlay(this.id)
+           })
+       } else if (this.$route.query.modelType == 'config') {
+           
+           this.isShow = true
+           this.id = this.$route.query.modelData.id
+           this.getConfigIoList()
+           this.type = this.$route.query.modelType
+           this.mdata = this.$route.query.modelData
+           this.$nextTick(() => {
+               this.autoPlay(this.id)
+           })
+           
+       }
+   },
+   destroy(){
+       if(this.player != null){
+           this.player.destroy()
+       }
+       
+   },
+   methods: {
+       handleOk() {
+           this.confirmLoading = true;
+           setTimeout(() => {
+               this.form.validateFields((err, values) => {
+                   console.log(values)
+                   if (!err) {
+                       console.log(this.title)
+                       if(this.type=='add'){
+                           this.$api.httpApi.addCamera({
+                               data:values
+                           }).then(res => {
+                               if(res.code==200){
+                                   this.$emit('sure',false)
+                                   this.$message.success('新增球机成功');
+                               }
+                           }).catch(err => {
+
+                           });
+                       }else if(this.type=='edit'){
+                           values.id = this.id
+                           this.$api.httpApi.editCamera({
+                               data:values
+                           }).then(res => {
+                               if(res.code==200){
+                                   this.$emit('sure',false)
+                                   this.$message.success('编辑球机成功');
+                               }
+                           }).catch(err => {
+
+                           });
+                       }
+                   }
+               });
+               this.confirmLoading = false;
+           }, 500);
+       },
+
+       handleCancel() {
+           
+           console.log('Clicked cancel button');
+           this.$emit('close', false, {})
+           if(this.type=='test') {
+               this.$router.go(-1);
+           }else if(this.type=='config') {
+               this.$router.go(-1);
+               this.player.destroy();
+           }
+           
+       },
+      
+       autoPlay(id){
+           let video = document.getElementById('config-camera'+id);
+           if(video){
+               let server = this.mdata.rtcServer+":"+this.mdata.rtcServerPort
+               console.log("server:"+server)
+               let player = new WebRtcPlayer(server,video,'camera'+id);
+               console.log("okkkkkk")
+               //player.load('camera'+id);
+               this.player = player
+           }
+           
+       },
+       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 => {
+
+           });
+       },
+       
+       coverage(type,data){
+           
+           this.$api.httpApi.writeInCameraIoptz({
+               data: {
+                   cameraId: this.id,
+                   cameraIOId: data.id,
+                   name: data.name,
+                   code: data.code,
+                   type: type
+               }
+           }).then(res => {
+               
+               this.getConfigIoList()
+           }).catch(err => {
+
+           });
+       },
+       toPtz(data){
+           this.$api.httpApi.cameraIoToPtz({
+               data: {
+                   cameraId:this.id,
+                   cameraIOId:data.id,
+                   name:data.name,
+               }
+           }).then(res => {
+               console.log(res)
+           }).catch(err => {
+
+           });
+       },
+
+       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>
+<style lang="scss" scoped>
+   .add-edit-model{
+       .across-layout{
+           display: flex;
+       }
+       .ant-divider-horizontal{
+           margin:6px 0;
+       }
+   }
+   .test-model{
+       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 {
+           width: 100%;
+           height: 100%;
+       }
+       .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;
+                   -webkit-user-select: none;
+                   -ms-user-select: none;
+                   -webkit-user-drag: none;
+                   user-select: none;
+               }
+               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;
+                   -webkit-user-select: none;
+                   -ms-user-select: none;
+                   -webkit-user-drag: none;
+                   user-select: none;
+               }
+           }
+       }
+       img{
+           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;
+                   -webkit-user-select: none;
+                   -ms-user-select: none;
+                   -webkit-user-drag: none;
+                   user-select: none;
+               }
+               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;
+                   -webkit-user-select: none;
+                   -ms-user-select: none;
+                   -webkit-user-drag: none;
+                   user-select: none;
+               }
+           }
+       }
+       img{
+           cursor: pointer;
+       }
+       .config-table {
+           width: 800px;
+           height: 600px;
+           overflow: hidden;
+
+           h2 {
+               padding: 15px;
+               font-size: 20px;
+               background: #fafafa;
+               margin: 0;
+           }
+       }
+   }
+   .vxgplayer{
+       border: none;
+       margin: 0;
+       display: block;
+   }
+   .ant-btn{
+       white-space: inherit;
+       text-align: left;
+   }
+</style>
diff --git a/src/views/cameraManage/index.vue b/src/views/cameraManage/index.vue
index 02683a3..70ff2cb 100644
--- a/src/views/cameraManage/index.vue
+++ b/src/views/cameraManage/index.vue
@@ -53,6 +53,7 @@
 
 <script>
 import Model from "./model.vue"
+import ioModel from "./ioModel.vue"
 const columns = [
     {
         title: '球机名称',
@@ -138,10 +139,13 @@ export default {
                     query: {modelType: type, modelData: data}
                 })
             } else if (type == 'config') {
-                this.$router.push({
-                    name: 'cameraManageModel',
-                    query: {modelType: type, modelData: data}
-                })
+                // this.$router.push({
+                //     name: 'cameraManageModel',
+                //     query: {modelType: type, modelData: data}
+                // })
+                this.visible = true
+                this.modelType = type
+                this.modelData = data
             } else {
                 this.visible = true
                 this.modelType = type
diff --git a/src/views/cameraManage/model.vue b/src/views/cameraManage/model.vue
index 0108628..ec5d5d8 100644
--- a/src/views/cameraManage/model.vue
+++ b/src/views/cameraManage/model.vue
@@ -107,7 +107,7 @@
                          height="600"
                 :id="`config-camera${id}`" 
                 autoplay muted ></video>
-                 <div class="operation-list">
+                 <!-- <div class="operation-list">
                      <div class="operation-item">
                          <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
                               @mouseup="zoomDecStop" @mouseleave="zoomDecStop">
@@ -175,7 +175,7 @@
                          
                          
                      </a-table>
-                 </div>
+                 </div> -->
              </a-modal>
          </template>