基于Blazor实现的光伏设备调试软件

一、背景

光伏跟踪支架系统中,NCU(网络通讯单元)、单轴 TCU、双轴 TCU 等设备在出厂调试、现场运维和售后诊断等环节高度依赖手持式调试工具。传统方案多为 WinForms / WPF 桌面客户端或 Android APP,前者部署繁琐、版本更新需要用户手动操作;后者受平台碎片化限制,蓝牙协议栈行为不统一,且同样面临分发和更新的挑战。

我们基于 Blazor WebAssembly + .NET 10 构建了一款纯浏览器端的调试软件,借助 Web Bluetooth 标准协议与设备建立 BLE GATT 连接,通过 Modbus RTU over BLE 完成参数读写、状态监控和远程控制。用户只需打开浏览器(Chrome / Edge),无需安装任何软件即可完成调试工作。

产品选择 产品选择 产品选择

二、技术架构

2.1 整体栈

层级 技术
运行时 .NET 10 (net10.0)
前端框架 Blazor WebAssembly
UI 组件 纯 CSS 自定义组件,无第三方 UI 库
设备通信 Web Bluetooth (navigator.bluetooth)
应用协议 Modbus RTU
存储 localStorage(主题偏好、语言偏好)
打包 PWA Service Worker

2.2 项目结构

复制代码
Pages/
  Index.razor      ------ 产品选择首页(NCU / TCU1 / TCU2)
  NCU.razor        ------ NCU 单页应用
  TCU1.razor       ------ 单轴 TCU 单页应用
  TCU2.razor       ------ 双轴 TCU 单页应用
  NotFound.razor   ------ 404

Components/
  BaseComponent.cs ------ 公共基类(注入 LocalizationService、自动订阅语言切换事件)
  T1Home.razor     ------ 通用首页组件(蓝牙连接 + Modbus 地址配置)
  T1Operation.razor ------ 通用操作页(实时参数、状态、控制命令)
  T1Settings.razor  ------ 通用设置页(运行参数配置)
  T1SubControl.razor ------ 分控设备管理
  Profile.razor     ------ 个人设置(语言、主题、关于)

Services/
  WebBluetoothService.cs ------ Web Bluetooth 封装(扫描、连接、收发)
  ModbusService.cs        ------ Modbus RTU 帧构建与 CRC16 计算
  DeviceConnectionService ------ 连接管理(蓝牙 + 设备验证)
  DeviceProtocolService   ------ 协议封装(参数读取、控制命令)
  DeviceStateService      ------ 全局设备状态(连接状态、地址、连接类型)
  ProductContextService   ------ 产品上下文(当前选中产品)
  ThemeService            ------ 双色主题持久化
  LocalizationService     ------ 多语言(中文 / English / Português)
  SocketConnector         ------ TCP Socket(浏览器环境禁用标记)

2.3 单页应用架构

每种产品(NCU / 单轴 TCU / 双轴 TCU)视为独立的单页应用,通过 DynamicComponent 动态切换子页面组件。底部导航栏包含首页、操作、设置、分控、我的五个 Tab,全部在同一产品页面内通过组件切换,无需页面级路由跳转。

产品上下文通过 ProductContextService 维护,进入任意产品页时设置当前产品,顶部 Header 显示产品名称,点击可返回产品选择页。


三、设备连接与通信

3.1 Web Bluetooth 连接

设备侧使用 BLE(Bluetooth Low Energy),Service UUID 为 0000fff0-0000-1000-8000-00805f9b34fb。软件采用浏览器原生的 navigator.bluetooth.requestDevice() 调起系统蓝牙设备选择器,用户选择名称以 SZRT 开头的设备即可完成配对。

连接链路:

复制代码
浏览器 → navigator.bluetooth.requestDevice() → 系统蓝牙选择器 → GATT 连接
→ 发现 FFF0 服务 → 自动匹配可写特征值与可通知特征值 → 通信就绪

前端 JavaScript 桥接层(wwwroot/js/bluetooth.js)负责:

  • 调用 Web Bluetooth API
  • 自动查找服务下的 write / notify / read 特征值
  • 实现基于通知(Notification)的超时接收逻辑,模拟串口请求-响应模式

3.2 Modbus RTU 协议

应用层采用标准的 Modbus RTU,命令帧格式为:

复制代码
[设备地址] [功能码] [数据域] [CRC16 低字节] [CRC16 高字节]
  • 读取寄存器(功能码 0x03):读取设备运行参数(角度、电流、电压等)
  • 写入寄存器(功能码 0x06):写入运行模式(自动/手动/停止)、设置参数值

软件内置 CRC16-Modbus 校验算法,自动为每条指令追加校验字节。


四、产品功能

