From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复
---
src/pages/cameraVideo/index/Video.vue | 276 +++++++++++++++++++++++--------------------------------
1 files changed, 115 insertions(+), 161 deletions(-)
diff --git a/src/pages/cameraVideo/index/Video.vue b/src/pages/cameraVideo/index/Video.vue
index e4ebff0..c8077e2 100644
--- a/src/pages/cameraVideo/index/Video.vue
+++ b/src/pages/cameraVideo/index/Video.vue
@@ -16,7 +16,15 @@
:class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
@click="setGuid(3)"
></span>
- <el-tooltip
+ <el-tooltip v-if="TreeDataPool.selectedNode.id" :content="`${showArea?'闅愯棌鍖哄煙':'鏌ョ湅鍖哄煙'}`" placement="bottom" popper-class="atooltip">
+ <span :class="showArea?'activegongge':''" class="iconfont iconquyu" @click="toggleShowArea"></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 +34,7 @@
:class="track ? 'iconfont iconintruder-alarm activegongge':'iconfont iconintruder-alarm'"
@click="handleTrack"
></span>
- </el-tooltip>
+ </el-tooltip>-->
</div>
<div class="fixedRatioBox">
<div
@@ -39,6 +47,7 @@
:videoGuid="guid"
:videoIndex="index"
:videoItem="item"
+ :showArea="showArea"
:class="[
TreeDataPool.activeVideoIndex === index ? 'activeItem' : '',
guid === 1 ? 'onlyActiveItem' : ''
@@ -56,68 +65,7 @@
<video-photo ref="photoview" @addToBase="toAdd"></video-photo>
</div>
</div>
- <hsc-window-style-metal class="windown-model">
- <hsc-window
- v-for="(item, index) in CardList.addBaseList"
- :closeButton="true"
- @closebuttonclick="closeWindow(index)"
- :key="index"
- @update:height="resizeHeight"
- @update:width="resizeWidth"
- style="background:white; height:475px"
- :left="center.x + index * 10"
- :top="center.y + index * 10"
- :resizable="true"
- positionHint="center"
- :isScrollable="true"
- :minWidth="662"
- :minHeight="479"
- :maxWidth="10000"
- :maxHeight="7000"
- :height="defaultHeight"
- :width="defaultWidth"
- >
- <div class="addToBase">
- <div class="topLabel">鍔犲叆搴曞簱</div>
- <div class="items">
- <div class="lable">
- <p>榛戝悕鍗� ></p>
- </div>
- <div class="baseList">
- <el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite">
- <div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index">
- <el-checkbox
- :label="item.value"
- :title="item.title"
- :disabled="item.disabled"
- >{{item.title}}</el-checkbox>
- </div>
- </el-checkbox-group>
- </div>
- </div>
- <div class="items">
- <div class="lable">
- <p>鐧藉悕鍗� ></p>
- </div>
- <div class="baseList">
- <el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite">
- <div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index">
- <el-checkbox
- :label="item.value"
- :title="item.title"
- :disabled="item.disabled"
- >{{item.title}}</el-checkbox>
- </div>
- </el-checkbox-group>
- </div>
- </div>
- <div class="buttons">
- <el-button type="primary" @click="saveAddBase(item, index)">淇濆瓨</el-button>
- <el-button type="default" @click="closeWindow(index)">鍙栨秷</el-button>
- </div>
- </div>
- </hsc-window>
- </hsc-window-style-metal>
+
</div>
</template>
@@ -134,7 +82,7 @@
VideoTask,
VideoPhoto
},
- data() {
+ data () {
return {
guid: 1,
center: "",
@@ -145,10 +93,11 @@
traceTimer: null,
tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/track`,
websocket: null,
- visibilityState: true
+ visibilityState: true,
+ showArea: false,
};
},
- created() {
+ created () {
console.log("befor created")
// this.TreeDataPool.clean();
// this.TreeDataPool.fetchTreeData();
@@ -163,7 +112,7 @@
console.log("created")
},
- mounted() {
+ mounted () {
document.addEventListener("visibilitychange", this.visibilitychange, false);
this.$nextTick(() => {
window.addEventListener("resize", this.resizeMonitorTask);
@@ -180,7 +129,7 @@
// console.log(list, '宸插畬鎴愮殑鏈湴瑙嗛', this.TreeDataPool.localVedioList)
this.TreeDataPool.localVedioList = list;
},
- beforeDestroy() {
+ beforeDestroy () {
window.removeEventListener("resize", this.getRightWidth);
this.CardList.details = [];
window.clearInterval(this.trackTimer);
@@ -190,7 +139,7 @@
},
watch: {
"TreeDataPool.videoArr": function (newArry) {
- console.log('newArry',newArry)
+ console.log('newArry', newArry)
const cameras = this.filterNodes(newArry);
this.getActiveIndex();
this.$refs.taskview.showTasks(cameras);
@@ -202,12 +151,12 @@
"VideoPhotoData.selectWhites": function (value) {
this.blackAngWhite();
},
- "TreeDataPool.showTreeBox"(value) {
+ "TreeDataPool.showTreeBox" (value) {
this.getRightWidth();
}
},
methods: {
- handleTrack() {
+ handleTrack () {
this.track = !this.track;
if (!this.track) {
window.clearInterval(this.trackTimer);
@@ -234,7 +183,7 @@
}, 1 * 1000);
}
},
- videoItemMonitor() {
+ videoItemMonitor () {
this.websocket.send("ping");
let cache = this.traceCache
@@ -257,7 +206,7 @@
}
}
},
- initTrackWebsocket() {
+ initTrackWebsocket () {
if (typeof (WebSocket) === "undefined") {
alert("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔socket")
} else {
@@ -268,10 +217,10 @@
this.websocket.onmessage = this.recvieTrackMessage
}
},
- websocketonopen() { //杩炴帴寤虹珛涔嬪悗鎵цsend鏂规硶鍙戦�佹暟鎹�
+ websocketonopen () { //杩炴帴寤虹珛涔嬪悗鎵цsend鏂规硶鍙戦�佹暟鎹�
this.websocket.send("sub")
},
- tracking() {
+ tracking () {
getCameraPlayList().then(data => {
if (data && data.length) {
data.forEach(ins => {
@@ -290,7 +239,7 @@
}
})
},
- recvieTrackMessage(e) {
+ recvieTrackMessage (e) {
let dataJson = JSON.parse(e.data)
let cache = this.traceCache
let camera = dataJson.camera
@@ -330,7 +279,7 @@
// 鏈彂鐜版挱鏀捐褰�
this.newPlayerInViewBox(camera)
},
- newPlayerInViewBox(id) {
+ newPlayerInViewBox (id) {
// 鏂板鎾斁绐楀彛
let camera = this.TreeDataPool.getCameraInfoById(id)
let emptyIndex = -1;
@@ -354,7 +303,7 @@
this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
}
},
- replacePlayer(id, oldCameraId) {
+ replacePlayer (id, oldCameraId) {
let camera = this.TreeDataPool.getCameraInfoById(id)
// console.log("update:", camera.name)
// 鏇挎崲鎾斁鍣�
@@ -373,7 +322,7 @@
return false
},
- closePlayer(id) {
+ closePlayer (id) {
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
// eslint-disable-next-line
if (
@@ -387,7 +336,7 @@
}
}
},
- visibilitychange() {
+ visibilitychange () {
switch (document.visibilityState) {
case "hidden":
this.visibilityState = false;
@@ -397,7 +346,7 @@
break;
}
},
- blackAngWhite() {
+ blackAngWhite () {
if (this.VideoPhotoData.selectBlacks.length > 0) {
for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
//this.VideoPhotoData.whiteList[i].disabled = true
@@ -423,24 +372,24 @@
}
}
},
- closeWindow(index) {
+ closeWindow (index) {
this.CardList.addBaseList.splice(index, 1);
},
- getVideoHeight(){
+ getVideoHeight () {
let h = this.$refs.monitorVideo.offsetHeight;
- this.$refs.monitorTask.style.height = h+'px';
+ this.$refs.monitorTask.style.height = h + 'px';
},
- resizeMonitorTask(){
+ resizeMonitorTask () {
this.getRightWidth();
this.getVideoHeight();
},
- getRightWidth() {
+ getRightWidth () {
let w = this.$refs.videoRight.offsetWidth;
// console.log("w鏄細", w,this.$refs.monitorVideo.offsetWidth);
this.$refs.monitorTask.style.width = (w - this.$refs.monitorVideo.offsetWidth - 40) + 'px'
// console.log("鍙充晶浠诲姟鐨勫搴︼細", this.$refs.monitorTask.style.width)
},
- filterNodes(selectArry) {
+ filterNodes (selectArry) {
let nodes = [];
selectArry.forEach(i => {
if (i && nodes.indexOf(i.id) < 0) {
@@ -449,26 +398,26 @@
});
return nodes;
},
- videoItemClick(index) {
+ videoItemClick (index) {
this.TreeDataPool.activeVideoIndex = index;
this.TreeDataPool.activeForceChoose = true;
},
- toAdd(item) {
+ toAdd (item) {
this.CardList.addBaseList.push(item)
},
- getCenter() {
+ getCenter () {
this.center = {
x: document.documentElement.clientWidth / 2 - 250,
y: document.documentElement.clientHeight / 2 - 200
};
},
- resizeWidth(w) {
+ resizeWidth (w) {
this.defaultWidth = w;
},
- resizeHeight(h) {
+ resizeHeight (h) {
this.defaultHeight = h;
},
- saveAddBase(item, index) {
+ saveAddBase (item, index) {
if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
this.$notify({
title: "娉ㄦ剰",
@@ -498,7 +447,7 @@
this.VideoPhotoData.selectWhites = []
})
},
- getActiveIndex() {
+ getActiveIndex () {
this.TreeDataPool.videoArr.length = Math.pow(this.guid, 2);
let nullVideoIndex = "";
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
@@ -527,7 +476,7 @@
}
}
},
- setGuid(value) {
+ setGuid (value) {
clearTimeout(this.trackTimer);
if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
@@ -550,9 +499,12 @@
sessionStorage.guid = this.guid;
sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
this.getActiveIndex();
+ },
+ toggleShowArea () {
+ this.showArea = !this.showArea;
}
},
- destroyed() {
+ destroyed () {
window.removeEventListener("resize", this.getRightWidth);
this.CardList.details = [];
this.CardList.addBaseList = [];
@@ -572,7 +524,7 @@
box-sizing: border-box;
padding: 10px;
background-color: #e9ebf2;
- .main-top{
+ .main-top {
margin-bottom: 14px;
display: flex;
justify-content: space-between;
@@ -621,12 +573,15 @@
padding-left: 12px;
cursor: pointer;
}
+ .area-trigger {
+ font-size: 16px;
+ }
}
- .fixedRatioBox{
+ .fixedRatioBox {
padding-top: 56.3%;
box-sizing: border-box;
position: relative;
- >div{
+ > div {
width: 100%;
height: 100%;
position: absolute;
@@ -660,81 +615,80 @@
// box-shadow: #e4e7ed 0px 0px 9px inset;
border-radius: 5px;
}
-
}
-.titlebar{
- height: 10px!important;
- background: #fff!important;
- .button{
+.titlebar {
+ height: 10px !important;
+ background: #fff !important;
+ .button {
position: absolute;
- font-size: 25px!important;
+ font-size: 25px !important;
right: 10px;
top: 10px;
z-index: 3;
}
}
.addToBase {
- width: 98%;
- height: 430px;
- position: relative;
- .topLabel {
- margin-top: 20px;
- height: 40px;
- border-bottom: 1px solid #eee;
- font-family: PingFangSC-Medium;
- font-size: 20px;
+ width: 98%;
+ height: 430px;
+ position: relative;
+ .topLabel {
+ margin-top: 20px;
+ height: 40px;
+ border-bottom: 1px solid #eee;
+ font-family: PingFangSC-Medium;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 1rem;
+ color: #222222;
+ text-align: left;
+ margin-left: 15px;
+ }
+ .items {
+ width: 100%;
+ height: auto;
+ max-height: 35%;
+ overflow-y: auto;
+ margin: 20px 0px;
+ .lable {
+ width: 15%;
+ margin-top: 10px;
+ float: left;
+ //font-family: PingFangSC-Medium;
+ font-size: 14px;
font-weight: 600;
- line-height: 1rem;
- color: #222222;
- text-align: left;
- margin-left: 15px;
}
- .items {
- width: 100%;
- height: auto;
- max-height: 35%;
- overflow-y: auto;
- margin: 20px 0px;
- .lable {
- width: 15%;
- margin-top: 10px;
- float: left;
- //font-family: PingFangSC-Medium;
- font-size: 14px;
- font-weight: 600;
- }
- .baseList {
- width: 85%;
- height: 100%;
- float: left;
+ .baseList {
+ width: 85%;
+ height: 100%;
+ float: left;
- // display: flex;
- // justify-content: flex-start;
- .base {
- //flex-wrap: wrap;
- width: calc(33% - 10px);
- padding: 0px 5px;
- line-height: 30px;
- float: left;
- text-align: left;
- font-size: 12px !important;
- .el-checkbox {
- width: 100%;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- .el-checkbox__label {
- display: inline !important;
- }
+ // display: flex;
+ // justify-content: flex-start;
+ .base {
+ //flex-wrap: wrap;
+ width: calc(33% - 10px);
+ padding: 0px 5px;
+ line-height: 30px;
+ float: left;
+ text-align: left;
+ font-size: 12px !important;
+ .el-checkbox {
+ width: 100%;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ .el-checkbox__label {
+ display: inline !important;
}
}
}
}
- .buttons {
- position: absolute;
- right: 0px;
- bottom: 15px;
- }
}
+ .buttons {
+ position: absolute;
+ right: 0px;
+ bottom: 15px;
+ }
+}
</style>
--
Gitblit v1.8.0