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
merge-requests/1/head
张鑫 5 years ago
parent 67642928b4
commit 767ccd229f
4 changed files with 283 additions and 8 deletions
Show Stats Download Patch File Download Diff File

10
src/api/http/http-api.js
Unescape Escape View File

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

2
src/layouts/AsideMenu.vue
Unescape Escape View File

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

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

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

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

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

Write Preview
Loading…
Cancel
Save