From 300a480751c63fa970e3879965ff64c5bbfb4eac Mon Sep 17 00:00:00 2001
From: Crunchy <3114200645@qq.com>
Date: 星期一, 13 一月 2025 14:04:32 +0800
Subject: [PATCH] 数采改为3秒刷新，无感刷新
---
src/views/equipment/mqtt-show/components/largeAreaChart.vue | 36 ++++-------------
src/views/equipment/mqtt-show/index.vue | 45 ++++++++++------------
2 files changed, 29 insertions(+), 52 deletions(-)
diff --git a/src/views/equipment/mqtt-show/components/largeAreaChart.vue b/src/views/equipment/mqtt-show/components/largeAreaChart.vue
index 0c5b6d1..325ab08 100644
--- a/src/views/equipment/mqtt-show/components/largeAreaChart.vue
+++ b/src/views/equipment/mqtt-show/components/largeAreaChart.vue
@@ -4,8 +4,6 @@
<script>
import * as echarts from 'echarts'
-var myChart = null
-var option = null
export default {
props: {
@@ -25,12 +23,6 @@
data() {
return {
option: {
- tooltip: {
- trigger: 'axis',
- position: function(pt) {
- return [pt[0], '10%']
- }
- },
title: {
left: '5%',
text: '璁惧鍚嶇О锛�' + this.otherData.deviceName
@@ -97,38 +89,28 @@
}
},
mounted() {
- myChart = echarts.init(this.$refs.myChart)
+ // 姝ｇ‘浣跨敤 this 鏉ュ畾涔� myChart 涓虹粍浠跺疄渚嬬殑鍙橀噺
+ this.myChart = echarts.init(this.$refs.myChart)
this.initDrag()
},
methods: {
initDrag() {
- myChart.setOption((option = this.option), true)
+ this.myChart.setOption(this.option)
- // 椤甸潰鍙戠敓鍙樺寲tree涔熸敼鍙�
+ // 椤甸潰鍙戠敓鍙樺寲 tree 涔熸敼鍙�
window.addEventListener('resize', () => {
- if (myChart) myChart.resize()
+ if (this.myChart) this.myChart.resize()
})
},
refreshData(seriesData, xAxisData) {
- //鍒锋柊鏁版嵁
- let refreshOption = myChart.getOption()
+ // 鍒锋柊鏁版嵁
+ const refreshOption = this.myChart.getOption()
refreshOption.series[0].data = seriesData
refreshOption.xAxis[0].data = xAxisData
- myChart.setOption(refreshOption)
+ // 浣跨敤 Promise 鍖呰 setOption 浣垮叾鎴愪负寮傛鎿嶄綔
+ this.myChart.setOption(refreshOption, true)
}
}
- // watch: {
- // yAxisMonth: {
- // handler(newVal) {
- // console.log(`output->myChart`,myChart)
- // setTimeout(()=>{
- // myChart.setOption((option = this.option), true)
- // },100)
-
- // },
- // deep: true
- // }
- // }
}
</script>
diff --git a/src/views/equipment/mqtt-show/index.vue b/src/views/equipment/mqtt-show/index.vue
index fc50651..b4af695 100644
--- a/src/views/equipment/mqtt-show/index.vue
+++ b/src/views/equipment/mqtt-show/index.vue
@@ -66,8 +66,7 @@
style="height: 40vh; padding-top: 0.4em;"
:span="12"
><largeAreaChart
- :ref="'largeAreaChartRef' + k"
- :key="new Date()"
+ ref="largeAreaChartRef"
:yAxisMonth="v.yAxisMonth"
:seriesData="v.listData"
:otherData="v"
@@ -175,35 +174,31 @@
obj.endTime = this.datePicker[1]
}
// 璋冪敤鏁版嵁鎺ュ彛
- await mqttList(obj).then(async (res) => {
- const data = res.data.data
- await data.forEach((i, k) => {
- i.listData = []
- i.yAxisMonth = []
- if (i.listMqttTableData.length > 0) {
- i.deviceId = i.listMqttTableData[0].deviceId
- }
- i.listMqttTableData.forEach((j) => {
- i.listData.push(j.value)
- i.yAxisMonth.push(j.collectionTime)
- })
- i.listMqttTableData = []
- })
- this.largeAreaChartList = data
- })
+ const res = await mqttList(obj)
+ const data = res.data.data
+ for (const i of data) {
+ i.listData = []
+ i.yAxisMonth = []
+ if (i.listMqttTableData.length > 0) {
+ i.deviceId = i.listMqttTableData[0].deviceId
+ }
+ for (const j of i.listMqttTableData) {
+ i.listData.push(j.value)
+ i.yAxisMonth.push(j.collectionTime)
+ }
+ i.listMqttTableData = []
+ }
+ this.largeAreaChartList = data
// 澶勭悊鏁版嵁锛岄�傞厤鎶樼嚎鍥炬牸寮�
- await this.largeAreaChartList.forEach((i, k) => {
- this.$refs['largeAreaChartRef' + k][0].refreshData(
- i.listData,
- i.yAxisMonth
- )
- })
+ for (const [k, i] of this.largeAreaChartList.entries()) {
+ this.$refs.largeAreaChartRef[k].refreshData(i.listData, i.yAxisMonth)
+ }
},
// 寮�鍚畾鏃跺櫒
destroyTimerAgainStart() {
this.largeAreaChartList = []
clearInterval(this.timer)
- this.timer = setInterval(this.getMqttLists, 1000 * 30)
+ this.timer = setInterval(this.getMqttLists, 1000 * 3)
this.getMqttLists()
}
}
--
Gitblit v1.9.3