弹层层级bug修复v2

ZZJ

2021-09-26 d7e24c64a3961040fdc7fec835c2efa5d2f106c0

 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>