2023-5-18 数采bug修复完成

Crunchy

2024-05-18 717d5944c04bc92552885d1e7151ce955e880a6b

2023-5-18 数采bug修复完成

 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
  //   }

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