Modbus数据采集 Web 平台介绍

自己搭建的Modbus Web模拟,为了实时监控modbus的数据以及创建modbus的tcp/rtu的模拟服务器框架,方便自娱自乐的数据操作平台。感兴趣的话,可以去开源的项目地址:

前端项目:https://github.com/feiyuluoye/mutil-modbus-frontend

后端还需要优化一些数据,modbus rtu 服务器自动模拟数据发送的功能还未实现,目前只实现了modbus tcp的模拟数据自动发送功能,待实现基础rtu自动发送自动接收之后,再贴出来。modbus客户端支持接收外部或者自身模拟的tcp/rtu服务端的数据。

一、首页 / 概述

1.1 英雄区域(Hero)

主标题

Data Collector Web -- 让工业数据采集「看得见、配得快、管得住」。

副标题 / 标语

一站式 Modbus TCP/RTU 数据采集与告警平台,从设备到数据,只需几分钟。

视觉建议

  • 仪表盘截图,包含:
    • 服务器列表
    • 实时曲线
    • 告警列表

主要操作按钮(CTA)

  • 立即开始 -- 跳转到快速入门或登录页面。

1.2 核心价值主张

  • 快速接入多种 Modbus 设备
    通过 Web 界面即可配置 Modbus TCP 与 RTU,无需手写采集代码。
  • 📊 实时监控 + 历史追溯
    仪表盘实时展示关键点位,历史数据统一存储,支持查询与分析。
  • 🚨 灵活的告警规则系统
    基于点位阈值的实时评估,可启用/停用、静音、查看告警历史与处理状态。
  • 🔄 配置集中管理与批量导入
    服务器 / 设备 / 点位统一管理,支持 CSV 批量导入和更新,便于项目迁移与版本控制。

1.3 快速上手提示

注册并登录平台,仅需约 5 分钟即可添加第一个 Modbus 服务器,并在仪表盘上看到实时数据。

二、功能特性详解

每个核心功能推荐在 Web 中以独立模块或页面呈现,并配合截图 / GIF / 短视频。

2.1 服务器管理(Server Management)

功能说明

统一管理所有 Modbus 服务器(TCP 与 RTU),支持新增、编辑、启用/停用及运行状态查看。

用户收益

  • 所有连接参数统一可视化管理
  • 一键启用/停用,调试和维护更方便
  • 快速定位当前哪些服务器在运行、是否存在连接问题

推荐展示内容

  • GIF:点击「新增服务器」→ 选择协议 → 填写 Host/Port 或串口参数 → 保存 → 启用。
  • 列表:服务器 ID、协议、连接信息、启用状态、运行状态。

示例用例

  • 为「锅炉房 PLC」新增一个 Modbus TCP 服务器,并启用采集。

2.2 设备与点位管理(Devices & Points)

功能说明

为每台服务器配置多个设备以及对应的寄存器点位,将原始寄存器地址映射为可读名称。

用户收益

  • 用「温度_1」「压力_主回路」等名称替代生硬的寄存器号
  • 可为每个点位设置单位、量程和说明,自带文档属性
  • 支持通过 CSV 批量导入,减少重复录入

推荐展示内容

  • 设备编辑页面:设备 ID、地址、说明
  • 点位表格:寄存器地址、名称、数据类型、量程、单位

示例用例

  • 为某锅炉设备配置多个温度/压力点位,并设置适当的采集周期。

2.3 数据采集与运行时管理(Data Collection & Runtime)

功能说明

后端运行时按配置周期性轮询设备,采集点位数据并写入数据库,前端和 API 可实时访问。

用户收益

  • 无需手写轮询循环与存储逻辑
  • 配置驱动,修改采集参数无需重新部署代码
  • 运行状态可视化,采集链路问题易于排查

推荐展示内容

  • 运行状态页面:采集器是否运行、最近一次采集时间、错误计数等
  • 架构图:设备 → Runtime → 数据库 → Web API → Web 前端

2.4 报警系统(Alarm System)

功能说明

基于点位数值的规则引擎,可配置高/低阈值等条件,实时触发报警并记录历史。

用户收益

  • 提前识别温度、压力、流量等关键参数异常
  • 支持告警静音、确认、处理等操作,方便班组交接与追踪
  • 历史告警可用于事故复盘和报表

推荐展示内容

  • 告警规则列表:名称、条件、阈值、严重级别、启用状态
  • 告警历史列表:时间、点位、当前状态(未确认/已确认/已处理)

2.5 实时流与可视化(Streaming & Visualization)

功能说明

通过 SSE(Server-Sent Events)向前端流式推送最新点位数据,用于构建低延迟仪表盘。

用户收益

  • 无需反复轮询 API,即可获得平滑的实时曲线
  • 多个浏览器客户端可同时订阅数据
  • 适用于中控室 / 大屏展示场景

推荐展示内容

  • 实时仪表盘页面:折线图、数字卡片、状态灯
  • 显示「最近更新时间」与「在线订阅数」等信息

2.6 CSV 批量导入(CSV Import)

功能说明

