From 83c379bff0a39dd86ab6fb145c40b22f74978780 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 30 十二月 2020 17:21:24 +0800
Subject: [PATCH] 轨迹图添加时间快捷设置
---
src/pages/panoramicView/components/TracePlot.vue | 191 ++++++++++++++++++++++++++++++++---------------
1 files changed, 128 insertions(+), 63 deletions(-)
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index 9ee705b..a164bc0 100644
--- a/src/pages/panoramicView/components/TracePlot.vue
+++ b/src/pages/panoramicView/components/TracePlot.vue
@@ -4,8 +4,9 @@
<el-date-picker
size="small"
v-model="searchTime"
- @change="searchData"
+ @change="checkTime"
type="datetimerange"
+ :picker-options="pickerOptions"
start-placeholder="寮�濮嬫棩鏈�"
end-placeholder="缁撴潫鏃ユ湡"
value-format="yyyy-MM-dd HH:mm:ss"
@@ -64,6 +65,33 @@
this.$moment().format("YYYY-MM-DD 23:59:59")
//this.$moment().format("YYYY-MM-DD HH:mm:ss")
],
+ pickerOptions: {
+ shortcuts: [{
+ text: '杩戜竴灏忔椂',
+ onClick (picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 60 * 60 * 1000);
+ picker.$emit('pick', [start, end])
+ }
+ }, {
+ text: '杩戜笁灏忔椂',
+ onClick (picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 60 * 60 * 1000 * 3);
+ picker.$emit('pick', [start, end])
+ }
+ }, {
+ text: '杩戝叚灏忔椂',
+ onClick (picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 60 * 60 * 1000 * 6);
+ picker.$emit('pick', [start, end])
+ }
+ }]
+ },
timer: null,
intervalTime: 5000,
colorArr: ['#F4DA40', '#0092BC', '#97D700', '#D0006F', '#D86018', '#653279', '#A45A2A', '#004B87', '#008C95', '#AA0061'],
@@ -80,29 +108,92 @@
},
mounted () {
this.searchData();
+ //this.filterData();
this.getPanorama();
-
+
},
beforeDestroy () {
console.log('beforeDestroy')
clearInterval(this.timer);
},
methods: {
- hideAllChange(){
- this.actObjs.forEach(target=>{
+ checkTime () {
+ debugger
+ if (!this.searchTime) {
+ this.$notify({
+ type: 'warning',
+ message: '璇烽�夋嫨鏃堕棿!'
+ });
+ return;
+ }
+ //鍒ゆ柇鏄惁鏄煡鍘嗗彶鏁版嵁
+ if (this.searchTime[1] < Date.now()) {
+ this.filterData()
+ } else {
+ this.activeObjHashMap = {};
+ //瀹炴椂鏌�
+ this.searchData();
+ }
+ },
+ filterData () {
+ let _this = this;
+ var param = {
+ page: 1,
+ size: 5000,
+ searchTime: this.searchTime,
+ alarmlevel: [],
+ inputValue: '',
+ tabs: [],
+ tasks: [],
+ treeNodes: [],
+ isAll: false
+ };
+ getSearchList(param).then(res => {
+ _this.actObjs = [];
+ if (!res.data.datalist) {
+ this.$notify({
+ type: 'info',
+ message: '姝ゆ椂闂存鍐呮棤浜哄憳杞ㄨ抗锛岃閫夋嫨鍏朵粬鏃堕棿娈垫煡鐪�!'
+ });
+ _this.drawTracePath();
+
+ return;
+ }
+ res.data.datalist.forEach(obj => {
+ obj.activeObject.targetInfo.forEach(target => {
+ if (target.targetType == 'UniquelID') {
+ let attribute = JSON.parse(target.attribute);
+ let someone = _this.actObjs.find(actObj => actObj.id == target.targetId);
+ if (someone) {
+ someone.posInfo.unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(obj.activeObject.picDate) });
+ } else {
+ _this.actObjs.push({ id: target.targetId, picSmUrl: target.picSmUrl, posInfo: [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(obj.activeObject.picDate) }] });
+ }
+ }
+ })
+ });
+ for (var i = 0; i < _this.actObjs.length; i++) {
+ _this.actObjs[i].color = _this.colorArr[i % 10];
+ this.$set(_this.actObjs[i], 'isHide', _this.actObjs[i].isHide);
+ }
+ _this.drawTracePath();
+ })
+ },
+ hideAllChange () {
+ this.actObjs.forEach(target => {
target.isHide = this.isHideAll;
});
this.drawTracePath();
},
- invertChange(){
+ invertChange () {
console.log(this.isInvert)
- this.actObjs.forEach(target=>{
+ this.actObjs.forEach(target => {
target.isHide = !target.isHide;
});
- let showOne = this.actObjs.find(target=>!target.isHide);
- if(!showOne){
+ let showOne = this.actObjs.find(target => !target.isHide);
+ if (!showOne) {
this.isHideAll = true;
- }else{
+ } else {
this.isHideAll = false;
}
this.drawTracePath();
@@ -134,11 +225,7 @@
let canvas = this.$refs['trackArea'];
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
- //ctx.strokeStyle = 'yellow';
- //ctx.fillStyle = 'aqua';
- //ctx.globalAlpha=0.5;
ctx.lineWidth = 3;
- //ctx.lineJoin='round';
ctx.lineCap = 'round';
this.actObjs.forEach(target => {
if (!target.isHide) {
@@ -165,38 +252,8 @@
ctx.stroke();
}
})
- // for (var target in this.actObj) {
- // ctx.beginPath();
- // //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();
- // 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.fill()
- // }
- // }
- // 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 = 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);
- // }
- // ctx.stroke();
- // }
},
searchData () {
- if(!this.searchTime){
- this.$notify({
- type:'warning',
- message:'璇烽�夋嫨鏃堕棿!'
- });
- clearInterval(this.timer);
- return;
- }
let _this = this;
var param = {
page: 1,
@@ -210,27 +267,35 @@
isAll: false
};
getSearchList(param).then(res => {
- let filterArr = [];
if (!res.data.datalist) {
_this.activeObjHashMap = {};
- _this.actObj = {};
+ //_this.actObj = {};
_this.actObjs = [];
+ this.$notify({
+ type: 'info',
+ message: '姝ゆ椂闂存鍐呮棤浜哄憳杞ㄨ抗锛岃閫夋嫨鍏朵粬鏃堕棿娈垫煡鐪�!'
+ });
+ _this.drawTracePath();
+ clearInterval(this.timer);
+ return;
}
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];
+ //delete _this.actObj[key];
let index = _this.actObjs.findIndex(one => one.id == innerKey);
_this.actObjs.splice(index, 1)
}
}
+ let filterArr = [];
res.data.datalist && res.data.datalist.forEach(obj => {
if (_this.activeObjHashMap[obj.activeObject.id] !== 1) {
_this.activeObjHashMap[obj.activeObject.id] = 1
filterArr.push(obj)
}
+ //filterArr.push(obj)
});
filterArr.forEach(item => {
@@ -258,14 +323,14 @@
_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]
- }
- }
+ // 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]
+ // }
+ // }
for (var i = 0; i < _this.actObjs.length; i++) {
_this.actObjs[i].posInfo = _this.actObjs[i].posInfo.filter(item => item.timeStamp >= _this.searchStartTimeStamp && item.timeStamp <= _this.searchEndTimeStamp)
@@ -278,17 +343,17 @@
}
console.log(new Date(), _this.actObjs);
- 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)
+ // 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(), _this.actObj)
_this.drawTracePath();
- _this.timer = setTimeout(()=>{
+ _this.timer = setTimeout(() => {
_this.searchData()
- },_this.intervalTime)
+ }, _this.intervalTime)
})
}
}
--
Gitblit v1.8.0