From a53f3b0645e3b0455a8c9a4a1cd0f061a8106c8d Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 19 一月 2021 19:49:59 +0800
Subject: [PATCH] 轨迹图实时查询逻辑更新(去除过滤)
---
src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue | 2
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 111 +++++++++++++++++++++++++++++-------
src/pages/shuohuangMonitorAnalyze/components/charts/line.vue | 27 +++++++++
src/pages/panoramicView/components/TracePlot.vue | 32 ++++------
4 files changed, 129 insertions(+), 43 deletions(-)
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index bf9d33e..2ef6feb 100644
--- a/src/pages/panoramicView/components/TracePlot.vue
+++ b/src/pages/panoramicView/components/TracePlot.vue
@@ -125,6 +125,7 @@
});
return;
}
+ clearInterval(this.timer);
//鍒ゆ柇鏄惁鏄煡鍘嗗彶鏁版嵁
if (Date.parse(this.searchTime[1]) < Date.now()) {
this.filterData()
@@ -140,6 +141,7 @@
page: 1,
size: 5000,
searchTime: this.searchTime,
+ timeMark: null,
alarmlevel: [],
inputValue: '',
tabs: [],
@@ -147,7 +149,7 @@
treeNodes: [],
isAll: false
};
- clearInterval(this.timer);
+ //clearInterval(this.timer);
getSearchList(param).then(res => {
_this.actObjs = [];
if (!res.data.datalist) {
@@ -222,6 +224,7 @@
})
},
drawTracePath () {
+ console.log(this.actObjs)
let canvas = this.$refs['trackArea'];
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -266,9 +269,14 @@
treeNodes: [],
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.activeObjHashMap = {};
//_this.actObj = {};
_this.actObjs = [];
this.$notify({
@@ -298,7 +306,8 @@
//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);
@@ -323,15 +332,6 @@
_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 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)
@@ -343,14 +343,8 @@
}
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(), _this.actObj)
_this.drawTracePath();
+ _this.timeMark = new Date();
_this.timer = setTimeout(() => {
_this.searchData()
}, _this.intervalTime)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue
new file mode 100644
index 0000000..c2c3a19
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue
@@ -0,0 +1,27 @@
+<template>
+ <div ref="lineChart"></div>
+</template>
+
+<script>
+export default {
+ props: {
+ options: {
+ type: Object
+ }
+ },
+ mounted(){
+ this.initLineChart();
+ },
+ methods:{
+ initLineChart(){
+ this.$$nextTick(()=>{
+ let dom = this.$echarts.init(this.$refs['lineChart']);
+ dom.setOption(this.options);
+ })
+ }
+ }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue
index c4f767e..46e941c 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue
@@ -1,5 +1,5 @@
<template>
- <div ref="pieChart" style="width: 100%; height: 100%;"></div>
+ <div ref="pieChart" style="width: 600px; height: 300px;"></div>
</template>
<script>
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 40c81ac..8007458 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -130,6 +130,32 @@
</div>
</div>
</div>
+ <div class="statics">
+ <div class="lt">
+ <div class="statics-part">
+ <div class="statics-header">
+ <span class="title">涔樺姟鍛樿繚瑙勭粺璁�</span>
+ <time-shortcut @actPickerChange="irregularStatistic"></time-shortcut>
+ </div>
+ <div class="chart-area flex-box">
+ <div class="lt">
+ <div class="chart-theme">涔樺姟鍛樻�讳汉鏁�</div>
+ <div class="sum">
+ <span class="val">8846</span>
+ <span class="ratio">17.1%</span>
+ </div>
+ <Line :options="optionsOfIrregularSum"></Line>
+ </div>
+ <div class="gt">
+ <div class="chart-theme">浜哄潎杩濊娆℃暟</div>
+ <div class="sum">
+ <span class="val">8846</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -139,8 +165,9 @@
import timeShortcut from './timeShortcut';
import Bar from './charts/bar';
import Pie from './charts/pie';
+import Line from './charts/line';
export default {
- components: { timeShortcut, Bar, Pie },
+ components: { timeShortcut, Bar, Pie, Line },
data () {
return {
actCardTab: 'dataStatistic',
@@ -183,44 +210,79 @@
]
},
optionsOfHidDangerPie: {
- tooltip:{
+ tooltip: {
trigger: 'item',
formatter: '{a}<br/>{b}:{c} ({d}%)'
},
legend: {
orient: 'vertical',
- left: 10,
+ right: 10,
+ y: 'center',
data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�']
},
series: [
{
- name:'寮傚父浜嬩欢',
- type:'pie',
- color: [],
- radius: ['50%','70%'],
+ name: '寮傚父浜嬩欢',
+ type: 'pie',
+ color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+ radius: ['70%', '90%'],
+ //center: ['40%','60%'],
avoidLabelOverlap: false,
- label:{
+ label: {
show: false,
position: 'center'
},
- emphasis:{
- label:{
+ emphasis: {
+ label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
- labelLine:{
+ labelLine: {
show: false
},
data: [
- {value: 270,name:'鏈福绗�'},
- {value: 500,name:'鏈墜姣�'},
- {value: 300,name:'鏈懠鍞�'},
- {value: 430,name:'杩愯涓潯瑙�'},
- {value: 620,name:'鏈鏌�'},
- {value: 540,name:'鏈簲绛�'},
+ { value: 270, name: '鏈福绗�' },
+ { value: 500, name: '鏈墜姣�' },
+ { value: 300, name: '鏈懠鍞�' },
+ { value: 430, name: '杩愯涓潯瑙�' },
+ { value: 620, name: '鏈鏌�' },
+ { value: 540, name: '鏈簲绛�' },
]
+ }
+ ]
+ },
+ optionsOfIrregularSum: {
+ animation: false,
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ label: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ label: {
+ show: false
+ }
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+
}
]
}
@@ -228,8 +290,11 @@
},
methods: {
timeShortChange (time) {
- debugger
+
},
+ irregularStatistic (time) {
+
+ }
}
}
</script>
@@ -336,16 +401,16 @@
font-weight: bold;
}
}
- .rank-list{
+ .rank-list {
padding: 10px 0;
- .rank-item{
+ .rank-item {
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #666;
- .rank-index{
+ .rank-index {
width: 20px;
height: 20px;
line-height: 20px;
@@ -354,8 +419,8 @@
border-radius: 50%;
text-align: center;
}
- .name{
- width:200px;
+ .name {
+ width: 200px;
}
}
}
--
Gitblit v1.8.0