五分钟上手教程

Executive Summary

本教程将引导您在五分钟内完成第一个 FUXA 项目的搭建，包括新建项目、添加模拟设备、定义数据标签、创建视图、拖入仪表盘组件并绑定数据，最终实现并运行一个动态 HMI 界面。无论您是否有工业自动化经验，都可通过本教程轻松体验 FUXA 强大的可视化与实时数据能力。

系统架构

FUXA 采用前后端分离的架构，前端基于 Angular 实现人机界面编辑与展示，后端负责数据采集与设备通信。核心流程如下：

mermaid

核心组件

项目编辑器（Editor） ：负责项目、视图、组件的增删改查及属性配置。代码参考

设备管理（Device List） ：用于添加、编辑、管理物理/模拟设备与数据标签。代码参考

视图设计器（View Designer） ：图形化拖拽方式创建 HMI 页面，支持组件绑定数据。代码参考

仪表盘组件（Gauge） ：可视化显示实时数据（如仪表盘、进度条等），支持属性绑定。

实践步骤

1. 创建新项目

启动 FUXA 并登录 Web 管理界面。

进入“项目”或“编辑器”页面，点击左上角“新建项目”按钮，输入项目名称并保存。

2. 添加模拟设备

左侧菜单选择“设备”管理，点击“添加设备”。

选择设备类型为“模拟（internal）”或“模拟器”，填写设备名称（如 SimDevice），保存。

3. 定义数据标签

在设备列表中选择刚创建的模拟设备。

点击“添加标签”，输入标签名称（如 Tag1），类型选择 Number，初始值可设置为 0。

保存标签，确保其出现在标签列表中。

4. 创建视图 (View)

切换到“编辑器”页面，点击“添加视图”。

输入视图名称（如 MainView），选择类型为 SVG，确认创建。

新建的视图会自动加载到画布中。

5. 拖入仪表盘组件

在编辑器右侧或下方的“工具箱”中找到“仪表盘（Gauge）”组件。

拖拽该组件到画布合适位置。

选中该组件，点击“属性”或“编辑”，进入属性面板。

6. 绑定数据标签

在仪表盘组件属性面板中，找到“数值绑定”或“变量”设置项。

从下拉列表选择之前创建的 SimDevice.Tag1。

确认保存，仪表盘即可与数据标签实时联动。

7. 运行并查看动态界面

点击编辑器顶部的“运行”或“测试”按钮，系统会自动保存并打开测试窗口。

在新窗口中可看到仪表盘随 Tag1 数据的变化动态展示。

可在设备标签页手动修改 Tag1 的值，观察仪表盘实时更新。

流程图

mermaid

关键实现细节与代码参考

新建项目/视图：EditorComponent.addView() 代码行: ~600+

添加设备/标签：DeviceListComponent.onAddTag() 代码行: ~160+

拖拽组件/绑定变量：EditorComponent.openEditGauge() 代码行: ~900+

运行/预览：EditorComponent.onStartCurrent() 代码行: ~780+

前端动态数据绑定：FuxaViewComponent.loadWatch() 代码行: ~130+

常见问题与排查

无法看到仪表盘变化？

检查是否正确绑定了模拟设备的数据标签。

确认模拟标签的值有变化（可在设备管理页面手动修改）。

组件属性无法保存？

请确保点击了“保存”并刷新页面后再进行测试。

页面无法运行？

检查浏览器控制台是否有报错，确认后端服务正常启动。

References

祝您使用愉快！如需更深入的功能探索，请查阅官方文档。