From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复
---
src/pages/panoramicView/components/TracePlot.vue | 397 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 326 insertions(+), 71 deletions(-)
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index f12095d..a4e5aca 100644
--- a/src/pages/panoramicView/components/TracePlot.vue
+++ b/src/pages/panoramicView/components/TracePlot.vue
@@ -4,30 +4,47 @@
<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"
:default-time="['00:00:00','23:59:59']"
-
></el-date-picker>
- <el-button @click="searchData" size="small" type="primary" class="btn-search">鏌� 璇�</el-button>
+ <el-button @click="checkTime" size="small" type="primary" class="btn-search">鏌� 璇�</el-button>
</div>
- <!-- <p class="p-date" style="width:19%;vertical-align: top;">
- <el-date-picker
- size="mini"
- 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']"
- style="width:99%;min-width:200px"
- ></el-date-picker>
- </p> -->
- <canvas ref="trackArea" width="960" height="540" :style="{backgroundImage:`url(${panoramaPath})`}"></canvas>
+ <div class="check-target" :style="{height:fixedH+'px'}">
+ <div class="controller">
+ <!-- <el-checkbox v-model="isHideAll" @change="hideAllChange">闅愯棌鍏ㄩ儴</el-checkbox> -->
+ <el-checkbox v-model="isInvert" @change="invertChange">鍙嶉��</el-checkbox>
+ </div>
+ <div class="target-list">
+ <div
+ class="list-item"
+ v-for="item in actObjs"
+ :key="item.id"
+ :class="{'deact':item.isHide}"
+ :style="{borderColor:item.isHide?'#ccc':item.color}"
+ @click="checkTarget(item)"
+ >
+ <!-- <img src alt :style="{backgroundColor:item.color}"/> -->
+ <img :src="'/httpImage/'+item.picSmUrl" />
+ </div>
+ </div>
+ </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>
@@ -35,97 +52,305 @@
import { getSearchList } from '@/api/search';
import { getPanoramaPic } from "@/api/panorama";
export default {
- data () {
+ data() {
return {
- panoramaPath:'',
+ cW: 0,
+ cH: 0,
+ panoramaPath: '',
trackData: [],
activeObjHashMap: {},
actObj: {},
+ actObjs: [],
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")
],
+ 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'],
+ searchStartTimeStamp: 0,
+ searchEndTimeStamp: 0,
+ fixedW: 960,
+ fixedH: 700,
+ bgW: 0,
+ bgH: 0,
+ targetChecked: [],
+ isHideAll: false,
+ isInvert: false,
}
},
- mounted () {
+ mounted() {
this.searchData();
- this.getPanoramaPic();
- this.timer = setInterval(()=>{
- this.searchData();
- },7000);
+ //this.filterData();
+ this.getPanorama();
+
},
- beforeDestroy(){
- console.log('beforeDestroy')
+ beforeDestroy() {
clearInterval(this.timer);
},
methods: {
- getPanoramaPic () {
- let _this = this;
- getPanoramaPic().then(res=>{
- _this.panoramaPath = res.data.panoramaPath
- })
- },
- drawTracePath () {
- //let canvas = document.querySelector('#trackArea');
- 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 = 2;
- //ctx.lineJoin='round';
- ctx.lineCap = 'round';
- for (var target in this.actObj) {
- ctx.beginPath();
- ctx.fillStyle = `rgb(${Math.floor(Math.random() * 20 + 220)},${Math.floor(Math.random() * 35 + 200)},${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.fillRect(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 9, 9);
- 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.fillRect(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 9, 9);
- }
- ctx.stroke();
+ checkTime() {
+ if (!this.searchTime) {
+ this.$notify({
+ type: 'warning',
+ message: '璇烽�夋嫨鏃堕棿!'
+ });
+ return;
+ }
+ clearInterval(this.timer);
+ //鍒ゆ柇鏄惁鏄煡鍘嗗彶鏁版嵁
+ if (Date.parse(this.searchTime[1]) < Date.now()) {
+ this.filterData()
+ } else {
+ this.activeObjHashMap = {};
+ //瀹炴椂鏌�
+ this.searchData();
}
},
- searchData () {
+ filterData() {
let _this = this;
var param = {
page: 1,
- size: 70,
+ size: 5000,
+ searchTime: this.searchTime,
+ timeMark: null,
+ alarmlevel: [],
+ inputValue: '',
+ tabs: [],
+ tasks: [],
+ treeNodes: [],
+ isAll: false
+ };
+ //clearInterval(this.timer);
+ 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.$set(_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() {
+ console.log(this.isInvert)
+ this.actObjs.forEach(target => {
+ target.isHide = !target.isHide;
+ });
+ let showOne = this.actObjs.find(target => !target.isHide);
+ if (!showOne) {
+ this.isHideAll = true;
+ } else {
+ this.isHideAll = false;
+ }
+ this.drawTracePath();
+ },
+ checkTarget(item) {
+ item.isHide = !item.isHide;
+ this.isHideAll = item.isHide;
+ this.drawTracePath();
+ },
+ 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.lineWidth = 3;
+ ctx.lineCap = 'round';
+ this.actObjs.forEach(target => {
+ if (!target.isHide) {
+ ctx.beginPath();
+ ctx.fillStyle = target.color;
+ ctx.arc(target.posInfo[0].globalCoordX, target.posInfo[0].globalCoordY, 3, 0, Math.PI * 2);
+ ctx.fill();
+ for (var i = 1; i < target.posInfo.length; i++) {
+ ctx.beginPath();
+ ctx.arc(target.posInfo[i].globalCoordX, target.posInfo[i].globalCoordY, 3, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+
+ });
+ this.actObjs.forEach(target => {
+ if (!target.isHide) {
+ ctx.beginPath();
+ ctx.strokeStyle = target.color;
+ ctx.moveTo(target.posInfo[0].globalCoordX, target.posInfo[0].globalCoordY);
+ for (var i = 1; i < target.posInfo.length; i++) {
+ ctx.lineTo(target.posInfo[i].globalCoordX, target.posInfo[i].globalCoordY)
+ }
+ ctx.stroke();
+ }
+ })
+ },
+ searchData() {
+ let _this = this;
+ var param = {
+ page: 1,
+ size: 5000,
searchTime: this.searchTime,
alarmlevel: [],
inputValue: '',
tabs: [],
tasks: [],
treeNodes: [],
- isAll: true
+ isAll: false
};
+ if ((new Date() - _this.timeMark) < _this.intervalTime) {
+ return
+ }
getSearchList(param).then(res => {
+ _this.activeObjHashMap = {};
+ _this.actObjs = [];
+ if (!res.data.datalist) {
+ //_this.activeObjHashMap = {};
+ //_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];
+ let index = _this.actObjs.findIndex(one => one.id == innerKey);
+ _this.actObjs.splice(index, 1)
+ }
+ }
+
let filterArr = [];
- res.data.datalist&&res.data.datalist.forEach(obj => {
+ 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 => {
+
+ //filterArr.forEach(item => {
+ res.data.datalist.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].push({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY });
+ let attribute = JSON.parse(target.attribute);
+ let someone = _this.actObjs.find(obj => obj.id == target.targetId);
+ if (someone) {
+ someone.posInfo.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.actObjs.push({ id: target.targetId, picSmUrl: target.picSmUrl, posInfo: [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }] });
+ }
+
+ if (_this.actObj[target.targetId]) {
+ _this.actObj[target.targetId].unshift({ picSmUrl: target.picSmUrl, globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) });
+
+ } else {
+ _this.actObj[target.targetId] = [{ picSmUrl: target.picSmUrl, globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }];
+
}
}
})
});
- console.log(_this.actObj)
- _this.drawTracePath()
+
+ _this.searchStartTimeStamp = Date.parse(_this.searchTime[0]);
+ _this.searchEndTimeStamp = Date.parse(_this.searchTime[1]);
+
+ 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)
+
+ if (!_this.actObjs[i].posInfo.length) {
+ _this.actObjs.splice(i, 1);
+ }
+
+ this.$set(_this.actObjs[i], 'color', _this.colorArr[i % 10]);
+ this.$set(_this.actObjs[i], 'isHide', _this.actObjs[i].isHide);
+ }
+
+ // console.log(_this.actObjs)
+
+ _this.drawTracePath();
+ _this.timeMark = new Date();
+ _this.timer = setTimeout(() => {
+ _this.searchData()
+ }, _this.intervalTime)
+
+
})
}
}
@@ -134,20 +359,50 @@
<style lang="scss">
.trace-plot {
- .filter-bar{
+ .filter-bar {
width: 960px;
- margin: 20px auto;
+ margin: 20px 10px;
display: flex;
align-items: center;
flex-direction: end;
- .btn-search{
- margin-left:20px;
+ .btn-search {
+ margin-left: 20px;
+ }
+ }
+ .check-target {
+ padding: 30px;
+ box-sizing: border-box;
+ overflow: auto;
+ background: #f1f4f9;
+ float: left;
+ .target-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ width: 300px;
+
+ .list-item {
+ width: 80px;
+ height: 80px;
+ margin-bottom: 10px;
+ border: 3px solid yellow;
+ border-radius: 50%;
+ img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ border-radius: 50%;
+ }
+ &.deact {
+ opacity: 0.5;
+ background: rgba(0, 0, 0, 0.3);
+ }
+ }
}
}
canvas {
- background: lightsteelblue;
+ //background: lightsteelblue;
background-repeat: no-repeat;
-
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0