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

hanbaoshan

2020-09-09 777c397914941f88f10b5e34826e0f558360cbd2

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

 src/components/player/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="video-player">
    <canvas id="area-canvas" ref="areaCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
    <canvas v-show="showArea" id="area-canvas" ref="areaCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
    <video ref="videoPlayer" :poster="poster" preload="auto" muted></video>
    <div class="controls">
      <!-- 全屏 -->
@@ -41,6 +41,10 @@
    isGb: {
      type: Boolean,
      default: false
    },
    showArea: {
      type: Boolean,
      default: true
    }
  },
 

 src/pages/cameraVideo/components/VideoItem.vue

@@ -34,6 +34,7 @@
        :rtspUrl="videoItem.rtsp"
        :isRunning="videoItem.isRunning"
        :isGb="videoItem.cameraType === 1"
        :showArea="showArea"
        v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='camera'"
      ></camera-player>

@@ -66,7 +67,8 @@
    videoItem: {
      type: [Object, String],
      default: null
    }
    },
    showArea: Boolean,
  },
  data() {
    return {

 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%;