全球灯塔工厂网络项目落地后，制造企业对全产线实时监控、多终端统一可视化、生产数据多维度分析的需求持续提升。传统 C/S 架构组态软件存在终端适配差、集成成本高、扩展能力弱等问题，本项目选用 图扑自研 HT for Web 引擎完成工厂流水线组态可视化开发，严格遵循以下开发约束：

1. 前端仅依赖 HT 原生内核， 不引入、不集成任何外部第三方可视化组件、图表库、拓扑插件，全部界面渲染、图表绘制、交互逻辑通过 HT 内置 API 实现；
2. 整体采用标准 B/S 架构，页面原生兼容 PC、平板、手机浏览器访问，同时支持无改造嵌入 Angular、React、Vue 等主流前端工程；
3. 数据对接仅采用行业通用 Web 前端通信方案，不开发定制私有数据转发、解析逻辑，所有数据交互基于标准化接口实现。

本项目针对工厂 7 类核心自动化产线完成分层 2D 组态场景开发：支腿焊接自动线、小件自动化机加线、综合自动化产线、输送直管热处理线、输送直管自动热处理线、输送直管自动焊接线、专汽搅拌桶涂装自动线。所有场景采用 数据驱动渲染模式，接入现场 PLC、传感器测点实时数据，同步还原工艺流程、设备运行状态、告警信息与效率指标。

整体前端技术架构

2.1 渲染层架构

底层依托 HT WebGL+Canvas 双渲染管线，通过ht.graph.GraphView构建 2D 组态主画布，内置 2D/2.5D 等距透视变换能力。项目内置整套工业设备矢量模型素材库（焊接机器人、机加机床、多用炉、涂装前处理室等），资源全部通过 HT 绘图 API 或原生素材导入工具生成。

2.2 数据通信层（通用标准对接方案）

遵循工业 Web 前端通用数据交互规范，仅使用两类标准化通信方式，无自定义私有协议解析逻辑：

1. WebSocket 长连接：订阅后端转发的 PLC 实时测点数据流，包含设备运行状态、实时工艺参数、分级告警消息，数据格式统一为标准 JSON；
2. HTTP 定时轮询接口：拉取历史效率统计、时段告警清单、产线汇总报表等非高频静态数据，支持前端传入起止时间戳筛选对应时段设备记录。

前端通过原生 JS 完成数据解析后，调用 HT 内置数据绑定 API，将数值、状态、告警标识与画布内图元、右侧面板图表做单向绑定，实现页面自动刷新。

2.3 业务交互层

所有设备 hover 高亮、点击弹窗详情、图表联动、告警轮播逻辑，均基于 HT 原生交互事件 API 开发：

• 鼠标移入图元：触发onEnter修改图元填充描边色实现高亮，onLeave 恢复；
• 鼠标点击设备：通过onClick唤起 弹出面板组件，渲染设备详情二维视图与参数面板；
• 图表渲染：产线效率曲线、柱状对比图全部使用 HT 内置 Drawing 组件库提供丰富的图表组件，支持可视化配置修改样式；
• 告警列表：使用 HT 表格组件渲染，实现实时告警轮播清单，自动按告警级别排序。

各产线组态场景开发实现细节

3.1 支腿焊接自动线组态开发

场景结构设计

主画布分区排布多组点焊机械臂、输送工装、变位机模型，按照真实产线布局完成坐标排布；右侧固定双面板区域：上方实时在线 / 停机 / 故障设备统计卡片，下方两块 HT 原生图表（设备效率趋势曲线图、分页告警清单表格）。

数据绑定与交互实现

1. 设备状态联动：每台点焊机械臂绑定 PLC 输出的运行、待机、故障三级状态码，前端根据状态码切换图元配色；设备告警测点实时推送后，对应机械臂图元开启 HT 原生闪烁动画，告警信息自动追加至右侧轮播表格；
2. 设备钻取详情：点击任意点焊机械臂唤起详情弹窗，弹窗内通过 HT 绘制设备二维视图，两侧参数面板绑定实时测点：焊接电流、焊接电压、送丝速度，同时内嵌单台机器人效率趋势曲线；
3. 多机器人协同逻辑：画布内置多机协调运行状态标识，后端同步多机器人 PLC 协同信号，前端实时展示群组同步 / 异常状态。

3.2 小件自动化机加线组态开发

场景结构设计

画布横向划分 6 条综合加工产线，每条产线排布多台精工车床设备模型；底部划分两大固定面板：左侧设备告警清单表格，右侧全产线效率指标柱状图表，无需外部表格、图表组件支撑。

