<template>
|
<div
|
:style="'width:' + width + ';height:' + height"
|
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;z-index: 0;">
|
<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"
|
v-if="
|
videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName === 'camera'
|
"
|
></camera-player>
|
|
<video
|
v-if="
|
videoItem !== '' &&
|
videoItem !== undefined &&
|
videoItem !== null &&
|
TreeDataPool.treeActiveName === 'dataStack'
|
"
|
:src="videoItem.rtsp"
|
autoplay="autoplay"
|
poster="../../assets/img/baseimg.png"
|
controls
|
>
|
您的浏览器不支持 video 标签。
|
</video>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ptzControl } from "@/api/camera"
|
|
import CameraPlayer from "@/components/wasmPlayer"
|
|
export default {
|
components: {
|
CameraPlayer
|
},
|
props: {
|
videoGuid: {
|
type: Number,
|
default: 1
|
},
|
videoIndex: null,
|
videoItem: {
|
type: [Object, String],
|
default: null
|
}
|
},
|
data() {
|
return {
|
timer: "",
|
mouseDown: false,
|
videoDataItem: null
|
}
|
},
|
|
computed: {
|
width() {
|
let per = (1 / this.videoGuid) * 100 + "%"
|
return `calc(${per} - 4px)`
|
},
|
height() {
|
let per = (1 / this.videoGuid) * 100 + "%"
|
return `calc(${per} - 4px)`
|
}
|
},
|
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) {
|
let video = this.TreeDataPool.videoArr
|
video[index].isPlaying = false
|
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>
|
