AR 运维系统与 MES、EMA、IoT 系统的融合架构与实践

// AR运维核心类：整合多系统数据并可视化
class AROperation {
  constructor() {
    this.url = "http://data-service/api/data"; // 数据聚合服务地址
    this.scene = new THREE.Scene(); // AR场景
    this.cam = new THREE.Camera(); // 场景相机
    this.rend = new THREE.WebGLRenderer(); // 渲染器
    document.body.appendChild(this.rend.domElement); // 挂载AR视图
    this.poll(); // 启动数据轮询
  }
  // 定时获取多系统整合数据（IoT+MES等）
  async poll() {
    setInterval(async () => {
      // 请求设备motor_001的实时数据
      const res = await fetch(this.url, {method: "POST", body: JSON.stringify({id: "motor_001"})});
      this.update(await res.json()); // 处理返回数据
    }, 3000); // 每3秒刷新一次
  }
  // 更新AR显示：清除旧标签→创建新标签→渲染
  update(data) {
    // 清除已有AR标签
    this.scene.children.forEach(c => c.isCSS2DObject && this.scene.remove(c));
    // 添加IoT温度标签（红=预警）
    this.scene.add(this.label(`温度: ${data.temp}℃`, data.alert ? "red" : "green", {x:0.5,y:1.2}));
    // 添加MES工单标签
    this.scene.add(this.label(`工单: ${data.order} (剩:${data.rem})`, "blue", {x:0.5,y:1.0}));
    this.rend.render(this.scene, this.cam); // 渲染场景
  }
  // 创建AR标签（文本+颜色+位置）
  label(t, c, p) {
    const d = document.createElement("div");
    d.textContent = t; d.style.color = c;
    return new THREE.CSS2DObject(d); // 转为3D可显示对象
  }
}