数据采上来之后车间大屏和手机看板是最终呈现层。这篇记录我们注塑机监控看板的前端技术方案给自研的工厂团队参考。架构采集网关 → MQTT → 后端服务订阅入库规则引擎→ WebSocket 推送 → 前端看板。关键实现点1. 数据推送用 WebSocket 而不是前端轮询。100台机状态变化频繁轮询既浪费带宽又做不到状态灯秒级响应。后端在 MQTT 订阅回调里直接 websockify 给前端端到端延迟 1 秒内。2. ECharts 图表选型机台状态时序用自定义 series状态块着色绿色运行/灰色待机/红色报警稼动率趋势用折线工艺曲线用大数据量 line dataZoom。注意开启 ECharts 的 dataset 模式和 appendData不然机台一多全量重绘会卡。3. 状态同步策略前端断线重连后先拉一次全量快照再续订增量避免长时间断线后状态错乱。4. 大屏适配车间电视分辨率不一viewport 缩放方案scale 等比比响应式布局省事页面按 1920x1080 设计整体 scale。5. 移动端老板用手机看的场景占一半务必单独出一版轻量页面只放机台列表状态当日产量加载速度控制在2秒内。这套结构一个月能出第一版之后迭代不停机热更新。工厂 IT 团队自研可行性比多数老板想的高采集层买现成网关、应用层自己写是性价比最高的组合。