解决冲突

ZZJ

2021-10-13 4d010f1940db29c1effc0f9bd6a975436c1183d9

 src/pages/changchunTrack/index/Video.vue

@@ -3,44 +3,13 @@
    <div class="monitoring-right" ref="videoRight">
      <div class="main-top">
        <div class="monitoring-video" ref="monitorVideo">
          <!-- <div class="monitoring-video-guid">
            <span
              :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
              @click="setGuid(1)"
            ></span>
            <span
              :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
              @click="setGuid(2)"
            ></span>
            <span
              :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
              @click="setGuid(3)"
            ></span>
            <el-tooltip v-if="TreeDataPool.selectedNode.id" :content="`${showArea?'隐藏区域':'查看区域'}`" placement="bottom" popper-class="atooltip">
              <span :class="showArea?'activegongge':''" class="iconfont iconquyu" @click="toggleShowArea"></span>
            </el-tooltip>
          </div> -->
          <div class="fixedRatioBox">
            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 5"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 5">
              <VideoItem
                :videoGuid="guid"
                :starW="`calc(66.66% - 4px)`"
                :starH="`calc(66.66% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                v-show="!showBackup"
                class="activeItem"
              ></VideoItem>
              <VideoItem
                :videoGuid="guid"
                :starW="`calc(66.66% - 4px)`"
                :starH="`calc(66.66% - 4px)`"
                :videoItem="BackupVideo"
                :showArea="showArea"
                v-show="showBackup"
                quietSwitch
                class="activeItem"
              ></VideoItem>
              <VideoItem
@@ -49,21 +18,17 @@
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                @click="videoItemClick(index)"
              ></VideoItem>
            </div>

            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 7"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 7">
              <VideoItem
                :videoGuid="guid"
                :starW="`calc(74.99% - 4px)`"
                :starH="`calc(74.99% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                quietSwitch
                class="activeItem"
              ></VideoItem>

@@ -73,15 +38,11 @@
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                @click="videoItemClick(index)"
              ></VideoItem>
            </div>

            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 12"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 12">
              <div style="width: 100%; height: 25%">
                <VideoItem
                  v-for="(item, index) in TreeDataPool.videoArr.slice(0, 4)"
@@ -91,7 +52,6 @@
                  :starW="`calc(24.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -104,7 +64,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(50% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -113,19 +72,8 @@
                :starW="`calc(50% - 4px)`"
                :starH="`calc(50% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                :hasPoster="false"
                quietSwitch
              ></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
