<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 :title="videoItem.name">{{ videoItem.name }}</b>
|
<span @click="deleteVideo(videoIndex)">×</span>
|
</div>
|
<div style="position:relative;width:100%;height: 100%;">
|
<!-- 云台控制 -->
|
<!-- <div class="circle">
|
<p class="p1"></p>
|
<p class="p2"></p>
|
<div class="mid">
|
<span class="mid_1">+</span>
|
<span class="mid_2">-</span>
|
</div>
|
<p class="p3"></p>
|
<p class="p4"></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"
|
></camera-player>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CameraPlayer from "@/components/player";
|
|
export default {
|
components: {
|
CameraPlayer
|
},
|
props: {
|
videoGuid: {
|
type: Number,
|
default: 1
|
},
|
videoIndex: null,
|
videoItem: {
|
type: [Object, String],
|
default: null
|
}
|
},
|
computed: {
|
width() {
|
// let per = (1 / this.videoGuid) * 100 + "%";
|
// return `calc(${per} - 4px)`;
|
return "48%";
|
},
|
height() {
|
// let per = (1 / this.videoGuid) * 100 + "%";
|
// return `calc(${per} - 4px)`;
|
return "25%";
|
}
|
},
|
data() {
|
return {};
|
},
|
methods: {
|
_click() {
|
this.$emit("click");
|
},
|
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: #95b7ff14;
|
.video-box-top {
|
color: #95b7ff;
|
display: none;
|
width: 100%;
|
height: 22px;
|
line-height: 22px;
|
padding: 0px 20px;
|
box-sizing: border-box;
|
background: #27293190;
|
position: absolute;
|
top: 0px;
|
z-index: 2;
|
b {
|
float: left;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
width: 120px;
|
}
|
span {
|
float: right;
|
font-size: 22px;
|
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;
|
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_2 {
|
border-top-right-radius: 50%;
|
border-bottom-right-radius: 50%;
|
width: 50%;
|
height: 24px;
|
}
|
}
|
.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>
|
