From 509171ab4b3b4f2115512bdfb09a583024fb5c53 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期二, 14 九月 2021 18:39:20 +0800 Subject: [PATCH] all --- src/pages/changchunTrack/index/Video.vue | 86 ++++++++++++++++++++++++------------------- 1 files changed, 48 insertions(+), 38 deletions(-) diff --git a/src/pages/changchunTrack/index/Video.vue b/src/pages/changchunTrack/index/Video.vue index 4d1a00c..71bb72e 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") { -- Gitblit v1.8.0