From c748495762da3fdaeffa3bfbfde6607cd4f45a42 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 24 十二月 2020 17:30:51 +0800
Subject: [PATCH] 实景图固定区域高度调整
---
src/pages/panoramicView/components/TracePlot.vue | 68 ++++++++++++++++++++++++----------
1 files changed, 48 insertions(+), 20 deletions(-)
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index c8a7824..695e000 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="fixedW"
+ :height="fixedH"
+ :style="{backgroundImage:`url(${panoramaPath})`,backgroundSize:`${bgW}px ${bgH}px`}"
></canvas>
</div>
</template>
@@ -41,6 +47,13 @@
//this.$moment().format("YYYY-MM-DD HH:mm:ss")
],
timer: null,
+ colorArr: ['#F4DA40', '#0092BC', '#97D700', '#D0006F', '#D86018', '#653279', '#A45A2A', '#004B87', '#008C95', '#AA0061'],
+ searchStartTimeStamp: 0,
+ searchEndTimeStamp: 0,
+ fixedW: 960,
+ fixedH: 700,
+ bgW: 0,
+ bgH: 0
}
},
mounted () {
@@ -59,14 +72,21 @@
let _this = this;
getPanoramaPic().then(res => {
let { panoramaPath, width, height } = res.data;
- _this.panoramaPath = panoramaPath;
+ _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 () {
- let colorArr = ['#F4DA40','#0092BC','#97D700','#D0006F','#D86018','#653279','#A45A2A','#004B87','#008C95','#AA0061'];
let canvas = this.$refs['trackArea'];
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -77,28 +97,21 @@
//ctx.lineJoin='round';
ctx.lineCap = 'round';
for (var target in this.actObj) {
- debugger
ctx.beginPath();
- ctx.fillStyle = `rgb(${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)})`;
-
- //ctx.fillRect(this.actObj[target][0].globalCoordX+3, this.actObj[target][0].globalCoordY+3, 6, 6);
- ctx.arc(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 3, 0, Math.PI*2);
+ //ctx.fillStyle = `rgb(${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)})`;
+ ctx.fillStyle = this.actObj[target][0].color;
+ ctx.arc(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 3, 0, Math.PI * 2);
ctx.fill();
- //ctx.beginPath();
- //ctx.moveTo(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY);
for (var i = 1; i < this.actObj[target].length; i++) {
ctx.beginPath();
- ctx.arc(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 3, 0, Math.PI*2);
+ ctx.arc(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 3, 0, Math.PI * 2);
ctx.fill()
- //ctx.lineTo(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY);
-
- //ctx.fillRect(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 9, 9);
}
- //ctx.stroke();
}
for (var target in this.actObj) {
ctx.beginPath();
- ctx.strokeStyle = `rgb(${Math.floor(Math.random() * 20 + 220)},${Math.floor(Math.random() * 20 + 210)},${Math.floor(Math.random() * 55 + 200)})`;
+ //ctx.strokeStyle = `rgb(${Math.floor(Math.random() * 20 + 220)},${Math.floor(Math.random() * 20 + 210)},${Math.floor(Math.random() * 55 + 200)})`;
+ ctx.strokeStyle = this.actObj[target][0].color;
ctx.moveTo(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY);
for (var i = 1; i < this.actObj[target].length; i++) {
ctx.lineTo(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY);
@@ -110,7 +123,7 @@
let _this = this;
var param = {
page: 1,
- size: 15,
+ size: 100,
searchTime: this.searchTime,
alarmlevel: [],
inputValue: '',
@@ -121,12 +134,20 @@
};
getSearchList(param).then(res => {
let filterArr = [];
+ if(Date.parse(_this.searchTime[0]) > _this.searchEndTimeStamp || Date.parse(_this.searchTime[1]) < _this.searchStartTimeStamp){
+ _this.activeObjHashMap = [];
+ _this.actObj = {}
+ }
res.data.datalist && res.data.datalist.forEach(obj => {
if (_this.activeObjHashMap[obj.activeObject.id] !== 1) {
_this.activeObjHashMap[obj.activeObject.id] = 1
filterArr.push(obj)
}
});
+
+ _this.searchStartTimeStamp = Date.parse(_this.searchTime[0]);
+ _this.searchEndTimeStamp = Date.parse(_this.searchTime[1]);
+
filterArr.forEach(item => {
item.activeObject.targetInfo.forEach(target => {
if (target.targetType == 'UniquelID') {
@@ -139,7 +160,14 @@
}
})
});
- console.log(new Date().getTime(),_this.actObj)
+
+ var keyArr = Object.keys(_this.actObj);
+ for(var i = 0; i < keyArr.length; i++){
+ _this.actObj[keyArr[i]].forEach(dot=>{
+ dot.color = _this.colorArr[i%10];
+ })
+ }
+ console.log(new Date().getTime(), _this.actObj)
_this.drawTracePath()
})
}
@@ -160,7 +188,7 @@
}
}
canvas {
- background: lightsteelblue;
+ //background: lightsteelblue;
background-repeat: no-repeat;
}
}
--
Gitblit v1.8.0