all

heyujie

2021-09-14 509171ab4b3b4f2115512bdfb09a583024fb5c53

 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") {