检测柜页面
- 列表路由:
/device-cabinet
- 新增路由:
/device-cabinet/new
- 编辑路由:
/device-cabinet/:id/edit
- 实现:
src/views/DeviceCabinet.vue、src/views/DeviceCabinetForm.vue
- 数据:
src/stores/deviceCabinets.ts
- 状态:已开发,使用前端演示数据并通过
localStorage 持久化
- 原型依据:检测柜查询表格、检测柜详情和当前网段设备选择弹窗原型
页面目标
维护检测柜的网络身份、基础信息、通道能力、在线状态和测试占用情况,为新建测试中的设备与通道选择提供数据基础。
列表功能
- 支持按 IP、设备编码、MAC、名称模糊搜索。
- 支持按创建时间、在线状态、测试状态和启用状态组合查询;所有下拉菜单均提供“全部”选项。
- 筛选条件按四列、三列、两列、单列等分铺满并响应式换行,查询和重置按钮位于最后一列。
- 列表按创建时间倒序排列并支持分页和每页条数切换。
- 列表固定展示:设备编码、IP、MAC、名称、制造商、型号、通道数、规格/容量、备注、在线状态、测试状态、当前测试。
- 操作列支持启用/禁用、编辑和删除;启停、删除均提供明确反馈。
- 表格横向滚动时,操作列固定在最右侧。
- 测试状态为“测试中”的检测柜不可禁用或删除,避免破坏进行中的测试关联。
新增与编辑
- 新增和编辑使用独立页面,并采用与其他表单页面一致的顶部文字返回入口。
- “选择设备”弹窗展示当前网段发现设备,包含设备编码、IP、MAC和选择操作,并支持分页。
- 选择设备后自动带入设备编码、IP、MAC、在线状态、测试状态和当前测试,这些数据在详情页只读展示。
- 用户维护检测柜名称、制造商、型号、
1~99 通道数、数字类型的规格/容量、备注和启用状态。
- 保存前校验设备已选择、必填字段、设备编码唯一性和检测柜名称唯一性;保存成功返回列表。
数据结构
- 检测柜:
id、deviceCode、ip、mac、name、manufacturer、model、channelCount、数字类型的 specs、remark、onlineStatus、testStatus、currentTest、status、createdAt。
- 发现设备与已登记检测柜数据统一位于
src/stores/deviceCabinets.ts。
待明确
接入设备发现和心跳 API、在线状态刷新周期、通道明细、远程控制权限、设备校准记录、当前测试关联和删除引用检查接口。