diff --git a/.env b/.env index 696a2f6..89222c7 100644 --- a/.env +++ b/.env @@ -1,2 +1,4 @@ +VITE_SUPABASE_URL=https://backend.appmiaoda.com/projects/supabase233847254023151616 +VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoyMDc1MTgwNzMwLCJpc3MiOiJzdXBhYmFzZSIsInJvbGUiOiJhbm9uIiwic3ViIjoiYW5vbiJ9.eBXTY-SvuVf-rynRmP4VgudnhbUtqYquoEPbGp_l-HM VITE_APP_ID=app-6qcydjtbzwu9 diff --git a/README.md b/README.md index dc2bc9f..55f60b7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,55 @@ -## 介绍 +# 电池管理系统 (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** - 关系型数据库 +- **实时订阅** - 数据变更实时推送 ## 目录结构 diff --git a/index.html b/index.html index b6c9d18..fdb1711 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,11 @@ - + + 电池管理系统 - Battery Management System +
diff --git a/src/App.tsx b/src/App.tsx index a42a095..c338e30 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,56 +1,28 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; +import { Toaster } from 'sonner'; import routes from './routes'; - -// Uncomment these imports when using miaoda-auth-react for authentication -// import { AuthProvider, RequireAuth } from 'miaoda-auth-react'; -// import { supabase } from 'supabase-js'; +import Header from './components/common/Header'; const App: React.FC = () => { -{/* - // USING MIAODA-AUTH-REACT (Uncomment when auth is required): - // ========================================================= - // Replace the current App structure with this when using miaoda-auth-react: - - // 1. Wrap everything with AuthProvider (must be inside Router) - // 2. Use RequireAuth to protect routes that need authentication - // 3. Set whiteList prop for public routes that don't require auth - - // Example structure: - // - // - // - // - // - // - // ... your routes here ... - // - // - // - // - - // IMPORTANT: - // - AuthProvider must be INSIDE Router (it uses useNavigate) - // - RequireAuth should wrap Routes, not be inside it - // - Add all public paths to the whiteList array - // - Remove the custom PrivateRoute component when using RequireAuth -*/} return ( -
+
+
- {routes.map((route, index) => ( - - ))} - } /> + {routes.map((route, index) => ( + + ))} + } />
+
); diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index 1436e32..adb501e 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -1,50 +1,85 @@ import React, { useState } from 'react'; import { Link, useLocation } from 'react-router-dom'; -import { Menu, X } from 'lucide-react'; +import { Menu, X, Battery, Zap } from 'lucide-react'; import routes from '../../routes'; const Header: React.FC = () => { -const [isMenuOpen, setIsMenuOpen] = useState(false); -const location = useLocation(); -const navigation = routes.filter(route => route.visible !== false); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const location = useLocation(); + const navigation = routes.filter(route => route.visible !== false); -return ( -
-
-); + ); }; export default Header; \ No newline at end of file diff --git a/src/db/api.ts b/src/db/api.ts new file mode 100644 index 0000000..bf4dba9 --- /dev/null +++ b/src/db/api.ts @@ -0,0 +1,313 @@ +import { supabase } from "./supabase"; +import type { + Device, + BatteryData, + OtaTask, + MqttLog, + SystemConfig, + DashboardStats, + CreateDeviceRequest, + UpdateDeviceRequest, + CreateOtaTaskRequest, + UpdateConfigRequest, + DeviceDetail, + ChartDataPoint +} from "@/types/types"; + +// 设备管理API +export const deviceApi = { + // 获取所有设备 + async getDevices(): Promise { + const { data, error } = await supabase + .from("devices") + .select("*") + .order("created_at", { ascending: false }); + + if (error) throw error; + return Array.isArray(data) ? data : []; + }, + + // 获取设备详情（包含最新电池数据） + async getDeviceDetail(deviceId: string): Promise { + const { data: device, error: deviceError } = await supabase + .from("devices") + .select("*") + .eq("device_id", deviceId) + .maybeSingle(); + + if (deviceError) throw deviceError; + if (!device) return null; + + const { data: batteryData, error: batteryError } = await supabase + .from("battery_data") + .select("*") + .eq("device_id", deviceId) + .order("timestamp", { ascending: false }) + .limit(1) + .maybeSingle(); + + if (batteryError) throw batteryError; + + return { + ...device, + latestBatteryData: batteryData || undefined + }; + }, + + // 创建设备 + async createDevice(device: CreateDeviceRequest): Promise { + const { data, error } = await supabase + .from("devices") + .insert([device]) + .select() + .maybeSingle(); + + if (error) throw error; + if (!data) throw new Error("Failed to create device"); + return data; + }, + + // 更新设备 + async updateDevice(deviceId: string, updates: UpdateDeviceRequest): Promise { + const { data, error } = await supabase + .from("devices") + .update({ ...updates, updated_at: new Date().toISOString() }) + .eq("device_id", deviceId) + .select() + .maybeSingle(); + + if (error) throw error; + if (!data) throw new Error("Device not found"); + return data; + }, + + // 删除设备 + async deleteDevice(deviceId: string): Promise { + const { error } = await supabase + .from("devices") + .delete() + .eq("device_id", deviceId); + + if (error) throw error; + } +}; + +// 电池数据API +export const batteryDataApi = { + // 获取设备的电池数据 + async getBatteryData(deviceId: string, limit = 100): Promise { + const { data, error } = await supabase + .from("battery_data") + .select("*") + .eq("device_id", deviceId) + .order("timestamp", { ascending: false }) + .limit(limit); + + if (error) throw error; + return Array.isArray(data) ? data : []; + }, + + // 获取实时图表数据 + async getChartData(deviceId: string, hours = 24): Promise { + const startTime = new Date(); + startTime.setHours(startTime.getHours() - hours); + + const { data, error } = await supabase + .from("battery_data") + .select("timestamp, voltage, current, temperature, soc, power") + .eq("device_id", deviceId) + .gte("timestamp", startTime.toISOString()) + .order("timestamp", { ascending: true }); + + if (error) throw error; + return Array.isArray(data) ? data : []; + }, + + // 添加电池数据 + async addBatteryData(data: Omit): Promise { + const { data: result, error } = await supabase + .from("battery_data") + .insert([data]) + .select() + .maybeSingle(); + + if (error) throw error; + if (!result) throw new Error("Failed to add battery data"); + return result; + } +}; + +// OTA任务API +export const otaApi = { + // 获取所有OTA任务 + async getTasks(): Promise { + const { data, error } = await supabase + .from("ota_tasks") + .select("*") + .order("created_at", { ascending: false }); + + if (error) throw error; + return Array.isArray(data) ? data : []; + }, + + // 获取设备的OTA任务 + async getDeviceTasks(deviceId: string): Promise { + const { data, error } = await supabase + .from("ota_tasks") + .select("*") + .eq("device_id", deviceId) + .order("created_at", { ascending: false }); + + if (error) throw error; + return Array.isArray(data) ? data : []; + }, + + // 创建OTA任务 + async createTask(task: CreateOtaTaskRequest): Promise { + const { data, error } = await supabase + .from("ota_tasks") + .insert([{ ...task, start_time: new Date().toISOString() }]) + .select() + .maybeSingle(); + + if (error) throw error; + if (!data) throw new Error("Failed to create OTA task"); + return data; + }, + + // 更新任务状态 + async updateTaskStatus(taskId: string, status: string, progress?: number, errorMessage?: string): Promise { + const updates: any = { status }; + if (progress !== undefined) updates.progress = progress; + if (errorMessage) updates.error_message = errorMessage; + if (status === 'completed' || status === 'failed') { + updates.end_time = new Date().toISOString(); + } + + const { data, error } = await supabase + .from("ota_tasks") + .update(updates) + .eq("id", taskId) + .select() + .maybeSingle(); + + if (error) throw error; + if (!data) throw new Error("Task not found"); + return data; + } +}; + +// MQTT日志API +export const mqttLogApi = { + // 获取MQTT日志 + async getLogs(limit = 100): Promise { + const { data, error } = await supabase + .from("mqtt_logs") + .select("*") + .order("timestamp", { ascending: false }) + .limit(limit); + + if (error) throw error; + return Array.isArray(data) ? data : []; + }, + + // 获取设备的MQTT日志 + async getDeviceLogs(deviceId: string, limit = 50): Promise { + const { data, error } = await supabase + .from("mqtt_logs") + .select("*") + .eq("device_id", deviceId) + .order("timestamp", { ascending: false }) + .limit(limit); + + if (error) throw error; + return Array.isArray(data) ? data : []; + }, + + // 添加MQTT日志 + async addLog(log: Omit): Promise { + const { data, error } = await supabase + .from("mqtt_logs") + .insert([log]) + .select() + .maybeSingle(); + + if (error) throw error; + if (!data) throw new Error("Failed to add MQTT log"); + return data; + } +}; + +// 系统配置API +export const configApi = { + // 获取所有配置 + async getConfigs(): Promise { + const { data, error } = await supabase + .from("system_config") + .select("*") + .order("config_key", { ascending: true }); + + if (error) throw error; + return Array.isArray(data) ? data : []; + }, + + // 获取单个配置 + async getConfig(key: string): Promise { + const { data, error } = await supabase + .from("system_config") + .select("*") + .eq("config_key", key) + .maybeSingle(); + + if (error) throw error; + return data; + }, + + // 更新配置 + async updateConfig(key: string, updates: UpdateConfigRequest): Promise { + const { data, error } = await supabase + .from("system_config") + .update({ ...updates, updated_at: new Date().toISOString() }) + .eq("config_key", key) + .select() + .maybeSingle(); + + if (error) throw error; + if (!data) throw new Error("Config not found"); + return data; + } +}; + +// 仪表盘统计API +export const dashboardApi = { + // 获取仪表盘统计数据 + async getStats(): Promise { + // 获取设备统计 + const { data: devices, error: devicesError } = await supabase + .from("devices") + .select("status"); + + if (devicesError) throw devicesError; + + // 获取任务统计 + const { data: tasks, error: tasksError } = await supabase + .from("ota_tasks") + .select("status"); + + if (tasksError) throw tasksError; + + const deviceList = Array.isArray(devices) ? devices : []; + const taskList = Array.isArray(tasks) ? tasks : []; + + return { + totalDevices: deviceList.length, + onlineDevices: deviceList.filter(d => d.status === 'online').length, + offlineDevices: deviceList.filter(d => d.status === 'offline').length, + maintenanceDevices: deviceList.filter(d => d.status === 'maintenance').length, + errorDevices: deviceList.filter(d => d.status === 'error').length, + activeTasks: taskList.filter(t => ['pending', 'downloading', 'installing'].includes(t.status)).length, + completedTasks: taskList.filter(t => t.status === 'completed').length, + failedTasks: taskList.filter(t => t.status === 'failed').length + }; + } +}; \ No newline at end of file diff --git a/src/db/supabase.ts b/src/db/supabase.ts new file mode 100644 index 0000000..1f7af1f --- /dev/null +++ b/src/db/supabase.ts @@ -0,0 +1,10 @@ +import { createClient } from "@supabase/supabase-js"; + +const supabaseUrl = import.meta.env.VITE_SUPABASE_URL; +const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY; + +if (!supabaseUrl || !supabaseAnonKey) { + throw new Error("Missing Supabase environment variables"); +} + +export const supabase = createClient(supabaseUrl, supabaseAnonKey); \ No newline at end of file diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx new file mode 100644 index 0000000..db73257 --- /dev/null +++ b/src/pages/Dashboard.tsx @@ -0,0 +1,315 @@ +import React, { useState, useEffect } from 'react'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Badge } from '@/components/ui/badge'; +import { Progress } from '@/components/ui/progress'; +import { + Battery, + Zap, + Thermometer, + Activity, + Wifi, + WifiOff, + AlertTriangle, + CheckCircle, + Clock, + XCircle, + Download, + Server +} from 'lucide-react'; +import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts'; +import { dashboardApi, deviceApi, batteryDataApi, otaApi } from '@/db/api'; +import type { DashboardStats, Device, BatteryData, OtaTask } from '@/types/types'; + +const Dashboard: React.FC = () => { + const [stats, setStats] = useState(null); + const [devices, setDevices] = useState([]); + const [recentBatteryData, setRecentBatteryData] = useState([]); + const [recentTasks, setRecentTasks] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + loadDashboardData(); + }, []); + + const loadDashboardData = async () => { + try { + setLoading(true); + const [statsData, devicesData, tasksData] = await Promise.all([ + dashboardApi.getStats(), + deviceApi.getDevices(), + otaApi.getTasks() + ]); + + setStats(statsData); + setDevices(devicesData); + setRecentTasks(tasksData.slice(0, 5)); + + // 获取最新的电池数据用于图表展示 + if (devicesData.length > 0) { + const batteryData = await batteryDataApi.getBatteryData(devicesData[0].device_id, 10); + setRecentBatteryData(batteryData.reverse()); + } + } catch (error) { + console.error('Failed to load dashboard data:', error); + } finally { + setLoading(false); + } + }; + + const getStatusIcon = (status: string) => { + switch (status) { + case 'online': + return ; + case 'offline': + return ; + case 'maintenance': + return ; + case 'error': + return ; + default: + return ; + } + }; + + const getStatusBadge = (status: string) => { + const variants: Record = { + online: "default", + offline: "secondary", + maintenance: "outline", + error: "destructive" + }; + + const labels: Record = { + online: "在线", + offline: "离线", + maintenance: "维护中", + error: "故障" + }; + + return ( + + {labels[status] || status} + + ); + }; + + const getTaskStatusIcon = (status: string) => { + switch (status) { + case 'completed': + return ; + case 'failed': + return ; + case 'downloading': + return ; + default: + return ; + } + }; + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

