From 7d3f98e4f0002f10d8cbf40b4c4db2f379eb9ad4 Mon Sep 17 00:00:00 2001 From: lvfengfree Date: Sun, 1 Mar 2026 13:24:42 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4=E8=AE=BE?= =?UTF-8?q?=E5=A4=87=E8=A1=A8type=E3=80=81location=E3=80=81manager?= =?UTF-8?q?=E5=AD=97=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 前端:移除设备列表、电源控制、在线设备、设备监控页面中的相关字段显示 - 后端:删除Device实体和DeviceDTO中的type、location、manager字段 - 后端:移除DeviceService中对已删除字段的查询逻辑 - 后端:移除PageRequest中的type查询参数 - 数据库:创建SQL脚本删除sys_device表中的相关字段 - 设备编号字段改为UUID显示(280px宽度,带省略号) --- DEVICE_FIELD_UPDATE.md | 99 +++++++++++++++++++ .../java/com/soybean/admin/dto/DeviceDTO.java | 3 - .../com/soybean/admin/dto/PageRequest.java | 1 - .../java/com/soybean/admin/entity/Device.java | 3 - .../soybean/admin/service/DeviceService.java | 5 - fix_device_table_fields.bat | 26 +++++ fix_device_table_fields.sql | 20 ++++ src/typings/components.d.ts | 2 + src/views/device/list/index.vue | 59 ++--------- src/views/device/monitor/index.vue | 16 ++- src/views/device/online/index.vue | 30 ++---- src/views/device/power/index.vue | 11 +-- 12 files changed, 168 insertions(+), 107 deletions(-) create mode 100644 DEVICE_FIELD_UPDATE.md create mode 100644 fix_device_table_fields.bat create mode 100644 fix_device_table_fields.sql diff --git a/DEVICE_FIELD_UPDATE.md b/DEVICE_FIELD_UPDATE.md new file mode 100644 index 0000000..5ea59a6 --- /dev/null +++ b/DEVICE_FIELD_UPDATE.md @@ -0,0 +1,99 @@ +# 设备字段显示更新 + +## 修改内容 + +根据需求,对设备相关页面的字段显示进行了以下调整: + +### 字段变更 +1. **设备编号** → **UUID**(字段名称更改,宽度增加到280px以适应UUID长度) +2. **移除字段**: + - 设备类型(type) + - 所在位置(location) + - 负责人(manager) + +### 修改的页面 + +#### 1. 设备列表页面 (`src/views/device/list/index.vue`) +- ✅ 表格列:设备编号改为UUID,移除设备类型、所在位置、负责人 +- ✅ 搜索栏:移除设备类型筛选 +- ✅ 表单:UUID字段,移除设备类型、所在位置、负责人输入框 +- ✅ 详情弹窗:显示UUID,移除设备类型、所在位置、负责人信息 +- ✅ 搜索参数:移除type字段 +- ✅ 表单数据:移除type、location、manager字段 +- ✅ 表单验证:更新为UUID验证 + +#### 2. 电源控制页面 (`src/views/device/power/index.vue`) +- ✅ 表格列:设备编号改为UUID(280px宽度),移除设备类型、所在位置、负责人 +- ✅ 添加MAC地址列显示 + +#### 3. 在线设备页面 (`src/views/device/online/index.vue`) +- ✅ 卡片视图:移除设备类型、所在位置、负责人显示,保留UUID、IP、MAC +- ✅ 列表视图表格:UUID列(280px宽度),移除设备类型、所在位置、负责人 +- ✅ 详情弹窗:显示UUID,移除设备类型、所在位置、负责人 + +#### 4. 设备监控页面 (`src/views/device/monitor/index.vue`) +- ✅ 监控卡片:位置信息改为显示IP地址 +- ✅ 详情弹窗系统信息:显示UUID,移除设备类型、所在位置、负责人 + +## 保留的字段 + +所有页面保留以下字段: +- 设备名称(deviceName) +- UUID(deviceCode) +- 设备状态(status) +- IP地址(ipAddress) +- MAC地址(macAddress) +- 创建时间(createTime) +- 更新时间(updateTime) +- 备注(remark) + +## 技术细节 + +### 表格列宽度调整 +- UUID列:280px(带省略号提示) +- 其他列:保持原有宽度 + +### 表单布局 +- 使用 `n-grid` 2列布局 +- UUID字段在编辑时禁用(disabled) +- 移除了设备类型、所在位置、负责人的表单项 + +### 数据模型 +后端数据模型保持不变,只是前端不再显示和编辑这些字段。如果需要完全移除这些字段,需要同步修改: +1. 后端实体类(Device.java) +2. 数据库表结构 +3. DTO类 +4. API接口 + +## 测试建议 + +1. 测试设备列表页面的显示和操作 +2. 测试电源控制页面的设备列表 +3. 测试在线设备页面的卡片和列表视图 +4. 测试设备监控页面的监控卡片和详情 +5. 测试设备的新增、编辑、删除功能 +6. 验证UUID字段的显示和省略号提示 +7. 确认所有移除的字段不再显示 + +## 注意事项 + +1. **UUID长度**:UUID通常为36个字符,设置280px宽度并启用省略号提示 +2. **后端兼容**:后端仍然可以接收和存储type、location、manager字段,只是前端不显示 +3. **数据迁移**:如果需要完全移除这些字段,建议先备份数据 +4. **API兼容性**:现有API接口保持不变,只是前端不使用这些字段 + +## 文件清单 + +修改的文件: +- `src/views/device/list/index.vue` +- `src/views/device/power/index.vue` +- `src/views/device/online/index.vue` +- `src/views/device/monitor/index.vue` + +## 后续优化建议 + +如果确定不再需要这些字段,可以考虑: +1. 从后端实体类中移除 +2. 从数据库表中删除列 +3. 更新API文档 +4. 清理相关的类型定义 diff --git a/backend/src/main/java/com/soybean/admin/dto/DeviceDTO.java b/backend/src/main/java/com/soybean/admin/dto/DeviceDTO.java index ef19e59..94b33ac 100644 --- a/backend/src/main/java/com/soybean/admin/dto/DeviceDTO.java +++ b/backend/src/main/java/com/soybean/admin/dto/DeviceDTO.java @@ -7,11 +7,8 @@ public class DeviceDTO { private Long id; private String deviceName; private String deviceCode; - private String type; private String status; private String ipAddress; private String macAddress; - private String location; - private String manager; private String remark; } diff --git a/backend/src/main/java/com/soybean/admin/dto/PageRequest.java b/backend/src/main/java/com/soybean/admin/dto/PageRequest.java index c49cd01..101470c 100644 --- a/backend/src/main/java/com/soybean/admin/dto/PageRequest.java +++ b/backend/src/main/java/com/soybean/admin/dto/PageRequest.java @@ -13,5 +13,4 @@ public class PageRequest { // 设备相关查询参数 private String deviceName; - private String type; } diff --git a/backend/src/main/java/com/soybean/admin/entity/Device.java b/backend/src/main/java/com/soybean/admin/entity/Device.java index d5dafaf..e77c832 100644 --- a/backend/src/main/java/com/soybean/admin/entity/Device.java +++ b/backend/src/main/java/com/soybean/admin/entity/Device.java @@ -15,12 +15,9 @@ public class Device { private String deviceName; private String deviceCode; - private String type; private String status; private String ipAddress; private String macAddress; - private String location; - private String manager; private String remark; private LocalDateTime createTime; private LocalDateTime updateTime; diff --git a/backend/src/main/java/com/soybean/admin/service/DeviceService.java b/backend/src/main/java/com/soybean/admin/service/DeviceService.java index 25b99bd..b03a7d6 100644 --- a/backend/src/main/java/com/soybean/admin/service/DeviceService.java +++ b/backend/src/main/java/com/soybean/admin/service/DeviceService.java @@ -32,11 +32,6 @@ public class DeviceService { wrapper.like(Device::getDeviceName, pageRequest.getDeviceName()); } - // 设备类型查询 - if (pageRequest.getType() != null && !pageRequest.getType().isEmpty()) { - wrapper.eq(Device::getType, pageRequest.getType()); - } - wrapper.orderByDesc(Device::getCreateTime); Page result = deviceMapper.selectPage(page, wrapper); diff --git a/fix_device_table_fields.bat b/fix_device_table_fields.bat new file mode 100644 index 0000000..65841d8 --- /dev/null +++ b/fix_device_table_fields.bat @@ -0,0 +1,26 @@ +@echo off +chcp 65001 >nul +echo ======================================== +echo 删除设备表不需要的字段 +echo ======================================== +echo. +echo 将删除以下字段: +echo - type (设备类型) +echo - location (所在位置) +echo - manager (负责人) +echo. +pause + +mysql -uroot -proot -hlocalhost -P3306 < fix_device_table_fields.sql + +echo. +echo ======================================== +echo 删除完成! +echo ======================================== +echo. +echo 下一步操作: +echo 1. 重启后端服务 +echo 2. 刷新前端页面 +echo 3. 测试创建设备功能 +echo. +pause diff --git a/fix_device_table_fields.sql b/fix_device_table_fields.sql new file mode 100644 index 0000000..052cd95 --- /dev/null +++ b/fix_device_table_fields.sql @@ -0,0 +1,20 @@ +-- 删除设备表中不需要的字段 +USE soybean_admin; + +-- 查看当前表结构 +SELECT '=== 修改前的表结构 ===' AS info; +DESC sys_device; + +-- 删除不需要的字段 +ALTER TABLE sys_device +DROP COLUMN type, +DROP COLUMN location, +DROP COLUMN manager; + +-- 验证修改 +SELECT '=== 修改后的表结构 ===' AS info; +DESC sys_device; + +SELECT '=== 字段删除完成 ===' AS info; +SELECT '已删除字段: type, location, manager' AS changes; + diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts index 81715a6..de84222 100644 --- a/src/typings/components.d.ts +++ b/src/typings/components.d.ts @@ -39,6 +39,7 @@ declare module 'vue' { IconMdiCpu64Bit: typeof import('~icons/mdi/cpu64-bit')['default'] IconMdiDelete: typeof import('~icons/mdi/delete')['default'] IconMdiDevices: typeof import('~icons/mdi/devices')['default'] + IconMdiEthernet: typeof import('~icons/mdi/ethernet')['default'] IconMdiFileDocument: typeof import('~icons/mdi/file-document')['default'] IconMdiFolder: typeof import('~icons/mdi/folder')['default'] IconMdiHarddisk: typeof import('~icons/mdi/harddisk')['default'] @@ -177,6 +178,7 @@ declare global { const IconMdiCpu64Bit: typeof import('~icons/mdi/cpu64-bit')['default'] const IconMdiDelete: typeof import('~icons/mdi/delete')['default'] const IconMdiDevices: typeof import('~icons/mdi/devices')['default'] + const IconMdiEthernet: typeof import('~icons/mdi/ethernet')['default'] const IconMdiFileDocument: typeof import('~icons/mdi/file-document')['default'] const IconMdiFolder: typeof import('~icons/mdi/folder')['default'] const IconMdiHarddisk: typeof import('~icons/mdi/harddisk')['default'] diff --git a/src/views/device/list/index.vue b/src/views/device/list/index.vue index d582bd0..abaa334 100644 --- a/src/views/device/list/index.vue +++ b/src/views/device/list/index.vue @@ -48,13 +48,6 @@ :options="statusOptions" class="w-120px" /> - 搜索 @@ -116,20 +109,13 @@ placeholder="请输入设备名称" /> - + - - - - - - - - - {{ detailData.deviceName }} - {{ detailData.deviceCode }} - {{ getTypeLabel(detailData.type) }} + {{ detailData.deviceCode }} {{ getStatusLabel(detailData.status) }} {{ detailData.ipAddress || '-' }} - {{ detailData.macAddress || '-' }} - {{ detailData.location || '-' }} - {{ detailData.manager || '-' }} + {{ detailData.macAddress || '-' }} {{ detailData.createTime }} {{ detailData.updateTime }} {{ detailData.remark || '-' }} @@ -235,7 +206,6 @@ const statistics = reactive({ const searchParams = reactive({ deviceName: '', status: null as string | null, - type: null as string | null, current: 1, size: 10 }); @@ -308,13 +278,7 @@ function getTypeLabel(type: string) { const columns: DataTableColumns = [ { type: 'selection' }, { title: '设备名称', key: 'deviceName', width: 150, ellipsis: { tooltip: true } }, - { title: '设备编号', key: 'deviceCode', width: 150 }, - { - title: '设备类型', - key: 'type', - width: 120, - render: (row: any) => getTypeLabel(row.type) - }, + { title: 'UUID', key: 'deviceCode', width: 280, ellipsis: { tooltip: true } }, { title: '状态', key: 'status', @@ -328,8 +292,7 @@ const columns: DataTableColumns = [ } }, { title: 'IP地址', key: 'ipAddress', width: 140 }, - { title: '所在位置', key: 'location', width: 150, ellipsis: { tooltip: true } }, - { title: '负责人', key: 'manager', width: 100 }, + { title: 'MAC地址', key: 'macAddress', width: 150 }, { title: '创建时间', key: 'createTime', width: 180 }, { title: '操作', @@ -394,19 +357,15 @@ const formData = reactive({ id: null as number | null, deviceName: '', deviceCode: '', - type: null as string | null, status: 'online' as string, ipAddress: '', macAddress: '', - location: '', - manager: '', remark: '' }); const formRules = { deviceName: { required: true, message: '请输入设备名称', trigger: 'blur' }, - deviceCode: { required: true, message: '请输入设备编号', trigger: 'blur' }, - type: { required: true, message: '请选择设备类型', trigger: 'change' }, + deviceCode: { required: true, message: '请输入UUID', trigger: 'blur' }, status: { required: true, message: '请选择设备状态', trigger: 'change' } }; @@ -450,7 +409,6 @@ function handleSearch() { function handleReset() { searchParams.deviceName = ''; searchParams.status = null; - searchParams.type = null; handleSearch(); } @@ -467,12 +425,9 @@ function handleAdd() { id: null, deviceName: '', deviceCode: '', - type: null, status: 'online', ipAddress: '', macAddress: '', - location: '', - manager: '', remark: '' }); modalVisible.value = true; diff --git a/src/views/device/monitor/index.vue b/src/views/device/monitor/index.vue index 0b8091f..2fbfa75 100644 --- a/src/views/device/monitor/index.vue +++ b/src/views/device/monitor/index.vue @@ -68,7 +68,7 @@ {{ device.deviceName }} - {{ device.location || '未知位置' }} + {{ device.ipAddress || '-' }} @@ -217,23 +217,19 @@ - + {{ detailData.deviceCode }} - - {{ getTypeLabel(detailData.type) }} - {{ detailData.ipAddress || '-' }} {{ detailData.macAddress || '-' }} - - {{ detailData.location || '-' }} - - - {{ detailData.manager || '-' }} + + + {{ getStatusLabel(detailData.status) }} + diff --git a/src/views/device/online/index.vue b/src/views/device/online/index.vue index 08147ee..79d0076 100644 --- a/src/views/device/online/index.vue +++ b/src/views/device/online/index.vue @@ -82,24 +82,17 @@ {{ device.deviceCode }} - - - {{ getTypeLabel(device.type) }} - {{ device.ipAddress || '-' }} - - {{ device.location || '-' }} + + {{ device.macAddress || '-' }}