<template>
|
<div style="width: 100%; height: 100%">
|
<div class="monitoring-right" ref="videoRight">
|
<div class="main-top">
|
<div class="monitoring-video" ref="monitorVideo">
|
<div class="fixedRatioBox">
|
<div class="video-main-box-side" v-if="visibilityState && allVideoNum == 5">
|
<VideoItem
|
:starW="`calc(66.66% - 4px)`"
|
:starH="`calc(66.66% - 4px)`"
|
:videoItem="centerVideo"
|
quietSwitch
|
class="activeItem"
|
></VideoItem>
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
|
<div class="video-main-box-side" v-if="visibilityState && allVideoNum == 7">
|
<VideoItem
|
:videoGuid="guid"
|
:starW="`calc(74.99% - 4px)`"
|
:starH="`calc(74.99% - 4px)`"
|
:videoItem="centerVideo"
|
quietSwitch
|
class="activeItem"
|
></VideoItem>
|
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
|
<div class="video-main-box-side" v-if="visibilityState && allVideoNum == 12">
|
<div style="width: 100%; height: 25%">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(0, 4)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(24.99% - 4px)`"
|
:starH="`calc(100% - 4px)`"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<div style="width: 25%; height: 50%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(4, 6)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(100% - 4px)`"
|
:starH="`calc(50% - 4px)`"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<VideoItem
|
:videoGuid="guid"
|
:starW="`calc(50% - 4px)`"
|
:starH="`calc(50% - 4px)`"
|
:videoItem="centerVideo"
|
quietSwitch
|
></VideoItem>
|
|
<div style="width: 25%; height: 50%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(6, 8)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(100% - 4px)`"
|
:starH="`calc(50% - 4px)`"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<div style="width: 100%; height: 25%">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(8)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(24.99% - 4px)`"
|
:starH="`calc(100% - 4px)`"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
</div>
|
|
<div class="video-main-box-side" v-if="visibilityState && allVideoNum == 16">
|
<div style="width: 100%; height: 20%">
|
<!-- :class="[
|
TreeDataPool.activeVideoIndex === index + 1
|
? 'activeItem'
|
: '',
|
guid === 1 ? 'onlyActiveItem' : '',
|
]" -->
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(0, 5)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(19.99% - 4px)`"
|
:starH="`calc(100% - 4px)`"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<div style="width: 20%; height: 60%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(5, 8)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(100% - 4px)`"
|
:starH="`calc(33.33% - 4px)`"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<VideoItem
|
:videoGuid="guid"
|
:starW="`calc(60% - 4px)`"
|
:starH="`calc(60% - 4px)`"
|
:videoItem="centerVideo"
|
quietSwitch
|
class="activeItem"
|
></VideoItem>
|
<div style="width: 20%; height: 60%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(8, 11)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(100% - 4px)`"
|
:starH="`calc(33.33% - 4px)`"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<div style="width: 100%; height: 20%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(11)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(19.99% - 4px)`"
|
:starH="`calc(100% - 4px)`"
|
:videoItem="item"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import VideoItem from "../components/VideoItem";
|
import { showAllCameras } from "@/api/trackCamera";
|
|
export default {
|
name: "Video",
|
components: {
|
VideoItem
|
},
|
computed: {
|
nextIndex() {
|
if (this.centerIndex == this.list2TakeTurn.length - 1) {
|
return 0;
|
}
|
return this.centerIndex + 1;
|
}
|
},
|
data() {
|
return {
|
guid: 3,
|
visibilityState: true,
|
allVideoNum: 5,
|
centerVideo: null,
|
list2TakeTurn: [],
|
timer: null,
|
reqTimer: null,
|
centerIndex: 0
|
};
|
},
|
created() {
|
this.getActiveIndex();
|
this.TreeDataPool.readonly = true;
|
this.TreeDataPool.gbReadonly = true;
|
this.TreeDataPool.multiple = true;
|
},
|
mounted() {
|
document.addEventListener("visibilitychange", this.visibilitychange, false);
|
showAllCameras()
|
.then((res) => {
|
this.setAllVideoNum(res.data.length);
|
res.data.forEach((info, i) => {
|
let camera = this.TreeDataPool.getCameraInfoById(info.id);
|
this.TreeDataPool.setVideoArr(i, camera, this);
|
if (info.status >= 1) {
|
this.list2TakeTurn.push(info);
|
}
|
});
|
// debugger
|
if (this.list2TakeTurn.length == 0 && res.data.length) {
|
this.list2TakeTurn.push(res.data[0]);
|
}
|
this.centerPlay();
|
this.repeatRequest();
|
})
|
.catch((err) => {
|
// this.repeatRequest();
|
});
|
},
|
beforeDestroy() {
|
window.removeEventListener("resize", this.getRightWidth);
|
window.clearInterval(this.trackTimer);
|
},
|
watch: {
|
"TreeDataPool.videoArr"(value) {
|
this.getActiveIndex();
|
},
|
"TreeDataPool.showTreeBox"(value) {
|
this.getRightWidth();
|
},
|
"TreeDataPool.selectedNodes.length"(value) {
|
this.getActiveIndex();
|
this.list2TakeTurn = [];
|
this.setAllVideoNum(this.TreeDataPool.selectedNodes.length);
|
this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, this.TreeDataPool.selectedNode, this);
|
|
// this.TreeDataPool.selectedNodes.forEach((id, i) => {
|
// let camera = this.TreeDataPool.getCameraInfoById(id);
|
// this.TreeDataPool.setVideoArr(i, camera, this);
|
|
// if (camera.status >= 1) {
|
// this.list2TakeTurn.push(camera);
|
// }
|
// });
|
|
this.centerVideo = { ...this.TreeDataPool.selectedNode };
|
}
|
},
|
methods: {
|
setAllVideoNum(videoCount) {
|
if (videoCount <= 5) {
|
this.guid = 3;
|
this.allVideoNum = 5;
|
} else if (videoCount <= 7) {
|
this.guid = 4;
|
this.allVideoNum = 7;
|
} else if (videoCount <= 12) {
|
this.guid = 4;
|
this.allVideoNum = 12;
|
} else if (videoCount <= 16) {
|
this.guid = 5;
|
this.allVideoNum = 16;
|
} else {
|
this.guid = 5;
|
this.allVideoNum = 16;
|
}
|
},
|
isSame(arr1, arr2) {
|
let _arr1 = [];
|
arr1.forEach((item) => {
|
_arr1.push(item.id);
|
});
|
for (const id of _arr1) {
|
if (!arr2.includes(id)) {
|
return false;
|
}
|
}
|
if (_arr1.length !== arr2.length) {
|
return false;
|
}
|
return true;
|
},
|
centerPlay() {
|
if (this.list2TakeTurn.length == 1) {
|
this.centerVideo = { ...this.list2TakeTurn[0] };
|
return;
|
}
|
let that = this;
|
that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
|
that.centerIndex++;
|
if (that.centerIndex == that.list2TakeTurn.length) {
|
that.centerIndex = 0;
|
}
|
|
clearInterval(this.timer);
|
this.timer = setInterval(() => {
|
that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
|
that.centerIndex++;
|
if (that.centerIndex == that.list2TakeTurn.length) {
|
that.centerIndex = 0;
|
}
|
}, 25 * 1000);
|
},
|
repeatRequest() {
|
this.reqTimer = setInterval(() => {
|
showAllCameras().then((res) => {
|
let newArr = [];
|
let newArr1 = [];
|
res.data.forEach((info, i) => {
|
if (info.status >= 1) {
|
newArr.push(info.id);
|
newArr1.push(info);
|
}
|
});
|
// if (newArr.length == 0 && res.data.length) {
|
// newArr.push(res.data[0].id);
|
// newArr1.push(res.data[0]);
|
// }
|
if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
|
this.list2TakeTurn = [...newArr1];
|
this.centerIndex = 0;
|
this.centerPlay("change");
|
}
|
});
|
}, 2500);
|
},
|
visibilitychange() {
|
switch (document.visibilityState) {
|
case "hidden":
|
this.visibilityState = false;
|
break;
|
case "visible":
|
this.visibilityState = true;
|
break;
|
}
|
},
|
videoItemClick(index) {
|
this.TreeDataPool.activeVideoIndex = index;
|
this.TreeDataPool.activeForceChoose = true;
|
},
|
getActiveIndex() {
|
this.TreeDataPool.videoArr.length = this.allVideoNum;
|
let nullVideoIndex = "";
|
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
|
// eslint-disable-next-line
|
if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
|
nullVideoIndex = i;
|
break;
|
}
|
}
|
if (nullVideoIndex === "") {
|
this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1;
|
} else {
|
this.TreeDataPool.activeVideoIndex = nullVideoIndex;
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.monitoring-right {
|
width: 100%;
|
height: 100%;
|
// min-width: 981px;
|
//float: right;
|
box-sizing: border-box;
|
padding: 10px;
|
background-color: #e9ebf2;
|
.main-top {
|
margin-bottom: 14px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.monitoring-video {
|
width: 100%;
|
// min-width: 740px;
|
// max-width: 1208px;
|
// height: 98%;
|
//float: left;
|
box-sizing: border-box;
|
// box-shadow: #e4e7ed 0px 0px 9px inset;
|
border-radius: 5px;
|
.activeItem {
|
border: 3px solid #ff7733;
|
position: relative;
|
top: -1px;
|
left: -1px;
|
// width: calc(100% + 2px) !important;
|
// height: calc(100% + 2px) !important;
|
}
|
.onlyActiveItem {
|
width: calc(100% + 2px) !important;
|
height: calc(100% + 2px) !important;
|
}
|
.video-main-box {
|
background-color: #fff;
|
box-sizing: border-box;
|
border: 1px solid #cacaca;
|
}
|
.video-main-box-side {
|
border-top: 1px solid #cacaca;
|
border-left: 1px solid #cacaca;
|
box-sizing: border-box;
|
background-color: #fff;
|
}
|
.monitoring-video-guid {
|
text-align: right;
|
padding-bottom: 10px;
|
.activegongge {
|
color: #3d68e1;
|
}
|
span {
|
font-size: 20px;
|
color: #cacaca;
|
padding-left: 12px;
|
cursor: pointer;
|
}
|
.area-trigger {
|
font-size: 16px;
|
}
|
}
|
.fixedRatioBox {
|
padding-top: 55.3%;
|
box-sizing: border-box;
|
position: relative;
|
> div {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
}
|
}
|
}
|
}
|
</style>
|
