项目编号X603141| 主控 STM32F103C8T6 | 链路 MQTTEMQX 公共 Broker | 移动端 微信小程序 web-view0.1 技术栈速览组成技术 / 参数说明主控STM32F103C8T6 核心板Keil 5 开发定时采集与阈值判定传感雨滴 MH-RDA0→PA1· 水位 HW-038→PA3模拟输出接 ADCDO 未使用显示OLED12864IICSCL→PB6 / SDA→PB7本地刷新水位与状态通信NB-IoT 模块 银尔达 M100PRXD←PA9 / TXD→PA10MQTT 透传提示蜂鸣器 PB1 · 红绿双 LED PB0/PB10各串 200 Ω现场声光告警服务端JeeSite Java / SpringBoot MySQL Bootstrap内置 MQTT 客户端消息通道EMQX 公共 Broker · 上报 mybs/csnl/data · 下发 mybs/csnl/ctrQoS 0推送微信公众号接口预警触发即推送成句告警文案0.2 数据帧与主题速查系统只有一条 MQTT 链路、两条主题数据上报 mybs/csnl/data、配置与指令下发 mybs/csnl/ctr。数据帧实测样例MQTTX 旁听QoS 0Topic : mybs/csnl/data Payload: ClientZDBH01data0.000.0001008.0012.0015.00120032000end# 帧格式约定 帧头 Client 字段1 终端编号 ZDBH01 字段2 数据类型 data 字段3 水位 / 降雨采样值与阈值参数对应参数管理页配置项 帧尾 end# 分隔符 各字段以 连接调试时在 MQTTX 中订阅 mybs/# 即可同时看到上下行报文实测约 4 秒一帧。一、项目基本情况1.1 系统定位与技术架构本项目是一套面向城市内涝积水点的实时监测与预警系统。系统以 STM32F103C8T6 为主控通过雨滴传感器与水位传感器采集降雨强度和积水深度本地完成阈值判定与声光告警再经 NB-IoT 模组以 MQTT 协议把数据帧送到公共 EMQX 服务器服务端基于 JeeSite 平台与 Spring Boot 构建订阅解析后写入 MySQLWeb 管理端提供系统管理、实时监控、历史查询与预警管理四类页面预警触发时调用微信公众号接口向订阅用户推送告警通知。整个系统自上而下可以拆成四层层次承担角色本次实现应用层使用者入口Web 管理端实时监控 / 历史查询 / 预警管理 微信公众号推送另有 MQTTX 作报文旁听平台服务层业务与数据基于 JeeSite 平台Java / SpringBoot / MySQL / Bootstrap内置 MQTT 客户端消息传输层报文中转NB-IoT 模组 MQTT 透传接入公共 EMQX Broker上报与下发各一条主题感知执行层采集与提示STM32F103C8T6 主控 雨滴 / 水位传感器 OLED12864 蜂鸣器 红绿双 LED▲ 图 1 系统总体架构图四层之间只靠两类信息流动向上是「采样值 设备状态」向下是「阈值配置 控制指令」。这种拆分带来一个直接好处 —— 硬件端只做采集、判定与提示预警等级怎么分、阈值定多少全部由服务端参数管理页配置调整阈值不需要重新烧录固件。现场蜂鸣器与红灯就地告警公众号向订阅用户推送成句文案 —— 「现场 远程」双重预警是这套系统的主线两条提醒路径互为备份。1.2 硬件构成与引脚连接硬件部分是一块以 STM32F103C8T6 核心板为主控的扩展板两路传感器模拟输出直接进 ADC通信模组占用一路串口OLED 与声光提示由 IIC 和 GPIO 驱动整板以「扩展板 杜邦线」方式连接。七个器件的分工与连接方式如下器件作用连接与说明STM32F103C8T6 核心板主控Keil 5 开发定时驱动传感器采集、阈值判定、组帧上报并驱动外设雨滴传感器MH-RD检测降雨强度模拟输出 A0 接主控 ADCPA1DO 数字输出未使用水位传感器HW-038检测积水深度模拟输出接主控 ADC原理图网络标注 PA3OLED12864 显示屏本地显示IIC 接口SCL→PB6、SDA→PB7实时刷新水位与状态NB-IoT 模块银尔达 M100P窄带物联网通信串口接主控RXD←PA9、TXD→PA10VIN 接 5 VMQTT 透传有源蜂鸣器声音告警GPIO PB1 直接驱动另一端接 GND红 / 绿双 LED状态指示PB0 / PB10 各串 200 Ω 限流电阻红灯告警、绿灯正常▲ 图 2 硬件系统原理框图注意引脚来源说明项目原理图为矢量图且带完整文字层本文全部引脚号均由原理图文字层逐项提取再与实物照片交叉核对并非从图片目测。两路传感器的模拟输出分别接入主控 ADC 通道雨滴传感器的 DO 数字输出未使用 —— 降雨强度按模拟量连续采集不工作在开关阈值模式。注意硬件口径说明① 原理图中水位传感器的模拟输出网络标注为 PA3而论文框图记为 PA0且主控侧 PA3 引脚未画连线、PA0 网络悬空两处存在一处笔误 —— 本文按原理图标注 PA3 表述移植时以固件源码为准② 原理图将两颗 LED 的丝印均标为「电源指示灯」项目介绍则定义为「绿灯常亮表示正常、红灯闪烁配合蜂鸣器提示预警」实物照片中红绿双灯清晰可见本文按项目介绍的功能定义表述。1.3 软件与运行环境组成部分技术选型说明硬件端开发Keil 5STM32F103C8T6 固件采集、判定、组帧与外设驱动服务端平台JeeSite Java / SpringBoot内置 MQTT 客户端RESTful 接口供 Web 前端调用数据库MySQL监测数据按「设备ID时间戳」建立索引支撑历史查询与统计前端Bootstrap实时数据、历史数据、预警管理等页面消息通道EMQX 公共 Broker方案图给 broker-cn.emqx.io自建服务亦可接入调试工具MQTTX订阅 mybs/# 旁听上下行报文核对数据帧此外本项目的《运行逻辑文档》把异常处理单列成章设备长时间未上传即标记离线并通知管理员超出合理范围的采集值拒绝入库并触发异常告警NB-IoT 模组断网自动重连并缓存未发数据服务端与 MQTT 服务器断开后尝试重连并恢复订阅。采集侧与服务端各兜一层数据完整性有两道保险。二、系统架构设计2.1 系统功能结构按「硬件系统 / 软件系统 / 交付服务」三列拆开系统的功能边界如下图。值得留意的是预警链路的三个环节阈值在参数管理页配置、判级在服务端实时完成、推送由微信公众号接口落地 —— 三者解耦任何一环都可以单独替换。▲ 图 3 系统功能结构图硬件系统 / 软件系统 / 交付服务三列的分工边界清晰硬件端负责采集、本地判定与声光提示服务端负责解析、落库、判级与推送Web 端负责配置与处置闭环。预警等级阈值全部放在参数管理里这是整套系统「改配置不改固件」设计思路的落点。2.2 硬件原理图与实物下图是项目交付的完整原理图嘉立创 EDA 绘制。六个功能分区一目了然窄带物联网模块、OLED12864 屏幕、蜂鸣器、LED 灯、水位计、雨滴传感器围绕 STM32F103C8T6 核心板展开。▲ 图 4 硬件原理图STM32F103C8T6 雨滴 / 水位传感器 NB-IoT 模块▲ 图 5 系统实物扩展板 核心板 OLED 通信模组 两路传感器实物为「扩展板 核心板」的两层结构上层核心板经排座插装OLED 与通信模组经排针接口接入两路传感器由杜邦线引出。雨滴传感器为红色梳齿电极板水位传感器为平行电极板两者都输出与被测量连续对应的模拟电压由主控 ADC 分时采样。2.3 通信链路与报文实测硬件与服务端之间只有一条 MQTT 链路、两条主题上报主题 mybs/csnl/data 承载数据帧下发主题 mybs/csnl/ctr 承载配置与指令。下图是 MQTTX 订阅 mybs/# 旁听到的真实报文▲ 图 6 MQTT 报文实测MQTTX 订阅 mybs/# 旁听约 4 秒一帧Topic : mybs/csnl/data QoS: 0 Payload: ClientZDBH01data0.000.0001008.0012.0015.00120032000end#数据帧的格式约定是以 Client 开头、end# 结尾、 分隔。第 2 段是终端编号 ZDBH01第 3 段是数据类型 data其后依次携带水位、降雨采样值与阈值参数与参数管理页配置的 thold_water_deep1~3、thold_rain1~2 对应下发。MQTTX 时间戳显示连续三帧分别落在 00:45:11.276、15.252、19.265、23.254 —— 即约 4 秒一帧与历史数据页的入库节奏一致。注意通信口径说明① 《运行逻辑文档》把上报主题示例写作 mybs/nsnl/badata而 MQTTX 实测报文为 mybs/csnl/data、下发为 mybs/csnl/ctr —— 本文采信实测截图② Broker 地址在方案图中为 broker-cn.emqx.io、在运行逻辑文档中为 broker-cn.emqx.cn两者是 EMQX 公共服务的不同域名写法本文按方案图表述。2.4 系统数据交互时序把一次完整的数据流转摊开成四条泳道硬件节点采集上报Broker 中转服务端解析落库并判级Web 端与微信公众号承接呈现与推送。▲ 图 7 系统数据交互时序图NB-IoT MQTT时序里有两组自环值得注意服务端侧的「解析落库」与「判级」是两个独立步骤判级结果才会触发公众号推送硬件节点侧的「OLED 刷新与声光告警」不依赖网络应答即使 NB-IoT 链路暂时不畅现场提示依然先行。三、系统界面展示3.1 登录与系统管理Web 管理端登录页以城市楼宇照片为背景输入用户名与密码进入登录遇到问题可联系管理员。系统管理下辖用户管理、终端管理、参数管理三个页面▲ 图 8 Web 管理端登录页▲ 图 9 用户管理页姓名、电话与微信 ID 已脱敏用户管理页维护订阅用户的姓名、电话与微信 ID —— 这三项正是公众号推送的触达依据页面提供按姓名、电话的查询与新增、编辑、删除操作。终端管理对硬件设备做注册绑定与在线状态监控。▲ 图 10 参数管理页预警阈值与采集参数配置参数管理页是预警规则的中枢六个配置项一览无余水位三级阈值 thold_water_deep1~3 分别为 20 / 50 / 100cm降雨量两级阈值 thold_rain1~2 为 1200 / 3300另有水位深度比值 water_deep_ratio100。调整这里即可改变整条预警链路的判级标准。3.2 数据展示▲ 图 11 实时数据监控监测点分布地图与实时预警面板实时数据监控页分三块顶部四个指标卡监测点总数 1、预警监测点 0、离线设备 1、当前最大积水深度中部监测点分布地图百度地图标注积水点位右侧实时预警信息面板 —— 一级预警黄色、二级橙色、三级红色、正常监测绿色实测面板同屏出现过三级预警「西环中路桥下 27.02cm」与正常监测记录三级预警卡片附带「设置告警通知」按钮。▲ 图 12 历史数据查询按终端筛选共 3777 条记录历史数据查询页按终端编号、终端名称筛选字段包括水位、状态与降雨量。实测共 3777 条记录、每页 20 条时间戳间隔约 4 秒与 MQTT 报文节奏一致水位 27.02 / 39.54 / 36.21 cm 等记录的状态被标为三级告警其余时刻为正常。▲ 图 13 告警信息查询共 75 条含成句告警内容告警信息查询页共 75 条记录字段含终端编号、终端名称、告警级别、告警地点与成句的告警内容例如「终端【内涝监测设备A】所在位置【西环中路桥下】水位为27.02cm超过三级阈值请注意」—— 告警文案直接可读不需要再对照表格换算。实测告警覆盖一级 / 二级 / 三级三个等级告警地点涉及西环中路桥下、南三环立交桥、三环北立交桥三处。3.3 预警推送▲ 图 14 实时预警面板的「设置告警通知」与发送成功提示▲ 图 15 微信公众号预警推送效果告警通知卡片三级预警卡片上的「设置告警通知」按钮点击后弹出「发送成功」提示右侧微信消息面板随即出现「告警通知」卡片告警内容为「内涝三级告警」、附发生时间与「查看详情」入口。实测记录中既有一级告警2026-04-16 21:15:54也有连续的三级告警推送「现场声光 远程推送」的双重预警链路完整走通。3.4 实测数据汇总观测项实测值出处监测点总数 / 预警监测点 / 离线设备1 / 0 / 1实时数据监控页指标卡当前最大积水深度--无活跃预警实时数据监控页指标卡历史数据总量3777 条 · 每页 20 条历史数据查询页分页栏数据入库节奏约 4 秒一条MQTTX 时间戳与历史数据时间戳交叉验证告警记录总量75 条 · 一 / 二 / 三级均有告警信息查询页分页栏水位三级阈值20 / 50 / 100 cm参数管理页 thold_water_deep1~3降雨量两级阈值1200 / 3300参数管理页 thold_rain1~2水位深度比值100参数管理页 water_deep_ratio终端编号 / 名称ZDBH01 / 内涝监测设备A告警信息与历史数据页告警地点西环中路桥下 · 南三环立交桥 · 三环北立交桥告警信息查询页告警句式「终端【…】所在位置【…】水位为27.02cm超过三级阈值请注意」告警内容字段公众号推送「告警通知」卡片内涝一 / 三级告警 发生时间微信消息提醒面板四、系统视频展示本项目的演示视频从方案讲解、硬件点亮、报文旁听到 Web 端预警推送全流程录制建议按下面四个环节观看每一环节都对应正文中的实测证据演示环节方案与架构讲解四层架构、器件构成与 MQTT 主题设计逐一说明硬件端运行上电后 OLED 刷新监测数据人为注水抬升水位观察红灯与蜂鸣器就地告警报文与数据核对MQTTX 旁听 mybs/csnl/data 数据帧对照历史数据查询页的时间戳与水位值Web 端与公众号实时预警面板亮出三级预警卡片点击「设置告警通知」微信端收到告警通知卡片。注意说明本项目素材包中未附带演示视频文件上述环节清单依据《运行逻辑文档》与界面实测记录整理供拿到源码与硬件后复现演示时对照使用。五、获取方法5.1 交付内容交付项内容格式 / 说明硬件实物核心板 扩展板 传感器整套装置已完成联调两路传感器随板交付程序源码硬件端 服务端 前端页面硬件端 Keil 5 工程服务端 Java / SpringBoot硬件原理图嘉立创 EDA 源文件附 PDF / PNG / JSON 等导出格式演示材料运行逻辑文档与界面截图Web 端全页面截图与 MQTT 报文实测记录远程服务环境搭建、程序调试、小修答疑按交付清单逐项提供5.2 部署要点部署步骤硬件端Keil 5 打开工程按上文引脚表核对传感器与模组接线后烧录通信确认 NB-IoT 模组接入公共 EMQX Broker上报主题 mybs/csnl/data、下发主题 mybs/csnl/ctr服务端配置 MySQL 数据源与 MQTT 连接参数部署 JeeSite 平台后执行初始化脚本Web 端参数管理页配置水位 / 降雨阈值与采集频率终端管理页录入 ZDBH01 等设备公众号配置微信公众号接口参数用户管理页维护订阅人的微信 ID即可接收告警推送。注意移植提示水位传感器接引脚在原理图与论文框图间存在 PA3 / PA0 的一处笔误见 1.2 口径说明自行移植时请以固件源码中的 ADC 通道配置为准MQTT 主题与数据帧格式以本文 2.3 节的实测报文为准。5.3 适用场景城市下穿隧道、立交桥下、低洼路段等内涝易发点的积水监测工地基坑、地下车库入口等场景的积水预警与远程提醒雨量与水位双指标监测的科研与教学实训需要「现场声光 公众号推送」双重告警的物联网课程设计与毕设参考。附录 A 预警参数配置实测参数名称类型参数键参数值水位预警信息alert_levelthold_water_deep120水位预警信息alert_levelthold_water_deep250水位预警信息alert_levelthold_water_deep3100降雨量jylthold_rain11200降雨量jylthold_rain23300水位深度比值sdb1water_deep_ratio100附录 B 告警记录切片实测终端编号 终端名称 告警级别 告警地点 告警内容 ZDBH01 内涝监测设备A 三级告警 西环中路桥下 终端【内涝监测设备A】所在位置【西环中路桥下】 水位为27.02cm超过三级阈值请注意 ZDBH01 内涝监测设备A 三级告警 南三环立交桥 …水位为28.16cm超过三级阈值请注意 ZDBH01 内涝监测设备A 二级告警 南三环立交桥 …水位为16.86cm超过二级阈值请注意 ZDBH01 内涝监测设备A 一级告警 南三环立交桥 …水位为8.31cm超过一级阈值请注意 共 75 条告警记录更新时间 2026-03-12 ~ 2026-04-22。附录 C 历史数据切片实测终端编号 终端名称 地点 水位 状态 降雨量 更新时间 ZDBH01 内涝监测设备A 西环中路桥下 0.00 正常 正常 2026-04-22 00:45:03 ZDBH01 内涝监测设备A 西环中路桥下 27.02 三级告警 正常 2026-04-22 00:44:47 ZDBH01 内涝监测设备A 西环中路桥下 39.54 三级告警 正常 2026-04-22 00:44:43 ZDBH01 内涝监测设备A 西环中路桥下 0.00 正常 正常 2026-04-22 00:44:31 共 3777 条189 页 × 20 条相邻记录时间戳间隔约 4 秒。项目编号 X602271。本文所述系统已完成实测验证相关技术问题可在评论区交流。