【连载4】FUXA完整实战教程：从安装部署到第三方集成，搭建工业级可视化系统

FUXA RRO1.2.8专业版源码

📚 上一篇回顾：我们拆解了FUXA编辑器的核心功能，并通过简易车间温度监控案例掌握了基础操作。

🎯 本篇目标：带来完整实战教程，从FUXA环境准备、多类型设备对接，到复杂工业可视化项目搭建、高级功能（报警/调度/第三方集成）实现，再到最终的项目部署与优化，全程手把手教学，帮你真正落地工业级可视化系统。

📋 实战案例目标

本实战案例以"小型工厂多区域监控系统"为目标，实现以下功能：

✅ 对接2台不同协议设备（西门子S7-1200 PLC、Modbus TCP传感器） ✅ 实时展示温度、压力、设备运行状态等6项参数 ✅ 实现超标报警、定时数据导出、手机短信通知 ✅ 支持多终端访问

一、前置准备：环境搭建与工具准备

在开始实战前，需完成FUXA安装、设备调试、工具准备三步，确保环境可用。

1️⃣ FUXA安装：Windows/Mac/Linux全平台指南

FUXA基于Node.js开发，支持全平台安装，推荐使用官方安装包（最简单）或Docker部署（适合生产环境）。

🔹 Windows系统安装（推荐新手）

步骤1：下载安装包 访问FUXA官网，进入"Download"页面，下载Windows版本安装包（如FUXA-Setup-1.1.10.exe）

步骤2：双击安装 打开安装包，按引导完成安装（默认路径即可，勾选"Create desktop shortcut"创建桌面快捷方式）

步骤3：启动验证 安装完成后，双击桌面"FUXA"图标，自动启动服务并打开浏览器（默认地址：http://localhost:1881），出现登录界面即安装成功（默认账号：admin，密码：admin）

🔹 Mac/Linux系统安装

步骤1：安装Node.js FUXA依赖Node.js（v14+），访问Node.js官网下载对应系统版本，安装后执行 node -v 验证（显示版本号即成功）

步骤2：安装FUXA 打开终端，执行命令 npm install -g fuxa（全局安装）

步骤3：启动服务 终端执行 fuxa，出现"Server running on port 1881"即启动成功，浏览器访问 http://localhost:1881 即可

🔹 Docker部署（生产环境推荐）

步骤1：安装Docker 确保本地已安装Docker（Windows需开启WSL2）

步骤2：拉取镜像 终端执行 docker pull frangoteam/fuxa:latest

步骤3：启动容器 执行命令（映射端口和数据卷，确保数据持久化）：

docker run -d -p 1881:1881 -v fuxa-data:/app/data --name fuxa frangoteam/fuxa:latest

步骤4：验证 浏览器访问 http://服务器IP:1881，登录后即可使用（数据卷 fuxa-data 用于保存项目文件，避免容器删除后数据丢失）

2️⃣ 工具与设备准备

📦 硬件设备：

• 西门子S7-1200 PLC（或仿真器）
• Modbus TCP温度压力传感器（如RS485转TCP模块+模拟量传感器）

🔧 调试工具：

• Modbus Poll（Modbus设备调试）
• S7-1200仿真软件（如TIA Portal+PLCSIM）
• 网络调试助手（验证设备通信）

📝 其他准备：

• 设备IP地址（确保与FUXA服务器在同一局域网）
• 设备通信协议参数（如PLC机架号、槽号、Modbus从站地址、寄存器地址）

二、核心实战1：多协议设备对接配置

工业场景中常需对接多种协议设备，本案例将同时对接"西门子S7-1200 PLC"和"Modbus TCP传感器"。

1️⃣ 设备基础配置（前提）

确保设备已完成基础网络配置，可与FUXA服务器通信：

🔹 西门子S7-1200 PLC配置

• 通过TIA Portal设置IP地址（如192.168.1.100）
• 启用"允许远程访问"
• 下载程序到PLC（确保寄存器地址与标签对应）

🔹 Modbus TCP传感器配置

• 通过厂商工具设置IP地址（如192.168.1.101）
• 设置Modbus从站地址（如1）
• 设置数据更新频率（如1次/秒）
• 确认温度/压力数据对应寄存器地址（如温度：40001，压力：40003）

2️⃣ FUXA设备配置（核心步骤）

登录FUXA后，进入"项目设置-设备配置"，分别添加两台设备：

🔹 添加西门子S7-1200 PLC

步骤1：点击"添加设备"，设备名称填写"PLC_S71200"，设备类型选择"SIEMENS > S7-1200/1500"

