308 lines
7.1 KiB
Markdown
308 lines
7.1 KiB
Markdown
# 红蓝攻防对抗系统 (War-Web)
|
||
|
||
基于 Cesium.js + Vue 3 的3D红蓝攻防态势显示系统前端项目
|
||
|
||
## 🎯 项目介绍
|
||
|
||
本项目是一个军事态势感知与对抗演练系统的前端部分，提供：
|
||
- 🌍 基于Cesium的3D地球态势显示
|
||
- ✈️ 红蓝双方实体管理（飞机、无人机、导弹等）
|
||
- 🗺️ 任务规划与航线设计
|
||
- 📡 实时态势感知与监控
|
||
- 📊 战况评估与分析
|
||
- 🔄 WebSocket实时数据同步
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
- **前端框架**: Vue 3 + TypeScript
|
||
- **3D引擎**: Cesium.js 1.111+
|
||
- **UI组件**: Element Plus
|
||
- **状态管理**: Pinia
|
||
- **路由管理**: Vue Router 4
|
||
- **构建工具**: Vite 5
|
||
- **实时通信**: Socket.io-client
|
||
- **HTTP客户端**: Axios
|
||
|
||
## 📋 环境要求
|
||
|
||
- **Node.js**: >= 18.0.0
|
||
- **npm**: >= 9.0.0 或 **pnpm**: >= 8.0.0
|
||
- **现代浏览器**: Chrome 88+, Firefox 78+, Safari 14+
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 克隆项目
|
||
|
||
```bash
|
||
git clone <repository-url>
|
||
cd war-web
|
||
```
|
||
|
||
### 2. 安装依赖
|
||
|
||
```bash
|
||
# 使用 npm
|
||
npm install
|
||
|
||
# 或使用 pnpm (推荐)
|
||
pnpm install
|
||
```
|
||
|
||
### 3. 环境配置
|
||
|
||
创建环境变量文件：
|
||
|
||
```bash
|
||
# 开发环境
|
||
touch .env.development
|
||
```
|
||
|
||
编辑 `.env.development`:
|
||
|
||
```bash
|
||
# API服务地址
|
||
VITE_API_BASE_URL=http://localhost:8000
|
||
# WebSocket服务地址
|
||
VITE_WS_URL=ws://localhost:8000
|
||
# Cesium Ion访问令牌 (可选)
|
||
VITE_CESIUM_ION_ACCESS_TOKEN=
|
||
# 地图样式
|
||
VITE_MAP_STYLE=satellite
|
||
VITE_TERRAIN_PROVIDER=cesium_world_terrain
|
||
# 应用配置
|
||
VITE_APP_TITLE=红蓝攻防对抗系统
|
||
VITE_APP_VERSION=1.0.0
|
||
# 开发模式配置
|
||
VITE_DEBUG_MODE=true
|
||
VITE_MOCK_DATA=false
|
||
```
|
||
|
||
### 4. 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
服务启动后访问: http://localhost:3000
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
war-web/
|
||
├── public/ # 静态资源
|
||
│ ├── models/ # 3D模型文件 (.glb, .gltf)
|
||
│ └── icons/ # 图标文件
|
||
├── src/
|
||
│ ├── api/ # API接口封装
|
||
│ │ ├── index.ts # API基础配置
|
||
│ │ ├── entities.ts # 实体管理API
|
||
│ │ ├── missions.ts # 任务规划API
|
||
│ │ └── websocket.ts # WebSocket客户端
|
||
│ ├── assets/ # 资源文件
|
||
│ │ ├── icons/ # SVG图标
|
||
│ │ ├── images/ # 图片资源
|
||
│ │ └── models/ # 本地3D模型
|
||
│ ├── cesium/ # Cesium相关模块
|
||
│ │ ├── EntityManager.ts # 实体管理器
|
||
│ │ ├── FlightPathManager.ts # 航线管理器
|
||
│ │ ├── TerrainManager.ts # 地形管理器
|
||
│ │ └── utils.ts # Cesium工具函数
|
||
│ ├── components/ # Vue组件
|
||
│ │ ├── common/ # 通用组件
|
||
│ │ ├── cesium/ # Cesium相关组件
|
||
│ │ └── ui/ # UI组件
|
||
│ ├── stores/ # Pinia状态管理
|
||
│ │ ├── entities.ts # 实体状态
|
||
│ │ ├── missions.ts # 任务状态
|
||
│ │ └── situation.ts # 态势状态
|
||
│ ├── types/ # TypeScript类型定义
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── views/ # 页面组件
|
||
│ │ ├── Dashboard.vue # 主控面板
|
||
│ │ ├── EntityManagement.vue # 实体管理
|
||
│ │ ├── MissionPlanning.vue # 任务规划
|
||
│ │ ├── SituationAwareness.vue # 态势感知
|
||
│ │ └── Assessment.vue # 战况评估
|
||
│ ├── App.vue # 根组件
|
||
│ └── main.ts # 入口文件
|
||
├── package.json # 项目配置
|
||
├── vite.config.ts # Vite配置
|
||
├── tsconfig.json # TypeScript配置
|
||
└── README.md # 项目说明
|
||
```
|
||
|
||
## 🔧 开发说明
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
# 启动开发服务器（热重载）
|
||
npm run dev
|
||
|
||
# 类型检查
|
||
npm run type-check
|
||
|
||
# 代码检查和修复
|
||
npm run lint
|
||
```
|
||
|
||
### 生产构建
|
||
|
||
```bash
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 预览生产构建
|
||
npm run preview
|
||
```
|
||
|
||
### 代码规范
|
||
|
||
项目使用 ESLint + Prettier 进行代码规范检查：
|
||
|
||
```bash
|
||
# 检查代码规范
|
||
npm run lint
|
||
|
||
# 自动修复代码格式
|
||
npm run lint --fix
|
||
```
|
||
|
||
## 🔌 API配置
|
||
|
||
### 后端API接口
|
||
|
||
确保后端服务在 `http://localhost:8000` 运行，主要接口：
|
||
|
||
```
|
||
GET /api/entities # 获取实体列表
|
||
POST /api/entities # 创建实体
|
||
PUT /api/entities/:id # 更新实体
|
||
DELETE /api/entities/:id # 删除实体
|
||
|
||
GET /api/missions # 获取任务列表
|
||
POST /api/missions # 创建任务
|
||
PUT /api/missions/:id # 更新任务
|
||
|
||
GET /api/situation/current # 获取当前态势
|
||
WebSocket /ws/{mission_id} # 实时态势推送
|
||
```
|
||
|
||
### WebSocket连接
|
||
|
||
系统使用WebSocket进行实时数据推送：
|
||
|
||
```typescript
|
||
// 连接示例
|
||
const socket = io('ws://localhost:8000')
|
||
socket.emit('join_mission', { missionId: 'xxx' })
|
||
socket.on('entity_update', (data) => {
|
||
// 处理实体更新
|
||
})
|
||
```
|
||
|
||
## 🎨 主要功能模块
|
||
|
||
### 1. 3D态势显示
|
||
- Cesium地球场景初始化
|
||
- 实体3D模型加载和显示
|
||
- 相机控制和视角切换
|
||
- 地形数据加载
|
||
|
||
### 2. 实体管理
|
||
- 飞机、无人机、导弹等实体的CRUD
|
||
- 实体属性配置
|
||
- 实体分组和筛选
|
||
- 实体状态实时更新
|
||
|
||
### 3. 任务规划
|
||
- 航线规划和编辑
|
||
- 航点拖拽功能
|
||
- 任务模板管理
|
||
- 武器装备配置
|
||
|
||
### 4. 态势感知
|
||
- 实时态势监控
|
||
- 威胁检测和预警
|
||
- 雷达扫描效果
|
||
- 态势数据分析
|
||
|
||
### 5. 战况评估
|
||
- 战况回放功能
|
||
- 损失评估统计
|
||
- 战况报告生成
|
||
- 数据可视化图表
|
||
|
||
## 🔍 调试说明
|
||
|
||
### Vue Devtools
|
||
推荐安装 Vue Devtools 浏览器扩展进行调试
|
||
|
||
### Cesium调试
|
||
在浏览器控制台访问 `window.viewer` 获取Cesium viewer实例
|
||
|
||
### 网络请求调试
|
||
查看浏览器开发者工具的Network面板监控API请求
|
||
|
||
## 🚢 部署说明
|
||
|
||
### 开发环境部署
|
||
|
||
```bash
|
||
# 构建项目
|
||
npm run build
|
||
|
||
# 使用nginx或其他web服务器托管dist目录
|
||
```
|
||
|
||
### 生产环境部署
|
||
|
||
1. 修改生产环境变量 `.env.production`
|
||
2. 执行构建命令 `npm run build`
|
||
3. 将 `dist` 目录部署到Web服务器
|
||
4. 配置nginx反向代理到后端API
|
||
|
||
### Docker部署
|
||
|
||
```dockerfile
|
||
FROM node:18-alpine as builder
|
||
WORKDIR /app
|
||
COPY package*.json ./
|
||
RUN npm ci
|
||
COPY . .
|
||
RUN npm run build
|
||
|
||
FROM nginx:alpine
|
||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||
COPY nginx.conf /etc/nginx/nginx.conf
|
||
EXPOSE 80
|
||
```
|
||
|
||
## 🛟 常见问题
|
||
|
||
### Q: Cesium加载失败
|
||
A: 检查网络连接，确保可以访问Cesium CDN资源
|
||
|
||
### Q: WebSocket连接失败
|
||
A: 确认后端WebSocket服务正常运行，检查防火墙设置
|
||
|
||
### Q: 3D模型不显示
|
||
A: 确认模型文件路径正确，检查模型格式是否为.glb或.gltf
|
||
|
||
### Q: 页面性能问题
|
||
A: 启用Cesium的LOD功能，减少同时渲染的实体数量
|
||
|
||
## 📞 技术支持
|
||
|
||
- 开发文档: `/docs`
|
||
- 问题反馈: GitHub Issues
|
||
- 技术交流: 项目技术群
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
---
|
||
|
||
**注意**: 本项目为军事演练系统，仅供学习和演练使用，请勿用于实际军事行动。
|