华为AIoT数字可视化工厂

项目背景

与华为合作，为制造企业搭建数字可视化工厂系统。将车间流水线的设备运行状态、产能数据、异常告警全部映射到一个Web大屏上，让管理者坐在办公室里就能掌控整条产线的实时状态。

合作方：华为 IoT 事业部角色：前端核心开发（可视化大屏 + 3D交互）

技术架构

感知层: 振动/温度/电流传感器 → MQTT
边缘层: 华为AR502H网关 → 数据清洗/协议转换/本地告警
平台层: 华为云IoT → 设备管理/数据存储/规则引擎
应用层: Vue3 + ECharts + Three.js → 可视化大屏

模块	技术	说明
前端框架	Vue3 + TypeScript	数据流 Pinia 状态管理
2D 图表	ECharts	设备利用率、产能曲线、告警柱状图
3D 孪生	Three.js	工厂建筑+产线设备的 3D 模型渲染
数据推送	WebSocket	来自华为云 IoT 平台的数据推送
告警引擎	自研规则引擎	基于滑动窗口的异常检测

核心实现

Three.js 数字孪生

3D 模型从工厂 CAD 文件通过 Blender 转换而来，使用 Three.js 的 GLTFLoader 加载。孪生模型的设备颜色、动画状态与真实设备通过 WebSocket 实时同步：

// 设备状态 → 3D 模型映射
type DeviceState = 'running' | 'idle' | 'warning' | 'fault'

const STATE_COLORS: Record<DeviceState, string> = {
  running: '#00ff88', // 绿色 — 正常运行
  idle:    '#888888', // 灰色 — 待机
  warning: '#ffaa00', // 橙色 — 警告
  fault:   '#ff3333', // 红色 — 故障，带脉冲闪烁动画
}

告警引擎

告警规则不是拍脑袋定的，而是和历史数据对比迭代出来的：

从工厂导出过去三年的设备运行数据
和现场工程师一起标注”正常区间”和”异常事件”
计算每种传感器的最佳阈值（平衡误报和漏报）
使用滑动窗口降噪，确保告警是持续性的而非瞬时波动

项目思考

“屏幕上看到的和我实际去听一听机器的声音是不一样的。”—— 一位车间老师傅

数字化是辅助，不是替代。屏幕上的数字可以给出效率和异常，但只有现场师傅的经验才能判断”这台机器大概还能撑两个月”。技术方案和一线经验之间需要相互尊重和平衡。

项目链接

合作方：华为 IoT
平台：向源互联

丽·芙