<template>
|
<div
|
:style="'width:' + vWidth + ';height:' + vHeight"
|
class="video-box"
|
@click.stop.prevent="_click"
|
@mouseenter.stop.prevent="videoMouseEnter($event)"
|
@mouseleave="videoMouseLeave($event)"
|
>
|
<div class="video-box-top" v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null">
|
<b>{{ videoItem.name }}</b>
|
<span @click="deleteVideo(videoIndex)">×</span>
|
</div>
|
<div style="position:relative;width:100%;height: 100%;background:#272727;">
|
<div class="circle">
|
<p class="p1" @mousedown="ptCtrl('up')" @mouseup="ptStop"></p>
|
<p class="p2" @mousedown="ptCtrl('right')" @mouseup="ptStop"></p>
|
<div class="mid" @mouseup="ptStop">
|
<span class="mid_1" @mousedown="ptCtrl('zoomin')">
|
<i class="el-icon-plus"></i>
|
</span>
|
<span class="mid_2" @mousedown="ptCtrl('zoomout')" @mouseup="ptStop">
|
<i class="el-icon-minus"></i>
|
</span>
|
</div>
|
<p class="p3" @mousedown="ptCtrl('down')" @mouseup="ptStop"></p>
|
<p class="p4" @mousedown="ptCtrl('left')" @mouseup="ptStop"></p>
|
</div>
|
<camera-player
|
:cameraName="videoItem.name"
|
:cameraID="videoItem.id"
|
:rtspUrl="videoItem.rtsp"
|
:isRunning="videoItem.isRunning"
|
:isGb="videoItem.cameraType === 1"
|
:showArea="showArea"
|
v-if="!quietSwitch && videoItem !== '' && videoItem !== undefined && videoItem !== null"
|
></camera-player>
|
<camera-player
|
:cameraName="qsVideoItem0.name"
|
:cameraID="qsVideoItem0.id"
|
:rtspUrl="qsVideoItem0.rtsp"
|
:isRunning="qsVideoItem0.isRunning"
|
:isGb="qsVideoItem0.cameraType === 1"
|
v-show="quietSwitch && workPlayer === 0"
|
ref="qsPlayer0"
|
v-if="qsVideoItem0 !== '' && qsVideoItem0 !== undefined && qsVideoItem0 !== null"
|
></camera-player>
|
<camera-player
|
:cameraName="qsVideoItem1.name"
|
:cameraID="qsVideoItem1.id"
|
:rtspUrl="qsVideoItem1.rtsp"
|
:isRunning="qsVideoItem1.isRunning"
|
:isGb="qsVideoItem1.cameraType === 1"
|
v-show="quietSwitch && workPlayer === 1"
|
ref="qsPlayer1"
|
v-if="qsVideoItem1 !== '' && qsVideoItem1 !== undefined && qsVideoItem1 !== null"
|
></camera-player>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ptzControl } from "@/api/camera";
|
|
import CameraPlayer from "@/components/player";
|
|
export default {
|
components: {
|
CameraPlayer
|
},
|
props: {
|
videoGuid: {
|
type: Number,
|
default: 1
|
},
|
videoIndex: null,
|
starW: {
|
type: String,
|
default: ""
|
},
|
starH: {
|
type: String,
|
default: ""
|
},
|
videoItem: {
|
type: [Object, String],
|
default: null
|
},
|
showArea: {
|
type: Boolean,
|
default: false
|
},
|
quietSwitch: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
timer: "",
|
mouseDown: false,
|
workPlayer: -1,
|
qsVideoItem0: null,
|
qsVideoItem1: null,
|
checkStatusTimer: 0
|
};
|
},
|
computed: {
|
vWidth() {
|
if (this.starW != 0) {
|
return this.starW;
|
}
|
let per = (1 / this.videoGuid) * 100 + "%";
|
return `calc(${per} - 4px)`;
|
},
|
|
vHeight() {
|
if (this.starH != 0) {
|
return this.starH;
|
}
|
let per = (1 / this.videoGuid) * 100 + "%";
|
return `calc(${per} - 4px)`;
|
}
|
},
|
watch: {
|
videoItem: function(newVal, oldVal) {
|
if (!this.quietSwitch) {
|
return;
|
}
|
|
console.log("new rtsp:", newVal);
|
console.log("this.workPlayer:", this.workPlayer);
|
// 首次
|
if (this.workPlayer < 0) {
|
this.workPlayer = 0;
|
this.qsVideoItem0 = newVal;
|
return;
|
}
|
|
let _this = this;
|
clearInterval(_this.checkStatusTimer);
|
|
if (_this.workPlayer == 0) {
|
_this.qsVideoItem1 = newVal;
|
_this.checkStatusTimer = setInterval(() => {
|
// console.log(_this.$refs.qsPlayer1.wfs.playerStatus);
|
if (_this.$refs.qsPlayer1.wfs.playerStatus == 1) {
|
_this.workPlayer = 1;
|
_this.qsVideoItem0 = null;
|
clearInterval(_this.checkStatusTimer);
|
}
|
}, 1000);
|
}
|
|
if (_this.workPlayer == 1) {
|
_this.qsVideoItem0 = newVal;
|
_this.checkStatusTimer = setInterval(() => {
|
if (_this.$refs.qsPlayer0.wfs.playerStatus == 1) {
|
_this.workPlayer = 0;
|
_this.qsVideoItem1 = null;
|
clearInterval(_this.checkStatusTimer);
|
}
|
}, 1000);
|
}
|
}
|
},
|
methods: {
|
_click() {
|
this.$emit("click");
|
},
|
ptCtrl(type) {
|
// 当前只支持国标摄像机
|
// console.log(type, 'ptCtrl')
|
if (this.videoItem.cameraType != 1) {
|
return;
|
}
|
this.mouseDown = true;
|
let params = {
|
cameraId: this.videoItem.id,
|
cameraType: this.videoItem.cameraType,
|
PTZType: type
|
};
|
ptzControl(params).then((rsp) => {
|
// console.log(rsp)
|
});
|
let that = this;
|
this.timer = setTimeout(() => {
|
that.ptStop();
|
}, 5000);
|
},
|
ptStop() {
|
// 当前只支持国标摄像机
|
if (this.videoItem.cameraType != 1) {
|
return;
|
}
|
let params = {
|
cameraId: this.videoItem.id,
|
cameraType: this.videoItem.cameraType,
|
PTZType: "stop"
|
};
|
if (this.mouseDown) {
|
this.mouseDown = false;
|
ptzControl(params).then((rsp) => {
|
// console.log(rsp)
|
});
|
}
|
},
|
deleteVideo(index) {
|
this.TreeDataPool.setVideoArr(index, undefined, this);
|
},
|
videoMouseEnter(e) {
|
let target = e.target;
|
if (target.children.length > 1) {
|
target.children[0].style.display = "block";
|
target.children[1].children[0].style.display = "block";
|
}
|
},
|
videoMouseLeave(e) {
|
let videoBoxTop = document.getElementsByClassName("video-box-top");
|
let circle = document.getElementsByClassName("circle");
|
for (let i = 0; i < videoBoxTop.length; i++) {
|
videoBoxTop[i].style.display = "none";
|
}
|
for (let i = 0; i < circle.length; i++) {
|
circle[i].style.display = "none";
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.side-border {
|
border-right: 1px solid #cacaca;
|
border-bottom: 1px solid #cacaca;
|
}
|
.video-box {
|
float: left;
|
box-sizing: border-box;
|
padding-left: 1px;
|
padding-bottom: 1px;
|
position: relative;
|
margin: 0px 4px 4px 0px;
|
background-color: #cacaca;
|
.video-box-top {
|
color: white;
|
display: none;
|
width: 100%;
|
height: 32px;
|
line-height: 32px;
|
padding: 0px 20px;
|
box-sizing: border-box;
|
background: #27293190;
|
position: absolute;
|
top: 0px;
|
z-index: 2;
|
b {
|
float: left;
|
}
|
span {
|
float: right;
|
font-size: 22px;
|
font-weight: 900;
|
cursor: pointer;
|
}
|
}
|
.circle {
|
height: 60px;
|
width: 60px;
|
border-radius: 50%;
|
background: rgba(0, 0, 0, 0.29);
|
position: absolute;
|
z-index: 1;
|
top: 40px;
|
right: 10px;
|
display: none;
|
p {
|
position: relative;
|
cursor: pointer;
|
}
|
.p1 {
|
width: 0px;
|
height: 0px;
|
border: 8px solid;
|
border-bottom-color: rgba(0, 0, 0, 0.6);
|
border-left-color: transparent;
|
border-top-color: transparent;
|
border-right-color: transparent;
|
left: 22px;
|
top: -2px;
|
}
|
.p2 {
|
width: 0px;
|
height: 0px;
|
border: 8px solid;
|
border-bottom-color: transparent;
|
border-left-color: rgba(0, 0, 0, 0.6);
|
border-top-color: transparent;
|
border-right-color: transparent;
|
left: 46px;
|
top: 7px;
|
}
|
.p3 {
|
width: 0px;
|
height: 0px;
|
border: 8px solid;
|
border-bottom-color: transparent;
|
border-left-color: transparent;
|
border-top-color: rgba(0, 0, 0, 0.6);
|
border-right-color: transparent;
|
left: 23px;
|
top: -8px;
|
}
|
.p4 {
|
width: 0px;
|
height: 0px;
|
border: 8px solid;
|
border-bottom-color: transparent;
|
border-left-color: transparent;
|
border-top-color: transparent;
|
border-right-color: rgba(0, 0, 0, 0.6);
|
left: -2px;
|
top: -49px;
|
}
|
.mid {
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
position: relative;
|
font-size: 5px;
|
top: -13px;
|
left: 18px;
|
background: rgba(0, 0, 0, 0.6);
|
span {
|
height: 24px;
|
float: left;
|
line-height: 24px;
|
text-align: center;
|
box-sizing: border-box;
|
cursor: pointer;
|
font-weight: 900;
|
color: rgba($color: rgb(97, 97, 97), $alpha: 0.4);
|
}
|
span:hover {
|
color: #fff;
|
// background-color: #409eff;
|
}
|
.mid_1 {
|
width: 50%;
|
height: 24px;
|
border-top-left-radius: 50%;
|
border-bottom-left-radius: 50%;
|
}
|
.mid_1:hover {
|
background: #fff;
|
color: #222222;
|
}
|
.mid_2 {
|
border-top-right-radius: 50%;
|
border-bottom-right-radius: 50%;
|
width: 50%;
|
height: 24px;
|
}
|
.mid_2:hover {
|
background: #fff;
|
color: #222222;
|
}
|
}
|
.mid2 {
|
width: 18px;
|
height: 18px;
|
}
|
.p1:hover {
|
border-bottom-color: #fff;
|
}
|
.p2:hover {
|
border-left-color: #fff;
|
}
|
.p3:hover {
|
border-top-color: #fff;
|
}
|
.p4:hover {
|
border-right-color: #fff;
|
}
|
}
|
|
.video-js,
|
.vjs-custom-skin {
|
width: 100%;
|
height: 100%;
|
}
|
.video-play {
|
position: absolute;
|
top: 0px;
|
left: 0px;
|
bottom: 0px;
|
right: 0px;
|
margin: auto;
|
}
|
}
|
</style>
|
