From 027d977d6b89cf4706fa6d07279014bb44fdd363 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 25 十二月 2020 16:03:02 +0800
Subject: [PATCH] 全景追踪过滤数据
---
src/pages/panoramicView/components/TracePlot.vue | 68 +++++++++++++++++++++++++--------
1 files changed, 51 insertions(+), 17 deletions(-)
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index c7f76a6..ce263c7 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>
@@ -44,6 +50,10 @@
colorArr: ['#F4DA40', '#0092BC', '#97D700', '#D0006F', '#D86018', '#653279', '#A45A2A', '#004B87', '#008C95', '#AA0061'],
searchStartTimeStamp: 0,
searchEndTimeStamp: 0,
+ fixedW: 960,
+ fixedH: 700,
+ 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.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: 500,
searchTime: this.searchTime,
alarmlevel: [],
inputValue: '',
@@ -116,38 +134,54 @@
};
getSearchList(param).then(res => {
let filterArr = [];
- debugger
- if(Date.parse(_this.searchTime[0]) > _this.searchEndTimeStamp || Date.parse(_this.searchTime[1]) < _this.searchStartTimeStamp){
- _this.activeObjHashMap = [];
+ if(!res.data.datalist){
+ _this.activeObjHashMap = {};
_this.actObj = {}
}
+ for(var key in _this.activeObjHashMap){
+ let innerKey = res.data.datalist&&res.data.datalist.find(obj => obj.activeObject.id == key);
+ if(!innerKey){
+ delete _this.activeObjHashMap[key];
+ delete _this.actObj[key];
+ }
+ }
+
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]);
+ console.log(_this.actObj)
filterArr.forEach(item => {
item.activeObject.targetInfo.forEach(target => {
if (target.targetType == 'UniquelID') {
let attribute = JSON.parse(target.attribute)
if (_this.actObj[target.targetId]) {
- _this.actObj[target.targetId].unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY });
+ _this.actObj[target.targetId].unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) });
} else {
- _this.actObj[target.targetId] = [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY }];
+ _this.actObj[target.targetId] = [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }];
}
}
})
});
-
+
+ _this.searchStartTimeStamp = Date.parse(_this.searchTime[0]);
+ _this.searchEndTimeStamp = Date.parse(_this.searchTime[1]);
+
+ for (var target in _this.actObj) {
+ _this.actObj[target] = _this.actObj[target].filter(item =>
+ item.timeStamp >= _this.searchStartTimeStamp && item.timeStamp <= _this.searchEndTimeStamp
+ )
+ if(_this.actObj[target].length == 0){
+ delete _this.actObj[target]
+ }
+ }
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];
+ 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)
@@ -171,7 +205,7 @@
}
}
canvas {
- background: lightsteelblue;
+ //background: lightsteelblue;
background-repeat: no-repeat;
}
}
--
Gitblit v1.8.0