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