仪表盘

+
+ 最后更新: {new Date().toLocaleString('zh-CN')} +
+
+ + {/* 统计卡片 */} +
+ + + 总设备数 + + + +
{stats?.totalDevices || 0}
+

+ 在线: {stats?.onlineDevices || 0} | 离线: {stats?.offlineDevices || 0} +

+ + + + + + 在线设备 + + + +
{stats?.onlineDevices || 0}
+

+ 占比: {stats?.totalDevices ? Math.round((stats.onlineDevices / stats.totalDevices) * 100) : 0}% +

+ + + + + + 活跃任务 + + + +
{stats?.activeTasks || 0}
+

+ 已完成: {stats?.completedTasks || 0} | 失败: {stats?.failedTasks || 0} +

+ + + + + + 故障设备 + + + +
{stats?.errorDevices || 0}
+

+ 维护中: {stats?.maintenanceDevices || 0} +

+ + +
+ +
+ {/* 设备状态列表 */} + + + + + 设备状态 + + + +
+ {devices.slice(0, 5).map((device) => ( +
+
+ {getStatusIcon(device.status)} +
+
{device.device_name}
+
{device.device_id}
+
+
+
+ {getStatusBadge(device.status)} +
+ {device.firmware_version} +
+
+
+ ))} +
+ + + + {/* 最近OTA任务 */} + + + + + 最近OTA任务 + + + +
+ {recentTasks.map((task) => ( +
+
+ {getTaskStatusIcon(task.status)} +
+
{task.task_name}
+
{task.device_id}
+
+
+
+
{task.progress}%
+ +
+
+ ))} +
+ + +
+ + {/* 电池数据图表 */} + {recentBatteryData.length > 0 && ( +
+ + + + + 电压趋势 + + + + + + + new Date(value).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} + /> + + new Date(value).toLocaleString('zh-CN')} + formatter={(value: number) => [`${value}V`, '电压']} + /> + + + + + + + + + + + 温度趋势 + + + + + + + new Date(value).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} + /> + + new Date(value).toLocaleString('zh-CN')} + formatter={(value: number) => [`${value}°C`, '温度']} + /> + + + + + +
+ )} +
+ ); +}; + +export default Dashboard; \ No newline at end of file diff --git a/src/pages/DeviceManagement.tsx b/src/pages/DeviceManagement.tsx new file mode 100644 index 0000000..ced2ef2 --- /dev/null +++ b/src/pages/DeviceManagement.tsx @@ -0,0 +1,571 @@ +import React, { useState, useEffect } from 'react'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; +import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { + Plus, + Search, + Edit, + Trash2, + Wifi, + WifiOff, + AlertTriangle, + Clock, + Battery, + Zap, + Thermometer, + Activity +} from 'lucide-react'; +import { useForm } from 'react-hook-form'; +import { toast } from 'sonner'; +import { deviceApi, batteryDataApi } from '@/db/api'; +import type { Device, DeviceStatus, CreateDeviceRequest, UpdateDeviceRequest, BatteryData } from '@/types/types'; + +const DeviceManagement: React.FC = () => { + const [devices, setDevices] = useState([]); + const [filteredDevices, setFilteredDevices] = useState([]); + const [selectedDevice, setSelectedDevice] = useState(null); + const [deviceBatteryData, setDeviceBatteryData] = useState(null); + const [searchTerm, setSearchTerm] = useState(''); + const [statusFilter, setStatusFilter] = useState('all'); + const [loading, setLoading] = useState(true); + const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false); + const [isEditDialogOpen, setIsEditDialogOpen] = useState(false); + const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false); + + const createForm = useForm(); + const editForm = useForm(); + + useEffect(() => { + loadDevices(); + }, []); + + useEffect(() => { + filterDevices(); + }, [devices, searchTerm, statusFilter]); + + const loadDevices = async () => { + try { + setLoading(true); + const data = await deviceApi.getDevices(); + setDevices(data); + } catch (error) { + console.error('Failed to load devices:', error); + toast.error('加载设备列表失败'); + } finally { + setLoading(false); + } + }; + + const filterDevices = () => { + let filtered = devices; + + if (searchTerm) { + filtered = filtered.filter(device => + device.device_name.toLowerCase().includes(searchTerm.toLowerCase()) || + device.device_id.toLowerCase().includes(searchTerm.toLowerCase()) + ); + } + + if (statusFilter !== 'all') { + filtered = filtered.filter(device => device.status === statusFilter); + } + + setFilteredDevices(filtered); + }; + + const handleCreateDevice = async (data: CreateDeviceRequest) => { + try { + await deviceApi.createDevice(data); + toast.success('设备创建成功'); + setIsCreateDialogOpen(false); + createForm.reset(); + loadDevices(); + } catch (error) { + console.error('Failed to create device:', error); + toast.error('设备创建失败'); + } + }; + + const handleEditDevice = async (data: UpdateDeviceRequest) => { + if (!selectedDevice) return; + + try { + await deviceApi.updateDevice(selectedDevice.device_id, data); + toast.success('设备更新成功'); + setIsEditDialogOpen(false); + editForm.reset(); + setSelectedDevice(null); + loadDevices(); + } catch (error) { + console.error('Failed to update device:', error); + toast.error('设备更新失败'); + } + }; + + const handleDeleteDevice = async (deviceId: string) => { + if (!confirm('确定要删除这个设备吗？')) return; + + try { + await deviceApi.deleteDevice(deviceId); + toast.success('设备删除成功'); + loadDevices(); + } catch (error) { + console.error('Failed to delete device:', error); + toast.error('设备删除失败'); + } + }; + + const handleViewDetails = async (device: Device) => { + setSelectedDevice(device); + try { + const batteryData = await batteryDataApi.getBatteryData(device.device_id, 1); + setDeviceBatteryData(batteryData[0] || null); + } catch (error) { + console.error('Failed to load battery data:', error); + setDeviceBatteryData(null); + } + setIsDetailDialogOpen(true); + }; + + const getStatusIcon = (status: DeviceStatus) => { + switch (status) { + case 'online': + return ; + case 'offline': + return ; + case 'maintenance': + return ; + case 'error': + return ; + } + }; + + const getStatusBadge = (status: DeviceStatus) => { + const variants: Record = { + online: "default", + offline: "secondary", + maintenance: "outline", + error: "destructive" + }; + + const labels: Record = { + online: "在线", + offline: "离线", + maintenance: "维护中", + error: "故障" + }; + + return ( + + {labels[status]} + + ); + }; + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

