
后端前端物联网工业制造数据可视化时序数据库【免费下载链接】FUXAWeb-based Process Visualization (SCADA/HMI/Dashboard) software项目地址https://gitcode.com/gh_mirrors/fu/FUXA点击查看免费下载本指南以 FUXA 官方 Getting-Started.md 为核心脉络带你在实际项目中完成从零到可用的全流程启动服务器、接入工业设备并订阅实时数据、在画布上搭建可视化视图、配置终端布局最后定义阈值报警与用户认证。读完本文你将掌握 FUXA 的端到端搭建方法并能在后续开发中直接复用仓库内各 HowTo 文档与源码中的实现细节。1. 前置条件让 FUXA 服务器运行起来开始一切操作之前需要保证 FUXA 服务端已启动。FUXA 是一个 Web 化的过程可视化SCADA/HMI/Dashboard软件后端基于 Node.js前端基于 Angular官方提供了多种安装途径详见 docs/Installing-and-Running.mdNPM 全局安装要求 Node.js 18npm install -g --unsafe-perm frangoteam/fuxa随后直接执行fuxa命令启动。若在 Linux 上不需要通过 S7 协议与西门子 PLC 通信推荐安装不带原生驱动的frangoteam/fuxa-min版本可规避 node-snap7 的编译问题。源码方式进入server/目录执行npm install npm start。Dockerdocker pull frangoteam/fuxa:latest再执行docker run -d -p 1881:1881 frangoteam/fuxa:latest如需持久化项目、DAQ 历史、日志与资源图片可挂载_appdata、_db、_logs、_images等数据卷。仓库根目录也提供了 compose.yml 可直接使用。预构建 Electron / Headless 可执行文件适合无图形界面的嵌入式设备与服务器场景其中 Headless 版本自包含运行时用户数据存放在~/.fuxa-headless-data日志在~/.fuxa-headless-data/logs。无论哪种方式FUXA 默认在1881 端口提供服务对应 server/settings.default.js 中的uiPort: process.env.PORT || 1881浏览器访问http://localhost:1881或宿主机 IP:1881即可看到界面。FUXA 的 Web 服务主要提供两个页面终端用户可视化页http://localhost:1881/home面向操作员用于日常监视与操作。项目编辑器http://localhost:1881/editor面向工程师用于连接设备、设计视图与配置系统。2. Step 1连接设备并配置 Tags要驱动可视化第一步是让 FUXA 拿到设备数据。进入编辑器后在Connections连接面板中管理设备见 docs/HowTo-Devices-and-Tags.md2.1 支持的工业协议与设备类型FUXA 原生支持多种主流工业协议Getting Started 文档明确列举了Modbus RTU/TCP、西门子 S7、OPC-UA、BACnet IP、MQTT、Ethernet/IPAllen Bradley。从 server/runtime/devices/ 目录结构看实际实现还覆盖了GPIO树莓派、MELSEC三菱、Omron Ethernet/IP、Redis、ODBC、HTTP Request、Webcam、FUXA Server等类型且支持通过插件机制扩展如 WebAPI。2.2 添加并连接设备以OPC-UA设备为例新建设备连接、填写服务端点后即可建立连接连接成功后才能在设备下添加 Tags标签/变量也就是实时数据点的订阅。不同协议接入细节略有差异OPC-UA直接在设备属性中配置连接后可浏览服务器节点并订阅 Tags。Modbus需要先在Plugins插件中安装 Modbus 驱动再创建连接。MQTT配置 Broker 地址并创建 Topic 订阅即可推送实时值。WebAPI通过 HTTP 请求拉取 JSON 数据并把 JSON 结果映射为 Tag。2.3 配置 Tags 订阅Tag 是 FUXA 数据模型的最小单元每个 Tag 对应设备上的一个实时变量。设备连接成功后即可创建 Tag 并订阅其值变化这些值随后会通过 WebSocket 实时推送到前端可视化视图。2.4 高级标签选项数据类型与缩放脚本如果某个 Tag 类型没有预定义的数据类型可以在Tag Options标签选项中手动指定基础类型。文档中的典型案例是TIME 数据类型它没有预定义类型但其底层基础类型通常是int64/uint64且时间值以毫秒为单位。Tag Options 还支持Scale 脚本缩放脚本可完成任意数据类型转换。例如 TIME 数据实际是一个LOW/HIGH数组可用一个小脚本取出数组元素并转成数值返回同时写回脚本可以直接返回真实值用于下发。需要注意两个硬性约定脚本参数必须命名为value因为编辑器按此过滤出可用的相关脚本脚本中不要写注释否则不被支持。3. Step 2创建实时可视化界面设备数据就绪后进入编辑器创建视图View并按需添加最常用的控件、形状与图表。详细步骤见 docs/HowTo-View.md、docs/HowTo-bind-Controls.md、docs/HowTo-bind-Shapes.md 与 docs/HowTo-Chart-Control.md。3.1 创建空视图在编辑器左上角点击图标选择Canvas/SVG创建视图画布创建后点击Property属性打开属性面板定义视图的尺寸Size与背景Background3.2 将控件绑定到标签在编辑器中选择视图即可将各类控件绑定到设备 TagOutput 控件绑定 Tag 后实时显示其值。Input 控件绑定 Tag 后允许操作员直接输入并写入新值。Select 控件为 Tag 提供下拉选项用于离散选择。Slider 控件通过滑块连续调节 Tag 值。绑定方式通常是选中控件 → 打开属性 → 在变量/标签选项中关联到目标 Tag即可建立数据通路。3.3 将形状绑定到标签除常规控件外FUXA 还支持把Shapes形状绑定到 Tag从而根据实时值改变图形状态。更进一步的Process Engineering 形状工艺形状如 Tank 罐体可模拟液位、流量等过程量是构建工业工艺画面的核心手段相关 SVG 资源存放于 server/_images/Tanks/。3.4 添加图表控件在视图上添加Chart图表控件后可在Line charts折线图中定义曲线diagrams并附加到图表控件上实现历史数据与实时数据的趋势展示图表依赖 DAQ数据采集能力其开关在服务端配置daqEnabled: true见 server/settings.default.js默认开启历史数据落盘到_db目录。4. Step 3配置终端 UI 布局可视化页面面向终端用户布局与交互方式在编辑器的Layout settings布局设置中统一配置详见 docs/HowTo-UI-Layout.md在General常规页签中可定义Start View启动视图访问http://localhost:1881时默认展示的首页视图。Zoom缩放启用后可用鼠标滚轮缩放视图、按住鼠标左键拖动平移视图。Dialog Mode of input field输入字段对话框模式启用后Input 值控件会以对话框形式弹出输入。Show Navigation显示导航控制是否显示顶部标题栏与导航菜单。隐藏开发按钮隐藏用于在 Edit编辑与 Home运行之间切换的开发按钮。在Navigation Side Menu导航侧边菜单页签中可定义菜单项以及菜单的各类样式属性在Header Navigation Bar顶部导航栏页签中可定义是否展示报警通知项及其样式。5. Step 4配置阈值报警报警是 SCADA 系统的核心能力之一。在编辑器的Alarms报警面板中配置详见 docs/HowTo-setup-Alarms.md5.1 报警的四种条件级别一个报警绑定到一个 Tag可对该 Tag 定义4 种条件Condition分别对应四个级别级别源码枚举client/src/app/_models/alarm.ts含义High High高高报HIGH_HIGH highhigh严重越上限High高报HIGH high越上限Low低报LOW low越下限Message消息/信息报INFO info信息级提示5.2 报警参数与触发原理源码级每个级别由一组子属性描述对应AlarmSubProperty模型见 alarm.ts核心参数包括enabled该级别是否启用。min / max触发区间。运行时判定onrange (value min value max)即 Tag 值落入区间即触发见 server/runtime/alarms/index.js。checkdelay检查间隔秒决定每次状态检查的最小节流周期避免高频抖动。timedelay触发延时秒值持续落入区间超过该时长后才正式激活报警用于过滤瞬时毛刺。ackmode确认模式float浮动离开区间自动清除、ackactive激活需确认、ackpassive被动确认。text / group / color / bkcolor报警文案、分组及前台显示的前景色/背景色。服务端报警管理器每1 秒ALARMS_CHECK_STATUS_INTERVAL 1000执行一次状态检查内部是一个状态机Tag 值在触发区间内且超过timedelay后报警状态从VOID依次进入ON → OFF → ACK并把每次状态迁移持久化到报警存储alarmstorage形成完整的报警历史。5.3 报警动作与展示每个报警还可配置多个动作Actions例如弹出对话框、给某个 Tag 设置值等。从AlarmActionsType枚举alarm.ts可确认内置动作包括popup弹出视图、setView切换视图、setValue写入标签值、runScript执行脚本、toastMessageToast 消息提示。当前活动报警与历史报警可以通过两种方式展示一是配置视图由菜单进入二是通过顶部 Header 上的报警按钮进入对应上文的 Header Navigation Bar 配置。6. Step 5启用认证并创建客户用户Getting Started 的最后一步是激活认证并创建客户用户。FUXA 默认未启用认证需要修改服务端配置文件后重启生效配置方法见 docs/Settings.md。6.1 服务端认证配置服务器配置位于server/_appdata/settings.js运行时从 server/settings.default.js 模板生成修改后必须重启服务器。核心认证参数secureEnabled: true, // 启用/禁用认证与授权 secretCode: strong-random-secret,// 用于编码 Token 的密钥务必使用强随机串 tokenExpiresIn: 1h // Token 过期时长1h1小时6060秒1d1天另外 settings.default.js 中还提供了可选的刷新令牌机制enableRefreshCookieAuth启用 HttpOnly Cookie 刷新令牌流程与refreshTokenExpiresIn如7d7 天。启用后前端路由由 auth.guard.ts 守卫保护未登录用户无法进入/editor与/home。6.2 创建客户用户启用认证后系统预置管理员账号admin / 123456首次登录后请立即修改。之后在Users用户管理界面对应 client/src/app/users/ 目录创建客户用户新建用户并设置密码通过Users Roles用户角色功能定义角色再为角色分配权限组件实现见 users-roles 与 users-role-edit服务端用户 API 位于 server/api/users/index.js其数据存储在_db目录的用户存储中且接口在返回前会对用户对象脱敏删除password字段。客户用户登录后即可访问为其分配的视图与操作权限实现多用户场景下的职责分离。7. 进阶技巧Tips and TricksGetting Started 文档末尾的 Tips 部分没有展开这里结合仓库文档补充两个高价值实践7.1 为控件与形状配置交互事件在形状和按钮控件上可以配置鼠标click单击、mouseDown按下、mouseUp松开事件来执行任务详见 docs/HowTo-configure-events.md内置事件类型包括Open Page在主窗口中显示某个视图Open Card以弹窗卡片形式显示视图卡片跟随鼠标位置可同时打开多张Open Dialog以置顶对话框显示视图典型用于参数配置Open iframe嵌入外部 HTML 文档可定义窗口尺寸与缩放比例Open Window在新浏览器窗口中打开可定义窗口大小Set Value设置 Tag 值或对当前值进行增减Toggle Value在 1/0 之间切换 Tag 值1 变 00 变 1Set from Input and Close组合用法通过带 OK 确认的对话框写入若干值后关闭。这是让画面从只能看变成能操作的关键能力。7.2 常用的服务器运行参数在 server/settings.default.js 中除认证外还有若干影响运行方式的关键开关可根据项目规模调整broadcastAllfalse时只向前端推送当前可视化视图绑定的 Tag 值true时推送全部 Tag大规模项目建议保持false以降低网络开销lazyViewLoadingtrue时启用视图按需加载启动时仅下发视图元数据打开视图时才加载内容适合视图数量庞大的项目daqEnabledDAQ 历史数据采集总开关daqTokenizer控制历史库文件的分片周期默认 24 小时logApiLevelHTTP 请求日志级别dev/combined/common/short/tiny/noneallowedOriginsCORS 允许来源默认允许 localhost、127.0.0.1、192.168.*、10.* 等内网段apiRateLimit*与authRateLimit*API 与登录接口的限流参数默认对 HMI/SCADA 场景较为宽松。8. 进一步阅读docs/HowTo-Devices-and-Tags.md各协议设备的接入与 Tag 配置演示docs/HowTo-bind-Controls.md / docs/HowTo-bind-Shapes.md控件与形状绑定docs/HowTo-Chart-Control.md图表趋势配置docs/HowTo-UI-Layout.md终端布局与导航docs/HowTo-setup-Alarms.md报警配置演示docs/HowTo-configure-events.md交互事件docs/HowTo-configure-Script.md脚本编写与调度docs/Settings.md 与 server/settings.default.js服务端全量配置参考至此你已经完成了 FUXA 的完整入门闭环设备接入 → 数据订阅 → 可视化搭建 → 布局调优 → 阈值报警 → 用户认证。接下来的每一步细节都可以在上面的文档与源码中找到可复用的实现依据。赞分享后端前端物联网工业制造数据可视化时序数据库【免费下载链接】FUXAWeb-based Process Visualization (SCADA/HMI/Dashboard) software项目地址https://gitcode.com/gh_mirrors/fu/FUXA点击查看免费下载相关推荐pm-skills 指标仪表盘设计指南从 North Star 到告警阈值的完整实战框架pm skills 指标仪表盘设计指南从 North Star 到告警阈值的完整实战框架 导读 本文基于 PM Skills Marketplace 中 pmAI 技能AI 插件如何快速构建嵌入式设备仪表盘Mongoose开发完整指南如何快速构建嵌入式设备仪表盘Mongoose开发完整指南 想要为你的嵌入式设备打造专业级的Web管理界面吗Mongoose设备仪表盘开发为嵌入式系统提供了完嵌入式网络通信物联网如何快速搭建 Node-RED 实时数据仪表盘零基础入门指南 如何快速搭建 Node RED 实时数据仪表盘零基础入门指南 Node RED Dashboard 是一款专为 Node RED 设计的实时数据可视化工上一篇ComfyUI_IPAdapter_plus模型加载问题解决方案下一篇免费开源AI图像放大终极指南告别模糊用Upscayl让照片瞬间高清创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考