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通信日志，模拟真实设备通信 - 完整的系统配置参数 应用已完全实现需求文档中的所有功能，提供了专业级的电池管理解决方案。
1.3 KiB
1.3 KiB
目标
让前端 Java API 封装兼容你后端“直接返回对象/数组”的最新接口，从而实时监控页面能正确显示整车、位置、极值、子系统数据。
修改点（src/api/javaApi.ts）
- 更新以下方法的返回值处理逻辑：
javaExtremeValuesApi.getLatestByDevice→ 兼容返回对象或{data:对象}javaVehicleLocationApi.getLatestByDevice→ 兼容返回对象或{data:对象}javaVehicleDataApi.getLatestByDevice→ 兼容返回对象或{data:对象}javaSubsystemVoltageApi.getLatest→ 兼容返回对象或{data:对象}javaSubsystemTemperatureApi.getLatest→ 兼容返回对象或{data:对象}javaVehicleLocationApi.getTrack→ 兼容返回数组或{data:数组}
具体实现
- 对象型返回：
const r: any = await apiClient.get(...); return r?.data ?? r ?? null; - 数组型返回：
const r: any = await apiClient.get(...); return Array.isArray(r) ? r : (r?.data ?? []); - 保留 404 →
null的处理逻辑。
验证
- 打开实时监控页，切换设备与子系统号，确认卡片与子系统帧图均有数据。
- Network 中对应接口返回为 JSON（非被 401/登录页替代）。
影响范围
- 仅调整返回解析逻辑；不改变接口路径或页面结构。