From 4fb905d2af3a695a6720111e8ca3708fc6d2034f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 29 十二月 2020 18:40:09 +0800
Subject: [PATCH] 轨迹图人员筛选移除隐藏全部
---
src/pages/panoramicView/components/LabelMark.vue | 111 +++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 98 insertions(+), 13 deletions(-)
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index 75f6aa9..ee06cef 100644
--- a/src/pages/panoramicView/components/LabelMark.vue
+++ b/src/pages/panoramicView/components/LabelMark.vue
@@ -20,7 +20,7 @@
</div>
<div style="width:250px;">
<label for>绗旇Е:</label>
- <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
+ <el-slider v-model="dotSize" :min="1" :max="15"></el-slider>
</div>
<div>
<el-button
@@ -111,6 +111,42 @@
</div>
</div>
</div>
+ <div class="panorama-info">
+ <div
+ 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>
+ </div>
+
+
+ </div>
+ <div class="pos" v-show="isShowCurPos">
+ 褰撳墠浣嶇疆:
+ <b>{{traceX}}</b>,
+ <b>{{traceY}}</b>
+ </div>
+ </div>
</div>
</div>
</el-tab-pane>
@@ -134,8 +170,18 @@
@mousemove="showCurPos"
@mouseout="isShowCurPos=false"
></el-image>-->
- <div class="img-wrap" v-if="panoramaPath" :style="{width:fixedW+'px',height:fixedH+'px'}">
- <img v-if="panoramaPath" :style="{width:imgW+'px',height:imgH+'px'}" :src="panoramaPath" @mousemove="showCurPos" @mouseout="isShowCurPos=false">
+ <div
+ class="img-wrap"
+ v-if="panoramaPath"
+ :style="{width:fixedW+'px',height:fixedH+'px'}"
+ >
+ <img
+ v-if="panoramaPath"
+ :style="{width:imgW+'px',height:imgH+'px'}"
+ :src="panoramaPath"
+ @mousemove="showCurPos"
+ @mouseout="isShowCurPos=false"
+ />
</div>
<div class="el-upload__text">
@@ -205,7 +251,7 @@
panoramaPath: '',
cameraData: [],
fixedW: 960,
- fixedH: 540,
+ fixedH: 700,
imgW: 0,
imgH: 0,
traceX: 0,
@@ -217,7 +263,8 @@
spaceHeight: '',
curCameraData: {
cameraId: '',
- coords: []
+ coords: [],
+ panoramaCoords: []
},
}
},
@@ -251,6 +298,15 @@
}
},
methods: {
+ labelOver (item) {
+ debugger
+ this.$nextTick(() => {
+ item.isShow = true;
+ })
+ },
+ labelout (item) {
+ item.isShow = false;
+ },
getAllCameraData () {
let _this = this;
getCamerasByServer().then(res => {
@@ -284,7 +340,11 @@
getCameraMarks({ cameraId: id }).then(res => {
if (res.success) {
this.curCameraData.cameraId = id;
- this.curCameraData.coords = res.data.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
+ this.curCameraData.coords = res.data.coords.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
+ this.curCameraData.panoramaCoords = res.data.panoramaCoords.map((item, index) => ({ id: 'p' + index, x: item.x, y: item.y }));
+ this.curCameraData.panoramaCoords.forEach(coord => {
+ this.$set(coord, 'isShow', false)
+ })
}
}).catch(e => {
console.log(e)
@@ -311,13 +371,13 @@
let _this = this;
getPanoramaPic().then(res => {
//鍒ゆ柇闀垮姣�
- let ratio = res.data.width/res.data.height;
- if(ratio > (_this.fixedW/_this.fixedH)){
+ let ratio = res.data.width / res.data.height;
+ if (ratio > (_this.fixedW / _this.fixedH)) {
_this.imgW = _this.fixedW;
- _this.imgH = _this.imgW*res.data.height/res.data.width;
- }else{
+ _this.imgH = _this.imgW * res.data.height / res.data.width;
+ } else {
_this.imgH = _this.fixedH;
- _this.imgW = res.data.width*_this.imgH/res.data.height;
+ _this.imgW = res.data.width * _this.imgH / res.data.height;
}
_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
})
@@ -466,15 +526,19 @@
background: #d2dcea;
padding: 0;
height: calc(100vh - 100px);
- overflow: auto;
+ //overflow: auto;
.mark-interface {
+ display: flex;
.left-tree {
position: relative;
- float: left;
+ //float: left;
height: calc(100vh - 20px);
+ overflow: auto;
background: #fff;
}
.tree-right {
+ flex: 1;
+ height: calc(100vh - 90px);
overflow: auto;
}
}
@@ -616,6 +680,27 @@
}
}
}
+ .panorama-info {
+ width: 1070px;
+ margin: 0 auto;
+ display: flex;
+ padding-bottom: 30px;
+ .img-wrap {
+ .img-area{
+ position: relative;
+ }
+ .label {
+ position: absolute;
+ border-radius: 50%;
+ .text {
+ color: aqua;
+ font-size: 14px;
+ position: absolute;
+ bottom: 15px;
+ }
+ }
+ }
+ }
.user-upload {
margin: auto;
padding: 50px;
--
Gitblit v1.8.0