185 lines
7.6 KiB
Markdown
185 lines
7.6 KiB
Markdown
# 网络设备管理平台
|
||
|
||
从 `ndm-web-client` 项目重构而来，包含升级依赖库、目录结构调整、轮询机制优化、enum重构、持久化方案改进等大型变更，因此重新命名为 `ndm-web-platform`。
|
||
|
||
## 安装依赖
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
### `vite` 代理配置
|
||
|
||
在 `vite.config.ts` 中，已经配置了4号线和10号线的代理，并启用了10号线的 `/api` 和 `/minio` 请求代理。
|
||
|
||
需要注意 `ProxyItem` 类型中的 `rewrite` 字段，它用于配置请求路径的重写规则。
|
||
|
||
例如有这样一个 `ProxyItem` 配置：
|
||
|
||
```typescript
|
||
{ 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` 替换为实际的目标地址和路径前缀。
|
||
|
||
## 启动项目
|
||
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
## 构建项目
|
||
|
||
```bash
|
||
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` 的子路由。
|
||
|
||
```bash
|
||
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
|
||
|
||
整个数据轮询流程采用“单点驱动 + 变更监听 + 级联触发”的模式，如下图所示。
|
||
|
||
|
||
|
||
1. 轮询入口：车站query
|
||
- 触发条件：以120秒的周期自动轮询车站列表
|
||
- 数据流向：车站store
|
||
2. 核心调度：权限query
|
||
- 触发条件：车站query执行后触发
|
||
- 数据流向：权限store，并计算当前用户在各车站的权限
|
||
- 数据监听：监听车站和权限变化，触发设备query和告警query
|
||
3. 设备query & 告警query
|
||
- 触发条件：被动触发，由权限query主动调用
|
||
- 数据流向：设备store & 告警store
|
||
|
||
## 调试模式
|
||
|
||
在设置面板中有一系列与调试模式有关的设置项，主要用于开发和故障排查。
|
||
|
||
### 开启方式
|
||
|
||
调试模式默认隐藏，通过以下方式开启：
|
||
|
||
1. 使用快捷键 `Ctrl + Alt + D` 唤起验证弹窗
|
||
2. 输入授权码进行验证（授权码对应环境变量 `.env` 中的 `VITE_DEBUG_CODE`）
|
||
3. 验证通过后，在“系统设置”面板中会出现 **调试** 分组
|
||
|
||
### 设置项说明
|
||
|
||
#### 数据设置
|
||
|
||
- **显示设备原始数据**
|
||
- 控制是否在设备详情页显示“原始数据”标签页
|
||
- 开启后可查看设备接口返回的原始 JSON 数据，便于排查字段缺失或格式错误
|
||
|
||
#### 网络设置
|
||
|
||
- **轮询车站**
|
||
- 控制是否定时拉取车站状态，进而触发权限、设备及告警数据的更新
|
||
- 关闭后将暂停所有业务数据的自动轮询机制
|
||
- **主动请求**
|
||
- 控制组件挂载时是否自动发起数据请求
|
||
- 涵盖设备在线状态检测、用户登录验证等逻辑，关闭后组件在初始化时将不再自动拉取数据
|
||
- **订阅消息**
|
||
- 控制是否通过 WebSocket (STOMP) 接收实时告警或状态推送
|
||
- 关闭后将不再处理后端推送的实时消息
|
||
- **模拟用户**
|
||
- 开启后使用内置的超管用户绕过登录
|
||
- 开启时会自动进入调试模式，便于开发环境快速测试
|
||
|
||
#### 数据库设置
|
||
|
||
- **直接操作本地数据库**
|
||
- 控制某些业务逻辑（如交换机端口、安防箱回路）是否直接读写本地 IndexedDB
|
||
- 用于在无后端环境或特定测试场景下验证本地数据逻辑
|
||
|
||
## 离线开发
|
||
|
||
项目支持在无后端服务的情况下正常启动，具体操作取决于你的本地环境是否已有历史数据。
|
||
|
||
### 场景一：已有本地缓存
|
||
|
||
如果你的浏览器曾接入过现场环境，IndexedDB 中已保存了车站、设备等数据，只需在设置中关闭网络请求即可进入离线模式：
|
||
|
||
1. 开启调试模式（`Ctrl + Alt + D`）。
|
||
2. 在“网络设置”中，关闭 **轮询车站**、**主动请求** 和 **订阅消息**。
|
||
3. 此时平台将停止向后端发起请求，直接展示本地缓存的历史数据。
|
||
|
||
### 场景二：全新环境启动（新人推荐）
|
||
|
||
如果你是首次拉取项目且无法连接后端，需要按以下步骤操作：
|
||
|
||
1. **模拟登录**
|
||
在登录页按 `F12` 打开控制台，输入以下命令强制进入平台：
|
||
|
||
```javascript
|
||
window.$mockUser.value = true;
|
||
```
|
||
|
||
执行后平台将自动完成以下操作：
|
||
- 注入测试 Token 和管理员身份信息
|
||
- 关闭所有网络请求（轮询、主动请求、消息订阅）
|
||
- 开启调试模式
|
||
- 自动跳转至平台首页
|
||
|
||
2. **导入模拟数据**
|
||
进入平台后，页面默认为空。需导入预设数据以填充内容：
|
||
- 打开“系统设置”（已自动开启调试模式）。
|
||
- 在 **调试** -> **数据库设置** 中，勾选 **直接操作本地数据库**。
|
||
- 点击该选项下方的 **导入数据** 按钮。
|
||
- 依次导入项目根目录 `docs/data/` 下的三个文件：
|
||
- `ndm-station-store.json`（车站数据）
|
||
- `ndm-device-store.json`（设备数据）
|
||
- `ndm-alarm-store.json`（告警数据）
|
||
> **注意**：每次导入一个文件后，平台会自动刷新页面以应用数据。请等待刷新完成后，重新打开设置面板导入下一个文件。
|