From b92fdd535cf66641422ba84fe2d86952f0318248 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 24 十二月 2020 16:28:53 +0800
Subject: [PATCH] 实景图等比缩放适应在固定宽高内
---
src/pages/panoramicView/components/LabelMark.vue | 35 ++++++++++++-----
src/pages/panoramicView/components/TracePlot.vue | 33 ++++++++++++----
2 files changed, 49 insertions(+), 19 deletions(-)
diff --git a/src/pages/panoramicView/components/LabelMark.vue b/src/pages/panoramicView/components/LabelMark.vue
index 16766da..75f6aa9 100644
--- a/src/pages/panoramicView/components/LabelMark.vue
+++ b/src/pages/panoramicView/components/LabelMark.vue
@@ -126,14 +126,18 @@
: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>
@@ -200,6 +204,10 @@
snapshot_url: '',
panoramaPath: '',
cameraData: [],
+ fixedW: 960,
+ fixedH: 540,
+ imgW: 0,
+ imgH: 0,
traceX: 0,
traceY: 0,
isShowCurPos: false,
@@ -302,7 +310,16 @@
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) {
@@ -324,16 +341,12 @@
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) {
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index c7f76a6..6790ea6 100644
--- a/src/pages/panoramicView/components/TracePlot.vue
+++ b/src/pages/panoramicView/components/TracePlot.vue
@@ -14,11 +14,17 @@
<el-button @click="searchData" size="small" type="primary" class="btn-search">鏌� 璇�</el-button>
</div>
- <canvas
+ <!-- <canvas
ref="trackArea"
:width="cW"
:height="cH"
:style="{backgroundImage:`url(${panoramaPath})`}"
+ ></canvas> -->
+ <canvas
+ ref="trackArea"
+ width="960"
+ height="540"
+ :style="{backgroundImage:`url(${panoramaPath})`,backgroundSize:`${bgW}px ${bgH}px`}"
></canvas>
</div>
</template>
@@ -44,6 +50,10 @@
colorArr: ['#F4DA40', '#0092BC', '#97D700', '#D0006F', '#D86018', '#653279', '#A45A2A', '#004B87', '#008C95', '#AA0061'],
searchStartTimeStamp: 0,
searchEndTimeStamp: 0,
+ fixedW: 960,
+ fixedH: 540,
+ bgW: 0,
+ bgH: 0
}
},
mounted () {
@@ -62,10 +72,18 @@
let _this = this;
getPanoramaPic().then(res => {
let { panoramaPath, width, height } = res.data;
- _this.panoramaPath = panoramaPath;
- _this.cW = width;
- _this.cH = height;
-
+ _this.panoramaPath = panoramaPath + '?' + Math.random();
+ //_this.cW = width;
+ //_this.cH = height;
+ //鍒ゆ柇闀垮姣�
+ let ratio = res.data.width/res.data.height;
+ if(ratio > (_this.fixedW/_this.fixedH)){
+ _this.bgW = _this.fixedW;
+ _this.bgH = _this.bgW*res.data.height/res.data.width;
+ }else{
+ _this.bgH = _this.fixedH;
+ _this.bgW = res.data.width*_this.bgH/res.data.height;
+ }
})
},
drawTracePath () {
@@ -105,7 +123,7 @@
let _this = this;
var param = {
page: 1,
- size: 15,
+ size: 100,
searchTime: this.searchTime,
alarmlevel: [],
inputValue: '',
@@ -116,7 +134,6 @@
};
getSearchList(param).then(res => {
let filterArr = [];
- debugger
if(Date.parse(_this.searchTime[0]) > _this.searchEndTimeStamp || Date.parse(_this.searchTime[1]) < _this.searchStartTimeStamp){
_this.activeObjHashMap = [];
_this.actObj = {}
@@ -171,7 +188,7 @@
}
}
canvas {
- background: lightsteelblue;
+ //background: lightsteelblue;
background-repeat: no-repeat;
}
}
--
Gitblit v1.8.0