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 a31ae9d689
commit 5c91e4b548
3 changed files with 75 additions and 47 deletions
Show Stats Download Patch File Download Diff File

BIN
dist.zip
View File

Binary file not shown.

17
src/views/realTimeMonitoring/index.vue
Unescape Escape View File

@ -20,7 +20,7 @@
<div class="video-list" v-for="(item,index) in realTimeListData" :key="index+1">
<!-- 对应全部的-->
<div v-if="tabKey == 0" class="video-item">
<div class="video-box" width="400" height="300" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
<div class="video-box" width="480" height="270" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
<canvas :class="['video',i.id?'video'+i.id:'']">
</canvas>
@ -31,7 +31,7 @@
</div>
<!--对应各个巷道的-->
<div v-if="tabKey == index+1" class="video-item">
<div class="video-box" width="400" height="300" v-for="i in item.cameras" :key="i.id">
<div class="video-box" width="480" height="270" v-for="i in item.cameras" :key="i.id">
<canvas :class="['video',i.id?'video'+i.id:'']">
</canvas>
@ -42,7 +42,7 @@
</div>
</div>
</div>
<!-- <canvas class="video-cav" width="400" height="400"></canvas>-->
<!-- <canvas class="video-cav" width="480" height="270"></canvas>-->
<Model
:visible.sync="visible"
:modelData.sync="modelData"
@ -99,7 +99,7 @@ export default {
data:{
"sourceUrl":item.rtsp,
"paramBefore": "-y -i",
"paramBehind": "-f mpegts -codec:v mpeg1video -an -s 720*480 -b:v 500k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
"paramBehind": "-f mpegts -codec:v mpeg1video -an -s 480*270 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
}
}).then(res => {
console.log(res.data)
@ -140,6 +140,7 @@ export default {
this.player.destroy()
console.log(item)
this.visible = true
this.modelData=item
// this.$router.push({path: '/realTimeMonitoring/model', query: {id: "2"}});
},
submit(visible){
@ -191,8 +192,8 @@ export default {
position: fixed;
z-index: 999;
border: solid 1px skyblue;
width: 400px;
height: 400px;
width: 480px;
height: 270px;
}
.flex-layouts{
display: flex;
@ -218,8 +219,8 @@ export default {
.video{
border: solid 1px #000000;
background: #001529;
width: 400px;
height: 300px;
width: 480px;
height: 270px;
}
}
}

97
src/views/realTimeMonitoring/model.vue
Unescape Escape View File

@ -12,6 +12,7 @@
<!-- </a-modal>-->
<div class="video-mask">
<canvas class="video-canvas"></canvas>
<div class="video-close" @click="handleCancel">
x
</div>
@ -39,8 +40,8 @@
<img src="@/assets/right-top-icon.png" alt="">
</div>
<div class="direction-item">
<img src="@/assets/left-icon.png" alt="">
<img src="@/assets/right-icon.png" alt="">
<img src="@/assets/left-icon.png" alt="" @mousedown="leftStart" @mouseup="leftStop">
<img src="@/assets/right-icon.png" alt="" @mousedown="rightStart" @mouseup="rightStop">
</div>
<div class="direction-item">
<img src="@/assets/left-bottom-icon.png" alt="">
@ -71,13 +72,30 @@ export default {
modelData: function(newVal){
// console.log(newVal)
if(newVal.id){
this.mdata=newVal
this.id = newVal.id
console.log(newVal)
// console.log('触发了watch，重新赋值')
this.$nextTick(()=>{ //this.$nextTick解决不能在表单渲染之前赋值的报错问题
this.form.setFieldsValue({ //setFieldsValue 表示对form表单重新设置值
ip:newVal.ip,
rtsp:newVal.rtsp
console.log(newVal.rtsp)
this.$api.httpApi.getChannel({
data:{
"sourceUrl":newVal.rtsp,
"paramBefore": "-y -i",
"paramBehind": "-f mpegts -codec:v mpeg1video -an -s 1707*960 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
}
}).then(res => {
console.log(res.data)
var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
var player = new JSMpeg.Player(url, {
canvas: document.querySelector('.video-canvas'),
audio: false,
pauseWhenHidden: false,
videoBufferSize: 8 * 1024 * 1024,
loop:false,
})
player.play()
}).catch(err => {
})
})
}
@ -101,41 +119,46 @@ export default {
console.log('mounted执行了')
},
methods: {
handleOk() {
this.confirmLoading = true;
setTimeout(() => {
this.form.validateFields((err, values) => {
console.log(values)
if (!err) {
console.log(this.title)
if(this.title=='新增球机'){
this.$api.httpApi.addCamera({
data:values
leftStart(){
// console.log(this.id)
console.log('左转鼠标按下')
this.$axios.post('/camera/control/left/'+this.id, {
data: {}
}).then(res => {
if(res.code==200){
this.$emit('sure',false)
this.$message.success('新增球机成功');
}
}).catch(err => {
});
}else if(this.title=='编辑球机'){
values.id = this.id
this.$api.httpApi.editCamera({
data:values
})
},
leftStop(){
console.log('左转鼠标抬起')
this.$axios.post('/camera/control/left/stop/'+this.id, {
data: {}
}).then(res => {
if(res.code==200){
this.$emit('sure',false)
this.$message.success('编辑球机成功');
}
}).catch(err => {
});
}
}
});
this.confirmLoading = false;
}, 500);
})
},
rightStart(){
console.log('右转鼠标按下')
this.$axios.post('/camera/control/right/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightStop(){
console.log('左转鼠标抬起')
this.$axios.post('/camera/control/right/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
handleCancel() {
console.log('Clicked cancel button');
@ -158,6 +181,10 @@ export default {
right: 0;
background-color: #001529;
z-index: 9999;
.video-canvas{
width: 100vw;
height: 100vh;
}
.video-close{
position: absolute;
right: 20px;

Write Preview
Loading…
Cancel
Save