feat：数据实时监控-单设备监控对接接口

src/views/iot/realTimeMonitoring/SingleDeviceMonitorDialog.vue

@@ -0,0 +1,218 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } 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
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  deviceId?: string | number
+  deviceName?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const dialogVisible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: boolean) {
+    emit('update:modelValue', value)
+  }
+})
+
+const dialogTitle = computed(() => {
+  return props.deviceName ? `设备名称：${props.deviceName}` : '单设备监控'
+})
+
+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 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 maxPageNo = Math.max(1, Math.ceil(total.value / pageSize.value))
+  if (pageNo.value > maxPageNo) {
+    pageNo.value = maxPageNo
+  }
+}
+
+const getRowKey = (row: MonitorRow, index: number) => {
+  return row.pointCode || row.pointName || `${index}`
+}
+
+const formatLatestValue = (value: unknown) => {
+  if (value === null) {
+    return 'null'
+  }
+  if (value === undefined) {
+    return '-'
+  }
+  if (typeof value === 'string' || typeof value === 'number') {
+    return value
+  }
+  return ''
+}
+
+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 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 map: Record<string, any[]> = {}
+  for (const [k, v] of entries) {
+    map[k] = v as any[]
+  }
+  return map
+}
+
+const fetchList = async () => {
+  if (props.deviceId === undefined || props.deviceId === null || props.deviceId === '') {
+    groupRawMap.value = {}
+    selectedGroupKey.value = ''
+    return
+  }
+  loading.value = true
+  try {
+    const res: any = await DeviceApi.getSingleDevice({ deviceId: props.deviceId })
+    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
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => [props.modelValue, props.deviceId],
+  ([visible]) => {
+    if (!visible) {
+      return
+    }
+    fetchList()
+  }
+)
+
+watch(
+  () => selectedGroupKey.value,
+  () => {
+    pageNo.value = 1
+    handlePagination()
+  }
+)
+
+watch(
+  () => pageSize.value,
+  () => {
+    pageNo.value = 1
+    handlePagination()
+  }
+)
+</script>