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/TracePlot.vue | 33 +++++++++++++++++++++++++--------
1 files changed, 25 insertions(+), 8 deletions(-)
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