# 青岛机场大屏指挥系统

## 项目概述
基于Vue.js + WebGIS的PC端大屏指挥系统，适配4K分辨率（3840×2160），用于青岛机场的实时监控和指挥调度。

## 技术栈
- 前端框架：Vue 3 + TypeScript
- 地图引擎：Leaflet
- 地图服务：SuperMap iServer
- UI框架：Element Plus
- 构建工具：Vite

## 分辨率适配方案

### 1. 基础适配方案
```javascript
// 在main.js中添加
const baseWidth = 3840; // 设计稿宽度
const baseHeight = 2160; // 设计稿高度

// 计算缩放比例
const scaleX = window.innerWidth / baseWidth;
const scaleY = window.innerHeight / baseHeight;
const scale = Math.min(scaleX, scaleY);

// 应用缩放
document.documentElement.style.fontSize = `${scale * 100}px`;
```

### 2. 响应式布局
```css
/* 使用rem作为单位 */
.map-container {
  width: 100rem;
  height: 56.25rem; /* 16:9比例 */
}

/* 媒体查询适配不同分辨率 */
@media screen and (max-width: 1920px) {
  :root {
    font-size: 50%; /* 4K分辨率下为100% */
  }
}
```

### 3. 地图适配
- 动态计算地图容器大小
- 根据屏幕比例调整地图缩放级别
- 优化地图瓦片加载策略

## 开发指南

### 环境要求
- Node.js >= 16
- npm >= 8
- Chrome >= 88

### 安装依赖
```bash
npm install
```

### 开发运行
```bash
npm run dev
```

### 构建部署
```bash
npm run build
```

## 性能优化建议

### 1. 地图优化
- 使用地图瓦片预加载
- 实现地图图层按需加载
- 优化地图渲染性能

### 2. 资源优化
- 图片资源使用WebP格式
- 实现资源按需加载
- 使用CDN加速静态资源

### 3. 代码优化
- 使用Vue 3的Composition API
- 实现组件按需加载
- 优化大数据渲染

## 适配注意事项

### 1. 字体大小
- 使用rem作为单位
- 设置基础字体大小
- 避免使用固定像素值

### 2. 布局设计
- 使用flex布局
- 保持16:9的显示比例
- 预留安全边距

### 3. 地图显示
- 动态计算地图中心点
- 优化地图旋转角度
- 调整地图缩放级别

### 4. 交互设计
- 增大点击区域
- 优化触摸操作
- 添加操作反馈

## 开发规范

### 1. 代码规范
- 使用ESLint进行代码检查
- 遵循Vue 3风格指南
- 使用TypeScript进行类型检查

### 2. 组件规范
- 组件命名使用PascalCase
- 保持组件单一职责
- 实现组件文档化

### 3. 注释规范
- 关键代码添加注释
- 使用JSDoc格式
- 保持注释及时更新

## 部署建议

### 1. 服务器配置
- 使用Nginx作为Web服务器
- 配置Gzip压缩
- 设置缓存策略

### 2. 安全配置
- 启用HTTPS
- 配置CORS
- 实现访问控制

### 3. 监控配置
- 添加性能监控
- 实现错误追踪
- 配置日志记录

## 常见问题

### 1. 地图加载慢
- 检查网络连接
- 优化瓦片加载策略
- 使用地图缓存

### 2. 界面显示异常
- 检查分辨率设置
- 验证缩放比例
- 调整布局参数

### 3. 性能问题
- 优化资源加载
- 减少DOM操作
- 使用虚拟列表

npm install leaflet-minimap插件来实现鹰眼功能