From 4c9daa12a820a2b1ba31bc29cef996d77de15618 Mon Sep 17 00:00:00 2001 From: caill <815519168@qq.com> Date: Mon, 1 Aug 2022 16:37:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/DeviceScreen.vue | 94 ++++++++++++++++++---------- src/pages/MonitoringScreen.vue | 111 ++++++++++++++++----------------- 2 files changed, 116 insertions(+), 89 deletions(-) diff --git a/src/pages/DeviceScreen.vue b/src/pages/DeviceScreen.vue index be05b8c..6cce4ce 100644 --- a/src/pages/DeviceScreen.vue +++ b/src/pages/DeviceScreen.vue @@ -626,11 +626,16 @@ export default { ] } let echart = document.getElementById('echart_d08') - this.myCharts08 = this.$echarts.init(echart) - this.myCharts08.setOption(option) - window.addEventListener('resize', () => { - this.myCharts08.resize() - }) + if (this.myCharts08 !== '') { + this.myCharts08.dispose() + } + if (echart !== null) { + this.myCharts08 = this.$echarts.init(echart) + this.myCharts08.setOption(option) + window.addEventListener('resize', () => { + this.myCharts08.resize() + }) + } }, setEchart01 () { let data = this.data01 @@ -660,11 +665,16 @@ export default { ] } let echart = document.getElementById('echart_d01') - this.myCharts01 = this.$echarts.init(echart) - this.myCharts01.setOption(option) - window.addEventListener('resize', () => { - this.myCharts01.resize() - }) + if (this.myCharts01 !== '') { + this.myCharts01.dispose() + } + if (echart !== null) { + this.myCharts01 = this.$echarts.init(echart) + this.myCharts01.setOption(option) + window.addEventListener('resize', () => { + this.myCharts01.resize() + }) + } }, setEchart04 () { // 多列柱状图 @@ -820,12 +830,17 @@ export default { ] } let echart = document.getElementById('echart_d04') - this.myCharts04 = this.$echarts.init(echart) - this.myCharts04.setOption(option) - this.autoMove(option, 1) - window.addEventListener('resize', () => { - this.myCharts04.resize() - }) + if (this.myCharts04 !== '') { + this.myCharts04.dispose() + } + if (echart !== null) { + this.myCharts04 = this.$echarts.init(echart) + this.myCharts04.setOption(option) + this.autoMove(option, 1) + window.addEventListener('resize', () => { + this.myCharts04.resize() + }) + } }, setEchart03 () { let d03 = this.data03 @@ -1012,11 +1027,16 @@ export default { ] } let echart = document.getElementById('echart_d03') - this.myCharts03 = this.$echarts.init(echart) - this.myCharts03.setOption(option) - window.addEventListener('resize', () => { - this.myCharts03.resize() - }) + if (this.myCharts03 !== '') { + this.myCharts03.dispose() + } + if (echart !== null) { + this.myCharts03 = this.$echarts.init(echart) + this.myCharts03.setOption(option) + window.addEventListener('resize', () => { + this.myCharts03.resize() + }) + } }, setEchart05 () { let option = { @@ -1186,11 +1206,16 @@ export default { ] } let echart = document.getElementById('echart_d05') - this.myCharts05 = this.$echarts.init(echart) - this.myCharts05.setOption(option) - window.addEventListener('resize', () => { - this.myCharts05.resize() - }) + if (this.myCharts05 !== '') { + this.myCharts05.dispose() + } + if (echart !== null) { + this.myCharts05 = this.$echarts.init(echart) + this.myCharts05.setOption(option) + window.addEventListener('resize', () => { + this.myCharts05.resize() + }) + } }, setEchart02 () { // 左3 @@ -1308,12 +1333,17 @@ export default { ] } let echart = document.getElementById('echart_d02') - this.myCharts02 = this.$echarts.init(echart) - this.myCharts02.setOption(option) - this.autoMove(option, 2) - window.addEventListener('resize', () => { - this.myCharts02.resize() - }) + if (this.myCharts02 !== '') { + this.myCharts02.dispose() + } + if (echart !== null) { + this.myCharts02 = this.$echarts.init(echart) + this.myCharts02.setOption(option) + this.autoMove(option, 2) + window.addEventListener('resize', () => { + this.myCharts02.resize() + }) + } }, setEchart10 () { // 右3 diff --git a/src/pages/MonitoringScreen.vue b/src/pages/MonitoringScreen.vue index 1c267b5..d23a04b 100644 --- a/src/pages/MonitoringScreen.vue +++ b/src/pages/MonitoringScreen.vue @@ -338,7 +338,6 @@ export default { timer2: null, timer3: null, timeOut1: null, - timeOut2: null, swiper: false, myCharts1: '', myCharts2: '', @@ -402,7 +401,7 @@ export default { this.refresh() this.setTime = setTimeout(() => { this.$router.push('/devicescreen') - }, 5000) + }, this.iTime) }, beforeDestroy () { this.$once('hook:beforeDestroy', () => { @@ -411,7 +410,6 @@ export default { clearInterval(this.timer3) clearInterval(this.interTime) clearInterval(this.timeOut1) - clearInterval(this.timeOut2) clearTimeout(this.setTime) }) }, @@ -593,12 +591,16 @@ export default { ] } let echart = document.getElementById('echart_d1') - this.myCharts1 = this.$echarts.init(echart) - this.myCharts1.setOption(option) - // this.autoMove(option, 1) - window.addEventListener('resize', () => { - this.myCharts1.resize() - }) + if (this.myCharts1 !== '') { + this.myCharts1.dispose() + } + if (echart !== null) { + this.myCharts1 = this.$echarts.init(echart) + this.myCharts1.setOption(option) + window.addEventListener('resize', () => { + this.myCharts1.resize() + }) + } }, setEchart2 () { let date = [] @@ -705,37 +707,29 @@ export default { ] } let echart = document.getElementById('echart_d2') - this.myCharts2 = this.$echarts.init(echart) - this.myCharts2.setOption(option) - this.autoMove(option, 2) - window.addEventListener('resize', () => { - this.myCharts2.resize() - }) - }, - autoMove (option, type) { - if (type === 1) { - this.timeOut1 = setInterval(() => { - if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) { - option.dataZoom[0].endValue = 4 - option.dataZoom[0].startValue = 0 - } else { - option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 - option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 - } - this.myCharts1.setOption(option) - }, 2000) - } else if (type === 2) { - this.timeOut2 = setInterval(() => { - if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) { - option.dataZoom[0].endValue = 9 - option.dataZoom[0].startValue = 0 - } else { - option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 - option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 - } - this.myCharts2.setOption(option) - }, 2000) + if (this.myCharts2 !== '') { + this.myCharts2.dispose() } + if (echart !== null) { + this.myCharts2 = this.$echarts.init(echart) + this.myCharts2.setOption(option) + this.autoMove(option) + window.addEventListener('resize', () => { + this.myCharts2.resize() + }) + } + }, + autoMove (option) { + this.timeOut1 = setInterval(() => { + if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) { + option.dataZoom[0].endValue = 9 + option.dataZoom[0].startValue = 0 + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + } + this.myCharts2.setOption(option) + }, 2000) }, setEchart3 () { let value = Number(this.objL1.finish_rate) @@ -813,11 +807,16 @@ export default { ] } let echart = document.getElementById('echart_d3') - this.myCharts3 = this.$echarts.init(echart) - this.myCharts3.setOption(option) - window.addEventListener('resize', () => { - this.myCharts3.resize() - }) + if (this.myCharts3 !== '') { + this.myCharts3.dispose() + } + if (echart !== null) { + this.myCharts3 = this.$echarts.init(echart) + this.myCharts3.setOption(option) + window.addEventListener('resize', () => { + this.myCharts3.resize() + }) + } }, setEchart4 () { let arr = [] @@ -846,17 +845,16 @@ export default { ] } let echart = document.getElementById('echart_d4') - this.myCharts4 = this.$echarts.init(echart) - this.myCharts4.setOption(option) - window.addEventListener('resize', () => { - this.myCharts4.resize() - }) - }, - fontSize (res) { - const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth - if (!clientWidth) return - let fontSize = clientWidth * res / 1920 - return fontSize + if (this.myCharts4 !== '') { + this.myCharts4.dispose() + } + if (echart !== null) { + this.myCharts4 = this.$echarts.init(echart) + this.myCharts4.setOption(option) + window.addEventListener('resize', () => { + this.myCharts4.resize() + }) + } }, /** 左一 */ async _planReached () { @@ -886,7 +884,6 @@ export default { if (res.code === '1') { this.arrL2 = [...res.result] if (this.arrL2.length > 0) { - clearInterval(this.timeOut1) this.setEchart1() } } else { @@ -898,7 +895,7 @@ export default { let res = await monthHarvest() if (res.code === '1') { this.arrL3 = [...res.result] - clearInterval(this.timeOut2) + clearInterval(this.timeOut1) this.setEchart2() } else { this.Dialog(res.desc)