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/panoramicView/components/LabelMark.vue | 176 +++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 135 insertions(+), 41 deletions(-)
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index 75f6aa9..2c78e56 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,41 @@
</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 +169,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">
@@ -175,10 +220,9 @@
import LeftNav from "@/components/LeftNav";
export default {
components: { LeftNav },
- data () {
+ data() {
return {
screenHeight: 0,
- actPage: 1,
labels: [],
colorPick: '#79f2fb',
dotSize: 3,
@@ -205,7 +249,7 @@
panoramaPath: '',
cameraData: [],
fixedW: 960,
- fixedH: 540,
+ fixedH: 700,
imgW: 0,
imgH: 0,
traceX: 0,
@@ -217,11 +261,12 @@
spaceHeight: '',
curCameraData: {
cameraId: '',
- coords: []
+ coords: [],
+ panoramaCoords: []
},
}
},
- mounted () {
+ mounted() {
this.getAllCameraData();
this.getPanorama();
this.screenHeight = document.documentElement.clientHeight - 20;
@@ -234,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;
@@ -242,7 +287,7 @@
},
deep: true
},
- isEdit (n, o) {
+ isEdit(n, o) {
if (n) {
this.$refs['editBoard'].addEventListener('click', this.bindListen);
} else {
@@ -251,7 +296,16 @@
}
},
methods: {
- getAllCameraData () {
+ labelOver(item) {
+ // debugger
+ this.$nextTick(() => {
+ item.isShow = true;
+ })
+ },
+ labelout(item) {
+ item.isShow = false;
+ },
+ getAllCameraData() {
let _this = this;
getCamerasByServer().then(res => {
if (res.success) {
@@ -262,10 +316,9 @@
console.log(e)
})
},
- sure () {
+ sure() {
let _this = this;
this.$refs['labelForm'].validate(valid => {
- console.log(valid)
if (valid) {
_this.isShowPop = false;
//缂栬緫纭畾
@@ -274,23 +327,26 @@
_this.curCameraData.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));
}
- console.log(_this.curCameraData.coords)
this.$refs['labelForm'].clearValidate();
}
});
},
//鑾峰彇鎽勫儚鏈烘爣娉�
- findCameraMarks (id) {
+ findCameraMarks(id) {
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)
});
},
- editCameraData () {
+ editCameraData() {
if (!this.TreeDataPool.selectedNode.id) {
this.$notify({
message: '璇峰厛閫夋嫨鎽勫儚鏈�',
@@ -300,48 +356,60 @@
}
this.isEdit = !this.isEdit;
},
- async submitInfo () {
+ async submitInfo() {
this.isEdit = false;
+
+ if (this.curCameraData.coords.length > 0 && this.curCameraData.coords.length < 4) {
+ this.$message({
+ type: "warning",
+ message: "淇濆瓨澶辫触! 鑷冲皯闇�瑕佹爣璁�4澶�!"
+ })
+ return
+ }
+
let res = await updateCameraMarks(this.curCameraData);
if (res.success) {
+ this.$message({
+ type: "success",
+ message: "淇濆瓨鎴愬姛"
+ })
this.findCameraMarks(this.curCameraData.cameraId);
}
},
- getPanorama () {
+ getPanorama() {
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();
})
},
- showCurPos (e) {
- console.log(e);
+ showCurPos(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();
param.append('file', params.file)
putPanoramaPic(param).then(res => {
- debugger
+ // debugger
//_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
_this.getPanorama()
_this.$parent.$refs['tracePlot'] && _this.$parent.$refs['tracePlot'].getPanorama();
@@ -349,14 +417,12 @@
},
- bindListen (e) {
+ bindListen(e) {
this.newLabel(e);
},
- newLabel (e) {
- console.log('鐐瑰嚮浜嗙敾鏉�')
+ newLabel(e) {
if (this.isShowPop) return;
//鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
- console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
this.$refs['labelForm'].resetFields();
let target = {
id: '',
@@ -372,14 +438,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')) {
@@ -387,7 +453,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);
@@ -449,7 +515,7 @@
}
.resize-bar:hover ~ .resize-line::after,
.resize-bar:active ~ .resize-line::after {
- content: '';
+ content: "";
position: absolute;
width: 16px;
height: 16px;
@@ -466,15 +532,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;
}
}
@@ -513,7 +583,8 @@
}
.action-bar {
width: 960px;
- margin: auto;
+ // margin: auto;
+ margin-left: 100px;
margin-top: 30px;
//margin-bottom: 20px;
text-align: right;
@@ -524,7 +595,8 @@
}
}
.drawboard {
- margin: auto;
+ // margin: auto;
+ margin-left: 100px;
width: 960px;
height: 540px;
margin-bottom: 130px;
@@ -616,6 +688,28 @@
}
}
}
+ .panorama-info {
+ width: 1070px;
+ // margin: 0 auto;
+ margin-left: 100px;
+ 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