7.4 KiB
设备分配看板设计
日期：2026-04-30
背景
当前“设备分配”页面延续了传统的“列表 + 详情表单”结构，但这类结构不适合当前业务目标。
对设备分配来说，用户最关心的不是单条分配记录的编辑细节，而是整体分配态势：
- 一共有多少识别单元
- 一共有多少设备
- 已分配多少识别单元
- 还有多少识别单元未分配
- 每台设备分配了多少识别单元
- 哪些设备接近上限、已经满载、或者处于空闲
- 在给定设备承载上限的前提下，如何快速自动平均分配
因此，这个页面应从“表单页”转为“分配看板”。
目标
设备分配页需要回答四个问题：
- 当前整体分配情况如何
- 哪些设备负载偏高，哪些设备空闲
- 哪些识别单元还未分配
- 如何基于设备上限快速自动平均分配，并允许少量手工调整
界面原则
本页优先强调“看清分配情况”和“快速完成分配”，界面应尽量简洁。
具体原则：
- 优先展示数字、状态和卡片，不展示大段说明文字
- 不放与分配主题关系弱的输入框
- 非关键说明尽量缩成短标签、短提示或折叠信息
- 让用户进入页面后先看到总量、负载、未分配，再看到操作
- 操作按钮集中放在一行，避免表单式堆叠
非目标
本次不做以下内容：
- 不做复杂拖拽交互
- 不做实时设备性能采样驱动的智能调度
- 不做按设备型号自动推算上限
- 不修改设备最终运行配置 JSON 合同
- 不引入新的底层部署引擎
页面定位
“设备分配”页面是一个调度和部署看板，不是传统资产详情页。
它的核心职责是：
- 展示识别单元与设备之间的承载关系
- 辅助用户快速完成平均分配
- 让未分配、超载、空闲这些问题一眼可见
信息架构
页面从上到下分为四个区域：
- 分配概览
- 操作区
- 设备分配看板
- 未分配识别单元
一、分配概览
页面顶部显示 6 个关键统计值：
- 识别单元总数
- 设备总数
- 已分配识别单元
- 未分配识别单元
- 平均每台设备负载
- 超载设备数
说明：
- “已分配识别单元”按是否被任一设备分配计算
- “未分配识别单元”按未出现在任何设备分配中的识别单元计算
- “平均每台设备负载”按
已分配识别单元 / 设备总数计算，保留 1 位小数 - “超载设备数”按当前页面设定的“每台设备最大单元数”判断
这些统计值用于快速判断整体均衡情况。
二、操作区
操作区位于概览下方，采用一行布局，包含：
- 每台设备最大单元数滑块
- 自动平均分配
- 清空分配
- 保存设备分配
每台设备最大单元数
- 类型：滑块
- 默认值：4
- 范围：1 到 8
- 右侧显示当前值，例如：
4 路/台
这是页面级控制参数，不直接写入设备运行配置，只影响当前页面的自动分配和负载判断。
自动平均分配
点击后执行自动分配算法：
- 收集所有识别单元
- 收集所有设备
- 清空当前页面中的暂存分配结果
- 按设备当前已分配数量从少到多依次分配
- 单台设备不超过当前滑块上限
- 剩余放不下的识别单元保留在“未分配识别单元”区域
目标是：
- 尽量平均
- 不超过上限
- 剩余明确可见
自动分配完成后，页面显示轻量提示，例如：
已按每台最多 4 路完成自动分配，剩余 3 路未分配。
清空分配
清空当前页面暂存的所有设备分配，不立即落库。
保存设备分配
将当前页面中的设备分配关系统一保存到数据库。
三、设备分配看板
页面主体改为卡片式设备板，而不是传统表格。
每台设备显示为一张卡片，卡片内容包括：
- 设备名称
- 设备 ID
- 当前分配数量，例如
3 / 4 - 当前状态
- 已分配的识别单元标签列表
设备状态
基于当前“每台设备最大单元数”计算：
0：空闲1到上限 - 1：正常= 上限：满载> 上限：超载
排序规则
卡片按以下优先级排序：
- 超载
- 满载
- 正常
- 空闲
同类内再按设备名称或设备 ID 排序。
这样最需要关注的设备会优先显示。
视觉形式
每张设备卡片建议包含：
- 状态标签
- 负载数字
- 简短负载条
- 识别单元标签块
这已经构成足够直观的图形化表达，不需要第一版引入复杂图表。
四、未分配识别单元
单独放在页面下方或右侧，作为一个明确区域。
显示：
- 未分配识别单元数量
- 未分配识别单元列表
若没有未分配单元，则显示：
已全部分配
这个区域用于快速暴露“还有哪些识别单元没有落到任何设备上”。
手工调整
第一版不做拖拽。
手工调整采用轻量操作方式：
- 在设备卡片中的识别单元标签上，支持“移出”
- 在未分配识别单元列表中，支持“加入某设备”
- 在设备卡片上，支持“从未分配中加入”
也可以支持简单的“移动到其他设备”菜单，但不要求第一版一步到位。
原则是：
- 先保证清楚和稳定
- 再考虑拖拽式优化
数据模型要求
本页使用现有底层对象，不新增新的核心存储结构：
- 识别单元：
recognition_units - 设备分配：
device_assignments
页面上的“每台设备最大单元数”是 UI 级暂存参数，不要求本次入库。
保存时，仅保存：
- 每台设备对应的识别单元列表
- 描述信息
不修改设备最终运行配置的生成合同。
页面与详情页关系
设备分配页负责整体看板和编辑。
设备详情页只做状态展示：
- 当前设备分配了多少识别单元
- 当前设备对应哪个场景模板
设备详情页不再承担分配编辑职责。
低优先级信息处理
以下内容不应在主界面占据明显位置：
- 长段文字说明
- 单独的“描述”输入框
- 与分配动作无关的扩展属性
如确有必要保留，应放入折叠区域或次级编辑入口，而不是主操作区。
错误处理
需要处理这些情况：
- 没有设备：页面显示空状态，并禁用自动分配/保存
- 没有识别单元：页面显示空状态，并禁用自动分配
- 某识别单元引用缺失：在卡片或未分配区显示异常标记
- 保存失败：保留当前页面暂存状态，并提示错误
测试
至少覆盖以下测试：
- 统计信息正确
- 自动平均分配在不同设备/单元数量组合下结果正确
- 超载、满载、空闲状态判定正确
- 未分配识别单元列表正确
- 保存设备分配后，数据库中的
device_assignments正确更新 - 设备详情页和预览页仍能读取保存后的分配结果
实施建议
建议按以下顺序实施：
- 后端补充分配统计与自动分配计算
- 改造设备分配页面为“概览 + 操作区 + 看板 + 未分配区”
- 接入保存逻辑
- 最后补样式和状态表现
结论
设备分配页应从“单条配置表单”转为“分配看板”。
核心不是编辑细节，而是：
- 看清楚总量
- 看清楚负载
- 看清楚未分配
- 一键自动平均分配
- 再做少量手工修正
这会比当前的列表/勾选模式更符合实际使用场景，也更适合 32 路视频、多台边缘设备的部署方式。