实时监控添加显示隐藏区域切换trigger

hanbaoshan

2020-09-09 777c397914941f88f10b5e34826e0f558360cbd2

 src/pages/cameraVideo/index/Video.vue

@@ -16,7 +16,8 @@
              :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
              @click="setGuid(3)"
            ></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 +27,7 @@
                :class="track ? 'iconfont iconintruder-alarm activegongge':'iconfont iconintruder-alarm'"
                @click="handleTrack"
              ></span>
            </el-tooltip>
            </el-tooltip> -->
          </div>
          <div class="fixedRatioBox">
            <div
@@ -39,6 +40,7 @@
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                :class="[
                  TreeDataPool.activeVideoIndex === index ? 'activeItem' : '',
                  guid === 1 ? 'onlyActiveItem' : ''
@@ -145,7 +147,8 @@
      traceTimer: null,
      tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/track`,
      websocket: null,
      visibilityState: true
      visibilityState: true,
      showArea: true,
    };
  },
  created() {
@@ -550,6 +553,9 @@
      sessionStorage.guid = this.guid;
      sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
      this.getActiveIndex();
    },
    toggleShowArea(){
      this.showArea = !this.showArea;
    }
  },
  destroyed() {
@@ -621,6 +627,9 @@
        padding-left: 12px;
        cursor: pointer;
      }
      .area-trigger{
        font-size: 16px;
      }
    }
    .fixedRatioBox{
      padding-top: 56.3%;