指挥调度平台（大屏）

项目简介

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

环境要求

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

项目启动

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

目录结构

├── 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
页面组件命名：与文件夹名一致
子组件按作用命名，保持层级清晰
示例：

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

样式规范说明

本项目的适配策略如下：

宽度适配：采用 rem，使用 postcss-pxtorem 插件自动转换。
高度适配：采用 vh，需使用 hToV() 方法进行转换。
字体大小适配：同样使用 wToR() 方法，以保证不同屏幕下的良好显示效果。

📌 类名中的样式

宽度：自动转换为 rem，无需额外处理。
高度：需要使用 hToV() 方法进行转换。

示例：

<style scoped lang="scss">
  height: hToV(100); // 100px 转换为 vh
  width: 100px;      // 自动转换为 rem
</style>

📌 行内样式或 JavaScript 动态设置样式

高度：使用 hToV() 进行 vh 适配。
宽度：使用 wToR() 进行 rem 适配。

示例：

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

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

📌 字体大小特别说明

如果需要设置 字体大小，也应使用 wToR() 进行转换，以确保在不同分辨率设备上表现一致。

SVG 图标使用指南

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

📌 1. 添加 SVG 图标

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

/src/assets/svg/

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

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

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

<SvgIcon name="user" color="red" :size="48" className="userClass" />

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

🔹 color：可选，设置图标颜色。

🔹 size：可选，设置图标大小，单位 px。

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