EMS-vite/完善实时监控页面接口对接与展示.md at 95098991f30740d9c29c25cb07347e5405842c24

## 架构设计

**前端技术栈**
- 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通信日志，模拟真实设备通信
- 完整的系统配置参数

应用已完全实现需求文档中的所有功能，提供了专业级的电池管理解决方案。

2025-11-17 16:52:12 +08:00

2.5 KiB

Raw Blame History

目标

在实时监控页面接入并展示五类数据：整车数据、车辆位置、极值数据、子系统温度、子系统电压；支持设备选择与时间范围刷新。

接口与数据源

整车数据：javaVehicleDataApi.getLatestByDevice(deviceId)、getByDevice(deviceId, limit)
车辆位置：javaVehicleLocationApi.getLatestByDevice(deviceId)、getTrack(deviceId, start, end, limit)
极值数据：javaExtremeValuesApi.getLatestByDevice(deviceId)
子系统电压：javaSubsystemVoltageApi.getLatest(deviceId, subsystemNo)、getBySubsystem(deviceId, subsystemNo, limit)
子系统温度：javaSubsystemTemperatureApi.getLatest(deviceId, subsystemNo)、getBySubsystem(deviceId, subsystemNo, limit)

页面改造

修复设备选择值

下拉 value 使用 device.deviceId
选择回调按 deviceId 查找设备并刷新数据

新增状态

vehicleLatest: VehicleData | null
locationLatest: VehicleLocation | null
extremeLatest: ExtremeValues | null
subsystemNoVolt: number、subsystemNoTemp: number
subsystemVoltLatest: SubsystemVoltage | null
subsystemTempLatest: SubsystemTemperature | null

加载逻辑

在 loadDeviceData 并行请求：整车/位置/极值/子系统（默认子系统号 1）最新数据
在 loadChartData 继续使用 javaBatteryDataApi.getChartData(deviceId, timeRange) 用于电压/电流趋势
根据 timeRange 可选调用 getTrack 获取位置轨迹（后续可选）

展示布局

顶部卡片：
- 展示整车数据：总电压（V）、总电流（A）、SOC（%）、车速（km/h）、里程（km）
- 极值数据：最高/最低单体电压与温度（值与所属子系统/探针）
图表分区：
- 电压/电流趋势（已接入）
- 子系统温度：折线图展示 temperatureValues（℃）
- 子系统电压：列表或柱状图展示 batteryVoltages（V）
位置分区（可选）：
- 若配置了百度地图 AK（VITE_BAIDU_MAP_AK），使用现有 Map 组件展示最新位置；否则展示经纬度与定位状态

注释

在新增接口调用处与关键渲染处添加简短中文注释（来源、单位、参数说明）

验证

设备切换与时间范围刷新可见对应数据与图表更新
Network 面板出现五类接口请求；无 401/跨域错误

可选后续

在页面上增加选择子系统号的下拉，便于查看指定子系统的温度与电压
在位置分区展示最近轨迹折线（调用 getTrack）

2.5 KiB Raw Blame History Unescape Escape

目标

接口与数据源

页面改造

验证

可选后续

2.5 KiB

Raw Blame History