步骤2：通信参数配置：

步骤3：点击"测试连接"，显示"连接成功"即配置完成；若失败，检查IP是否可达、参数是否正确、PLC是否上电。

🔹 添加Modbus TCP传感器

步骤1：点击"添加设备"，设备名称填写"Sensor_ModbusTCP"，设备类型选择"Modbus > Modbus TCP"

步骤2：通信参数配置：

步骤3：点击"测试连接"，显示"连接成功"即完成配置。

3️⃣ 标签创建（关联设备数据）

进入"项目设置-标签管理"，为两台设备分别创建标签（标签即设备参数的映射，用于后续组件绑定）：

🔹 PLC标签创建（西门子S7-1200）

点击"添加标签"，填写标签信息：

点击"保存"，重复操作添加其他PLC参数标签（如车间1压力、设备故障信号）。

🔹 Modbus传感器标签创建

点击"添加标签"，填写标签信息（Modbus地址格式：类型+地址，如40001对应保持寄存器）：

点击"保存"，完成标签创建。

三、核心实战2：搭建多区域监控可视化界面

基于已配置的设备和标签，搭建"小型工厂多区域监控系统"界面，实现多设备参数实时展示、状态可视化、交互控制。

1️⃣ 项目初始化与界面布局

步骤1：点击顶部导航栏"文件-新建项目"，项目名称填写"工厂多区域监控系统"，点击"确定"

步骤2：界面布局设计，从左侧工具栏拖拽组件完成基础布局，推荐结构：

┌─────────────────────────────────────────────────────┐
│  顶部：标题栏 + 系统状态                              │
├──────────────────┬──────────────────────────────────┤
│  左侧：车间1监控区  │  右侧：车间2监控区                │
│  - 温度仪表盘      │  - 温度仪表盘                     │
│  - 压力仪表盘      │  - 压力仪表盘                     │
│  - 运行状态指示灯  │  - 运行状态指示灯                 │
├──────────────────┴──────────────────────────────────┤
│  下方：数据趋势区（折线图）+ 控制区（按钮）            │
└─────────────────────────────────────────────────────┘

布局说明：

• 📊 顶部：标题栏（文本组件，显示"工厂多区域监控系统"）、系统状态（数值显示组件，显示当前在线设备数）
• 🏭 左侧：车间1监控区（矩形组件作为容器，包含温度仪表盘、压力仪表盘、设备运行状态指示灯）
• 🏭 右侧：车间2监控区（同上，对应Modbus传感器参数）
• 📈 下方：数据趋势区（折线图，展示2个车间温度/压力24小时趋势）、控制区（按钮组件，实现设备启停、数据导出）
• 🎨 背景：矩形组件设置浅灰色背景，添加网格线确保布局整齐

2️⃣ 组件数据绑定（核心）

选中每个组件，在右侧属性面板"数据绑定"中关联对应标签，部分关键组件配置如下：

🔹 仪表盘组件（温度/压力展示）

步骤1：选中车间1温度仪表盘，数据绑定选择"PLC_S71200 > PLC_车间1温度"

步骤2：设置数据范围：

• 温度：0-100℃
• 压力：0-16bar

步骤3：添加样式：仪表盘颜色设置为渐变（绿色-黄色-红色），对应正常-预警-超标状态。

🔹 指示灯组件（设备运行状态）

步骤1：拖拽"圆形"组件作为指示灯，数据绑定选择"PLC_S71200 > PLC_设备运行状态"

步骤2：添加动画配置：

• 绑定布尔值，1（运行）时显示绿色
• 0（停止）时显示红色
• 添加闪烁效果（停止状态时）

🔹 折线图组件（数据趋势展示）

步骤1：拖拽"折线图"组件，标题设置为"温度/压力24小时趋势"

步骤2：数据绑定：添加4个数据系列，分别关联：

• PLC_车间1温度
• PLC_车间1压力
• Sensor_车间2温度
• Sensor_车间2压力

步骤3：设置X轴：

• 时间（格式为"YYYY-MM-DD HH:mm"）
• 数据更新频率1次/分钟
• 数据保留24小时

步骤4：添加交互：

• 支持鼠标悬停查看具体时间点数值
• 添加数据筛选按钮（如按小时/天筛选）

🔹 按钮组件（设备控制）

步骤1：拖拽"按钮"组件，文本设置为"启动车间1设备"，绑定PLC设备运行状态标签

步骤2：添加点击事件脚本（组件脚本）：