4.1 设备控制(Modbus 地址配置)

支持通过蓝牙已连接设备进行 Modbus 地址配置:

  • 读地址 ------ 读取设备当前的 Modbus 地址
  • 写地址 ------ 修改设备地址
  • 连接设备 ------ 验证设备地址正确后激活操作面板

4.2 实时监控

操作页展示设备运行参数与状态:

参数 说明
高度角度 当前跟踪高度角
方位角度 当前方位角
目标角度 控制目标值
电机电流 实时电机电流
电池电压/温度 电源状态
电源电压 供电电压

状态面板展示多种告警标志:倾角异常、过流、超限、大风、时钟故障、电源异常等。

4.3 控制命令

操作 说明
自动 启动自动跟踪模式
手动 切换手动控制模式
向东/向西 手动微调
放平 支架放平
标定 角度传感器标定
雪天/雨天/避风/清洗 场景化保护与控制
指定角度 设定目标角度
校时 设备时间同步

4.4 调试工具

内置串口调试工具,支持 Hex 指令手工输入与发送、响应日志记录、收发标记,便于现场工程师诊断通信问题。

4.5 分控设备管理

当主控设备下挂分控设备时,支持分控设备的独立参数查看与控制。

操作 设置 分控

五、用户体验设计

5.1 产品选择入口

首页提供三张产品卡片入口(NCU / 单轴 TCU / 双轴 TCU),每张卡片包含产品图标、名称与简要说明,点击即进入对应的单页应用。

5.2 多语言支持

内置简体中文、English、Português 三语界面,语言切换在首页右上角以下拉菜单呈现,选择后立即生效并持久化到 localStorage。

5.3 双色主题

支持亮色模式与暗色模式,主题偏好通过 localStorage 持久化,页面顶部右侧按钮一键切换。完整的 CSS 变量体系(--bg-primary--text-primary--primary-color 等),所有组件自动适配当前主题。

5.4 响应式设计

卡片、栅格系统适配移动端屏幕,底部导航栏取代传统侧边栏,符合移动端操作习惯。页面禁止浏览器默认的拉手势刷新与回弹效果,提供接近原生 APP 的交互体验。

操作 设置 我的

六、性能与部署

6.1 PWA 支持

项目集成了 Service Worker,用户可将应用添加到主屏幕(A2HS),实现离线可用和类原生启动体验。

6.2 构建产物

  • 目标框架:net10.0
  • 运行时:Blazor WebAssembly(.NET IL 裁剪 + AOT 可选)
  • 输出:纯静态文件(HTML + CSS + JS + WASM)
  • 部署方式:任意静态文件服务器(Nginx、IIS、CDN)

6.3 浏览器兼容

功能 最低版本
Blazor WebAssembly 现代浏览器(Chrome / Edge / Firefox / Safari)
Web Bluetooth Chrome 56+、Edge 79+
PWA Service Worker 所有主流浏览器

七、总结

基于 Blazor WebAssembly + Web Bluetooth 的光伏设备调试软件,在免安装、跨平台、易分发三个维度上解决了传统调试工具的痛点。项目充分发挥了 .NET 生态在工业软件领域的成熟度,同时利用现代 Web 标准的设备接入能力,在浏览器环境中实现了原本需要原生应用才能完成的 BLE 通信与 Modbus 协议交互。

这套技术栈为光伏跟踪、微电网、电机控制等同类工业 IoT 场景提供了可复用的前端架构参考。


如有兴趣进一步了解项目细节或技术交流,欢迎联系。

相关推荐
known1 个月前
基于Blazor实现的跟踪光伏智能运维平台
blazor
W清风大侠M1 个月前
基于 Blazor 实现的电梯运行监测系统
blazor
known1 个月前
基于 Blazor 实现的电梯运行监测系统
blazor·known
functionMC1 个月前
在Vue/Nuxt、React/Next/TanstackStart、RazorPages折腾一圈后,还是回到了Blazor,但这回有SSR+HTMX+Alpine的加持
blazor·alpine·htmx
csdn_aspnet4 个月前
.NET 10 中的 Blazor:新增功能及常见问题
wasm·blazor·.net10
csdn_aspnet4 个月前
Asp.Net Core 10.0 中的 Blazor 增强功能
前端·后端·asp.net·blazor·.net10
许泽宇的技术分享6 个月前
当AI开始“画“界面:A2UI协议如何让.NET应用告别写死的UI
人工智能·ui·.net·blazor·a2ui
许泽宇的技术分享6 个月前
当AI遇见UI:用.NET Blazor实现Google A2UI协议的完整之旅
人工智能·ui·.net·blazor·a2ui
known6 个月前
基于Blazor实现的样品扫码比对管理系统
blazor