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

1 month ago · bc719acbcf
parent 7102032c70
commit bc719acbcf
3 changed files with 169 additions and 152 deletions
--- a/src/api/iot/device/index.ts
+++ b/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 })
+  },
+
 // ==================== 子表（设备属性） ====================

  // 获得设备属性分页
--- a/src/views/iot/historyData/HistorySingleDeviceDialog.vue
+++ b/src/views/iot/historyData/HistorySingleDeviceDialog.vue
@ -1,52 +1,52 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="title" width="1100">
-    <div class="history-device-dialog">
-      <div class="history-device-dialog__header">
-        <div class="history-device-dialog__header-main">
-          <span>设备名称：{{ deviceName || '-' }}</span>
-        </div>
-        <div class="history-device-dialog__header-sub">
-          <span>采集时间：{{ displayTime }}</span>
-        </div>
-      </div>
-      <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 }}
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="900" :scroll="true" max-height="80vh" align-center>
+    <div class="single-device-dialog">
+      <el-form class="-mb-15px" :inline="true" label-width="80px">
+        <el-form-item label="采集时间">
+          <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 v-if="group.sections.length" class="single-device-dialog__table-grid">
+              <div v-for="section in group.sections" :key="`${group.key}-${section.key}`"
+                class="single-device-dialog__section">
+                <div class="single-device-dialog__section-title">
+                  {{ section.title }}
+                </div>
+                <el-empty v-if="!section.columns.length" description="暂无数据" />
+                <el-table v-else :data="section.rows" :border="true" :header-cell-style="headerCellStyle"
+                  :cell-style="bodyCellStyle" 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>
+                  </el-table-column>
+                </el-table>
+              </div>
            </div>
-            <el-table
-              :data="section.rows"
-              :border="true"
-              :header-cell-style="headerCellStyle"
-              :cell-style="bodyCellStyle"
-              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>
-              </el-table-column>
-            </el-table>
+            <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(() => {
-  return '工艺参数'
+const dialogTitle = computed(() => {
+  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
-  if (typeof value === 'number') {
-    return formatDate(new Date(value))
+  const entries = Object.entries(value).filter(([, v]) => Array.isArray(v))
+  if (!entries.length) {
+    return {}
  }
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) {
-    return value
+  const map: Record<string, any[]> = {}
+  for (const [k, v] of entries) {
+    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 columns: SectionColumn[] = [
-    { prop: 'position', label: '' }
-  ]
-  for (let i = 0; i < units.length; i++) {
-    columns.push({ prop: `col${i + 1}`, label: `${baseName}${i + 1}${units[i] ? `(${units[i]})` : ''}` })
+const buildSectionsFromGroups = (groups: Record<string, any[]>): Section[] => {
+  const result: Section[] = []
+  for (const [key, list] of Object.entries(groups)) {
+    const columns: SectionColumn[] = []
+    const row: SectionRow = {}
+    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({
+      key,
+      title: key,
+      columns,
+      rows: columns.length ? [row] : []
+    })
  }
+  return result
+}

-  const rows: SectionRow[] = [
-    {
-      position: '上段',
-      col1: 175.5,
-      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
+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]
    }
-  ]
-
-  return {
-    title,
-    columns,
-    rows
+    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 {
+        key: `${item?.collectTime ?? index}-${index}`,
+        collectTime: item?.collectTime,
+        sections: buildSectionsFromGroups(groups)
+      }
+    })
+  } finally {
+    loading.value = false
  }
 }

-const sections = ref<Section[]>([])
+const handleQuery = () => {
+  fetchHistory()
+}

-const buildMockSections = () => {
-  const result: Section[] = []
-  result.push(createSection('烘箱温度(℃)', '区', ['', '', '', '', '', '', '', '']))
-  result.push(createSection('冷却温度(℃)', '区', ['', '', '', '', '', '', '', '']))
-  result.push(createSection('线速度(m/min)', '段', ['', '']))
-  result.push(createSection('张力(bar)', '段', ['', '', '', '']))
-  sections.value = result
+const resetQuery = () => {
+  collectionTimeRange.value = []
+  fetchHistory()
 }

 watch(
-  () => props.modelValue,
-  (visible) => {
+  () => [props.modelValue, props.deviceId],
+  ([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;
-  align-items: center;
-  font-size: 14px;
-  color: var(--el-text-color-primary);
+  flex-direction: column;
+  gap: 12px;
 }

-.history-device-dialog__header-sub {
-  color: var(--el-text-color-secondary);
+.single-device-dialog__record {
+  padding: 12px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+  background: var(--el-bg-color-overlay);
 }

-.history-device-dialog__table-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
+.single-device-dialog__section {
+  padding: 10px;
+  border: 1px solid var(--el-border-color);
+  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>
--- a/src/views/iot/historyData/index.vue
+++ b/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,
-  collectionTimeRange: [] as string[]
+  status: undefined as string | number | undefined
 })

 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
 }