# bi **Repository Path**: rootxss/bi ## Basic Information - **Project Name**: bi - **Description**: 物联网客户段展示端+大屏 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 8 - **Created**: 2026-04-07 - **Last Updated**: 2026-04-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 运维机房动力环境监控 BI 基于 Vue 3 + Vite 构建的机房动力环境监控大屏项目，面向信息机房、消防、门禁、告警、能耗与运维总览场景。项目同时承担 BI 门户、platform 单点登录入口、doors 门禁跳转中台三类职责。 ## 项目定位 这个项目不是单一页面应用，而是一套以 BI 可视化为外壳的运维入口，当前包含三类页面形态： 1. **总览门户页**：统一展示机房、消防、能耗、门禁、分中心、AI 运维等核心指标。 2. **大屏类页面**：如信息机房管理、消防大屏，采用三列面板 + 顶部导航的大屏布局。 3. **数据管理页**：如告警管理、AI 运维、分中心管理、能源管控，采用常规模块化表格/卡片页。 ## 技术栈 - Vue 3 - Vite 4 - Vue Router 4（Hash 路由） - Pinia（当前仅作为基础能力接入，业务状态主要由 composable 管理） - Element Plus - Axios - ECharts - GSAP - three.js - video.js - vite-plugin-mock ## 当前能力概览 - 登录页支持： - 本地账号密码登录 - platform 统一登录跳转 - platform `sso_ticket` 回跳换票登录 - 业务页统一受路由守卫保护，未登录自动回到登录页并保留目标路由 - 顶部导航支持跳转到： - platform - doors - 根组件内置告警轮询，登录后会定时拉取未关闭告警并弹出通知 - 通过平台接口、门禁接口和本地兼容层，向现有页面输出稳定的数据结构 - 支持构建后上传七牛云 CDN ## 页面与路由 | 路由 | 页面 | 说明 | | --- | --- | --- | | `/login` | 登录页 | 唯一公开页，支持平台统一登录 | | `/home` | 总览 | 系统总入口 | | `/machine-room` | 信息机房管理 | 大屏页 | | `/overview` | 总览别名 | 重定向到 `/home` | | `/alarm-management` | 报警管理 | 告警筛选、详情、关闭 | | `/energy-control` | 能源管控 | Tab 页面，含能源监控/能耗分析 | | `/device-detail` | 设备详情 | 当前为跳转外部平台的中转页 | | `/fire-safety` | 消防大屏 | 大屏页 | | `/ai-ops` | AI 运维 | 当前以 fallback 数据驱动 | | `/center-management` | 分中心管理 | 当前以 fallback 数据驱动 | ## 运行要求 - Node.js 18+ - 推荐使用 `pnpm` - 也支持 `npm` ## 安装依赖 ```bash pnpm install # 或 npm install ``` ## 常用脚本 ```bash pnpm dev pnpm build pnpm preview pnpm build-qiniu ``` 如果使用 npm： ```bash npm run dev npm run build npm run preview npm run build-qiniu ``` 说明： - 开发服务默认监听 `0.0.0.0:7800` - 项目当前未定义 `lint`、`typecheck` 脚本 - `build-qiniu` 会在构建完成后执行 `qiniu.js` 上传产物 ## 启动与构建 ### 本地开发 默认通过 Vite 代理转发以下后端： - `/api` → `http://192.168.7.119:8000` - `/doors-api` → `http://192.168.7.88:7666` 如需覆盖： ```bash VITE_API_PROXY_TARGET=http://127.0.0.1:8000 \ VITE_DOORS_PROXY_TARGET=http://127.0.0.1:7666 \ pnpm dev ``` ### 直接指定接口基址 如果前端不想走 Vite 代理，可直接指定 API Base URL： ```bash VITE_API_BASE_URL=http://127.0.0.1:8000 pnpm dev ``` > `VITE_API_BASE_URL` 未设置时默认使用同源 `/api`。 ## 环境变量 ### API / 代理相关 | 变量 | 用途 | | --- | --- | | `VITE_API_BASE_URL` | 前端直连 platform API 时使用的基址，默认 `/api` | | `VITE_API_PROXY_TARGET` | 开发环境 `/api` 代理目标 | | `VITE_DOORS_PROXY_TARGET` | 开发环境 `/doors-api` 代理目标 | | `VITE_DOORS_API_BASE_URL` | 门禁 API 请求基址，默认 `/doors-api` | ### SSO / 页面跳转相关 | 变量 | 用途 | | --- | --- | | `VITE_PLATFORM_ORIGIN` | platform API / SSO 源站地址 | | `VITE_PLATFORM_APP_URL` | platform 页面入口地址 | | `VITE_BI_APP_URL` | BI 对外访问地址，用于第三方系统回跳 | | `VITE_DOORS_APP_URL` | doors 页面入口地址 | ### 推荐示例 ```bash VITE_PLATFORM_ORIGIN=http://192.168.7.119:8000 VITE_PLATFORM_APP_URL=http://192.168.7.119:8000 VITE_BI_APP_URL=http://127.0.0.1:7800 VITE_DOORS_APP_URL=http://192.168.7.88:7666 VITE_DOORS_API_BASE_URL=/doors-api VITE_API_PROXY_TARGET=http://192.168.7.119:8000 VITE_DOORS_PROXY_TARGET=http://192.168.7.88:7666 ``` ## 登录、鉴权与跳转链路 ### 1. 登录模型 项目同时维护两类会话： - **BI 登录态**：用于进入本系统受保护页面 - **platform 登录态**：用于继续签发 platform / doors 的单点票据 相关能力主要位于： - `src/utils/authSession.js` - `src/utils/platformLoginFlow.js` - `src/api/platformSso.js` - `src/view/Login.vue` ### 2. 路由守卫 - 路由采用 `createWebHashHistory()` - 只有 `/login` 是公开页 - 访问其他页面时，如果没有 token，会自动跳转到 `/login?state=...` - 登录成功后会回到原目标路由 相关文件： - `src/router/index.js` - `src/router/routes.js` - `src/router/guards.js` ### 3. platform 作为统一登录入口 支持以下场景： - platform 把用户跳转到 BI 登录页，并附带 `sso_ticket` - BI 登录页调用 platform 的接口把票据换成登录态 - 登录后自动回跳到目标页面 典型入口示例： ```text /#/login?sso_ticket=...&platform_origin=http://platform-host ``` ### 4. BI 作为门户入口 用户在 BI 本地登录成功后，系统会尝试同步登录 platform，并缓存 `platform_access_token`。这样在点击： - 顶部“平台” - 顶部“门禁” - 某些需跳转 platform 的业务入口 时，可以优先走 platform 的 SSO ticket 跳转；失败时再退化到目标系统登录页。 ### 5. doors 接入方式 doors 数据与跳转依赖 platform 签发的 ticket，再调用 doors 的： ```text POST /auth/sso/exchange ``` 换取本地 `doors_token`。如果目标环境未暴露该接口： - 门禁统计会受限 - 门禁单点登录会降级 - 页面最终会回退到目标系统登录页或提示失败 ## 项目架构 项目整体采用“页面 → composable → service → API/bridge → mapper”的分层方式。 ### 1. 应用入口层 - `src/main.js` - 挂载 Vue 应用 - 接入 Router / Pinia / Element Plus - 注入全局样式、字体图标、适配脚本 - `src/App.vue` - 渲染 `router-view` - 维护登录后的告警轮询和通知弹窗 ### 2. 路由层 - `src/router/routes.js`：定义页面路由 - `src/router/guards.js`：统一做登录校验、标题切换 ### 3. API 与兼容桥接层 #### 通用请求 - `src/api/request.js` - 注入 Authorization - 统一响应结构 - `401` 时清理会话并跳回登录页 #### platform / doors / SSO - `src/api/platformSso.js`：平台票据换取、签发、跳转 URL 构造 - `src/api/services/accessControlService.js`：doors 会话换票与门禁统计 #### 平台数据兼容层 - `src/api/platformAdapter.js` - 聚合平台目录、设备、遥测、告警 - 做缓存、分页、兼容旧结构适配 - `src/api/services/platformBridge.js` - 提供面向旧大屏结构的桥接能力 #### 业务 API 服务 - `src/api/services/deviceService.js` - `src/api/services/alarmService.js` - `src/api/services/largeScreenService.js` - `src/api/services/accessControlService.js` ### 4. 业务特性层 `src/features/dashboard` 这是当前项目最核心的业务层，分为四类： #### composables 负责页面状态与生命周期，例如： - `useAlarmManagement.js` - `useAiOpsPage.js` - `useCenterManagementPage.js` - `useModuleTabs.js` #### services 负责拼装页面需要的数据，并提供 fallback： - `overviewService.js` - `overviewFacadeService.js` - `machineRoomService.js` - `fireSafetyService.js` - `alarmManagementService.js` - `modulePageService.js` #### mappers 负责把平台/门禁/业务数据映射成页面需要的最终结构，是项目的防腐层： - 告警映射 - 概览统计映射 - 机房设备映射 - 消防设备映射 - 页面 UI 数据映射 #### constants 负责统一沉淀： - 页面布局配置 - 大屏面板布局 - fallback 数据 - Tab 配置 - 固定设备 ID ### 5. 页面层 `src/view` #### 大屏页 - `src/view/home.vue`：信息机房管理 - `src/view/FireSafety.vue`：消防大屏 这两页复用同一种布局模式： - 顶部栏 `top` - 左/中/右三列面板 - 中部重点可视化区域 - 弹窗组件 `pop` #### 数据页 - `Overview.vue`：门户总览 - `AlarmManagement.vue`：告警管理 - `EnergyControl.vue`：能源监控/分析切页 - `AIOps.vue`：AI 运维 - `CenterManagement.vue`：分中心管理 - `DeviceDetail.vue`：外部详情跳转页 #### 页面组件 `src/view/components/` 下包含机房、消防、告警、PDU、温湿度、视频监控等页面级组件。 ## 当前数据特征 ### 真实接口驱动页面 以下页面/能力主要依赖真实接口或桥接后的实时数据： - 登录与 SSO - 总览页核心统计 - 信息机房管理 - 消防大屏 - 告警管理 - 门禁统计 ### fallback 驱动页面 以下页面当前仍以内置 fallback 数据为主： - AI 运维 - 分中心管理 对应文件： - `src/features/dashboard/services/modulePageService.js` - `src/features/dashboard/constants/modulePageData.js` ## UI 组织方式 ### 通用基础组件 - `src/components/ModulePageHeader.vue` - `src/components/ModuleTabbedPage.vue` - `src/components/BackAction.vue` - `src/components/VideoPlayer/index.vue` ### 大屏包装组件 - `src/view/components/item/index.vue` - `src/view/components/items/index.vue` - `src/components/pop/index.vue` ### 动画与表现 - `wow.js`：页面动画 - `gsap`：局部动效 - `three.js`：场景能力（主要用于机房/消防可视化相关区域） - `video.js`：视频播放器 ## 目录结构 ```text src/ api/ 请求封装、SSO、platform/doors 业务服务 assets/ 全局图片、Logo、视频资源 components/ 通用组件 config/ 构建基础配置 features/ dashboard 业务分层（composables/services/mappers/constants） fonts/ 字体与 iconfont mock/ vite-plugin-mock 入口（当前为空） router/ 路由与守卫 styles/ 模块页主题与设计 token utils/ 鉴权、回跳、文本格式化、适配工具 view/ 页面与页面级组件 public/ 公共静态文件 images/ 效果图与项目截图 tests/ Node.js 单元测试 qiniu.js 七牛上传脚本 qiniu-upload-prefiex.js 七牛上传配置 vite.config.js Vite 配置 ``` 补充说明： - `src/store/` 目录当前保留，但没有活跃的业务 store 文件 - 项目状态目前主要通过 composable + 页面局部状态管理 ## 测试 项目当前使用 **Node.js 内置测试运行器**，重点覆盖： - 登录回跳 URL 构造与安全过滤 - 告警文案格式化 - 告警分组映射 - PDU 开关状态展示与排序 - 安全运行天数计算 运行命令： ```bash node --test tests/*.mjs ``` 当前测试文件： - `tests/alarmContent.test.mjs` - `tests/alarmMapper.test.mjs` - `tests/pduSwitchStatus.test.mjs` - `tests/platformSso.test.mjs` - `tests/safeOperatingDays.test.mjs` > 当前没有组件测试、端到端测试或视觉回归测试。 ## Mock 与开发约束 - Vite 已启用 `vite-plugin-mock` - 但 `src/mock/index.ts` 当前为空 - 即：项目保留 mock 能力入口，但默认仍走真实接口 / 真实代理 ## 构建与部署 ### 本地构建 ```bash pnpm build ``` ### 七牛上传 构建完成后可执行： ```bash pnpm build-qiniu ``` 相关文件： - `qiniu-upload-prefiex.js`：配置空间、目录、域名、密钥 - `qiniu.js`：递归上传 `dist/` 产物 - `src/config/config.js`：根据七牛配置决定构建 `base` 如果未配置七牛密钥，上传逻辑不会执行有效上传。 ## 已知实现约束 - 项目基于浏览器存储与 Hash 路由，不面向 SSR - 业务状态管理主要依赖 composable，尚未形成统一 store 体系 - AI 运维、分中心管理目前仍是 fallback 数据页 - 项目脚本较精简，当前没有 lint/typecheck 自动化入口 - mock 能力存在但未实际维护 mock 数据 ## 文档说明 当前仓库只维护这一份项目说明文档：`README.md`。 如果后续新增专题文档，请同步在此登记，避免再次出现文档失效或结构说明过期的问题。