# px4-app

**Repository Path**: jzcode/px4-app

## Basic Information

- **Project Name**: px4-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-18
- **Last Updated**: 2026-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PX4 Ground Control Station — Vue 3 前端

基于 Vue 3 + Vite 构建的 PX4 飞控地面站前端，提供实时遥测监控、姿态可视化、视频流查看、MAVLink 控制台和参数配置功能。

## 功能特性

| 模块 | 说明 |
|------|------|
| 登录系统 | JWT 认证，自动续期，路由守卫 |
| 总览仪表盘 | 姿态仪、罗盘、电池/GPS/高度状态卡、实时曲线 |
| 遥测数据 | 高度/速度/电压历史图表 + 原始数据表格 |
| 摄像头 | 支持 MJPEG / HLS / WebRTC 三种视频流，截图功能 |
| 地图 | 基于高德地图展示实时位置、航向和飞行轨迹 |
| MAVLink 控制台 | 实时消息日志、命令发送、快速指令按钮 |
| 参数配置 | 飞控参数读取/编辑/重置 |

## 技术栈

- **Vue 3** (Composition API)
- **Vite 5** 构建工具
- **Pinia** 状态管理
- **Vue Router 4** 路由
- **Axios** HTTP 客户端（带 JWT 拦截器）
- **WebSocket** 实时遥测数据
- **Element Plus** UI 组件库
- **ECharts / vue-echarts** 图表
- **SCSS** 样式

## 快速开始

### 前置要求

- Node.js >= 18
- 后端服务运行于 `http://localhost:8080`（可在 `vite.config.js` 中修改代理）

### 安装运行

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 生产构建
npm run build
```

浏览器访问 `http://localhost:5173`

## 地图配置

地图页使用高德地图 Web JS API，请在环境变量中配置以下参数：

```bash
VITE_AMAP_KEY=你的高德地图Key
VITE_AMAP_SECURITY_CODE=你的安全密钥
```

其中 `VITE_AMAP_SECURITY_CODE` 可选，是否需要取决于你的高德控制台安全配置。

## 后端接口约定

### 认证

```
POST /api/auth/login
Body: { "username": "...", "password": "..." }
Response: { "token": "<jwt>", "user": { "username": "..." } }
```

所有接口通过 `Authorization: Bearer <token>` 头传递 JWT。

### 实时遥测 (WebSocket)

```
ws://localhost:8080/api/px4/ws?token=<jwt>
```

服务端推送 JSON 帧：

```json
{ "type": "telemetry", "payload": { "roll": 0.1, "pitch": 0.0, "yaw": 1.57, ... } }
{ "type": "mavlink",   "payload": { "msgid": 0, ... } }
```

### 视频流

| 协议 | 地址 |
|------|------|
| MJPEG | `GET /stream/video?token=<jwt>` |
| HLS   | `GET /stream/video/index.m3u8` |
| WebRTC | `POST /api/px4/webrtc/offer` (SDP exchange) |

## 项目结构

```
src/
├── api/           # Axios 封装 + 各模块接口
├── composables/   # WebSocket 复用逻辑
├── components/    # 可复用组件（姿态仪、罗盘、图表等）
├── layouts/       # 主布局（侧边栏 + 顶栏）
├── stores/        # Pinia 状态（auth / px4）
├── views/         # 页面组件
├── styles/        # 全局样式
├── router/        # 路由配置
└── main.js        # 应用入口
```