|
|
|
|
@ -0,0 +1,790 @@
|
|
|
|
|
<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>
|
|
|
|
|
<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') {
|
|
|
|
|
if(this.player != null){
|
|
|
|
|
this.player.destroy()
|
|
|
|
|
}
|
|
|
|
|
this.$router.go(-1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
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>
|
LAPTOP-S9HJSOEB\昊天
12 months ago