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