设备管理

+ + + + + + + 添加新设备 + +
+ + ( + + 设备ID + + + + + + )} + /> + ( + + 设备名称 + + + + + + )} + /> + ( + + IP地址 + + + + + + )} + /> + ( + + 固件版本 + + + + + + )} + /> +
+ + +
+ + +
+ +
+ + {/* 搜索和筛选 */} + + +
+
+
+ + setSearchTerm(e.target.value)} + className="pl-10" + /> +
+
+
+ +
+
+ + + + {/* 设备列表 */} +
+ {filteredDevices.map((device) => ( + + +
+ {device.device_name} + {getStatusIcon(device.status)} +
+
{device.device_id}
+ + +
+ 状态 + {getStatusBadge(device.status)} +
+ + {device.ip_address && ( +
+ IP地址 + {device.ip_address} +
+ )} + + {device.firmware_version && ( +
+ 固件版本 + {device.firmware_version} +
+ )} + + {device.last_online && ( +
+ 最后在线 + + {new Date(device.last_online).toLocaleString('zh-CN')} + +
+ )} + +
+ + + +
+ + + ))} +
+ + {filteredDevices.length === 0 && ( + + +
+ {searchTerm || statusFilter !== 'all' ? '没有找到匹配的设备' : '暂无设备'} +
+ + + )} + + {/* 编辑设备对话框 */} + + + + 编辑设备 + +
+ + ( + + 设备名称 + + + + + + )} + /> + ( + + 设备状态 + + + + )} + /> + ( + + IP地址 + + + + + + )} + /> + ( + + 固件版本 + + + + + + )} + /> +
+ + +
+ + +
+ + + {/* 设备详情对话框 */} + + + + 设备详情 + + {selectedDevice && ( +
+
+
+ +
{selectedDevice.device_name}
+
+
+ +
{selectedDevice.device_id}
+
+
+ +
{selectedDevice.device_type}
+
+
+ +
{getStatusBadge(selectedDevice.status)}
+
+
+ +
{selectedDevice.ip_address || '未设置'}
+
+
+ +
{selectedDevice.firmware_version || '未知'}
+
+
+ +
{new Date(selectedDevice.created_at).toLocaleString('zh-CN')}
+
+
+ +
+ {selectedDevice.last_online ? new Date(selectedDevice.last_online).toLocaleString('zh-CN') : '从未在线'} +
+
+
+ + {deviceBatteryData && ( +
+ +
+
+ +
+
电压
+
{deviceBatteryData.voltage?.toFixed(2) || '--'}V
+
+
+
+ +
+
电流
+
{deviceBatteryData.current?.toFixed(2) || '--'}A
+
+
+
+ +
+
温度
+
{deviceBatteryData.temperature?.toFixed(1) || '--'}°C
+
+
+
+ +
+
电量
+
{deviceBatteryData.soc?.toFixed(1) || '--'}%
+
+
+
+ +
+
健康度
+
{deviceBatteryData.soh?.toFixed(1) || '--'}%
+
+
+
+ +
+
功率
+
{deviceBatteryData.power?.toFixed(2) || '--'}W
+
+
+
+
+ 数据时间: {new Date(deviceBatteryData.timestamp).toLocaleString('zh-CN')} +
+
+ )} +
+ )} + + +
+ ); +}; + +export default DeviceManagement; \ No newline at end of file diff --git a/src/pages/MqttManagement.tsx b/src/pages/MqttManagement.tsx new file mode 100644 index 0000000..d0b3fc2 --- /dev/null +++ b/src/pages/MqttManagement.tsx @@ -0,0 +1,430 @@ +import React, { useState, useEffect } from 'react'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Input } from '@/components/ui/input'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { + Wifi, + WifiOff, + Search, + RefreshCw, + MessageSquare, + AlertTriangle, + CheckCircle, + XCircle, + Clock, + Server, + Activity, + Filter, + Download +} from 'lucide-react'; +import { toast } from 'sonner'; +import { mqttLogApi, deviceApi, configApi } from '@/db/api'; +import type { MqttLog, Device, SystemConfig } from '@/types/types'; + +const MqttManagement: React.FC = () => { + const [logs, setLogs] = useState([]); + const [filteredLogs, setFilteredLogs] = useState([]); + const [devices, setDevices] = useState([]); + const [mqttConfig, setMqttConfig] = useState(null); + const [searchTerm, setSearchTerm] = useState(''); + const [deviceFilter, setDeviceFilter] = useState('all'); + const [eventTypeFilter, setEventTypeFilter] = useState('all'); + const [loading, setLoading] = useState(true); + const [isConnected, setIsConnected] = useState(true); // 模拟MQTT连接状态 + + useEffect(() => { + loadData(); + }, []); + + useEffect(() => { + filterLogs(); + }, [logs, searchTerm, deviceFilter, eventTypeFilter]); + + const loadData = async () => { + try { + setLoading(true); + const [logsData, devicesData, configData] = await Promise.all([ + mqttLogApi.getLogs(200), + deviceApi.getDevices(), + configApi.getConfig('mqtt_server') + ]); + setLogs(logsData); + setDevices(devicesData); + setMqttConfig(configData); + } catch (error) { + console.error('Failed to load data:', error); + toast.error('加载数据失败'); + } finally { + setLoading(false); + } + }; + + const filterLogs = () => { + let filtered = logs; + + if (searchTerm) { + filtered = filtered.filter(log => + log.device_id.toLowerCase().includes(searchTerm.toLowerCase()) || + log.event_type.toLowerCase().includes(searchTerm.toLowerCase()) || + (log.message && log.message.toLowerCase().includes(searchTerm.toLowerCase())) || + (log.topic && log.topic.toLowerCase().includes(searchTerm.toLowerCase())) + ); + } + + if (deviceFilter !== 'all') { + filtered = filtered.filter(log => log.device_id === deviceFilter); + } + + if (eventTypeFilter !== 'all') { + filtered = filtered.filter(log => log.event_type === eventTypeFilter); + } + + setFilteredLogs(filtered); + }; + + const getEventTypeIcon = (eventType: string) => { + switch (eventType) { + case 'connect': + return ; + case 'disconnect': + return ; + case 'data': + return ; + case 'error': + return ; + default: + return ; + } + }; + + const getEventTypeBadge = (eventType: string) => { + const variants: Record = { + connect: "default", + disconnect: "destructive", + data: "secondary", + error: "destructive" + }; + + const labels: Record = { + connect: "连接", + disconnect: "断开", + data: "数据", + error: "错误" + }; + + return ( + + {labels[eventType] || eventType} + + ); + }; + + const getDeviceName = (deviceId: string) => { + const device = devices.find(d => d.device_id === deviceId); + return device ? device.device_name : deviceId; + }; + + const exportLogs = () => { + const csvContent = [ + ['时间', '设备ID', '设备名称', '事件类型', '消息', '主题'].join(','), + ...filteredLogs.map(log => [ + new Date(log.timestamp).toLocaleString('zh-CN'), + log.device_id, + getDeviceName(log.device_id), + log.event_type, + log.message || '', + log.topic || '' + ].map(field => `"${field}"`).join(',')) + ].join('\n'); + + const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); + const link = document.createElement('a'); + const url = URL.createObjectURL(blob); + link.setAttribute('href', url); + link.setAttribute('download', `mqtt_logs_${new Date().toISOString().split('T')[0]}.csv`); + link.style.visibility = 'hidden'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + toast.success('日志导出成功'); + }; + + const simulateReconnect = () => { + setIsConnected(false); + toast.info('正在重新连接MQTT服务器...'); + setTimeout(() => { + setIsConnected(true); + toast.success('MQTT服务器连接成功'); + }, 2000); + }; + + if (loading) { + return ( +
+
+
+ ); + } + + const eventTypes = [...new Set(logs.map(log => log.event_type))]; + const connectedDevices = devices.filter(d => d.status === 'online').length; + const totalMessages = logs.length; + const errorMessages = logs.filter(log => log.event_type === 'error').length; + + return ( +
+
+

MQTT管理

+
+ + +
+
+ + {/* MQTT状态卡片 */} +
+ + + MQTT连接 + {isConnected ? : } + + +
{isConnected ? '已连接' : '已断开'}
+

+ {mqttConfig?.config_value || 'mqtt://192.168.1.100:1883'} +

+ {!isConnected && ( + + )} + + + + + + 在线设备 + + + +
{connectedDevices}
+

+ 总设备数: {devices.length} +

+ + + + + + 消息总数 + + + +
{totalMessages}
+

+ 最近24小时 +

+ + + + + + 错误消息 + + + +
{errorMessages}
+

+ 错误率: {totalMessages > 0 ? ((errorMessages / totalMessages) * 100).toFixed(1) : 0}% +

+ + +
+ + {/* 搜索和筛选 */} + + +
+
+
+ + setSearchTerm(e.target.value)} + className="pl-10" + /> +
+
+
+ +
+
+ +
+
+ + + + {/* 日志列表 */} + + + + + MQTT消息日志 + {filteredLogs.length} 条记录 + + + +
+ {filteredLogs.map((log) => ( +
+
+ {getEventTypeIcon(log.event_type)} +
+
+
+
+ + {getDeviceName(log.device_id)} + + + ({log.device_id}) + + {getEventTypeBadge(log.event_type)} +
+ + {new Date(log.timestamp).toLocaleString('zh-CN')} + +
+ {log.message && ( +

{log.message}

+ )} + {log.topic && ( +

+ 主题: {log.topic} +

+ )} +
+
+ ))} +
+ + {filteredLogs.length === 0 && ( +
+
+ {searchTerm || deviceFilter !== 'all' || eventTypeFilter !== 'all' + ? '没有找到匹配的日志记录' + : '暂无MQTT日志记录' + } +
+
+ )} + + + + {/* MQTT配置信息 */} + + + + + MQTT配置 + + + +
+
+ +
+ {mqttConfig?.config_value || 'mqtt://192.168.1.100:1883'} +
+
+
+ +
+ {isConnected ? ( + <> + + 已连接 + + ) : ( + <> + + 已断开 + + )} +
+
+
+ +
+ {isConnected ? '2小时15分钟' : '0分钟'} +
+
+
+ +
+ device/+/battery, device/+/status +
+
+
+ +
1 (至少一次)
+
+
+ +
60秒
+
+
+ + +
+ ); +}; + +export default MqttManagement; \ No newline at end of file diff --git a/src/pages/OtaManagement.tsx b/src/pages/OtaManagement.tsx new file mode 100644 index 0000000..e491236 --- /dev/null +++ b/src/pages/OtaManagement.tsx @@ -0,0 +1,528 @@ +import React, { useState, useEffect } from 'react'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Progress } from '@/components/ui/progress'; +import { Input } from '@/components/ui/input'; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; +import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Textarea } from '@/components/ui/textarea'; +import { + Download, + Plus, + Search, + CheckCircle, + XCircle, + Clock, + AlertTriangle, + Play, + Pause, + RotateCcw, + FileText, + Trash2 +} from 'lucide-react'; +import { useForm } from 'react-hook-form'; +import { toast } from 'sonner'; +import { otaApi, deviceApi } from '@/db/api'; +import type { OtaTask, Device, CreateOtaTaskRequest, OtaStatus } from '@/types/types'; + +const OtaManagement: React.FC = () => { + const [tasks, setTasks] = useState([]); + const [filteredTasks, setFilteredTasks] = useState([]); + const [devices, setDevices] = useState([]); + const [selectedTask, setSelectedTask] = useState(null); + const [searchTerm, setSearchTerm] = useState(''); + const [statusFilter, setStatusFilter] = useState('all'); + const [loading, setLoading] = useState(true); + const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false); + const [isLogDialogOpen, setIsLogDialogOpen] = useState(false); + + const createForm = useForm(); + + useEffect(() => { + loadData(); + }, []); + + useEffect(() => { + filterTasks(); + }, [tasks, searchTerm, statusFilter]); + + const loadData = async () => { + try { + setLoading(true); + const [tasksData, devicesData] = await Promise.all([ + otaApi.getTasks(), + deviceApi.getDevices() + ]); + setTasks(tasksData); + setDevices(devicesData); + } catch (error) { + console.error('Failed to load data:', error); + toast.error('加载数据失败'); + } finally { + setLoading(false); + } + }; + + const filterTasks = () => { + let filtered = tasks; + + if (searchTerm) { + filtered = filtered.filter(task => + task.task_name.toLowerCase().includes(searchTerm.toLowerCase()) || + task.device_id.toLowerCase().includes(searchTerm.toLowerCase()) || + task.firmware_version.toLowerCase().includes(searchTerm.toLowerCase()) + ); + } + + if (statusFilter !== 'all') { + filtered = filtered.filter(task => task.status === statusFilter); + } + + setFilteredTasks(filtered); + }; + + const handleCreateTask = async (data: CreateOtaTaskRequest) => { + try { + await otaApi.createTask(data); + toast.success('OTA任务创建成功'); + setIsCreateDialogOpen(false); + createForm.reset(); + loadData(); + } catch (error) { + console.error('Failed to create task:', error); + toast.error('OTA任务创建失败'); + } + }; + + const handleUpdateTaskStatus = async (taskId: string, status: OtaStatus, progress?: number) => { + try { + await otaApi.updateTaskStatus(taskId, status, progress); + toast.success('任务状态更新成功'); + loadData(); + } catch (error) { + console.error('Failed to update task status:', error); + toast.error('任务状态更新失败'); + } + }; + + const simulateProgress = async (taskId: string) => { + const task = tasks.find(t => t.id === taskId); + if (!task || task.status !== 'pending') return; + + // 模拟下载过程 + await handleUpdateTaskStatus(taskId, 'downloading', 0); + + for (let progress = 10; progress <= 100; progress += 10) { + await new Promise(resolve => setTimeout(resolve, 1000)); + if (progress === 100) { + await handleUpdateTaskStatus(taskId, 'installing', progress); + } else { + await handleUpdateTaskStatus(taskId, 'downloading', progress); + } + } + + // 模拟安装过程 + for (let progress = 10; progress <= 100; progress += 20) { + await new Promise(resolve => setTimeout(resolve, 1500)); + await handleUpdateTaskStatus(taskId, 'installing', progress); + } + + // 完成 + await handleUpdateTaskStatus(taskId, 'completed', 100); + }; + + const getStatusIcon = (status: OtaStatus) => { + switch (status) { + case 'pending': + return ; + case 'downloading': + return ; + case 'installing': + return ; + case 'completed': + return ; + case 'failed': + return ; + } + }; + + const getStatusBadge = (status: OtaStatus) => { + const variants: Record = { + pending: "outline", + downloading: "default", + installing: "default", + completed: "secondary", + failed: "destructive" + }; + + const labels: Record = { + pending: "等待中", + downloading: "下载中", + installing: "安装中", + completed: "已完成", + failed: "失败" + }; + + return ( + + {labels[status]} + + ); + }; + + const getProgressColor = (status: OtaStatus) => { + switch (status) { + case 'downloading': + return 'bg-blue-500'; + case 'installing': + return 'bg-purple-500'; + case 'completed': + return 'bg-green-500'; + case 'failed': + return 'bg-red-500'; + default: + return 'bg-gray-300'; + } + }; + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

OTA管理

+ + + + + + + 创建OTA升级任务 + +
+ + ( + + 目标设备 + + + + )} + /> + ( + + 任务名称 + + + + + + )} + /> + ( + + 目标固件版本 + + + + + + )} + /> +
+ + +
+ + +
+ +
+ + {/* 搜索和筛选 */} + + +
+
+
+ + setSearchTerm(e.target.value)} + className="pl-10" + /> +
+
+
+ +
+
+ + + + {/* 任务列表 */} +
+ {filteredTasks.map((task) => ( + + +
+
+ {getStatusIcon(task.status)} +
+

{task.task_name}

+

+ 设备: {task.device_id} | 目标版本: {task.firmware_version} +

+
+
+
+ {getStatusBadge(task.status)} + {task.progress}% +
+
+ +
+
+ 升级进度 + {task.progress}% +
+ +
+ +
+
+ 创建时间: +
+ {new Date(task.created_at).toLocaleString('zh-CN')} +
+
+ {task.start_time && ( +
+ 开始时间: +
+ {new Date(task.start_time).toLocaleString('zh-CN')} +
+
+ )} + {task.end_time && ( +
+ 结束时间: +
+ {new Date(task.end_time).toLocaleString('zh-CN')} +
+
+ )} + {task.end_time && task.start_time && ( +
+ 耗时: +
+ {Math.round((new Date(task.end_time).getTime() - new Date(task.start_time).getTime()) / 60000)}分钟 +
+
+ )} +
+ + {task.error_message && ( +
+
+ + 错误信息: +
+

{task.error_message}

+
+ )} + +
+ {task.status === 'pending' && ( + + )} + + {task.status === 'failed' && ( + + )} + + + + {['completed', 'failed'].includes(task.status) && ( + + )} +
+ + + ))} +
+ + {filteredTasks.length === 0 && ( + + +
+ {searchTerm || statusFilter !== 'all' ? '没有找到匹配的任务' : '暂无OTA升级任务'} +
+ + + )} + + {/* 任务日志对话框 */} + + + + 任务日志 + + {selectedTask && ( +
+
+
+ 任务名称: +
{selectedTask.task_name}
+
+
+ 设备ID: +
{selectedTask.device_id}
+
+
+ 固件版本: +
{selectedTask.firmware_version}
+
+
+ 当前状态: +
{getStatusBadge(selectedTask.status)}
+
+
+ +
+ +
+
[{new Date(selectedTask.created_at).toLocaleString()}] 任务创建成功
+ {selectedTask.start_time && ( +
[{new Date(selectedTask.start_time).toLocaleString()}] 开始下载固件包...
+ )} + {selectedTask.status === 'downloading' && ( + <> +
[{new Date().toLocaleString()}] 正在下载固件包... ({selectedTask.progress}%)
+
[{new Date().toLocaleString()}] 下载速度: 2.5MB/s
+ + )} + {selectedTask.status === 'installing' && ( + <> +
[{new Date().toLocaleString()}] 固件包下载完成
+
[{new Date().toLocaleString()}] 开始安装固件... ({selectedTask.progress}%)
+
[{new Date().toLocaleString()}] 正在验证固件完整性...
+ + )} + {selectedTask.status === 'completed' && ( + <> +
[{new Date(selectedTask.end_time!).toLocaleString()}] 固件安装完成
+
[{new Date(selectedTask.end_time!).toLocaleString()}] 设备重启中...
+
[{new Date(selectedTask.end_time!).toLocaleString()}] 升级任务完成
+ + )} + {selectedTask.status === 'failed' && selectedTask.error_message && ( + <> +
[{new Date(selectedTask.end_time!).toLocaleString()}] 错误: {selectedTask.error_message}
+
[{new Date(selectedTask.end_time!).toLocaleString()}] 升级任务失败
+ + )} +
+
+
+ )} + + +
+ ); +}; + +export default OtaManagement; \ No newline at end of file diff --git a/src/pages/RealTimeMonitoring.tsx b/src/pages/RealTimeMonitoring.tsx new file mode 100644 index 0000000..66feaaf --- /dev/null +++ b/src/pages/RealTimeMonitoring.tsx @@ -0,0 +1,484 @@ +import React, { useState, useEffect } from 'react'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Badge } from '@/components/ui/badge'; +import { + Battery, + Zap, + Thermometer, + Activity, + TrendingUp, + TrendingDown, + Minus, + RefreshCw, + Play, + Pause +} from 'lucide-react'; +import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts'; +import { deviceApi, batteryDataApi } from '@/db/api'; +import type { Device, BatteryData, ChartDataPoint } from '@/types/types'; + +const RealTimeMonitoring: React.FC = () => { + const [devices, setDevices] = useState([]); + const [selectedDeviceId, setSelectedDeviceId] = useState(''); + const [selectedDevice, setSelectedDevice] = useState(null); + const [chartData, setChartData] = useState([]); + const [latestData, setLatestData] = useState(null); + const [isRealTime, setIsRealTime] = useState(false); + const [timeRange, setTimeRange] = useState(24); + const [loading, setLoading] = useState(true); + + useEffect(() => { + loadDevices(); + }, []); + + useEffect(() => { + if (selectedDeviceId) { + loadDeviceData(); + loadChartData(); + } + }, [selectedDeviceId, timeRange]); + + useEffect(() => { + let interval: NodeJS.Timeout; + if (isRealTime && selectedDeviceId) { + interval = setInterval(() => { + loadDeviceData(); + loadChartData(); + }, 5000); // 每5秒更新一次 + } + return () => { + if (interval) clearInterval(interval); + }; + }, [isRealTime, selectedDeviceId]); + + const loadDevices = async () => { + try { + setLoading(true); + const data = await deviceApi.getDevices(); + setDevices(data.filter(d => d.status === 'online')); // 只显示在线设备 + if (data.length > 0) { + const onlineDevice = data.find(d => d.status === 'online'); + if (onlineDevice) { + setSelectedDeviceId(onlineDevice.device_id); + setSelectedDevice(onlineDevice); + } + } + } catch (error) { + console.error('Failed to load devices:', error); + } finally { + setLoading(false); + } + }; + + const loadDeviceData = async () => { + if (!selectedDeviceId) return; + + try { + const batteryData = await batteryDataApi.getBatteryData(selectedDeviceId, 1); + if (batteryData.length > 0) { + setLatestData(batteryData[0]); + } + } catch (error) { + console.error('Failed to load device data:', error); + } + }; + + const loadChartData = async () => { + if (!selectedDeviceId) return; + + try { + const data = await batteryDataApi.getChartData(selectedDeviceId, timeRange); + setChartData(data); + } catch (error) { + console.error('Failed to load chart data:', error); + } + }; + + const handleDeviceChange = (deviceId: string) => { + setSelectedDeviceId(deviceId); + const device = devices.find(d => d.device_id === deviceId); + setSelectedDevice(device || null); + }; + + const getTrendIcon = (current: number, previous: number) => { + if (current > previous) { + return ; + } else if (current < previous) { + return ; + } else { + return ; + } + }; + + const getValueTrend = (dataKey: keyof BatteryData) => { + if (chartData.length < 2) return null; + const latest = chartData[chartData.length - 1]; + const previous = chartData[chartData.length - 2]; + + const currentValue = latest[dataKey as keyof ChartDataPoint] as number; + const previousValue = previous[dataKey as keyof ChartDataPoint] as number; + + if (currentValue && previousValue) { + return getTrendIcon(currentValue, previousValue); + } + return null; + }; + + const formatTooltipValue = (value: number, name: string) => { + const units: Record = { + voltage: 'V', + current: 'A', + temperature: '°C', + soc: '%', + power: 'W' + }; + return [`${value.toFixed(2)}${units[name] || ''}`, name]; + }; + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

