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 class="video-list" v-for="(item,index) in realTimeListData" :key="index+1">
<!-- 对应全部的--> <!-- 对应全部的-->
<div v-if="tabKey == 0" class="video-item"> <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 :class="['video',i.id?'video'+i.id:'']">
</canvas> </canvas>
@ -31,7 +31,7 @@
</div> </div>
<!--对应各个巷道的--> <!--对应各个巷道的-->
<div v-if="tabKey == index+1" class="video-item"> <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 :class="['video',i.id?'video'+i.id:'']">
</canvas> </canvas>
@ -42,7 +42,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <canvas class="video-cav" width="400" height="400"></canvas>--> <!-- <canvas class="video-cav" width="480" height="270"></canvas>-->
<Model <Model
:visible.sync="visible" :visible.sync="visible"
:modelData.sync="modelData" :modelData.sync="modelData"
@ -99,7 +99,7 @@ export default {
data:{ data:{
"sourceUrl":item.rtsp, "sourceUrl":item.rtsp,
"paramBefore": "-y -i", "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 => { }).then(res => {
console.log(res.data) console.log(res.data)
@ -140,6 +140,7 @@ export default {
this.player.destroy() this.player.destroy()
console.log(item) console.log(item)
this.visible = true this.visible = true
this.modelData=item
// this.$router.push({path: '/realTimeMonitoring/model', query: {id: "2"}}); // this.$router.push({path: '/realTimeMonitoring/model', query: {id: "2"}});
}, },
submit(visible){ submit(visible){
@ -191,8 +192,8 @@ export default {
position: fixed; position: fixed;
z-index: 999; z-index: 999;
border: solid 1px skyblue; border: solid 1px skyblue;
width: 400px; width: 480px;
height: 400px; height: 270px;
} }
.flex-layouts{ .flex-layouts{
display: flex; display: flex;
@ -218,8 +219,8 @@ export default {
.video{ .video{
border: solid 1px #000000; border: solid 1px #000000;
background: #001529; background: #001529;
width: 400px; width: 480px;
height: 300px; height: 270px;
} }
} }
} }

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

@ -12,6 +12,7 @@
<!-- </a-modal>--> <!-- </a-modal>-->
<div class="video-mask"> <div class="video-mask">
<canvas class="video-canvas"></canvas>
<div class="video-close" @click="handleCancel"> <div class="video-close" @click="handleCancel">
x x
</div> </div>
@ -39,8 +40,8 @@
<img src="@/assets/right-top-icon.png" alt=""> <img src="@/assets/right-top-icon.png" alt="">
</div> </div>
<div class="direction-item"> <div class="direction-item">
<img src="@/assets/left-icon.png" alt=""> <img src="@/assets/left-icon.png" alt="" @mousedown="leftStart" @mouseup="leftStop">
<img src="@/assets/right-icon.png" alt=""> <img src="@/assets/right-icon.png" alt="" @mousedown="rightStart" @mouseup="rightStop">
</div> </div>
<div class="direction-item"> <div class="direction-item">
<img src="@/assets/left-bottom-icon.png" alt=""> <img src="@/assets/left-bottom-icon.png" alt="">
@ -71,13 +72,30 @@ export default {
modelData: function(newVal){ modelData: function(newVal){
// console.log(newVal) // console.log(newVal)
if(newVal.id){ if(newVal.id){
this.mdata=newVal
this.id = newVal.id this.id = newVal.id
console.log(newVal)
// console.log('触发了watch，重新赋值') // console.log('触发了watch，重新赋值')
this.$nextTick(()=>{ //this.$nextTick解决不能在表单渲染之前赋值的报错问题 this.$nextTick(()=>{ //this.$nextTick解决不能在表单渲染之前赋值的报错问题
this.form.setFieldsValue({ //setFieldsValue 表示对form表单重新设置值 console.log(newVal.rtsp)
ip:newVal.ip, this.$api.httpApi.getChannel({
rtsp:newVal.rtsp 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执行了') console.log('mounted执行了')
}, },
methods: { methods: {
handleOk() { leftStart(){
this.confirmLoading = true; // console.log(this.id)
setTimeout(() => { console.log('左转鼠标按下')
this.form.validateFields((err, values) => { this.$axios.post('/camera/control/left/'+this.id, {
console.log(values) data: {}
if (!err) {
console.log(this.title)
if(this.title=='新增球机'){
this.$api.httpApi.addCamera({
data:values
}).then(res => { }).then(res => {
if(res.code==200){
this.$emit('sure',false)
this.$message.success('新增球机成功');
}
}).catch(err => { }).catch(err => {
}); })
}else if(this.title=='编辑球机'){ },
values.id = this.id leftStop(){
this.$api.httpApi.editCamera({ console.log('左转鼠标抬起')
data:values this.$axios.post('/camera/control/left/stop/'+this.id, {
data: {}
}).then(res => { }).then(res => {
if(res.code==200){
this.$emit('sure',false)
this.$message.success('编辑球机成功');
}
}).catch(err => { }).catch(err => {
}); })
} },
} rightStart(){
}); console.log('右转鼠标按下')
this.confirmLoading = false; this.$axios.post('/camera/control/right/'+this.id, {
}, 500); data: {}
}).then(res => {
}).catch(err => {
})
},
rightStop(){
console.log('左转鼠标抬起')
this.$axios.post('/camera/control/right/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
}, },
handleCancel() { handleCancel() {
console.log('Clicked cancel button'); console.log('Clicked cancel button');
@ -158,6 +181,10 @@ export default {
right: 0; right: 0;
background-color: #001529; background-color: #001529;
z-index: 9999; z-index: 9999;
.video-canvas{
width: 100vw;
height: 100vh;
}
.video-close{ .video-close{
position: absolute; position: absolute;
right: 20px; right: 20px;

Write Preview
Loading…
Cancel
Save