From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug
---
src/pages/panoramicView/components/LabelMark.vue | 193 +++++++++++++++++++++++++++++++++++++----------
1 files changed, 150 insertions(+), 43 deletions(-)
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index 16766da..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>
@@ -126,14 +161,28 @@
: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>
@@ -171,10 +220,9 @@
import LeftNav from "@/components/LeftNav";
export default {
components: { LeftNav },
- data () {
+ data() {
return {
screenHeight: 0,
- actPage: 1,
labels: [],
colorPick: '#79f2fb',
dotSize: 3,
@@ -200,6 +248,10 @@
snapshot_url: '',
panoramaPath: '',
cameraData: [],
+ fixedW: 960,
+ fixedH: 700,
+ imgW: 0,
+ imgH: 0,
traceX: 0,
traceY: 0,
isShowCurPos: false,
@@ -209,11 +261,12 @@
spaceHeight: '',
curCameraData: {
cameraId: '',
- coords: []
+ coords: [],
+ panoramaCoords: []
},
}
},
- mounted () {
+ mounted() {
this.getAllCameraData();
this.getPanorama();
this.screenHeight = document.documentElement.clientHeight - 20;
@@ -226,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;
@@ -234,7 +287,7 @@
},
deep: true
},
- isEdit (n, o) {
+ isEdit(n, o) {
if (n) {
this.$refs['editBoard'].addEventListener('click', this.bindListen);
} else {
@@ -243,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) {
@@ -254,10 +316,9 @@
console.log(e)
})
},
- sure () {
+ sure() {
let _this = this;
this.$refs['labelForm'].validate(valid => {
- console.log(valid)
if (valid) {
_this.isShowPop = false;
//缂栬緫纭畾
@@ -266,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: '璇峰厛閫夋嫨鎽勫儚鏈�',
@@ -292,58 +356,73 @@
}
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 => {
- _this.panoramaPath = res.data.panoramaPath
+ //鍒ゆ柇闀垮姣�
+ 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) {
- 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 => {
- _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
+ // 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) {
+ bindListen(e) {
this.newLabel(e);
},
- newLabel (e) {
- console.log('鐐瑰嚮浜嗙敾鏉�')
+ newLabel(e) {
if (this.isShowPop) return;
//鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
- console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
this.$refs['labelForm'].resetFields();
let target = {
id: '',
@@ -359,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')) {
@@ -374,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);
@@ -436,7 +515,7 @@
}
.resize-bar:hover ~ .resize-line::after,
.resize-bar:active ~ .resize-line::after {
- content: '';
+ content: "";
position: absolute;
width: 16px;
height: 16px;
@@ -453,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;
}
}
@@ -500,7 +583,8 @@
}
.action-bar {
width: 960px;
- margin: auto;
+ // margin: auto;
+ margin-left: 100px;
margin-top: 30px;
//margin-bottom: 20px;
text-align: right;
@@ -511,7 +595,8 @@
}
}
.drawboard {
- margin: auto;
+ // margin: auto;
+ margin-left: 100px;
width: 960px;
height: 540px;
margin-bottom: 130px;
@@ -603,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