forked from drone/command-center-dashboard

edit | blame | history | raw

指挥调度平台(大屏)

项目简介

本项目基于 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

  1. 构建项目

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

edit | blame | history | raw
BladeX商业授权许可协议

一、 知识产权:
BladeX系列产品知识产权归上海布雷德科技有限公司独立所有

二、 许可:
1. 在您完全接受并遵守本协议的基础上,本协议授予您使用BladeX的某些权利和非独占性许可。
2. 本协议中,将本产品使用用途分为"专业版用途"和"企业版用途"。
3. "专业版用途"定义:指个人在非团体机构中出于任何合法目的使用本产品(任何目的包括商业目的或非盈利目的)。
4. "企业版用途"定义:指拥有合法执照的团体机构(例如公司企业、政府、学校、军队、医院、社会团体等各类组织)(不包含集团,若集团使用则需为各个子公司分别购买企业授权)出于任何合法目的使用本产品(任何目的包括商业目的或非盈利目的)。
5. 若您不能以拥有合法执照的团体机构名义购买企业版,则视为个人名义购买,仅可行使专业版用途。在遵守此协议的前提下,后续有一次机会将企业版授权免费绑定至法人为购买人的新公司,并从专业版用途转为企业版用途。

三、 约束和限制:
1. 本产品只能由您为本协议许可的目的而使用,您不得透露给任何第三方;
2. 从本产品取得的任何信息、软件、产品或服务,您不得对其进行修改、改编或基于以上内容创建同种类别的衍生产品并售卖。
3. 您不得对本产品以及与之关联的商业授权进行发布、出租、销售、分销、抵押、转让、许可或发放子许可证。
4. 本产品商业授权版可能包含一些独立功能或特性,这些功能只有在您购买商业授权后才可以使用。在未取得商业授权的情况下,您不得使用、尝试使用或复制这些授权版独立功能。
5. 若您的客户要求以源码方式交付软件,需缴纳企业版授权费用,否则本产品部分不得提供源码。

四、 不得用于非法或禁止的用途:
您在使用本产品或服务时,不得将本产品产品或服务用于任何非法用途或本协议条款、条件和声明禁止的用途。

五、 免责说明:
1. 本产品按"现状"授予许可,您须自行承担使用本产品的风险。BladeX团队不对此提供任何明示、暗示或任何其它形式的担保和表示。在任何情况下,对于因使用或无法使用本软件而导致的任何损失(包括但不仅限于商业利润损失、业务中断或业务信息丢失),BladeX团队无需向您或任何第三方负责,即使BladeX团队已被告知可能会造成此类损失。在任何情况下, BladeX团队均不就任何直接的、间接的、附带的、后果性的、特别的、惩戒性的和处罚性的损害赔偿承担任何责任,无论该主张是基于保证、合同、侵权(包括疏忽)或是基于其他原因作出。
2. 本产品可能内置有第三方服务,您应自行评估使用这些第三方服务的风险,由使用此类第三方服务而产生的纠纷,全部责任由您自行承担。
3. BladeX团队不对使用本产品构建的网站中任何信息内容以及导致的任何版权纠纷、法律争议和后果承担任何责任,全部责任由您自行承担。
4. BladeX团队可能会经常提供产品更新或升级,但BladeX团队没有为根据本协议许可的产品提供维护或更新的责任。
5. BladeX团队可能会按照官方制定的答疑规则为您进行答疑,但BladeX团队没有为根据本协议许可的产品提供技术支持的义务或责任。

六、 权利和所有权的保留:
BladeX团队保留所有未在本协议中明确授予您的所有权利。BladeX团队保留随时更新本协议的权利,并只需公示于对应产品项目的LICENSE文件,无需征得您的事先同意且无需另行通知,更新后的内容应于公示即时生效。您可以随时访问产品地址并查阅最新版许可条款,在更新生效后您继续使用本产品则被视作您已接受了新的条款。

七、 协议终止
1. 您一旦开始复制、下载、安装或者使用本产品,即被视为完全理解并接受本协议的各项条款,在享有上述条款授予的许可权力同时,也受到相关的约束和限制,本协议许可范围以外的行为,将直接违反本协议并构成侵权。
2. 一旦您违反本协议的条款,BladeX团队随时可能终止本协议、收回许可和授权,并要求您承担相应法律和经济责任。
README 4 KB