132 lines
4.7 KiB
Markdown
132 lines
4.7 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
This is the **青岛机场无人驾驶车辆协同云平台** (Qingdao Airport Autonomous Vehicle Collaborative Cloud Platform), a Vue 3 based web application for managing and monitoring autonomous vehicles at Qingdao Airport. The project uses RuoYi-Vue3 as the base framework.
|
|
|
|
## Development Commands
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Development server (runs on port 6580)
|
|
npm run dev
|
|
# or
|
|
yarn dev
|
|
|
|
# Build for production
|
|
npm run build:prod
|
|
|
|
# Build for staging
|
|
npm run build:stage
|
|
|
|
# Preview production build
|
|
npm run preview
|
|
```
|
|
|
|
**Note**: This project does not have configured linting, testing, or type checking scripts. Manual code review and browser testing are the primary quality assurance methods.
|
|
|
|
## Architecture Overview
|
|
|
|
### Tech Stack
|
|
- **Frontend Framework**: Vue 3.2.45 with Composition API
|
|
- **UI Library**: Element Plus 2.2.21
|
|
- **State Management**: Pinia 2.0.22
|
|
- **Router**: Vue Router 4.1.4
|
|
- **Build Tool**: Vite 3.2.3
|
|
- **Map Integration**: OpenLayers 6.15.1 with SuperMap iclient-ol
|
|
- **Real-time Communication**: WebSocket + STOMP protocol (@stomp/stompjs, sockjs-client)
|
|
|
|
### Key Features
|
|
- **Vehicle Management**: Real-time monitoring and control of autonomous vehicles
|
|
- **Map Visualization**: OpenLayers-based mapping with SuperMap integration for airport layouts
|
|
- **Real-time Data**: WebSocket connections for live vehicle tracking and status updates
|
|
- **System Administration**: User management, role-based permissions, operational logs
|
|
|
|
### Project Structure
|
|
|
|
#### Core Directories
|
|
- `src/views/platform/` - Main platform dashboard
|
|
- `src/views/car/` - Vehicle management interfaces (monitor, park, type)
|
|
- `src/components/map/` - OpenLayers map components and controls
|
|
- `src/components/car/` - Vehicle-specific UI components
|
|
- `src/api/` - API service definitions organized by domain
|
|
- `src/utils/websocket.js` - WebSocket service for real-time communication
|
|
|
|
#### Map System Architecture
|
|
The mapping system is built around OpenLayers with these key components:
|
|
|
|
**Core Map Component**: `src/components/map/OpenLayersMap.vue`
|
|
- Initializes map with EPSG:4528 projection for airport coordinates
|
|
- Integrates SuperMap tile services for base mapping
|
|
|
|
**Control Systems**:
|
|
- `VehicleAnimationSystem.vue` - Smooth vehicle movement animations with 60FPS engine
|
|
- `VehicleMovementControlRefactored.vue` - Enhanced vehicle tracking with motion prediction
|
|
- `LayerSwitcher.vue` - Dynamic layer management
|
|
- `VehicleStyleManager.vue` - Vehicle appearance and styling
|
|
|
|
**Real-time Features**:
|
|
- Motion prediction algorithms for smooth vehicle transitions
|
|
- 300ms timeout handling for connection interruptions
|
|
- Physical engine simulation based on vehicle speed and direction
|
|
|
|
### WebSocket Integration
|
|
|
|
The application uses a custom WebSocket service (`src/utils/websocket.js`) for real-time vehicle data:
|
|
- Auto-reconnection with configurable intervals
|
|
- Event-driven message handling
|
|
- Connection state management
|
|
- STOMP protocol support for structured messaging
|
|
|
|
### Development Server Configuration
|
|
|
|
The Vite development server is configured to:
|
|
- Run on port 6580 with auto-open
|
|
- Proxy API requests to backend servers:
|
|
- `/dev-api` → `http://10.0.0.126:8080` (田哥 server)
|
|
- Alternative: `http://10.0.0.17:8099` (昊天 server)
|
|
|
|
### Map Coordinate System
|
|
|
|
The project uses a custom projection `EPSG:4528` for airport mapping:
|
|
```javascript
|
|
proj4.defs("EPSG:4528", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
|
|
```
|
|
|
|
Center coordinates: `[40507885.133754, 4025694.476392]`
|
|
|
|
### Component Patterns
|
|
|
|
**Global Components** (auto-registered):
|
|
- `Pagination` - Standardized pagination
|
|
- `RightToolbar` - Table operation toolbar
|
|
- `FileUpload` / `ImageUpload` - File handling
|
|
- `TreeSelect` - Hierarchical selection
|
|
- `DictTag` - Dictionary value display
|
|
|
|
**Route Structure**:
|
|
- Static routes defined in `src/router/index.js`
|
|
- Dynamic routes based on user permissions
|
|
- Layout-based routing with nested components
|
|
|
|
### Performance Optimizations
|
|
|
|
**Vehicle Animation System**:
|
|
- `requestAnimationFrame` for 60FPS smooth animations
|
|
- Distance threshold checks (0.1m) to avoid unnecessary calculations
|
|
- Motion history tracking (3 points) for trajectory prediction
|
|
- Easing functions for natural movement curves
|
|
|
|
### Known Issues & TODO
|
|
As documented in README.md:
|
|
1. Left sidebar menu state not preserved on refresh
|
|
2. First-level menu missing background color when second-level menu is selected
|
|
|
|
### API Backend Integration
|
|
- Uses axios for HTTP requests with interceptors
|
|
- JWT token authentication via js-cookie
|
|
- Centralized error handling and response formatting |