admin/yunrui_asset
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(机柜管理): 优化机柜导入导出功能

Browse Source 
- 新增机柜导入预览功能，支持数据验证和错误提示
- 支持按选中机柜导出，优化导出文件名和提示信息
- 重构导入逻辑，分离Excel解析和验证逻辑
- 修复机柜关联设备查询问题，使用正确的关系别名
- 更新API文档，添加导入预览和选中导出接口说明
This commit is contained in:
zhang1106
2026-05-06 15:12:57 +08:00
parent 9c0fd0b3ff
commit fa39f2855f
11 changed files with 2095 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+235
View File
@@ -4,6 +4,241 @@
---
## [2.0.0] - 2026-05-06
### 新增功能
#### 备份管理模块
- 新增数据库备份与恢复功能，支持手动创建备份
- 新增自动备份调度，支持 Cron 表达式配置定时备份
- 新增远端备份，支持 FTP/SFTP/WebDAV/SMB 多协议上传
- 新增备份文件上传/下载/删除/验证管理
- 新增备份恢复进度实时推送（SSE）
- 新增备份日志管理，支持日志查询/详情/清理
- 新增 BackupLog 数据模型
#### 操作日志审计模块
- 新增操作日志查询，支持按模块/操作类型/时间范围筛选
- 新增操作日志统计，提供模块和操作类型维度分析
- 新增 OperationLog 数据模型
- 新增操作日志页面，支持日志详情查看
#### 空闲设备管理模块
- 新增空闲设备列表查询与管理
- 新增设备转入空闲状态功能
- 新增空闲设备激活（重新上架）功能
- 新增 IdleDeviceManagement 前端页面
#### 仓库管理模块
- 新增仓库增删改查功能
- 新增 Warehouse 数据模型
- 支持仓库与耗材关联管理
#### 网络拓扑可视化模块
- 新增网络拓扑图可视化展示（基于 ReactFlow）
- 新增交换机拓扑查询，展示设备间连接关系
- 新增设备拓扑查询，展示单设备网络连接
- 新增拓扑控制面板（缩放/布局/筛选）
- 新增拓扑侧边栏（设备详情/连接信息）
- 新增自定义拓扑节点组件（服务器/交换机/路由器/防火墙/存储/通用）
- 新增拓扑数据与布局自定义 Hooks
#### 机房平面图模块
- 新增机房平面图可视化展示（Canvas 渲染）
- 新增机柜位置拖拽编辑功能
- 新增热力图模式，按机柜使用率着色
- 新增小地图导航，快速定位机柜
- 新增平面图工具栏（缩放/搜索/视图切换/机房选择）
- 新增机柜详情面板，展示机柜容量与设备信息
- 新增布局编辑器与位置验证器
- 新增机房布局 API（获取/更新/初始化/批量更新机柜位置）
#### 危险操作日志模块
- 新增危险操作记录功能
- 新增危险操作日志查询与清理
- 新增危险操作确认弹窗组件
#### 维护模式
- 新增维护模式状态查询与解除功能
- 新增维护模式横幅组件
#### Swagger API 文档
- 集成 swagger-jsdoc + swagger-ui-express
- 新增交互式 API 文档，访问路径 `/api-docs`
- 支持在线调试 API 接口
#### 设备管理增强
- 新增设备导入预览功能，导入前可预览数据
- 新增设备 ID 自动生成规则配置
- 新增设备搜索支持自定义字段
- 新增设备导入模板字段与字段配置同步
- 新增设备导入必填验证与机房机柜区分
- 新增设备批量导入性能优化
- 新增设备转入空闲状态 API（`PUT /api/devices/:deviceId/to-idle`）
- 新增设备 U 位可用性检查 API
#### 耗材管理增强
- 新增耗材批量导入功能（支持 Excel/CSV）
- 新增耗材导入模板下载
- 新增耗材导入任务状态查询
- 新增耗材 SN 序列号追踪功能
- 新增耗材操作日志归档功能
- 新增耗材日志修改与修改历史查询
- 新增耗材日志导出与导入
- 新增耗材出入库记录导出
- 新增耗材库存调整功能（增加/减少/设置）
- 新增耗材乐观锁并发安全控制
- 新增耗材与操作日志解耦
- 新增 ConsumableLogArchive 数据模型
- 新增耗材扫码添加功能
#### 工单管理增强
- 新增工单导出功能
- 新增工单统计页面
- 新增工单评价功能
- 新增工单操作记录（操作步骤/配件/耗时/结果）
- 新增工单分类统计 API
#### 端口与网卡管理增强
- 新增网卡批量导入功能
- 新增端口批量导出功能
- 新增端口添加引导弹窗
- 新增端口命名模板功能
- 新增端口批量导入重新设计
- 新增服务器背板面板组件
- 新增服务器网卡组件
#### 线缆管理增强
- 新增线缆向导弹窗（CableWizardModal）
- 新增设备选择弹窗性能优化
- 新新增设备选择弹窗筛选优化
#### 系统配置增强
- 新增系统设置导出/导入功能
- 新增系统 Logo 上传功能
- 新增系统信息公开查询 API
- 新增背景图片上传功能
- 新增字段管理选项可视化编辑功能
#### 业务关联
- 新增 Business 数据模型
- 新增 DeviceBusiness 数据模型
- 支持设备与业务关联管理
#### 待确认设备管理
- 新增 PendingDevice 数据模型
- 新增待确认设备管理页面
- 支持盘点暂存设备管理
### 优化
#### 3D 可视化性能优化
- 优化 Canvas DPR 配置，提升渲染清晰度
- 优化背板渲染控制，减少不必要的渲染
- 重构状态管理，分离 3D 场景状态
- 优化回调函数引用稳定性
- 优化几何体和材质复用
- 优化 LODManager 距离计算性能
- 优化 DeviceModel useFrame 状态更新
- 优化悬停状态避免频繁更新
- 优化 3D 机柜相机控制，支持完整查看
- 固定旋转中心为机柜中轴线
- 为机柜添加 U 位标识
- 优化 3D 设备视觉区分
- 新增 3D 机柜头部重新设计
- 新增纹理缓存机制（TextureCache）
#### 前端性能优化
- 优化前端组件渲染性能
- 新增虚拟列表支持（react-window）
- 新增 html2canvas 截图支持
- 优化设备详情抽屉展示
#### 安全优化
- 修复注册权限漏洞
- 修复 JWT Secret 安全问题
- 新增全局认证中间件
- 新增路由自动注册机制
- 新增路由排序 Bug 修复
#### 数据库优化
- 新增外键约束修复脚本
- 新增线缆字段迁移脚本
- 新增日志迁移脚本
- 优化迁移脚本幂等执行
### 修复
- 修复设备字段初始化覆盖自定义配置问题
- 修复设备导入必填验证问题
- 修复设备导入机房机柜区分问题
- 修复设备详情功率字段显示问题
- 修复 3D 设备详情自定义字段 displayName 显示问题
- 修复机柜已用 U 统计不准确问题
- 修复空闲设备状态不同步问题
- 修复空闲设备状态不更新问题
- 修复耗材乐观锁并发安全问题
- 修复数据恢复外键约束错误
- 修复 ID 生成器错误处理
- 修复路由排序 Bug
### 数据库模型
| 模型 | 说明 | 状态 |
|------|------|------|
| BackupLog | 备份日志 | 新增 |
| Business | 业务 | 新增 |
| ConsumableLogArchive | 耗材日志归档 | 新增 |
| DeviceBusiness | 设备业务关联 | 新增 |
| OperationLog | 操作日志 | 新增 |
| PendingDevice | 待确认设备 | 新增 |
| Warehouse | 仓库 | 新增 |
### API 接口概览
| 模块 | 接口数 | 主要功能 |
|------|--------|----------|
| 备份管理 | 28 | 备份创建/恢复/上传/下载/自动备份/远端备份/日志 |
| 统计分析 | 1 | 仪表盘统计数据 |
| 操作日志 | 5 | 日志查询/模块/类型/统计/详情 |
| 空闲设备 | 4 | 空闲设备管理 |
| 仓库管理 | 5 | 仓库增删改查 |
| 危险操作 | 3 | 危险操作日志 |
| 拓扑管理 | 2 | 网络拓扑查询 |
| 维护模式 | 2 | 维护模式管理 |
| 背景设置 | 3 | 背景配置/上传 |
### 技术栈更新
| 依赖 | 旧版本 | 新版本 | 说明 |
|------|--------|--------|------|
| Three.js | 0.160.0 | 0.183.2 | 3D 渲染引擎升级 |
| basic-ftp | - | 5.0.3 | 新增 FTP 协议支持 |
| ssh2-sftp-client | - | 9.1.0 | 新增 SFTP 协议支持 |
| webdav | - | 5.3.1 | 新增 WebDAV 协议支持 |
| smb2 | - | 0.2.2 | 新增 SMB 协议支持 |
| node-cron | - | 4.2.1 | 新增定时任务调度 |
| swagger-jsdoc | - | 新增 | API 文档生成 |
| swagger-ui-express | - | 新增 | API 文档展示 |
| framer-motion | - | 12.34.0 | 新增动画库 |
| reactflow | - | 新增 | 新增拓扑图组件 |
| dagre | - | 新增 | 新增图布局算法 |
| styled-components | - | 6.3.9 | 新增 CSS-in-JS |
| swr | - | 2.4.0 | 新增数据请求缓存 |
| html2canvas | - | 新增 | 新增截图功能 |
| react-window | - | 新增 | 新增虚拟列表 |
### 升级注意事项
- 本版本为重大更新，新增多个功能模块，建议在升级前完整备份数据库
- 新增了备份管理、操作日志、空闲设备、仓库、拓扑等数据表，首次启动时会自动创建
- 如使用 MySQL 数据库，务必运行 `node scripts/migrate-all.js` 进行数据迁移
- 3D 渲染引擎已升级到 Three.js 0.183.2，请确认浏览器兼容性
- 新增了 Swagger API 文档，可通过 `/api-docs` 访问
- JWT Secret 安全性已增强，建议更新生产环境的 JWT_SECRET 配置
---
## [1.2.0] - 2026-02-05
### 新增功能
DEPLOYMENT.md
+39
View File
@@ -658,6 +658,23 @@ server {
location /health {
proxy_pass http://idc_backend/health;
}
# Swagger API文档（v2.0.0新增）
location /api-docs {
proxy_pass http://idc_backend/api-docs;
proxy_http_version 1.1;
proxy_set_header Host $host;
}
# SSE 备份恢复进度推送（v2.0.0新增）
location ~ ^/api/backup/restore-progress/ {
proxy_pass http://idc_backend;
proxy_http_version 1.1;
proxy_set_header Connection '';
proxy_buffering off;
proxy_cache off;
chunked_transfer_encoding off;
}
}
```
@@ -716,6 +733,14 @@ innodb_buffer_pool_size=1G
### 数据备份
#### 系统内置备份（推荐）
v2.0.0 新增了内置备份管理功能，支持手动备份、自动定时备份和远端备份。
1. **手动备份**：在系统管理 → 备份管理中点击「创建备份」
2. **自动备份**：在系统管理 → 自动备份中配置 Cron 表达式定时备份
3. **远端备份**：在系统管理 → 远端备份中配置 FTP/SFTP/WebDAV/SMB 协议上传
#### SQLite备份
```bash
@@ -774,6 +799,9 @@ curl http://localhost:8000/health
# API测试
curl http://localhost:8000/api/rooms
# Swagger API文档（v2.0.0新增）
# 浏览器访问 http://localhost:8000/api-docs
# 上传接口测试
curl -X POST http://localhost:8000/api/auth/login \
-H "Content-Type: application/json" \
@@ -838,6 +866,17 @@ node update.js --force
### 方式二：手动更新
#### v2.0.0 升级注意事项
从 1.x 版本升级到 2.0.0 时，请注意以下事项：
1. **数据库迁移**：新增了 BackupLog、OperationLog、Warehouse、Business、DeviceBusiness、ConsumableLogArchive 等数据表，务必运行迁移脚本
2. **JWT 安全增强**：建议更新生产环境的 JWT_SECRET 配置为强随机密钥
3. **新增依赖**：后端新增了 basic-ftp、ssh2-sftp-client、webdav、smb2、node-cron、swagger-jsdoc、swagger-ui-express 等依赖
4. **3D 引擎升级**：Three.js 从 0.160.0 升级到 0.183.2，请确认浏览器兼容性
5. **Swagger 文档**：新增交互式 API 文档，可通过 `/api-docs` 访问
6. **备份目录**：确保 `backend/backups/` 目录存在且有写入权限
#### 1. 备份数据
```bash
README.md
+51 -13
View File
@@ -20,20 +20,26 @@
| 功能模块 | 描述 |
|---------|------|
| **机房管理** | 多机房管理，支持位置、面积、负责人等详细信息 |
| **机柜管理** | 机柜增删改查，容量统计，3D可视化展示 |
| **设备管理** | 服务器、网络设备、存储设备全生命周期管理，支持批量导入/导出 |
| **端口管理** | 设备端口配置与管理，支持网卡绑定 |
| **线缆管理** | 机柜间线缆连接管理，可视化追踪 |
| **工单管理** | 故障报修、维护工单全流程管理，支持自定义字段、故障分类 |
| **耗材管理** | 耗材库存、领用记录、统计报表管理，支持SN序列号追踪 |
| **盘点管理** | 盘点计划制定与执行，盘点任务分配与结果记录 |
| **数据看板** | 实时监控数据中心整体运行状态，设备趋势图表 |
| **3D可视化** | 三维机柜可视化展示，支持设备悬停详情、LOD优化、性能模式 |
| **系统配置** | 设备字段、工单字段自定义管理，背景配置，系统设置 |
| **用户权限** | 基于角色的权限控制（RBAC），用户审核机制 |
| **机房管理** | 多机房管理，支持位置、面积、负责人等详细信息，机房平面图可视化 |
| **机柜管理** | 机柜增删改查，容量统计，3D可视化展示，批量导入/导出 |
| **设备管理** | 服务器、网络设备、存储设备全生命周期管理，支持批量导入/导出，导入预览，自定义字段搜索 |
| **端口管理** | 设备端口配置与管理，支持网卡绑定，批量导入/导出，端口命名模板 |
| **线缆管理** | 机柜间线缆连接管理，可视化追踪，线缆向导 |
| **网络拓扑** | 网络拓扑可视化展示（ReactFlow），交换机/设备拓扑查询，自定义节点 |
| **工单管理** | 故障报修、维护工单全流程管理，支持自定义字段、故障分类、工单评价、导出 |
| **耗材管理** | 耗材库存、领用记录、统计报表管理，支持SN序列号追踪、批量导入、日志归档 |
| **盘点管理** | 盘点计划制定与执行，盘点任务分配与结果记录，暂存设备管理 |
| **空闲设备** | 空闲设备管理，支持设备转入/激活空闲状态 |
| **仓库管理** | 仓库信息管理，支持仓库与耗材关联 |
| **数据看板** | 实时监控数据中心整体运行状态，设备趋势图表，功率监控 |
| **3D可视化** | 三维机柜可视化展示，支持设备悬停详情、LOD优化、性能模式、U位标识 |
| **机房平面图** | Canvas渲染机房平面图，机柜位置拖拽编辑，热力图，小地图导航 |
| **操作日志** | 操作日志审计，支持按模块/类型/时间筛选，操作统计 |
| **备份管理** | 数据库备份与恢复，自动定时备份，多协议远程备份（FTP/SFTP/WebDAV/SMB） |
| **统计分析** | 设备、工单、耗材等多维度统计报表，用户增长趋势分析 |
| **系统配置** | 设备字段、工单字段自定义管理，背景配置，系统设置导入/导出 |
| **用户权限** | 基于角色的权限控制（RBAC），用户审核机制 |
| **API文档** | Swagger交互式API文档，支持在线调试 |
### 项目截图
@@ -412,13 +418,16 @@ jigui/
│ │ ├── components/ # 通用组件
│ │ │ ├── 3d/ # 3D可视化组件
│ │ │ │ ├── materials/ # 3D材质组件
│ │ │ │ │ ├── TextureCache.js # 纹理缓存
│ │ │ │ │ ├── constants.jsx
│ │ │ │ │ ├── devicePanel.jsx
│ │ │ │ │ ├── index.jsx
│ │ │ │ │ ├── rackFrame.jsx
│ │ │ │ │ └── utils.jsx
│ │ │ │ ├── CascadingRackPanel.jsx # 级联机柜面板
│ │ │ │ ├── DeviceModel.jsx # 设备模型
│ │ │ │ ├── RackModel.jsx # 机柜模型
│ │ │ │ ├── RackSelectorHeader.jsx # 机柜选择头部
│ │ │ │ ├── Scene.jsx # 3D场景
│ │ │ │ └── LODManager.jsx # LOD管理器
│ │ │ ├── dashboard/ # 数据看板组件
@@ -440,16 +449,26 @@ jigui/
│ │ │ │ ├── ImportModal.jsx
│ │ │ │ └── ResizableTitle.jsx
│ │ │ ├── CableCreateModal.jsx
│ │ │ ├── CableWizardModal.jsx
│ │ │ ├── CloseButton.jsx
│ │ │ ├── ConsumableTimelineModal.jsx
│ │ │ ├── DangerConfirmModal.jsx
│ │ │ ├── DeviceDetailDrawer.jsx
│ │ │ ├── ErrorBoundary.jsx
│ │ │ ├── FilterableDeviceSelect.jsx
│ │ │ ├── MaintenanceBanner.jsx
│ │ │ ├── NetworkCardCreateModal.jsx
│ │ │ ├── NetworkCardImportModal.jsx
│ │ │ ├── NetworkCardPanel.jsx
│ │ │ ├── PortAddGuideModal.jsx
│ │ │ ├── PortCreateModal.jsx
│ │ │ ├── PortExportModal.jsx
│ │ │ ├── PortManagementPanel.jsx
│ │ │ ├── PortPanel.jsx
│ │ │ ├── ProtectedRoute.jsx
│ │ │ ├── ServerBackplanePanel.jsx
│ │ │ ├── ServerNicCard.jsx
│ │ │ ├── TicketExportModal.jsx
│ │ │ └── VirtualDeviceList.jsx
│ │ ├── config/ # 配置文件
│ │ │ ├── api.js # API配置
@@ -470,9 +489,11 @@ jigui/
│ │ │ ├── Dashboard.jsx # 数据看板
│ │ │ ├── Login.jsx # 登录页面
│ │ │ ├── RoomManagement.jsx # 机房管理
│ │ │ ├── RoomFloorPlan.jsx # 机房平面图
│ │ │ ├── RackManagement.jsx # 机柜管理
│ │ │ ├── DeviceManagement.jsx # 设备管理
│ │ │ ├── DeviceFieldManagement.jsx # 设备字段管理
│ │ │ ├── IdleDeviceManagement.jsx # 空闲设备管理
│ │ │ ├── PendingDeviceManagement.jsx # 待审核设备管理
│ │ │ ├── PortManagement.jsx # 端口管理
│ │ │ ├── CableManagement.jsx # 线缆管理
@@ -486,6 +507,7 @@ jigui/
│ │ │ ├── ConsumableStatistics.jsx # 耗材统计
│ │ │ ├── InventoryManagement.jsx # 盘点管理
│ │ │ ├── InventoryTaskExecution.jsx # 盘点任务执行
│ │ │ ├── OperationLogs.jsx # 操作日志
│ │ │ ├── UserManagement.jsx # 用户管理
│ │ │ ├── RolesManagement.jsx # 角色管理
│ │ │ ├── SystemSettings.jsx # 系统设置
@@ -515,6 +537,7 @@ jigui/
│ ├── config/ # 配置文件
│ │ ├── index.js # 配置统一导出
│ │ ├── constants.js # 常量配置
│ │ ├── routes.js # 路由注册配置
│ │ ├── security.js # 安全配置
│ │ ├── auto-backup-settings.json # 自动备份设置
│ │ └── remote-backup-configs.json # 远程备份配置
@@ -548,6 +571,11 @@ jigui/
│ │ ├── UserRole.js # 用户角色关联模型
│ │ ├── SystemSetting.js # 系统设置模型
│ │ ├── PendingDevice.js # 待审核设备模型
│ │ ├── OperationLog.js # 操作日志模型
│ │ ├── BackupLog.js # 备份日志模型
│ │ ├── Warehouse.js # 仓库模型
│ │ ├── Business.js # 业务模型
│ │ ├── DeviceBusiness.js # 设备业务关联模型
│ │ └── ticketIndex.js # 工单模型初始化
│ ├── routes/ # API路由
│ │ ├── auth.js # 认证路由
@@ -564,6 +592,7 @@ jigui/
│ │ ├── consumables.js # 耗材路由
│ │ ├── consumableCategories.js # 耗材分类路由
│ │ ├── consumableRecords.js # 耗材记录路由
│ │ ├── consumableImport.js # 耗材导入路由
│ │ ├── inventory.js # 盘点路由
│ │ ├── users.js # 用户路由
│ │ ├── roles.js # 角色路由
@@ -571,10 +600,18 @@ jigui/
│ │ ├── background.js # 背景配置路由
│ │ ├── backup.js # 备份管理路由
│ │ ├── statistics.js # 统计分析路由
│ │ ├── operationLogs.js # 操作日志路由
│ │ ├── idleDevices.js # 空闲设备路由
│ │ ├── warehouses.js # 仓库管理路由
│ │ ├── dangerousOperations.js # 危险操作路由
│ │ ├── topology.js # 拓扑管理路由
│ │ └── ticketCategories.js # 工单分类路由
│ ├── scripts/ # 数据库脚本
│ │ ├── init-database.js # 数据库初始化
│ │ ├── migrate-all.js # 执行所有迁移脚本
│ │ ├── fix-foreign-keys.js # 外键约束修复
│ │ ├── migrate-logs.js # 日志迁移
│ │ ├── migrate-cable-fields.js # 线缆字段迁移
│ │ ├── archive/ # 归档迁移脚本
│ │ │ ├── migrate-v2.js
│ │ │ ├── migrate-consumable-logs.js
@@ -590,7 +627,8 @@ jigui/
│ │ ├── add-isSystem-mysql.js
│ │ ├── add-isSystem-sqlite.js
│ │ ├── update-system-fields.js
│ │ └── update-system-fields-v2.js
│ │ ├── update-system-fields-v2.js
│ │ └── generate-rack-import-template.js
│ ├── utils/ # 工具函数
│ │ ├── autoBackupScheduler.js # 自动备份调度器
│ │ ├── backup.js # 备份工具
backend/routes/racks.js
+288 -164
View File
@@ -190,11 +190,22 @@ router.get('/import-template', async (req, res) => {
// 导出租机柜数据 - 必须放在 /:rackId 路由之前，避免被当作 rackId 参数
router.get('/export', async (req, res) => {
try {
// 获取所有机柜数据（包含机房信息）
const { rackIds } = req.query;
const hasSelection = rackIds && rackIds.length > 0;
// 构建查询条件
const where = {};
if (hasSelection) {
const idList = rackIds.split(',').map(id => id.trim()).filter(Boolean);
where.rackId = { [require('sequelize').Op.in]: idList };
}
// 获取机柜数据（包含机房信息）
const racks = await Rack.findAll({
where,
include: [
{ model: Room, attributes: ['name'] },
{ model: Device, attributes: ['deviceId', 'name', 'powerConsumption'] },
{ model: Device, as: 'Devices', attributes: ['deviceId', 'name', 'powerConsumption'] },
],
order: [['rackId', 'ASC']],
});
@@ -242,7 +253,9 @@ router.get('/export', async (req, res) => {
// 生成文件名
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
const fileName = `机柜导出_${timestamp}.xlsx`;
const fileName = hasSelection
? `机柜导出_选中${racks.length}条_${timestamp}.xlsx`
: `机柜导出_全部_${timestamp}.xlsx`;
// 确保temp目录存在
const tempDir = path.join(__dirname, '../temp');
@@ -297,7 +310,7 @@ router.get('/:rackId', async (req, res) => {
const rack = await Rack.findByPk(req.params.rackId, {
include: [
{ model: Room, separate: false },
{ model: Device, separate: false },
{ model: Device, as: 'Devices', separate: false },
],
subQuery: false, // 避免子查询导致的性能问题
});
@@ -364,7 +377,7 @@ router.put('/:rackId', validateBody(updateRackSchema), async (req, res) => {
const updatedRack = await Rack.findByPk(req.params.rackId, {
include: [
{ model: Room, separate: false },
{ model: Device, separate: false },
{ model: Device, as: 'Devices', separate: false },
],
subQuery: false, // 避免子查询导致的性能问题
});
@@ -399,6 +412,248 @@ router.delete('/:rackId', async (req, res) => {
}
});
/**
* 解析 Excel 文件并转换为 JSON 数据
* @param {string} tempFilePath - 临时文件路径
* @returns {Object} { jsonData, columnIndexMap, error }
*/
function parseExcelFile(tempFilePath) {
let workbook;
try {
workbook = XLSX.readFile(tempFilePath);
} catch (readError) {
return { error: `无法解析Excel文件: ${readError.message}` };
}
if (!workbook.SheetNames.length) {
return { error: 'Excel文件中没有找到工作表' };
}
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
// 读取第一行作为列头
const headerRow =
XLSX.utils.sheet_to_json(worksheet, { header: 1, range: 0, limit: 1 })[0] || [];
// 定义列名映射（支持导入模板格式和导出文件格式）
const columnMapping = {
rackId: ['机柜ID(留空自动生成)', '机柜ID'],
name: ['机柜名称'],
roomName: ['所属机房名称', '所属机房'],
height: ['高度(U)', '机柜高度(U)'],
maxPower: ['最大功率(W)', '最大功耗(W)'],
status: ['状态'],
};
// 根据列头自动检测列索引映射
const columnIndexMap = {};
Object.keys(columnMapping).forEach(field => {
const possibleNames = columnMapping[field];
const index = headerRow.findIndex(h => possibleNames.includes(String(h).trim()));
if (index !== -1) {
columnIndexMap[field] = index;
}
});
// 检查必需的列是否存在
const requiredColumns = ['name', 'roomName', 'height', 'maxPower', 'status'];
const missingColumns = requiredColumns.filter(col => columnIndexMap[col] === undefined);
if (missingColumns.length > 0) {
return { error: `缺少必需的列: ${missingColumns.join(', ')}，请使用系统导出的文件或下载导入模板` };
}
// 转换为JSON格式
const rawData = XLSX.utils.sheet_to_json(worksheet, {
header: headerRow.map((h, i) => `col_${i}`),
range: 1,
blankrows: false,
});
const jsonData = rawData.map(row => {
const item = {};
Object.keys(columnIndexMap).forEach(field => {
const colIndex = columnIndexMap[field];
item[field] = row[`col_${colIndex}`];
});
return item;
});
if (jsonData.length === 0) {
return { error: 'Excel文件中没有找到可导入的数据行' };
}
return { jsonData, columnIndexMap };
}
/**
* 验证机柜数据
* @param {Array} jsonData - Excel 解析后的原始数据
* @param {Map} roomNameToIdMap - 机房名称到 ID 的映射
* @param {Set} validRoomNames - 有效机房名称集合
* @returns {Object} { processedData, validationResults }
*/
function validateRackData(jsonData, roomNameToIdMap, validRoomNames) {
const statusMapping = {
启用: 'active',
在用: 'active',
停用: 'inactive',
禁用: 'inactive',
维护中: 'maintenance',
active: 'active',
inactive: 'inactive',
maintenance: 'maintenance',
};
const validStatuses = ['active', 'maintenance', 'inactive'];
const validationResults = [];
// 处理数据
const processedData = jsonData.map((item, index) => {
const rowNumber = index + 2;
const rawStatus = String(item.status || '').trim();
const normalizedStatus = statusMapping[rawStatus] || rawStatus.toLowerCase();
const rawRackId = item.rackId ? String(item.rackId).trim() : '';
const height = Number(item.height);
const maxPower = Number(item.maxPower);
return {
...item,
rackId: rawRackId,
height,
maxPower,
status: normalizedStatus,
rowNumber,
};
});
// 验证数据
processedData.forEach(item => {
const errors = [];
if (!item.rackId || item.rackId === '') {
errors.push('机柜ID不能为空（如需自动生成请使用导入功能）');
} else if (!/^[a-zA-Z0-9_-]+$/.test(item.rackId)) {
errors.push('机柜ID只能包含字母、数字、下划线和横线');
}
if (!item.name || String(item.name).trim() === '') {
errors.push('机柜名称不能为空');
}
if (!item.roomName || String(item.roomName).trim() === '') {
errors.push('所属机房名称不能为空');
} else if (!validRoomNames.has(String(item.roomName).trim())) {
const availableRooms = Array.from(validRoomNames).join('、');
errors.push(`所属机房"${item.roomName}"不存在，可用机房: ${availableRooms}`);
}
if (isNaN(item.height) || item.height <= 0) {
errors.push('高度必须是大于0的有效数字');
}
if (isNaN(item.maxPower) || item.maxPower < 0) {
errors.push('最大功率必须是大于等于0的有效数字');
}
if (!item.status || !validStatuses.includes(item.status)) {
errors.push(`状态必须是以下值之一: ${validStatuses.join(', ')}`);
}
if (errors.length > 0) {
validationResults.push({ row: item.rowNumber, data: item, errors });
}
});
return { processedData, validationResults };
}
// 导入机柜数据预览（不写入数据库）
router.post('/import-preview', async (req, res) => {
try {
// 检查是否有上传文件
if (!req.files || !req.files.file) {
return res.status(400).json({
success: false,
error: '没有找到有效的上传文件，请选择一个Excel文件后重试',
});
}
const file = req.files.file;
// 确保temp目录存在
const tempDir = path.join(__dirname, '../temp');
if (!fs.existsSync(tempDir)) {
fs.mkdirSync(tempDir, { recursive: true });
}
// 保存临时文件
const tempFilePath = path.join(tempDir, `${Date.now()}_${file.name}`);
try {
await file.mv(tempFilePath);
} catch (saveError) {
return res.status(500).json({
success: false,
error: `无法保存上传的文件: ${saveError.message}`,
});
}
try {
// 解析Excel文件
const { jsonData, error } = parseExcelFile(tempFilePath);
if (error) {
return res.status(400).json({
success: false,
error: error,
});
}
// 查询机房信息
const allRooms = await Room.findAll();
const roomNameToIdMap = new Map(allRooms.map(room => [room.name, room.roomId]));
const validRoomNames = new Set(roomNameToIdMap.keys());
// 验证数据
const { processedData, validationResults } = validateRackData(jsonData, roomNameToIdMap, validRoomNames);
// 构建预览数据
const preview = processedData.map(item => ({
_rowNum: item.rowNumber,
rackId: item.rackId,
name: item.name,
roomName: item.roomName,
height: item.height,
maxPower: item.maxPower,
status: item.status,
_hasError: validationResults.some(v => v.row === item.rowNumber),
}));
// 构建错误信息
const errors = validationResults.map(v => ({
row: v.row,
errors: v.errors,
}));
res.status(200).json({
success: true,
data: {
total: jsonData.length,
valid: jsonData.length - validationResults.length,
invalid: validationResults.length,
preview: preview.slice(0, 50), // 最多预览50条
errors,
},
});
} finally {
// 删除临时文件
if (fs.existsSync(tempFilePath)) {
fs.unlinkSync(tempFilePath);
}
}
} catch (error) {
logger.error('机柜导入预览失败:', error);
res.status(500).json({
success: false,
error: `预览过程中发生未知错误: ${error.message}`,
});
}
});
// 导入机柜数据 - 优化版：使用事务+批量插入
router.post('/import', async (req, res) => {
const t = await sequelize.transaction();
@@ -436,113 +691,36 @@ router.post('/import', async (req, res) => {
}
try {
// 读取Excel文件
let workbook;
try {
workbook = XLSX.readFile(tempFilePath);
} catch (readError) {
// 解析Excel文件
const { jsonData, error } = parseExcelFile(tempFilePath);
if (error) {
await t.rollback();
return res.status(400).json({
success: false,
message: '文件解析失败',
error: `无法解析Excel文件: ${readError.message}`,
error: error,
});
}
// 获取第一个工作表
if (!workbook.SheetNames.length) {
await t.rollback();
return res.status(400).json({
success: false,
message: '文件格式错误',
error: 'Excel文件中没有找到工作表',
});
}
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
// 读取第一行作为列头
const headerRow =
XLSX.utils.sheet_to_json(worksheet, { header: 1, range: 0, limit: 1 })[0] || [];
// 定义列名映射（支持导入模板格式和导出文件格式）
const columnMapping = {
rackId: ['机柜ID(留空自动生成)', '机柜ID'],
name: ['机柜名称'],
roomName: ['所属机房名称', '所属机房'],
height: ['高度(U)', '机柜高度(U)'],
maxPower: ['最大功率(W)', '最大功耗(W)'],
status: ['状态'],
};
// 根据列头自动检测列索引映射
const columnIndexMap = {};
Object.keys(columnMapping).forEach(field => {
const possibleNames = columnMapping[field];
const index = headerRow.findIndex(h => possibleNames.includes(String(h).trim()));
if (index !== -1) {
columnIndexMap[field] = index;
}
});
// 检查必需的列是否存在
const requiredColumns = ['name', 'roomName', 'height', 'maxPower', 'status'];
const missingColumns = requiredColumns.filter(col => columnIndexMap[col] === undefined);
if (missingColumns.length > 0) {
await t.rollback();
return res.status(400).json({
success: false,
message: 'Excel列名格式不正确',
error: `缺少必需的列: ${missingColumns.join(', ')}，请使用系统导出的文件或下载导入模板`,
});
}
// 转换为JSON格式
const rawData = XLSX.utils.sheet_to_json(worksheet, {
header: headerRow.map((h, i) => `col_${i}`),
range: 1,
blankrows: false,
});
const jsonData = rawData.map(row => {
const item = {};
Object.keys(columnIndexMap).forEach(field => {
const colIndex = columnIndexMap[field];
item[field] = row[`col_${colIndex}`];
});
return item;
});
if (jsonData.length === 0) {
await t.rollback();
return res.status(400).json({
success: false,
message: '没有找到有效数据',
error: 'Excel文件中没有找到可导入的数据行',
});
}
// 状态值转换映射
const statusMapping = {
启用: 'active',
在用: 'active',
停用: 'inactive',
禁用: 'inactive',
维护中: 'maintenance',
active: 'active',
inactive: 'inactive',
maintenance: 'maintenance',
};
const validStatuses = ['active', 'maintenance', 'inactive'];
const validationResults = [];
// 【优化1】批量查询机房信息（单次查询）
// 查询机房信息
const allRooms = await Room.findAll({ transaction: t });
const roomNameToIdMap = new Map(allRooms.map(room => [room.name, room.roomId]));
const validRoomNames = new Set(roomNameToIdMap.keys());
// 【优化2】批量查询现有最大机柜ID（单次查询）
// 验证数据
const { processedData, validationResults } = validateRackData(jsonData, roomNameToIdMap, validRoomNames);
if (validationResults.length > 0) {
await t.rollback();
return res.status(400).json({
success: false,
message: '数据验证失败',
error: `${validationResults.length} 行数据格式错误`,
details: validationResults,
});
}
// 【优化1】批量查询现有最大机柜ID（单次查询）
const maxRackResult = await Rack.findOne({
attributes: [
[
@@ -562,85 +740,31 @@ router.post('/import', async (req, res) => {
});
let maxNumber = maxRackResult?.get('maxNum') || 0;
// 处理数据
const processedData = jsonData.map((item, index) => {
const rowNumber = index + 2;
const rawStatus = String(item.status || '').trim();
const normalizedStatus = statusMapping[rawStatus] || rawStatus.toLowerCase();
const rawRackId = item.rackId ? String(item.rackId).trim() : '';
if (!rawRackId || rawRackId === '') {
// 处理空 rackId（自动生成）
const finalData = processedData.map(item => {
if (!item.rackId || item.rackId === '') {
maxNumber++;
return {
...item,
rackId: `RACK${String(maxNumber).padStart(3, '0')}`,
status: normalizedStatus,
rowNumber,
};
}
return {
...item,
rackId: rawRackId,
status: normalizedStatus,
rowNumber,
};
return item;
});
// 验证数据
processedData.forEach(item => {
const errors = [];
if (!/^[a-zA-Z0-9_-]+$/.test(item.rackId)) {
errors.push('机柜ID只能包含字母、数字、下划线和横线');
}
if (!item.name || String(item.name).trim() === '') {
errors.push('机柜名称不能为空');
}
if (!item.roomName || String(item.roomName).trim() === '') {
errors.push('所属机房名称不能为空');
} else if (!validRoomNames.has(String(item.roomName).trim())) {
const availableRooms = Array.from(validRoomNames).join('、');
errors.push(`所属机房"${item.roomName}"不存在，可用机房: ${availableRooms}`);
}
if (typeof item.height !== 'number' || item.height <= 0) {
errors.push('高度必须是大于0的数字');
}
if (typeof item.maxPower !== 'number' || item.maxPower < 0) {
errors.push('最大功率必须是大于等于0的数字');
}
if (!item.status || !validStatuses.includes(item.status)) {
errors.push(`状态必须是以下值之一: ${validStatuses.join(', ')}`);
}
if (errors.length > 0) {
validationResults.push({ row: item.rowNumber, data: item, errors });
}
});
if (validationResults.length > 0) {
await t.rollback();
return res.status(400).json({
success: false,
message: '数据验证失败',
error: `${validationResults.length} 行数据格式错误`,
details: validationResults,
});
}
// 【优化3】批量查询已存在的机柜ID（单次查询）
// 【优化2】批量查询已存在的机柜ID（单次查询）
const existingRacks = await Rack.findAll({
where: {
rackId: processedData.map(item => item.rackId),
rackId: finalData.map(item => item.rackId),
},
transaction: t,
});
const existingIds = new Set(existingRacks.map(rack => rack.rackId));
const newData = processedData.filter(item => !existingIds.has(item.rackId));
const duplicateCount = processedData.length - newData.length;
const newData = finalData.filter(item => !existingIds.has(item.rackId));
const duplicateCount = finalData.length - newData.length;
// 【优化4】批量插入数据
// 【优化3】批量插入数据
let createdCount = 0;
if (newData.length > 0) {
const dataWithRoomId = newData.map(item => ({
docs/USER_GUIDE.md
+128 -6
View File
@@ -11,6 +11,9 @@
- [耗材管理](#耗材管理)
- [工单管理](#工单管理)
- [资产盘点](#资产盘点)
- [空闲设备管理](#空闲设备管理)
- [操作日志](#操作日志)
- [备份管理](#备份管理)
- [系统管理](#系统管理)
- [常见问题](#常见问题)
- [快捷操作参考](#快捷操作参考)
@@ -28,11 +31,14 @@ IDC设备资产系统是一款现代化的数据中心（IDC）设备管理平
| 功能模块 | 主要功能 |
|---------|---------|
| **仪表盘** | 数据中心运行状态实时监控，关键指标可视化展示 |
| **机房管理** | 机房信息管理、机柜管理、3D可视化展示 |
| **资产管理** | 设备管理、端口管理、线缆管理、字段配置 |
| **耗材管理** | 耗材库存管理、分类管理、操作日志、统计报表 |
| **工单管理** | 故障报修、维护工单、工单分类、统计报表 |
| **机房管理** | 机房信息管理、机柜管理、3D可视化展示、机房平面图 |
| **资产管理** | 设备管理、端口管理、线缆管理、网络拓扑、字段配置 |
| **耗材管理** | 耗材库存管理、分类管理、操作日志、统计报表、批量导入 |
| **工单管理** | 故障报修、维护工单、工单分类、统计报表、工单评价 |
| **资产盘点** | 盘点计划、盘点任务、暂存设备管理 |
| **空闲设备** | 空闲设备管理、设备转入/激活 |
| **操作日志** | 操作日志审计、模块/类型筛选、操作统计 |
| **备份管理** | 数据库备份恢复、自动备份、远端备份 |
| **系统管理** | 用户管理、角色权限、系统设置 |
### 系统特点
@@ -70,12 +76,15 @@ IDC设备资产系统是一款现代化的数据中心（IDC）设备管理平
├── 仪表盘 # 数据概览
├── 机房管理
│ ├── 机房管理 # 机房信息管理
│ ├── 机房平面图 # 机房平面图可视化
│ ├── 机柜管理 # 机柜信息管理
│ └── 3D机柜可视化 # 三维展示
├── 资产管理
│ ├── 设备管理 # 设备CRUD操作
│ ├── 空闲设备 # 空闲设备管理
│ ├── 字段管理 # 自定义字段配置
│ ├── 接线管理 # 线缆连接管理
│ ├── 网络拓扑 # 拓扑可视化
│ └── 端口管理 # 设备端口配置
├── 耗材管理
│ ├── 耗材统计 # 库存统计报表
@@ -90,6 +99,11 @@ IDC设备资产系统是一款现代化的数据中心（IDC）设备管理平
├── 资产盘点
│ ├── 盘点计划 # 盘点任务管理
│ └── 暂存设备 # 待确认设备
├── 备份管理
│ ├── 备份管理 # 数据库备份恢复
│ ├── 自动备份 # 定时备份配置
│ └── 远端备份 # 远程备份配置
├── 操作日志 # 操作审计日志
└── 系统管理
├── 用户管理 # 用户账号管理
└── 系统设置 # 系统参数配置
@@ -635,6 +649,114 @@ IDC设备资产系统是一款现代化的数据中心（IDC）设备管理平
---
### 空闲设备管理
空闲设备管理用于管理当前未上架或暂时不使用的设备。
#### 功能说明
- 查看所有空闲设备列表
- 将运行中设备转入空闲状态
- 将空闲设备重新激活上架
#### 操作流程
1. 在设备管理页面，选择需要转入空闲的设备
2. 点击「转入空闲」按钮
3. 确认操作后，设备状态变为空闲
4. 在「空闲设备」页面查看所有空闲设备
5. 需要重新使用时，点击「激活」按钮将设备恢复
---
### 操作日志
操作日志用于审计系统中所有用户操作记录。
#### 功能说明
| 功能 | 说明 |
|------|------|
| **日志查询** | 按时间范围、操作模块、操作类型筛选 |
| **模块列表** | 查看系统所有操作模块 |
| **操作类型** | 查看所有操作类型（创建/更新/删除等） |
| **操作统计** | 按模块和类型维度统计操作次数 |
| **日志详情** | 查看单条操作的详细信息 |
#### 操作说明
1. 进入「操作日志」页面
2. 使用筛选条件缩小查询范围：
- **时间范围**：选择起止日期
- **操作模块**：选择设备/工单/耗材等模块
- **操作类型**：选择创建/更新/删除等类型
3. 点击日志条目查看详细信息
4. 可查看操作统计图表
---
### 备份管理
备份管理用于数据库的备份与恢复，保障数据安全。
#### 备份管理
##### 手动备份
1. 进入「备份管理」页面
2. 点击「创建备份」按钮
3. 系统自动创建数据库备份文件
4. 备份完成后显示在备份列表中
##### 备份恢复
1. 在备份列表中选择要恢复的备份文件
2. 点击「恢复」按钮
3. 确认恢复操作（此操作会覆盖当前数据）
4. 系统显示恢复进度，完成后自动重启服务
##### 备份文件管理
| 操作 | 说明 |
|------|------|
| **上传** | 上传外部备份文件 |
| **下载** | 下载备份文件到本地 |
| **删除** | 删除不需要的备份文件 |
| **验证** | 验证备份文件完整性 |
#### 自动备份
##### 配置自动备份
1. 进入「自动备份」设置页面
2. 开启自动备份开关
3. 配置备份计划：
- **Cron 表达式**：设置备份执行时间（如 `0 2 * * *` 表示每天凌晨2点）
- **保留数量**：设置保留的备份文件数量
4. 点击「测试 Cron」验证表达式是否正确
5. 保存配置
#### 远端备份
##### 配置远端备份
1. 进入「远端备份」设置页面
2. 点击「添加目标」
3. 选择备份协议：
- **FTP**：文件传输协议
- **SFTP**：安全文件传输协议
- **WebDAV**：Web 分布式创作协议
- **SMB**：网络文件共享协议
4. 填写连接信息：
- 主机地址
- 端口号
- 用户名/密码
- 远程目录
5. 点击「测试连接」验证配置
6. 保存配置
---
### 系统管理
#### 用户管理
@@ -812,5 +934,5 @@ A: 已关闭的工单无法重新打开，如有新问题请新建工单。
---
**文档版本**：v1.0.0
**最后更新**：2026年3月
**文档版本**：v2.0.0
**最后更新**：2026年5月
docs/api/README.md
+416 -2
View File
@@ -21,11 +21,16 @@
- [耗材管理接口](#耗材管理接口)
- [耗材分类接口](#耗材分类接口)
- [耗材记录接口](#耗材记录接口)
- [盘点管理接口](#盘点管理接口)
- [空闲设备接口](#空闲设备接口)
- [操作日志接口](#操作日志接口)
- [备份管理接口](#备份管理接口)
- [仓库管理接口](#仓库管理接口)
- [拓扑管理接口](#拓扑管理接口)
- [用户管理接口](#用户管理接口)
- [角色管理接口](#角色管理接口)
- [系统设置接口](#系统设置接口)
- [背景配置接口](#背景配置接口)
- [盘点管理接口](#盘点管理接口)
- [健康检查接口](#健康检查接口)
- [错误码说明](#错误码说明)
@@ -2310,9 +2315,418 @@ GET /health
| /api/inventory/pending-devices/:pendingId | GET/PUT/DELETE | 暂存设备详情/更新/删除 |
| /api/inventory/pending-devices/:pendingId/sync | POST | 同步暂存设备 |
| /api/inventory/pending-devices/batch-sync | POST | 批量同步暂存设备 |
---
## 空闲设备接口
### 获取空闲设备列表
```http
GET /api/idle-devices
```
**查询参数：**
| 参数名 | 类型 | 描述 |
|--------|------|------|
| keyword | string | 关键词搜索 |
| roomId | string | 按机房筛选 |
| page | number | 页码 |
| pageSize | number | 每页数量 |
### 添加空闲设备
```http
POST /api/idle-devices
```
**请求参数：**
| 参数名 | 类型 | 必填 | 描述 |
|--------|------|------|------|
| deviceId | string | 是 | 设备ID |
### 激活空闲设备
```http
PUT /api/idle-devices/:deviceId/activate
```
### 删除空闲设备
```http
DELETE /api/idle-devices/:deviceId
```
---
## 操作日志接口
### 获取操作日志列表
```http
GET /api/operation-logs
```
**查询参数：**
| 参数名 | 类型 | 描述 |
|--------|------|------|
| module | string | 按模块筛选 |
| operationType | string | 按操作类型筛选 |
| startDate | string | 开始日期 |
| endDate | string | 结束日期 |
| operator | string | 按操作人筛选 |
| keyword | string | 关键词搜索 |
| page | number | 页码 |
| pageSize | number | 每页数量 |
### 获取模块列表
```http
GET /api/operation-logs/modules
```
### 获取操作类型列表
```http
GET /api/operation-logs/types
```
### 获取操作日志统计
```http
GET /api/operation-logs/statistics
```
**查询参数：**
| 参数名 | 类型 | 描述 |
|--------|------|------|
| startDate | string | 开始日期 |
| endDate | string | 结束日期 |
### 获取操作日志详情
```http
GET /api/operation-logs/:recordId
```
---
## 备份管理接口
### 创建备份
```http
POST /api/backup
```
### 获取备份列表
```http
GET /api/backup/list
```
### 验证备份文件
```http
GET /api/backup/validate/:filename
```
### 获取恢复进度（SSE）
```http
GET /api/backup/restore-progress/:filename
```
**说明：** 返回 Server-Sent Events 流，实时推送恢复进度
### 恢复备份
```http
POST /api/backup/restore
```
**请求参数：**
| 参数名 | 类型 | 必填 | 描述 |
|--------|------|------|------|
| filename | string | 是 | 备份文件名 |
### 上传备份文件
```http
POST /api/backup/upload
```
**Content-Type**: `multipart/form-data`
### 下载备份文件
```http
GET /api/backup/download/:filename
```
### 删除备份文件
```http
DELETE /api/backup/:filename
```
### 获取备份信息
```http
GET /api/backup/info
```
### 清理旧备份
```http
POST /api/backup/clean
```
**请求参数：**
| 参数名 | 类型 | 必填 | 描述 |
|--------|------|------|------|
| keepCount | number | 否 | 保留的备份数量 |
### 获取自动备份状态
```http
GET /api/backup/auto/status
```
### 更新自动备份设置
```http
POST /api/backup/auto/settings
```
**请求参数：**
| 参数名 | 类型 | 必填 | 描述 |
|--------|------|------|------|
| enabled | boolean | 是 | 是否启用 |
| cronExpression | string | 否 | Cron 表达式 |
| keepCount | number | 否 | 保留数量 |
### 立即执行自动备份
```http
POST /api/backup/auto/execute
```
### 测试 Cron 表达式
```http
POST /api/backup/auto/test-cron
```
**请求参数：**
| 参数名 | 类型 | 必填 | 描述 |
|--------|------|------|------|
| cronExpression | string | 是 | Cron 表达式 |
### 获取远端备份目标列表
```http
GET /api/backup/remote/targets
```
### 获取单个远端备份目标
```http
GET /api/backup/remote/targets/:id
```
### 添加远端备份目标
```http
POST /api/backup/remote/targets
```
**请求参数：**
| 参数名 | 类型 | 必填 | 描述 |
|--------|------|------|------|
| name | string | 是 | 目标名称 |
| protocol | string | 是 | 协议（ftp/sftp/webdav/smb） |
| host | string | 是 | 主机地址 |
| port | number | 否 | 端口号 |
| username | string | 否 | 用户名 |
| password | string | 否 | 密码 |
| remotePath | string | 否 | 远程目录 |
### 更新远端备份目标
```http
PUT /api/backup/remote/targets/:id
```
### 删除远端备份目标
```http
DELETE /api/backup/remote/targets/:id
```
### 测试远端连接
```http
POST /api/backup/remote/test
```
### 测试指定远端连接
```http
POST /api/backup/remote/targets/:id/test
```
### 获取远端备份设置
```http
GET /api/backup/remote/settings
```
### 更新远端备份设置
```http
PUT /api/backup/remote/settings
```
### 获取支持的协议列表
```http
GET /api/backup/remote/protocols
```
### 手动上传备份到远端
```http
POST /api/backup/remote/upload
```
**请求参数：**
| 参数名 | 类型 | 必填 | 描述 |
|--------|------|------|------|
| filename | string | 是 | 备份文件名 |
| targetId | string | 是 | 远端目标ID |
### 获取备份日志列表
```http
GET /api/backup/logs
```
### 获取备份日志详情
```http
GET /api/backup/logs/:id
```
### 清理旧备份日志
```http
DELETE /api/backup/logs/clean
```
---
## 仓库管理接口
### 获取仓库列表
```http
GET /api/warehouses
```
### 创建仓库
```http
POST /api/warehouses
```
**请求参数：**
| 参数名 | 类型 | 必填 | 描述 |
|--------|------|------|------|
| name | string | 是 | 仓库名称 |
| location | string | 否 | 仓库位置 |
| description | string | 否 | 描述 |
| manager | string | 否 | 负责人 |
| contact | string | 否 | 联系方式 |
### 获取单个仓库
```http
GET /api/warehouses/:warehouseId
```
### 更新仓库
```http
PUT /api/warehouses/:warehouseId
```
### 删除仓库
```http
DELETE /api/warehouses/:warehouseId
```
---
## 拓扑管理接口
### 获取交换机拓扑
```http
GET /api/topology/switch/:switchId
```
**响应示例：**
```json
{
"success": true,
"data": {
"switch": {
"deviceId": "dev001",
"name": "核心交换机",
"type": "switch"
},
"connections": [
{
"deviceId": "dev002",
"name": "服务器01",
"type": "server",
"port": "eth0",
"cableId": "cable001"
}
]
}
}
```
### 获取设备拓扑
```http
GET /api/topology/device/:deviceId
```
---
## 健康检查接口
| 端点 | 方法 | 说明 |
|------|------|------|
| /health | GET | 服务健康检查 |
---
**文档版本：** 2.0.0
**最后更新：** 2026-03-11
**最后更新：** 2026年5月
frontend/src/api/index.js
+6 -1
View File
@@ -69,6 +69,9 @@ api.interceptors.request.use(
api.interceptors.response.use(
response => {
if (response.config.responseType === 'blob') {
return response;
}
return response.data;
},
error => {
@@ -96,7 +99,9 @@ api.interceptors.response.use(
}
}
return Promise.reject(data.message || '请求失败');
error.friendlyMessage = data.message || '请求失败';
error.message = data.message || '请求失败';
return Promise.reject(error);
}
if (error.code === 'ECONNABORTED') {
frontend/src/components/device/ImportModal.jsx
+1 -1
View File
@@ -155,7 +155,7 @@ const ImportModal = ({ visible, deviceFields, onImport, onCancel }) => {
const handleDownloadTemplate = async () => {
try {
const response = await deviceAPI.getImportTemplate();
const blob = new Blob([response], { type: 'text/csv; charset=gbk' });
const blob = new Blob([response.data], { type: 'text/csv; charset=gbk' });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
frontend/src/components/rack/RackImportModal.jsx
+848
View File
@@ -0,0 +1,848 @@
import React, { useState, useCallback } from 'react';
import {
Modal,
Upload,
Button,
Progress,
message,
Steps,
Card,
Alert,
Space,
Tag,
Typography,
Divider,
Table,
Spin,
} from 'antd';
import {
UploadOutlined,
DownloadOutlined,
CheckCircleOutlined,
WarningOutlined,
FileExcelOutlined,
InboxOutlined,
DatabaseOutlined,
FileTextOutlined,
ArrowRightOutlined,
CloseCircleOutlined,
InfoCircleOutlined,
} from '@ant-design/icons';
import { designTokens } from '../../config/theme';
import CloseButton from '../CloseButton';
import api from '../../api';
const { Title, Text, Paragraph } = Typography;
const { Step } = Steps;
const { Dragger } = Upload;
/**
* 机柜导入弹窗组件
* @param {boolean} visible - 弹窗显示状态
* @param {Function} onClose - 关闭回调
* @param {Function} onImport - 导入回调
* @param {Function} onDownloadTemplate - 下载模板回调
* @returns {JSX.Element}
*/
function RackImportModal({ visible, onClose, onImport, onDownloadTemplate }) {
const [currentStep, setCurrentStep] = useState(0);
const [isImporting, setIsImporting] = useState(false);
const [importProgress, setImportProgress] = useState(0);
const [importPhase, setImportPhase] = useState('');
const [importResult, setImportResult] = useState(null);
const [selectedFile, setSelectedFile] = useState(null);
const [previewData, setPreviewData] = useState(null);
const [previewLoading, setPreviewLoading] = useState(false);
const resetState = useCallback(() => {
setCurrentStep(0);
setIsImporting(false);
setImportProgress(0);
setImportPhase('');
setImportResult(null);
setSelectedFile(null);
setPreviewData(null);
setPreviewLoading(false);
}, []);
const handleClose = useCallback(() => {
resetState();
onClose();
}, [resetState, onClose]);
/**
* 调用后端接口解析 Excel 文件获取预览数据
* @param {File} file - 上传的文件
*/
const fetchPreviewData = useCallback(async file => {
setPreviewLoading(true);
try {
const formData = new FormData();
formData.append('file', file);
const response = await api.post('/racks/import-preview', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
if (response.success) {
setPreviewData(response.data);
setCurrentStep(1);
} else {
message.error(response.error || '预览失败');
setSelectedFile(null);
}
} catch (error) {
console.error('预览失败:', error);
const errMsg = error.response?.data?.error || error.message || '预览失败，请检查文件格式';
message.error(errMsg);
setSelectedFile(null);
} finally {
setPreviewLoading(false);
}
}, []);
const handleBeforeUpload = useCallback(
file => {
const isXlsx =
file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
file.type === 'application/vnd.ms-excel';
if (!isXlsx) {
message.error('请上传 Excel 文件（.xlsx 或 .xls 格式）');
return false;
}
setSelectedFile(file);
fetchPreviewData(file);
return false;
},
[fetchPreviewData]
);
const handleStartImport = useCallback(async () => {
if (!selectedFile) {
message.warning('请先选择文件');
return;
}
setIsImporting(true);
setCurrentStep(2);
setImportProgress(0);
setImportPhase('正在解析文件...');
try {
const result = await onImport(selectedFile, {
onProgress: (progress, phase) => {
setImportProgress(progress);
setImportPhase(phase);
},
});
setImportResult(result);
setImportProgress(100);
setImportPhase('导入完成');
setCurrentStep(3);
} catch (error) {
message.error(error?.message || '导入失败');
setImportPhase('导入失败');
} finally {
setIsImporting(false);
}
}, [selectedFile, onImport]);
const steps = [
{ title: '上传文件', icon: <UploadOutlined /> },
{ title: '数据预览', icon: <FileTextOutlined /> },
{ title: '导入中', icon: <DatabaseOutlined /> },
{ title: '完成', icon: <CheckCircleOutlined /> },
];
const renderUploadStep = () => (
<Space direction="vertical" size="large" style={{ width: '100%' }}>
{/* 文件上传区域 */}
<Card
style={{
borderRadius: designTokens.borderRadius.large,
border: `2px dashed ${designTokens.colors.border.light}`,
background: designTokens.colors.background.secondary,
}}
bodyStyle={{ padding: '40px 24px' }}
>
<Dragger
name="file"
accept=".xlsx,.xls"
showUploadList={false}
beforeUpload={handleBeforeUpload}
maxCount={1}
disabled={previewLoading}
style={{ background: 'transparent', border: 'none' }}
>
<div style={{ textAlign: 'center' }}>
<div
style={{
width: '80px',
height: '80px',
borderRadius: '50%',
background: designTokens.colors.primary.bg,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '16px',
}}
>
{previewLoading ? (
<Spin size="large" />
) : (
<InboxOutlined
style={{ fontSize: '36px', color: designTokens.colors.primary.main }}
/>
)}
</div>
<Title level={5} style={{ margin: '0 0 8px', color: designTokens.colors.text.primary }}>
{previewLoading ? '正在解析文件...' : '点击或拖拽文件到此处上传'}
</Title>
<Paragraph style={{ color: designTokens.colors.text.tertiary, margin: 0 }}>
支持 .xlsx、.xls 格式，文件大小不超过 10MB
</Paragraph>
</div>
</Dragger>
</Card>
{/* 模板下载 */}
<Card
style={{
borderRadius: designTokens.borderRadius.large,
border: `1px solid ${designTokens.colors.border.light}`,
}}
bodyStyle={{ padding: '20px 24px' }}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<div
style={{
width: '48px',
height: '48px',
borderRadius: designTokens.borderRadius.medium,
background: designTokens.colors.success.bg,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
}}
>
<FileExcelOutlined
style={{ fontSize: '24px', color: designTokens.colors.success.main }}
/>
</div>
<div style={{ flex: 1 }}>
<Text strong style={{ fontSize: '15px', color: designTokens.colors.text.primary }}>
下载导入模板
</Text>
<Paragraph style={{ color: designTokens.colors.text.secondary, margin: '4px 0 0', fontSize: '13px' }}>
包含标准字段和示例数据，帮助您快速准备导入文件
</Paragraph>
</div>
<Button
icon={<DownloadOutlined />}
onClick={onDownloadTemplate}
style={{
height: '40px',
borderRadius: designTokens.borderRadius.medium,
borderColor: designTokens.colors.primary.main,
color: designTokens.colors.primary.main,
}}
>
下载模板
</Button>
</div>
</Card>
{/* 格式说明 */}
<Alert
type="info"
showIcon
icon={<InfoCircleOutlined />}
message="Excel 文件格式要求"
description={
<ul style={{ margin: '8px 0 0', paddingLeft: '20px', lineHeight: '1.8' }}>
<li>
<Text strong>必填字段：</Text>
机柜ID、机柜名称、所属机房名称、高度(U)、最大功率(W)、状态
</li>
<li>
<Text strong>状态值：</Text>
<Tag color="success">active（在用）</Tag>
<Tag color="warning">maintenance（维护中）</Tag>
<Tag>inactive（停用）</Tag>
</li>
<li>
<Text strong>数据格式：</Text>
高度和功率必须是数字格式，编码为 UTF-8
</li>
</ul>
}
style={{
borderRadius: designTokens.borderRadius.large,
border: `1px solid ${designTokens.colors.info.light}40`,
background: designTokens.colors.info.bg,
}}
/>
</Space>
);
const renderPreviewStep = () => {
if (!previewData) return null;
const columns = [
{ title: '行号', dataIndex: '_rowNum', key: '_rowNum', width: 60 },
{ title: '机柜ID', dataIndex: 'rackId', key: 'rackId', width: 100 },
{ title: '机柜名称', dataIndex: 'name', key: 'name', width: 120 },
{ title: '所属机房', dataIndex: 'roomName', key: 'roomName', width: 100 },
{ title: '高度(U)', dataIndex: 'height', key: 'height', width: 80 },
{ title: '最大功率(W)', dataIndex: 'maxPower', key: 'maxPower', width: 100 },
{ title: '状态', dataIndex: 'status', key: 'status', width: 80 },
];
return (
<Space direction="vertical" size="large" style={{ width: '100%' }}>
{/* 统计卡片 */}
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '12px',
}}
>
<Card
style={{
borderRadius: designTokens.borderRadius.large,
background: designTokens.colors.primary.bg,
border: `1px solid ${designTokens.colors.primary.light}30`,
}}
bodyStyle={{ padding: '16px', textAlign: 'center' }}
>
<Text style={{ fontSize: '24px', fontWeight: 700, color: designTokens.colors.primary.main }}>
{previewData.total}
</Text>
<div style={{ fontSize: '12px', color: designTokens.colors.text.secondary, marginTop: '4px' }}>
总记录数
</div>
</Card>
<Card
style={{
borderRadius: designTokens.borderRadius.large,
background: designTokens.colors.success.bg,
border: `1px solid ${designTokens.colors.success.light}30`,
}}
bodyStyle={{ padding: '16px', textAlign: 'center' }}
>
<Text style={{ fontSize: '24px', fontWeight: 700, color: designTokens.colors.success.main }}>
{previewData.valid}
</Text>
<div style={{ fontSize: '12px', color: designTokens.colors.text.secondary, marginTop: '4px' }}>
有效数据
</div>
</Card>
<Card
style={{
borderRadius: designTokens.borderRadius.large,
background: previewData.invalid > 0 ? designTokens.colors.error.bg : designTokens.colors.success.bg,
border: `1px solid ${previewData.invalid > 0 ? designTokens.colors.error.light : designTokens.colors.success.light}30`,
}}
bodyStyle={{ padding: '16px', textAlign: 'center' }}
>
<Text
style={{
fontSize: '24px',
fontWeight: 700,
color: previewData.invalid > 0 ? designTokens.colors.error.main : designTokens.colors.success.main,
}}
>
{previewData.invalid}
</Text>
<div style={{ fontSize: '12px', color: designTokens.colors.text.secondary, marginTop: '4px' }}>
无效数据
</div>
</Card>
</div>
{/* 验证结果提示 */}
{previewData.invalid > 0 ? (
<Alert
type="warning"
showIcon
icon={<WarningOutlined />}
message={`发现 ${previewData.invalid} 条数据存在错误`}
description="错误行已用红色标记，请核对后确认导入。建议修复错误后重新上传。"
style={{ borderRadius: designTokens.borderRadius.large }}
/>
) : (
<Alert
type="success"
showIcon
icon={<CheckCircleOutlined />}
message="数据验证通过"
description="所有数据格式正确，可以进行导入。"
style={{ borderRadius: designTokens.borderRadius.large }}
/>
)}
{/* 数据预览表格 */}
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<FileTextOutlined style={{ color: designTokens.colors.primary.main }} />
<Text strong>数据预览</Text>
<Tag color="blue">共 {previewData.preview.length} 条</Tag>
</div>
}
style={{
borderRadius: designTokens.borderRadius.large,
border: `1px solid ${designTokens.colors.border.light}`,
}}
bodyStyle={{ padding: 0 }}
>
<Table
columns={columns}
dataSource={previewData.preview}
rowKey="_rowNum"
size="small"
pagination={false}
scroll={{ x: 'max-content' }}
rowClassName={record => (record._hasError ? 'ant-table-row-error' : '')}
style={{
borderRadius: `0 0 ${designTokens.borderRadius.large} ${designTokens.borderRadius.large}`,
}}
/>
</Card>
{/* 错误详情 */}
{previewData.errors && previewData.errors.length > 0 && (
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<CloseCircleOutlined style={{ color: designTokens.colors.error.main }} />
<Text strong style={{ color: designTokens.colors.error.main }}>
错误详情
</Text>
</div>
}
style={{
borderRadius: designTokens.borderRadius.large,
border: `1px solid ${designTokens.colors.error.light}50`,
background: designTokens.colors.error.bg,
}}
bodyStyle={{ padding: '16px' }}
>
{previewData.errors.map((err, index) => (
<div
key={index}
style={{
padding: '8px 12px',
background: '#fff',
borderRadius: designTokens.borderRadius.medium,
marginBottom: index < previewData.errors.length - 1 ? '8px' : 0,
border: `1px solid ${designTokens.colors.error.light}30`,
}}
>
<Text strong style={{ color: designTokens.colors.error.main }}>
第 {err.row} 行：
</Text>
<Text style={{ color: designTokens.colors.text.secondary }}>
{err.errors.join('；')}
</Text>
</div>
))}
</Card>
)}
{/* 操作按钮 */}
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
<Button
size="large"
onClick={() => {
setSelectedFile(null);
setPreviewData(null);
setCurrentStep(0);
}}
style={{ borderRadius: designTokens.borderRadius.medium }}
>
重新选择
</Button>
<Button
type="primary"
size="large"
icon={<ArrowRightOutlined />}
onClick={handleStartImport}
disabled={previewData.invalid > 0}
style={{
borderRadius: designTokens.borderRadius.medium,
background: previewData.invalid > 0 ? undefined : designTokens.colors.primary.gradient,
border: 'none',
}}
>
确认导入
</Button>
</div>
</Space>
);
};
const renderImportingStep = () => (
<div style={{ textAlign: 'center', padding: '40px 0' }}>
<div
style={{
width: '80px',
height: '80px',
borderRadius: '50%',
background: designTokens.colors.primary.gradient,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '24px',
animation: 'pulse 2s infinite',
}}
>
<DatabaseOutlined style={{ fontSize: '36px', color: '#fff' }} />
</div>
<Title level={4} style={{ margin: '0 0 8px', color: designTokens.colors.text.primary }}>
正在导入机柜数据
</Title>
<Text style={{ color: designTokens.colors.primary.main, fontSize: '15px' }}>
{importPhase}
</Text>
<div style={{ marginTop: '32px', maxWidth: '400px', margin: '32px auto 0' }}>
<Progress
percent={importProgress}
status="active"
strokeColor={{
'0%': designTokens.colors.primary.main,
'100%': designTokens.colors.purple.main,
}}
strokeWidth={8}
style={{ borderRadius: '4px' }}
/>
</div>
<style>{`
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
}
`}</style>
</div>
);
const renderResultStep = () => {
if (!importResult) return null;
const isSuccess = importResult.failedCount === 0;
return (
<Space direction="vertical" size="large" style={{ width: '100%' }}>
{/* 结果图标和标题 */}
<div style={{ textAlign: 'center', padding: '20px 0' }}>
<div
style={{
width: '80px',
height: '80px',
borderRadius: '50%',
background: isSuccess ? designTokens.colors.success.gradient : designTokens.colors.warning.gradient,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '16px',
}}
>
{isSuccess ? (
<CheckCircleOutlined style={{ fontSize: '40px', color: '#fff' }} />
) : (
<WarningOutlined style={{ fontSize: '40px', color: '#fff' }} />
)}
</div>
<Title level={4} style={{ margin: '0 0 8px' }}>
{isSuccess ? '导入成功' : '导入完成（部分失败）'}
</Title>
<Text style={{ color: designTokens.colors.text.secondary }}>
{isSuccess
? '所有机柜数据已成功导入系统'
: '部分数据导入失败，请查看下方错误详情'}
</Text>
</div>
{/* 统计卡片 */}
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '12px',
}}
>
<Card
style={{
borderRadius: designTokens.borderRadius.large,
background: designTokens.colors.primary.bg,
border: `1px solid ${designTokens.colors.primary.light}30`,
}}
bodyStyle={{ padding: '16px', textAlign: 'center' }}
>
<Text style={{ fontSize: '24px', fontWeight: 700, color: designTokens.colors.primary.main }}>
{importResult.total || 0}
</Text>
<div style={{ fontSize: '12px', color: designTokens.colors.text.secondary, marginTop: '4px' }}>
总记录数
</div>
</Card>
<Card
style={{
borderRadius: designTokens.borderRadius.large,
background: designTokens.colors.success.bg,
border: `1px solid ${designTokens.colors.success.light}30`,
}}
bodyStyle={{ padding: '16px', textAlign: 'center' }}
>
<Text style={{ fontSize: '24px', fontWeight: 700, color: designTokens.colors.success.main }}>
{importResult.successCount || 0}
</Text>
<div style={{ fontSize: '12px', color: designTokens.colors.text.secondary, marginTop: '4px' }}>
成功导入
</div>
</Card>
<Card
style={{
borderRadius: designTokens.borderRadius.large,
background:
importResult.failedCount > 0
? designTokens.colors.error.bg
: designTokens.colors.success.bg,
border: `1px solid ${importResult.failedCount > 0 ? designTokens.colors.error.light : designTokens.colors.success.light}30`,
}}
bodyStyle={{ padding: '16px', textAlign: 'center' }}
>
<Text
style={{
fontSize: '24px',
fontWeight: 700,
color:
importResult.failedCount > 0
? designTokens.colors.error.main
: designTokens.colors.success.main,
}}
>
{importResult.failedCount || 0}
</Text>
<div style={{ fontSize: '12px', color: designTokens.colors.text.secondary, marginTop: '4px' }}>
导入失败
</div>
</Card>
</div>
{/* 新增机柜列表 */}
{importResult.createdRacks && importResult.createdRacks.length > 0 && (
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<CheckCircleOutlined style={{ color: designTokens.colors.success.main }} />
<Text strong>本次新增机柜</Text>
<Tag color="success">{importResult.createdRacks.length} 个</Tag>
</div>
}
style={{
borderRadius: designTokens.borderRadius.large,
border: `1px solid ${designTokens.colors.success.light}50`,
background: designTokens.colors.success.bg,
}}
bodyStyle={{ padding: '16px', maxHeight: '200px', overflow: 'auto' }}
>
{importResult.createdRacks.map((rack, idx) => (
<div
key={idx}
style={{
padding: '8px 12px',
background: '#fff',
borderRadius: designTokens.borderRadius.medium,
marginBottom: idx < importResult.createdRacks.length - 1 ? '8px' : 0,
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<DatabaseOutlined style={{ color: designTokens.colors.primary.main }} />
<Text strong>{rack.rackId}</Text>
<Text type="secondary">-</Text>
<Text>{rack.name}</Text>
</div>
))}
</Card>
)}
{/* 跳过机柜列表 */}
{importResult.skippedRacks && importResult.skippedRacks.length > 0 && (
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<WarningOutlined style={{ color: designTokens.colors.warning.main }} />
<Text strong>已跳过机柜（已存在）</Text>
<Tag color="warning">{importResult.skippedRacks.length} 个</Tag>
</div>
}
style={{
borderRadius: designTokens.borderRadius.large,
border: `1px solid ${designTokens.colors.warning.light}50`,
background: designTokens.colors.warning.bg,
}}
bodyStyle={{ padding: '16px', maxHeight: '200px', overflow: 'auto' }}
>
{importResult.skippedRacks.map((rack, idx) => (
<div
key={idx}
style={{
padding: '8px 12px',
background: '#接口',
borderRadius: designTokens.borderRadius.medium,
marginBottom: idx < importResult.skippedRacks.length - 1 ? '8px' : 0,
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<DatabaseOutlined style={{ color: designTokens.colors.warning.main }} />
<Text strong>{rack.rackId}</Text>
<Text type="secondary">-</Text>
<Text>{rack.name}</Text>
</div>
))}
</Card>
)}
{/* 错误详情 */}
{importResult.errors && importResult.errors.length > 0 && (
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<CloseCircleOutlined style={{ color: designTokens.colors.error.main }} />
<Text strong style={{ color: designTokens.colors.error.main }}>
错误详情
</Text>
</div>
}
style={{
borderRadius: designTokens.borderRadius.large,
border: `1px solid ${designTokens.colors.error.light}50`,
background: designTokens.colors.error.bg,
}}
bodyStyle={{ padding: '16px', maxHeight: '250px', overflow: 'auto' }}
>
{importResult.errors.slice(0, 5).map((err, idx) => (
<div
key={idx}
style={{
padding: '10px 12px',
background: '#fff',
borderRadius: designTokens.borderRadius.medium,
marginBottom: idx < Math.min(importResult.errors.length, 5) - 1 ? '8px' : 0,
border: `1px solid ${designTokens.colors.error.light}30`,
}}
>
<Text strong style={{ color: designTokens.colors.error.main }}>
第 {err.row || idx + 1} 行
</Text>
<Divider type="vertical" style={{ margin: '0 8px' }} />
<Text style={{ color: designTokens.colors.text.secondary }}>{err.error}</Text>
</div>
))}
{importResult.errors.length > 5 && (
<div style={{ textAlign: 'center', marginTop: '8px' }}>
<Text type="secondary" style={{ fontSize: '12px' }}>
还有 {importResult.errors.length - 5} 处错误未显示...
</Text>
</div>
)}
</Card>
)}
{/* 完成按钮 */}
<div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0' }}>
<Button
type="primary"
size="large"
onClick={handleClose}
style={{
borderRadius: designTokens.borderRadius.medium,
background: designTokens.colors.primary.gradient,
border: 'none',
minWidth: '120px',
}}
>
完成
</Button>
</div>
</Space>
);
};
const renderStepContent = () => {
switch (currentStep) {
case 0:
return renderUploadStep();
case 1:
return renderPreviewStep();
case 2:
return renderImportingStep();
case 3:
return renderResultStep();
default:
return renderUploadStep();
}
};
return (
<Modal
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', paddingRight: '32px' }}>
<div
style={{
width: '36px',
height: '36px',
borderRadius: designTokens.borderRadius.medium,
background: designTokens.colors.primary.gradient,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
}}
>
<UploadOutlined />
</div>
<span style={{ fontSize: '18px', fontWeight: 600 }}>导入机柜</span>
</div>
}
open={visible}
closeIcon={<CloseButton />}
onCancel={handleClose}
footer={null}
width={720}
destroyOnHidden
styles={{
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
body: { padding: '24px' },
}}
style={{ borderRadius: designTokens.borderRadius.large }}
>
{/* 步骤条 */}
<Steps
current={currentStep}
items={steps}
style={{ marginBottom: '24px' }}
size="small"
/>
{/* 步骤内容 */}
{renderStepContent()}
</Modal>
);
}
export default React.memo(RackImportModal);
frontend/src/pages/BackupManagement.jsx
+2 -2
View File
@@ -224,9 +224,9 @@ const BackupManagement = () => {
const handleDownload = async filename => {
try {
const blob = await backupAPI.download(filename);
const response = await backupAPI.download(filename);
// 创建临时链接并触发下载
const url = window.URL.createObjectURL(blob);
const url = window.URL.createObjectURL(response.data);
const link = document.createElement('a');
link.href = url;
link.download = filename;
frontend/src/pages/RackManagement.jsx
+81 -354
View File
@@ -23,7 +23,6 @@ import {
Checkbox,
Dropdown,
Statistic,
Upload,
Spin,
Pagination,
} from 'antd';
@@ -51,6 +50,7 @@ import {
} from '@ant-design/icons';
import { designTokens } from '../config/theme';
import CloseButton from '../components/CloseButton';
import RackImportModal from '../components/rack/RackImportModal';
import api from '../api';
const { Option } = Select;
@@ -312,10 +312,6 @@ function RackManagement() {
showTotal: total => `共 ${total} 条记录`,
});
const [form] = Form.useForm();
const [importProgress, setImportProgress] = useState(0);
const [importPhase, setImportPhase] = useState('');
const [isImporting, setIsImporting] = useState(false);
const [importResult, setImportResult] = useState(null);
const fetchRacks = useCallback(
async (page = 1, pageSize = 10) => {
@@ -475,7 +471,7 @@ function RackManagement() {
});
// 创建下载链接
const blob = new Blob([response], {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
const url = window.URL.createObjectURL(blob);
@@ -499,14 +495,16 @@ function RackManagement() {
// 导出租机柜数据
const handleExport = useCallback(async () => {
try {
message.loading('正在导出租机柜数据...', 0);
const hasSelection = selectedRackIds.length > 0;
message.loading(hasSelection ? '正在导出选中机柜数据...' : '正在导出全部机柜数据...', 0);
const response = await api.get('/racks/export', {
params: hasSelection ? { rackIds: selectedRackIds.join(',') } : {},
responseType: 'blob',
});
// 创建下载链接
const blob = new Blob([response], {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
const url = window.URL.createObjectURL(blob);
@@ -530,85 +528,82 @@ function RackManagement() {
window.URL.revokeObjectURL(url);
message.destroy();
message.success('机柜导出成功');
message.success(hasSelection ? `已导出 ${selectedRackIds.length} 个选中机柜` : '已导出全部机柜');
} catch (error) {
message.destroy();
message.error('机柜导出失败');
console.error('机柜导出失败:', error);
}
}, []);
}, [selectedRackIds]);
const handleImport = useCallback(
async file => {
try {
setIsImporting(true);
setImportProgress(0);
setImportPhase('正在上传文件...');
setImportResult(null);
(file, { onProgress } = {}) => {
return new Promise((resolve, reject) => {
const doImport = async () => {
try {
onProgress?.(10, '正在上传文件...');
const formData = new FormData();
formData.append('file', file);
const formData = new FormData();
formData.append('file', file);
const response = await api.post('/racks/import', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
onProgress?.(50, '正在处理数据...');
setImportProgress(100);
setImportPhase('导入完成');
const response = await api.post('/racks/import', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
const resData = response;
const importResult = {
total: resData.total || 0,
successCount: resData.imported || 0,
duplicates: resData.duplicates || 0,
failedCount: 0,
errors: [],
createdRacks: resData.createdRacks || [],
skippedRacks: resData.skippedRacks || [],
onProgress?.(100, '导入完成');
const resData = response;
const importResult = {
total: resData.total || 0,
successCount: resData.imported || 0,
duplicates: resData.duplicates || 0,
failedCount: 0,
errors: [],
createdRacks: resData.createdRacks || [],
skippedRacks: resData.skippedRacks || [],
};
if (resData.details && Array.isArray(resData.details)) {
importResult.failedCount = resData.details.length;
importResult.errors = resData.details.map(item => ({
row: item.row,
error: item.errors.join('；'),
}));
}
if (resData.success) {
message.success('机柜导入成功');
} else {
message.warning(resData.message || '部分记录导入失败');
}
fetchRacks();
resolve(importResult);
} catch (error) {
const errorData = error.response?.data;
if (errorData?.details && Array.isArray(errorData.details)) {
const importResult = {
total: errorData.total || 0,
successCount: 0,
failedCount: errorData.details.length,
errors: errorData.details.map(item => ({
row: item.row,
error: item.errors.join('；'),
})),
};
resolve(importResult);
} else {
message.error(errorData?.error || errorData?.message || '机柜导入失败');
console.error('机柜导入失败:', error);
reject(new Error(errorData?.error || errorData?.message || '机柜导入失败'));
}
}
};
if (resData.details && Array.isArray(resData.details)) {
importResult.failedCount = resData.details.length;
importResult.errors = resData.details.map(item => ({
row: item.row,
error: item.errors.join('；'),
}));
}
setImportResult(importResult);
setIsImporting(false);
if (resData.success) {
message.success('机柜导入成功');
} else {
message.warning(resData.message || '部分记录导入失败');
}
fetchRacks();
return false;
} catch (error) {
setIsImporting(false);
setImportProgress(0);
const errorData = error.response?.data;
if (errorData?.details && Array.isArray(errorData.details)) {
const importResult = {
total: errorData.total || 0,
successCount: 0,
failedCount: errorData.details.length,
errors: errorData.details.map(item => ({
row: item.row,
error: item.errors.join('；'),
})),
};
setImportResult(importResult);
setImportPhase('导入失败');
} else {
message.error(errorData?.error || errorData?.message || '机柜导入失败');
console.error('机柜导入失败:', error);
}
return false;
}
doImport();
});
},
[fetchRacks]
);
@@ -911,8 +906,12 @@ function RackManagement() {
>
导入
</Button>
<Button icon={<DownloadOutlined />} onClick={handleExport} style={actionButtonStyle}>
导出
<Button
icon={<DownloadOutlined />}
onClick={handleExport}
style={actionButtonStyle}
>
{selectedRackIds.length > 0 ? `导出选中 (${selectedRackIds.length})` : '导出全部'}
</Button>
<Button
type="primary"
@@ -1273,284 +1272,12 @@ function RackManagement() {
)}
</Drawer>
<Modal
title={
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', paddingRight: '32px' }}>
<div
style={{
width: '4px',
height: '20px',
background: designTokens.colors.primary.gradient,
borderRadius: '2px',
}}
/>
导入机柜
</div>
}
open={importModalVisible}
closeIcon={<CloseButton />}
onCancel={() => {
setImportModalVisible(false);
setImportProgress(0);
setImportPhase('');
setImportResult(null);
setIsImporting(false);
}}
footer={null}
width={650}
destroyOnHidden
styles={{
body: { padding: '24px' },
header: {
borderBottom: '1px solid #f0f0f0',
padding: '16px 24px',
position: 'relative',
},
}}
style={{ borderRadius: '16px' }}
>
{!isImporting && !importResult ? (
<div>
<div
style={{
padding: '16px',
background: designTokens.colors.primary.bgGradient,
borderRadius: '12px',
marginBottom: '20px',
border: '1px solid #e8e8e8',
}}
>
<p style={{ margin: '0 0 12px 0', fontWeight: '600', color: '#262626' }}>
请上传XLSX格式的机柜数据文件
</p>
<p style={{ margin: 0, color: '#8c8c8c', fontSize: '12px' }}>支持的编码格式：UTF-8</p>
</div>
<div style={{ marginBottom: '24px' }}>
<p style={{ fontWeight: '600', marginBottom: '12px', color: '#262626' }}>
Excel文件格式要求：
</p>
<ul
style={{
paddingLeft: '20px',
marginBottom: '10px',
color: '#595959',
lineHeight: '1.8',
}}
>
<li>必填字段：机柜ID、机柜名称、所属机房名称、高度(U)、最大功率(W)、状态</li>
<li>状态值：active(在用)、maintenance(维护中)、inactive(停用)</li>
<li>高度和功率必须是数字格式</li>
</ul>
</div>
<div
style={{
padding: '16px',
background: '#f6f6f6',
borderRadius: '8px',
marginBottom: '20px',
display: 'flex',
alignItems: 'center',
gap: '12px',
}}
>
<Button
icon={<DownloadOutlined />}
onClick={handleDownloadTemplate}
style={actionButtonStyle}
>
下载导入模板
</Button>
<span style={{ color: '#8c8c8c', fontSize: '12px' }}>包含示例数据的XLSX模板文件</span>
</div>
<Upload
name="file"
accept=".xlsx, .xls"
showUploadList={false}
beforeUpload={handleImport}
maxCount={1}
>
<Button
type="primary"
icon={<UploadOutlined />}
block
style={{
...primaryButtonStyle,
height: '48px',
fontSize: '16px',
}}
>
选择Excel文件
</Button>
</Upload>
</div>
) : isImporting ? (
<div>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
<div
style={{
width: '48px',
height: '48px',
borderRadius: '50%',
background: designTokens.colors.primary.gradient,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginRight: '16px',
color: '#fff',
fontSize: '20px',
}}
>
<UploadOutlined spin />
</div>
<div>
<p
style={{
margin: '0 0 4px 0',
fontWeight: '600',
color: '#333',
fontSize: '16px',
}}
>
正在导入机柜数据
</p>
<p style={{ margin: 0, color: designTokens.colors.primary.main, fontSize: '14px' }}>
{importPhase}
</p>
</div>
</div>
<Progress
percent={importProgress}
status="active"
strokeColor={{
'0%': '#667eea',
'100%': '#764ba2',
}}
format={() => `${importProgress}%`}
/>
</div>
) : (
importResult && (
<div>
<div
style={{
padding: '20px',
background: '#f6f6f6',
borderRadius: '12px',
marginBottom: '20px',
}}
>
<p style={{ marginBottom: '12px', fontWeight: '600' }}>导入结果：</p>
<p style={{ margin: '8px 0', color: '#52c41a' }}>
✓ 总记录数：{importResult.total || 0}
</p>
<p style={{ margin: '8px 0', color: '#52c41a' }}>
✓ 成功导入：{importResult.successCount || 0}
</p>
{importResult.failedCount > 0 && (
<p style={{ margin: '8px 0', color: '#ff4d4f' }}>
✗ 导入失败：{importResult.failedCount}
</p>
)}
{importResult.duplicates > 0 && (
<p style={{ margin: '8px 0', color: '#faad14' }}>
⚠ 跳过（已存在）：{importResult.duplicates}
</p>
)}
</div>
{importResult.createdRacks && importResult.createdRacks.length > 0 && (
<div style={{ marginBottom: '20px' }}>
<p style={{ fontWeight: '600', marginBottom: '8px', color: '#52c41a' }}>
✓ 本次新增机柜（{importResult.createdRacks.length}）：
</p>
<div
style={{
maxHeight: '150px',
overflow: 'auto',
background: '#f6ffed',
border: '1px solid #b7eb8f',
borderRadius: '8px',
padding: '12px',
}}
>
{importResult.createdRacks.map((rack, idx) => (
<div key={idx} style={{ fontSize: '13px', marginBottom: '4px' }}>
• {rack.rackId} - {rack.name}
</div>
))}
</div>
</div>
)}
{importResult.skippedRacks && importResult.skippedRacks.length > 0 && (
<div style={{ marginBottom: '20px' }}>
<p style={{ fontWeight: '600', marginBottom: '8px', color: '#faad14' }}>
⚠ 已跳过机柜（{importResult.skippedRacks.length}）：
</p>
<div
style={{
maxHeight: '150px',
overflow: 'auto',
background: '#fffbe6',
border: '1px solid #ffe58f',
borderRadius: '8px',
padding: '12px',
}}
>
{importResult.skippedRacks.map((rack, idx) => (
<div key={idx} style={{ fontSize: '13px', marginBottom: '4px' }}>
• {rack.rackId} - {rack.name}
</div>
))}
</div>
</div>
)}
{importResult.errors && importResult.errors.length > 0 && (
<div style={{ marginBottom: '20px' }}>
<p style={{ fontWeight: '600', marginBottom: '8px', color: '#ff4d4f' }}>
错误详情：
</p>
{importResult.errors.slice(0, 5).map((err, idx) => (
<div
key={idx}
style={{
padding: '8px 12px',
background: '#fff2f0',
borderRadius: '6px',
marginBottom: '8px',
fontSize: '13px',
color: '#cf1322',
}}
>
第{err.row || idx + 1}行：{err.error}
</div>
))}
{importResult.errors.length > 5 && (
<p style={{ color: '#8c8c8c', fontSize: '12px' }}>
还有 {importResult.errors.length - 5} 处错误...
</p>
)}
</div>
)}
<Button
type="primary"
onClick={() => {
setImportModalVisible(false);
setImportResult(null);
fetchRacks();
}}
style={primaryButtonStyle}
>
完成
</Button>
</div>
)
)}
</Modal>
<RackImportModal
visible={importModalVisible}
onClose={() => setImportModalVisible(false)}
onImport={handleImport}
onDownloadTemplate={handleDownloadTemplate}
/>
</div>
);
}