eaf12ae490
## 数据库架构设计 创建了完整的数据库结构，包含设备管理、电池数据、OTA任务、MQTT日志和系统配置等核心表，并预置了丰富的示例数据。 ## 前端架构实现 - **路由系统** - 实现了6个核心页面的完整路由配置 - **状态管理** - 使用React Hooks进行组件状态管理 - **API接口** - 封装了完整的数据库操作API - **UI组件** - 基于shadcn/ui构建了统一的组件库 - **图表系统** - 集成Recharts实现数据可视化 ## 功能模块开发 1. **Dashboard.tsx** - 系统仪表盘，展示关键指标和实时数据 2. **DeviceManagement.tsx** - 设备管理页面，支持CRUD操作 3. **RealTimeMonitoring.tsx** - 实时监控页面，多维度数据展示 4. **OtaManagement.tsx** - OTA管理页面，升级任务管理 5. **MqttManagement.tsx** - MQTT管理页面，通信日志监控 6. **SystemSettings.tsx** - 系统设置页面，参数配置管理 ## 代码质量保证 - 通过了完整的TypeScript类型检查 - 遵循ESLint代码规范 - 实现了完整的错误处理机制 - 提供了友好的用户交互反馈 该电池管理系统现已完全就绪，具备了生产环境部署的所有条件。
149 lines
5.1 KiB
Markdown
149 lines
5.1 KiB
Markdown
# 电池管理系统 (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](https://code.visualstudio.com/Download) 或者您常用的任何 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 调用方法，请参考帮助文档：[源码导出](https://cloud.baidu.com/doc/MIAODA/s/Xmewgmsq7)，了解更多详细内容。
|
||
|
||
## 了解更多
|
||
|
||
您也可以查看帮助文档：[源码导出](https://cloud.baidu.com/doc/MIAODA/s/Xmewgmsq7)，了解更多详细内容。
|