支持通过 CSV 文件批量导入服务器、设备、点位配置,适合从 Excel/设计文档迁移配置。

用户收益

  • 快速从既有工程资料生成系统配置
  • 支持对已有记录批量更新,方便版本迭代
  • 可与外部系统或配置库进行联动

推荐展示内容

  • 导入向导:选择类型(服务器/设备/点位)→ 上传文件 → 预览 → 确认导入 → 显示成功/失败统计

三、快速入门指南(5 分钟体验 Aha 时刻)

3.1 前提条件

  • 已部署并可访问的 Data Collector Web 服务
  • 推荐使用 Chrome/Edge 最新版
  • 至少有一台可访问的 Modbus 设备(TCP 或 RTU)

3.2 步骤 1:登录平台

  1. 在浏览器中打开登录页面。
  2. 输入账号密码(或根据系统支持自行注册)。
  3. 登录成功后进入首页或服务器列表页面。

预期结果:看到空白或已有配置的服务器/设备/点位导航入口。

3.3 步骤 2:添加第一个 Modbus 服务器

  1. 进入 服务器 页面,点击 新增服务器
  2. 选择协议:
    • Modbus TCP :填写 HostPort(默认 502);
    • Modbus RTU :选择串口(如 /dev/ttyUSB0)、设置波特率、数据位、校验位等。
  3. 保存服务器配置。
  4. 在服务器列表中,点击 启用 / Start

预期结果

若配置正确,服务器状态显示为已启用/运行中,并开始与设备建立连接。

3.4 步骤 3:配置设备与点位

  1. 打开 设备 页面,在刚添加的服务器下新增设备(设置站号/从站地址等)。
  2. 打开 点位 页面,为该设备配置 1--3 个关键寄存器:
    • 寄存器地址
    • 点位名称(如 Boiler_Temp
    • 数据类型(如 float32
    • 量程和单位(如 0--200 ℃

预期结果

  • 点位列表中可以看到刚刚配置的点位;
  • 一段时间后,仪表盘或实时数据视图中可以看到这些点位的实时数值。

3.5 步骤 4:创建第一个告警(推荐)

  1. 打开 报警 页面,点击 新增告警
  2. 选择刚刚配置的某个温度点位。
  3. 设置条件(如 value > 90),级别设为 critical
  4. 启用该告警规则。

预期结果

当该点位数值超出阈值时,告警列表中会出现对应记录,页面上的告警标识会有明显提示。

四、核心使用教程(按角色/任务的深度指南)

4.1 面向项目负责人 / 系统架构师

任务:规划整体项目结构

  • 按工厂/楼宇/产线划分服务器与设备层级;
  • 设计统一的设备与点位命名规则(如 B1-Boiler-Temp-01);
  • 定义基础告警体系(安全、质量、能耗等)。

最佳实践

  • 与自动化/电气工程师共同确认寄存器表、量程定义;
  • 与现有 SCADA/PLC 命名保持一致,减少认知成本。

4.2 面向工程师 / 运维人员

任务:排查「采集不到数据」问题

排查路径

  1. 在「服务器」页面检查服务器是否启用、是否有错误提示;
  2. 查看运行状态(若有专门页面):连接是否正常、最近采集时间、错误总数;
  3. 对照设备说明文档,核对站号、寄存器地址、寄存器类型是否一致;
  4. 对于 RTU,还需检查:线路连接、终端电阻、波特率、校验位,以及总线拓扑等。

常见错误规避

  • 地址偏移:有些文档地址从 1 开始,而系统配置需要从 0 起算;
  • 字节序错误:高低字节顺序不一致导致数值异常;
  • 忽略单位与量程:原始值需要换算后才是工程量(温度、压力等)。

4.3 面向数据分析人员

任务:导出历史数据用于 BI/报表分析

  1. 通过历史数据接口或 Web 界面选择需要分析的点位与时间区间;
  2. 导出为 CSV/Excel 文件;
  3. 在 Power BI、Tableau 或其他 BI 工具中加载;
  4. 将历史告警数据与采集数据结合,分析事故前后的关键指标变化。

小贴士

  • 保持点位命名与标签风格统一,便于跨项目复用报表模板;
  • 控制单次导出的时间范围,避免一次性拉取过多数据导致性能问题。

下面贴几个程序图





相关推荐
jinxinyuuuus6 小时前
Wallpaper Generator:前端性能优化、UI状态管理与实时渲染的用户体验
前端·ui·性能优化
吃炸鸡的前端6 小时前
tailwindcss v4的基础使用
前端·css
smileNicky6 小时前
分组拖动排序功能全流程实现(前端Sortable.js + 后端Java批量更新)
java·前端·javascript
编程大师哥6 小时前
Java Web 核心全解析
java·开发语言·前端
fruge6 小时前
Electron 桌面应用开发:前端与原生交互原理及性能优化
前端·electron·交互
m0_471199636 小时前
【vue】diff算法简介
前端·vue.js·算法
鹏多多6 小时前
flutter使用package_info_plus库获取应用信息的教程
android·前端·flutter
冬男zdn7 小时前
Vue 3 从基础到高阶全攻略
前端·javascript·vue.js