xiaodou-ai-admin/src/pages/Iot/dataServer/history.vue

<template>
<a-card>
  <a-row>
    <a-col span="20" >
      <a-space>
        <a-select allowClear v-model:value="queryParams.modelId" placeholder="请选择产品" style="width: 170px;" >
          <a-select-option
            v-for="item in state.modelList"
            :key="item.id"
            :value="item.id"
          >
            {{item.modelLabel}}
          </a-select-option>
        </a-select>

        <a-select allowClear v-model:value="queryParams.deviceId" placeholder="请选择设备" style="width: 170px;" >
          <a-select-option
            v-for="item in state.deviceList"
            :key="item.id"
            :value="item.id"
          >
            {{item.deviceLabel}}
          </a-select-option>
        </a-select>

        <a-range-picker v-model:value="time" :format="['DD/MM/YYYY', 'DD/MM/YYYY']"  />
        <a-button type="primary"  @click="getHistoryPage">搜索</a-button>
      </a-space>
    </a-col>
    <a-col span="2" >
      <a-button @click="exportExcel" >导出</a-button>
    </a-col>
  </a-row>
  <a-table
    style="margin-top: 20px;"
    :columns="columns"
    :loading="state.loading"
    :data-source="state.dataSource"
    :pagination="queryParams"
    @change="changePage"
  >

  </a-table>
</a-card>
</template>
<script lang='ts' setup >
import { DeviceContriller, ModelController } from '@/controller'
import { DataController } from '@/controller/iot/data'
import { onMounted, reactive, ref, watch } from 'vue'
import dayjs from 'dayjs'
import { useExportExcel } from '@/hooks'

const columns = [
  {
    title: '设备ID',
    dataIndex: 'deviceId'
  },
  {
    title: 'key',
    dataIndex: 'key'
  },
  {
    title: 'keyLabel',
    dataIndex: 'keyLabel'
  },
  {
    title: '结果',
    dataIndex: 'value'
  },
  {
    title: '单位',
    dataIndex: 'dataUnit'
  }
]

const time = ref([])

const queryParams = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  deviceId: null,
  modelId: null,
  attributeKey: '',
  startTime: '',
  endTime: ''
})

const state = reactive<{
  loading: boolean,
  dataSource: IOT.API.DATA.History[],
  modelList: IOT.API.MODEL.Model[]
  deviceList: IOT.API.DEVICE.Device[]
}>({
  loading: false,
  dataSource: [],
  modelList: [],
  deviceList: []
})

watch(
  () => time.value,
  () => {
    if (time.value && time.value.length === 2) {
      queryParams.startTime = new Date(dayjs(time.value[0])).getTime()
      queryParams.endTime = new Date(dayjs(time.value[1])).getTime()
    } else {
      queryParams.startTime = ''
      queryParams.endTime = ''
    }
  }
)

const exportExcel = async () => {
  const { data } = await DataController.exportHistoryExecel(queryParams)
  useExportExcel(data, '历史数据')
}

const changePage = ({ current }) => {
  queryParams.page = current
  getHistoryPage()
}

const getDeviceList = async () => {
  const { data } = await DeviceContriller.list()
  state.deviceList = data
}

const getModelList = async () => {
  const { data: modelData } = await ModelController.list()
  state.modelList = modelData
}

const getHistoryPage = async () => {
  state.loading = true

  const { data: historyData, sum } = await DataController.pageHistory(queryParams)
  state.loading = false
  state.dataSource = historyData
  queryParams.total = sum
}

onMounted(() => {
  getModelList()
  getDeviceList()
})

</script>
<style lang='less' scoped >
</style>