指挥调度平台(大屏)
项目简介
本项目基于 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:可选,设置图标类名。