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