From c9e0ab6e5150243d1e193a0f919a55f3c327710c Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 29 十二月 2020 10:52:34 +0800
Subject: [PATCH] 标注页面添加实景坐标回显,轨迹图添加人员筛选相关功能
---
src/pages/panoramicView/components/LabelMark.vue | 146 ++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 121 insertions(+), 25 deletions(-)
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index aaca3cc..9b999f5 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,38 @@
</div>
</div>
</div>
+ <div class="panorama-info">
+ <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="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 class="pos" v-show="isShowCurPos">
+ 褰撳墠浣嶇疆:
+ <b>{{traceX}}</b>,
+ <b>{{traceY}}</b>
+ </div>
+ </div>
</div>
</div>
</el-tab-pane>
@@ -122,17 +154,32 @@
drag
action="https://jsonplaceholder.typicode.com/posts/"
:http-request="definedUpload"
+ accept=".jpg"
:on-change="onChange"
:show-file-list="false"
>
- <el-image
+ <!-- <el-image
class="preview"
v-if="panoramaPath"
:src="panoramaPath"
fit="contain"
@mousemove="showCurPos"
@mouseout="isShowCurPos=false"
- ></el-image>
+ ></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>
+
<div class="el-upload__text">
灏嗘枃浠舵嫋鍒版澶勶紝鎴�
<em>鐐瑰嚮涓婁紶</em>
@@ -148,7 +195,7 @@
<div>
<label for>绌洪棿楂�:</label>
<el-input v-model="spaceHeight" placeholder="璇疯緭鍏ュ疄闄呯┖闂撮珮" size="small"></el-input>
- </div> -->
+ </div>-->
</div>
<div class="pos" v-show="isShowCurPos">
褰撳墠浣嶇疆:
@@ -199,6 +246,10 @@
snapshot_url: '',
panoramaPath: '',
cameraData: [],
+ fixedW: 960,
+ fixedH: 700,
+ imgW: 0,
+ imgH: 0,
traceX: 0,
traceY: 0,
isShowCurPos: false,
@@ -208,7 +259,8 @@
spaceHeight: '',
curCameraData: {
cameraId: '',
- coords: []
+ coords: [],
+ panoramaCoords: []
},
}
},
@@ -222,7 +274,7 @@
})();
};
},
-
+
watch: {
'TreeDataPool.selectedNode': {
handler (n, o) {
@@ -242,6 +294,15 @@
}
},
methods: {
+ labelOver (item) {
+ debugger
+ this.$nextTick(() => {
+ item.isShow = true;
+ })
+ },
+ labelout (item) {
+ item.isShow = false;
+ },
getAllCameraData () {
let _this = this;
getCamerasByServer().then(res => {
@@ -275,7 +336,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)
@@ -298,10 +363,19 @@
this.findCameraMarks(this.curCameraData.cameraId);
}
},
- getPanorama(){
+ getPanorama () {
let _this = this;
- getPanoramaPic().then(res=>{
- _this.panoramaPath = res.data.panoramaPath
+ getPanoramaPic().then(res => {
+ //鍒ゆ柇闀垮姣�
+ 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.fixedH;
+ _this.imgW = res.data.width * _this.imgH / res.data.height;
+ }
+ _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
})
},
showCurPos (e) {
@@ -311,25 +385,24 @@
this.traceY = e.offsetY;
},
onChange (file, fileList) {
- fileList = [file]
- this.isShowCurPos = false;
+ if (file.raw.type == "image/jpeg") {
+ fileList = [file]
+ this.isShowCurPos = false;
+ }
+
},
definedUpload (params) {
let _this = this;
let _file = params.file;
let param = new FormData();
param.append('file', params.file)
- putPanoramaPic(param).then(res=>{
- _this.panoramaPath = res.data.panoramaPath+'?'+Math.random()
- console.log(_this.panoramaPath)
+ putPanoramaPic(param).then(res => {
+ debugger
+ //_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
+ _this.getPanorama()
+ _this.$parent.$refs['tracePlot'] && _this.$parent.$refs['tracePlot'].getPanorama();
})
- // let fileReader = new FileReader()
- // fileReader.onload = () => {
- // _this.file = fileReader.result;
- // }
- // if (_file) {
- // fileReader.readAsDataURL(_file)
- // }
+
},
bindListen (e) {
@@ -445,19 +518,23 @@
.label-mark {
background: #d2dcea;
height: calc(100vh - 61px);
- &>.el-tabs--border-card > .el-tabs__content {
+ & > .el-tabs--border-card > .el-tabs__content {
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;
}
}
@@ -599,6 +676,25 @@
}
}
}
+ .panorama-info {
+ width: 1070px;
+ margin: 0 auto;
+ display: flex;
+ padding-bottom: 30px;
+ .img-wrap {
+ 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