refactor：数据实时监控-弹框内容重构

src/views/iot/realTimeMonitoring/SingleDeviceMonitorDialog.vue

@@ -1,73 +1,59 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1200">
-    <ContentWrap>
-      <el-form class="-mb-15px" :inline="true" label-width="80px">
-        <el-form-item label="参数类型">
-          <el-select
-            v-model="selectedGroupKey"
-            placeholder="请选择"
-            :disabled="groupKeys.length <= 1"
-            class="!w-240px"
-          >
-            <el-option v-for="key in groupKeys" :key="key" :label="key" :value="key" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <el-table
-        v-loading="loading"
-        :data="pagedList"
-        :stripe="true"
-        :show-overflow-tooltip="true"
-        :row-key="getRowKey"
-      >
-      <el-table-column label="点位编码" align="left" prop="pointCode" min-width="140px" />
-      <el-table-column label="点位名称" align="left" prop="pointName" min-width="160px" />
-      <el-table-column label="数据类型" align="center" prop="dataType" width="120px" />
-      <el-table-column label="寄存器地址" align="center" prop="address" width="140px" />
-      <el-table-column label="最新值" align="center" prop="addressValue" width="140px">
-        <template #default="scope">
-          {{ formatLatestValue(scope.row.addressValue) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="倍率" align="center" prop="ratio" width="100px" />
-      <el-table-column label="单位" align="center" prop="unit" width="100px" />
-      <el-table-column
-        label="最新采集时间"
-        align="center"
-          prop="latestCollectTime"
-          :formatter="dateFormatter"
-          width="180px"
-        />
-      </el-table>
-      <Pagination
-        :total="total"
-        v-model:page="pageNo"
-        v-model:limit="pageSize"
-        @pagination="handlePagination"
-      />
-    </ContentWrap>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="900">
+    <div class="single-device-dialog">
+      <div class="single-device-dialog__header">
+        <div>设备名称：{{ deviceName || '-' }}</div>
+        <div>采集时间：{{ displayTime }}</div>
+      </div>
+      <ContentWrap v-loading="loading">
+        <div v-if="sections.length" class="single-device-dialog__table-grid">
+          <div v-for="section in sections" :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-empty v-else description="暂无数据" />
+      </ContentWrap>
+    </div>
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import { dateFormatter } from '@/utils/formatTime'
+import { formatDate } from '@/utils/formatTime'
 import { DeviceApi } from '@/api/iot/device'
 
-type MonitorRow = {
-  pointCode: string
-  pointName: string
-  dataType: string
-  address: string
-  addressValue: unknown
-  ratio: number | null
-  unit: string
-  latestCollectTime: string | number
+type SectionColumn = {
+  prop: string
+  label: string
+}
+
+type SectionRow = Record<string, string | number | null>
+
+type Section = {
+  key: string
+  title: string
+  columns: SectionColumn[]
+  rows: SectionRow[]
 }
 
 const props = defineProps<{
   modelValue: boolean
   deviceId?: string | number
   deviceName?: string
+  collectionTime?: string | number
 }>()
 
 const emit = defineEmits<{
@@ -84,92 +70,89 @@ const dialogVisible = computed({
 })
 
 const dialogTitle = computed(() => {
-  return props.deviceName ? `设备名称：${props.deviceName}` : '单设备监控'
+  return '单设备监控'
 })
 
 const loading = ref(false)
-const groupRawMap = ref<Record<string, any[]>>({})
-const selectedGroupKey = ref('')
-const pageNo = ref(1)
-const pageSize = ref(10)
-
-const groupKeys = computed(() => Object.keys(groupRawMap.value))
+const deviceName = computed(() => props.deviceName)
+const sections = ref<Section[]>([])
 
-const fullList = computed(() => {
-  const raw = groupRawMap.value[selectedGroupKey.value]
-  return normalizeRows(Array.isArray(raw) ? raw : [])
-})
-
-const total = computed(() => fullList.value.length)
-
-const pagedList = computed(() => {
-  const start = (pageNo.value - 1) * pageSize.value
-  return fullList.value.slice(start, start + pageSize.value)
-})
-
-const handlePagination = () => {
-  if (!total.value) {
-    pageNo.value = 1
-    return
+const toGroupMap = (value: any): Record<string, any[]> => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return {}
+  }
+  const entries = Object.entries(value).filter(([, v]) => Array.isArray(v))
+  if (!entries.length) {
+    return {}
   }
-  const maxPageNo = Math.max(1, Math.ceil(total.value / pageSize.value))
-  if (pageNo.value > maxPageNo) {
-    pageNo.value = maxPageNo
+  const map: Record<string, any[]> = {}
+  for (const [k, v] of entries) {
+    map[k] = v as any[]
   }
+  return map
 }
 
-const getRowKey = (row: MonitorRow, index: number) => {
-  return row.pointCode || row.pointName || `${index}`
-}
-
-const formatLatestValue = (value: unknown) => {
-  if (value === null) {
-    return 'null'
-  }
-  if (value === undefined) {
+const displayTime = computed(() => {
+  if (!props.collectionTime) {
     return '-'
   }
-  if (typeof value === 'string' || typeof value === 'number') {
+  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 ''
-}
+  return formatDate(date)
+})
 
-const normalizeRows = (raw: any[]): MonitorRow[] => {
-  return raw.map((item: any) => {
-    return {
-      pointCode: item?.pointCode ?? item?.attributeCode ?? item?.code ?? '',
-      pointName: item?.pointName ?? item?.attributeName ?? item?.name ?? '',
-      dataType: item?.dataType ?? '',
-      address: item?.address ?? '',
-      addressValue: item?.addressValue ?? item?.latestValue ?? item?.value,
-      ratio: item?.ratio ?? null,
-      unit: item?.unit ?? item?.dataUnit ?? '',
-      latestCollectTime:
-        item?.latestCollectTime ?? item?.latestCollectionTime ?? item?.collectionTime ?? item?.collectTime ?? ''
-    }
-  })
+const headerCellStyle = () => {
+  return {
+    fontWeight: 500,
+    padding: '6px 4px'
+  }
 }
 
-const toGroupMap = (value: any): Record<string, any[]> => {
-  if (!value || typeof value !== 'object' || Array.isArray(value)) {
-    return {}
+const bodyCellStyle = () => {
+  return {
+    padding: '4px 4px'
   }
-  const entries = Object.entries(value).filter(([, v]) => Array.isArray(v))
-  if (!entries.length) {
-    return {}
+}
+
+const formatCell = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined) {
+    return ''
   }
-  const map: Record<string, any[]> = {}
-  for (const [k, v] of entries) {
-    map[k] = v as any[]
+  return value
+}
+
+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 map
+  return result
 }
 
 const fetchList = async () => {
   if (props.deviceId === undefined || props.deviceId === null || props.deviceId === '') {
-    groupRawMap.value = {}
-    selectedGroupKey.value = ''
+    sections.value = []
     return
   }
   loading.value = true
@@ -178,13 +161,11 @@ const fetchList = async () => {
     const groups = Array.isArray(res)
       ? { 默认: res }
       : {
-          ...toGroupMap(res?.data),
-          ...toGroupMap(res?.data?.data),
-          ...toGroupMap(res)
-        }
-    groupRawMap.value = groups
-    selectedGroupKey.value = Object.keys(groups)[0] ?? ''
-    pageNo.value = 1
+        ...toGroupMap(res?.data),
+        ...toGroupMap(res?.data?.data),
+        ...toGroupMap(res)
+      }
+    sections.value = buildSectionsFromGroups(groups)
   } finally {
     loading.value = false
   }
@@ -199,20 +180,36 @@ watch(
     fetchList()
   }
 )
+</script>
 
-watch(
-  () => selectedGroupKey.value,
-  () => {
-    pageNo.value = 1
-    handlePagination()
-  }
-)
+<style scoped>
+.single-device-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
 
-watch(
-  () => pageSize.value,
-  () => {
-    pageNo.value = 1
-    handlePagination()
-  }
-)
-</script>
+.single-device-dialog__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+}
+
+.single-device-dialog__table-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.single-device-dialog__section-title {
+  font-size: 13px;
+  margin-bottom: 4px;
+  color: var(--el-text-color-primary);
+}
+
+.single-device-dialog__section :deep(.el-table__inner-wrapper) {
+  border-radius: 0;
+}
+</style>

src/views/iot/realTimeMonitoring/index.vue

@@ -59,6 +59,7 @@ v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @
     v-model="monitorDialogVisible"
     :device-id="monitorDeviceId"
     :device-name="monitorDeviceName"
+    :collection-time="monitorCollectionTime"
   />
 </template>
 
@@ -91,6 +92,7 @@ const queryFormRef = ref() // 搜索的表单
 const monitorDialogVisible = ref(false)
 const monitorDeviceId = ref<string | number>()
 const monitorDeviceName = ref<string>()
+const monitorCollectionTime = ref<string | number>()
 
 const buildQueryParams = (): Parameters<typeof DeviceApi.getLineDevicePage>[0] => {
   const params: Parameters<typeof DeviceApi.getLineDevicePage>[0] = {
@@ -137,25 +139,11 @@ const handleSingleMonitor = (row: LineDeviceVO) => {
   }
   monitorDeviceId.value = deviceId
   monitorDeviceName.value = row?.deviceName ?? ''
+  monitorCollectionTime.value = row?.collectionTime
   monitorDialogVisible.value = true
 }
 
-let timer: any = null
-
 onMounted(() => {
   getList()
-  timer = setInterval(async () => {
-    try {
-      const data = await DeviceApi.getLineDevicePage(buildQueryParams())
-      list.value = data.list
-      total.value = data.total
-    } catch { }
-  }, 5000)
-})
-
-onUnmounted(() => {
-  if (timer) {
-    clearInterval(timer)
-  }
 })
 </script>