一份给制造业 IT/OT 负责人的「三维设备监控大屏」落地指南。
📌 一、为什么我们又开始重新做监控大屏？
过去十年，制造业砸过太多钱做"数字化大屏"：
- 一个 SCADA 看板动辄 几十万 ，项目周期 3-6 个月；
- 上线即落后------UI 是冰冷的方块图，设备和数据是两张皮；
- 改一个字段要走变更流程，新接入一台设备要写一摞协议文档；
- 领导只想问一句："这台电机现在到底健不健康？"------你却要花半天翻报表。
到了 2026 年，工厂老板要的不再是"大屏"，而是一块"能看见设备生命体征的活地图"。
一个设备 → 一个 3D 模型 → 一组实时流式数据 → 一目了然的健康度。
当这件事从「软件项目」变成「一张活字格页面」，整个行业的玩法就变了。
这篇文章就用一个真实案例（活字格 AIcoding + Three.js）带你把这条路走通。
📌 二、整体架构：从现场 PLC 到浏览器像素的完整链路
下面是这套方案的真实落地架构（活字格原生支持从设备采集到三维大屏的完整链路）：
三层五段，串起来就是一条「数据怎么从车间跑进大屏」的故事线：
一句话总结：活字格把"网关 + 数据库 + 队列 + 时序库 + 大屏"整合到了同一个平台里。
📌 三、成品长什么样？
直接上案例截图（活字格构建 · 三维设备监控中心）：
一眼能看到的 7 块价值：
- 顶部态势栏：接入设备、正常、异常、通讯------一行字把"现场净度"交代完；
- 3D 主体区 ：电机 + 联轴器 + 负载设备的完整建模，视角可旋转、可聚焦、可剖切；
- 浮动数据标签 ：转速、转矩、绕组温度、电机输出温度直接钉在模型对应位置------所见即所测；
- 设备列表卡：底部 5 台设备一键跳转定位到对应 3D 模型；
- 设备状态卡：设备状态 / 告警代码一眼可查；
- 实时参数卡：6 个核心参数大字呈现，超过阈值自动变红；
- 位置指令卡：14 行遥测数据（电压、电流、位置、扭矩、励磁......）按字段分组排布。
绿色 = 正常、红色 = 异常、超阈值自动闪烁------这是工厂老师傅最熟悉、也最买账的色彩语言。
📌 四、技术实现拆解（给开发者）
4.1 大屏前端：React AI 单元格跑 Three.js
大屏页面用的是活字格的 React AI 单元格------直接在单元格里写 React 组件，内部嵌 Three.js 渲染 3D 场景。代码长这样：
关键点：
useDataSource('设备信息表')直接绑活字格业务库设备档案；- WebSocket 推 JSON 进
props.pointUpdateJson，触发局部刷新，不需要整页轮询； - 数据标签用
anchorMap在 3D 模型上钉位置，模型旋转时标签自动跟随。
完整源码（含 5 类设备的 Three.js 建模、漂浮标签、状态着色、OrbitControls）请见文末获取方式。
4.2 数据推送：WebSocket，不是 Ajax
为什么用 WebSocket 而不是 Ajax？
- Ajax 轮询每秒打一次请求 → 100 台设备 × 20 个点位 = 每秒 2000 次查询，数据库先扛不住；
- WebSocket 长连接，一次连接、持续推送，延迟从秒级降到 100ms 以内；
- 设备掉线、告警触发时主动推，前端永远拿到的都是"最新心跳"。
4.3 设备采集：活字格直接支持 OPC UA / Modbus TCP
同样的逻辑换 Modbus TCP 也行：
活字格就是网关------不需要单独买 SCADA 软件 / 网关盒子 / Kepware。
4.4 时序数据：写 InfluxDB
历史点位走 InfluxDB，趋势、回看、OEE 报表全靠它：
4.5 队列：MQTT 解耦设备和大屏
设备 ↔ 后端用 MQTT 解耦，设备只管发、谁爱消费谁消费：
- 设备协议变更不影响大屏；
- 新增大屏消费者不需要动采集端；
- EMQX 自带历史回放，新接入设备的历史数据一拉就到。
4.6 告警：服务端命令 + 阈值规则
告警逻辑全在活字格服务端命令里实现，规则可配置、可热改：
📌 五、这套方案的 6 个隐性优势
- 协议兼容：OPC UA / Modbus TCP / Modbus RTU / MQTT，原生打通现场设备；
- 双写存储：业务库给大屏用、InfluxDB 给时序分析用，互不干扰；
- 实时推送 ：WebSocket 长连接，延迟 < 100ms，前端再也不"卡"；
- 轻量化：单台 NUC 跑 200+ 设备没问题，GPU 占用 < 8%；
- 可演进：今天 3D 模型，明天数字孪生，今天写的所有数据绑定代码一行不动；
- 权限可控：活字格自带的角色/行级权限直接管到设备和字段；
- 可被 AI 持续优化：下一轮让 AIcoding 自动生成"健康度评分"、"预测性维护"逻辑。
📌 六、谁适合用？什么时候该上？
判断标准就一句话：如果你现在还在用 Excel 拼图表，这套就值得换。
📌 七、写在最后
工业数据可视化的下半场，不是"谁的大屏更炫"，而是：
谁能把"看得见"这件事，变得更快、更便宜、更可被现场工程师自己改。
活字格 + AIcoding + Three.js 这条路，本质上把这件原本"软件项目级 "的事，降维成了"搭表格级"。
这意味着：
- IT 不用排半年的开发计划；
- 现场工程师不用等外包改字段；
- 老板想看新指标，下午就能加。
当一个工具的能力溢出到「人人都能改」的时候，真正的数字化才刚开始。