upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

相机控制修改

Browse Source
南通通威
LAPTOP-S9HJSOEB\昊天 1 year ago
parent c5d4075247
commit 88d2fe4f34
3 changed files with 858 additions and 6 deletions
Show Stats Download Patch File Download Diff File

848
src/views/cameraManage/controllerModel.vue
Unescape Escape View File

@ -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>

12
src/views/cameraManage/index.vue
Unescape Escape View File

@ -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

4
src/views/cameraManage/model.vue
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save