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