// 启动/停止车间1设备
if (tags.PLC_设备运行状态.getValue() === false) {
  tags.PLC_设备运行状态.setValue(true); // 发送启动指令
  widget.setText("停止车间1设备");
  widget.setStyle("backgroundColor", "red");
} else {
  tags.PLC_设备运行状态.setValue(false); // 发送停止指令
  widget.setText("启动车间1设备");
  widget.setStyle("backgroundColor", "green");
}

3️⃣ 动画与交互优化

✨ 状态切换动画：为设备运行状态指示灯添加颜色渐变动画（绿色-红色过渡时间0.5秒）

🚨 数据超标报警动画：为温度仪表盘添加超标动画（温度>80℃时，仪表盘边框红色闪烁）

👆 交互反馈：控制按钮点击时添加按压效果（缩放比例0.95，释放后恢复1.0）

🖥️ 视图切换：添加"全屏显示"按钮，点击事件脚本调用 app.fullscreen() 实现全屏切换

四、核心实战3：高级功能实现（报警/调度/第三方集成）

基础监控界面完成后，添加工业场景必需的高级功能，提升系统实用性和智能化水平。

1️⃣ 超标报警功能（实时预警+历史记录）

实现"温度>80℃""压力>12bar"时自动报警，包含弹窗提示、声音报警、报警记录存储。

🔹 报警组件配置

步骤1：从左侧工具栏"交互组件"拖拽"报警组件"到界面，设置为默认隐藏

步骤2：添加报警规则脚本（全局脚本）：

// 定时检查参数是否超标（每1秒执行一次）
setInterval(function() {
// 定义超标条件
const temp1Over = tags.PLC_车间1温度.getValue() > 80;
const press1Over = tags.PLC_车间1压力.getValue() > 12;
const temp2Over = tags.Sensor_车间2温度.getValue() > 80;
const press2Over = tags.Sensor_车间2压力.getValue() > 12;

// 超标时触发报警
if (temp1Over || press1Over || temp2Over || press2Over) {
// 显示报警组件
    widgets.报警组件.setVisible(true);
// 设置报警内容
let alarmText = "超标预警：\n";
if (temp1Over) alarmText += "车间1温度超标（" + tags.PLC_车间1温度.getValue() + "℃）\n";
if (press1Over) alarmText += "车间1压力超标（" + tags.PLC_车间1压力.getValue() + "bar）\n";
if (temp2Over) alarmText += "车间2温度超标（" + tags.Sensor_车间2温度.getValue() + "℃）\n";
if (press2Over) alarmText += "车间2压力超标（" + tags.Sensor_车间2压力.getValue() + "bar）\n";
    widgets.报警组件.setText(alarmText);

// 播放报警声音（需提前导入音频文件）
const audio = newAudio("alarm.mp3");
    audio.play();
  } else {
// 数据正常，隐藏报警组件
    widgets.报警组件.setVisible(false);
  }
}, 1000);

🔹 报警记录存储

通过脚本将报警记录存储到本地JSON文件或对接数据库（如MySQL），示例（存储到本地）：

// 报警时记录数据（添加到上述超标判断逻辑中）
const alarmRecord = {
time: newDate().toLocaleString(),
content: alarmText,
level: "严重"
};

// 读取现有记录并添加新记录
fetch("/api/files/alarm-records.json")
  .then(response => response.json())
  .then(records => {
    records.push(alarmRecord);
// 写入文件
fetch("/api/files/alarm-records.json", {
method: "PUT",
body: JSON.stringify(records, null, 2),
headers: { "Content-Type": "application/json" }
    });
  });

2️⃣ 调度器功能（定时任务）

使用FUXA调度器实现定时任务，如"每天00:00自动导出前一天数据""每小时检查设备连接状态"。

步骤1：进入"项目设置-调度器"，点击"添加调度器"

步骤2：配置调度器参数：

步骤3：脚本内容（导出数据到CSV文件）：

// 导出前一天温度/压力数据到CSV
const moment = require("moment");
const fs = require("fs");

// 定义导出时间范围（前一天00:00到23:59）
const start = moment().subtract(1, "day").startOf("day").format("YYYY-MM-DD HH:mm:ss");
const end = moment().subtract(1, "day").endOf("day").format("YYYY-MM-DD HH:mm:ss");

