From 0175cda6150656bc74b34c6f6c71edd1e1fc653c Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 04 二月 2021 18:22:54 +0800
Subject: [PATCH] treee, 修复tab切换时树的选中状态.添加区域
---
src/pages/panoramicView/components/LabelMark.vue | 90 ++++++++++++++++++++++-----------------------
1 files changed, 44 insertions(+), 46 deletions(-)
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index ee06cef..35673db 100644
--- a/src/pages/panoramicView/components/LabelMark.vue
+++ b/src/pages/panoramicView/components/LabelMark.vue
@@ -116,30 +116,29 @@
class="img-wrap"
v-if="panoramaPath"
:style="{width:fixedW+'px',height:fixedH+'px'}"
- >
- <div class="img-area" :style="{width:imgW+'px',height:imgH+'px'}">
- <img
- v-if="panoramaPath"
- :style="{width:imgW+'px',height:imgH+'px'}"
- :src="panoramaPath"
- @mousemove="showCurPos"
- @mouseout="isShowCurPos=false"
- />
- <div
- class="label"
- @mouseover="labelOver(item)"
- @mouseout="item.isShow=false"
- v-for="item in curCameraData.panoramaCoords"
- :key="item.id"
- :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
- >
- <span class="text" v-show="item.isShow">
- <b>{{item.x}},</b> <b>{{item.y}}</b>
- </span>
+ >
+ <div class="img-area" :style="{width:imgW+'px',height:imgH+'px'}">
+ <img
+ v-if="panoramaPath"
+ :style="{width:imgW+'px',height:imgH+'px'}"
+ :src="panoramaPath"
+ @mousemove="showCurPos"
+ @mouseout="isShowCurPos=false"
+ />
+ <div
+ class="label"
+ @mouseover="labelOver(item)"
+ @mouseout="item.isShow=false"
+ v-for="item in curCameraData.panoramaCoords"
+ :key="item.id"
+ :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
+ >
+ <span class="text" v-show="item.isShow">
+ <b>{{item.x}},</b>
+ <b>{{item.y}}</b>
+ </span>
+ </div>
</div>
- </div>
-
-
</div>
<div class="pos" v-show="isShowCurPos">
褰撳墠浣嶇疆:
@@ -221,10 +220,9 @@
import LeftNav from "@/components/LeftNav";
export default {
components: { LeftNav },
- data () {
+ data() {
return {
screenHeight: 0,
- actPage: 1,
labels: [],
colorPick: '#79f2fb',
dotSize: 3,
@@ -268,7 +266,7 @@
},
}
},
- mounted () {
+ mounted() {
this.getAllCameraData();
this.getPanorama();
this.screenHeight = document.documentElement.clientHeight - 20;
@@ -281,7 +279,7 @@
watch: {
'TreeDataPool.selectedNode': {
- handler (n, o) {
+ handler(n, o) {
let curCamera = this.cameraData.find(item => item.id == n.id);
//璁剧疆鎽勫儚鏈哄簳鍥�
this.snapshot_url = curCamera.snapshot_url;
@@ -289,7 +287,7 @@
},
deep: true
},
- isEdit (n, o) {
+ isEdit(n, o) {
if (n) {
this.$refs['editBoard'].addEventListener('click', this.bindListen);
} else {
@@ -298,16 +296,16 @@
}
},
methods: {
- labelOver (item) {
+ labelOver(item) {
debugger
this.$nextTick(() => {
item.isShow = true;
})
},
- labelout (item) {
+ labelout(item) {
item.isShow = false;
},
- getAllCameraData () {
+ getAllCameraData() {
let _this = this;
getCamerasByServer().then(res => {
if (res.success) {
@@ -318,7 +316,7 @@
console.log(e)
})
},
- sure () {
+ sure() {
let _this = this;
this.$refs['labelForm'].validate(valid => {
console.log(valid)
@@ -336,7 +334,7 @@
});
},
//鑾峰彇鎽勫儚鏈烘爣娉�
- findCameraMarks (id) {
+ findCameraMarks(id) {
getCameraMarks({ cameraId: id }).then(res => {
if (res.success) {
this.curCameraData.cameraId = id;
@@ -350,7 +348,7 @@
console.log(e)
});
},
- editCameraData () {
+ editCameraData() {
if (!this.TreeDataPool.selectedNode.id) {
this.$notify({
message: '璇峰厛閫夋嫨鎽勫儚鏈�',
@@ -360,14 +358,14 @@
}
this.isEdit = !this.isEdit;
},
- async submitInfo () {
+ async submitInfo() {
this.isEdit = false;
let res = await updateCameraMarks(this.curCameraData);
if (res.success) {
this.findCameraMarks(this.curCameraData.cameraId);
}
},
- getPanorama () {
+ getPanorama() {
let _this = this;
getPanoramaPic().then(res => {
//鍒ゆ柇闀垮姣�
@@ -382,20 +380,20 @@
_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
})
},
- showCurPos (e) {
+ showCurPos(e) {
console.log(e);
this.isShowCurPos = true;
this.traceX = e.offsetX;
this.traceY = e.offsetY;
},
- onChange (file, fileList) {
+ onChange(file, fileList) {
if (file.raw.type == "image/jpeg") {
fileList = [file]
this.isShowCurPos = false;
}
},
- definedUpload (params) {
+ definedUpload(params) {
let _this = this;
let _file = params.file;
let param = new FormData();
@@ -409,10 +407,10 @@
},
- bindListen (e) {
+ bindListen(e) {
this.newLabel(e);
},
- newLabel (e) {
+ newLabel(e) {
console.log('鐐瑰嚮浜嗙敾鏉�')
if (this.isShowPop) return;
//鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
@@ -432,14 +430,14 @@
this.isShowPop = true;
this.isNewLabel = true;
},
- editLabel (label) {
+ editLabel(label) {
if (!this.isEdit) return;
this.isShowPop = true;
this.$refs['labelForm'].clearValidate();
this.curLabel = JSON.parse(JSON.stringify(label));
},
- cancle () {
+ cancle() {
this.isShowPop = false;
//濡傛灉鏄湭淇濆瓨杩囩殑label鐩存帴鍒犻櫎(鏈繚瀛樼殑灏辨槸labels鏁扮粍涓渶鍚庝竴涓�)
if (this.curLabel.id.startsWith('n')) {
@@ -447,7 +445,7 @@
this.curCameraData.coords.pop();
}
},
- deleteLabel () {
+ deleteLabel() {
if (this.curLabel.id) {
let index = this.curCameraData.coords.findIndex(item => item.id == this.curLabel.id);
this.curCameraData.coords.splice(index, 1);
@@ -509,7 +507,7 @@
}
.resize-bar:hover ~ .resize-line::after,
.resize-bar:active ~ .resize-line::after {
- content: '';
+ content: "";
position: absolute;
width: 16px;
height: 16px;
@@ -686,7 +684,7 @@
display: flex;
padding-bottom: 30px;
.img-wrap {
- .img-area{
+ .img-area {
position: relative;
}
.label {
--
Gitblit v1.8.0