@@ -136,7 +84,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(50% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -149,16 +96,12 @@
                  :starW="`calc(24.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
            </div>

            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 16"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 16">
              <div style="width: 100%; height: 20%">
                <!-- :class="[
                    TreeDataPool.activeVideoIndex === index + 1
@@ -174,7 +117,6 @@
                  :starW="`calc(19.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -187,7 +129,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(33.33% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -196,7 +137,7 @@
                :starW="`calc(60% - 4px)`"
                :starH="`calc(60% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                quietSwitch
                class="activeItem"
              ></VideoItem>
              <div style="width: 20%; height: 60%; float: left">
@@ -208,7 +149,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(33.33% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -221,7 +161,6 @@
                  :starW="`calc(19.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -235,42 +174,34 @@

<script>
import VideoItem from "../components/VideoItem";
import { getCameraPlayList, showAllCameras } from "@/api/trackCamera";
import { showAllCameras } from "@/api/trackCamera";

export default {
  name: "Video",
  components: {
    VideoItem,
    VideoItem
  },
  computed: {
    nextIndex() {
      if (this.centerIndex == this.list2TakeTurn.length - 1) {
        return 0;
      }
      return this.centerIndex + 1;
    }
  },
  data() {
    return {
      guid: 3,
      center: "",
      defaultHeight: 432,
      defaultWidth: 600,
      track: false,
      traceCache: {},
      traceTimer: null,
      tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${
        location.host
      }/track`,
      websocket: null,
      visibilityState: true,
      showArea: false,
      videoNum2Play: 0,
      allVideoNum: 5,
      centerVideo: null,
      BackupVideo: null,
      list2TakeTurn: [],
      timer: null,
      reqTimer: null,
      centerIndex: 0,
      showBackup: false,
      centerIndex: 0
    };
  },
  created() {
    this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
      ? Number(sessionStorage.activeIndex)
      : this.TreeDataPool.activeVideoIndex;
    this.getActiveIndex();
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
@@ -278,19 +209,9 @@
  },
  mounted() {
    document.addEventListener("visibilitychange", this.visibilitychange, false);
    this.$nextTick(() => {
      window.addEventListener("resize", this.resizeMonitorTask);
      //this.getRightWidth();
      this.resizeMonitorTask();
    });
    this.getCenter();
    this.blackAngWhite();
    this.VideoPhotoData.queryTagList();
    // let
    // this.TreeDataPool.getAllChildrenNodes()
    showAllCameras()
      .then((res) => {
        this.videoNum2Play = res.data.length;
        this.setAllVideoNum(res.data.length);
        res.data.forEach((info, i) => {
          let camera = this.TreeDataPool.getCameraInfoById(info.id);
          this.TreeDataPool.setVideoArr(i, camera, this);
@@ -311,40 +232,52 @@
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getRightWidth);
    this.CardList.details = [];
    window.clearInterval(this.trackTimer);
    if (this.websocket) {
      this.websocket.close();
    }
  },
  watch: {
    "TreeDataPool.videoArr": function (newArry) {
      const cameras = this.filterNodes(newArry);
    "TreeDataPool.videoArr"(value) {
      this.getActiveIndex();
    },
    "VideoPhotoData.selectBlacks": function (value) {
      this.blackAngWhite();
    },
    "VideoPhotoData.selectWhites": function (value) {
      this.blackAngWhite();
    },
    "TreeDataPool.showTreeBox"(value) {
      this.getRightWidth();
    },
    "TreeDataPool.selectedNodes.length"(value) {
      this.getActiveIndex();
      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);
      this.setAllVideoNum(this.TreeDataPool.selectedNodes.length);
      this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, this.TreeDataPool.selectedNode, this);

        if (camera.status >= 1) {
          this.list2TakeTurn.push(camera);
        }
      });
    },
      // 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);
      //   }
      // });

      this.centerVideo = { ...this.TreeDataPool.selectedNode };
    }
  },
  methods: {
    setAllVideoNum(videoCount) {
      if (videoCount <= 5) {
        this.guid = 3;
        this.allVideoNum = 5;
      } else if (videoCount <= 7) {
        this.guid = 4;
        this.allVideoNum = 7;
      } else if (videoCount <= 12) {
        this.guid = 4;
        this.allVideoNum = 12;
      } else if (videoCount <= 16) {
        this.guid = 5;
        this.allVideoNum = 16;
      } else {
        this.guid = 5;
        this.allVideoNum = 16;
      }
    },
    isSame(arr1, arr2) {
      let _arr1 = [];
      arr1.forEach((item) => {
@@ -360,35 +293,21 @@
      }
      return true;
    },
    centerPlay(typ) {
    centerPlay() {
      if (this.list2TakeTurn.length == 1) {
        this.centerVideo = this.list2TakeTurn[0];
        this.centerVideo = { ...this.list2TakeTurn[0] };
        return;
      }
      let that = this;
      // if () {

      // }
      if (typ == 'change') {
        this.showBackup = true;
      }
      that.centerVideo = that.list2TakeTurn[that.centerIndex];
      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.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
        that.centerIndex++;
        if (that.centerIndex == that.list2TakeTurn.length) {
          that.centerIndex = 0;
@@ -413,143 +332,10 @@
          if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
            this.list2TakeTurn = [...newArr1];
            this.centerIndex = 0;
            this.centerPlay('change');
            this.centerPlay("change");
          }
        });
      }, 2500);
    },
    initTrackWebsocket() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.websocket = new WebSocket(this.tracePubUrl);
        // 监听socket消息
        this.websocket.onopen = this.websocketonopen;
        this.websocket.onmessage = this.recvieTrackMessage;
      }
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      this.websocket.send("sub");
    },
    tracking() {
      getCameraPlayList().then((data) => {
        if (data && data.length) {
          data.forEach((ins) => {
            let newCamera = this.TreeDataPool.getCameraInfoById(
              ins.NewCameraId
            );
            if (!newCamera) {
              console.log("未查找到摄像机：", ins.NewCameraId);
              return;
            }
            if (ins.IsNew) {
              this.newPlayerInViewBox(newCamera);
            } else {
              this.replacePlayer(newCamera, ins.OldCameraId);
            }
          });
        }
      });
    },
    recvieTrackMessage(e) {
      let dataJson = JSON.parse(e.data);
      let cache = this.traceCache;
      let camera = dataJson.camera;
      let person = dataJson.person;
      let create = false;

      // 如果是已经在播放的摄像机, 直接返回
      if (cache[camera]) {
        cache[camera][person] = 10;
        return;
      }

      cache[camera] = {};
      cache[camera][person] = 10;

      // 查询播放该人的上一个摄像机
      for (var cam in cache) {
        if (cam === camera) {
          continue;
        }

        if (cache[cam][person]) {
          // 找到上一个摄像机, 判断摄像机里是否还有其他人, 有:新开播放器 没有:切换
          console.log("last camera:", cam, Object.keys(cache[cam]).length);
          if (Object.keys(cache[cam]).length > 2) {
            delete cache[cam][person];
            this.newPlayerInViewBox(camera);
            return;
          } else {
            this.replacePlayer(camera, cam);
            delete cache[cam];
            return;
          }
        }
      }

      // 未发现播放记录
      this.newPlayerInViewBox(camera);
    },
    newPlayerInViewBox(id) {
      // 新增播放窗口
      let camera = this.TreeDataPool.getCameraInfoById(id);
      let emptyIndex = -1;
      let exist = false;
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] === "" ||
          this.TreeDataPool.videoArr[i] === undefined
        ) {
          if (emptyIndex === -1) {
            emptyIndex = i;
          }
        } else {
          if (this.TreeDataPool.videoArr[i].id === camera.id) {
            exist = true;
          }
        }
      }
      if (!exist && emptyIndex !== -1) {
        this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
      }
    },
    replacePlayer(id, oldCameraId) {
      let camera = this.TreeDataPool.getCameraInfoById(id);
      // 替换播放器
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] &&
          this.TreeDataPool.videoArr[i] !== undefined &&
          this.TreeDataPool.videoArr[i] !== ""
        ) {
          if (this.TreeDataPool.videoArr[i].id === oldCameraId) {
            this.TreeDataPool.setVideoArr(i, camera, this);
            return true;
          }
        }
      }

      return false;
    },
    closePlayer(id) {
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] &&
          this.TreeDataPool.videoArr[i] !== undefined &&
          this.TreeDataPool.videoArr[i] !== ""
        ) {
          if (this.TreeDataPool.videoArr[i].id === id) {
            this.TreeDataPool.setVideoArr(i, undefined, this);
            return true;
          }
        }
      }
    },
    visibilitychange() {
      switch (document.visibilityState) {
@@ -561,198 +347,27 @@
          break;
      }
    },
    blackAngWhite() {
      if (this.VideoPhotoData.selectBlacks.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", true);
        }
      }
      if (this.VideoPhotoData.selectBlacks.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", false);
        }
      }
      if (this.VideoPhotoData.selectWhites.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          this.$set(this.VideoPhotoData.blackList[i], "disabled", true);
        }
      }
      if (this.VideoPhotoData.selectWhites.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          this.$set(this.VideoPhotoData.blackList[i], "disabled", false);
        }
      }
    },
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1);
    },
    getVideoHeight() {
      let h = this.$refs.monitorVideo.offsetHeight;
      // this.$refs.monitorTask.style.height = h + "px";
    },
    resizeMonitorTask() {
      this.getRightWidth();
      this.getVideoHeight();
    },
    getRightWidth() {
      let w = this.$refs.videoRight.offsetWidth;
      // this.$refs.monitorTask.style.width =w - this.$refs.monitorVideo.offsetWidth - 40 + "px";
    },
    filterNodes(selectArry) {
      let nodes = [];
      selectArry.forEach((i) => {
        if (i && nodes.indexOf(i.id) < 0) {
          nodes.push(i.id);
        }
      });
      return nodes;
    },
    videoItemClick(index) {
      this.TreeDataPool.activeVideoIndex = index;
      this.TreeDataPool.activeForceChoose = true;
    },
    toAdd(item) {
      this.CardList.addBaseList.push(item);
    },
    getCenter() {
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200,
      };
    },
    resizeWidth(w) {
      this.defaultWidth = w;
    },
    resizeHeight(h) {
      this.defaultHeight = h;
    },
    saveAddBase(item, index) {
      if (
        this.VideoPhotoData.selectBlacks.length === 0 &&
        this.VideoPhotoData.selectWhites.length === 0
      ) {
        this.$notify({
          title: "注意",
          message: "请选择要添加的底库",
          type: "warning",
        });
        return;
      }
      let res = this.VideoPhotoData.addBase(item);
      res.then((data) => {
        console.log("then", data);
        if (data.success) {
          this.$notify({
            title: "成功",
            message: data.data,
            type: "success",
          });
        } else {
          this.$notify({
            title: "失败",
            message: data.data,
            type: "error",
          });
        }
        this.CardList.addBaseList.splice(index, 1);
        this.VideoPhotoData.selectBlacks = [];
        this.VideoPhotoData.selectWhites = [];
      });
    },
    getActiveIndex() {
      this.TreeDataPool.videoArr.length = this.allVideoNum;
      let nullVideoIndex = "";
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] === "" ||
          this.TreeDataPool.videoArr[i] === undefined
        ) {
        if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
          nullVideoIndex = i;
        } else {
          nullVideoIndex = "";
          break;
        }
      }
      if (
        this.TreeDataPool.activeVideoIndex !== "" &&
        this.TreeDataPool.activeVideoIndex <
          this.TreeDataPool.videoArr.length - 1
      ) {
        return this.TreeDataPool.activeVideoIndex;
      if (nullVideoIndex === "") {
        this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1;
      } else {
        if (nullVideoIndex === "") {
          this.TreeDataPool.activeVideoIndex =
            this.TreeDataPool.videoArr.length - 1;
        } else {
          this.TreeDataPool.activeVideoIndex = nullVideoIndex;
        }
        this.TreeDataPool.activeVideoIndex = nullVideoIndex;
      }
    },
    setGuid(value) {
      clearTimeout(this.trackTimer);
      if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
        // eslint-disable-next-line
        for (
          let i = this.TreeDataPool.activeVideoIndex - 1;
          i < this.TreeDataPool.videoArr.length;
          i++
        ) {
          // eslint-disable-next-line
          if (
            this.TreeDataPool.videoArr[i] &&
            this.TreeDataPool.videoArr[i]["isPlaying"]
          ) {
            this.TreeDataPool.videoArr[i]["isPlaying"] = false;
          }
        }
      }
      this.guid = value;
      sessionStorage.guid = this.guid;
      sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
      this.getActiveIndex();
    },
    toggleShowArea() {
      this.showArea = !this.showArea;
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.getRightWidth);
    // this.CardList.details = [];
    this.CardList.addBaseList = [];
    this.VideoPhotoData.selectBlacks = [];
    this.VideoPhotoData.selectWhites = [];
  },
  computed: {
    allVideoNum() {
      if (this.videoNum2Play <= 5) {
        this.guid = 3;
        return 5;
      }

      if (this.videoNum2Play <= 7) {
        this.guid = 4;
        return 7;
      } 
      
      if (this.videoNum2Play <= 12) {
        this.guid = 4;
        return 12;
      } 
      
      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;
    },
  },
    }
  }
};
</script>