feat：历史记录查询-添加单设备查看弹框（mock）

src/api/iot/device/index.ts

@@ -55,6 +55,10 @@ export interface LineDevicePageParams {
   collectionTimeEnd?: string
 }
 
+export interface SingleDeviceParams {
+  deviceId: string | number
+}
+
 // 物联设备 API
 export const DeviceApi = {
   // 查询物联设备分页
@@ -103,6 +107,10 @@ export const DeviceApi = {
     return await request.get({ url: `/iot/device/lineDevicePage`, params })
   },
 
+  getSingleDevice: async (params: SingleDeviceParams) => {
+    return await request.get({ url: `/iot/device/singleDevice`, params })
+  },
+
 // ==================== 子表（设备属性） ====================
 
   // 获得设备属性分页

src/views/iot/historyData/HistorySingleDeviceDialog.vue

@@ -0,0 +1,235 @@
+<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 }}
+            </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>
+          </div>
+        </div>
+      </ContentWrap>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { formatDate } from '@/utils/formatTime'
+
+type SectionColumn = {
+  prop: string
+  label: string
+}
+
+type SectionRow = Record<string, string | number | null>
+
+type Section = {
+  title: string
+  columns: SectionColumn[]
+  rows: SectionRow[]
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  deviceName?: string
+  collectionTime?: string | number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const dialogVisible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: boolean) {
+    emit('update:modelValue', value)
+  }
+})
+
+const title = computed(() => {
+  return '工艺参数'
+})
+
+const displayTime = computed(() => {
+  if (!props.collectionTime) {
+    return '-'
+  }
+  const value = props.collectionTime
+  if (typeof value === 'number') {
+    return formatDate(new Date(value))
+  }
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return value
+  }
+  return formatDate(date)
+})
+
+const formatCell = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  return value
+}
+
+const headerCellStyle = () => {
+  return {
+    fontWeight: 500,
+    padding: '6px 4px'
+  }
+}
+
+const bodyCellStyle = () => {
+  return {
+    padding: '4px 4px'
+  }
+}
+
+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 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
+    }
+  ]
+
+  return {
+    title,
+    columns,
+    rows
+  }
+}
+
+const sections = ref<Section[]>([])
+
+const buildMockSections = () => {
+  const result: Section[] = []
+  result.push(createSection('烘箱温度(℃)', '区', ['', '', '', '', '', '', '', '']))
+  result.push(createSection('冷却温度(℃)', '区', ['', '', '', '', '', '', '', '']))
+  result.push(createSection('线速度(m/min)', '段', ['', '']))
+  result.push(createSection('张力(bar)', '段', ['', '', '', '']))
+  sections.value = result
+}
+
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (!visible) {
+      return
+    }
+    buildMockSections()
+  }
+)
+
+onMounted(() => {
+  if (props.modelValue) {
+    buildMockSections()
+  }
+})
+</script>
+
+<style scoped>
+.history-device-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.history-device-dialog__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+}
+
+.history-device-dialog__header-sub {
+  color: var(--el-text-color-secondary);
+}
+
+.history-device-dialog__table-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.history-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) {
+  border-radius: 0;
+}
+</style>

src/views/iot/historyData/index.vue

@@ -99,11 +99,18 @@
       @pagination="getList"
     />
   </ContentWrap>
+
+  <HistorySingleDeviceDialog
+    v-model="singleDialogVisible"
+    :device-name="singleDeviceName"
+    :collection-time="singleCollectionTime"
+  />
 </template>
 
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
 import { DeviceApi, LineDeviceVO, LineDevicePageParams } from '@/api/iot/device'
+import HistorySingleDeviceDialog from './HistorySingleDeviceDialog.vue'
 
 defineOptions({ name: 'HistoryData' })
 
@@ -124,6 +131,10 @@ const queryParams = reactive({
 
 const queryFormRef = ref()
 
+const singleDialogVisible = ref(false)
+const singleDeviceName = ref<string>('')
+const singleCollectionTime = ref<string | number | undefined>()
+
 const buildQueryParams = (): LineDevicePageParams => {
   const params: LineDevicePageParams = {
     pageNo: queryParams.pageNo,
@@ -173,9 +184,22 @@ const resetQuery = () => {
   handleQuery()
 }
 
-const handleSingleView = (_row: LineDeviceVO) => {}
+const handleSingleView = (row: LineDeviceVO) => {
+  singleDeviceName.value = row.deviceName || ''
+  singleCollectionTime.value = (row as any).collectionTime
+  singleDialogVisible.value = true
+}
 
 onMounted(() => {
   getList()
 })
+
+const activatedOnce = ref(false)
+onActivated(() => {
+  if (!activatedOnce.value) {
+    activatedOnce.value = true
+    return
+  }
+  getList()
+})
 </script>