指挥调度平台（大屏）

项目简介

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

主要技术栈

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

项目启动

克隆仓库
git clone git://139.196.74.78/drone/command-center-dashboard.git
cd command-center-dashboard
安装依赖
pnpm install
运行开发环境

pnpm dev

构建项目

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：可选，设置图标类名。