<template>
|
<div class="trace-plot">
|
<div class="filter-bar">
|
<el-date-picker
|
size="small"
|
v-model="searchTime"
|
@change="searchData"
|
type="datetimerange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00','23:59:59']"
|
></el-date-picker>
|
<el-button @click="searchData" size="small" type="primary" class="btn-search">查 询</el-button>
|
</div>
|
|
<!-- <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>
|
|
<script>
|
import { getSearchList } from '@/api/search';
|
import { getPanoramaPic } from "@/api/panorama";
|
export default {
|
data () {
|
return {
|
cW: 0,
|
cH: 0,
|
panoramaPath: '',
|
trackData: [],
|
activeObjHashMap: {},
|
actObj: {},
|
searchTime: [
|
this.$moment().format("YYYY-MM-DD 00:00:00"),
|
this.$moment().format("YYYY-MM-DD 23:59:59")
|
//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 () {
|
this.searchData();
|
this.getPanorama();
|
this.timer = setInterval(() => {
|
this.searchData();
|
}, 7000);
|
},
|
beforeDestroy () {
|
console.log('beforeDestroy')
|
clearInterval(this.timer);
|
},
|
methods: {
|
getPanorama () {
|
let _this = this;
|
getPanoramaPic().then(res => {
|
let { panoramaPath, width, height } = res.data;
|
_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 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';
|
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 () {
|
let _this = this;
|
var param = {
|
page: 1,
|
size: 100,
|
searchTime: this.searchTime,
|
alarmlevel: [],
|
inputValue: '',
|
tabs: [],
|
tasks: [],
|
treeNodes: [],
|
isAll: false
|
};
|
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') {
|
let attribute = JSON.parse(target.attribute)
|
if (_this.actObj[target.targetId]) {
|
_this.actObj[target.targetId].unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY });
|
} else {
|
_this.actObj[target.targetId] = [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY }];
|
}
|
}
|
})
|
});
|
|
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()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.trace-plot {
|
.filter-bar {
|
width: 960px;
|
margin: 20px auto;
|
display: flex;
|
align-items: center;
|
flex-direction: end;
|
.btn-search {
|
margin-left: 20px;
|
}
|
}
|
canvas {
|
//background: lightsteelblue;
|
background-repeat: no-repeat;
|
}
|
}
|
</style>
|
