每天早晨进车间，一群人围在白板前——“这个急单先做”、“那台机床空了没有”、“质检报告在哪”……晚上盘点对不上，又跟上一轮一样的循环。我用一个周末，在飞算 JavaAI 的帮助下，搭了一个真正能跑的生产工单与排产管理 MES。
白板上的工单，就是账面上的糊涂账
我在一家机械加工厂帮忙管生产调度，岗位说得好听叫"生产主管"，说白了就是个"高级吼哥"。
我们厂不大不小，8 台设备、15 个工单在路上跑。每天排产靠什么？一块 1.2 米的白板。谁先上、谁插单、哪台机器空着，全靠人在车间里喊。工单编号、工序进度、质检结果——写在便签纸上贴在白板边，风一吹就掉。
最头疼的是插单。客户一个电话说急，生产主管就得在白板上擦了重写。晚上做完工日报，组长报上来的数字和白板上的总量永远差一截。哪条工序漏记了？哪个产品没检完？没人说得清，只能第二天一个个找师傅问。
我需要一个能实时看到工单状态、设备负荷和排产甘特的系统。不求高大上，但求车间里每个人打开手机或电脑，就能知道"今天做什么、做到哪了、下一单谁上"。
一次完整的"操作线"，串联起所有页面
为了避免把文章写成功能介绍，我选择一条具体的操作线来讲：从接到紧急插单，到排出甘特、下发车间生产、再到质检完成、录入日报——这就是车间里每天都在发生的一条完整链路。
这条操作线串联起了系统的所有核心页面，也正好是飞算 JavaAI 生成这套 MES 后台的完整路径。
Step 1｜在白板上开天窗 → 进入工单看板创建插单
场景还原：早上 8 点，振华科技突然来电，120 件基座壳体 B-200 要 7 月 14 号前交货，不然产线要停。我进系统第一件事——建工单。
进入工单看板（/work-orders），我点击"新建工单"：
- 选择产品：基座壳体 B-200
- 数量：120 件
- 优先级：紧急
- 截止日期：7 月 14 日
提交后，这条工单WO-2407012出现在"待排产"列的最前面，优先级标记为红色"紧急"标签，发着闪烁动画。
工单看板用的是一列五栏（待排产→生产中→已暂停→已完工→已取消）Kanban 布局。每张卡片上工单编号、产品名、客户、完成进度一目了然。紧急工单用红色 pulse 动画提醒，比白板上写的"急"字醒目一百倍。
这个页面的设计意图很简单：让生产主管、车间主任、质检员各角色打开就能看清"目前什么状态、有多少单"，不需要翻表格。
Step 2｜排产甘特——解决"这台机床谁占着"的历史难题
场景还原：工单建好了，但数控车床 #1 正在给 WO-2407005（精密转轴）做车削，下午还要给齿轮组做。插单一进来，立刻就是排产冲突问题。
进入排产甘特（/scheduling），我看到了按设备维度的横向时间轴：
- 数控车床 #1：早上 8:00–11:00 被 WO-2407005 占用
- 立式铣床 #1：下午 13:00–16:00 被 WO-2407010 占用
- 而此时，我的新单子 WO-2407012 的设备时间段标记为红色"冲突"
这是整个系统最有价值的组件——工单排产甘特条。每个设备的水平时间轴用不同颜色编码工序类型：
- 靛蓝 → 下料
- 天蓝 → 车削
- 紫色 → 铣削
- 青色 → 磨削
- 金色 → 装配
- 绿色 → 检验
当两个工单的时间段重叠时，甘特条会以红色虚线边框 + pulse 动画高亮显示冲突区域。页面底部还有一个专门的冲突面板，列出所有冲突的详细信息，包括冲突的双方工单号和时段。
为什么用甘特图而不是表格？因为排产的本质就是"哪个设备、什么时间、干哪个活"——时间轴是三维信息最直观的压缩方式，比看五列表格快得多。
Step 3｜设备负荷一览——找到空闲机床
场景还原：看到冲突后，我需要确认哪些设备有空闲。WO-2407012 用铣削工序，立式铣床 #1 下午负荷 72%，但 #2 铣床（EQ-004）只有 60% 负荷，可以做。
进入设备负荷（/equipment），8 台设备以卡片矩阵展示：
- 绿色 LED 圆点 → 运行中
- 灰色 LED 圆点 → 空闲
- 黄色 LED 圆点 → 维修中
- 红色 LED 圆点 → 离线
LED 圆点带发光效果，一眼就能从卡片矩阵中扫到空闲设备。每张卡片还显示操作员、上次保养日期和下次保养日期——超过保养日期的会显示红色的"已过期"标记。
这个页面替代了车间里"喊一句：XXX，你那里有空吗？"的原始沟通方式。
Step 4｜质检录入——生产中的质量门禁
场景还原：WO-2407004（齿轮组 C-300）昨天交货时出现了齿面硬度不达标，被质检打回了"不合格"。我在系统里查一下质检记录，确认问题工序，避免同样的刀路复用。
进入质检录入（/qc-inspection），我筛选出该工单的记录：
- 7月11日，周质检抽检 10 件，1 件缺陷，结果：不合格
- 备注：齿面硬度不达标，暂停生产
合格 / 不合格 / 返工分别用绿 / 红 / 黄三种状态徽章。我点击记录可以跳转工单详情，查看该工单的完整处理时间线。
质检录入页面的角色定位很清晰：它不在"好看"，而在"可追溯"。车间最怕的就是质量回溯时查不到记录，最后只能靠"好像是谁干的"来推论。
Step 5｜完工日报——看看今天干出来多少
场景还原：下午 5 点，各工序师傅陆续报完工。陈师傅完成了 WO-2407010 的下料（20 件），王师傅完成了 WO-2407005 的磨削（30 件）。
进入完工日报（/daily-report），按日期分组的完工记录以时间线形式呈现：
- 7月12日：4 条记录，合计完工 90 件
- 7月11日：2 条记录，合计完工 350 件
- 7月10日：2 条记录…
页面顶部三个指标卡：今日完工数（90）、今日记录数（4）、累计完工数（686）。我可以按日期筛选，也可以点击任意一条记录跳转对应工单详情。
收工前，我在日报页上又录了一条 WO-2407005 的磨削记录——30 件、王师傅、3 小时。白板时代写在本子上的东西，现在点两下就录进去了，晚上汇总再也不用逐个师傅问了。
Step 6｜工单详情——整条链路的数字档案
场景还原：复盘一天的生产，我打开 WO-2407005（精密转轴 A-100）的详情页，看看这只工单从创建到今天的完整记录。
进入工单详情（/work-order/:id）：
- 顶部：工单编号 + 状态徽章 + 优先级 + 进度条
- 中部：五段状态时间线（创建 → 排产 → 生产 → 质检 → 完工），每个节点显示日期，当前节点高亮带 pulse 动画
- 下方：该工单的质检记录（按工序排列）
- 底部：该工单的完工日报记录（按日期排列）
五段时间线是这个页面最核心的组件。每个节点：
- 已完成 → 橙色实心圆 + 对勾
- 当前节点 → 橙色空心圆 + pulse 光圈动画
- 未完成 → 灰色空心圆
一条时间线胜过千言万语——生产主管扫一眼就知道工单卡在哪环节，不用翻群聊天记录。
从白板咆哮到数字甘特，飞算 JavaAI 做了什么
这条操作链看起来一气呵成，但其实从想法到能跑的页面，我只用了一个周末。真正干的活不是写代码——代码骨架全是飞算 JavaAI 帮我生成的。
我的真实流程是这样的：
- Prompt 输入：在 IDEA 插件窗口里输入"帮我做一个生产工单与车间排产 MES，8 台设备、5 种产品、工单状态五段流转"
- 需求确认：AI 分析了角色（生产主管/车间主任/质检员）、功能模块后给出确认界面
- 接口与模型设计：生成了工单、设备、排产计划、质检记录、完工日报五个核心实体和 API
- 表结构 DDL：自动生成了 MySQL 建表语句，包括外键关联和索引
- 生成计划：列出了完整的前端路由、组件树、Store 和数据层文件结构
- 源码生成：100% 进度完成后，导出了完整的 Vue 3 + Vite + Pinia 工程
我的工作主要在三个方面：
- 页面逻辑编排：AI 生成了零散的组件和页面，但我需要把"插单→排产→冲突检测→质检→日报"这条完整的业务链路串起来，让页面之间的跳转和数据联动形成闭环
- 甘特组件设计：时间轴定位算法、冲突检测逻辑、脉冲动画——这些业务特有的计算逻辑需要手动调优
- 工业风 UI 打磨：深石墨背景 + 安全橙强调色 + LED 状态灯的视觉效果，既要传递工业气息，又不能太沉闷
技术栈职责
| 组件 | 解决什么问题 |
|---|---|
| Vue 3 + Composition API | 页面级的响应式状态管理 |
| Vue Router 4 | 11 个页面的路由分发与导航守卫 |
| Pinia | 7 个数据 Store 隔离状态（工单/设备/排产/质检/日报） |
| 数据层 | 15 个工单 + 8 台设备 + 12 条排产 + 9 条质检 + 12 条日报 |
| 纯 CSS 变量 | Factory Floor 暗色工业风主题 |
最后说两句
AI 生成代码这件事，我现在理解得越来越清楚——它不是在代替你写代码，而是在加速你从"想法"到"原型"的验证周期。
过去搭一个能跑的 MES 原型，不考虑后端，光前端页面至少一周。现在？
周末两天，一个上午建模和排产链路，一个下午质量闭环，晚上收工回家。周一早上打开白板，我已经不需要它了——工单在系统里跑，排产在甘特上画，冲突自动标红。
这就是我认为 AI 编程在这个阶段最务实的价值：不是取代你，而是让你更快地写出第一个能用的版本，然后你再拿着这个版本去跟业务方对需求、反复迭代。
真正业务逻辑的判断、数据口径的定义、异常分支的处理——这些依然是人来做。但脚手架、页面骨架、路由配置、状态管理这些在 2026 年还值得手写吗？我觉得不。