实时监控

+
+ + +
+
+ + {/* 设备选择和时间范围 */} + + +
+
+ + +
+
+ + +
+
+ + + + {selectedDevice && latestData && ( + <> + {/* 实时数据卡片 */} +
+ + + 电压 +
+ + {getValueTrend('voltage')} +
+ + +
{latestData.voltage?.toFixed(2) || '--'}V
+

+ {new Date(latestData.timestamp).toLocaleTimeString('zh-CN')} +

+ + + + + + 电流 +
+ + {getValueTrend('current')} +
+ + +
{latestData.current?.toFixed(2) || '--'}A
+

+ 功率: {latestData.power?.toFixed(2) || '--'}W +

+ + + + + + 温度 +
+ + {getValueTrend('temperature')} +
+ + +
{latestData.temperature?.toFixed(1) || '--'}°C
+

+ {latestData.temperature && latestData.temperature > 50 ? '高温警告' : '温度正常'} +

+ + + + + + 电量 +
+ + {getValueTrend('soc')} +
+ + +
{latestData.soc?.toFixed(1) || '--'}%
+

+ {latestData.soc && latestData.soc < 20 ? '电量不足' : '电量充足'} +

+ + + + + + 健康度 + + + +
{latestData.soh?.toFixed(1) || '--'}%
+

+ {latestData.soh && latestData.soh > 95 ? '状态良好' : '需要关注'} +

+ + +
+ + {/* 图表区域 */} +
+ + + + + 电压趋势 + {isRealTime && 实时} + + + + + + + + + + + + + new Date(value).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} + /> + + new Date(value).toLocaleString('zh-CN')} + formatter={(value: number) => formatTooltipValue(value, 'voltage')} + /> + + + + + + + + + + + 电流趋势 + {isRealTime && 实时} + + + + + + + new Date(value).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} + /> + + new Date(value).toLocaleString('zh-CN')} + formatter={(value: number) => formatTooltipValue(value, 'current')} + /> + + + + + + + + + + + 温度趋势 + {isRealTime && 实时} + + + + + + + new Date(value).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} + /> + + new Date(value).toLocaleString('zh-CN')} + formatter={(value: number) => formatTooltipValue(value, 'temperature')} + /> + + + + + + + + + + + 电量趋势 + {isRealTime && 实时} + + + + + + + + + + + + + new Date(value).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} + /> + + new Date(value).toLocaleString('zh-CN')} + formatter={(value: number) => formatTooltipValue(value, 'soc')} + /> + + + + + +
+ + {/* 设备信息 */} + + + 设备信息 + + +
+
+
设备名称
+
{selectedDevice.device_name}
+
+
+
设备ID
+
{selectedDevice.device_id}
+
+
+
IP地址
+
{selectedDevice.ip_address || '未设置'}
+
+
+
固件版本
+
{selectedDevice.firmware_version || '未知'}
+
+
+ + + + )} + + {!selectedDevice && ( + + +
+ {devices.length === 0 ? '暂无在线设备可监控' : '请选择要监控的设备'} +
+ + + )} +
+ ); +}; + +export default RealTimeMonitoring; \ No newline at end of file diff --git a/src/pages/SystemSettings.tsx b/src/pages/SystemSettings.tsx new file mode 100644 index 0000000..6ddf45d --- /dev/null +++ b/src/pages/SystemSettings.tsx @@ -0,0 +1,579 @@ +import React, { useState, useEffect } from 'react'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Textarea } from '@/components/ui/textarea'; +import { Switch } from '@/components/ui/switch'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { + Settings, + Server, + Shield, + Bell, + Database, + Save, + RotateCcw, + AlertTriangle, + CheckCircle, + Wifi, + HardDrive, + Clock +} from 'lucide-react'; +import { useForm } from 'react-hook-form'; +import { toast } from 'sonner'; +import { configApi } from '@/db/api'; +import type { SystemConfig } from '@/types/types'; + +interface ConfigForm { + mqtt_server: string; + mqtt_username: string; + data_retention_days: string; + alert_temperature_high: string; + alert_temperature_low: string; + alert_voltage_high: string; + alert_voltage_low: string; + ota_server_url: string; +} + +const SystemSettings: React.FC = () => { + const [configs, setConfigs] = useState([]); + const [loading, setLoading] = useState(true); + const [saving, setSaving] = useState(false); + const [notifications, setNotifications] = useState({ + email: true, + sms: false, + push: true + }); + + const { register, handleSubmit, reset, formState: { errors } } = useForm(); + + useEffect(() => { + loadConfigs(); + }, []); + + const loadConfigs = async () => { + try { + setLoading(true); + const data = await configApi.getConfigs(); + setConfigs(data); + + // 填充表单 + const configMap = data.reduce((acc, config) => { + acc[config.config_key] = config.config_value; + return acc; + }, {} as Record); + + reset(configMap as Partial); + } catch (error) { + console.error('Failed to load configs:', error); + toast.error('加载配置失败'); + } finally { + setLoading(false); + } + }; + + const handleSaveConfig = async (data: ConfigForm) => { + try { + setSaving(true); + + // 更新所有配置 + const updatePromises = Object.entries(data).map(([key, value]) => + configApi.updateConfig(key, { config_value: value }) + ); + + await Promise.all(updatePromises); + toast.success('配置保存成功'); + loadConfigs(); + } catch (error) { + console.error('Failed to save configs:', error); + toast.error('配置保存失败'); + } finally { + setSaving(false); + } + }; + + const handleResetDefaults = () => { + if (!confirm('确定要重置为默认配置吗？')) return; + + const defaultConfig: ConfigForm = { + mqtt_server: 'mqtt://192.168.1.100:1883', + mqtt_username: 'admin', + data_retention_days: '30', + alert_temperature_high: '60', + alert_temperature_low: '-10', + alert_voltage_high: '4.2', + alert_voltage_low: '3.0', + ota_server_url: 'https://ota.yidong-energy.com' + }; + + reset(defaultConfig); + toast.info('已重置为默认配置，请点击保存应用更改'); + }; + + const getConfigDescription = (key: string) => { + const descriptions: Record = { + mqtt_server: 'MQTT服务器的连接地址，格式：mqtt://host:port', + mqtt_username: 'MQTT服务器的用户名', + data_retention_days: '电池数据在数据库中的保留天数', + alert_temperature_high: '电池高温报警阈值（摄氏度）', + alert_temperature_low: '电池低温报警阈值（摄氏度）', + alert_voltage_high: '电池高电压报警阈值（伏特）', + alert_voltage_low: '电池低电压报警阈值（伏特）', + ota_server_url: 'OTA固件升级服务器地址' + }; + return descriptions[key] || ''; + }; + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

系统设置

+
+ +
+
+ + + + + + 常规设置 + + + + MQTT配置 + + + + 报警设置 + + + + 系统信息 + + + +
+ + + + + + 数据管理 + + + +
+ + + {errors.data_retention_days && ( +

{errors.data_retention_days.message}

+ )} +

+ {getConfigDescription('data_retention_days')} +

+
+ +
+ + + {errors.ota_server_url && ( +

{errors.ota_server_url.message}

+ )} +

+ {getConfigDescription('ota_server_url')} +

+
+ + + + + + + + 通知设置 + + + +
+
+ +

接收系统报警和状态更新邮件

+
+ + setNotifications(prev => ({ ...prev, email: checked })) + } + /> +
+ +
+
+ +

接收紧急报警短信

+
+ + setNotifications(prev => ({ ...prev, sms: checked })) + } + /> +
+ +
+
+ +

接收浏览器推送通知

+
+ + setNotifications(prev => ({ ...prev, push: checked })) + } + /> +
+ + + + + + + + + + MQTT连接配置 + + + +
+ + + {errors.mqtt_server && ( +

{errors.mqtt_server.message}

+ )} +

