From a18079f00f24ae1f0cb405a6eb8e4c8c642cd0df Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 28 九月 2021 15:38:46 +0800
Subject: [PATCH] 视频下载
---
src/pages/changchunTrack/index/Video.vue | 233 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 132 insertions(+), 101 deletions(-)
diff --git a/src/pages/changchunTrack/index/Video.vue b/src/pages/changchunTrack/index/Video.vue
index dce2082..11bba5b 100644
--- a/src/pages/changchunTrack/index/Video.vue
+++ b/src/pages/changchunTrack/index/Video.vue
@@ -21,28 +21,28 @@
</el-tooltip>
</div> -->
<div class="fixedRatioBox">
- <!-- :class="guid==1?'video-main-box':'video-main-box-side'" -->
<div
class="video-main-box-side"
v-if="visibilityState && allVideoNum == 5"
>
- <!-- :videoIndex="index" -->
<VideoItem
:videoGuid="guid"
:starW="`calc(66.66% - 4px)`"
:starH="`calc(66.66% - 4px)`"
:videoItem="centerVideo"
:showArea="showArea"
+ v-show="!showBackup"
class="activeItem"
></VideoItem>
- <!-- <VideoItem
+ <VideoItem
:videoGuid="guid"
:starW="`calc(66.66% - 4px)`"
:starH="`calc(66.66% - 4px)`"
- :videoItem="nextVideo"
+ :videoItem="BackupVideo"
:showArea="showArea"
+ v-show="showBackup"
class="activeItem"
- ></VideoItem> -->
+ ></VideoItem>
<VideoItem
v-for="(item, index) in TreeDataPool.videoArr"
:key="index"
@@ -50,12 +50,6 @@
:videoIndex="index"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -80,12 +74,6 @@
:videoIndex="index"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -104,12 +92,6 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -123,12 +105,6 @@
:starH="`calc(50% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -138,8 +114,19 @@
:starH="`calc(50% - 4px)`"
:videoItem="centerVideo"
:showArea="showArea"
- class="activeItem"
+ :hasPoster="false"
></VideoItem>
+ <!-- <VideoItem
+ :videoGuid="guid"
+ :starW="`calc(50% - 4px)`"
+ :starH="`calc(50% - 4px)`"
+ :videoItem="centerVideo"
+ :showArea="showArea"
+ class="activeItem"
+ v-if="!showSub"
+
+ ></VideoItem> -->
+
<div style="width: 25%; height: 50%; float: left">
<VideoItem
v-for="(item, index) in TreeDataPool.videoArr.slice(6, 8)"
@@ -150,12 +137,6 @@
:starH="`calc(50% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -169,12 +150,6 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -185,6 +160,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 +175,6 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -213,12 +188,6 @@
: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 +209,6 @@
: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 +222,6 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
- :class="[
- TreeDataPool.activeVideoIndex === index + 1
- ? 'activeItem'
- : '',
- guid === 1 ? 'onlyActiveItem' : '',
- ]"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -302,11 +259,12 @@
showArea: false,
videoNum2Play: 0,
centerVideo: null,
- nextVideo: null,
+ BackupVideo: null,
list2TakeTurn: [],
timer: null,
+ reqTimer: null,
centerIndex: 0,
-
+ showBackup: false,
};
},
created() {
@@ -316,7 +274,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 +286,28 @@
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.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();
});
- 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 +319,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 +331,92 @@
"TreeDataPool.showTreeBox"(value) {
this.getRightWidth();
},
+ "TreeDataPool.selectedNodes.length"(value) {
+ 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) {
+ 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(typ) {
if (this.list2TakeTurn.length == 1) {
this.centerVideo = this.list2TakeTurn[0];
return;
}
-
let that = this;
+ // if () {
+
+ // }
+ if (typ == 'change') {
+ this.showBackup = true;
+ }
that.centerVideo = that.list2TakeTurn[that.centerIndex];
- that.nextVideo=that.list2TakeTurn[that.nextIndex]
that.centerIndex++;
if (that.centerIndex == that.list2TakeTurn.length) {
that.centerIndex = 0;
-
}
+ if (typ == 'change') {
+ setTimeout(() => {
+ this.showBackup = false;
+ that.BackupVideo = that.centerVideo;
+ }, 2000);
+ }else{
+ that.BackupVideo = that.centerVideo;
+ }
+
+ clearInterval(this.timer);
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);
+ }, 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);
},
initTrackWebsocket() {
if (typeof WebSocket === "undefined") {
@@ -704,23 +727,31 @@
if (this.videoNum2Play <= 5) {
this.guid = 3;
return 5;
- } else if (this.videoNum2Play <= 7) {
+ }
+
+ if (this.videoNum2Play <= 7) {
this.guid = 4;
return 7;
- } else if (this.videoNum2Play <= 12) {
+ }
+
+ if (this.videoNum2Play <= 12) {
this.guid = 4;
return 12;
- } else if (this.videoNum2Play <= 16) {
+ }
+
+ if (this.videoNum2Play <= 16) {
this.guid = 5;
return 16;
}
+ this.guid = 5;
+ 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