问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/pages/cameraVideo/index/Video.vue

@@ -16,7 +16,15 @@
              :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
              @click="setGuid(3)"
            ></span>
            <el-tooltip
            <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>
            <!-- <span
              v-if="TreeDataPool.selectedNode.id"
              class="area-trigger"
              @click="toggleShowArea"
            >{{showArea?'隐藏区域':'查看区域'}}</span> -->
            <!-- <el-tooltip
              v-show="true"
              :content="`${track ? '关闭追踪': '开启追踪'}`"
              placement="bottom"
@@ -26,7 +34,7 @@
                :class="track ? 'iconfont iconintruder-alarm activegongge':'iconfont iconintruder-alarm'"
                @click="handleTrack"
              ></span>
            </el-tooltip>
            </el-tooltip>-->
          </div>
          <div class="fixedRatioBox">
            <div
@@ -39,6 +47,7 @@
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                :class="[
                  TreeDataPool.activeVideoIndex === index ? 'activeItem' : '',
                  guid === 1 ? 'onlyActiveItem' : ''
@@ -56,68 +65,7 @@
        <video-photo ref="photoview" @addToBase="toAdd"></video-photo>
      </div>
    </div>
    <hsc-window-style-metal class="windown-model">
      <hsc-window
        v-for="(item, index) in CardList.addBaseList"
        :closeButton="true"
        @closebuttonclick="closeWindow(index)"
        :key="index"
        @update:height="resizeHeight"
        @update:width="resizeWidth"
        style="background:white; height:475px"
        :left="center.x + index * 10"
        :top="center.y + index * 10"
        :resizable="true"
        positionHint="center"
        :isScrollable="true"
        :minWidth="662"
        :minHeight="479"
        :maxWidth="10000"
        :maxHeight="7000"
        :height="defaultHeight"
        :width="defaultWidth"
      >
        <div class="addToBase">
          <div class="topLabel">加入底库</div>
          <div class="items">
            <div class="lable">
              <p>黑名单 ></p>
            </div>
            <div class="baseList">
              <el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite">
                <div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index">
                  <el-checkbox
                    :label="item.value"
                    :title="item.title"
                    :disabled="item.disabled"
                  >{{item.title}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="items">
            <div class="lable">
              <p>白名单 ></p>
            </div>
            <div class="baseList">
              <el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite">
                <div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index">
                  <el-checkbox
                    :label="item.value"
                    :title="item.title"
                    :disabled="item.disabled"
                  >{{item.title}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="buttons">
            <el-button type="primary" @click="saveAddBase(item, index)">保存</el-button>
            <el-button type="default" @click="closeWindow(index)">取消</el-button>
          </div>
        </div>
      </hsc-window>
    </hsc-window-style-metal>
    
  </div>
</template>

@@ -134,7 +82,7 @@
    VideoTask,
    VideoPhoto
  },
  data() {
  data () {
    return {
      guid: 1,
      center: "",
@@ -145,10 +93,11 @@
      traceTimer: null,
      tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/track`,
      websocket: null,
      visibilityState: true
      visibilityState: true,
      showArea: false,
    };
  },
  created() {
  created () {
    console.log("befor created")
    // this.TreeDataPool.clean();
    // this.TreeDataPool.fetchTreeData();
@@ -163,7 +112,7 @@

    console.log("created")
  },
  mounted() {
  mounted () {
    document.addEventListener("visibilitychange", this.visibilitychange, false);
    this.$nextTick(() => {
      window.addEventListener("resize", this.resizeMonitorTask);
@@ -180,7 +129,7 @@
    // console.log(list, '已完成的本地视频', this.TreeDataPool.localVedioList)
    this.TreeDataPool.localVedioList = list;
  },
  beforeDestroy() {
  beforeDestroy () {
    window.removeEventListener("resize", this.getRightWidth);
    this.CardList.details = [];
    window.clearInterval(this.trackTimer);
@@ -190,7 +139,7 @@
  },
  watch: {
    "TreeDataPool.videoArr": function (newArry) {
      console.log('newArry',newArry)
      console.log('newArry', newArry)
      const cameras = this.filterNodes(newArry);
      this.getActiveIndex();
      this.$refs.taskview.showTasks(cameras);
@@ -202,12 +151,12 @@
    "VideoPhotoData.selectWhites": function (value) {
      this.blackAngWhite();
    },
    "TreeDataPool.showTreeBox"(value) {
    "TreeDataPool.showTreeBox" (value) {
      this.getRightWidth();
    }
  },
  methods: {
    handleTrack() {
    handleTrack () {
      this.track = !this.track;
      if (!this.track) {
        window.clearInterval(this.trackTimer);
@@ -234,7 +183,7 @@
        }, 1 * 1000);
      }
    },
    videoItemMonitor() {
    videoItemMonitor () {
      this.websocket.send("ping");

      let cache = this.traceCache
@@ -257,7 +206,7 @@
        }
      }
    },
    initTrackWebsocket() {
    initTrackWebsocket () {
      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
@@ -268,10 +217,10 @@
        this.websocket.onmessage = this.recvieTrackMessage
      }
    },
    websocketonopen() { //连接建立之后执行send方法发送数据
    websocketonopen () { //连接建立之后执行send方法发送数据
      this.websocket.send("sub")
    },
    tracking() {
    tracking () {
      getCameraPlayList().then(data => {
        if (data && data.length) {
          data.forEach(ins => {
@@ -290,7 +239,7 @@
        }
      })
    },
    recvieTrackMessage(e) {
    recvieTrackMessage (e) {
      let dataJson = JSON.parse(e.data)
      let cache = this.traceCache
      let camera = dataJson.camera
@@ -330,7 +279,7 @@
      // 未发现播放记录
      this.newPlayerInViewBox(camera)
    },
    newPlayerInViewBox(id) {
    newPlayerInViewBox (id) {
      // 新增播放窗口
      let camera = this.TreeDataPool.getCameraInfoById(id)
      let emptyIndex = -1;
@@ -354,7 +303,7 @@
        this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
      }
    },
    replacePlayer(id, oldCameraId) {
    replacePlayer (id, oldCameraId) {
      let camera = this.TreeDataPool.getCameraInfoById(id)
      // console.log("update:", camera.name)
      // 替换播放器
@@ -373,7 +322,7 @@

      return false
    },
    closePlayer(id) {
    closePlayer (id) {
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
@@ -387,7 +336,7 @@
        }
      }
    },
    visibilitychange() {
    visibilitychange () {
      switch (document.visibilityState) {
        case "hidden":
          this.visibilityState = false;
@@ -397,7 +346,7 @@
          break;
      }
    },
    blackAngWhite() {
    blackAngWhite () {
      if (this.VideoPhotoData.selectBlacks.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          //this.VideoPhotoData.whiteList[i].disabled = true
@@ -423,24 +372,24 @@
        }
      }
    },
    closeWindow(index) {
    closeWindow (index) {
      this.CardList.addBaseList.splice(index, 1);
    },
    getVideoHeight(){
    getVideoHeight () {
      let h = this.$refs.monitorVideo.offsetHeight;
      this.$refs.monitorTask.style.height = h+'px';
      this.$refs.monitorTask.style.height = h + 'px';
    },
    resizeMonitorTask(){
    resizeMonitorTask () {
      this.getRightWidth();
      this.getVideoHeight();
    },
    getRightWidth() {
    getRightWidth () {
      let w = this.$refs.videoRight.offsetWidth;
      // console.log("w是：", w,this.$refs.monitorVideo.offsetWidth);
      this.$refs.monitorTask.style.width = (w - this.$refs.monitorVideo.offsetWidth - 40) + 'px'
      // console.log("右侧任务的宽度：", this.$refs.monitorTask.style.width)
    },
    filterNodes(selectArry) {
    filterNodes (selectArry) {
      let nodes = [];
      selectArry.forEach(i => {
        if (i && nodes.indexOf(i.id) < 0) {
@@ -449,26 +398,26 @@
      });
      return nodes;
    },
    videoItemClick(index) {
    videoItemClick (index) {
      this.TreeDataPool.activeVideoIndex = index;
      this.TreeDataPool.activeForceChoose = true;
    },
    toAdd(item) {
    toAdd (item) {
      this.CardList.addBaseList.push(item)
    },
    getCenter() {
    getCenter () {
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200
      };
    },
    resizeWidth(w) {
    resizeWidth (w) {
      this.defaultWidth = w;
    },
    resizeHeight(h) {
    resizeHeight (h) {
      this.defaultHeight = h;
    },
    saveAddBase(item, index) {
    saveAddBase (item, index) {
      if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
        this.$notify({
          title: "注意",
@@ -498,7 +447,7 @@
        this.VideoPhotoData.selectWhites = []
      })
    },
    getActiveIndex() {
    getActiveIndex () {
      this.TreeDataPool.videoArr.length = Math.pow(this.guid, 2);
      let nullVideoIndex = "";
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
@@ -527,7 +476,7 @@
        }
      }
    },
    setGuid(value) {
    setGuid (value) {
      clearTimeout(this.trackTimer);

      if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
@@ -550,9 +499,12 @@
      sessionStorage.guid = this.guid;
      sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
      this.getActiveIndex();
    },
    toggleShowArea () {
      this.showArea = !this.showArea;
    }
  },
  destroyed() {
  destroyed () {
    window.removeEventListener("resize", this.getRightWidth);
    this.CardList.details = [];
    this.CardList.addBaseList = [];
@@ -572,7 +524,7 @@
  box-sizing: border-box;
  padding: 10px;
  background-color: #e9ebf2;
  .main-top{
  .main-top {
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
@@ -621,12 +573,15 @@
        padding-left: 12px;
        cursor: pointer;
      }
      .area-trigger {
        font-size: 16px;
      }
    }
    .fixedRatioBox{
    .fixedRatioBox {
      padding-top: 56.3%;
      box-sizing: border-box;
      position: relative;
      >div{
      > div {
        width: 100%;
        height: 100%;
        position: absolute;
@@ -660,81 +615,80 @@
    // box-shadow: #e4e7ed 0px 0px 9px inset;
    border-radius: 5px;
  }

}
.titlebar{
  height: 10px!important;
  background: #fff!important;
  .button{
.titlebar {
  height: 10px !important;
  background: #fff !important;
  .button {
    position: absolute;
    font-size: 25px!important;
    font-size: 25px !important;
    right: 10px;
    top: 10px;
    z-index: 3;
  }
}
.addToBase {
    width: 98%;
    height: 430px;
    position: relative;
    .topLabel {
      margin-top: 20px;
      height: 40px;
      border-bottom: 1px solid #eee;
      font-family: PingFangSC-Medium;
      font-size: 20px;
  width: 98%;
  height: 430px;
  position: relative;
  .topLabel {
    margin-top: 20px;
    height: 40px;
    border-bottom: 1px solid #eee;
    font-family: PingFangSC-Medium;
    font-size: 20px;
    font-weight: 600;
    line-height: 1rem;
    color: #222222;
    text-align: left;
    margin-left: 15px;
  }
  .items {
    width: 100%;
    height: auto;
    max-height: 35%;
    overflow-y: auto;
    margin: 20px 0px;
    .lable {
      width: 15%;
      margin-top: 10px;
      float: left;
      //font-family: PingFangSC-Medium;
      font-size: 14px;
      font-weight: 600;
      line-height: 1rem;
      color: #222222;
      text-align: left;
      margin-left: 15px;
    }
    .items {
      width: 100%;
      height: auto;
      max-height: 35%;
      overflow-y: auto;
      margin: 20px 0px;
      .lable {
        width: 15%;
        margin-top: 10px;
        float: left;
        //font-family: PingFangSC-Medium;
        font-size: 14px;
        font-weight: 600;
      }
      .baseList {
        width: 85%;
        height: 100%;
        float: left;
    .baseList {
      width: 85%;
      height: 100%;
      float: left;

        // display: flex;
        // justify-content: flex-start;
        .base {
          //flex-wrap: wrap;
          width: calc(33% - 10px);
          padding: 0px 5px;
          line-height: 30px;
          float: left;
          text-align: left;
          font-size: 12px !important;
          .el-checkbox {
            width: 100%;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .el-checkbox__label {
              display: inline !important;
            }
      // display: flex;
      // justify-content: flex-start;
      .base {
        //flex-wrap: wrap;
        width: calc(33% - 10px);
        padding: 0px 5px;
        line-height: 30px;
        float: left;
        text-align: left;
        font-size: 12px !important;
        .el-checkbox {
          width: 100%;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .el-checkbox__label {
            display: inline !important;
          }
        }
      }
    }
    .buttons {
      position: absolute;
      right: 0px;
      bottom: 15px;
    }
  }
  .buttons {
    position: absolute;
    right: 0px;
    bottom: 15px;
  }
}
</style>