changchun

heyujie

2021-08-25 2118790fa7ceaa78243ac1e1a29932768142b387

 src/pages/changchunTrack/index/Video.vue

@@ -50,12 +50,7 @@
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                :class="[
                  TreeDataPool.activeVideoIndex === index + 1
                    ? 'activeItem'
                    : '',
                  guid === 1 ? 'onlyActiveItem' : '',
                ]"
             
                @click="videoItemClick(index)"
              ></VideoItem>
            </div>
@@ -80,12 +75,7 @@
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                :class="[
                  TreeDataPool.activeVideoIndex === index + 1
                    ? 'activeItem'
                    : '',
                  guid === 1 ? 'onlyActiveItem' : '',
                ]"
            
                @click="videoItemClick(index)"
              ></VideoItem>
            </div>
@@ -104,12 +94,7 @@
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  :class="[
                    TreeDataPool.activeVideoIndex === index + 1
                      ? 'activeItem'
                      : '',
                    guid === 1 ? 'onlyActiveItem' : '',
                  ]"
                 
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -123,12 +108,7 @@
                  :starH="`calc(50% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  :class="[
                    TreeDataPool.activeVideoIndex === index + 1
                      ? 'activeItem'
                      : '',
                    guid === 1 ? 'onlyActiveItem' : '',
                  ]"
                 
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -150,12 +130,7 @@
                  :starH="`calc(50% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  :class="[
                    TreeDataPool.activeVideoIndex === index + 1
                      ? 'activeItem'
                      : '',
                    guid === 1 ? 'onlyActiveItem' : '',
                  ]"
                  
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -169,12 +144,7 @@
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  :class="[
                    TreeDataPool.activeVideoIndex === index + 1
                      ? 'activeItem'
                      : '',
                    guid === 1 ? 'onlyActiveItem' : '',
                  ]"
                 
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -185,6 +155,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 +170,7 @@
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  :class="[
                    TreeDataPool.activeVideoIndex === index + 1
                      ? 'activeItem'
                      : '',
                    guid === 1 ? 'onlyActiveItem' : '',
                  ]"
                 
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -213,12 +184,7 @@
                  :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 +206,7 @@
                  :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 +220,7 @@
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  :class="[
                    TreeDataPool.activeVideoIndex === index + 1
                      ? 'activeItem'
                      : '',
                    guid === 1 ? 'onlyActiveItem' : '',
                  ]"
                
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -305,8 +261,8 @@
      nextVideo: null,
      list2TakeTurn: [],
      timer: null,
      reqTimer: null,
      centerIndex: 0,
     
    };
  },
  created() {
@@ -316,7 +272,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 +284,29 @@
    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.cameraId);
          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 +318,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 +330,83 @@
    "TreeDataPool.showTreeBox"(value) {
      this.getRightWidth();
    },
    "TreeDataPool.selectedNodes.length"(value) {
      // debugger;
      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) {
      // debugger
      let _arr1 = [];
      arr1.forEach((item) => {
        _arr1.push(item.cameraId);
      });
      for (const id of _arr1) {
        if (!arr2.includes(id)) {
          return false;
        }
      }
      if (_arr1.length !== arr2.length) {
        return false;
      }
      return true;
    },
    centerPlay() {
      // debugger
      if (this.list2TakeTurn.length == 1) {
        this.centerVideo = this.list2TakeTurn[0];
        return;
      }
      
      let that = this;
      that.centerVideo = that.list2TakeTurn[that.centerIndex];
      that.nextVideo=that.list2TakeTurn[that.nextIndex]
      that.centerIndex++;
      if (that.centerIndex == that.list2TakeTurn.length) {
        that.centerIndex = 0;
        
      }
      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);
      }, 120 * 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);
              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 && !this.isSame(this.list2TakeTurn, newArr)) {
            // debugger
            this.list2TakeTurn = [...newArr1];
            this.centerIndex = 0;
            this.centerPlay();
          }
          // debugger
        });
      }, 3000);
    },
    initTrackWebsocket() {
      if (typeof WebSocket === "undefined") {
@@ -715,12 +728,12 @@
        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>