# 指挥调度平台（大屏）

## 项目简介

本项目基于 **Vue 3** 开发，依赖 **Node.js 18 以上** 版本，并集成 **Cesium** 进行三维地图渲染。项目采用 **企业版 Blandx 前端框架** 进行二次开发，并使用 **rem** 进行响应式适配，以确保在不同设备上的良好体验。

## 环境要求

- **Node.js**：18 及以上
- **Vue 版本**：Vue 3
- **依赖管理**： `yarn`
- **Cesium**：用于三维地图可视化

## 项目启动

### 1. 克隆仓库

```sh
git clone git://139.196.74.78/drone/command-center-dashboard.git
cd command-center-dashboard
```

### 2. 安装依赖

```sh
yarn install
```

### 3. 运行开发环境

```sh
yarn dev
```

### 4. 构建项目

```sh
yarn build
```

## 目录结构

```bash
├── public             # 静态资源目录
├── src                # 源代码目录
│   ├── assets        # 资源文件
│   ├── components    # 组件
│   ├── views         # 视图页面
│   ├── router        # 路由配置
│   ├── store         # Vuex 状态管理
│   ├── main.js       # 入口文件
│   ├── App.vue       # 根组件
├── package.json       # 依赖管理
├── vite.config.mjs      # Vue 配置文件
├── README.md          # 项目说明
```

## 主要技术栈

- **Vue 3**：前端框架
- **Vue Router**：前端路由管理
- **Vuex**：状态管理
- **Cesium**：三维地图可视化
- **Axios**：HTTP 请求库
- **Element UI Plus**：UI 组件库



## Git提交前缀

feat+英文冒号+空格+xxxxx

| 类型     | 说明                         | 示例                       |
| -------- | ---------------------------- | -------------------------- |
| feat     | 新增功能                     | feat: 添加用户登录功能     |
| fix      | 修复 bug                     | fix: 修复登录页面样式问题  |
| docs     | 文档更新                     | docs: 更新 README 文件     |
| style    | 代码格式化（不影响代码逻辑） | style: 格式化代码          |
| refactor | 代码重构（不影响代码功能）   | refactor: 重构用户管理模块 |
| perf     | 性能优化                     | perf: 优化数据加载速度     |
| test     | 添加或修改测试               | test: 添加单元测试         |
| chore    | 构建过程或辅助工具的变动     | chore: 更新依赖包          |
| ci       | 持续集成相关配置更改         | ci: 配置 GitHub Actions    |
| revert   | 撤销之前的提交               | revert: 撤销上次提交       |

## 目录结构与命名规则

项目采用 **大写开头的驼峰命名（PascalCase）** 方式，以保持统一性和可读性。

#### **1️⃣ 公共组件**（`components/`）

- **存放全局复用的组件**

- 命名方式：`PascalCase.vue`

- **示例**：

  ```
  components/
  ├── Button.vue
  ├── Modal.vue
  ├── Table.vue
  ```

#### **2️⃣ 页面组件**（按页面分类存放）

- **每个页面独立文件夹，内部组件放在子文件夹**

- **页面文件夹名：PascalCase**

- **页面组件命名：与文件夹名一致**

- **子组件按作用命名，保持层级清晰**

- **示例**：

  ```
  bash复制编辑pages/
  ├── Home/
  │   ├── Home.vue          # 首页主组件
  │   ├── HomeTop.vue       # 首页顶部组件
  │   ├── HomeBottom/
  │   │   ├── HomeBottom.vue        # 首页底部主组件
  │   │   ├── HomeBottomLink.vue    # 首页底部链接组件
  ```