refactor: 删除设备表type、location、manager字段

- 前端:移除设备列表、电源控制、在线设备、设备监控页面中的相关字段显示
- 后端:删除Device实体和DeviceDTO中的type、location、manager字段
- 后端:移除DeviceService中对已删除字段的查询逻辑
- 后端:移除PageRequest中的type查询参数
- 数据库:创建SQL脚本删除sys_device表中的相关字段
- 设备编号字段改为UUID显示(280px宽度,带省略号)
This commit is contained in:
lvfengfree 2026-03-01 13:24:42 +08:00
parent fd124d1017
commit 7d3f98e4f0
12 changed files with 168 additions and 107 deletions

99
DEVICE_FIELD_UPDATE.md Normal file
View File

@ -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`)
- ✅ 表格列设备编号改为UUID280px宽度移除设备类型、所在位置、负责人
- ✅ 添加MAC地址列显示
#### 3. 在线设备页面 (`src/views/device/online/index.vue`)
- ✅ 卡片视图移除设备类型、所在位置、负责人显示保留UUID、IP、MAC
- ✅ 列表视图表格UUID列280px宽度移除设备类型、所在位置、负责人
- ✅ 详情弹窗显示UUID移除设备类型、所在位置、负责人
#### 4. 设备监控页面 (`src/views/device/monitor/index.vue`)
- ✅ 监控卡片位置信息改为显示IP地址
- ✅ 详情弹窗系统信息显示UUID移除设备类型、所在位置、负责人
## 保留的字段
所有页面保留以下字段:
- 设备名称deviceName
- UUIDdeviceCode
- 设备状态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. 清理相关的类型定义

View File

@ -7,11 +7,8 @@ public class DeviceDTO {
private Long id; private Long id;
private String deviceName; private String deviceName;
private String deviceCode; private String deviceCode;
private String type;
private String status; private String status;
private String ipAddress; private String ipAddress;
private String macAddress; private String macAddress;
private String location;
private String manager;
private String remark; private String remark;
} }

View File

@ -13,5 +13,4 @@ public class PageRequest {
// 设备相关查询参数 // 设备相关查询参数
private String deviceName; private String deviceName;
private String type;
} }

View File

@ -15,12 +15,9 @@ public class Device {
private String deviceName; private String deviceName;
private String deviceCode; private String deviceCode;
private String type;
private String status; private String status;
private String ipAddress; private String ipAddress;
private String macAddress; private String macAddress;
private String location;
private String manager;
private String remark; private String remark;
private LocalDateTime createTime; private LocalDateTime createTime;
private LocalDateTime updateTime; private LocalDateTime updateTime;

View File

@ -32,11 +32,6 @@ public class DeviceService {
wrapper.like(Device::getDeviceName, pageRequest.getDeviceName()); wrapper.like(Device::getDeviceName, pageRequest.getDeviceName());
} }
// 设备类型查询
if (pageRequest.getType() != null && !pageRequest.getType().isEmpty()) {
wrapper.eq(Device::getType, pageRequest.getType());
}
wrapper.orderByDesc(Device::getCreateTime); wrapper.orderByDesc(Device::getCreateTime);
Page<Device> result = deviceMapper.selectPage(page, wrapper); Page<Device> result = deviceMapper.selectPage(page, wrapper);

View File

@ -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

View File

@ -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;

View File

@ -39,6 +39,7 @@ declare module 'vue' {
IconMdiCpu64Bit: typeof import('~icons/mdi/cpu64-bit')['default'] IconMdiCpu64Bit: typeof import('~icons/mdi/cpu64-bit')['default']
IconMdiDelete: typeof import('~icons/mdi/delete')['default'] IconMdiDelete: typeof import('~icons/mdi/delete')['default']
IconMdiDevices: typeof import('~icons/mdi/devices')['default'] IconMdiDevices: typeof import('~icons/mdi/devices')['default']
IconMdiEthernet: typeof import('~icons/mdi/ethernet')['default']
IconMdiFileDocument: typeof import('~icons/mdi/file-document')['default'] IconMdiFileDocument: typeof import('~icons/mdi/file-document')['default']
IconMdiFolder: typeof import('~icons/mdi/folder')['default'] IconMdiFolder: typeof import('~icons/mdi/folder')['default']
IconMdiHarddisk: typeof import('~icons/mdi/harddisk')['default'] IconMdiHarddisk: typeof import('~icons/mdi/harddisk')['default']
@ -177,6 +178,7 @@ declare global {
const IconMdiCpu64Bit: typeof import('~icons/mdi/cpu64-bit')['default'] const IconMdiCpu64Bit: typeof import('~icons/mdi/cpu64-bit')['default']
const IconMdiDelete: typeof import('~icons/mdi/delete')['default'] const IconMdiDelete: typeof import('~icons/mdi/delete')['default']
const IconMdiDevices: typeof import('~icons/mdi/devices')['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 IconMdiFileDocument: typeof import('~icons/mdi/file-document')['default']
const IconMdiFolder: typeof import('~icons/mdi/folder')['default'] const IconMdiFolder: typeof import('~icons/mdi/folder')['default']
const IconMdiHarddisk: typeof import('~icons/mdi/harddisk')['default'] const IconMdiHarddisk: typeof import('~icons/mdi/harddisk')['default']

View File

@ -48,13 +48,6 @@
:options="statusOptions" :options="statusOptions"
class="w-120px" class="w-120px"
/> />
<n-select
v-model:value="searchParams.type"
placeholder="设备类型"
clearable
:options="typeOptions"
class="w-120px"
/>
<n-button type="primary" @click="handleSearch"> <n-button type="primary" @click="handleSearch">
<icon-mdi-magnify class="mr-4px text-16px" /> <icon-mdi-magnify class="mr-4px text-16px" />
搜索 搜索
@ -116,20 +109,13 @@
placeholder="请输入设备名称" placeholder="请输入设备名称"
/> />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi label="设备编号" path="deviceCode"> <n-form-item-gi label="UUID" path="deviceCode">
<n-input <n-input
v-model:value="formData.deviceCode" v-model:value="formData.deviceCode"
placeholder="请输入设备编号" placeholder="请输入UUID"
:disabled="isEdit" :disabled="isEdit"
/> />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi label="设备类型" path="type">
<n-select
v-model:value="formData.type"
:options="typeOptions"
placeholder="请选择设备类型"
/>
</n-form-item-gi>
<n-form-item-gi label="IP地址" path="ipAddress"> <n-form-item-gi label="IP地址" path="ipAddress">
<n-input <n-input
v-model:value="formData.ipAddress" v-model:value="formData.ipAddress"
@ -142,12 +128,6 @@
placeholder="请输入MAC地址" placeholder="请输入MAC地址"
/> />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi label="所在位置" path="location">
<n-input
v-model:value="formData.location"
placeholder="请输入所在位置"
/>
</n-form-item-gi>
<n-form-item-gi label="设备状态" path="status"> <n-form-item-gi label="设备状态" path="status">
<n-select <n-select
v-model:value="formData.status" v-model:value="formData.status"
@ -155,12 +135,6 @@
placeholder="请选择设备状态" placeholder="请选择设备状态"
/> />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi label="负责人" path="manager">
<n-input
v-model:value="formData.manager"
placeholder="请输入负责人"
/>
</n-form-item-gi>
</n-grid> </n-grid>
<n-form-item label="备注" path="remark"> <n-form-item label="备注" path="remark">
<n-input <n-input
@ -188,17 +162,14 @@
> >
<n-descriptions bordered :column="2"> <n-descriptions bordered :column="2">
<n-descriptions-item label="设备名称">{{ detailData.deviceName }}</n-descriptions-item> <n-descriptions-item label="设备名称">{{ detailData.deviceName }}</n-descriptions-item>
<n-descriptions-item label="设备编号">{{ detailData.deviceCode }}</n-descriptions-item> <n-descriptions-item label="UUID">{{ detailData.deviceCode }}</n-descriptions-item>
<n-descriptions-item label="设备类型">{{ getTypeLabel(detailData.type) }}</n-descriptions-item>
<n-descriptions-item label="设备状态"> <n-descriptions-item label="设备状态">
<n-tag :type="getStatusType(detailData.status)"> <n-tag :type="getStatusType(detailData.status)">
{{ getStatusLabel(detailData.status) }} {{ getStatusLabel(detailData.status) }}
</n-tag> </n-tag>
</n-descriptions-item> </n-descriptions-item>
<n-descriptions-item label="IP地址">{{ detailData.ipAddress || '-' }}</n-descriptions-item> <n-descriptions-item label="IP地址">{{ detailData.ipAddress || '-' }}</n-descriptions-item>
<n-descriptions-item label="MAC地址">{{ detailData.macAddress || '-' }}</n-descriptions-item> <n-descriptions-item label="MAC地址" :span="2">{{ detailData.macAddress || '-' }}</n-descriptions-item>
<n-descriptions-item label="所在位置">{{ detailData.location || '-' }}</n-descriptions-item>
<n-descriptions-item label="负责人">{{ detailData.manager || '-' }}</n-descriptions-item>
<n-descriptions-item label="创建时间" :span="2">{{ detailData.createTime }}</n-descriptions-item> <n-descriptions-item label="创建时间" :span="2">{{ detailData.createTime }}</n-descriptions-item>
<n-descriptions-item label="更新时间" :span="2">{{ detailData.updateTime }}</n-descriptions-item> <n-descriptions-item label="更新时间" :span="2">{{ detailData.updateTime }}</n-descriptions-item>
<n-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</n-descriptions-item> <n-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</n-descriptions-item>
@ -235,7 +206,6 @@ const statistics = reactive({
const searchParams = reactive({ const searchParams = reactive({
deviceName: '', deviceName: '',
status: null as string | null, status: null as string | null,
type: null as string | null,
current: 1, current: 1,
size: 10 size: 10
}); });
@ -308,13 +278,7 @@ function getTypeLabel(type: string) {
const columns: DataTableColumns = [ const columns: DataTableColumns = [
{ type: 'selection' }, { type: 'selection' },
{ title: '设备名称', key: 'deviceName', width: 150, ellipsis: { tooltip: true } }, { title: '设备名称', key: 'deviceName', width: 150, ellipsis: { tooltip: true } },
{ title: '设备编号', key: 'deviceCode', width: 150 }, { title: 'UUID', key: 'deviceCode', width: 280, ellipsis: { tooltip: true } },
{
title: '设备类型',
key: 'type',
width: 120,
render: (row: any) => getTypeLabel(row.type)
},
{ {
title: '状态', title: '状态',
key: 'status', key: 'status',
@ -328,8 +292,7 @@ const columns: DataTableColumns = [
} }
}, },
{ title: 'IP地址', key: 'ipAddress', width: 140 }, { title: 'IP地址', key: 'ipAddress', width: 140 },
{ title: '所在位置', key: 'location', width: 150, ellipsis: { tooltip: true } }, { title: 'MAC地址', key: 'macAddress', width: 150 },
{ title: '负责人', key: 'manager', width: 100 },
{ title: '创建时间', key: 'createTime', width: 180 }, { title: '创建时间', key: 'createTime', width: 180 },
{ {
title: '操作', title: '操作',
@ -394,19 +357,15 @@ const formData = reactive({
id: null as number | null, id: null as number | null,
deviceName: '', deviceName: '',
deviceCode: '', deviceCode: '',
type: null as string | null,
status: 'online' as string, status: 'online' as string,
ipAddress: '', ipAddress: '',
macAddress: '', macAddress: '',
location: '',
manager: '',
remark: '' remark: ''
}); });
const formRules = { const formRules = {
deviceName: { required: true, message: '请输入设备名称', trigger: 'blur' }, deviceName: { required: true, message: '请输入设备名称', trigger: 'blur' },
deviceCode: { required: true, message: '请输入设备编号', trigger: 'blur' }, deviceCode: { required: true, message: '请输入UUID', trigger: 'blur' },
type: { required: true, message: '请选择设备类型', trigger: 'change' },
status: { required: true, message: '请选择设备状态', trigger: 'change' } status: { required: true, message: '请选择设备状态', trigger: 'change' }
}; };
@ -450,7 +409,6 @@ function handleSearch() {
function handleReset() { function handleReset() {
searchParams.deviceName = ''; searchParams.deviceName = '';
searchParams.status = null; searchParams.status = null;
searchParams.type = null;
handleSearch(); handleSearch();
} }
@ -467,12 +425,9 @@ function handleAdd() {
id: null, id: null,
deviceName: '', deviceName: '',
deviceCode: '', deviceCode: '',
type: null,
status: 'online', status: 'online',
ipAddress: '', ipAddress: '',
macAddress: '', macAddress: '',
location: '',
manager: '',
remark: '' remark: ''
}); });
modalVisible.value = true; modalVisible.value = true;

View File

@ -68,7 +68,7 @@
{{ device.deviceName }} {{ device.deviceName }}
</n-ellipsis> </n-ellipsis>
<n-text depth="3" style="font-size: 12px"> <n-text depth="3" style="font-size: 12px">
{{ device.location || '未知位置' }} {{ device.ipAddress || '-' }}
</n-text> </n-text>
</div> </div>
</n-space> </n-space>
@ -217,23 +217,19 @@
<n-grid-item> <n-grid-item>
<n-card title="系统信息" :bordered="true" size="small"> <n-card title="系统信息" :bordered="true" size="small">
<n-descriptions :column="1" size="small" label-placement="left"> <n-descriptions :column="1" size="small" label-placement="left">
<n-descriptions-item label="设备编号"> <n-descriptions-item label="UUID">
{{ detailData.deviceCode }} {{ detailData.deviceCode }}
</n-descriptions-item> </n-descriptions-item>
<n-descriptions-item label="设备类型">
{{ getTypeLabel(detailData.type) }}
</n-descriptions-item>
<n-descriptions-item label="IP地址"> <n-descriptions-item label="IP地址">
{{ detailData.ipAddress || '-' }} {{ detailData.ipAddress || '-' }}
</n-descriptions-item> </n-descriptions-item>
<n-descriptions-item label="MAC地址"> <n-descriptions-item label="MAC地址">
{{ detailData.macAddress || '-' }} {{ detailData.macAddress || '-' }}
</n-descriptions-item> </n-descriptions-item>
<n-descriptions-item label="所在位置"> <n-descriptions-item label="设备状态">
{{ detailData.location || '-' }} <n-tag :type="getStatusType(detailData.status)">
</n-descriptions-item> {{ getStatusLabel(detailData.status) }}
<n-descriptions-item label="负责人"> </n-tag>
{{ detailData.manager || '-' }}
</n-descriptions-item> </n-descriptions-item>
</n-descriptions> </n-descriptions>
</n-card> </n-card>

View File

@ -82,24 +82,17 @@
<icon-mdi-identifier class="mr-4px" /> <icon-mdi-identifier class="mr-4px" />
{{ device.deviceCode }} {{ device.deviceCode }}
</n-text> </n-text>
<n-text depth="3">
<icon-mdi-devices class="mr-4px" />
{{ getTypeLabel(device.type) }}
</n-text>
<n-text depth="3"> <n-text depth="3">
<icon-mdi-ip class="mr-4px" /> <icon-mdi-ip class="mr-4px" />
{{ device.ipAddress || '-' }} {{ device.ipAddress || '-' }}
</n-text> </n-text>
<n-text depth="3"> <n-text depth="3">
<icon-mdi-map-marker class="mr-4px" /> <icon-mdi-ethernet class="mr-4px" />
{{ device.location || '-' }} {{ device.macAddress || '-' }}
</n-text> </n-text>
</n-space> </n-space>
<template #footer> <template #footer>
<n-space justify="space-between" align="center"> <n-space justify="end" align="center">
<n-text depth="3" style="font-size: 12px">
{{ device.manager || '未分配' }}
</n-text>
<n-button <n-button
text text
type="primary" type="primary"
@ -145,17 +138,14 @@
> >
<n-descriptions bordered :column="2"> <n-descriptions bordered :column="2">
<n-descriptions-item label="设备名称">{{ detailData.deviceName }}</n-descriptions-item> <n-descriptions-item label="设备名称">{{ detailData.deviceName }}</n-descriptions-item>
<n-descriptions-item label="设备编号">{{ detailData.deviceCode }}</n-descriptions-item> <n-descriptions-item label="UUID">{{ detailData.deviceCode }}</n-descriptions-item>
<n-descriptions-item label="设备类型">{{ getTypeLabel(detailData.type) }}</n-descriptions-item>
<n-descriptions-item label="设备状态"> <n-descriptions-item label="设备状态">
<n-tag :type="getStatusType(detailData.status)"> <n-tag :type="getStatusType(detailData.status)">
{{ getStatusLabel(detailData.status) }} {{ getStatusLabel(detailData.status) }}
</n-tag> </n-tag>
</n-descriptions-item> </n-descriptions-item>
<n-descriptions-item label="IP地址">{{ detailData.ipAddress || '-' }}</n-descriptions-item> <n-descriptions-item label="IP地址">{{ detailData.ipAddress || '-' }}</n-descriptions-item>
<n-descriptions-item label="MAC地址">{{ detailData.macAddress || '-' }}</n-descriptions-item> <n-descriptions-item label="MAC地址" :span="2">{{ detailData.macAddress || '-' }}</n-descriptions-item>
<n-descriptions-item label="所在位置">{{ detailData.location || '-' }}</n-descriptions-item>
<n-descriptions-item label="负责人">{{ detailData.manager || '-' }}</n-descriptions-item>
<n-descriptions-item label="创建时间" :span="2">{{ detailData.createTime }}</n-descriptions-item> <n-descriptions-item label="创建时间" :span="2">{{ detailData.createTime }}</n-descriptions-item>
<n-descriptions-item label="更新时间" :span="2">{{ detailData.updateTime }}</n-descriptions-item> <n-descriptions-item label="更新时间" :span="2">{{ detailData.updateTime }}</n-descriptions-item>
<n-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</n-descriptions-item> <n-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</n-descriptions-item>
@ -254,13 +244,7 @@ const columns: DataTableColumns = [
ellipsis: { tooltip: true }, ellipsis: { tooltip: true },
fixed: 'left' fixed: 'left'
}, },
{ title: '设备编号', key: 'deviceCode', width: 150 }, { title: 'UUID', key: 'deviceCode', width: 280, ellipsis: { tooltip: true } },
{
title: '设备类型',
key: 'type',
width: 120,
render: (row: any) => getTypeLabel(row.type)
},
{ {
title: '状态', title: '状态',
key: 'status', key: 'status',
@ -275,8 +259,6 @@ const columns: DataTableColumns = [
}, },
{ title: 'IP地址', key: 'ipAddress', width: 140 }, { title: 'IP地址', key: 'ipAddress', width: 140 },
{ title: 'MAC地址', key: 'macAddress', width: 150 }, { title: 'MAC地址', key: 'macAddress', width: 150 },
{ title: '所在位置', key: 'location', width: 150, ellipsis: { tooltip: true } },
{ title: '负责人', key: 'manager', width: 100 },
{ {
title: '操作', title: '操作',
key: 'actions', key: 'actions',

View File

@ -200,13 +200,7 @@ const columns: DataTableColumns = [
ellipsis: { tooltip: true }, ellipsis: { tooltip: true },
fixed: 'left' fixed: 'left'
}, },
{ title: '设备编号', key: 'deviceCode', width: 150 }, { title: 'UUID', key: 'deviceCode', width: 280, ellipsis: { tooltip: true } },
{
title: '设备类型',
key: 'type',
width: 120,
render: (row: any) => getTypeLabel(row.type)
},
{ {
title: '设备状态', title: '设备状态',
key: 'status', key: 'status',
@ -236,8 +230,7 @@ const columns: DataTableColumns = [
} }
}, },
{ title: 'IP地址', key: 'ipAddress', width: 140 }, { title: 'IP地址', key: 'ipAddress', width: 140 },
{ title: '所在位置', key: 'location', width: 150, ellipsis: { tooltip: true } }, { title: 'MAC地址', key: 'macAddress', width: 150 },
{ title: '负责人', key: 'manager', width: 100 },
{ {
title: '操作', title: '操作',
key: 'actions', key: 'actions',