skycurtain/ndm-web-platform

Fork 0

Files

yangsy db831e82ff docs: 更新 README.md

2026-02-02 15:04:46 +08:00

7.6 KiB

Raw Blame History

网络设备管理平台

从 ndm-web-client 项目重构而来，包含升级依赖库、目录结构调整、轮询机制优化、enum重构、持久化方案改进等大型变更，因此重新命名为 ndm-web-platform。

安装依赖

pnpm install

`vite` 代理配置

在 vite.config.ts 中，已经配置了4号线和10号线的代理，并启用了10号线的 /api 和 /minio 请求代理。

需要注意 ProxyItem 类型中的 rewrite 字段，它用于配置请求路径的重写规则。

例如有这样一个 ProxyItem 配置：

{ key: '/1001/api', target: 'http://10.18.129.10:18760', rewrite: ['/1001/api', '/api'] }

此时如果我们发送一个请求到路径为 /1001/api/ndm/ndmCamera/page 的接口，则会命中 vite 的代理配置，将请求代理到 http://10.18.129.10:18760 上。

而 vite 的默认行为会将 target 和 key 拼接起来，即完整的请求路径是 http://10.18.129.10:18760/1001/api/ndm/ndmCamera/page，但是我们配置了 rewrite 规则，那么 vite 会将请求路径中的 /1001/api 替换为 /api，即最终的请求路径是 http://10.18.129.10:18760/api/ndm/ndmCamera/page。

因此，在克隆该项目后，需要根据实际情况修改 vite.config.ts 中的代理配置，并将 target 和 key 替换为实际的目标地址和路径前缀。

启动项目

pnpm dev

构建项目

pnpm build

在执行 pnpm build 之前，你可以在 package.json 中修改 version 字段，将其设置为你期望的版本号，构建完成后，项目的根目录中除了 dist 目录外，还会生成三个压缩包，文件名的格式统一为 ndm-web-platform_v<version>_<datetime>，文件格式则分别为 zip、tar、tar.gz。

业务结构

所有业务相关的页面都在 src/pages 目录下，路由配置在 src/router/index.ts 文件，除登录页之外，其余页面都作为 src/layouts/app-layout.vue 的子路由。

src/
  router/
    index.ts                   # 路由配置文件
  layouts/
    app-layout.vue             # 布局
  pages/
    login/
      login-page.vue           # 登录页面
    station/
      station-page.vue         # 车站状态页面(首页)
    device/
      device-page.vue          # 设备诊断页面
    alarm/
      alarm-ignore-page.vue    # 告警忽略管理页面
      alarm-log-page.vue       # 设备告警记录页面
    log/
      call-log-page.vue        # 上级调用日志页面
      vimp-log-page.vue        # 视频平台日志页面
    permission/
      permission-page.vue      # 权限管理页面
    error/
      not-found-page.vue       # 404 页面

数据轮询

由于后端服务的架构限制，需要前端向所有车站服务依次发送请求来获取数据，需要获取的数据包含车站状态、设备数据以及告警数据，因此需要设计一套数据轮询方案，定期从所有车站服务获取数据。

在项目中，src/composables/query/ 目录下是所有数据轮询相关的代码，其中与业务相关的代码主要包括：

use-line-stations-query.ts: 查询所有车站
use-line-devices-query.ts: 查询所有设备
use-line-alarms-query.ts: 查询所有告警
use-user-permission-query.ts: 查询用户权限

在描述整个数据轮询流程之前，我们要明确项目中必须存在的几个关键概念：

车站相关：车站query + 车站store
设备相关：设备query + 设备store
告警相关：告警query + 告警store
权限相关：权限query + 权限store

整个数据轮询流程采用“单点驱动 + 变更监听 + 级联触发”的模式，如下图所示。

轮询入口：车站query
- 触发条件：以120秒的周期自动轮询车站列表
- 数据流向：车站store
核心调度：权限query
- 触发条件：车站query执行后触发
- 数据流向：权限store，并计算当前用户在各车站的权限
- 数据监听：监听车站和权限变化，触发设备query和告警query
设备query & 告警query
- 触发条件：被动触发，由权限query主动调用
- 数据流向：设备store & 告警store

调试模式

在设置面板中有一系列与调试模式有关的设置项，主要用于开发和故障排查。

开启方式

调试模式默认隐藏，通过以下方式开启：

使用快捷键 Ctrl + Alt + D 唤起验证弹窗
输入授权码进行验证（授权码对应环境变量 .env 中的 VITE_DEBUG_CODE）
验证通过后，在“系统设置”面板中会出现调试分组

设置项说明

数据设置

显示设备原始数据
- 控制是否在设备详情页显示“原始数据”标签页
- 开启后可查看设备接口返回的原始 JSON 数据，便于排查字段缺失或格式错误

网络设置

轮询车站
- 控制是否定时拉取车站状态，进而触发权限、设备及告警数据的更新
- 关闭后将暂停所有业务数据的自动轮询机制
主动请求
- 控制组件挂载时是否自动发起数据请求
- 涵盖设备在线状态检测、用户登录验证等逻辑，关闭后组件在初始化时将不再自动拉取数据
订阅消息
- 控制是否通过 WebSocket (STOMP) 接收实时告警或状态推送
- 关闭后将不再处理后端推送的实时消息
模拟用户
- 开启后使用内置的超管用户绕过登录
- 开启时会自动进入调试模式，便于开发环境快速测试

数据库设置

直接操作本地数据库
- 控制某些业务逻辑（如交换机端口、安防箱回路）是否直接读写本地 IndexedDB
- 用于在无后端环境或特定测试场景下验证本地数据逻辑

离线开发

项目支持在无后端服务的情况下正常启动，具体操作取决于你的本地环境是否已有历史数据。

场景一：已有本地缓存

如果你的浏览器曾接入过现场环境，IndexedDB 中已保存了车站、设备等数据，只需在设置中关闭网络请求即可进入离线模式：

开启调试模式（Ctrl + Alt + D）。
在“网络设置”中，关闭 轮询车站、主动请求 和 订阅消息。
此时平台将停止向后端发起请求，直接展示本地缓存的历史数据。

场景二：全新环境启动（新人推荐）

如果你是首次拉取项目且无法连接后端，需要按以下步骤操作：

模拟登录 在登录页按 F12 打开控制台，输入以下命令强制进入平台：
```
window.$mockUser.value = true;
```
执行后平台将自动完成以下操作：
- 注入测试 Token 和管理员身份信息
- 关闭所有网络请求（轮询、主动请求、消息订阅）
- 开启调试模式
- 自动跳转至平台首页
导入模拟数据 进入平台后，页面默认为空。需导入预设数据以填充内容：
- 打开“系统设置”（已自动开启调试模式）。
- 在调试 -> 数据库设置 中，勾选 直接操作本地数据库。
- 点击该选项下方的 导入数据 按钮。
- 依次导入项目根目录 docs/data/ 下的三个文件：
  - ndm-station-store.json（车站数据）
  - ndm-device-store.json（设备数据）
  - ndm-alarm-store.json（告警数据）
    
    注意：每次导入一个文件后，平台会自动刷新页面以应用数据。请等待刷新完成后，重新打开设置面板导入下一个文件。

7.6 KiB Raw Blame History Unescape Escape