FlexometerSetup

基于 Electron + React + Vite 开发的传感器监测应用程序

---

📖 目录

• 用户指南
• 开发者文档

---

👥 用户指南

系统要求

• 操作系统: Windows 10/11, macOS 10.15+, Ubuntu 18.04+
• 内存: 4GB RAM 以上
• 存储空间: 200MB 可用空间

安装方法

1. 从 Releases 页面下载最新版本的安装包
2. 运行安装程序，按照向导完成安装
3. 安装完成后，从桌面快捷方式或开始菜单启动应用

主要功能

🔍 设备管理

• 设备搜索: 自动扫描局域网内的传感器设备
• 设备连接: 支持 TCP 连接，实时监控设备状态
• 设备断开: 安全断开设备连接

📊 数据监控

• 实时数据显示: 支持多传感器同时监控
• 数据可视化: Chart.js 图表展示传感器数据趋势
• 历史数据: 保存最近 10 个数据点的历史记录

⚙️ 系统设置

• 基本参数配置:
  • 图像发送时间间隔
  • 零点计数设置
  • 数据帧率调节
  • 阈值参数配置
• 系统功能:
  • 系统清零使能
  • 图像发送控制（开始/停止）
• 存储设置: 自定义数据存储路径

🔧 测量点管理

• 传感器配置: 实时加载和设置传感器参数
• 数据覆盖更新: 每次加载时更新传感器列表
• 状态监控: 实时显示设备连接状态

使用说明

1. 首次使用

   • 启动应用后，点击"搜索设备"发现网络中的传感器
   • 选择目标设备，点击"连接"建立通信

2. 数据监控

   • 连接成功后，在"挠度采集"页面可查看实时数据
   • 数据会自动更新，支持多传感器同时显示

3. 参数配置

   • 在"系统设置"页面可调整各项参数
   • 修改参数后点击"设置"按钮保存

4. 数据存储

   • 应用会自动记录实时数据和报警数据
   • 可在存储设置中自定义保存路径

故障排除

设备连接失败

• 检查设备和计算机是否在同一网络
• 确认设备 IP 地址和端口号正确
• 重启应用和设备后重试

数据显示异常

• 检查设备连接状态
• 确认传感器配置是否正确
• 查看日志文件排查问题

应用崩溃或无响应

• 重启应用
• 检查系统资源使用情况
• 联系技术支持

技术支持

• 作者: cles
• 主页: https://blog.clesbit.top
• 邮箱: 208023732@qq.com
• 问题反馈: 请在项目仓库提交 Issue

---

🛠️ 开发者文档

技术栈

• 前端框架: React 18
• 构建工具: Vite
• 桌面框架: Electron
• 状态管理: Zustand
• UI 框架: Ant Design
• 图表库: Chart.js
• 样式: CSS Modules
• 打包工具: electron-builder

项目结构

electron-app/
├── build/                    # 构建资源（图标等）
├── src/
│   ├── main/                # 主进程代码
│   │   ├── index.js         # 主进程入口
│   │   └── ipcRouter.js     # IPC 路由处理
│   ├── preload/             # 预加载脚本
│   │   └── index.js
│   └── renderer/            # 渲染进程代码
│       ├── index.html       # HTML 模板
│       └── src/
│           ├── App.jsx      # 应用主组件
│           ├── main.jsx     # 渲染进程入口
│           ├── components/  # React 组件
│           ├── stores/      # Zustand 状态管理
│           └── common/      # 公共模块
├── dist/                    # 构建输出目录
├── electron-builder.yml    # 打包配置
├── electron.vite.config.mjs # Vite 配置
└── package.json

开发环境搭建

环境要求

• Node.js 16.0+
• npm 或 yarn

安装依赖

# 克隆项目
git clone <repository-url>
cd electron-app

# 安装依赖
npm install

开发命令

# 启动开发服务器
npm run dev

# 代码格式化
npm run format

# 代码检查
npm run lint

# 构建项目
npm run build

# 打包为可执行文件（不生成安装包）
npm run build:unpack

# 打包为 Windows 安装包
npm run build:win

# 打包为 macOS 安装包
npm run build:mac

# 打包为 Linux 安装包
npm run build:linux

核心模块说明

IPC 通信 (ipcRouter.js)

负责主进程与渲染进程之间的通信，包括：

• 设备搜索和连接管理
• TCP 数据传输处理
• 传感器参数配置
• 系统功能控制

主要事件类型：

// 设备管理
DEVICE_SEARCH // 设备搜索
DEVICE_CONNECT // 设备连接
DEVICE_DISCONNECT // 设备断开

// 数据传输
RESULT_REPLY // 传感器数据
IMAGE_REPLY // 图像数据

// 参数配置
SENSORS_GET / SET // 传感器配置
IMAGE_SEND_TIME_GET / SET // 图像发送间隔
// ... 其他参数

状态管理 (stores/)

使用 Zustand 管理全局状态：

• deviceStore.js: 设备连接状态
• rectangleStore.js: 矩形选择状态

UI 组件 (components/)

主要组件模块：

• DeflectionCollection/: 挠度数据采集和可视化
• ImageCollection/: 图像采集显示
• MeasurementPointSetting/: 测量点配置
• SystemSettings/: 系统参数设置
• SiderHeader/: 侧边栏头部

日志系统

使用 electron-log 记录应用日志：

• 开发环境: 日志保存在项目根目录 logs/main.log
• 生产环境: 日志保存在用户数据目录
• 日志内容: IPC 命令、TCP 响应、错误信息等

网络通信

UDP 设备发现

• 端口: 2230
• 广播地址: 255.255.255.255
• 超时: 1s [1s内如果有设备继续响应则重置超时计时器]

TCP 数据传输

• 默认端口: 2233
• 协议: JSON over TCP
• 消息格式: {"command": "xxx", "type": "xxx", "values": "xxx"}\n\n

构建和部署

图标配置

将图标文件放入 build/ 目录：

• Windows: icon.ico (256x256, 多分辨率)
• macOS: icon.icns
• Linux: icon.png (512x512)

打包配置

主要配置在 electron-builder.yml：

appId: com.freesun.app
productName: FlexometerSetup
directories:
  buildResources: build

win:
  executableName: FlexometerSetup

nsis:
  oneClick: false # 启用安装向导
  allowToChangeInstallationDirectory: true # 允许选择安装路径
  createDesktopShortcut: always # 创建桌面快捷方式

发布流程

1. 本地构建测试

   npm run build:win
   

2. 创建 Release

   • 在代码仓库创建新的 Release
   • 上传生成的 setup.exe 安装包
   • 添加版本说明和更新日志

开发规范

代码风格

• 使用 Prettier 格式化代码
• 使用 ESLint 进行代码检查
• 组件文件使用 PascalCase 命名
• 样式文件使用 CSS Modules

提交规范

使用语义化提交信息：

feat: 添加新功能
fix: 修复问题
docs: 更新文档
style: 代码格式调整
refactor: 代码重构
test: 添加测试
chore: 构建或工具相关

分支管理

• main: 主分支，用于发布
• develop: 开发分支
• feature/*: 功能分支
• hotfix/*: 热修复分支

贡献指南

1. Fork 项目仓库
2. 创建功能分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'feat: add amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 创建 Pull Request