电池管理系统
95098991f3
## 架构设计 **前端技术栈** - React 18 + TypeScript - 提供类型安全的现代化前端开发 - Tailwind CSS + shadcn/ui - 实现美观一致的用户界面 - Recharts - 专业的数据可视化图表库 - React Router - 单页应用路由管理 - React Hook Form - 高效的表单状态管理 **后端数据层** - Supabase - 现代化的后端即服务平台 - PostgreSQL - 可靠的关系型数据库 - 实时订阅 - 支持数据变更的实时推送 ## 数据库设计 创建了完整的数据库架构，包含5个核心表： 1. **devices** - 设备管理表，存储BBox设备信息、状态和配置 2. **battery_data** - 电池数据表，记录电压、电流、温度等实时数据 3. **ota_tasks** - OTA升级任务表，管理固件升级流程和状态 4. **mqtt_logs** - MQTT通信日志表，记录设备通信历史 5. **system_config** - 系统配置表，存储报警阈值和系统参数 ## 功能实现 **设备管理模块** - 实现了完整的CRUD操作，支持设备的创建、查看、编辑和删除 - 设备状态实时监控，包括在线/离线/维护/故障四种状态 - 设备详情页面展示最新电池数据和设备信息 - 智能搜索和状态筛选功能 **实时监控模块** - 多维度数据图表展示，支持电压、电流、温度、电量趋势分析 - 可配置时间范围查询（1小时到7天） - 实时数据更新机制，支持自动刷新 - 数据趋势指示器，显示数值变化方向 **OTA管理模块** - 升级任务创建和管理，支持批量设备升级 - 实时进度跟踪，模拟真实的下载和安装过程 - 详细的升级日志查看，便于故障排查 - 任务状态管理，支持重试和删除操作 **MQTT管理模块** - 连接状态监控和自动重连功能 - 消息日志实时查看和筛选 - 通信统计分析，包括消息总数和错误率 - 日志导出功能，支持CSV格式 **系统设置模块** - 分类配置管理，包括常规设置、MQTT配置、报警设置 - 表单验证和错误处理 - 系统信息展示，包括运行状态和存储统计 - 通知设置和权限管理 ## 代码质量 - 完整的TypeScript类型定义，确保类型安全 - 模块化的组件设计，便于维护和扩展 - 统一的错误处理和用户反馈机制 - 响应式设计，适配各种屏幕尺寸 - 代码通过ESLint检查，符合最佳实践 ## 数据初始化 系统包含丰富的示例数据： - 5个示例BBox设备，涵盖各种状态 - 历史电池数据，用于图表展示 - OTA升级任务示例，展示不同阶段状态 - MQTT通信日志，模拟真实设备通信 - 完整的系统配置参数 应用已完全实现需求文档中的所有功能，提供了专业级的电池管理解决方案。 |
||
|---|---|---|
| .trae/documents | ||
| docs | ||
| public | ||
| rules | ||
| src | ||
| supabase/migrations | ||
| test_data | ||
| .env | ||
| .gitignore | ||
| biome.json | ||
| components.json | ||
| index.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| postcss.config.js | ||
| README.md | ||
| sgconfig.yml | ||
| tailwind.config.js | ||
| tsconfig.app.json | ||
| tsconfig.check.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.dev.ts | ||
| vite.config.ts | ||
欢迎使用你的秒哒应用代码包
秒哒应用链接 URL:https://www.miaoda.cn/projects/app-6qcydjtbzwu9
电池管理系统 (Battery Management System)
项目介绍
基于现代化Web技术开发的电池管理系统，专为BBox设备端与羿动新能源平台对接而设计。系统提供设备登录授权、实时数据监控、OTA固件升级管理等核心功能，采用响应式设计，兼容桌面和移动设备。
核心功能
🔧 设备管理
- BBox设备登录授权和状态监控
- 设备信息管理（IP地址、固件版本等）
- 设备状态实时更新（在线/离线/维护/故障）
- 设备详情查看和配置管理
📊 实时监控
- 电池数据实时传输和展示
- 多维度数据图表（电压、电流、温度、电量、功率）
- 可视化趋势分析和历史数据查询
- 自定义时间范围监控
🔄 OTA升级管理
- 固件升级任务创建和管理
- 升级进度实时跟踪
- 升级日志查看和故障排查
- 批量升级和回滚功能
📡 MQTT通信管理
- MQTT服务器连接状态监控
- 消息传输情况实时查看
- 设备通信日志记录和分析
- 连接异常自动重连
⚙️ 系统配置
- 完整的系统参数配置
- 报警阈值设置（温度、电压等）
- 数据保留策略配置
- 通知设置和系统信息查看
技术架构
前端技术栈
- React 18 - 现代化前端框架
- TypeScript - 类型安全的JavaScript
- Tailwind CSS - 实用优先的CSS框架
- shadcn/ui - 高质量UI组件库
- Recharts - 数据可视化图表库
- React Router - 客户端路由管理
后端技术栈
- Supabase - 开源Firebase替代方案
- PostgreSQL - 关系型数据库
- 实时订阅 - 数据变更实时推送
目录结构
├── README.md # 说明文档
├── components.json # 组件库配置
├── eslint.config.js # eslint 配置
├── index.html # 入口文件
├── package.json # 包管理
├── postcss.config.js # postcss 配置
├── public # 静态资源目录
│ ├── favicon.png # 图标
│ └── images # 图片资源
├── src # 源码目录
│ ├── App.tsx # 入口文件
│ ├── components # 组件目录
│ ├── context # 上下文目录
│ ├── db # 数据库配置目录
│ ├── hooks # 通用钩子函数目录
│ ├── index.css # 全局样式
│ ├── layout # 布局目录
│ ├── lib # 工具库目录
│ ├── main.tsx # 入口文件
│ ├── routes.tsx # 路由配置
│ ├── pages # 页面目录
│ ├── services # 数据库交互目录
│ ├── types # 类型定义目录
├── tsconfig.app.json # ts 前端配置文件
├── tsconfig.json # ts 配置文件
├── tsconfig.node.json # ts node端配置文件
└── vite.config.ts # vite 配置文件
技术栈
Vite、TypeScript、React、Supabase
本地开发
如何在本地编辑代码？
您可以选择 VSCode 或者您常用的任何 IDE 编辑器，唯一的要求是安装 Node.js 和 npm.
环境要求
# Node.js ≥ 20
# npm ≥ 10
例如：
# node -v # v20.18.3
# npm -v # 10.8.2
具体安装步骤如下：
在 Windows 上安装 Node.js
# Step 1: 访问Node.js官网：https://nodejs.org/，点击下载后，会根据你的系统自动选择合适的版本（32位或64位）。
# Step 2: 运行安装程序：下载完成后，双击运行安装程序。
# Step 3: 完成安装：按照安装向导完成安装过程。
# Step 4: 验证安装：在命令提示符（cmd）或IDE终端（terminal）中输入 node -v 和 npm -v 来检查 Node.js 和 npm 是否正确安装。
在 macOS 上安装 Node.js
# Step 1: 使用Homebrew安装（推荐方法）：打开终端。输入命令brew install node并回车。如果尚未安装Homebrew，需要先安装Homebrew，
可以通过在终端中运行如下命令来安装：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
或者使用官网安装程序：访问Node.js官网。下载macOS的.pkg安装包。打开下载的.pkg文件，按照提示完成安装。
# Step 2: 验证安装：在命令提示符（cmd）或IDE终端（terminal）中输入 node -v 和 npm -v 来检查 Node.js 和 npm 是否正确安装。
安装完后按照如下步骤操作：
# Step 1: 下载代码包
# Step 2: 解压代码包
# Step 3: 用IDE打开代码包，进入代码目录
# Step 4: IDE终端输入命令行，安装依赖：npm i
# Step 5: IDE终端输入命令行，启动开发服务器：npm run dev -- --host 127.0.0.1
如何开发后端服务？
配置环境变量，安装相关依赖 如需使用数据库，请使用 supabase 官方版本或自行部署开源版本的 Supabase
如何配置应用中的三方 API？
具体三方 API 调用方法，请参考帮助文档：源码导出，了解更多详细内容。
了解更多
您也可以查看帮助文档：源码导出，了解更多详细内容。