From 2118790fa7ceaa78243ac1e1a29932768142b387 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 25 八月 2021 15:40:46 +0800
Subject: [PATCH] changchun
---
src/pages/changchunTrack/index/Video.vue | 195 ++++++++++++++++++++++++++----------------------
1 files changed, 104 insertions(+), 91 deletions(-)
diff --git a/src/pages/changchunTrack/index/Video.vue b/src/pages/changchunTrack/index/Video.vue
index dce2082..4d1a00c 100644
--- a/src/pages/changchunTrack/index/Video.vue
+++ b/src/pages/changchunTrack/index/Video.vue
@@ -50,12 +50,7 @@
:videoIndex="index"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -80,12 +75,7 @@
:videoIndex="index"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -104,12 +94,7 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -123,12 +108,7 @@
:starH="`calc(50% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -150,12 +130,7 @@
:starH="`calc(50% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -169,12 +144,7 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -185,6 +155,12 @@
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"
@@ -194,12 +170,7 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -213,12 +184,7 @@
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -240,12 +206,7 @@
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -259,12 +220,7 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
+
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -305,8 +261,8 @@
nextVideo: null,
list2TakeTurn: [],
timer: null,
+ reqTimer: null,
centerIndex: 0,
-
};
},
created() {
@@ -316,7 +272,7 @@
this.getActiveIndex();
this.TreeDataPool.readonly = true;
this.TreeDataPool.gbReadonly = true;
- this.TreeDataPool.multiple = false;
+ this.TreeDataPool.multiple = true;
},
mounted() {
document.addEventListener("visibilitychange", this.visibilitychange, false);
@@ -328,22 +284,29 @@
this.getCenter();
this.blackAngWhite();
this.VideoPhotoData.queryTagList();
- showAllCameras().then((res) => {
- this.videoNum2Play = res.data.length;
- res.data.forEach((info, i) => {
- let camera = this.TreeDataPool.getCameraInfoById(info.cameraId);
- this.TreeDataPool.setVideoArr(i, camera, this);
- if (info.status == 1) {
- this.list2TakeTurn.push(info);
+ // let
+ // this.TreeDataPool.getAllChildrenNodes()
+ showAllCameras()
+ .then((res) => {
+ this.videoNum2Play = res.data.length;
+ res.data.forEach((info, i) => {
+ let camera = this.TreeDataPool.getCameraInfoById(info.cameraId);
+ 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();
});
- if (this.list2TakeTurn.length == 0 && res.data.length) {
-
- this.list2TakeTurn.push(res.data[0]);
- }
- this.handleSwitch();
- this.list2TakeTurn.forEach((item) => {});
- });
},
beforeDestroy() {
window.removeEventListener("resize", this.getRightWidth);
@@ -355,11 +318,8 @@
},
watch: {
"TreeDataPool.videoArr": function (newArry) {
- console.log("newArry", newArry);
const cameras = this.filterNodes(newArry);
this.getActiveIndex();
- // this.$refs.taskview.showTasks(cameras);
- // this.$refs.photoview.showCapture(cameras);
},
"VideoPhotoData.selectBlacks": function (value) {
this.blackAngWhite();
@@ -370,30 +330,83 @@
"TreeDataPool.showTreeBox"(value) {
this.getRightWidth();
},
+ "TreeDataPool.selectedNodes.length"(value) {
+ // debugger;
+ this.list2TakeTurn = [];
+ this.videoNum2Play = this.TreeDataPool.selectedNodes.length;
+ 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);
+ }
+ });
+ },
},
methods: {
- handleSwitch() {
+ isSame(arr1, arr2) {
+ // debugger
+ let _arr1 = [];
+ arr1.forEach((item) => {
+ _arr1.push(item.cameraId);
+ });
+ for (const id of _arr1) {
+ if (!arr2.includes(id)) {
+ return false;
+ }
+ }
+ if (_arr1.length !== arr2.length) {
+ return false;
+ }
+ return true;
+ },
+ centerPlay() {
+ // debugger
if (this.list2TakeTurn.length == 1) {
this.centerVideo = this.list2TakeTurn[0];
return;
}
-
let that = this;
that.centerVideo = that.list2TakeTurn[that.centerIndex];
- that.nextVideo=that.list2TakeTurn[that.nextIndex]
that.centerIndex++;
if (that.centerIndex == that.list2TakeTurn.length) {
that.centerIndex = 0;
-
}
this.timer = setInterval(() => {
that.centerVideo = that.list2TakeTurn[that.centerIndex];
- that.nextVideo=that.list2TakeTurn[that.nextIndex]
that.centerIndex++;
if (that.centerIndex == that.list2TakeTurn.length) {
that.centerIndex = 0;
}
- }, 12000);
+ }, 120 * 1000);
+ },
+ repeatRequest() {
+ this.reqTimer = setInterval(() => {
+ showAllCameras().then((res) => {
+ // debugger
+ let newArr = [];
+ let newArr1 = [];
+ res.data.forEach((info, i) => {
+ if (info.status >= 1) {
+ newArr.push(info.cameraId);
+ newArr1.push(info);
+ }
+ });
+ if (newArr.length == 0 && res.data.length) {
+ newArr.push(res.data[0].cameraId);
+ newArr1.push(res.data[0]);
+ }
+ // debugger
+ if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
+ // debugger
+ this.list2TakeTurn = [...newArr1];
+ this.centerIndex = 0;
+ this.centerPlay();
+ }
+ // debugger
+ });
+ }, 3000);
},
initTrackWebsocket() {
if (typeof WebSocket === "undefined") {
@@ -715,12 +728,12 @@
return 16;
}
},
- nextIndex(){
- if (this.centerIndex==this.list2TakeTurn.length-1) {
- return 0
- }
- return this.centerIndex+1
- }
+ nextIndex() {
+ if (this.centerIndex == this.list2TakeTurn.length - 1) {
+ return 0;
+ }
+ return this.centerIndex + 1;
+ },
},
};
</script>
--
Gitblit v1.8.0