From 259f7d002efa889df63a57f81da94b6ae7e0b96f Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Sun, 4 Jan 2026 17:26:25 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E4=BB=A3=E7=A0=81=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ModelAttributeList.vue         |  18 ++-
 src/views/iot/devicemodel/index.vue           |  21 ++-
 src/views/iot/realTimeMonitoring/index.vue    | 124 +++---------------
 3 files changed, 43 insertions(+), 120 deletions(-)

diff --git a/src/views/iot/devicemodel/components/ModelAttributeList.vue b/src/views/iot/devicemodel/components/ModelAttributeList.vue
index defc8605..83e6a8a2 100644
--- a/src/views/iot/devicemodel/components/ModelAttributeList.vue
+++ b/src/views/iot/devicemodel/components/ModelAttributeList.vue
@@ -3,11 +3,13 @@
     <!-- 搜索工作栏 -->
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
       <el-form-item label="点位编码" prop="attributeCode">
-        <el-input v-model="queryParams.attributeCode" placeholder="请输入点位编码" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.attributeCode" placeholder="请输入点位编码" clearable @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
       <el-form-item label="点位名称" prop="attributeName">
-        <el-input v-model="queryParams.attributeName" placeholder="请输入点位名称" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.attributeName" placeholder="请输入点位名称" clearable @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
       <el-form-item label="点位类型" prop="attributeType">
@@ -45,7 +47,8 @@
         <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['iot:device-model:create']">
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
-        <el-button type="success" plain @click="handleExport" :loading="exportLoading"
+        <el-button
+type="success" plain @click="handleExport" :loading="exportLoading"
           v-hasPermi="['iot:device-model:export']">
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -59,7 +62,8 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
+    <el-table
+ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
       @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" reserve-selection />
       <!-- <el-table-column label="ID" align="center" prop="id" /> -->
@@ -75,7 +79,8 @@
       <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
       <el-table-column label="操作" align="center" width="150px" fixed="right">
         <template #default="scope">
-          <el-button link type="primary" @click="openForm('update', scope.row.id)"
+          <el-button
+link type="primary" @click="openForm('update', scope.row.id)"
             v-hasPermi="['iot:device-model:update']">
             编辑
           </el-button>
@@ -86,7 +91,8 @@
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+    <Pagination
+:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </ContentWrap>
 
diff --git a/src/views/iot/devicemodel/index.vue b/src/views/iot/devicemodel/index.vue
index f81da142..d7de7ec8 100644
--- a/src/views/iot/devicemodel/index.vue
+++ b/src/views/iot/devicemodel/index.vue
@@ -3,17 +3,20 @@
     <!-- 搜索工作栏 -->
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
       <el-form-item label="模型编码" prop="code">
-        <el-input v-model="queryParams.code" placeholder="请输入模型编码" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.code" placeholder="请输入模型编码" clearable @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
       <el-form-item label="模型名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.name" placeholder="请输入模型名称" clearable @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
 
       <el-form-item label="通讯协议" prop="protocol">
         <el-select v-model="queryParams.protocol" placeholder="请选择通讯协议" clearable class="!w-240px">
-          <el-option v-for="dict in getStrDictOptions(DICT_TYPE.IOT_PROTOCOL)" :key="dict.value" :label="dict.label"
+          <el-option
+v-for="dict in getStrDictOptions(DICT_TYPE.IOT_PROTOCOL)" :key="dict.value" :label="dict.label"
             :value="dict.value" />
         </el-select>
       </el-form-item>
@@ -51,7 +54,8 @@
         <el-button type="danger" plain @click="handleBatchDelete" v-hasPermi="['iot:device-model:delete']">
           <Icon icon="ep:delete" class="mr-5px" /> 批量删除
         </el-button>
-        <el-button type="success" plain @click="handleExport" :loading="exportLoading"
+        <el-button
+type="success" plain @click="handleExport" :loading="exportLoading"
           v-hasPermi="['iot:device-model:export']">
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -61,7 +65,8 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
+    <el-table
+ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
       highlight-current-row row-key="id" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" reserve-selection />
       <el-table-column label="模型编码" align="center" prop="code" />
@@ -79,7 +84,8 @@
           <el-button link type="primary" @click="handleCopy(scope.row.id)" v-hasPermi="['iot:device-model:create']">
             复制
           </el-button>
-          <el-button link type="primary" @click="openForm('update', scope.row.id)"
+          <el-button
+link type="primary" @click="openForm('update', scope.row.id)"
             v-hasPermi="['iot:device-model:update']">
             编辑
           </el-button>
@@ -90,7 +96,8 @@
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+    <Pagination
+:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </ContentWrap>
 
diff --git a/src/views/iot/realTimeMonitoring/index.vue b/src/views/iot/realTimeMonitoring/index.vue
index dec6cd40..a85de6ae 100644
--- a/src/views/iot/realTimeMonitoring/index.vue
+++ b/src/views/iot/realTimeMonitoring/index.vue
@@ -55,35 +55,23 @@ v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @
       @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>
+  <SingleDeviceMonitorDialog
+    v-model="monitorDialogVisible"
+    :device-id="monitorDeviceId"
+    :device-name="monitorDeviceName"
+  />
 </template>
 
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import { DeviceApi, LineDeviceVO } from '@/api/iot/device'
+import SingleDeviceMonitorDialog from './SingleDeviceMonitorDialog.vue'
 
 defineOptions({ name: 'RealTimeMonitoring' })
 
+const message = useMessage()
+
 const loading = ref(true)
 const list = ref<LineDeviceVO[]>([])
 const total = ref(0)
@@ -100,87 +88,9 @@ 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 monitorDeviceId = ref<string | number>()
+const monitorDeviceName = ref<string>()
 
 const buildQueryParams = (): Parameters<typeof DeviceApi.getLineDevicePage>[0] => {
   const params: Parameters<typeof DeviceApi.getLineDevicePage>[0] = {
@@ -220,14 +130,14 @@ const resetQuery = () => {
 }
 
 const handleSingleMonitor = (row: LineDeviceVO) => {
-  monitorDialogTitle.value = row?.deviceName ? `单设备监控：${row.deviceName}` : '单设备监控'
-  monitorLoading.value = true
-  monitorDialogVisible.value = true
-  try {
-    monitorList.value = buildMockMonitorList()
-  } finally {
-    monitorLoading.value = false
+  const deviceId = (row as any)?.deviceId ?? row?.id
+  if (deviceId === undefined || deviceId === null || deviceId === '') {
+    message.error('设备信息不完整')
+    return
   }
+  monitorDeviceId.value = deviceId
+  monitorDeviceName.value = row?.deviceName ?? ''
+  monitorDialogVisible.value = true
 }
 
 let timer: any = null