监控恢复
parent
c13a4b0e5f
commit
f705693f25
File diff suppressed because one or more lines are too long
@ -0,0 +1,186 @@
|
||||
|
||||
<template>
|
||||
<div class="uav-container">
|
||||
<div class="title">
|
||||
视频监控
|
||||
</div>
|
||||
<div class="monitor-container">
|
||||
<div id="root" style="width:235px;height:178px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref,onMounted,onBeforeUnmount,defineProps,watch} from 'vue';
|
||||
// import EasyPlayer from '@easydarwin/easyplayer'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
const isShowPlayer = ref(false);
|
||||
|
||||
const props = defineProps(["monitorInfo"])
|
||||
|
||||
const isFirstLoad = ref(false);
|
||||
watch(
|
||||
()=>props.monitorInfo,
|
||||
(newVal,oldVal)=>{
|
||||
if(isFirstLoad.value){
|
||||
getPlayToken();
|
||||
}else{
|
||||
isFirstLoad.value = true;
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
let monitorPlayer = null;
|
||||
|
||||
const getPlayToken = ()=>{
|
||||
let params = {
|
||||
deviceId:props.monitorInfo.number,
|
||||
channelId:props.monitorInfo.channel,
|
||||
type:0,
|
||||
}
|
||||
|
||||
axios({
|
||||
method:"post",
|
||||
url:"http://111.17.207.220:9001/api/Camera/getKitToken?deviceId="+params.deviceId+"&channelId="+params.channelId+"&type=0",
|
||||
}).then(res=>{
|
||||
let kitToken = res.data.result.data.kitToken;
|
||||
loadMonitorVideo(kitToken);
|
||||
})
|
||||
}
|
||||
|
||||
const loadMonitorVideo = (token) => {
|
||||
monitorPlayer && monitorPlayer.destroy()
|
||||
|
||||
monitorPlayer = null
|
||||
|
||||
monitorPlayer = new imouPlayer({
|
||||
id: 'root',
|
||||
width: 388,
|
||||
height: 230,
|
||||
deviceId: props.monitorInfo.number,
|
||||
token:token,
|
||||
channelId:props.monitorInfo.channel,
|
||||
type:1,
|
||||
streamId:0,
|
||||
recordType: 'cloud',
|
||||
code:""
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
getPlayToken();
|
||||
})
|
||||
|
||||
onBeforeUnmount(()=>{
|
||||
monitorPlayer && monitorPlayer.destroy()
|
||||
|
||||
monitorPlayer = null
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style type="less" scoped>
|
||||
|
||||
.uav-container{
|
||||
width: 418px;
|
||||
height: 300px;
|
||||
background:#041B36;
|
||||
position: relative;
|
||||
|
||||
.title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background-image:url("/videosupervision/title.png");
|
||||
background-size:100% 100%;
|
||||
line-height:40px;
|
||||
text-indent:18px;
|
||||
font-size:18px;
|
||||
font-weight:bold;
|
||||
color:#fff;
|
||||
}
|
||||
.switch-button{
|
||||
float:right;
|
||||
margin-right:20px;
|
||||
}
|
||||
.uav-list-container{
|
||||
width:100%;
|
||||
height: calc( 100% - 60px);
|
||||
overflow:auto;
|
||||
padding:20px 20px;
|
||||
position:relative;
|
||||
z-index:999;
|
||||
.uav-empty{
|
||||
width:100%;
|
||||
height:100%;
|
||||
text-align:center;
|
||||
color:#999;
|
||||
img{
|
||||
width:120px;
|
||||
margin:40px 0px 18px 0px;
|
||||
}
|
||||
}
|
||||
.uav-item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
padding:0px 15px;
|
||||
line-height:40px;
|
||||
color:#f1f1f1;
|
||||
display:flex;
|
||||
background:rgba(0,0,0,0.2);
|
||||
&:hover{
|
||||
background:rgba(0,0,0,0.4);
|
||||
}
|
||||
div{
|
||||
flex:1;
|
||||
}
|
||||
.position{
|
||||
max-width:30px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.play{
|
||||
max-width:30px;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.TCPlayer-video-contaiiner{
|
||||
width: calc( 100% - 30px);
|
||||
height: calc( 100% - 70px);
|
||||
position:absolute;
|
||||
margin:15px;
|
||||
top:40px;
|
||||
right:0px;
|
||||
z-index:1000;
|
||||
background:#041B36;
|
||||
.video-contain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.close-video-button{
|
||||
position:absolute;
|
||||
top:40px;
|
||||
right:10px;
|
||||
background:rgba(0,0,0,0.3);
|
||||
z-index:100100;
|
||||
color:#fff;
|
||||
padding:10px;
|
||||
cursor:pointer;
|
||||
&:hover{
|
||||
color:#408eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.monitor-container{
|
||||
width: calc( 100% - 30px);
|
||||
height: calc( 100% - 70px);
|
||||
padding:15px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue