You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
582 lines
19 KiB
Vue
582 lines
19 KiB
Vue
<template>
|
|
<div class="realTime bg-white">
|
|
<a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange" padding:10px>
|
|
<a-tab-pane :key="item.streetId.toString()" :tab="item.streetName" v-for="item in realTimeListData"></a-tab-pane>
|
|
</a-tabs>
|
|
<!-- {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
|
|
<a-row :gutter="20">
|
|
<a-col
|
|
v-for="(item, index) in cameras.slice(0, selectTab.videoStyleRow * selectTab.videoStyleColumn)"
|
|
:span="24 / selectTab.videoStyleColumn"
|
|
:key="index"
|
|
:style="{
|
|
height: videoHeight,
|
|
|
|
marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
|
|
}"
|
|
>
|
|
<div style="position: relative;width: 100%;">
|
|
<video :style="{ height: videoHeight,}" :id="`camera${item.id}`" autoplay muted controls>
|
|
</video>
|
|
<div class="operation-list">
|
|
<div class="operation-item">
|
|
<img :src="zoomSubUrl" alt="" @mousedown=zoomDecStart($event,item.id) @mouseleave=zoomDecStop($event,item.id)
|
|
>
|
|
<span>变倍</span>
|
|
<img :src="zoomAddUrl" alt="" @mousedown=zoomAddStart($event,item.id) @mouseleave=zoomAddStop($event,item.id)
|
|
>
|
|
</div>
|
|
<div class="operation-item">
|
|
<img :src="focusSubUrl" alt="" @mousedown=focusDecStart($event,item.id) @mouseleave=focusDecStop($event,item.id)
|
|
@mouseup=focusDecStop($event,item.id)>
|
|
<span>变焦</span>
|
|
<img :src="focusAddUrl" alt="" @mousedown=focusAddStart($event,item.id) @mouseleave=focusAddStop($event,item.id)
|
|
@mouseup=focusAddStop($event,item.id)>
|
|
</div>
|
|
<div class="operation-item">
|
|
<img :src="irisSubUrl" alt="" @mousedown=irisDecStart($event,item.id) @mouseup=irisDecStop($event,item.id) @mouseleave=irisDecStop($event,item.id)>
|
|
<span>光圈</span>
|
|
<img :src="irisAddUrl" alt="" @mousedown=irisAddStart($event,item.id) @mouseup=irisAddStop($event,item.id) @mouseleave=irisAddStop($event,item.id)>
|
|
</div>
|
|
</div>
|
|
<div class="direction-list">
|
|
<div class="direction-item">
|
|
<img :src="leftUpUrl" alt="" @mousedown=leftUpStart($event,item.id) @mouseup=leftUpStop($event,item.id) @mouseleave=leftUpStop($event,item.id)>
|
|
<img :src="upUrl" alt="" @mousedown=upStart($event,item.id) @mouseup=upStop($event,item.id) @mouseleave=upStop($event,item.id) >
|
|
<img :src="rightUpUrl" alt="" @mousedown=rightUpStart($event,item.id) @mouseup=rightUpStop($event,item.id) @mouseleave=rightUpStop($event,item.id) >
|
|
</div>
|
|
<div class="direction-item">
|
|
<img :src="leftUrl" alt="" @mousedown=leftStart($event,item.id) @mouseup=leftStop($event,item.id) @mouseleave=leftStop($event,item.id)>
|
|
<img :src="rightUrl" alt="" @mousedown=rightStart($event,item.id) @mouseup=rightStop($event,item.id) @mouseleave=rightStop($event,item.id)>
|
|
</div>
|
|
<div class="direction-item">
|
|
<img :src="leftDownUrl" alt="" @mousedown=leftDownStart($event,item.id)
|
|
@mouseup=leftDownStop($event,item.id) @mouseleave=leftDownStop($event,item.id)>
|
|
<img :src="downUrl" alt="" @mousedown=downStart($event,item.id) @mouseup=downStop($event,item.id) @mouseleave=downStop($event,item.id)>
|
|
<img :src="rightDownUrl" alt="" @mousedown=rightDownStart($event,item.id)
|
|
@mouseup=rightDownStop($event,item.id) @mouseleave=rightDownStop($event,item.id)>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</a-col>
|
|
</a-row>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import WebRtcPlayer from "../../../public/static/webrtcplayer"
|
|
export default {
|
|
name: "realTimeMonitoring",
|
|
components: {
|
|
//VideoPlayer
|
|
},
|
|
data() {
|
|
return {
|
|
realTimeListData: [],
|
|
url: "722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
|
|
tabKey: "0",
|
|
path: [],
|
|
player: "",
|
|
visible: false,
|
|
modelData: [],
|
|
clientHeight: 0,
|
|
|
|
players: [],
|
|
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'),
|
|
};
|
|
},
|
|
computed: {
|
|
selectTab() {
|
|
return (this.realTimeListData.filter(item=> item.streetId == this.tabKey)[0] || {})
|
|
},
|
|
cameras() {
|
|
return this.selectTab.cameras || [];
|
|
},
|
|
videoHeight() {
|
|
return (( this.clientHeight)/ this.selectTab.videoStyleRow ) + 'px'
|
|
},
|
|
},
|
|
//inject: ['reload'],
|
|
mounted() {
|
|
this.getClientHeight()
|
|
this.getRealTimeList()
|
|
|
|
this.tabKey = sessionStorage.getItem('tabKey');
|
|
|
|
},
|
|
destroyed() {
|
|
this.destory()
|
|
},
|
|
methods: {
|
|
getClientHeight() {
|
|
this.clientHeight = this.$el.clientHeight - 80;
|
|
},
|
|
getRealTimeList(){
|
|
|
|
this.$api.httpApi.getRealTimeList({
|
|
data: {}
|
|
}).then(res => {
|
|
if(res.code == 200) {
|
|
this.realTimeListData = res.data.reverse();
|
|
if (sessionStorage.getItem('tabKey') == null) {
|
|
console.log("tabKey"+this.realTimeListData[0].id)
|
|
sessionStorage.setItem('tabKey', this.realTimeListData[0].streetId)
|
|
this.tabKey = sessionStorage.getItem('tabKey');
|
|
}
|
|
this.$nextTick(() => {
|
|
this.autoPlay()
|
|
})
|
|
}
|
|
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
|
|
tabsChange(key) {
|
|
sessionStorage.setItem('tabKey', key)
|
|
this.destory()
|
|
this.$nextTick(() => {
|
|
this.autoPlay()
|
|
})
|
|
|
|
},
|
|
|
|
autoPlay(){
|
|
this.players = []
|
|
for(var a of this.realTimeListData){
|
|
for (let b of a.cameras){
|
|
let video = document.getElementById('camera'+b.id);
|
|
if(video){
|
|
console.log("play:"+b.id)
|
|
let server = b.rtcServer+":"+b.rtcServerPort;
|
|
let player = new WebRtcPlayer(server,video,'camera'+b.id);
|
|
this.players.push(player)
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
destory(){
|
|
for(let player of this.players){
|
|
console.log("stop")
|
|
player.destroy()
|
|
}
|
|
},
|
|
zoomDecStart(event,id){
|
|
console.log('变倍-按下')
|
|
console.log(id)
|
|
this.zoomSubUrl=require('@/assets/sub-active-icon.png')
|
|
this.$axios.post('/camera/control/zoomDec/start/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
zoomDecStop(event,id){
|
|
console.log('变倍-抬起')
|
|
console.log(id)
|
|
this.zoomSubUrl=require('@/assets/sub-icon.png')
|
|
this.$axios.post('/camera/control/zoomDec/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
zoomAddStart(event,id){
|
|
console.log('变倍+按下')
|
|
this.zoomAddUrl=require('@/assets/add-active-icon.png')
|
|
this.$axios.post('/camera/control/zoomAdd/start/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
zoomAddStop(event,id){
|
|
console.log('变倍+抬起')
|
|
this.zoomAddUrl=require('@/assets/add-icon.png')
|
|
this.$axios.post('/camera/control/zoomAdd/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
focusDecStart(event,id){
|
|
console.log('变焦-按下')
|
|
this.focusSubUrl=require('@/assets/sub-active-icon.png')
|
|
this.$axios.post('/camera/control/focusDec/start/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
focusDecStop(event,id){
|
|
console.log('变焦-抬起')
|
|
this.focusSubUrl=require('@/assets/sub-icon.png')
|
|
this.$axios.post('/camera/control/focusDec/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
focusAddStart(event,id){
|
|
console.log('变焦+按下')
|
|
this.focusAddUrl=require('@/assets/add-active-icon.png')
|
|
this.$axios.post('/camera/control/focusAdd/start/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
focusAddStop(event,id){
|
|
console.log('变焦+抬起')
|
|
this.focusAddUrl=require('@/assets/add-icon.png')
|
|
this.$axios.post('/camera/control/focusAdd/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
irisDecStart(event,id){
|
|
console.log('光圈-按下')
|
|
this.irisSubUrl=require('@/assets/sub-active-icon.png')
|
|
this.$axios.post('/camera/control/irisDec/start/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
irisDecStop(event,id){
|
|
console.log('光圈-抬起')
|
|
this.irisSubUrl=require('@/assets/sub-icon.png')
|
|
this.$axios.post('/camera/control/irisDec/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
irisAddStart(event,id){
|
|
console.log('光圈+按下')
|
|
this.irisAddUrl=require('@/assets/add-active-icon.png')
|
|
this.$axios.post('/camera/control/irisAdd/start/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
irisAddStop(event,id){
|
|
console.log('光圈+抬起')
|
|
this.irisAddUrl=require('@/assets/add-icon.png')
|
|
this.$axios.post('/camera/control/irisAdd/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
leftUpStart(event,id){
|
|
console.log('左上鼠标按下')
|
|
this.leftUpUrl=require('@/assets/left-up-active-icon.png')
|
|
this.$axios.post('/camera/control/leftUp/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
leftUpStop(event,id){
|
|
console.log('左上鼠标抬起')
|
|
this.leftUpUrl=require('@/assets/left-up-icon.png')
|
|
this.$axios.post('/camera/control/leftUp/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
upStart(event,id){
|
|
console.log('上鼠标按下')
|
|
this.upUrl=require('@/assets/up-active-icon.png')
|
|
this.$axios.post('/camera/control/up/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
upStop(event,id){
|
|
console.log('上鼠标抬起')
|
|
this.upUrl=require('@/assets/up-icon.png')
|
|
this.$axios.post('/camera/control/up/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
rightUpStart(event,id){
|
|
console.log('右上鼠标按下')
|
|
this.rightUpUrl=require('@/assets/right-up-active-icon.png')
|
|
this.$axios.post('/camera/control/rightUp/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
rightUpStop(event,id){
|
|
console.log('右上鼠标抬起')
|
|
this.rightUpUrl=require('@/assets/right-up-icon.png')
|
|
this.$axios.post('/camera/control/rightUp/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
leftStart(event,id){
|
|
// console.log(this.id)
|
|
console.log('左转鼠标按下')
|
|
this.leftUrl=require('@/assets/left-active-icon.png')
|
|
this.$axios.post('/camera/control/left/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
leftStop(event,id){
|
|
this.leftUrl=require('@/assets/left-icon.png')
|
|
console.log('左转鼠标抬起')
|
|
this.$axios.post('/camera/control/left/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
rightStart(event,id){
|
|
console.log('右转鼠标按下')
|
|
this.rightUrl=require('@/assets/right-active-icon.png')
|
|
this.$axios.post('/camera/control/right/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
rightStop(event,id){
|
|
console.log('右转鼠标抬起')
|
|
this.rightUrl=require('@/assets/right-icon.png')
|
|
this.$axios.post('/camera/control/right/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
leftDownStart(event,id){
|
|
console.log('左下鼠标按下')
|
|
this.leftDownUrl=require('@/assets/left-down-active-icon.png')
|
|
this.$axios.post('/camera/control/leftDown/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
leftDownStop(event,id){
|
|
console.log('左下鼠标抬起')
|
|
this.leftDownUrl=require('@/assets/left-down-icon.png')
|
|
this.$axios.post('/camera/control/leftDown/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
downStart(event,id){
|
|
console.log('下鼠标按下')
|
|
this.downUrl=require('@/assets/down-active-icon.png')
|
|
this.$axios.post('/camera/control/down/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
downStop(event,id){
|
|
console.log('下鼠标抬起')
|
|
this.downUrl=require('@/assets/down-icon.png')
|
|
this.$axios.post('/camera/control/down/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
rightDownStart(event,id){
|
|
console.log('右下鼠标按下')
|
|
this.rightDownUrl=require('@/assets/right-down-active-icon.png')
|
|
this.$axios.post('/camera/control/rightDown/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
rightDownStop(event,id){
|
|
console.log('右下鼠标抬起')
|
|
this.rightDownUrl=require('@/assets/right-down-icon.png')
|
|
this.$axios.post('/camera/control/rightDown/stop/'+id, {
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.realTime {
|
|
padding: 10px;
|
|
}
|
|
//全屏按钮
|
|
|
|
//播放按钮
|
|
video::-webkit-media-controls-play-button {
|
|
display: none;
|
|
}
|
|
//进度条
|
|
video::-webkit-media-controls-timeline {
|
|
display: none;
|
|
}
|
|
//观看的当前时间
|
|
video::-webkit-media-controls-current-time-display{
|
|
display: none;
|
|
}
|
|
//剩余时间
|
|
video::-webkit-media-controls-time-remaining-display {
|
|
display: none;
|
|
}
|
|
//音量按钮
|
|
video::-webkit-media-controls-mute-button {
|
|
display: none;
|
|
}
|
|
video::-webkit-media-controls-toggle-closed-captions-button {
|
|
display: none;
|
|
}
|
|
//音量的控制条
|
|
video::-webkit-media-controls-volume-slider {
|
|
display: none;
|
|
}
|
|
//所有控件
|
|
video::-webkit-media-controls-enclosure{
|
|
display: none;
|
|
}
|
|
.operation-list {
|
|
position: absolute;
|
|
right: 200px;
|
|
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: 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: 32px;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
-webkit-user-drag: none;
|
|
user-select: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|