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

Crunchy

2025-01-13 300a480751c63fa970e3879965ff64c5bbfb4eac

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

@@ -1,71 +1,208 @@
<template>
  <div>
    <div class="header_div">
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <el-row>
      <el-col
        v-for="(v, k) in index"
        :key="k"
        style="height: 40vh; padding-top: 0.4em;"
        :span="12"
        ><largeAreaChart
      /></el-col>
    </el-row>
    <basic-container>
      <el-form label-width="100px" :inline="true">
        <el-form-item label="设备：" required>
          <el-select
            v-model="deviceId"
            placeholder="请选择"
            @change="getMqttListsSelect"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.device_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间：">
          <el-radio-group
            v-model="checkboxGroup3"
            size="small"
            @change="destroyTimerAgainStart"
          >
            <el-radio-button v-for="city in cities" :label="city" :key="city">{{
              city
            }}</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>
      <div
        v-if="!largeAreaChartList.length > 0"
        style="height: 75vh; padding-top: 0.4em; display: flex; align-items: center; justify-content: center;"
      >
        暂无数据
      </div>
      <el-row>
        <el-col
          v-for="(v, k) in largeAreaChartList"
          :key="k"
          style="height: 40vh; padding-top: 0.4em;"
          :span="12"
          ><largeAreaChart
            ref="largeAreaChartRef"
            :yAxisMonth="v.yAxisMonth"
            :seriesData="v.listData"
            :otherData="v"
          />
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import largeAreaChart from './components/largeAreaChart.vue'
import { getDeviceId, mqttList } from '@/api/equipment/equipment'

export default {
  components: {
    largeAreaChart: largeAreaChart
  },
  data() {
    return {
      index: 7,
      options: [
        {
          value: '选项1',
          label: '黄金糕'
      largeAreaChartList: [],
      cities: ['10 分钟', '30 分钟', '60 分钟'],
      checkboxGroup3: '10 分钟',
      options: [],
      deviceId: '',
      timer: '',
      datePicker: [],
      choiceDate: null,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime()
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = ''
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        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()
          }
        }
      ],
      value: ''
      }
    }
  },
  // 初始化调用 查询设备 折线图数据
  async created() {
    await this.getDeviceIdFun()
    this.destroyTimerAgainStart()
  },
  // 关闭页面销毁定时器
  beforeDestroy() {
    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 = {
        deviceId: this.deviceId,
        collectionTime: this.checkboxGroup3.split(' ')[0]
      }
      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 * 3)
      this.getMqttLists()
    }
  }
}
</script>

<style>
.header_div {
  height: 5em;
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 3em;
}
</style>
<style></style>