From ae2d855c89ca722ac7309fdf1aa6ceed370e3b95 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 十月 2021 20:22:30 +0800
Subject: [PATCH] 监控ui
---
src/pages/changchunTrack/index/Video.vue | 100 +++++++++++++++++++++++++++++--------------------
1 files changed, 59 insertions(+), 41 deletions(-)
diff --git a/src/pages/changchunTrack/index/Video.vue b/src/pages/changchunTrack/index/Video.vue
index 4d1a00c..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,7 +50,6 @@
:videoIndex="index"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -75,7 +74,6 @@
:videoIndex="index"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -94,7 +92,6 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -108,7 +105,6 @@
:starH="`calc(50% - 4px)`"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -118,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)"
@@ -130,7 +137,6 @@
:starH="`calc(50% - 4px)`"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -144,7 +150,6 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -155,7 +160,7 @@
v-if="visibilityState && allVideoNum == 16"
>
<div style="width: 100%; height: 20%">
- <!-- :class="[
+ <!-- :class="[
TreeDataPool.activeVideoIndex === index + 1
? 'activeItem'
: '',
@@ -170,7 +175,6 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -184,7 +188,6 @@
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -206,7 +209,6 @@
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -220,7 +222,6 @@
:starH="`calc(100% - 4px)`"
:videoItem="item"
:showArea="showArea"
-
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -258,11 +259,12 @@
showArea: false,
videoNum2Play: 0,
centerVideo: null,
- nextVideo: null,
+ BackupVideo: null,
list2TakeTurn: [],
timer: null,
reqTimer: null,
centerIndex: 0,
+ showBackup: false,
};
},
created() {
@@ -290,14 +292,13 @@
.then((res) => {
this.videoNum2Play = res.data.length;
res.data.forEach((info, i) => {
- let camera = this.TreeDataPool.getCameraInfoById(info.cameraId);
+ let camera = this.TreeDataPool.getCameraInfoById(info.id);
this.TreeDataPool.setVideoArr(i, camera, this);
if (info.status >= 1) {
-
this.list2TakeTurn.push(info);
}
});
- debugger
+ // debugger
if (this.list2TakeTurn.length == 0 && res.data.length) {
this.list2TakeTurn.push(res.data[0]);
}
@@ -331,7 +332,6 @@
this.getRightWidth();
},
"TreeDataPool.selectedNodes.length"(value) {
- // debugger;
this.list2TakeTurn = [];
this.videoNum2Play = this.TreeDataPool.selectedNodes.length;
this.TreeDataPool.selectedNodes.forEach((id, i) => {
@@ -346,10 +346,9 @@
},
methods: {
isSame(arr1, arr2) {
- // debugger
let _arr1 = [];
arr1.forEach((item) => {
- _arr1.push(item.cameraId);
+ _arr1.push(item.id);
});
for (const id of _arr1) {
if (!arr2.includes(id)) {
@@ -361,52 +360,63 @@
}
return true;
},
- centerPlay() {
- // debugger
+ 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.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.centerIndex++;
if (that.centerIndex == that.list2TakeTurn.length) {
that.centerIndex = 0;
}
- }, 120 * 1000);
+ }, 25 * 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);
+ newArr.push(info.id);
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 && res.data.length) {
+ // newArr.push(res.data[0].id);
+ // newArr1.push(res.data[0]);
+ // }
if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
- // debugger
this.list2TakeTurn = [...newArr1];
this.centerIndex = 0;
- this.centerPlay();
+ this.centerPlay('change');
}
- // debugger
});
- }, 3000);
+ }, 2500);
},
initTrackWebsocket() {
if (typeof WebSocket === "undefined") {
@@ -717,16 +727,24 @@
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) {
--
Gitblit v1.8.0