数据历史数据查询

Crunchy

2024-12-20 595934eecd1d448390c93972c68058b3a33c91df

数据历史数据查询

 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>
@@ -71,38 +93,90 @@
      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]
      })
      }
      if (this.datePicker) {
        obj.startTime = this.datePicker[0]
        obj.endTime = this.datePicker[1]
      }
      // 调用数据接口
      await mqttList(obj).then( async (res) => {
        let data = res.data.data
        const data = res.data.data
        await data.forEach((i, k) => {
          i.listData = []
          i.yAxisMonth = []
@@ -117,17 +191,19 @@
        })
        this.largeAreaChartList = data
      })
      // 处理数据，适配折线图格式
      await this.largeAreaChartList.forEach((i, k) => {
        this.$refs['largeAreaChartRef' + k][0].refreshData(i.listData, i.yAxisMonth)
        this.$refs['largeAreaChartRef' + k][0].refreshData(
          i.listData,
          i.yAxisMonth
        )
      })
    },
    // 开启定时器
    destroyTimerAgainStart() {
      this.largeAreaChartList = []
      clearInterval(this.timer)
      this.timer = setInterval(
        this.getMqttLists,
        1000 * 30
      )
      this.timer = setInterval(this.getMqttLists, 1000 * 30)
      this.getMqttLists()
    }
  }