数采改为3秒刷新，无感刷新

Crunchy

2025-01-13 300a480751c63fa970e3879965ff64c5bbfb4eac

数采改为3秒刷新，无感刷新

 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>


 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()
    }
  }