光伏机器人环境感知服务平台

1项目概述

本项目（metadata 名：光伏机器人环境感知服务平台）是一个面向光伏电站场景的机器人智能管理平台。它将巡检机器人 / 无人机、视频监控、告警处理与运维工单整合到单一 Web 控制台，提供设备管理、实时监控、视频回传、状态预警、AI 诊断分析、清洗优化、报表中心与视频下载等一站式能力。

系统定位是前端 SPA，通过四条独立通信通道对接后端的 API、MQTT、WebSocket 与 GeoServer 服务，实现“低延迟控制 + 高吞吐遥测 + 实时视频”的多协议协同。

2技术栈选型

3系统分层架构

系统自上而下分为四层。应用层内部进一步拆为路由、页面、组件、状态四个子层；通信层以四条并行通道桥接前后端。

4核心模块详解

4.1 路由层 src/router

采用 createBrowserRouter + 全量 lazy() 懒加载，首屏只加载必要代码。路由通过 routeMeta 声明每个路径的 角色白名单（admin / operator / viewer）与 requiresAuth，ProtectedRoute 在进入受保护路由前校验登录态与权限，未登录跳转 /login。

4.2 页面层 src/pages

4.3 组件层 src/components

4.4 状态管理 src/store

4.5 API 服务层 src/api

request.ts 创建全局唯一 Axios 实例：baseURL 来自 env.js，超时 100s，withCredentials。请求拦截器注入 Authorization: Bearer <token>；响应拦截器对 401（业务码或 HTTP 状态）触发带全局锁的统一登出（isLoggingOut 保证并发 401 只执行一次），清存储 → dispatch logout → 跳转 /login。

业务 API 按域拆分：api.ts（设备任务/作业/热成像）、device.ts、aiAnalysis.ts、alarmApi.js、workOrder.ts、reportDownloader.ts、systemSetting.ts，以及 login / mune / organization / role / stationManage / user 子模块。

5实时通信层设计

这是系统区别于普通 CRUD 后台的核心。四条通道各司其职、并行工作：

6数据流设计

6.1 认证与会话流

登录成功后 token 写入 localStorage 与 cookie（含跨域 sharetoken），Layout 据用户 ID 拉取菜单列表（动态构建侧边栏）与场站列表（默认选第一个）。后续所有请求由拦截器自动带 token；401 时统一登出回登录页。

6.2 实时设备控制环（核心链路）

关键设计：控制下行用 WebSocket（低延迟、可靠、双向），状态上行用 MQTT（发布订阅、一对多广播）。两条通道互不阻塞——即便视频/遥测流量大，也不会影响控制指令的实时性。手柄输入经 50ms 节流，避免高频刷爆带宽。

6.3 实时监控遥测流

设备按 topic 发布状态（位置、电量、传感器等），前端 useMqtt 订阅后驱动 Cesium 地图更新设备图标位置与实时监控面板。

6.4 视频回传流

useWebRTCPlayer(deviceId, url) 以 deviceId+url 为唯一键创建独立 video 元素并拉流，组件卸载时统一销毁 player，防止内存泄漏。同时支持 Agora RTC 与火山引擎 RTC 两套备选方案。

6.5 HTTP 业务数据流

所有 REST 请求经统一 Axios 实例：请求拦截器注入 Bearer token，响应拦截器解包 response.data 并统一处理 401 登出。

7目录结构

机器人智慧服务系统/
├── env.js                  # 环境配置（baseURL / WS_URL / mqtt_url / geoserver_url）
├── vite.config.ts          # 构建配置（别名 @、Cesium 插件、CSS 分割）
├── index.html              # 入口 HTML
├── metadata.json           # 项目元信息（真实名称：光伏机器人环境感知服务平台）
└── src/
    ├── api/                # API 服务层
    │   ├── request.ts      #   Axios 实例 + 拦截器（401 统一登出）
    │   ├── api.ts          #   设备任务/作业/热成像等业务接口
    │   ├── device.ts / aiAnalysis.ts / alarmApi.js / workOrder.ts ...
    │   └── login/ mune/ organization/ role/ stationManage/ user/
    ├── components/         # 组件层
    │   ├── Layout.tsx / ProtectedRoute.tsx
    │   ├── devices/        #   设备控制（DeviceController / DroneVideoPlayer / XboxController ...）
    │   ├── alerts/         #   告警六件套
    │   ├── SystemSetting/  #   系统设置子页面
    │   ├── WebSocketManager.ts   # WS 单例
    │   ├── useWebRTCStream.tsx   # WebRTC 拉流 Hook
    │   ├── Map.jsx / VideoPlayer / AgoraRtc / VolcRtcPlayer
    │   └── Weather/
    ├── hooks/useMqtt.ts    # MQTT 订阅 Hook
    ├── pages/              # 17 个业务页面
    ├── router/index.tsx    # 全懒加载路由 + routeMeta 角色白名单
    ├── store/              # Redux（userSlice / stationSlice / types）
    ├── lib/TracePoint/     # 工具库（轨迹点）
    ├── assets/ / types/    # 静态资源 / 类型定义
    └── App / main 入口

8关键设计决策与特点