From 777c397914941f88f10b5e34826e0f558360cbd2 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 09 九月 2020 09:50:06 +0800
Subject: [PATCH] 实时监控添加显示隐藏区域切换trigger

---
 src/pages/cameraVideo/index/Video.vue          |   15 ++++++++++++---
 src/components/player/index.vue                |    6 +++++-
 src/pages/cameraVideo/components/VideoItem.vue |    4 +++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/player/index.vue b/src/components/player/index.vue
index 6d1c004..e73f92b 100644
--- a/src/components/player/index.vue
+++ b/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
     }
   },
  
diff --git a/src/pages/cameraVideo/components/VideoItem.vue b/src/pages/cameraVideo/components/VideoItem.vue
index 416188f..58211b9 100644
--- a/src/pages/cameraVideo/components/VideoItem.vue
+++ b/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 {
diff --git a/src/pages/cameraVideo/index/Video.vue b/src/pages/cameraVideo/index/Video.vue
index e4ebff0..1fdd5e6 100644
--- a/src/pages/cameraVideo/index/Video.vue
+++ b/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%;

--
Gitblit v1.8.0