# 指挥调度平台（大屏）

## 项目简介

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

## 主要技术栈

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

## 项目启动

1. 克隆仓库
  git clone git://139.196.74.78/drone/command-center-dashboard.git
  cd command-center-dashboard

2. 安装依赖
pnpm install

3. 运行开发环境

   pnpm dev

4. 构建项目

   pnpm build:dev  或  pnpm build:prod

## Git提交前缀

**feat+英文冒号+空格+xxxxx**

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

## 目录结构与命名规则

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

#### **📌 公共组件**（`components/`）

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

- 命名方式：`PascalCase.vue`

- **示例**：

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

#### **📌 页面组件**（按页面分类存放）

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

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

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

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

- **示例**：

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

## **屏幕适配说明**

本项目的适配策略如下：采用 `rem`，使用 `postcss-pxtorem` 插件自动转换。

示例：

```
<div :style="{ height: pxToRem(50), width: pxToRem(50) }">test</div>

<script>
import { pxToRem } from '@/utils/rem';
export default {
  mounted() {
    this.style = { height: pxToRem(50), width: pxToRem(50) };
  },
};
</script>

<style scoped lang="scss">
  height: 100px; // 自动转换为 10rem
  width: 100px;      // 自动转换为10rem
</style>
```



## **SVG 图标使用指南**

本项目使用 **`vite-plugin-svg-icons`** 插件进行 SVG 图标管理，支持按需加载，减少体积，提高渲染效率。

------

### **📌 1. 添加 SVG 图标**

将 **SVG 文件** 拷贝到以下目录：

```
/src/assets/svg/
```

例如，将 `user.svg` 放入该目录。

------

### **📌 2. 在组件中使用 SVG 图标**

使用 `SvgIcon` 组件加载 SVG 图标，并支持**自定义颜色和尺寸**：

```
<SvgIcon name="user"  class="userClass" />
```

 🔹 `name`：对应 `/src/assets/svg/` 目录下的 SVG 文件名（无需后缀 `.svg`）。

 🔹 `class`：可选，设置图标类名。