+ {getConfigDescription('mqtt_server')} +

+
+ +
+ + + {errors.mqtt_username && ( +

{errors.mqtt_username.message}

+ )} +

+ {getConfigDescription('mqtt_username')} +

+
+ +
+
+ + 连接状态 +
+

+ MQTT服务器连接正常，已订阅主题：device/+/battery, device/+/status +

+
+ + + + + + + + + + 报警阈值设置 + + + +
+
+ + + {errors.alert_temperature_high && ( +

{errors.alert_temperature_high.message}

+ )} +

+ {getConfigDescription('alert_temperature_high')} +

+
+ +
+ + + {errors.alert_temperature_low && ( +

{errors.alert_temperature_low.message}

+ )} +

+ {getConfigDescription('alert_temperature_low')} +

+
+ +
+ + + {errors.alert_voltage_high && ( +

{errors.alert_voltage_high.message}

+ )} +

+ {getConfigDescription('alert_voltage_high')} +

+
+ +
+ + + {errors.alert_voltage_low && ( +

{errors.alert_voltage_low.message}

+ )} +

+ {getConfigDescription('alert_voltage_low')} +

+
+
+ +
+
+ + 注意事项 +
+
    +
  • • 报警阈值设置后将立即生效
    • +
  • • 建议根据电池规格设置合理的阈值范围
    • +
  • • 过于敏感的阈值可能导致频繁报警
    • +
