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

Crunchy

2025-01-13 300a480751c63fa970e3879965ff64c5bbfb4eac

 src/views/equipment/mqtt-show/index.vue

@@ -28,6 +28,28 @@
            }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="历史查询：">
          <el-tooltip
            class="item"
            effect="dark"
            content="注意：历史时间为空会刷新数据，不为空则不会刷新数据！"
            placement="top"
          >
            <el-date-picker
              v-model="datePicker"
              size="small"
              :picker-options="pickerOptions"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="datePickerHistory"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
            >
            </el-date-picker>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </basic-container>
    <basic-container>
@@ -44,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"
@@ -71,63 +92,113 @@
      checkboxGroup3: '10 分钟',
      options: [],
      deviceId: '',
      timer: ''
      timer: '',
      datePicker: [],
      choiceDate: null,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime()
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = ''
        },
        disabledDate: (time) => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 7天的时间戳
            const one = 7 * 24 * 3600 * 1000
            // 当前日期 - one = 7天之前
            const minTime = this.choiceDate - one
            // 当前日期 + one = 7天之后
            const maxTime = this.choiceDate + one
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              // 限制不能选择今天及以后
              time.getTime() > Date.now()
            )
          } else {
            // 如果没有选择日期，就要限制不能选择今天及以后
            return time.getTime() > Date.now()
          }
        }
      }
    }
  },
  // 初始化调用 查询设备 折线图数据
  async created() {
    await this.getDeviceIdFun()
    this.getMqttLists()
  },
  mounted() {
    this.destroyTimerAgainStart()
  },
  // 关闭页面销毁定时器
  beforeDestroy() {
    console.log(`output->销毁了定时器`)
    clearInterval(this.timer)
  },
  watch: {
    datePicker(newVal) {
      // 存在时间 销毁定时器
      if (newVal) {
        clearInterval(this.timer)
      } else {
        this.destroyTimerAgainStart()
      }
    }
  },
  methods: {
    // 选择时间后调用
    datePickerHistory() {
      if (this.datePicker) {
        this.getMqttLists()
      }
    },
    // 选择设备后调用刷新接口
    getMqttListsSelect() {
      this.largeAreaChartList = []
      this.getMqttLists()
    },
    // 获取设备下拉框
    async getDeviceIdFun() {
      await getDeviceId().then((res) => {
        this.options = res.data.data
        this.deviceId = this.options[0].device_id
      })
    },
    // 获取折线图数据
    async getMqttLists() {
      const obj = Object.assign({
      const obj = {
        deviceId: this.deviceId,
        collectionTime: this.checkboxGroup3.split(' ')[0]
      })
      await mqttList(obj).then( async (res) => {
        let 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
      })
      await this.largeAreaChartList.forEach((i, k) => {
        this.$refs['largeAreaChartRef' + k][0].refreshData(i.listData, i.yAxisMonth)
      })
      }
      if (this.datePicker) {
        obj.startTime = this.datePicker[0]
        obj.endTime = this.datePicker[1]
      }
      // 调用数据接口
      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
      // 处理数据，适配折线图格式
      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()
    }
  }