核心开发逻辑

1. 设备状态分类统计：前端解析后端推送的设备状态字段，自动聚合统计作业、待机、关机、故障四类设备数量，渲染至顶部数字卡片；
2. 产线钻取流程可视化：点击单条综合线唤起详情弹窗，弹窗内基于 HT 矢量绘图还原法兰完整加工工序流程，同步展示该产线专属告警列表、节拍效率指标；
3. 堆积预警可视化：通过后端推送工件堆积计数测点，对应产线图元叠加黄色预警遮罩，直观展示工位物料堆积异常。

3.3 自动化机加产线组态开发

该产线核心工艺为机械臂自动转运法兰至机床完成钻孔、扩孔、滚花加工，开发重点为 输送线动态动画与机床参数可视化。

1. 输送与机械臂动画实现：基于 HT 帧动画 API 开发传送带工件平移、机械臂抓取转运动作，动画帧速率与后端推送的产线节拍数据联动，真实复刻现场输送速度；
2. 机床详情参数面板：点击机加机床弹出详情面板，绑定主轴转速、主轴负载、切削进给三类核心加工测点；
3. 效率对比图表：右侧柱状图自动汇总各机床开机率、作业率、利用率、故障时长，数据通过 WebSocket 实时更新。

3.4 输送直管热处理系列产线

（ 1）输送直管热处理线

场景包含多用炉、履带输送机构、RGV 转运小车模型，底部告警表格支持前端通过 HTTP 接口传入时间参数，查询指定时段设备历史告警记录。

划过多用炉设备自动高亮，点击弹窗展示焊接电流、电压、送丝速度、炉体效率指标等测点数据。

（ 2）输送直管自动热处理线

核心设备为热感应处理设备，画布搭建空中机械臂转运水冷直管至感应加热工位的完整流程。

弹窗面板绑定加热电流、工作电压、电源功率、炉体温控效率指标，所有温控曲线使用 HT 原生图表绘制。

（ 3）输送直管自动焊接线

还原完整自动化焊管流程：管材堆放→自动上管→法兰焊接→成品下料，多组焊接机器人沿输送线排布。

机器人图元绑定焊接全流程测点，异常告警时图元闪烁并推送至右侧告警列表。

3.5 专汽搅拌桶涂装自动线组态开发

产线采用空中悬挂 + 地面滑橇一体化输送布局，分为前处理室、粉尘固化炉两大核心工位。

1. 前处理室详情参数：弹窗展示槽液水压、槽液温度、液位高度实时测点；
2. 粉尘固化炉监控：绑定保温区温度、辐射炉温度、炉体能耗核心指标；
3. 整条涂装线输送动作基于 HT 动画 API 实现滑橇连续流转，输送故障时整条流水线图元置灰告警。

前端跨端集成与工程适配开发要点

1. 多终端自适应：HT 画布开启原生自适应布局配置，页面无需额外媒体查询，自动适配 PC 大屏、平板、手机浏览器缩放；
2. 前端工程集成兼容：HT 页面输出标准 HTML+JS 资源，可直接嵌入 Angular/React/Vue 工程，不依赖第三方集成桥接组件；
3. 轻量化性能优化：所有设备模型采用 HT 矢量轻量化素材，关闭冗余渲染管线，高频 WebSocket 数据做前端节流处理，保证多机器人、多工位同时刷新场景无卡顿；
4. 无第三方依赖校验：项目打包产物仅包含 HT 核心内核 js 文件、业务自定义脚本、矢量素材资源，打包结果不引入任何外部可视化、图表、表格类第三方库。

项目落地开发总结

本工厂流水线 2D 组态可视化项目完全基于 HT 自研引擎完成全栈前端开发，严格遵循 无外部第三方组件、标准化通用数据对接、纯 B/S 原生 Web 架构三大开发约束。通过分层拆分 7 类自动化产线独立组态场景，依托 HT 原生 2D/2.5D 渲染、交互、图表、表格 API，实现了产线工艺流程还原、PLC 测点实时数据绑定、设备分级告警、钻取式详情查看、多终端统一访问全部业务能力。

整套方案无需改造现有工业采集后端，仅基于 WebSocket、HTTP 通用接口完成数据交互，同时可无缝嵌入企业现有前端管理系统，适配离散制造多自动化产线集中监控的数字化管控需求，完全匹配灯塔工厂项目对生产流程多维度可视化、轻量化远程运维的建设目标。