+
+ + + + + + + + + + 系统信息 + + + +
+
+ +
v2.1.3
+
+
+ +
15天 8小时 32分钟
+
+
+ +
PostgreSQL 15.3
+
+
+ +
12.5%
+
+
+ +
68.2%
+
+
+ +
45.8%
+
+
+ +
+ + 正常 +
+
+
+ +
2024-01-15 02:00:00
+
+
+ +
+ + 已激活 +
+
+
+ + + + + + + + 存储统计 + + + +
+
+
+ 设备数据 + 2.3 GB +
+
+
+
+
+ +
+
+ 日志文件 + 856 MB +
+
+
+
+
+ +
+
+ 系统文件 + 1.2 GB +
+
+
+
+
+ +
+
+ 可用空间 + 5.6 GB +
+
+
+
+
+
+ + + + +
+ +
+
+ +
+ ); +}; + +export default SystemSettings; \ No newline at end of file diff --git a/src/routes.tsx b/src/routes.tsx index 25d70a5..cf045c0 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,4 +1,9 @@ -import SamplePage from './pages/SamplePage'; +import Dashboard from './pages/Dashboard'; +import DeviceManagement from './pages/DeviceManagement'; +import RealTimeMonitoring from './pages/RealTimeMonitoring'; +import OtaManagement from './pages/OtaManagement'; +import MqttManagement from './pages/MqttManagement'; +import SystemSettings from './pages/SystemSettings'; import type { ReactNode } from 'react'; interface RouteConfig { @@ -10,9 +15,34 @@ interface RouteConfig { const routes: RouteConfig[] = [ { - name: 'Sample Page', + name: '仪表盘', path: '/', - element: + element: + }, + { + name: '设备管理', + path: '/devices', + element: + }, + { + name: '实时监控', + path: '/monitoring', + element: + }, + { + name: 'OTA管理', + path: '/ota', + element: + }, + { + name: 'MQTT管理', + path: '/mqtt', + element: + }, + { + name: '系统设置', + path: '/settings', + element: } ]; diff --git a/src/types/types.ts b/src/types/types.ts new file mode 100644 index 0000000..2c53922 --- /dev/null +++ b/src/types/types.ts @@ -0,0 +1,135 @@ +// 电池管理系统类型定义 + +export type DeviceStatus = 'online' | 'offline' | 'maintenance' | 'error'; +export type OtaStatus = 'pending' | 'downloading' | 'installing' | 'completed' | 'failed'; + +// 设备信息 +export interface Device { + id: string; + device_id: string; + device_name: string; + device_type: string; + status: DeviceStatus; + ip_address?: string; + firmware_version?: string; + last_online?: string; + created_at: string; + updated_at: string; +} + +// 电池数据 +export interface BatteryData { + id: string; + device_id: string; + voltage?: number; + current?: number; + temperature?: number; + soc?: number; + soh?: number; + power?: number; + timestamp: string; +} + +// OTA升级任务 +export interface OtaTask { + id: string; + device_id: string; + task_name: string; + firmware_version: string; + status: OtaStatus; + progress: number; + start_time?: string; + end_time?: string; + error_message?: string; + created_at: string; +} + +// MQTT日志 +export interface MqttLog { + id: string; + device_id: string; + event_type: string; + message?: string; + topic?: string; + timestamp: string; +} + +// 系统配置 +export interface SystemConfig { + id: string; + config_key: string; + config_value: string; + description?: string; + updated_at: string; +} + +// 仪表盘统计数据 +export interface DashboardStats { + totalDevices: number; + onlineDevices: number; + offlineDevices: number; + maintenanceDevices: number; + errorDevices: number; + activeTasks: number; + completedTasks: number; + failedTasks: number; +} + +// 实时数据图表点 +export interface ChartDataPoint { + timestamp: string; + voltage?: number; + current?: number; + temperature?: number; + soc?: number; + power?: number; +} + +// 设备详情（包含最新电池数据） +export interface DeviceDetail extends Device { + latestBatteryData?: BatteryData; +} + +// API响应类型 +export interface ApiResponse { + data: T; + success: boolean; + message?: string; +} + +// 分页响应 +export interface PaginatedResponse { + data: T[]; + total: number; + page: number; + pageSize: number; +} + +// 创建设备请求 +export interface CreateDeviceRequest { + device_id: string; + device_name: string; + device_type?: string; + ip_address?: string; + firmware_version?: string; +} + +// 更新设备请求 +export interface UpdateDeviceRequest { + device_name?: string; + status?: DeviceStatus; + ip_address?: string; + firmware_version?: string; +} + +// 创建OTA任务请求 +export interface CreateOtaTaskRequest { + device_id: string; + task_name: string; + firmware_version: string; +} + +// 更新系统配置请求 +export interface UpdateConfigRequest { + config_value: string; +} \ No newline at end of file diff --git a/supabase/migrations/01_create_battery_management_tables.sql b/supabase/migrations/01_create_battery_management_tables.sql new file mode 100644 index 0000000..c1908c6 --- /dev/null +++ b/supabase/migrations/01_create_battery_management_tables.sql @@ -0,0 +1,172 @@ +/* +# 创建电池管理系统数据库表 + +## 1. 新建表结构 + +### 1.1 设备管理表 (devices) +- `id` (uuid, 主键, 默认: gen_random_uuid()) +- `device_id` (text, 唯一, 设备ID) +- `device_name` (text, 设备名称) +- `device_type` (text, 设备类型, 默认: 'BBox') +- `status` (device_status, 设备状态) +- `ip_address` (text, IP地址) +- `firmware_version` (text, 固件版本) +- `last_online` (timestamptz, 最后在线时间) +- `created_at` (timestamptz, 创建时间, 默认: now()) +- `updated_at` (timestamptz, 更新时间, 默认: now()) + +### 1.2 电池数据表 (battery_data) +- `id` (uuid, 主键, 默认: gen_random_uuid()) +- `device_id` (text, 设备ID, 外键) +- `voltage` (numeric, 电压) +- `current` (numeric, 电流) +- `temperature` (numeric, 温度) +- `soc` (numeric, 电量百分比) +- `soh` (numeric, 健康度) +- `power` (numeric, 功率) +- `timestamp` (timestamptz, 数据时间戳, 默认: now()) + +### 1.3 OTA升级任务表 (ota_tasks) +- `id` (uuid, 主键, 默认: gen_random_uuid()) +- `device_id` (text, 设备ID) +- `task_name` (text, 任务名称) +- `firmware_version` (text, 目标固件版本) +- `status` (ota_status, 升级状态) +- `progress` (integer, 升级进度, 默认: 0) +- `start_time` (timestamptz, 开始时间) +- `end_time` (timestamptz, 结束时间) +- `error_message` (text, 错误信息) +- `created_at` (timestamptz, 创建时间, 默认: now()) + +### 1.4 MQTT连接日志表 (mqtt_logs) +- `id` (uuid, 主键, 默认: gen_random_uuid()) +- `device_id` (text, 设备ID) +- `event_type` (text, 事件类型) +- `message` (text, 消息内容) +- `topic` (text, MQTT主题) +- `timestamp` (timestamptz, 时间戳, 默认: now()) + +### 1.5 系统配置表 (system_config) +- `id` (uuid, 主键, 默认: gen_random_uuid()) +- `config_key` (text, 唯一, 配置键) +- `config_value` (text, 配置值) +- `description` (text, 配置描述) +- `updated_at` (timestamptz, 更新时间, 默认: now()) + +## 2. 安全策略 +- 所有表均为公开访问，不启用RLS +- 管理员可以对所有数据进行完全访问 + +## 3. 初始数据 +- 添加示例设备数据 +- 添加系统默认配置 +- 添加模拟电池数据用于展示 + +*/ + +-- 创建枚举类型 +CREATE TYPE device_status AS ENUM ('online', 'offline', 'maintenance', 'error'); +CREATE TYPE ota_status AS ENUM ('pending', 'downloading', 'installing', 'completed', 'failed'); + +-- 创建设备管理表 +CREATE TABLE IF NOT EXISTS devices ( + id uuid PRIMARY KEY DEFAULT gen_random_uuid(), + device_id text UNIQUE NOT NULL, + device_name text NOT NULL, + device_type text DEFAULT 'BBox' NOT NULL, + status device_status DEFAULT 'offline'::device_status NOT NULL, + ip_address text, + firmware_version text, + last_online timestamptz, + created_at timestamptz DEFAULT now(), + updated_at timestamptz DEFAULT now() +); + +-- 创建电池数据表 +CREATE TABLE IF NOT EXISTS battery_data ( + id uuid PRIMARY KEY DEFAULT gen_random_uuid(), + device_id text NOT NULL, + voltage numeric(8,2), + current numeric(8,2), + temperature numeric(5,2), + soc numeric(5,2), + soh numeric(5,2), + power numeric(8,2), + timestamp timestamptz DEFAULT now() +); + +-- 创建OTA升级任务表 +CREATE TABLE IF NOT EXISTS ota_tasks ( + id uuid PRIMARY KEY DEFAULT gen_random_uuid(), + device_id text NOT NULL, + task_name text NOT NULL, + firmware_version text NOT NULL, + status ota_status DEFAULT 'pending'::ota_status NOT NULL, + progress integer DEFAULT 0, + start_time timestamptz, + end_time timestamptz, + error_message text, + created_at timestamptz DEFAULT now() +); + +-- 创建MQTT连接日志表 +CREATE TABLE IF NOT EXISTS mqtt_logs ( + id uuid PRIMARY KEY DEFAULT gen_random_uuid(), + device_id text NOT NULL, + event_type text NOT NULL, + message text, + topic text, + timestamp timestamptz DEFAULT now() +); + +-- 创建系统配置表 +CREATE TABLE IF NOT EXISTS system_config ( + id uuid PRIMARY KEY DEFAULT gen_random_uuid(), + config_key text UNIQUE NOT NULL, + config_value text NOT NULL, + description text, + updated_at timestamptz DEFAULT now() +); + +-- 插入示例设备数据 +INSERT INTO devices (device_id, device_name, device_type, status, ip_address, firmware_version, last_online) VALUES +('BBOX-001', 'BBox设备-001', 'BBox', 'online'::device_status, '192.168.1.101', 'v2.1.3', now() - interval '5 minutes'), +('BBOX-002', 'BBox设备-002', 'BBox', 'online'::device_status, '192.168.1.102', 'v2.1.3', now() - interval '2 minutes'), +('BBOX-003', 'BBox设备-003', 'BBox', 'offline'::device_status, '192.168.1.103', 'v2.1.2', now() - interval '2 hours'), +('BBOX-004', 'BBox设备-004', 'BBox', 'maintenance'::device_status, '192.168.1.104', 'v2.1.3', now() - interval '30 minutes'), +('BBOX-005', 'BBox设备-005', 'BBox', 'error'::device_status, '192.168.1.105', 'v2.1.1', now() - interval '1 hour'); + +-- 插入系统配置数据 +INSERT INTO system_config (config_key, config_value, description) VALUES +('mqtt_server', 'mqtt://192.168.1.100:1883', 'MQTT服务器地址'), +('mqtt_username', 'admin', 'MQTT用户名'), +('data_retention_days', '30', '数据保留天数'), +('alert_temperature_high', '60', '高温报警阈值'), +('alert_temperature_low', '-10', '低温报警阈值'), +('alert_voltage_high', '4.2', '高电压报警阈值'), +('alert_voltage_low', '3.0', '低电压报警阈值'), +('ota_server_url', 'https://ota.yidong-energy.com', 'OTA升级服务器地址'); + +-- 插入模拟电池数据 +INSERT INTO battery_data (device_id, voltage, current, temperature, soc, soh, power, timestamp) VALUES +('BBOX-001', 3.85, 2.5, 25.3, 85.2, 98.5, 9.625, now() - interval '1 minute'), +('BBOX-001', 3.84, 2.4, 25.5, 84.8, 98.5, 9.216, now() - interval '2 minutes'), +('BBOX-001', 3.86, 2.6, 25.1, 85.6, 98.5, 10.036, now() - interval '3 minutes'), +('BBOX-002', 3.92, 1.8, 24.8, 92.1, 97.8, 7.056, now() - interval '1 minute'), +('BBOX-002', 3.91, 1.9, 24.9, 91.8, 97.8, 7.429, now() - interval '2 minutes'), +('BBOX-002', 3.93, 1.7, 24.7, 92.4, 97.8, 6.681, now() - interval '3 minutes'); + +-- 插入OTA升级任务数据 +INSERT INTO ota_tasks (device_id, task_name, firmware_version, status, progress, start_time, end_time) VALUES +('BBOX-003', '固件升级至v2.1.3', 'v2.1.3', 'completed'::ota_status, 100, now() - interval '2 hours', now() - interval '1 hour 45 minutes'), +('BBOX-005', '固件升级至v2.1.3', 'v2.1.3', 'failed'::ota_status, 65, now() - interval '1 hour 30 minutes', now() - interval '1 hour 15 minutes'), +('BBOX-004', '固件升级至v2.1.4', 'v2.1.4', 'downloading'::ota_status, 35, now() - interval '15 minutes', NULL); + +-- 插入MQTT日志数据 +INSERT INTO mqtt_logs (device_id, event_type, message, topic, timestamp) VALUES +('BBOX-001', 'connect', '设备连接成功', 'device/BBOX-001/status', now() - interval '5 minutes'), +('BBOX-001', 'data', '电池数据上报', 'device/BBOX-001/battery', now() - interval '1 minute'), +('BBOX-002', 'connect', '设备连接成功', 'device/BBOX-002/status', now() - interval '3 minutes'), +('BBOX-002', 'data', '电池数据上报', 'device/BBOX-002/battery', now() - interval '1 minute'), +('BBOX-003', 'disconnect', '设备断开连接', 'device/BBOX-003/status', now() - interval '2 hours'), +('BBOX-005', 'error', '设备通信异常', 'device/BBOX-005/error', now() - interval '1 hour'); \ No newline at end of file