feat：历史记录查询-弹框对接接口

src/api/iot/device/index.ts

@@ -59,6 +59,12 @@ export interface SingleDeviceParams {
   deviceId: string | number
 }
 
+export interface HistoryRecordParams {
+  deviceId: string | number
+  collectionStartTime?: string
+  collectionEndTime?: string
+}
+
 // 物联设备 API
 export const DeviceApi = {
   // 查询物联设备分页
@@ -111,6 +117,10 @@ export const DeviceApi = {
     return await request.get({ url: `/iot/device/singleDevice`, params })
   },
 
+  getHistoryRecord: async (params: HistoryRecordParams) => {
+    return await request.get({ url: `/iot/device/historyRecord`, params })
+  },
+
 // ==================== 子表（设备属性） ====================
 
   // 获得设备属性分页

src/views/iot/historyData/HistorySingleDeviceDialog.vue

@@ -1,38 +1,34 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="title" width="1100">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="900" :scroll="true" max-height="80vh" align-center>
-    <div class="history-device-dialog">
+    <div class="single-device-dialog">
-      <div class="history-device-dialog__header">
+      <el-form class="-mb-15px" :inline="true" label-width="80px">
-        <div class="history-device-dialog__header-main">
+        <el-form-item label="采集时间">
-          <span>设备名称：{{ deviceName || '-' }}</span>
+          <el-date-picker v-model="collectionTimeRange" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
+            start-placeholder="开始时间" end-placeholder="结束时间"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-360px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">查询</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <ContentWrap v-loading="loading">
+        <div v-if="recordGroups.length" class="single-device-dialog__record-list">
+          <div v-for="group in recordGroups" :key="group.key" class="single-device-dialog__record">
+            <div class="single-device-dialog__record-title">
+              采集时间：{{ group.collectTime || '-' }}
             </div>
-        <div class="history-device-dialog__header-sub">
+            <div v-if="group.sections.length" class="single-device-dialog__table-grid">
-          <span>采集时间：{{ displayTime }}</span>
+              <div v-for="section in group.sections" :key="`${group.key}-${section.key}`"
-        </div>
+                class="single-device-dialog__section">
-      </div>
+                <div class="single-device-dialog__section-title">
-      <ContentWrap>
-        <div class="history-device-dialog__table-grid">
-          <div
-            v-for="(section, index) in sections"
-            :key="index"
-            class="history-device-dialog__section"
-          >
-            <div class="history-device-dialog__section-title">
                   {{ section.title }}
                 </div>
-            <el-table
+                <el-empty v-if="!section.columns.length" description="暂无数据" />
-              :data="section.rows"
+                <el-table v-else :data="section.rows" :border="true" :header-cell-style="headerCellStyle"
-              :border="true"
+                  :cell-style="bodyCellStyle" size="small">
-              :header-cell-style="headerCellStyle"
+                  <el-table-column v-for="col in section.columns" :key="col.prop" :prop="col.prop" :label="col.label"
-              :cell-style="bodyCellStyle"
+                    align="center">
-              size="small"
-            >
-              <el-table-column
-                v-for="col in section.columns"
-                :key="col.prop"
-                :prop="col.prop"
-                :label="col.label"
-                align="center"
-              >
                     <template #default="scope">
                       <span>{{ formatCell(scope.row[col.prop]) }}</span>
                     </template>
@@ -40,13 +36,17 @@
                 </el-table>
               </div>
             </div>
+            <el-empty v-else description="暂无数据" />
+          </div>
+        </div>
+        <el-empty v-else description="暂无数据" />
       </ContentWrap>
     </div>
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import { formatDate } from '@/utils/formatTime'
+import { DeviceApi } from '@/api/iot/device'
 
 type SectionColumn = {
   prop: string
@@ -56,15 +56,22 @@ type SectionColumn = {
 type SectionRow = Record<string, string | number | null>
 
 type Section = {
+  key: string
   title: string
   columns: SectionColumn[]
   rows: SectionRow[]
 }
 
+type RecordGroup = {
+  key: string
+  collectTime?: string
+  sections: Section[]
+}
+
 const props = defineProps<{
   modelValue: boolean
+  deviceId?: string | number
   deviceName?: string
-  collectionTime?: string | number
 }>()
 
 const emit = defineEmits<{
@@ -80,24 +87,32 @@ const dialogVisible = computed({
   }
 })
 
-const title = computed(() => {
+const dialogTitle = computed(() => {
-  return '工艺参数'
+  const name = props.deviceName ? props.deviceName : '-'
+  return `历史记录：${name}`
 })
 
-const displayTime = computed(() => {
+
-  if (!props.collectionTime) {
+
-    return '-'
+const loading = ref(false)
+const recordGroups = ref<RecordGroup[]>([])
+
+const collectionTimeRange = ref<string[]>([])
+
+const toGroupMap = (value: any): Record<string, any[]> => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return {}
   }
-  const value = props.collectionTime
+  const entries = Object.entries(value).filter(([, v]) => Array.isArray(v))
-  if (typeof value === 'number') {
+  if (!entries.length) {
-    return formatDate(new Date(value))
+    return {}
   }
-  const date = new Date(value)
+  const map: Record<string, any[]> = {}
-  if (Number.isNaN(date.getTime())) {
+  for (const [k, v] of entries) {
-    return value
+    map[k] = v as any[]
   }
-  return formatDate(date)
+  return map
-})
+}
 
 const formatCell = (value: string | number | null | undefined) => {
   if (value === null || value === undefined) {
@@ -119,117 +134,123 @@ const bodyCellStyle = () => {
   }
 }
 
-const createSection = (title: string, baseName: string, units: string[]): Section => {
+const buildSectionsFromGroups = (groups: Record<string, any[]>): Section[] => {
-  const columns: SectionColumn[] = [
+  const result: Section[] = []
-    { prop: 'position', label: '' }
+  for (const [key, list] of Object.entries(groups)) {
-  ]
+    const columns: SectionColumn[] = []
-  for (let i = 0; i < units.length; i++) {
+    const row: SectionRow = {}
-    columns.push({ prop: `col${i + 1}`, label: `${baseName}${i + 1}${units[i] ? `(${units[i]})` : ''}` })
+    if (Array.isArray(list) && list.length) {
+      list.forEach((item: any, index: number) => {
+        const prop = `col${index}`
+        const label = item?.attributeName ?? `字段${index + 1}`
+        columns.push({ prop, label })
+        row[prop] = item?.addressValue ?? ''
+      })
     }
-
+    result.push({
-  const rows: SectionRow[] = [
+      key,
-    {
+      title: key,
-      position: '上段',
+      columns,
-      col1: 175.5,
+      rows: columns.length ? [row] : []
-      col2: 181.2,
+    })
-      col3: 176.8,
-      col4: 179.0,
-      col5: 180.3,
-      col6: 177.9,
-      col7: 176.1,
-      col8: 178.4
-    },
-    {
-      position: '中段',
-      col1: 168.2,
-      col2: 170.0,
-      col3: 171.5,
-      col4: 169.8,
-      col5: 170.2,
-      col6: 169.1,
-      col7: 168.9,
-      col8: 170.0
-    },
-    {
-      position: '下段',
-      col1: 160.0,
-      col2: 161.2,
-      col3: 162.5,
-      col4: 161.8,
-      col5: 162.0,
-      col6: 161.3,
-      col7: 160.9,
-      col8: 161.5
   }
-  ]
+  return result
+}
 
+const fetchHistory = async () => {
+  if (props.deviceId === undefined || props.deviceId === null || props.deviceId === '') {
+    recordGroups.value = []
+    return
+  }
+  loading.value = true
+  try {
+    const params: Parameters<typeof DeviceApi.getHistoryRecord>[0] = { deviceId: props.deviceId }
+    if (Array.isArray(collectionTimeRange.value) && collectionTimeRange.value.length === 2) {
+      params.collectionStartTime = collectionTimeRange.value[0]
+      params.collectionEndTime = collectionTimeRange.value[1]
+    }
+    const res: any = await DeviceApi.getHistoryRecord(params)
+    const list = res?.data?.data ?? res?.data ?? res
+    const records = Array.isArray(list) ? list : []
+    recordGroups.value = records.map((item: any, index: number) => {
+      const groups = toGroupMap(item)
       return {
-    title,
+        key: `${item?.collectTime ?? index}-${index}`,
-    columns,
+        collectTime: item?.collectTime,
-    rows
+        sections: buildSectionsFromGroups(groups)
+      }
+    })
+  } finally {
+    loading.value = false
   }
 }
 
-const sections = ref<Section[]>([])
+const handleQuery = () => {
+  fetchHistory()
+}
 
-const buildMockSections = () => {
+const resetQuery = () => {
-  const result: Section[] = []
+  collectionTimeRange.value = []
-  result.push(createSection('烘箱温度(℃)', '区', ['', '', '', '', '', '', '', '']))
+  fetchHistory()
-  result.push(createSection('冷却温度(℃)', '区', ['', '', '', '', '', '', '', '']))
-  result.push(createSection('线速度(m/min)', '段', ['', '']))
-  result.push(createSection('张力(bar)', '段', ['', '', '', '']))
-  sections.value = result
 }
 
 watch(
-  () => props.modelValue,
+  () => [props.modelValue, props.deviceId],
-  (visible) => {
+  ([visible]) => {
     if (!visible) {
       return
     }
-    buildMockSections()
+    fetchHistory()
   }
 )
-
-onMounted(() => {
-  if (props.modelValue) {
-    buildMockSections()
-  }
-})
 </script>
 
 <style scoped>
-.history-device-dialog {
+.single-device-dialog {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
-.history-device-dialog__header {
+.single-device-dialog__table-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.single-device-dialog__record-list {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
-  align-items: center;
+  gap: 12px;
-  font-size: 14px;
-  color: var(--el-text-color-primary);
 }
 
-.history-device-dialog__header-sub {
+.single-device-dialog__record {
-  color: var(--el-text-color-secondary);
+  padding: 12px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+  background: var(--el-bg-color-overlay);
 }
 
-.history-device-dialog__table-grid {
+.single-device-dialog__section {
-  display: grid;
+  padding: 10px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  border: 1px solid var(--el-border-color);
-  gap: 12px;
+  border-radius: 6px;
+  background: var(--el-fill-color-lighter);
+}
+
+.single-device-dialog__record-title {
+  font-size: 13px;
+  margin-bottom: 6px;
+  color: var(--el-text-color-secondary);
 }
 
-.history-device-dialog__section-title {
+.single-device-dialog__section-title {
   font-size: 13px;
   margin-bottom: 4px;
   color: var(--el-text-color-primary);
 }
 
-.history-device-dialog__section :deep(.el-table__inner-wrapper) {
+.single-device-dialog__section :deep(.el-table__inner-wrapper) {
   border-radius: 0;
 }
 </style>

src/views/iot/historyData/index.vue

@@ -43,17 +43,6 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="采集时间" prop="collectionTimeRange">
-        <el-date-picker
-          v-model="queryParams.collectionTimeRange"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="datetimerange"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-360px"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon icon="ep:search" class="mr-5px" /> 搜索
@@ -87,7 +76,7 @@
       <el-table-column label="操作" align="center" fixed="right" width="150px">
         <template #default="scope">
           <el-button link type="primary" @click="handleSingleView(scope.row)">
-            单设备查看
+            历史记录
           </el-button>
         </template>
       </el-table-column>
@@ -102,8 +91,8 @@
 
   <HistorySingleDeviceDialog
     v-model="singleDialogVisible"
+    :device-id="singleDeviceId"
     :device-name="singleDeviceName"
-    :collection-time="singleCollectionTime"
   />
 </template>
 
@@ -125,15 +114,14 @@ const queryParams = reactive({
   lineName: undefined as string | undefined,
   deviceCode: undefined as string | undefined,
   deviceName: undefined as string | undefined,
-  status: undefined as string | number | undefined,
+  status: undefined as string | number | undefined
-  collectionTimeRange: [] as string[]
 })
 
 const queryFormRef = ref()
 
 const singleDialogVisible = ref(false)
+const singleDeviceId = ref<string | number>()
 const singleDeviceName = ref<string>('')
-const singleCollectionTime = ref<string | number | undefined>()
 
 const buildQueryParams = (): LineDevicePageParams => {
   const params: LineDevicePageParams = {
@@ -154,11 +142,6 @@ const buildQueryParams = (): LineDevicePageParams => {
     params.deviceName = queryParams.deviceName
   }
 
-  if (Array.isArray(queryParams.collectionTimeRange) && queryParams.collectionTimeRange.length === 2) {
-    params.collectionTimeStart = queryParams.collectionTimeRange[0]
-    params.collectionTimeEnd = queryParams.collectionTimeRange[1]
-  }
-
   return params
 }
 
@@ -180,13 +163,16 @@ const handleQuery = () => {
 
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
-  queryParams.collectionTimeRange = []
   handleQuery()
 }
 
 const handleSingleView = (row: LineDeviceVO) => {
+  const deviceId = (row as any)?.deviceId ?? row?.id
+  if (deviceId === undefined || deviceId === null || deviceId === '') {
+    return
+  }
+  singleDeviceId.value = deviceId
   singleDeviceName.value = row.deviceName || ''
-  singleCollectionTime.value = (row as any).collectionTime
   singleDialogVisible.value = true
 }