feat：数据实时监控-添加单设备监控弹窗，数据mock

src/views/iot/realTimeMonitoring/index.vue

@@ -85,6 +85,35 @@
       @pagination="getList"
     />
   </ContentWrap>
+
+  <Dialog v-model="monitorDialogVisible" :title="monitorDialogTitle" width="900">
+    <ContentWrap>
+      <el-table
+        v-loading="monitorLoading"
+        :data="monitorList"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        row-key="pointCode"
+      >
+        <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="latestValue" width="120px">
+          <template #default="scope">
+            {{ scope.row.latestValue === null ? 'null' : scope.row.latestValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="单位" align="center" prop="unit" width="100px" />
+        <el-table-column
+          label="最新采集时间"
+          align="center"
+          prop="latestCollectTime"
+          :formatter="dateFormatter"
+          width="180px"
+        />
+      </el-table>
+    </ContentWrap>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -94,9 +123,6 @@ import { DeviceApi, LineDeviceVO } from '@/api/iot/device'
 
 defineOptions({ name: 'RealTimeMonitoring' })
 
-const message = useMessage()
-const router = useRouter()
-
 const loading = ref(true)
 const list = ref<LineDeviceVO[]>([])
 const total = ref(0)
@@ -113,6 +139,88 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
+type MonitorRow = {
+  pointCode: string
+  pointName: string
+  dataType: string
+  latestValue: any
+  unit: string
+  latestCollectTime: string
+}
+
+const monitorDialogVisible = ref(false)
+const monitorDialogTitle = ref('单设备监控')
+const monitorLoading = ref(false)
+const monitorList = ref<MonitorRow[]>([])
+
+const buildMockCollectTime = (hour: number, minute: number, second: number) => {
+  const hh = String(hour).padStart(2, '0')
+  const mm = String(minute).padStart(2, '0')
+  const ss = String(second).padStart(2, '0')
+  return `2025-11-25 ${hh}:${mm}:${ss}`
+}
+
+const buildMockMonitorList = () => {
+  return [
+    {
+      pointCode: 'state',
+      pointName: '运行状态',
+      dataType: 'bool',
+      latestValue: 100,
+      unit: '',
+      latestCollectTime: buildMockCollectTime(9, 16, 12)
+    },
+    {
+      pointCode: 'faultCode',
+      pointName: '故障代码',
+      dataType: 'int',
+      latestValue: null,
+      unit: '',
+      latestCollectTime: buildMockCollectTime(9, 16, 18)
+    },
+    {
+      pointCode: 'machineOutp',
+      pointName: '产量',
+      dataType: 'long',
+      latestValue: 100,
+      unit: '',
+      latestCollectTime: buildMockCollectTime(9, 16, 25)
+    },
+    {
+      pointCode: 'cycleTime',
+      pointName: '节拍(秒)',
+      dataType: 'int',
+      latestValue: 45,
+      unit: '',
+      latestCollectTime: buildMockCollectTime(9, 16, 31)
+    },
+    {
+      pointCode: 'goodCount',
+      pointName: '良品数',
+      dataType: 'long',
+      latestValue: 980,
+      unit: '',
+      latestCollectTime: buildMockCollectTime(9, 16, 36)
+    },
+    {
+      pointCode: 'rejectCount',
+      pointName: '不良数',
+      dataType: 'long',
+      latestValue: 12,
+      unit: '',
+      latestCollectTime: buildMockCollectTime(9, 16, 42)
+    },
+    {
+      pointCode: 'alarmFlag',
+      pointName: '报警标识',
+      dataType: 'bool',
+      latestValue: 0,
+      unit: '',
+      latestCollectTime: buildMockCollectTime(9, 16, 49)
+    }
+  ] as MonitorRow[]
+}
+
 const buildQueryParams = () => {
   const params: Record<string, any> = {
     pageNo: queryParams.pageNo,
@@ -150,14 +258,14 @@ const resetQuery = () => {
   handleQuery()
 }
 
-const handleSingleMonitor = async (row: LineDeviceVO) => {
+const handleSingleMonitor = (row: LineDeviceVO) => {
+  monitorDialogTitle.value = row?.deviceName ? `单设备监控：${row.deviceName}` : '单设备监控'
+  monitorLoading.value = true
+  monitorDialogVisible.value = true
   try {
-    await router.push({
-      name: 'MqttDataRecord',
-      query: { deviceName: row.deviceName }
-    })
-  } catch {
-    message.info('单设备监控页面未配置')
+    monitorList.value = buildMockMonitorList()
+  } finally {
+    monitorLoading.value = false
   }
 }