|
|
@@ -1,143 +1,150 @@
|
|
|
-<template>
|
|
|
-<a-card>
|
|
|
- <a-row>
|
|
|
- <a-col>
|
|
|
- <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-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'
|
|
|
-
|
|
|
-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 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>
|
|
|
+<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>
|