记录一次工厂看板甘特图被砍掉重做（2026-05-15）

看板改版最怕的不是改颜色，是改完图别人看不懂。

今天一整天都耗在工厂数字大屏上。上午刚把整套 dashboard 从中车蓝换成了莫兰迪配色，下午用户一句话就把时间轴里的工位作业甘特图判了死刑，只能当天返工重做。

一、上午：莫兰迪配色版先落地

上午的活儿比较顺，主要就是把工厂 dashboard 的整体视觉从中车蓝换成莫兰迪色系。助手把每一处颜色都列了对照表：Header 从原来的 #0066CC 深蓝渐变，换成了 #6B7D8F → #B8A9C9 的蓝灰到紫灰渐变；背景从冷白 #F5F7FA 换成暖灰米色 #F0EDEB；主色调从饱和蓝换成低饱和蓝灰 #8B9DAF。图表颜色也改成了蓝灰、绿灰、暖橙、紫灰、玫瑰这种多色系，状态标签换成雾绿 #8FAE8B 和暗玫瑰 #C4908F，热力图渐变从蓝白改成暖灰白到莫兰迪绿再到深蓝灰。

功能上没动任何东西，四个标签页、6 路摄像头 Canvas 预览、24h 热力图、桌面与移动端切换，全部保留。文件最后落到了 D:\factory_dashboard_morandi.html，也就是 cpolar 服务目录，附件也投递过去了。

二、下午：用户说甘特图看不懂

没多久用户发来反馈，原话是：

时间轴里面的工位作业甘特图看不懂，改为每日每工位的工时统计，其他的都不变。

这句话信息量很大。第一，只动时间轴里第二块卡片，也就是工位作业甘特图；第二，替换成“每日每工位的工时统计”，不是加一个视图，是全换掉；第三，“其他的都不变”意味着总览、监控、分析三个标签页，以及时间轴里别的卡片，一个都别碰。

我理解用户的意思：原来那张甘特图把班次、任务、人员三个维度塞进横向条形图里，切换按钮来回点，实际产线的人根本不看时间段，他们要的是每个工位一天到底干了多少小时。

三、拆解改动点

跟助手明确了修改范围后，改动点就两处：

HTML 层：把第二块卡片的标题和控件区整个换掉，原来的“班次视图 / 任务视图 / 人员视图”三模式切换按钮，改成“周一 ~ 周日”的日期切换按钮，按天查看。

JS 层：删掉 switchTimelineMode 和甘特图渲染逻辑，新增 renderDailyHours 函数，用纵向分组柱状图展示每天每工位的实际工时。这个函数要按当前选中的日期过滤数据，再按工位分组画柱。

四、改完的效果对比

改动收工后，助手给了一张表，我把关键差异摘出来：

辅助线是这次改动里最实用的一点。以前看甘特图只能看到时间段，但不知道哪个工位超了、哪个没干满。现在柱状图旁边一条虚线标出标准工时，一眼就能看出差距。颜色逻辑也直接对应考核：超时的玫瑰红，未达标的暖橙，正常的用工位专属莫兰迪色。这样产线班组长扫一眼就能定位问题，不用切视图。

五、遗留

这次改动只碰了时间轴第二张图，总览、监控、分析三个标签页完全没动，但 JS 里删掉甘特逻辑之后，需要确认有没有别的函数引用了 switchTimelineMode 或者 currentMode，别留一个 undefined 在全局作用域里。文件还在 cpolar 服务目录，下一步是把改完的版本推到预览，让用户从周一到周日各点一遍，确认辅助线和颜色逻辑符合预期。今天先到这里，等反馈。