// 查询趋势数据（FUXA内置API）
fetch(`/api/tags/history?tags=PLC_车间1温度,PLC_车间1压力,Sensor_车间2温度,Sensor_车间2压力&start=${start}&end=${end}`)
  .then(response => response.json())
  .then(data => {
// 转换为CSV格式
let csv = "时间,车间1温度(℃),车间1压力(bar),车间2温度(℃),车间2压力(bar)\n";
    data.forEach(item => {
      csv += `${item.time},${item["PLC_车间1温度"]},${item["PLC_车间1压力"]},${item["Sensor_车间2温度"]},${item["Sensor_车间2压力"]}\n`;
    });
// 写入CSV文件
const fileName = `数据导出_${moment().subtract(1, "day").format("YYYYMMDD")}.csv`;
fetch(`/api/files/${fileName}`, {
method: "PUT",
body: csv,
headers: { "Content-Type": "text/csv" }
    });
  });

步骤4：点击"保存"，调度器自动生效，可在"调度器日志"中查看执行记录。

3️⃣ 第三方集成（短信报警通知）

对接第三方短信服务（如阿里云短信、腾讯云短信），实现超标时向管理员发送短信通知。

步骤1：准备工作

• 在短信服务平台申请API密钥
• 申请短信模板（如"【工厂监控】警告：{车间} {参数}超标，当前值：{数值}，时间：{时间}"）

步骤2：编写短信发送脚本（添加到报警逻辑中）：

// 对接阿里云短信API（示例）
functionsendSms(alarmText) {
const accessKeyId = "你的AccessKeyId";
const accessKeySecret = "你的AccessKeySecret";
const phoneNumber = "管理员手机号";

// 阿里云短信API请求参数
const params = {
PhoneNumbers: phoneNumber,
SignName: "你的短信签名",
TemplateCode: "你的短信模板CODE",
TemplateParam: JSON.stringify({ content: alarmText })
  };

// 发送请求（使用axios，需先安装：npm install axios）
const axios = require("axios");
  axios.post("https://dysmsapi.aliyuncs.com/", null, { params })
    .then(response =>console.log("短信发送成功：", response.data))
    .catch(error =>console.error("短信发送失败：", error));
}

// 报警时调用
sendSms(alarmText);

步骤3：测试验证：手动模拟参数超标，检查是否收到短信通知。

五、项目部署与优化

实战项目完成后，需部署到生产环境并优化性能，确保稳定运行。

1️⃣ 项目导出与部署

步骤1：项目导出 点击顶部导航栏"文件-导出项目"，选择导出格式为"FUXA项目文件（.fuxa）"，保存到本地

步骤2：生产环境部署

方式1：Docker部署（推荐） 将导出的项目文件导入Docker容器中的FUXA（通过"文件-导入项目"）

方式2：服务器部署 在生产服务器安装FUXA，导入项目文件，设置开机自启（Windows可创建快捷方式到启动文件夹，Linux使用systemd）

步骤3：多终端访问 在局域网内，其他设备通过"http://服务器IP:1881"访问监控系统，支持PC、平板、手机（界面自动适配）

2️⃣ 性能优化建议

⚡ 数据更新频率：根据需求调整，非关键参数（如环境温度）可降低更新频率（如5秒/次），减少服务器压力

💾 数据缓存：使用FUXA内置缓存功能，避免重复请求设备数据

🎨 组件优化：减少不必要的动画效果，复杂界面使用多视图切换，避免单页面组件过多

💿 备份策略：定时备份项目文件和历史数据，避免数据丢失

3️⃣ 常见问题排查

六、总结与后续

本篇通过完整实战案例，覆盖了FUXA从环境搭建、多协议设备对接、可视化界面设计，到高级功能（报警/调度/第三方集成）实现、项目部署的全流程。

🎓 掌握技能：

• ✅ FUXA环境搭建与配置
• ✅ 多协议设备对接（西门子S7-1200、Modbus TCP）
• ✅ 工业可视化界面设计
• ✅ 报警系统实现
• ✅ 定时任务调度
• ✅ 第三方服务集成
• ✅ 项目部署与优化

🚀 后续扩展： 掌握这些技能后，你可根据实际工业场景扩展功能，如：

• 对接更多设备协议（OPC UA、MQTT）
• 实现3D可视化
• 对接企业ERP系统

📖 下一篇预告：我们将解析FUXA高级进阶技巧，如自定义组件开发、脚本模块化、大规模项目管理，帮助你应对更复杂的工业可视化需求。

💡 温馨提示：本教程内容仅供参考，实际应用中请根据具体设备和环境调整配置参数。如有疑问，欢迎在评论区留言交流！

关注我们，获取更多工业自动化与可视化技术干货！ 🎯