网硕互联帮助中心1. 引言
在前几篇实战笔记中，我们探讨了生产车间多智能体系统的架构设计、Agent协作机制和核心算法。本篇将聚焦于系统的前端原型UI设计，展示如何通过统一的响应式界面支撑车间主管、计划员、班组长等不同角色的日常工作。我们将详细介绍从计划驾驶舱到工单详情页的完整页面清单和设计原则。
2. 前端设计原则
PC端和移动端使用同一套代码，不为移动端单独开发页面。页面基于 Ant Design 组件体系实现，布局使用 Row、Col、Grid.useBreakpoint 和 CSS Media Queries 做响应式适配。
| 统一代码 | PC端、平板、手机共用同一套路由和组件 |
| 响应式布局 | 大屏使用多列布局，小屏折叠为单列卡片 |
| 信息优先级 | 移动端优先展示状态、风险、待处理动作，弱化复杂表格 |
| 表格适配 | 表格在移动端使用横向滚动或卡片化摘要，不另写移动端页面 |
| 操作一致 | 采纳、修改、驳回、审批等关键动作在各端保持一致 |
3. 路由总览与页面清单
系统包含以下核心页面，按优先级从P0到P1排列：
| 计划驾驶舱 | /dashboard | 计划驾驶舱 | 车间主管、计划员 | 查看今日计划、交期风险、异常汇总和待确认事项 | P0 |
| 工单管理列表 | /work-orders | 工单管理 | 车间主管、班组长、计划员 | 按状态、优先级、齐套情况筛选工单，点击进入工单详情 | P0 |
| 工单详情页 | /work-orders/:id | 工单详情 | 车间主管、班组长、计划员 | 聚合单个工单的计划、执行、物料、设备、质量和事件 | P0 |
| 物料齐套页 | /materials/kitting | 物料齐套 | 物控、仓库、班组长、主管 | 查看齐套状态、缺料、领料、挪料和归还影响 | P0 |
| 异常处置页 | /exceptions/:id | 异常处置 | 车间主管、计划员、质量员 | 查看Agent建议并执行采纳、修改、驳回或审批 | P0 |
| 反馈记录页 | /feedback | 反馈记录 | 主管、计划员、管理员 | 查看人工反馈、原因沉淀和规则优化线索 | P1 |
| 轻量预排页 | /scheduling/lightweight | 轻量预排 | 计划员、车间主管 | 未上 APS 场景下手动选择生产订单，点击预排生成草稿，调整并确认正式排程 | P1 |
| 规则配置页 | /settings/rules | 规则配置 | 管理员、计划员 | 配置缺料、延期、质量、挪料审批等规则 | P1 |
4. 全局布局设计
系统采用统一的全局布局，确保在不同设备上提供一致的用户体验：
| 顶部栏 | 展示系统名称、场景标识、当前计划版本、用户信息 | 展示系统名称、场景标识和用户入口 | Layout.Header、Tag、Dropdown |
| 侧边菜单 | 左侧固定菜单 | 折叠为抽屉菜单 | Layout.Sider、Drawer、Menu |
| 内容区 | 最大宽度自适应，支持多列卡片 | 单列卡片流 | Grid、Row、Col、Card |
| 指标卡片区 | PC端按2-5列紧凑展示，不因预览面板较窄就过早变成单列 | 手机端单列展示，保证阅读顺序 | Card、Statistic、Row、Col |
| 筛选区 | 下拉选择项横向紧凑排列，按宽度自动换行，不允许单个选择项无故独占整行 | 窄屏折叠为单列或筛选抽屉 | Form、Select、DatePicker、Row、Col |
| 子页面表单 | 按钮打开的详情页、抽屉和弹窗在PC端优先使用两列紧凑表单，长文本和说明类字段可独占整行 | 移动端单列展示，避免横向挤压 | Drawer、Modal、Form、Grid |
| 全局提醒 | 顶部消息、右侧通知列表 | 顶部消息、底部动作入口 | Alert、Notification、Badge |
| 操作确认 | 弹窗或抽屉 | 底部抽屉优先 | Modal、Drawer、Form |
5. 核心页面设计详解
5.1 计划驾驶舱（/dashboard）
页面目标：让主管和计划员在一个页面看到今日计划是否能执行、哪些工单有风险、哪些异常需要确认。
页面结构：
| 顶部筛选 | 日期、车间、产线、计划来源、APS版本 | DatePicker、Select、Segmented | GET /api/v1/dashboard/summary | P0 |
| 指标卡片 | 今日工单、已开工、已完工、延期风险、待确认异常 | Card、Statistic | GET /api/v1/dashboard/summary | P0 |
| 计划执行概览 | 按工单状态展示计划进度 | Progress、Table | GET /api/v1/work-orders | P0 |
| 异常风险列表 | 异常类型、影响工单、影响等级、建议动作 | Table、Tag、Button | GET /api/v1/exceptions | P0 |
| 待确认事项 | 重排建议、挪料审批、暂停恢复、质量暂停 | List、Badge、Button | GET /api/v1/approval-tasks | P0 |
| 场景说明 | 未上APS/已有APS处理路径说明 | Alert | GET /api/v1/system/scenario | P1 |
响应式要求：
- ≥1200px：指标卡片5列，风险列表和待确认事项左右布局
- 768px-1199px：指标卡片2-3列，列表上下布局
- <768px：指标卡片单列或双列，异常表格改为摘要卡片，筛选项折叠
5.2 工单管理列表（/work-orders）
页面目标：提供工单的统一浏览和筛选入口，支撑主管和计划员快速定位需要关注的工单，点击进入工单详情。
页面结构：
| 筛选区 | 工单状态、优先级、齐套状态、产线、计划日期 | Form、Select、DatePicker | GET /api/v1/work-orders | P0 |
| 工单列表 | 工单号、订单号、产品、工序、状态、优先级、计划时段、齐套状态、偏差 | Table、Tag、Button | GET /api/v1/work-orders | P0 |
| 状态统计 | 待开工、执行中、执行风险、已暂停、已完工数量汇总 | Card、Statistic | GET /api/v1/work-orders/summary | P1 |
响应式要求：
PC端表格保留完整列；移动端优先展示工单号、状态、齐套、偏差、操作，其他字段折叠到详情抽屉。
5.3 工单详情页（/work-orders/:id）
页面目标：把单个工单的计划、执行、物料、设备、质量、现场事件放在一个页面，支撑主管快速判断工单是否能继续执行。
页面结构：
| 工单头部 | 工单号、订单号、产品、工序、状态、优先级 | Descriptions、Tag | GET /api/v1/work-orders/{id} | P0 |
| 排产信息 | 绑定来源、设备机台、工作小组、计划时段、绑定校验说明 | Card、Descriptions、Button | GET /api/v1/work-orders/{id}/schedule | P0 |
| 计划与实际 | 计划开始、计划结束、实际开始、实际结束、偏差分钟 | Timeline、Progress | GET /api/v1/work-orders/{id}/execution | P0 |
| 综合状态卡 | 物料齐套、设备可用、质量状态、异常数量 | Card、Badge | 多接口聚合 | P0 |
| 物料需求 | 需求数量、已领数量、缺口、齐套状态 | Table | GET /api/v1/work-orders/{id}/materials | P0 |
| 设备状态 | 当前设备、设备状态、维修窗口、降速情况 | Descriptions | GET /api/v1/equipment/{id}/status | P0 |
| 质量记录 | 不良率、批次异常、返工数量、暂停建议 | Table | GET /api/v1/work-orders/{id}/quality-events | P1 |
| 现场事件 | 领料、挪料、归还、暂停、恢复、故障、返工 | Timeline | GET /api/v1/work-orders/{id}/events | P0 |
响应式要求：
PC端使用左右布局：左侧基础信息与执行进度，右侧状态卡和事件时间线。移动端按"状态摘要、关键动作、详情区块、事件时间线"顺序单列展示。
6. 总结
本文详细介绍了生产车间多智能体系统的前端原型UI设计，涵盖了从设计原则、路由总览到核心页面的完整设计方案。通过统一的响应式布局和组件化设计，系统能够在不同设备上为车间主管、计划员、班组长等角色提供一致且高效的操作体验。后续篇章将继续深入探讨系统的后端实现、Agent调度算法和实际部署案例。
评论前必须登录！
注册