| | |
| | | ## 版权声明 |
| | | * BladeX是一个商业化软件,系列产品知识产权归**上海布雷德科技有限公司**独立所有 |
| | | * 您一旦开始复制、下载、安装或者使用本产品,即被视为完全理解并接受本协议的各项条款 |
| | | * 更多详情请看:[BladeX商业授权许可协议](https://license.bladex.cn) |
| | | # 指挥调度平台(大屏) |
| | | |
| | | ## 答疑流程 |
| | | >1. 遇到问题或Bug |
| | | >2. 业务型问题打断点调试尝试找出问题所在 |
| | | >3. 系统型问题通过百度、谷歌、社区查找解决方案 |
| | | >4. 未解决问题则进入技术社区进行发帖提问:[https://sns.bladex.cn](https://sns.bladex.cn) |
| | | >5. 将帖子地址发至商业群,特别简单三言两语就能描述清楚的也可在答疑时间内发至商业群提问 |
| | | >6. 发帖的时候一定要描述清楚,详细描述遇到问题的**重现步骤**、**报错详细信息**、**相关代码与逻辑**、**使用软件版本**以及**操作系统版本**,否则随意发帖提问将会提高我们的答疑难度。 |
| | | ## 项目简介 |
| | | |
| | | ## 答疑时间 |
| | | * 工作日:9:00 ~ 17:00 提供答疑,周末、节假日休息,暂停答疑 |
| | | * 请勿**私聊提问**,以免被其他用户的消息覆盖从而无法获得答疑 |
| | | * 答疑时间外遇到问题可以将问题发帖至[技术社区](https://sns.bladex.cn),我们后续会逐个回复 |
| | | 本项目基于 **Vue 3** 开发,依赖 **Node.js 18 以上** 版本,并集成 **Cesium** 进行三维地图渲染。项目采用 **企业版 Blandx 前端框架** 进行二次开发,并使用 **rem** 进行响应式适配,以确保在不同设备上的良好体验。 |
| | | |
| | | ## 授权范围 |
| | | * 专业版:只可用于**个人学习**及**个人私活**项目,不可用于公司或团队,不可泄露给任何第三方 |
| | | * 企业版:可用于**企业名下**的任何项目,企业版员工在**未购买**专业版授权前,只授权开发**所在授权企业名下**的项目,**不得将BladeX用于个人私活** |
| | | * 共同遵守:若甲方需要您提供项目源码,则需代为甲方购买BladeX企业授权,甲方购买后续的所有项目都无需再次购买授权 |
| | | ## 主要技术栈 |
| | | |
| | | ## 商用权益 |
| | | * ✔️ 遵守[商业协议](https://license.bladex.cn)的前提下,将BladeX系列产品用于授权范围内的商用项目,并上线运营 |
| | | * ✔️ 遵守[商业协议](https://license.bladex.cn)的前提下,不限制项目数,不限制服务器数 |
| | | * ✔️ 遵守[商业协议](https://license.bladex.cn)的前提下,将自行编写的业务代码申请软件著作权 |
| | | - **Vue 3**:前端框架 |
| | | - **Vue Router**:前端路由管理 |
| | | - **Vuex**:状态管理 |
| | | - **Cesium**:三维地图可视化 |
| | | - **Axios**:HTTP 请求库 |
| | | - **Element UI Plus**:UI 组件库 |
| | | |
| | | ## 何为侵权 |
| | | * ❌ 不遵守商业协议,私自销售商业源码 |
| | | * ❌ 以任何理由将BladeX源码用于申请软件著作权 |
| | | * ❌ 将商业源码以任何途径任何理由泄露给未授权的单位或个人 |
| | | * ❌ 开发完毕项目,没有为甲方购买企业授权,向甲方提供了BladeX代码 |
| | | * ❌ 基于BladeX拓展研发与BladeX有竞争关系的衍生框架,并将其开源或销售 |
| | | ## 项目启动 |
| | | |
| | | ## 侵权后果 |
| | | * 情节较轻:第一次发现警告处理 |
| | | * 情节较重:封禁账号,踢出商业群,并保留追究法律责任的权利 |
| | | * 情节严重:与本地律师事务所合作,以公司名义起诉侵犯计算机软件著作权 |
| | | 1. 克隆仓库 |
| | | git clone git://139.196.74.78/drone/command-center-dashboard.git |
| | | cd command-center-dashboard |
| | | |
| | | ## 举报有奖 |
| | | * 向官方提供有用线索并成功捣毁盗版个人或窝点,将会看成果给予 500~10000 不等的现金奖励 |
| | | * 官方唯一指定QQ:1272154962 |
| | | 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`:可选,设置图标类名。 |