From 717d5944c04bc92552885d1e7151ce955e880a6b Mon Sep 17 00:00:00 2001
From: Crunchy <3114200645@qq.com>
Date: 星期六, 18 五月 2024 14:29:17 +0800
Subject: [PATCH] 2023-5-18 数采bug修复完成
---
src/views/equipment/mqtt-show/components/largeAreaChart.vue | 70 +++++++++++++++++++----------------
src/views/equipment/mqtt-show/index.vue | 27 ++++++++-----
2 files changed, 55 insertions(+), 42 deletions(-)
diff --git a/src/views/equipment/mqtt-show/components/largeAreaChart.vue b/src/views/equipment/mqtt-show/components/largeAreaChart.vue
index 90ecb43..0c5b6d1 100644
--- a/src/views/equipment/mqtt-show/components/largeAreaChart.vue
+++ b/src/views/equipment/mqtt-show/components/largeAreaChart.vue
@@ -33,7 +33,7 @@
},
title: {
left: '5%',
- text: '璁惧鍚嶇О锛�' + this.otherData.deviceName + '\\鍗曚綅锛�' + (this.otherData.unit ? this.otherData.unit : '')
+ text: '璁惧鍚嶇О锛�' + this.otherData.deviceName
},
toolbox: {
right: '5%',
@@ -57,38 +57,39 @@
type: 'value',
boundaryGap: [0, '100%']
},
- dataZoom: [
- {
- type: 'inside',
- start: 0,
- end: 10
- },
- {
- start: 0,
- end: 10
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params) => {
+ var tips = ''
+ const value = params[0].value
+ if (value) {
+ tips =
+ '缂栧彿锛�' +
+ this.otherData.dataStream +
+ '<br />鍙傛暟锛�' +
+ value +
+ '<br />澶囨敞锛�' +
+ (this.otherData.remark ? this.otherData.remark : '') +
+ '<br />鍗曚綅锛�' +
+ (this.otherData.unit ? this.otherData.unit : '') +
+ '<br />鏃堕棿锛�' +
+ params[0].axisValue
+ }
+ return tips
}
- ],
+ },
series: [
{
- name: '鍙傛暟',
+ // name: '鍙傛暟',
type: 'line',
+ label: {
+ normal: {
+ show: true,
+ position: 'top'
+ }
+ },
symbol: 'none',
- sampling: 'lttb',
- itemStyle: {
- color: 'rgb(255, 70, 131)'
- },
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgb(255, 158, 68)'
- },
- {
- offset: 1,
- color: 'rgb(255, 70, 131)'
- }
- ])
- },
+ areaStyle: { normal: {} },
data: this.seriesData
}
]
@@ -97,11 +98,9 @@
},
mounted() {
myChart = echarts.init(this.$refs.myChart)
- option = this.makeOption()
this.initDrag()
},
methods: {
- makeOption() {},
initDrag() {
myChart.setOption((option = this.option), true)
@@ -109,8 +108,15 @@
window.addEventListener('resize', () => {
if (myChart) myChart.resize()
})
+ },
+ refreshData(seriesData, xAxisData) {
+ //鍒锋柊鏁版嵁
+ let refreshOption = myChart.getOption()
+ refreshOption.series[0].data = seriesData
+ refreshOption.xAxis[0].data = xAxisData
+ myChart.setOption(refreshOption)
}
- },
+ }
// watch: {
// yAxisMonth: {
// handler(newVal) {
@@ -118,7 +124,7 @@
// setTimeout(()=>{
// myChart.setOption((option = this.option), true)
// },100)
-
+
// },
// deep: true
// }
diff --git a/src/views/equipment/mqtt-show/index.vue b/src/views/equipment/mqtt-show/index.vue
index 6e95491..692a69d 100644
--- a/src/views/equipment/mqtt-show/index.vue
+++ b/src/views/equipment/mqtt-show/index.vue
@@ -6,7 +6,7 @@
<el-select
v-model="deviceId"
placeholder="璇烽�夋嫨"
- @change="getMqttLists"
+ @change="getMqttListsSelect"
>
<el-option
v-for="item in options"
@@ -44,9 +44,8 @@
style="height: 40vh; padding-top: 0.4em;"
:span="12"
><largeAreaChart
- ref="largeAreaChartRef"
- v-if="largeAreaChartList.length > 0"
- :key="k"
+ :ref="'largeAreaChartRef' + k"
+ :key="new Date()"
:yAxisMonth="v.yAxisMonth"
:seriesData="v.listData"
:otherData="v"
@@ -68,8 +67,8 @@
data() {
return {
largeAreaChartList: [],
- cities: ['1 鍒嗛挓', '3 鍒嗛挓', '5 鍒嗛挓', '10 鍒嗛挓'],
- checkboxGroup3: '1 鍒嗛挓',
+ cities: ['10 鍒嗛挓', '30 鍒嗛挓', '60 鍒嗛挓'],
+ checkboxGroup3: '10 鍒嗛挓',
options: [],
deviceId: '',
timer: ''
@@ -87,6 +86,10 @@
clearInterval(this.timer)
},
methods: {
+ getMqttListsSelect() {
+ this.largeAreaChartList = []
+ this.getMqttLists()
+ },
async getDeviceIdFun() {
await getDeviceId().then((res) => {
this.options = res.data.data
@@ -98,10 +101,9 @@
deviceId: this.deviceId,
collectionTime: this.checkboxGroup3.split(' ')[0]
})
- this.largeAreaChartList = []
- await mqttList(obj).then((res) => {
+ await mqttList(obj).then( async (res) => {
let data = res.data.data
- data.forEach((i) => {
+ await data.forEach((i, k) => {
i.listData = []
i.yAxisMonth = []
if (i.listMqttTableData.length > 0) {
@@ -115,13 +117,18 @@
})
this.largeAreaChartList = data
})
+ await this.largeAreaChartList.forEach((i, k) => {
+ this.$refs['largeAreaChartRef' + k][0].refreshData(i.listData, i.yAxisMonth)
+ })
},
destroyTimerAgainStart() {
+ this.largeAreaChartList = []
clearInterval(this.timer)
this.timer = setInterval(
this.getMqttLists,
- 1000 * 60 * this.checkboxGroup3.split(' ')[0]
+ 1000 * 30
)
+ this.getMqttLists()
}
}
}
--
Gitblit v1.9.3