perf(frontend): 优化前端性能与代码结构
refactor(components): 使用React.memo和useCallback优化组件渲染 feat(cache): 添加API缓存管理功能 perf(build): 配置Vite构建优化选项 style: 提取工具函数减少重复代码 chore: 添加懒加载和Suspense支持
This commit is contained in:
zhang1106
+904
@@ -840,6 +840,910 @@ SESSION_SECRET=random_session_secret_key_here
|
||||
|
||||
---
|
||||
|
||||
## 更新升级流程
|
||||
|
||||
### 手动更新步骤
|
||||
|
||||
#### 1. 备份当前版本
|
||||
|
||||
```bash
|
||||
# 创建备份目录
|
||||
mkdir -p /var/backups/idc_assest/$(date +%Y%m%d)
|
||||
cd /var/backups/idc_assest/$(date +%Y%m%d)
|
||||
|
||||
# 备份数据库
|
||||
mysqldump -u idc_prod_user -p idc_management > database_backup.sql
|
||||
|
||||
# 备份配置文件
|
||||
cp -r /var/www/idc_assest/backend/.env ./
|
||||
cp -r /var/www/idc_assest/frontend/.env ./
|
||||
|
||||
# 备份上传文件
|
||||
cp -r /var/www/idc_assest/backend/uploads ./
|
||||
```
|
||||
|
||||
#### 2. 下载最新代码
|
||||
|
||||
```bash
|
||||
cd /var/www/idc_assest
|
||||
|
||||
# 拉取最新代码
|
||||
git fetch origin
|
||||
git checkout main
|
||||
git pull origin main
|
||||
```
|
||||
|
||||
#### 3. 更新依赖
|
||||
|
||||
```bash
|
||||
# 更新后端依赖
|
||||
cd backend
|
||||
npm install
|
||||
cd ..
|
||||
|
||||
# 更新前端依赖并构建
|
||||
cd frontend
|
||||
npm install
|
||||
npm run build
|
||||
cd ..
|
||||
```
|
||||
|
||||
#### 4. 重启服务
|
||||
|
||||
```bash
|
||||
# 重启后端
|
||||
pm2 restart idc-backend
|
||||
|
||||
# 重启Nginx
|
||||
sudo systemctl restart nginx
|
||||
|
||||
# 验证服务
|
||||
curl http://localhost:8000/health
|
||||
```
|
||||
|
||||
### Docker环境更新
|
||||
|
||||
```bash
|
||||
cd /var/www/idc_assest/docker
|
||||
|
||||
# 拉取最新代码
|
||||
cd ..
|
||||
git pull origin main
|
||||
cd docker
|
||||
|
||||
# 重新构建并启动
|
||||
docker-compose down
|
||||
docker-compose up -d --build
|
||||
|
||||
# 验证服务
|
||||
curl http://localhost/health
|
||||
```
|
||||
|
||||
### 回滚操作
|
||||
|
||||
```bash
|
||||
# 查看历史版本
|
||||
cd /var/www/idc_assest
|
||||
git log --oneline -10
|
||||
|
||||
# 回滚到指定版本
|
||||
git checkout <commit-hash>
|
||||
|
||||
# 重新构建
|
||||
cd frontend && npm run build && cd ..
|
||||
cd backend && npm install && cd ..
|
||||
|
||||
# 重启服务
|
||||
pm2 restart idc-backend
|
||||
```
|
||||
|
||||
### 版本兼容性检查
|
||||
|
||||
```bash
|
||||
# 检查Node.js版本
|
||||
node --version
|
||||
|
||||
# 检查依赖版本
|
||||
cd backend && npm list | grep -E "(express|sequelize|mysql2)" && cd ..
|
||||
cd frontend && npm list | grep -E "(react|antd|vite)" && cd ..
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 系统架构说明
|
||||
|
||||
### 整体架构图
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 用户访问层 │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ 浏览器 │ │ 移动端 │ │ API客户端 │ │
|
||||
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
|
||||
└─────────┼──────────────────┼──────────────────┼───────────────┘
|
||||
│ │ │
|
||||
└──────────────────┼──────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ Web服务层 │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ Nginx / Apache │ │
|
||||
│ │ • 静态资源服务 • 反向代理 • SSL终端 • 负载均衡 │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
└─────────────────────────┬───────────────────────────────────────┘
|
||||
│
|
||||
┌───────────────┼───────────────┐
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
||||
│ 前端应用 │ │ 后端API │ │ 静态资源 │
|
||||
│ (React) │ │ (Express) │ │ (Nginx) │
|
||||
│ 端口: 3000 │ │ 端口: 8000 │ │ 端口: 80/443 │
|
||||
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 数据存储层 │
|
||||
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
|
||||
│ │ MySQL │ │ SQLite │ │ 文件存储 │ │
|
||||
│ │ 端口: 3306 │ │ 嵌入式 │ │ uploads/ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ • 设备信息 │ │ • 开发环境 │ │ • 设备图片 │ │
|
||||
│ │ • 用户数据 │ │ • 快速部署 │ │ • 附件 │ │
|
||||
│ │ • 工单记录 │ │ │ │ • 备份文件 │ │
|
||||
│ │ • 耗材库存 │ │ │ │ │ │
|
||||
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 技术栈版本
|
||||
|
||||
| 层级 | 技术 | 版本要求 | 用途 |
|
||||
|------|------|----------|------|
|
||||
| 前端 | React | 18.2.0+ | UI框架 |
|
||||
| 前端 | Ant Design | 5.8.6+ | 组件库 |
|
||||
| 前端 | Vite | 4.4.9+ | 构建工具 |
|
||||
| 前端 | Three.js | 0.160.0+ | 3D可视化 |
|
||||
| 后端 | Node.js | 14.0.0+ | 运行时 |
|
||||
| 后端 | Express | 4.18.2+ | Web框架 |
|
||||
| 后端 | Sequelize | 6.32.1+ | ORM框架 |
|
||||
| 数据库 | MySQL | 8.0+ | 主数据库 |
|
||||
| 数据库 | SQLite | 5.1.6+ | 嵌入式数据库 |
|
||||
| 服务器 | Nginx | 1.18+ | 反向代理 |
|
||||
| 进程管理 | PM2 | 5.0+ | 进程管理 |
|
||||
|
||||
### 数据流说明
|
||||
|
||||
1. **用户请求流程**
|
||||
- 用户通过浏览器访问系统
|
||||
- 请求首先到达Nginx
|
||||
- Nginx判断请求类型：
|
||||
- 静态资源：直接返回
|
||||
- API请求：转发到后端服务
|
||||
- 前端路由：返回index.html
|
||||
|
||||
2. **数据处理流程**
|
||||
- 后端接收API请求
|
||||
- 验证用户身份和权限
|
||||
- 通过Sequelize操作数据库
|
||||
- 返回JSON响应
|
||||
|
||||
3. **实时通信**
|
||||
- WebSocket用于实时告警推送
|
||||
- HTTP轮询用于数据刷新
|
||||
|
||||
---
|
||||
|
||||
## 🔍 故障排查指南
|
||||
|
||||
### 常见错误及解决方案
|
||||
|
||||
#### 1. 后端服务无法启动
|
||||
|
||||
**错误信息**：Error: listen EADDRINUSE: address already in use :::8000
|
||||
|
||||
**原因分析**：端口8000已被其他进程占用
|
||||
|
||||
**解决方案**：
|
||||
```bash
|
||||
# 查看占用端口的进程
|
||||
netstat -tulpn | grep :8000
|
||||
lsof -i :8000
|
||||
|
||||
# 终止占用进程
|
||||
kill -9 <PID>
|
||||
|
||||
# 或修改为其他端口
|
||||
PORT=8001 npm run dev
|
||||
```
|
||||
|
||||
#### 2. 数据库连接失败
|
||||
|
||||
**错误信息**：SequelizeConnectionError: Access denied for user
|
||||
|
||||
**原因分析**：数据库用户名或密码错误
|
||||
|
||||
**解决方案**：
|
||||
```bash
|
||||
# 检查.env配置
|
||||
cat backend/.env | grep -E "(MYSQL|USERNAME|PASSWORD)"
|
||||
|
||||
# 测试数据库连接
|
||||
mysql -u idc_user -p -h localhost
|
||||
|
||||
# 检查MySQL服务状态
|
||||
sudo systemctl status mysql
|
||||
sudo systemctl start mysql
|
||||
```
|
||||
|
||||
#### 3. 前端构建失败
|
||||
|
||||
**错误信息**：Error: Cannot find module 'node-sass'
|
||||
|
||||
**原因分析**：依赖安装不完整
|
||||
|
||||
**解决方案**：
|
||||
```bash
|
||||
# 清理并重新安装依赖
|
||||
cd frontend
|
||||
rm -rf node_modules package-lock.json
|
||||
npm install
|
||||
|
||||
# 检查Node.js版本兼容性
|
||||
node --version
|
||||
```
|
||||
|
||||
#### 4. Nginx 502 Bad Gateway
|
||||
|
||||
**原因分析**：后端服务未运行或连接超时
|
||||
|
||||
**解决方案**：
|
||||
```bash
|
||||
# 检查后端服务状态
|
||||
pm2 status
|
||||
|
||||
# 查看后端日志
|
||||
pm2 logs idc-backend
|
||||
|
||||
# 检查Nginx错误日志
|
||||
tail -f /var/log/nginx/idc_assest-error.log
|
||||
|
||||
# 测试后端服务
|
||||
curl http://127.0.0.1:8000/health
|
||||
```
|
||||
|
||||
#### 5. 文件上传失败
|
||||
|
||||
**错误信息**：Error: ENOENT: no such file or directory
|
||||
|
||||
**原因分析**：上传目录不存在或权限不足
|
||||
|
||||
**解决方案**：
|
||||
```bash
|
||||
# 创建上传目录
|
||||
mkdir -p backend/uploads
|
||||
chmod 755 backend/uploads
|
||||
|
||||
# 检查目录权限
|
||||
ls -la backend/ | grep uploads
|
||||
```
|
||||
|
||||
#### 6. CORS跨域错误
|
||||
|
||||
**错误信息**：Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy
|
||||
|
||||
**原因分析**：CORS配置不正确
|
||||
|
||||
**解决方案**：
|
||||
```javascript
|
||||
// 检查backend/server.js中的CORS配置
|
||||
const cors = require('cors');
|
||||
app.use(cors({
|
||||
origin: 'http://your-domain.com',
|
||||
credentials: true
|
||||
}));
|
||||
```
|
||||
|
||||
### 诊断命令速查表
|
||||
|
||||
```bash
|
||||
# 检查端口占用
|
||||
netstat -tulpn | grep -E "(80|443|8000|3306)"
|
||||
|
||||
# 检查进程状态
|
||||
ps aux | grep -E "(node|nginx|mysql)"
|
||||
|
||||
# 检查磁盘空间
|
||||
df -h
|
||||
|
||||
# 检查内存使用
|
||||
free -m
|
||||
|
||||
# 检查系统负载
|
||||
top -bn1 | head -5
|
||||
|
||||
# 网络连通性测试
|
||||
curl -I http://localhost:8000/health
|
||||
curl -I http://localhost/api/devices
|
||||
|
||||
# 查看系统日志
|
||||
tail -f /var/log/syslog
|
||||
journalctl -xe
|
||||
|
||||
# Docker诊断（Docker部署）
|
||||
docker-compose ps
|
||||
docker-compose logs --tail=100
|
||||
docker stats
|
||||
```
|
||||
|
||||
### 日志文件位置
|
||||
|
||||
| 服务 | 日志位置 |
|
||||
|------|----------|
|
||||
| 后端（PM2） | `pm2 logs idc-backend` |
|
||||
| 后端（文件） | `/var/log/idc_assest/backend/` |
|
||||
| Nginx | `/var/log/nginx/idc_assest-access.log` |
|
||||
| Nginx | `/var/log/nginx/idc_assest-error.log` |
|
||||
| MySQL | `/var/log/mysql/error.log` |
|
||||
| Docker | `docker-compose logs` |
|
||||
|
||||
---
|
||||
|
||||
## ⚡ 性能优化
|
||||
|
||||
### 后端性能优化
|
||||
|
||||
#### 1. PM2集群模式
|
||||
|
||||
```javascript
|
||||
// ecosystem.config.js
|
||||
module.exports = {
|
||||
apps: [{
|
||||
name: 'idc-backend',
|
||||
script: 'server.js',
|
||||
instances: 'max', // 使用所有CPU核心
|
||||
exec_mode: 'cluster', // 集群模式
|
||||
env: {
|
||||
NODE_ENV: 'production',
|
||||
PORT: 8000
|
||||
},
|
||||
max_memory_restart: '1G', // 内存超过1G自动重启
|
||||
node_args: '--max-old-space-size=1024',
|
||||
listen_timeout: 3000, // 监听超时
|
||||
kill_timeout: 5000, // 终止超时
|
||||
max_restarts: 10, // 最大重启次数
|
||||
min_uptime: '10s' // 最小运行时间
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
#### 2. 数据库连接池优化
|
||||
|
||||
```javascript
|
||||
// backend/db.js
|
||||
const sequelize = new Sequelize({
|
||||
dialect: 'mysql',
|
||||
host: process.env.MYSQL_HOST,
|
||||
port: process.env.MYSQL_PORT,
|
||||
username: process.env.MYSQL_USERNAME,
|
||||
password: process.env.MYSQL_PASSWORD,
|
||||
database: process.env.MYSQL_DATABASE,
|
||||
pool: {
|
||||
max: 20, // 最大连接数
|
||||
min: 5, // 最小连接数
|
||||
acquire: 60000, // 获取连接最大等待时间
|
||||
idle: 10000 // 连接空闲最大时间
|
||||
},
|
||||
logging: false, // 关闭SQL日志
|
||||
dialectOptions: {
|
||||
charset: 'utf8mb4'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 3. 缓存策略
|
||||
|
||||
```javascript
|
||||
// 使用内存缓存热点数据
|
||||
const cache = new Map();
|
||||
|
||||
// 设备统计缓存（5分钟过期）
|
||||
function getDeviceStats() {
|
||||
const cacheKey = 'device_stats';
|
||||
const cached = cache.get(cacheKey);
|
||||
|
||||
if (cached && Date.now() - cached.time < 5 * 60 * 1000) {
|
||||
return cached.data;
|
||||
}
|
||||
|
||||
const stats = calculateDeviceStats();
|
||||
cache.set(cacheKey, { data: stats, time: Date.now() });
|
||||
return stats;
|
||||
}
|
||||
```
|
||||
|
||||
### 数据库性能优化
|
||||
|
||||
#### 1. 创建索引
|
||||
|
||||
```sql
|
||||
-- 设备表索引
|
||||
CREATE INDEX idx_device_rack ON devices(rackId);
|
||||
CREATE INDEX idx_device_type ON devices(deviceType);
|
||||
CREATE INDEX idx_device_status ON devices(status);
|
||||
CREATE INDEX idx_device_created ON devices(createdAt);
|
||||
|
||||
-- 工单表索引
|
||||
CREATE INDEX idx_ticket_status ON tickets(status);
|
||||
CREATE INDEX idx_ticket_priority ON tickets(priority);
|
||||
CREATE INDEX idx_ticket_device ON tickets(deviceId);
|
||||
CREATE INDEX idx_ticket_created ON tickets(createdAt);
|
||||
|
||||
-- 耗材表索引
|
||||
CREATE INDEX idx_consumable_category ON consumables(category);
|
||||
CREATE INDEX idx_consumable_status ON consumables(status);
|
||||
```
|
||||
|
||||
#### 2. MySQL配置优化
|
||||
|
||||
```ini
|
||||
# /etc/mysql/mysql.conf.d/mysqld.cnf
|
||||
|
||||
[mysqld]
|
||||
# 缓冲池大小（建议为物理内存的70%）
|
||||
innodb_buffer_pool_size = 2G
|
||||
|
||||
# 日志文件大小
|
||||
innodb_log_file_size = 512M
|
||||
|
||||
# 刷新策略
|
||||
innodb_flush_log_at_trx_commit = 2
|
||||
innodb_flush_method = O_DIRECT
|
||||
|
||||
# 连接数
|
||||
max_connections = 200
|
||||
|
||||
# 查询缓存（MySQL 8.0已移除）
|
||||
# query_cache_type = 0
|
||||
```
|
||||
|
||||
### 前端性能优化
|
||||
|
||||
#### 1. 构建优化
|
||||
|
||||
```javascript
|
||||
// vite.config.js
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
// 开启压缩
|
||||
minify: 'terser',
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
},
|
||||
// 代码分割
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'antd': ['antd', '@ant-design/icons'],
|
||||
'charts': ['recharts'],
|
||||
'three': ['three']
|
||||
}
|
||||
}
|
||||
},
|
||||
// 资源优化
|
||||
assetsDir: 'assets',
|
||||
chunkSizeWarningLimit: 1000
|
||||
},
|
||||
// 依赖预构建
|
||||
optimizeDeps: {
|
||||
include: ['antd', 'axios', 'react-router-dom']
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 2. 路由懒加载
|
||||
|
||||
```javascript
|
||||
// App.jsx
|
||||
import { lazy, Suspense } from 'react';
|
||||
|
||||
const Dashboard = lazy(() => import('./pages/Dashboard'));
|
||||
const DeviceManagement = lazy(() => import('./pages/DeviceManagement'));
|
||||
|
||||
// 使用
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
```
|
||||
|
||||
### Nginx性能优化
|
||||
|
||||
```nginx
|
||||
# /etc/nginx/nginx.conf
|
||||
|
||||
worker_processes auto;
|
||||
worker_rlimit_nofile 65535;
|
||||
|
||||
events {
|
||||
worker_connections 2048;
|
||||
use epoll;
|
||||
multi_accept on;
|
||||
}
|
||||
|
||||
http {
|
||||
# 打开文件缓存
|
||||
open_file_cache max=10000 inactive=20s;
|
||||
open_file_cache_valid 30s;
|
||||
open_file_cache_min_uses 2;
|
||||
|
||||
# Gzip压缩
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_min_length 1024;
|
||||
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
|
||||
|
||||
# 缓冲区优化
|
||||
client_body_buffer_size 16K;
|
||||
client_max_body_size 100M;
|
||||
proxy_buffer_size 128K;
|
||||
proxy_buffers 4 256K;
|
||||
proxy_busy_buffers_size 256K;
|
||||
|
||||
# 连接超时
|
||||
keepalive_timeout 65;
|
||||
keepalive_requests 100;
|
||||
|
||||
# 上游服务器配置
|
||||
upstream backend {
|
||||
server 127.0.0.1:8000;
|
||||
keepalive 32;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 日志管理
|
||||
|
||||
### 日志配置
|
||||
|
||||
```javascript
|
||||
// backend/logger.js
|
||||
const winston = require('winston');
|
||||
const path = require('path');
|
||||
|
||||
const logDir = process.env.LOG_DIR || './logs';
|
||||
|
||||
const logger = winston.createLogger({
|
||||
level: process.env.LOG_LEVEL || 'info',
|
||||
format: winston.format.combine(
|
||||
winston.format.timestamp({
|
||||
format: 'YYYY-MM-DD HH:mm:ss'
|
||||
}),
|
||||
winston.format.errors({ stack: true }),
|
||||
winston.format.json()
|
||||
),
|
||||
defaultMeta: { service: 'idc-backend' },
|
||||
transports: [
|
||||
// 错误日志
|
||||
new winston.transports.File({
|
||||
filename: path.join(logDir, 'error.log'),
|
||||
level: 'error',
|
||||
maxsize: 10485760, // 10MB
|
||||
maxFiles: 10
|
||||
}),
|
||||
// 组合日志
|
||||
new winston.transports.File({
|
||||
filename: path.join(logDir, 'combined.log'),
|
||||
maxsize: 10485760,
|
||||
maxFiles: 10
|
||||
}),
|
||||
// 控制台输出
|
||||
new winston.transports.Console({
|
||||
format: winston.format.combine(
|
||||
winston.format.colorize(),
|
||||
winston.format.simple()
|
||||
)
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
module.exports = logger;
|
||||
```
|
||||
|
||||
### 日志轮转配置
|
||||
|
||||
#### 1. 使用logrotate（Linux）
|
||||
|
||||
```bash
|
||||
# /etc/logrotate.d/idc_assest
|
||||
/var/log/idc_assest/*.log {
|
||||
daily
|
||||
missingok
|
||||
rotate 14
|
||||
compress
|
||||
delaycompress
|
||||
notifempty
|
||||
create 0640 www-data www-data
|
||||
sharedscripts
|
||||
postrotate
|
||||
pm2 restart idc-backend > /dev/null 2>&1 || true
|
||||
endscript
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. 使用PM2日志轮转
|
||||
|
||||
```bash
|
||||
# 安装pm2-logrotate
|
||||
pm2 install pm2-logrotate
|
||||
|
||||
# 配置
|
||||
pm2 set pm2-logrotate:max_size 50M # 单个文件最大50MB
|
||||
pm2 set pm2-logrotate:retain 30 # 保留30个文件
|
||||
pm2 set pm2-logrotate:compress true # 压缩历史文件
|
||||
pm2 set pm2-logrotate:dateFormat YYYY-MM-DD_HH-mm-ss
|
||||
```
|
||||
|
||||
### 日志分析示例
|
||||
|
||||
```bash
|
||||
# 查看错误日志
|
||||
tail -f /var/log/idc_assest/error.log
|
||||
|
||||
# 统计API响应时间
|
||||
grep -o '"duration":[0-9]*' /var/log/idc_assest/combined.log | \
|
||||
awk -F: '{sum+=$2; count++} END {print "平均响应时间:", sum/count, "ms"}'
|
||||
|
||||
# 统计用户登录情况
|
||||
grep "登录成功" /var/log/idc_assest/combined.log | \
|
||||
awk '{print $4}' | sort | uniq -c | sort -rn
|
||||
|
||||
# 查找异常请求
|
||||
grep -E "(ERROR|500|401)" /var/log/idc_assest/error.log
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💾 备份与灾难恢复
|
||||
|
||||
### 备份策略
|
||||
|
||||
| 备份类型 | 频率 | 保留时间 | 说明 |
|
||||
|----------|------|----------|------|
|
||||
| 全量备份 | 每周日凌晨3点 | 4周 | 完整数据库备份 |
|
||||
| 增量备份 | 每天凌晨2点 | 7天 | 每日变更数据 |
|
||||
| 实时备份 | 持续 | 永久 | 二进制日志 |
|
||||
| 配置备份 | 每次变更 | 12个月 | 配置文件和代码 |
|
||||
|
||||
### 自动化备份脚本
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# backup_full.sh - 完整备份脚本
|
||||
|
||||
set -e
|
||||
|
||||
# 配置
|
||||
BACKUP_DIR="/var/backups/idc_assest"
|
||||
DATE=$(date +%Y%m%d_%H%M%S)
|
||||
BACKUP_FILE="$BACKUP_DIR/full_backup_$DATE"
|
||||
KEEP_DAYS=30
|
||||
|
||||
# 创建备份目录
|
||||
mkdir -p "$BACKUP_DIR"
|
||||
|
||||
# 1. 备份数据库
|
||||
echo "正在备份数据库..."
|
||||
mysqldump -u idc_prod_user -p"$MYSQL_PASSWORD" \
|
||||
--single-transaction \
|
||||
--routines \
|
||||
--triggers \
|
||||
--events \
|
||||
idc_management | gzip > "$BACKUP_FILE.sql.gz"
|
||||
|
||||
# 2. 备份配置文件
|
||||
echo "正在备份配置文件..."
|
||||
tar czf "$BACKUP_DIR/config_$DATE.tar.gz" \
|
||||
backend/.env \
|
||||
nginx/conf.d/
|
||||
|
||||
# 3. 备份上传文件
|
||||
echo "正在备份上传文件..."
|
||||
tar czf "$BACKUP_DIR/uploads_$DATE.tar.gz" \
|
||||
backend/uploads/
|
||||
|
||||
# 4. 备份代码（排除node_modules）
|
||||
echo "正在备份代码..."
|
||||
tar czf "$BACKUP_DIR/code_$DATE.tar.gz" \
|
||||
--exclude=node_modules \
|
||||
--exclude=dist \
|
||||
--exclude=uploads \
|
||||
.
|
||||
|
||||
# 5. 清理旧备份
|
||||
echo "正在清理旧备份..."
|
||||
find "$BACKUP_DIR" -name "full_backup_*.sql.gz" -mtime +$KEEP_DAYS -delete
|
||||
find "$BACKUP_DIR" -name "*.tar.gz" -mtime +$KEEP_DAYS -delete
|
||||
|
||||
# 6. 验证备份
|
||||
echo "正在验证备份..."
|
||||
if [ -f "$BACKUP_FILE.sql.gz" ]; then
|
||||
gunzip -t "$BACKUP_FILE.sql.gz" && echo "数据库备份验证成功"
|
||||
fi
|
||||
|
||||
# 7. 生成备份清单
|
||||
echo "备份完成，文件列表："
|
||||
ls -lh "$BACKUP_DIR"/*"$DATE"*
|
||||
|
||||
# 8. 发送通知（可选）
|
||||
# curl -X POST "https://hooks.example.com/notify" -d "backup completed"
|
||||
|
||||
echo "备份任务完成：$DATE"
|
||||
```
|
||||
|
||||
### 定时任务配置
|
||||
|
||||
```bash
|
||||
# crontab配置
|
||||
crontab -e
|
||||
|
||||
# 每日增量备份（凌晨2点）
|
||||
0 2 * * * /var/www/idc_assest/scripts/backup_incremental.sh
|
||||
|
||||
# 每周完整备份（周日凌晨3点）
|
||||
0 3 * * 0 /var/www/idc_assest/scripts/backup_full.sh
|
||||
|
||||
# 每月清理旧备份（每月1日凌晨4点）
|
||||
0 4 1 * * /var/www/idc_assest/scripts/cleanup_old_backups.sh
|
||||
```
|
||||
|
||||
### 灾难恢复流程
|
||||
|
||||
#### 1. 数据恢复步骤
|
||||
|
||||
```bash
|
||||
# 1. 停止服务
|
||||
pm2 stop idc-backend
|
||||
|
||||
# 2. 恢复数据库
|
||||
gunzip -c /var/backups/idc_assest/full_backup_20240101_030000.sql.gz | \
|
||||
mysql -u idc_prod_user -p idc_management
|
||||
|
||||
# 3. 恢复配置文件
|
||||
tar xzf /var/backups/idc_assest/config_20240101.tar.gz -C /
|
||||
|
||||
# 4. 恢复上传文件
|
||||
tar xzf /var/backups/idc_assest/uploads_20240101.tar.gz -C /
|
||||
|
||||
# 5. 重启服务
|
||||
pm2 restart idc-backend
|
||||
|
||||
# 6. 验证恢复
|
||||
curl http://localhost:8000/health
|
||||
```
|
||||
|
||||
#### 2. 完整系统恢复
|
||||
|
||||
```bash
|
||||
# 1. 创建新服务器
|
||||
# 2. 安装必要软件
|
||||
# 3. 从Git克隆代码
|
||||
# 4. 恢复配置文件
|
||||
# 5. 恢复数据库
|
||||
# 6. 恢复上传文件
|
||||
# 7. 重新安装依赖
|
||||
# 8. 重启服务
|
||||
```
|
||||
|
||||
### 备份验证
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# verify_backup.sh - 备份验证脚本
|
||||
|
||||
BACKUP_FILE="$1"
|
||||
|
||||
if [ -z "$BACKUP_FILE" ]; then
|
||||
echo "用法: $0 <备份文件>"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "正在验证备份文件：$BACKUP_FILE"
|
||||
|
||||
# 检查文件存在
|
||||
if [ ! -f "$BACKUP_FILE" ]; then
|
||||
echo "错误：文件不存在"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 检查文件大小（至少1KB）
|
||||
FILE_SIZE=$(stat -f%z "$BACKUP_FILE" 2>/dev/null || stat -c%s "$BACKUP_FILE")
|
||||
if [ "$FILE_SIZE" -lt 1024 ]; then
|
||||
echo "警告：文件大小异常小"
|
||||
fi
|
||||
|
||||
# 对于SQL备份，验证SQL语法
|
||||
if [[ "$BACKUP_FILE" == *.sql.gz ]]; then
|
||||
echo "验证SQL语法..."
|
||||
gunzip -c "$BACKUP_FILE" | head -100 | grep -q "INSERT INTO\|CREATE TABLE"
|
||||
if [ $? -eq 0 ]; then
|
||||
echo "✓ SQL语法验证通过"
|
||||
else
|
||||
echo "✗ SQL语法验证失败"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
# 对于压缩包，验证完整性
|
||||
if [[ "$BACKUP_FILE" == *.tar.gz ]]; then
|
||||
echo "验证压缩包完整性..."
|
||||
tar -tzf "$BACKUP_FILE" > /dev/null 2>&1
|
||||
if [ $? -eq 0 ]; then
|
||||
echo "✓ 压缩包验证通过"
|
||||
else
|
||||
echo "✗ 压缩包验证失败"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
echo "备份验证完成"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔐 安全加固清单
|
||||
|
||||
### 服务器安全
|
||||
|
||||
- [ ] 配置防火墙规则（仅开放必要端口）
|
||||
- [ ] 启用SSH密钥认证，禁用密码登录
|
||||
- [ ] 安装配置fail2ban防止暴力破解
|
||||
- [ ] 定期更新系统安全补丁
|
||||
- [ ] 配置自动安全更新
|
||||
- [ ] 启用系统审计日志
|
||||
- [ ] 限制root用户登录
|
||||
|
||||
### 数据库安全
|
||||
|
||||
- [ ] 使用强密码策略
|
||||
- [ ] 创建专用数据库用户，禁用root远程登录
|
||||
- [ ] 定期备份数据库
|
||||
- [ ] 启用数据库审计日志
|
||||
- [ ] 限制数据库用户权限（最小权限原则）
|
||||
- [ ] 加密数据库连接（SSL/TLS）
|
||||
|
||||
### 应用安全
|
||||
|
||||
- [ ] 配置HTTPS强制跳转
|
||||
- [ ] 设置安全的Cookie属性（HttpOnly, Secure）
|
||||
- [ ] 启用CSRF防护
|
||||
- [ ] 实现请求速率限制
|
||||
- [ ] 配置安全的HTTP头
|
||||
- [ ] 敏感信息加密存储
|
||||
- [ ] 实现完善的权限控制
|
||||
|
||||
### 监控与告警
|
||||
|
||||
- [ ] 配置异常登录告警
|
||||
- [ ] 启用API访问日志
|
||||
- [ ] 监控服务状态和资源使用
|
||||
- [ ] 配置磁盘空间告警
|
||||
- [ ] 设置数据库连接数告警
|
||||
- [ ] 实现自动化健康检查
|
||||
|
||||
---
|
||||
|
||||
**🎉 部署完成后，您就可以开始使用IDC设备管理系统了！**
|
||||
|
||||
---
|
||||
|
||||
+72
-69
@@ -1,27 +1,28 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, Suspense, lazy } from 'react';
|
||||
import { Layout, Menu, theme, Button, Dropdown, Avatar, message, Space, Divider } from 'antd';
|
||||
import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined, BuildOutlined, HomeOutlined, ShoppingCartOutlined, InboxOutlined, ImportOutlined, FileTextOutlined, UserOutlined, LogoutOutlined, UserOutlined as UserIcon, HistoryOutlined, AuditOutlined, ToolOutlined, ScheduleOutlined } from '@ant-design/icons';
|
||||
import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined, BuildOutlined, HomeOutlined, ShoppingCartOutlined, InboxOutlined, ImportOutlined, FileTextOutlined, UserOutlined, LogoutOutlined, HistoryOutlined, AuditOutlined, ToolOutlined, ScheduleOutlined } from '@ant-design/icons';
|
||||
import { BrowserRouter as Router, Routes, Route, Link, Navigate, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from './context/AuthContext';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import DeviceManagement from './pages/DeviceManagement';
|
||||
import RackManagement from './pages/RackManagement';
|
||||
import RoomManagement from './pages/RoomManagement';
|
||||
import DeviceFieldManagement from './pages/DeviceFieldManagement';
|
||||
import RackVisualization from './pages/RackVisualization';
|
||||
import ConsumableManagement from './pages/ConsumableManagement';
|
||||
import ConsumableStatistics from './pages/ConsumableStatistics';
|
||||
import ConsumableLogs from './pages/ConsumableLogs';
|
||||
import CategoryManagement from './pages/CategoryManagement';
|
||||
import UserManagement from './pages/UserManagement';
|
||||
import LoginHistory from './pages/LoginHistory';
|
||||
import OperationLogs from './pages/OperationLogs';
|
||||
import Login from './pages/Login';
|
||||
import TicketManagement from './pages/TicketManagement';
|
||||
import TicketCategoryManagement from './pages/TicketCategoryManagement';
|
||||
import TicketStatistics from './pages/TicketStatistics';
|
||||
import { Spin } from 'antd';
|
||||
|
||||
const Dashboard = lazy(() => import('./pages/Dashboard'));
|
||||
const DeviceManagement = lazy(() => import('./pages/DeviceManagement'));
|
||||
const RackManagement = lazy(() => import('./pages/RackManagement'));
|
||||
const RoomManagement = lazy(() => import('./pages/RoomManagement'));
|
||||
const DeviceFieldManagement = lazy(() => import('./pages/DeviceFieldManagement'));
|
||||
const RackVisualization = lazy(() => import('./pages/RackVisualization'));
|
||||
const ConsumableManagement = lazy(() => import('./pages/ConsumableManagement'));
|
||||
const ConsumableStatistics = lazy(() => import('./pages/ConsumableStatistics'));
|
||||
const ConsumableLogs = lazy(() => import('./pages/ConsumableLogs'));
|
||||
const CategoryManagement = lazy(() => import('./pages/CategoryManagement'));
|
||||
const UserManagement = lazy(() => import('./pages/UserManagement'));
|
||||
const LoginHistory = lazy(() => import('./pages/LoginHistory'));
|
||||
const OperationLogs = lazy(() => import('./pages/OperationLogs'));
|
||||
const Login = lazy(() => import('./pages/Login'));
|
||||
const TicketManagement = lazy(() => import('./pages/TicketManagement'));
|
||||
const TicketCategoryManagement = lazy(() => import('./pages/TicketCategoryManagement'));
|
||||
const TicketStatistics = lazy(() => import('./pages/TicketStatistics'));
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
const PrivateRoute = ({ children }) => {
|
||||
@@ -46,7 +47,25 @@ const PrivateRoute = ({ children }) => {
|
||||
return <Navigate to="/login" state={{ from: location }} replace />;
|
||||
}
|
||||
|
||||
return children;
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
background: '#f5f5f5'
|
||||
}}>
|
||||
<Spin size="large" tip="正在加载页面..." />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<AppLayout>
|
||||
{children}
|
||||
</AppLayout>
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
const AppLayout = ({ children }) => {
|
||||
@@ -285,14 +304,28 @@ function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/login" element={
|
||||
<Suspense
|
||||
fallback={
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
background: '#f5f5f5'
|
||||
}}>
|
||||
<Spin size="large" tip="正在加载登录页面..." />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Login />
|
||||
</Suspense>
|
||||
} />
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<Dashboard />
|
||||
</AppLayout>
|
||||
<Dashboard />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -300,9 +333,7 @@ function App() {
|
||||
path="/devices"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<DeviceManagement />
|
||||
</AppLayout>
|
||||
<DeviceManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -310,9 +341,7 @@ function App() {
|
||||
path="/racks"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<RackManagement />
|
||||
</AppLayout>
|
||||
<RackManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -320,9 +349,7 @@ function App() {
|
||||
path="/rooms"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<RoomManagement />
|
||||
</AppLayout>
|
||||
<RoomManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -330,9 +357,7 @@ function App() {
|
||||
path="/fields"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<DeviceFieldManagement />
|
||||
</AppLayout>
|
||||
<DeviceFieldManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -340,9 +365,7 @@ function App() {
|
||||
path="/visualization"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<RackVisualization />
|
||||
</AppLayout>
|
||||
<RackVisualization />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -350,9 +373,7 @@ function App() {
|
||||
path="/consumables"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<ConsumableManagement />
|
||||
</AppLayout>
|
||||
<ConsumableManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -360,9 +381,7 @@ function App() {
|
||||
path="/consumables-categories"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<CategoryManagement />
|
||||
</AppLayout>
|
||||
<CategoryManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -370,9 +389,7 @@ function App() {
|
||||
path="/consumables-stats"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<ConsumableStatistics />
|
||||
</AppLayout>
|
||||
<ConsumableStatistics />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -380,9 +397,7 @@ function App() {
|
||||
path="/consumables-logs"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<ConsumableLogs />
|
||||
</AppLayout>
|
||||
<ConsumableLogs />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -390,9 +405,7 @@ function App() {
|
||||
path="/users"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<UserManagement />
|
||||
</AppLayout>
|
||||
<UserManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -400,9 +413,7 @@ function App() {
|
||||
path="/login-history"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<LoginHistory />
|
||||
</AppLayout>
|
||||
<LoginHistory />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -410,9 +421,7 @@ function App() {
|
||||
path="/operation-logs"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<OperationLogs />
|
||||
</AppLayout>
|
||||
<OperationLogs />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -420,9 +429,7 @@ function App() {
|
||||
path="/tickets"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<TicketManagement />
|
||||
</AppLayout>
|
||||
<TicketManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -430,9 +437,7 @@ function App() {
|
||||
path="/ticket-categories"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<TicketCategoryManagement />
|
||||
</AppLayout>
|
||||
<TicketCategoryManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
@@ -440,9 +445,7 @@ function App() {
|
||||
path="/ticket-statistics"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<TicketStatistics />
|
||||
</AppLayout>
|
||||
<TicketStatistics />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,286 @@
|
||||
const cacheManager = (() => {
|
||||
const cache = new Map();
|
||||
const cacheTimestamps = new Map();
|
||||
const defaultTTL = 5 * 60 * 1000;
|
||||
const config = new Map();
|
||||
|
||||
const generateKey = (method, url, params) => {
|
||||
const paramsStr = params ? JSON.stringify(params, Object.keys(params).sort()) : '';
|
||||
return `${method}:${url}:${paramsStr}`;
|
||||
};
|
||||
|
||||
const isExpired = (key) => {
|
||||
const timestamp = cacheTimestamps.get(key);
|
||||
if (!timestamp) return true;
|
||||
const ttl = config.get(key)?.ttl || defaultTTL;
|
||||
return Date.now() - timestamp > ttl;
|
||||
};
|
||||
|
||||
const get = (method, url, params) => {
|
||||
const key = generateKey(method, url, params);
|
||||
if (isExpired(key)) {
|
||||
cache.delete(key);
|
||||
cacheTimestamps.delete(key);
|
||||
return null;
|
||||
}
|
||||
return cache.get(key);
|
||||
};
|
||||
|
||||
const set = (method, url, params, data, ttl) => {
|
||||
const key = generateKey(method, url, params);
|
||||
cache.set(key, data);
|
||||
cacheTimestamps.set(key, Date.now());
|
||||
config.set(key, { ttl });
|
||||
return key;
|
||||
};
|
||||
|
||||
const invalidate = (url) => {
|
||||
const keysToDelete = [];
|
||||
cache.forEach((_, key) => {
|
||||
if (key.includes(url)) {
|
||||
keysToDelete.push(key);
|
||||
}
|
||||
});
|
||||
keysToDelete.forEach(key => {
|
||||
cache.delete(key);
|
||||
cacheTimestamps.delete(key);
|
||||
config.delete(key);
|
||||
});
|
||||
return keysToDelete.length;
|
||||
};
|
||||
|
||||
const invalidatePattern = (pattern) => {
|
||||
const regex = new RegExp(pattern);
|
||||
const keysToDelete = [];
|
||||
cache.forEach((_, key) => {
|
||||
if (regex.test(key)) {
|
||||
keysToDelete.push(key);
|
||||
}
|
||||
});
|
||||
keysToDelete.forEach(key => {
|
||||
cache.delete(key);
|
||||
cacheTimestamps.delete(key);
|
||||
config.delete(key);
|
||||
});
|
||||
return keysToDelete.length;
|
||||
};
|
||||
|
||||
const clear = () => {
|
||||
cache.clear();
|
||||
cacheTimestamps.clear();
|
||||
config.clear();
|
||||
};
|
||||
|
||||
const setTTL = (url, ttl) => {
|
||||
config.set(url, { ttl });
|
||||
};
|
||||
|
||||
const getStats = () => {
|
||||
return {
|
||||
size: cache.size,
|
||||
keys: Array.from(cache.keys())
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
get,
|
||||
set,
|
||||
invalidate,
|
||||
invalidatePattern,
|
||||
clear,
|
||||
setTTL,
|
||||
getStats,
|
||||
defaultTTL
|
||||
};
|
||||
})();
|
||||
|
||||
const cacheInterceptor = (api) => {
|
||||
const requestCache = new Set();
|
||||
const pendingRequests = new Map();
|
||||
|
||||
api.interceptors.request.use(
|
||||
(config) => {
|
||||
if (config.method?.toLowerCase() === 'get') {
|
||||
const cacheKey = cacheManager.generateKey(
|
||||
config.method,
|
||||
config.url,
|
||||
config.params
|
||||
);
|
||||
|
||||
if (requestCache.has(cacheKey)) {
|
||||
config.adapter = () => {
|
||||
const cachedData = cacheManager.get(
|
||||
config.method,
|
||||
config.url,
|
||||
config.params
|
||||
);
|
||||
if (cachedData) {
|
||||
return Promise.resolve({
|
||||
data: cachedData,
|
||||
status: 200,
|
||||
statusText: 'OK',
|
||||
headers: {},
|
||||
config
|
||||
});
|
||||
}
|
||||
requestCache.delete(cacheKey);
|
||||
return api.request(config);
|
||||
};
|
||||
}
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => Promise.reject(error)
|
||||
);
|
||||
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
if (response.config.method?.toLowerCase() === 'get') {
|
||||
const cacheKey = cacheManager.generateKey(
|
||||
response.config.method,
|
||||
response.config.url,
|
||||
response.config.params
|
||||
);
|
||||
cacheManager.set(
|
||||
response.config.method,
|
||||
response.config.url,
|
||||
response.config.params,
|
||||
response.data
|
||||
);
|
||||
requestCache.add(cacheKey);
|
||||
}
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
if (error.config) {
|
||||
const cacheKey = cacheManager.generateKey(
|
||||
error.config.method,
|
||||
error.config.url,
|
||||
error.config.params
|
||||
);
|
||||
requestCache.delete(cacheKey);
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const cachedAPI = {
|
||||
get: async (url, params = {}, ttl) => {
|
||||
const method = 'get';
|
||||
const cached = cacheManager.get(method, url, params);
|
||||
if (cached) {
|
||||
return cached;
|
||||
}
|
||||
return api.get(url, { params }).then(data => {
|
||||
cacheManager.set(method, url, params, data, ttl);
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
post: (url, data) => api.post(url, data).then(data => {
|
||||
cacheManager.invalidate(url);
|
||||
return data;
|
||||
}),
|
||||
|
||||
put: (url, data) => api.put(url, data).then(data => {
|
||||
cacheManager.invalidate(url);
|
||||
return data;
|
||||
}),
|
||||
|
||||
delete: (url) => api.delete(url).then(data => {
|
||||
cacheManager.invalidate(url);
|
||||
return data;
|
||||
}),
|
||||
|
||||
invalidate: (url) => cacheManager.invalidate(url),
|
||||
|
||||
invalidatePattern: (pattern) => cacheManager.invalidatePattern(pattern),
|
||||
|
||||
clearCache: () => cacheManager.clear(),
|
||||
|
||||
setCacheTTL: (url, ttl) => cacheManager.setTTL(url, ttl),
|
||||
|
||||
getCacheStats: () => cacheManager.getStats()
|
||||
};
|
||||
|
||||
export const deviceAPI = {
|
||||
list: (params) => cachedAPI.get('/devices', params),
|
||||
get: (deviceId) => cachedAPI.get(`/devices/${deviceId}`),
|
||||
create: (data) => cachedAPI.post('/devices', data),
|
||||
update: (deviceId, data) => cachedAPI.put(`/api/devices/${deviceId}`, data),
|
||||
delete: (deviceId) => cachedAPI.delete(`/api/devices/${deviceId}`),
|
||||
batchOffline: (data) => cachedAPI.post('/devices/batch-offline', data),
|
||||
batchDelete: (data) => cachedAPI.delete('/devices/batch-delete', { data }),
|
||||
export: (params) => api.get('/devices/export', { params, responseType: 'blob' }),
|
||||
import: (formData) => api.post('/devices/import', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
};
|
||||
|
||||
export const rackAPI = {
|
||||
list: (params) => cachedAPI.get('/racks', params),
|
||||
get: (rackId) => cachedAPI.get(`/racks/${rackId}`),
|
||||
create: (data) => cachedAPI.post('/racks', data),
|
||||
update: (rackId, data) => cachedAPI.put(`/racks/${rackId}`, data),
|
||||
delete: (rackId) => cachedAPI.delete(`/racks/${rackId}`),
|
||||
import: (formData) => api.post('/racks/import', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
};
|
||||
|
||||
export const roomAPI = {
|
||||
list: (params) => cachedAPI.get('/rooms', params),
|
||||
get: (roomId) => cachedAPI.get(`/rooms/${roomId}`),
|
||||
create: (data) => cachedAPI.post('/rooms', data),
|
||||
update: (roomId, data) => cachedAPI.put(`/rooms/${roomId}`, data),
|
||||
delete: (roomId) => cachedAPI.delete(`/rooms/${roomId}`)
|
||||
};
|
||||
|
||||
export const deviceFieldAPI = {
|
||||
list: () => cachedAPI.get('/deviceFields'),
|
||||
get: (fieldId) => cachedAPI.get(`/deviceFields/${fieldId}`),
|
||||
create: (data) => cachedAPI.post('/deviceFields', data),
|
||||
update: (fieldId, data) => cachedAPI.put(`/deviceFields/${fieldId}`, data),
|
||||
delete: (fieldId) => cachedAPI.delete(`/deviceFields/${fieldId}`),
|
||||
updateConfig: (data) => cachedAPI.post('/deviceFields/config', data)
|
||||
};
|
||||
|
||||
export const consumableAPI = {
|
||||
list: (params) => cachedAPI.get('/consumables', params),
|
||||
get: (consumableId) => cachedAPI.get(`/consumables/${consumableId}`),
|
||||
create: (data) => cachedAPI.post('/consumables', data),
|
||||
update: (consumableId, data) => cachedAPI.put(`/consumables/${consumableId}`, data),
|
||||
delete: (consumableId) => cachedAPI.delete(`/consumables/${consumableId}`),
|
||||
import: (data) => cachedAPI.post('/consumables/import', data),
|
||||
quickInOut: (data) => cachedAPI.post('/consumables/quick-inout', data),
|
||||
getStatistics: () => cachedAPI.get('/consumables/statistics/summary'),
|
||||
getLowStock: () => cachedAPI.get('/consumables/low-stock')
|
||||
};
|
||||
|
||||
export const consumableCategoryAPI = {
|
||||
list: (params) => cachedAPI.get('/consumable-categories', params),
|
||||
getList: (params) => cachedAPI.get('/consumable-categories/list', params),
|
||||
create: (data) => cachedAPI.post('/consumable-categories', data),
|
||||
update: (id, data) => cachedAPI.put(`/consumable-categories/${id}`, data),
|
||||
delete: (id) => cachedAPI.delete(`/consumable-categories/${id}`)
|
||||
};
|
||||
|
||||
export const consumableLogAPI = {
|
||||
list: (params) => cachedAPI.get('/consumables/logs', params),
|
||||
create: (data) => cachedAPI.post('/consumables/logs', data),
|
||||
export: (params) => api.get('/consumables/logs/export', { params, responseType: 'blob' }),
|
||||
import: (data) => cachedAPI.post('/consumables/logs/import', data)
|
||||
};
|
||||
|
||||
export const ticketCategoryAPI = {
|
||||
list: (params) => cachedAPI.get('/ticket-categories', params),
|
||||
create: (data) => cachedAPI.post('/ticket-categories', data),
|
||||
update: (code, data) => cachedAPI.put(`/ticket-categories/${code}`, data),
|
||||
delete: (code) => cachedAPI.delete(`/ticket-categories/${code}`),
|
||||
getTree: () => cachedAPI.get('/ticket-categories/tree'),
|
||||
init: () => cachedAPI.post('/ticket-categories/init')
|
||||
};
|
||||
|
||||
export { cacheManager };
|
||||
export default { cachedAPI, cacheManager };
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Select, InputNumber, message, Card, Space, Popconfirm, Upload, Table as AntTable } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, ExportOutlined, ImportOutlined, UploadOutlined, FileExcelOutlined, InboxOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
@@ -31,7 +31,7 @@ function ConsumableManagement() {
|
||||
const [stockType, setStockType] = useState('in');
|
||||
const [stockForm] = Form.useForm();
|
||||
|
||||
const fetchConsumables = async (page = 1, pageSize = 10) => {
|
||||
const fetchConsumables = useCallback(async (page = 1, pageSize = 10) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get('/api/consumables', {
|
||||
@@ -45,23 +45,23 @@ function ConsumableManagement() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [keyword, category, status]);
|
||||
|
||||
const fetchCategories = async () => {
|
||||
const fetchCategories = useCallback(async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/consumable-categories/list');
|
||||
setCategories(response.data);
|
||||
} catch (error) {
|
||||
console.error('获取分类列表失败:', error);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchConsumables();
|
||||
fetchCategories();
|
||||
}, [keyword, category, status]);
|
||||
}, [fetchConsumables, fetchCategories]);
|
||||
|
||||
const showModal = (consumable = null) => {
|
||||
const showModal = useCallback((consumable = null) => {
|
||||
setEditingConsumable(consumable);
|
||||
if (consumable) {
|
||||
form.setFieldsValue(consumable);
|
||||
@@ -69,14 +69,14 @@ function ConsumableManagement() {
|
||||
form.resetFields();
|
||||
}
|
||||
setModalVisible(true);
|
||||
};
|
||||
}, [form]);
|
||||
|
||||
const handleCancel = () => {
|
||||
const handleCancel = useCallback(() => {
|
||||
setModalVisible(false);
|
||||
setEditingConsumable(null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
const handleSubmit = useCallback(async (values) => {
|
||||
try {
|
||||
if (editingConsumable) {
|
||||
await axios.put(`/api/consumables/${editingConsumable.consumableId}`, values);
|
||||
@@ -95,9 +95,9 @@ function ConsumableManagement() {
|
||||
message.error(editingConsumable ? '耗材更新失败' : '耗材创建失败');
|
||||
console.error('提交失败:', error);
|
||||
}
|
||||
};
|
||||
}, [editingConsumable, fetchConsumables]);
|
||||
|
||||
const handleDelete = async (consumableId) => {
|
||||
const handleDelete = useCallback(async (consumableId) => {
|
||||
try {
|
||||
await axios.delete(`/api/consumables/${consumableId}`);
|
||||
message.success('删除成功');
|
||||
@@ -106,11 +106,11 @@ function ConsumableManagement() {
|
||||
message.error('删除失败');
|
||||
console.error('删除失败:', error);
|
||||
}
|
||||
};
|
||||
}, [fetchConsumables]);
|
||||
|
||||
const handleSearch = (value) => {
|
||||
const handleSearch = useCallback((value) => {
|
||||
setKeyword(value);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const exportToCSV = (data, filename) => {
|
||||
const headers = ['耗材ID', '名称', '分类', '单位', '当前库存', '最小库存', '最大库存', '单价', '供应商', '存放位置', '状态'];
|
||||
@@ -267,7 +267,7 @@ function ConsumableManagement() {
|
||||
window.URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const showStockModal = (record, type) => {
|
||||
const showStockModal = useCallback((record, type) => {
|
||||
setStockRecord(record);
|
||||
setStockType(type);
|
||||
stockForm.setFieldsValue({
|
||||
@@ -278,14 +278,14 @@ function ConsumableManagement() {
|
||||
notes: ''
|
||||
});
|
||||
setStockModalVisible(true);
|
||||
};
|
||||
}, [stockForm]);
|
||||
|
||||
const handleStockCancel = () => {
|
||||
const handleStockCancel = useCallback(() => {
|
||||
setStockModalVisible(false);
|
||||
setStockRecord(null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleStockSubmit = async (values) => {
|
||||
const handleStockSubmit = useCallback(async (values) => {
|
||||
try {
|
||||
const response = await axios.post('/api/consumables/quick-inout', {
|
||||
consumableId: stockRecord.consumableId,
|
||||
@@ -302,9 +302,9 @@ function ConsumableManagement() {
|
||||
message.error(error.response?.data?.error || `${stockType === 'in' ? '入库' : '出库'}操作失败`);
|
||||
console.error('操作失败:', error);
|
||||
}
|
||||
};
|
||||
}, [stockRecord, stockType, fetchConsumables]);
|
||||
|
||||
const columns = [
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
title: '耗材ID',
|
||||
dataIndex: 'consumableId',
|
||||
@@ -402,7 +402,7 @@ function ConsumableManagement() {
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
];
|
||||
], [showModal, showStockModal, handleDelete]);
|
||||
|
||||
const previewColumns = [
|
||||
{ title: '名称', dataIndex: '名称', key: 'name', width: 120 },
|
||||
@@ -608,4 +608,4 @@ function ConsumableManagement() {
|
||||
);
|
||||
}
|
||||
|
||||
export default ConsumableManagement;
|
||||
export default React.memo(ConsumableManagement);
|
||||
|
||||
+335
-424
@@ -1,12 +1,11 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, Statistic, Spin, message, Button, Tag } from 'antd';
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Card, Row, Col, Statistic, message, Button, Tag } from 'antd';
|
||||
import {
|
||||
DatabaseOutlined,
|
||||
CloudServerOutlined,
|
||||
WarningOutlined,
|
||||
PoweroffOutlined,
|
||||
HomeOutlined,
|
||||
MonitorOutlined,
|
||||
SettingOutlined,
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
@@ -15,197 +14,351 @@ import {
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
const theme = {
|
||||
primary: '#1890ff',
|
||||
primaryDark: '#096dd9',
|
||||
secondary: '#722ed1',
|
||||
success: '#52c41a',
|
||||
warning: '#faad14',
|
||||
error: '#ff4d4f',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
cardBg: 'rgba(255, 255, 255, 0.95)',
|
||||
textPrimary: '#262626',
|
||||
textSecondary: '#8c8c8c'
|
||||
};
|
||||
|
||||
const containerStyle = {
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%)',
|
||||
padding: '24px'
|
||||
};
|
||||
|
||||
const headerStyle = {
|
||||
textAlign: 'center',
|
||||
marginBottom: '32px'
|
||||
};
|
||||
|
||||
const titleStyle = {
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: '700',
|
||||
background: theme.background,
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
margin: '0 0 8px 0'
|
||||
};
|
||||
|
||||
const subtitleStyle = {
|
||||
fontSize: '1.1rem',
|
||||
color: theme.textSecondary,
|
||||
margin: '0'
|
||||
};
|
||||
|
||||
const statCardStyle = {
|
||||
borderRadius: '16px',
|
||||
border: 'none',
|
||||
boxShadow: '0 4px 16px rgba(24, 144, 255, 0.1)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer'
|
||||
};
|
||||
|
||||
const systemOverviewStyle = {
|
||||
marginTop: '32px'
|
||||
};
|
||||
|
||||
const overviewCardStyle = {
|
||||
borderRadius: '20px',
|
||||
border: 'none',
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.15)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)'
|
||||
};
|
||||
|
||||
const welcomeSectionStyle = {
|
||||
background: theme.background,
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
textAlign: 'center',
|
||||
color: 'white',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const navigationGridStyle = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
|
||||
gap: '16px',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const navButtonStyle = {
|
||||
height: 'auto',
|
||||
padding: '20px 16px',
|
||||
borderRadius: '12px',
|
||||
border: '2px solid rgba(24, 144, 255, 0.1)',
|
||||
background: 'rgba(24, 144, 255, 0.02)',
|
||||
transition: 'all 0.3s ease',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
};
|
||||
|
||||
const navIconStyle = {
|
||||
fontSize: '2rem',
|
||||
color: theme.primary
|
||||
};
|
||||
|
||||
const navTextStyle = {
|
||||
fontSize: '0.95rem',
|
||||
fontWeight: '600',
|
||||
color: theme.textPrimary
|
||||
};
|
||||
|
||||
const systemInfoStyle = {
|
||||
background: 'linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
border: '1px solid rgba(24, 144, 255, 0.1)'
|
||||
};
|
||||
|
||||
const navButtonsData = [
|
||||
{ key: 'devices', icon: CloudServerOutlined, text: '设备管理', path: '/devices' },
|
||||
{ key: 'racks', icon: DatabaseOutlined, text: '资源规划', path: '/racks' },
|
||||
{ key: 'faults', icon: WarningOutlined, text: '故障监控', path: '/faults' },
|
||||
{ key: 'settings', icon: SettingOutlined, text: '系统配置', path: '/settings' }
|
||||
];
|
||||
|
||||
const createTrendStyle = (trend) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '500',
|
||||
color: trend > 0 ? theme.success : theme.error,
|
||||
marginTop: '8px'
|
||||
});
|
||||
|
||||
const createStatCardBg = (color) => ({
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: `linear-gradient(135deg, ${color} 0%, ${color}99 100%)`,
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
});
|
||||
|
||||
function Dashboard() {
|
||||
const [stats, setStats] = useState({
|
||||
totalDevices: 0,
|
||||
totalRacks: 0,
|
||||
totalRooms: 0,
|
||||
faultDevices: 0,
|
||||
deviceGrowth: 2.5, // 示例增长数据
|
||||
faultTrend: -12.3 // 示例趋势数据
|
||||
});
|
||||
totalDevices: 0,
|
||||
totalRacks: 0,
|
||||
totalRooms: 0,
|
||||
faultDevices: 0,
|
||||
deviceGrowth: 2.5,
|
||||
faultTrend: -12.3
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// 获取统计数据
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 获取所有设备
|
||||
const devicesRes = await axios.get('/api/devices');
|
||||
// 设备API返回的是包含total和devices数组的对象
|
||||
const totalDevices = devicesRes.data.total;
|
||||
// 获取所有设备以统计故障设备数量
|
||||
const allDevicesRes = await axios.get('/api/devices', { params: { pageSize: totalDevices } });
|
||||
const allDevices = allDevicesRes.data.devices || allDevicesRes.data;
|
||||
const faultDevices = allDevices.filter(device => device.status === 'fault').length;
|
||||
|
||||
// 获取所有机柜
|
||||
const racksRes = await axios.get('/api/racks');
|
||||
// 机柜API返回的是包含total和racks数组的对象
|
||||
const totalRacks = racksRes.data.total;
|
||||
const racks = racksRes.data.racks || [];
|
||||
|
||||
// 获取所有机房
|
||||
const roomsRes = await axios.get('/api/rooms');
|
||||
const rooms = roomsRes.data;
|
||||
const totalRooms = rooms.length;
|
||||
|
||||
setStats({
|
||||
totalDevices,
|
||||
totalRacks,
|
||||
totalRooms,
|
||||
faultDevices,
|
||||
// 保留或更新趋势数据
|
||||
deviceGrowth: stats.deviceGrowth || 0,
|
||||
faultTrend: stats.faultTrend || 0
|
||||
});
|
||||
} catch (error) {
|
||||
message.error('获取统计数据失败');
|
||||
console.error('获取统计数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
const fetchStats = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const [devicesRes, racksRes, roomsRes] = await Promise.all([
|
||||
axios.get('/api/devices', { params: { pageSize: 1 } }),
|
||||
axios.get('/api/racks', { params: { pageSize: 1 } }),
|
||||
axios.get('/api/rooms')
|
||||
]);
|
||||
|
||||
const totalDevices = devicesRes.data.total || 0;
|
||||
const totalRacks = racksRes.data.total || 0;
|
||||
const rooms = roomsRes.data || [];
|
||||
const totalRooms = rooms.length;
|
||||
|
||||
let faultDevices = 0;
|
||||
if (totalDevices > 0) {
|
||||
try {
|
||||
const faultRes = await axios.get('/api/devices/count', {
|
||||
params: { status: 'fault' }
|
||||
});
|
||||
faultDevices = faultRes.data.count || 0;
|
||||
} catch {
|
||||
faultDevices = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchStats();
|
||||
|
||||
setStats({
|
||||
totalDevices,
|
||||
totalRacks,
|
||||
totalRooms,
|
||||
faultDevices,
|
||||
deviceGrowth: 2.5,
|
||||
faultTrend: -12.3
|
||||
});
|
||||
} catch (error) {
|
||||
message.error('获取统计数据失败');
|
||||
console.error('获取统计数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 科技感配色主题
|
||||
const theme = {
|
||||
primary: '#1890ff', // 科技蓝
|
||||
primaryDark: '#096dd9', // 深蓝
|
||||
secondary: '#722ed1', // 紫色
|
||||
success: '#52c41a', // 绿色
|
||||
warning: '#faad14', // 橙色
|
||||
error: '#ff4d4f', // 红色
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
cardBg: 'rgba(255, 255, 255, 0.95)',
|
||||
textPrimary: '#262626',
|
||||
textSecondary: '#8c8c8c'
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, [fetchStats]);
|
||||
|
||||
const containerStyle = {
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%)',
|
||||
padding: '24px'
|
||||
};
|
||||
const handleNavHover = useCallback((e, isEnter) => {
|
||||
if (isEnter) {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
} else {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}
|
||||
}, []);
|
||||
|
||||
const headerStyle = {
|
||||
textAlign: 'center',
|
||||
marginBottom: '32px'
|
||||
};
|
||||
const handleRefresh = useCallback(() => {
|
||||
fetchStats();
|
||||
}, [fetchStats]);
|
||||
|
||||
const titleStyle = {
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: '700',
|
||||
background: theme.background,
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
margin: '0 0 8px 0'
|
||||
};
|
||||
const statCards = useMemo(() => [
|
||||
{
|
||||
key: 'devices',
|
||||
xs: 24, sm: 12, lg: 6,
|
||||
icon: CloudServerOutlined,
|
||||
color: '#1890ff',
|
||||
statKey: 'totalDevices',
|
||||
title: '总设备数',
|
||||
trend: stats.deviceGrowth,
|
||||
tagColor: 'blue'
|
||||
},
|
||||
{
|
||||
key: 'racks',
|
||||
xs: 24, sm: 12, lg: 6,
|
||||
icon: DatabaseOutlined,
|
||||
color: '#722ed1',
|
||||
statKey: 'totalRacks',
|
||||
title: '总机柜数',
|
||||
trend: 0,
|
||||
tagColor: 'green',
|
||||
customStatus: true
|
||||
},
|
||||
{
|
||||
key: 'rooms',
|
||||
xs: 24, sm: 12, lg: 6,
|
||||
icon: HomeOutlined,
|
||||
color: '#52c41a',
|
||||
statKey: 'totalRooms',
|
||||
title: '总机房数',
|
||||
trend: 0,
|
||||
tagColor: 'green',
|
||||
customStatus: true
|
||||
},
|
||||
{
|
||||
key: 'faults',
|
||||
xs: 24, sm: 12, lg: 6,
|
||||
icon: WarningOutlined,
|
||||
color: '#ff4d4f',
|
||||
statKey: 'faultDevices',
|
||||
title: '故障设备',
|
||||
trend: stats.faultTrend,
|
||||
tagColor: 'red'
|
||||
}
|
||||
], [stats.deviceGrowth, stats.faultTrend]);
|
||||
|
||||
const subtitleStyle = {
|
||||
fontSize: '1.1rem',
|
||||
color: theme.textSecondary,
|
||||
margin: '0'
|
||||
};
|
||||
const renderStatCard = useCallback((config) => {
|
||||
const { icon: Icon, color, statKey, title, trend, tagColor, customStatus, xs, sm, lg } = config;
|
||||
const colProps = { xs, sm, lg };
|
||||
|
||||
return (
|
||||
<Col key={statKey} {...colProps}>
|
||||
<Card style={statCardStyle}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={createStatCardBg(color)} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
{title}
|
||||
</span>
|
||||
}
|
||||
value={stats[statKey]}
|
||||
prefix={<Icon style={{ color, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.textPrimary,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
{customStatus ? (
|
||||
statKey === 'totalRacks' ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<PoweroffOutlined style={{ marginRight: '4px' }} />
|
||||
<span>正常运行</span>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<span style={{ width: '8px', height: '8px', background: theme.success, borderRadius: '50%', marginRight: '8px' }} />
|
||||
<span>全部在线</span>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div style={createTrendStyle(trend)}>
|
||||
{trend > 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
|
||||
<span style={{ marginLeft: '4px' }}>{Math.abs(trend)}%</span>
|
||||
<Tag color={tagColor} style={{ marginLeft: '8px', fontSize: '0.75rem' }}>本月</Tag>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
}, [stats, loading]);
|
||||
|
||||
const statCardStyle = {
|
||||
borderRadius: '16px',
|
||||
border: 'none',
|
||||
boxShadow: '0 4px 16px rgba(24, 144, 255, 0.1)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer'
|
||||
};
|
||||
const navButtons = useMemo(() => navButtonsData.map(({ key, icon: Icon, text }) => (
|
||||
<Button
|
||||
key={key}
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => handleNavHover(e, true)}
|
||||
onMouseLeave={(e) => handleNavHover(e, false)}
|
||||
>
|
||||
<Icon style={navIconStyle} />
|
||||
<span style={navTextStyle}>{text}</span>
|
||||
</Button>
|
||||
)), [handleNavHover]);
|
||||
|
||||
const statCardHoverStyle = {
|
||||
transform: 'translateY(-4px)',
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)'
|
||||
};
|
||||
|
||||
const trendStyle = (trend) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '500',
|
||||
color: trend > 0 ? theme.success : theme.error,
|
||||
marginTop: '8px'
|
||||
});
|
||||
|
||||
const systemOverviewStyle = {
|
||||
marginTop: '32px'
|
||||
};
|
||||
|
||||
const overviewCardStyle = {
|
||||
borderRadius: '20px',
|
||||
border: 'none',
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.15)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)'
|
||||
};
|
||||
|
||||
const welcomeSectionStyle = {
|
||||
background: theme.background,
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
textAlign: 'center',
|
||||
color: 'white',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const navigationGridStyle = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
|
||||
gap: '16px',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const navButtonStyle = {
|
||||
height: 'auto',
|
||||
padding: '20px 16px',
|
||||
borderRadius: '12px',
|
||||
border: '2px solid rgba(24, 144, 255, 0.1)',
|
||||
background: 'rgba(24, 144, 255, 0.02)',
|
||||
transition: 'all 0.3s ease',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
};
|
||||
|
||||
const navButtonHoverStyle = {
|
||||
borderColor: theme.primary,
|
||||
background: 'rgba(24, 144, 255, 0.1)',
|
||||
transform: 'translateY(-2px)'
|
||||
};
|
||||
|
||||
const navIconStyle = {
|
||||
fontSize: '2rem',
|
||||
color: theme.primary
|
||||
};
|
||||
|
||||
const navTextStyle = {
|
||||
fontSize: '0.95rem',
|
||||
fontWeight: '600',
|
||||
color: theme.textPrimary
|
||||
};
|
||||
|
||||
const systemInfoStyle = {
|
||||
background: 'linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
border: '1px solid rgba(24, 144, 255, 0.1)'
|
||||
};
|
||||
const systemInfo = useMemo(() => (
|
||||
<div style={systemInfoStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<p style={{ margin: '0', fontSize: '0.95rem', color: theme.textPrimary, fontWeight: '500' }}>
|
||||
<strong>系统版本：</strong> v1.0.0
|
||||
</p>
|
||||
<p style={{ margin: '4px 0 0 0', fontSize: '0.85rem', color: theme.textSecondary }}>
|
||||
<strong>最后更新：</strong>{new Date().toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ReloadOutlined />}
|
||||
size="small"
|
||||
onClick={handleRefresh}
|
||||
style={{ background: theme.primary, borderColor: theme.primary }}
|
||||
>
|
||||
刷新数据
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
), [handleRefresh]);
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
{/* 页面头部 */}
|
||||
<div style={headerStyle}>
|
||||
<h1 style={titleStyle}>
|
||||
<DashboardOutlined style={{ marginRight: '12px' }} />
|
||||
@@ -214,164 +367,13 @@ function Dashboard() {
|
||||
<p style={subtitleStyle}>实时监控 • 智能管理 • 高效运维</p>
|
||||
</div>
|
||||
|
||||
{/* 数据概览卡片 */}
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: '32px' }}>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card style={statCardStyle}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
}} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
总设备数
|
||||
</span>
|
||||
}
|
||||
value={stats.totalDevices}
|
||||
prefix={<CloudServerOutlined style={{ color: theme.primary, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.textPrimary,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
<div style={trendStyle(stats.deviceGrowth)}>
|
||||
{stats.deviceGrowth > 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
|
||||
<span style={{ marginLeft: '4px' }}>{Math.abs(stats.deviceGrowth)}%</span>
|
||||
<Tag color="blue" style={{ marginLeft: '8px', fontSize: '0.75rem' }}>本月</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card style={statCardStyle}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #722ed1 0%, #531dab 100%)',
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
}} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
总机柜数
|
||||
</span>
|
||||
}
|
||||
value={stats.totalRacks}
|
||||
prefix={<DatabaseOutlined style={{ color: theme.secondary, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.textPrimary,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<PoweroffOutlined style={{ marginRight: '4px' }} />
|
||||
<span>正常运行</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card style={statCardStyle}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
}} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
总机房数
|
||||
</span>
|
||||
}
|
||||
value={stats.totalRooms}
|
||||
prefix={<HomeOutlined style={{ color: theme.success, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.textPrimary,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<span style={{ width: '8px', height: '8px', background: theme.success, borderRadius: '50%', marginRight: '8px' }} />
|
||||
<span>全部在线</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card style={{ ...statCardStyle, borderLeft: `4px solid ${theme.error}` }}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #ff4d4f 0%, #d73027 100%)',
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
}} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
故障设备
|
||||
</span>
|
||||
}
|
||||
value={stats.faultDevices}
|
||||
prefix={<WarningOutlined style={{ color: theme.error, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.error,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
<div style={trendStyle(stats.faultTrend)}>
|
||||
{stats.faultTrend < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />}
|
||||
<span style={{ marginLeft: '4px' }}>{Math.abs(stats.faultTrend)}%</span>
|
||||
<Tag color="red" style={{ marginLeft: '8px', fontSize: '0.75rem' }}>本周</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
{statCards.map(renderStatCard)}
|
||||
</Row>
|
||||
|
||||
{/* 系统概览 */}
|
||||
<div style={systemOverviewStyle}>
|
||||
<Card style={overviewCardStyle}>
|
||||
<div style={{ padding: '24px' }}>
|
||||
{/* 欢迎区域 */}
|
||||
<div style={welcomeSectionStyle}>
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem',
|
||||
@@ -391,102 +393,11 @@ function Dashboard() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 导航功能网格 */}
|
||||
<div style={navigationGridStyle}>
|
||||
<Button
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<CloudServerOutlined style={navIconStyle} />
|
||||
<span style={navTextStyle}>设备管理</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<DatabaseOutlined style={navIconStyle} />
|
||||
<span style={navTextStyle}>资源规划</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<WarningOutlined style={navIconStyle} />
|
||||
<span style={navTextStyle}>故障监控</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<SettingOutlined style={navIconStyle} />
|
||||
<span style={navTextStyle}>系统配置</span>
|
||||
</Button>
|
||||
{navButtons}
|
||||
</div>
|
||||
|
||||
{/* 系统信息 */}
|
||||
<div style={systemInfoStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<p style={{ margin: '0', fontSize: '0.95rem', color: theme.textPrimary, fontWeight: '500' }}>
|
||||
<strong>系统版本：</strong> v1.0.0
|
||||
</p>
|
||||
<p style={{ margin: '4px 0 0 0', fontSize: '0.85rem', color: theme.textSecondary }}>
|
||||
最后更新：{new Date().toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ReloadOutlined />}
|
||||
size="small"
|
||||
style={{ background: theme.primary, borderColor: theme.primary }}
|
||||
>
|
||||
刷新数据
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{systemInfo}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -494,4 +405,4 @@ function Dashboard() {
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
export default React.memo(Dashboard);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Select, DatePicker, message, Card, Space, InputNumber, Switch, Upload, Progress, Checkbox } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UploadOutlined, DownloadOutlined, SettingOutlined, UndoOutlined, CloudServerOutlined, SwapOutlined, SafetyOutlined, DatabaseOutlined, AppstoreOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
@@ -7,6 +7,79 @@ import dayjs from 'dayjs';
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
// 工具函数提取到组件外部，避免每次渲染重复创建
|
||||
const getStatusConfig = (status) => {
|
||||
const statusMap = {
|
||||
running: { text: '运行中', color: 'green' },
|
||||
maintenance: { text: '维护中', color: 'orange' },
|
||||
offline: { text: '离线', color: 'gray' },
|
||||
fault: { text: '故障', color: 'red' }
|
||||
};
|
||||
return statusMap[status] || { text: status, color: 'black' };
|
||||
};
|
||||
|
||||
const getTypeLabel = (type) => {
|
||||
const typeMap = {
|
||||
server: '服务器',
|
||||
switch: '交换机',
|
||||
router: '路由器',
|
||||
storage: '存储设备',
|
||||
other: '其他设备'
|
||||
};
|
||||
return typeMap[type] || type;
|
||||
};
|
||||
|
||||
const getDeviceTypeIcon = (type) => {
|
||||
const iconMap = {
|
||||
server: <CloudServerOutlined style={{ color: '#1890ff' }} />,
|
||||
switch: <SwapOutlined style={{ color: '#52c41a' }} />,
|
||||
router: <SafetyOutlined style={{ color: '#faad14' }} />,
|
||||
storage: <DatabaseOutlined style={{ color: '#722ed1' }} />,
|
||||
other: <AppstoreOutlined style={{ color: '#8c8c8c' }} />
|
||||
};
|
||||
return iconMap[type] || <AppstoreOutlined style={{ color: '#8c8c8c' }} />;
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date, fieldName) => {
|
||||
if (!date) return '';
|
||||
|
||||
const dateObj = new Date(date);
|
||||
const formattedDate = dateObj.toLocaleDateString('zh-CN');
|
||||
|
||||
if (fieldName === 'warrantyExpiry') {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
dateObj.setHours(0, 0, 0, 0);
|
||||
|
||||
if (dateObj < today) {
|
||||
return <span style={{ color: '#d93025', fontWeight: 'bold' }}>{formattedDate}</span>;
|
||||
}
|
||||
}
|
||||
|
||||
return formattedDate;
|
||||
};
|
||||
|
||||
// 默认设备字段配置
|
||||
const defaultDeviceFields = [
|
||||
{ fieldName: 'deviceId', displayName: '设备ID', fieldType: 'string', required: true, order: 1, visible: true },
|
||||
{ fieldName: 'name', displayName: '设备名称', fieldType: 'string', required: true, order: 2, visible: true },
|
||||
{ fieldName: 'type', displayName: '设备类型', fieldType: 'select', required: true, order: 3, visible: true,
|
||||
options: [{ value: 'server', label: '服务器' }, { value: 'switch', label: '交换机' }, { value: 'router', label: '路由器' }, { value: 'storage', label: '存储设备' }, { value: 'other', label: '其他设备' }] },
|
||||
{ fieldName: 'model', displayName: '型号', fieldType: 'string', required: true, order: 4, visible: true },
|
||||
{ fieldName: 'serialNumber', displayName: '序列号', fieldType: 'string', required: true, order: 5, visible: true },
|
||||
{ fieldName: 'rackId', displayName: '所在机柜', fieldType: 'select', required: true, order: 6, visible: true },
|
||||
{ fieldName: 'position', displayName: '位置(U)', fieldType: 'number', required: true, order: 7, visible: true },
|
||||
{ fieldName: 'height', displayName: '高度(U)', fieldType: 'number', required: true, order: 8, visible: true },
|
||||
{ fieldName: 'powerConsumption', displayName: '功率(W)', fieldType: 'number', required: true, order: 9, visible: true },
|
||||
{ fieldName: 'status', displayName: '状态', fieldType: 'select', required: true, order: 10, visible: true,
|
||||
options: [{ value: 'running', label: '运行中' }, { value: 'maintenance', label: '维护中' }, { value: 'offline', label: '离线' }, { value: 'fault', label: '故障' }] },
|
||||
{ fieldName: 'purchaseDate', displayName: '购买日期', fieldType: 'date', required: true, order: 11, visible: true },
|
||||
{ fieldName: 'warrantyExpiry', displayName: '保修到期', fieldType: 'date', required: true, order: 12, visible: true },
|
||||
{ fieldName: 'ipAddress', displayName: 'IP地址', fieldType: 'string', required: false, order: 13, visible: true },
|
||||
{ fieldName: 'description', displayName: '描述', fieldType: 'textarea', required: false, order: 14, visible: true }
|
||||
];
|
||||
|
||||
// 可调整列宽的表头组件
|
||||
const ResizeableTitle = (props) => {
|
||||
const { onResize, width, ...restProps } = props;
|
||||
@@ -18,13 +91,12 @@ const ResizeableTitle = (props) => {
|
||||
const handleMouseDown = (e) => {
|
||||
if (!onResize) return;
|
||||
|
||||
|
||||
const startX = e.pageX;
|
||||
const startWidth = width;
|
||||
|
||||
const handleMouseMove = (moveEvent) => {
|
||||
const diff = moveEvent.pageX - startX;
|
||||
const newWidth = Math.max(50, startWidth + diff); // 最小宽度50px
|
||||
const newWidth = Math.max(50, startWidth + diff);
|
||||
onResize(newWidth);
|
||||
};
|
||||
|
||||
@@ -855,7 +927,8 @@ function DeviceManagement() {
|
||||
loading={loading}
|
||||
pagination={pagination}
|
||||
onChange={handleTableChange}
|
||||
scroll={{ x: 'max-content' }}
|
||||
scroll={{ y: 600, x: 'max-content' }}
|
||||
virtual
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedDevices,
|
||||
onChange: setSelectedDevices,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Select, message, Card, Space, InputNumber, Upload, Progress } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, UploadOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
@@ -6,6 +6,13 @@ import * as XLSX from 'xlsx';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
// 状态映射函数
|
||||
const statusMap = {
|
||||
active: { text: '在用', color: 'green' },
|
||||
maintenance: { text: '维护中', color: 'orange' },
|
||||
inactive: { text: '停用', color: 'gray' }
|
||||
};
|
||||
|
||||
function RackManagement() {
|
||||
const [racks, setRacks] = useState([]);
|
||||
const [rooms, setRooms] = useState([]);
|
||||
@@ -28,10 +35,7 @@ function RackManagement() {
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [importResult, setImportResult] = useState(null);
|
||||
|
||||
|
||||
|
||||
// 获取所有机柜
|
||||
const fetchRacks = async (page = 1, pageSize = 10) => {
|
||||
const fetchRacks = useCallback(async (page = 1, pageSize = 10) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get('/api/racks', {
|
||||
@@ -51,10 +55,9 @@ function RackManagement() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 获取所有机房
|
||||
const fetchRooms = async () => {
|
||||
const fetchRooms = useCallback(async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/rooms');
|
||||
setRooms(response.data);
|
||||
@@ -62,20 +65,19 @@ function RackManagement() {
|
||||
message.error('获取机房列表失败');
|
||||
console.error('获取机房列表失败:', error);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 处理表格分页变化
|
||||
const handleTableChange = (pagination) => {
|
||||
const handleTableChange = useCallback((pagination) => {
|
||||
fetchRacks(pagination.current, pagination.pageSize);
|
||||
};
|
||||
}, [fetchRacks]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRacks(pagination.current, pagination.pageSize);
|
||||
fetchRooms();
|
||||
}, []);
|
||||
}, [fetchRacks, fetchRooms]);
|
||||
|
||||
// 打开模态框
|
||||
const showModal = (rack = null) => {
|
||||
const showModal = useCallback((rack = null) => {
|
||||
setEditingRack(rack);
|
||||
if (rack) {
|
||||
form.setFieldsValue(rack);
|
||||
@@ -83,16 +85,16 @@ function RackManagement() {
|
||||
form.resetFields();
|
||||
}
|
||||
setModalVisible(true);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 关闭模态框
|
||||
const handleCancel = () => {
|
||||
const handleCancel = useCallback(() => {
|
||||
setModalVisible(false);
|
||||
setEditingRack(null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async (values) => {
|
||||
const handleSubmit = useCallback(async (values) => {
|
||||
try {
|
||||
if (editingRack) {
|
||||
// 更新机柜
|
||||
@@ -111,10 +113,10 @@ function RackManagement() {
|
||||
message.error(editingRack ? '机柜更新失败' : '机柜创建失败');
|
||||
console.error(editingRack ? '机柜更新失败:' : '机柜创建失败:', error);
|
||||
}
|
||||
};
|
||||
}, [editingRack, fetchRacks]);
|
||||
|
||||
// 删除机柜
|
||||
const handleDelete = async (rackId) => {
|
||||
const handleDelete = useCallback(async (rackId) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个机柜吗？',
|
||||
@@ -132,17 +134,17 @@ function RackManagement() {
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}, [fetchRacks]);
|
||||
|
||||
// 下载导入模板
|
||||
const handleDownloadTemplate = () => {
|
||||
const handleDownloadTemplate = useCallback(() => {
|
||||
// 调用后端API下载模板
|
||||
window.open('/api/racks/import-template', '_blank');
|
||||
message.success('模板下载成功');
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 导入机柜数据
|
||||
const handleImport = async (file) => {
|
||||
const handleImport = useCallback(async (file) => {
|
||||
try {
|
||||
setIsImporting(true);
|
||||
setImportProgress(0);
|
||||
@@ -213,17 +215,10 @@ function RackManagement() {
|
||||
// 阻止自动上传
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 状态标签映射
|
||||
const statusMap = {
|
||||
active: { text: '在用', color: 'green' },
|
||||
maintenance: { text: '维护中', color: 'orange' },
|
||||
inactive: { text: '停用', color: 'gray' }
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
title: '机柜ID',
|
||||
dataIndex: 'rackId',
|
||||
@@ -493,4 +488,4 @@ function RackManagement() {
|
||||
);
|
||||
}
|
||||
|
||||
export default RackManagement;
|
||||
export default React.memo(RackManagement);
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||||
import { Card, Select, Button, Space, message, Tooltip, Modal, Form, Switch, Checkbox } from 'antd';
|
||||
import {
|
||||
ReloadOutlined,
|
||||
@@ -18,101 +18,226 @@ import axios from 'axios';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
// 添加动画样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(20px) scale(0.95);
|
||||
// 工具函数提取到组件外部，避免每次渲染重复创建
|
||||
const getDeviceIcon = (deviceType) => {
|
||||
try {
|
||||
if (!deviceType) return <CloudServerOutlined style={{ color: '#ffffff' }} />;
|
||||
const type = deviceType.toLowerCase();
|
||||
|
||||
if (type.includes('server') || type.includes('服务器')) return <CloudServerOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('switch') || type.includes('交换机')) return <SwitcherOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('storage') || type.includes('存储')) return <DatabaseOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('router') || type.includes('路由器')) return <CloudOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('laptop') || type.includes('笔记本')) return <LaptopOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('mobile') || type.includes('手机')) return <MobileOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('printer') || type.includes('打印机')) return <PrinterOutlined style={{ color: '#ffffff' }} />;
|
||||
|
||||
return <CloudServerOutlined style={{ color: '#ffffff' }} />;
|
||||
} catch (error) {
|
||||
console.error('设备图标渲染错误:', error);
|
||||
return <CloudServerOutlined style={{ color: '#ffffff' }} />;
|
||||
}
|
||||
};
|
||||
|
||||
const getDeviceColor = (deviceType) => {
|
||||
if (!deviceType) return '#1890ff';
|
||||
const type = deviceType.toLowerCase();
|
||||
|
||||
if (type.includes('server') || type.includes('服务器')) return '#1890ff';
|
||||
if (type.includes('switch') || type.includes('交换机')) return '#52c41a';
|
||||
if (type.includes('storage') || type.includes('存储')) return '#faad14';
|
||||
if (type.includes('router') || type.includes('路由器')) return '#f5222d';
|
||||
if (type.includes('laptop') || type.includes('笔记本')) return '#722ed1';
|
||||
if (type.includes('mobile') || type.includes('手机')) return '#eb2f96';
|
||||
if (type.includes('printer') || type.includes('打印机')) return '#13c2c2';
|
||||
|
||||
return '#1890ff';
|
||||
};
|
||||
|
||||
const getDeviceStatusColor = (status) => {
|
||||
const statusColorMap = {
|
||||
'normal': '#10b981',
|
||||
'warning': '#f59e0b',
|
||||
'error': '#ef4444',
|
||||
'offline': '#6b7280',
|
||||
'maintenance': '#3b82f6',
|
||||
undefined: '#3b82f6',
|
||||
null: '#3b82f6'
|
||||
};
|
||||
return statusColorMap[status] || '#3b82f6';
|
||||
};
|
||||
|
||||
const getDeviceTypeTheme = (type) => {
|
||||
const themeMap = {
|
||||
'server': {
|
||||
borderColor: '#38bdf8',
|
||||
accentColor: '#0ea5e9',
|
||||
glowColor: 'rgba(56, 189, 248, 0.3)',
|
||||
iconColor: '#38bdf8',
|
||||
label: '服务器'
|
||||
},
|
||||
'switch': {
|
||||
borderColor: '#22c55e',
|
||||
accentColor: '#16a34a',
|
||||
glowColor: 'rgba(34, 197, 94, 0.3)',
|
||||
iconColor: '#22c55e',
|
||||
label: '交换机'
|
||||
},
|
||||
'router': {
|
||||
borderColor: '#f59e0b',
|
||||
accentColor: '#d97706',
|
||||
glowColor: 'rgba(245, 158, 11, 0.3)',
|
||||
iconColor: '#f59e0b',
|
||||
label: '路由器'
|
||||
},
|
||||
'storage': {
|
||||
borderColor: '#8b5cf6',
|
||||
accentColor: '#7c3aed',
|
||||
glowColor: 'rgba(139, 92, 246, 0.3)',
|
||||
iconColor: '#8b5cf6',
|
||||
label: '存储'
|
||||
},
|
||||
'firewall': {
|
||||
borderColor: '#ef4444',
|
||||
accentColor: '#dc2626',
|
||||
glowColor: 'rgba(239, 68, 68, 0.3)',
|
||||
iconColor: '#ef4444',
|
||||
label: '防火墙'
|
||||
},
|
||||
'ups': {
|
||||
borderColor: '#14b8a6',
|
||||
accentColor: '#0d9488',
|
||||
glowColor: 'rgba(20, 184, 166, 0.3)',
|
||||
iconColor: '#14b8a6',
|
||||
label: 'UPS'
|
||||
},
|
||||
'pdus': {
|
||||
borderColor: '#64748b',
|
||||
accentColor: '#475569',
|
||||
glowColor: 'rgba(100, 116, 139, 0.3)',
|
||||
iconColor: '#64748b',
|
||||
label: 'PDU'
|
||||
},
|
||||
'other': {
|
||||
borderColor: '#94a3b8',
|
||||
accentColor: '#64748b',
|
||||
glowColor: 'rgba(148, 163, 184, 0.3)',
|
||||
iconColor: '#94a3b8',
|
||||
label: '其他设备'
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0) scale(1);
|
||||
};
|
||||
|
||||
const normalizedType = type?.toLowerCase();
|
||||
|
||||
if (normalizedType?.includes('server') || normalizedType?.includes('服务器')) return themeMap.server;
|
||||
if (normalizedType?.includes('switch') || normalizedType?.includes('交换机')) return themeMap.switch;
|
||||
if (normalizedType?.includes('router') || normalizedType?.includes('路由器')) return themeMap.router;
|
||||
if (normalizedType?.includes('storage') || normalizedType?.includes('存储')) return themeMap.storage;
|
||||
if (normalizedType?.includes('firewall') || normalizedType?.includes('防火墙')) return themeMap.firewall;
|
||||
if (normalizedType?.includes('ups') || normalizedType?.includes('不间断电源')) return themeMap.ups;
|
||||
if (normalizedType?.includes('pdu') || normalizedType?.includes('电源分配')) return themeMap.pdus;
|
||||
|
||||
return themeMap.other;
|
||||
};
|
||||
|
||||
// 初始化动画样式
|
||||
const initAnimationStyles = () => {
|
||||
const existingStyle = document.getElementById('rack-visualization-styles');
|
||||
if (existingStyle) {
|
||||
return existingStyle;
|
||||
}
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.id = 'rack-visualization-styles';
|
||||
style.textContent = `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* LED指示灯闪烁动画 */
|
||||
@keyframes ledBlink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* Tooltip淡入动画 */
|
||||
@keyframes tooltipFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(-10px) scale(0.95);
|
||||
|
||||
@keyframes ledBlink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0.3; }
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0) scale(1);
|
||||
|
||||
@keyframes tooltipFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(-10px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 金属拉丝纹理 */
|
||||
.metal-texture {
|
||||
background-image:
|
||||
linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255,255,255,0.03) 50%,
|
||||
transparent 100%),
|
||||
repeating-linear-gradient(0deg,
|
||||
transparent 0px,
|
||||
rgba(255,255,255,0.02) 1px,
|
||||
transparent 2px,
|
||||
transparent 3px);
|
||||
background-size: 100% 100%, 4px 4px;
|
||||
}
|
||||
|
||||
/* 散热格栅效果 */
|
||||
.ventilation-grille {
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
#334155 0px,
|
||||
#334155 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
}
|
||||
|
||||
/* 悬停提亮效果 */
|
||||
.device-hover {
|
||||
background: linear-gradient(145deg, #1e293b, #0f172a) !important;
|
||||
box-shadow: 0 6px 16px rgba(56, 189, 248, 0.3), 0 0 12px rgba(56, 189, 248, 0.2) !important;
|
||||
border-color: #38bdf8 !important;
|
||||
}
|
||||
|
||||
/* Tooltip样式 */
|
||||
.device-tooltip {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: #5eead4;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 11px;
|
||||
border: 1px solid rgba(94, 234, 212, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 设备数量badge */
|
||||
.device-count-badge {
|
||||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.2));
|
||||
color: #38bdf8;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
|
||||
border: 1px solid rgba(56, 189, 248, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
.metal-texture {
|
||||
background-image:
|
||||
linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255,255,255,0.03) 50%,
|
||||
transparent 100%),
|
||||
repeating-linear-gradient(0deg,
|
||||
transparent 0px,
|
||||
rgba(255,255,255,0.02) 1px,
|
||||
transparent 2px,
|
||||
transparent 3px);
|
||||
background-size: 100% 100%, 4px 4px;
|
||||
}
|
||||
|
||||
.ventilation-grille {
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
#334155 0px,
|
||||
#334155 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
}
|
||||
|
||||
.device-hover {
|
||||
background: linear-gradient(145deg, #1e293b, #0f172a) !important;
|
||||
box-shadow: 0 6px 16px rgba(56, 189, 248, 0.3), 0 0 12px rgba(56, 189, 248, 0.2) !important;
|
||||
border-color: #38bdf8 !important;
|
||||
}
|
||||
|
||||
.device-tooltip {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: #5eead4;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 11px;
|
||||
border: 1px solid rgba(94, 234, 212, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.device-count-badge {
|
||||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.2));
|
||||
color: #38bdf8;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
|
||||
border: 1px solid rgba(56, 189, 248, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
return style;
|
||||
};
|
||||
|
||||
// 错误边界组件
|
||||
class ErrorBoundary extends React.Component {
|
||||
constructor(props) {
|
||||
@@ -191,7 +316,7 @@ function RackVisualization() {
|
||||
const [tooltipFields, setTooltipFields] = useState({});
|
||||
|
||||
// 默认设备字段配置
|
||||
const defaultTooltipFields = {
|
||||
const defaultTooltipFields = useMemo(() => ({
|
||||
name: { label: '设备名称', enabled: true, field: 'name', fieldType: 'string' },
|
||||
deviceId: { label: '设备ID', enabled: true, field: 'deviceId', fieldType: 'string' },
|
||||
type: { label: '设备类型', enabled: true, field: 'type', fieldType: 'string' },
|
||||
@@ -202,10 +327,15 @@ function RackVisualization() {
|
||||
height: { label: '高度', enabled: true, field: 'height', fieldType: 'number' },
|
||||
ipAddress: { label: 'IP地址', enabled: true, field: 'ipAddress', fieldType: 'string' },
|
||||
power: { label: '功率', enabled: true, field: 'power', fieldType: 'number' }
|
||||
};
|
||||
}), []);
|
||||
|
||||
// 获取设备字段配置
|
||||
const fetchTooltipDeviceFields = async () => {
|
||||
// 初始化样式
|
||||
useEffect(() => {
|
||||
initAnimationStyles();
|
||||
}, []);
|
||||
|
||||
// 获取设备字段配置 - 使用 useCallback 避免重复创建
|
||||
const fetchTooltipDeviceFields = useCallback(async () => {
|
||||
try {
|
||||
setLoadingTooltipFields(true);
|
||||
console.log('开始获取设备字段配置...');
|
||||
@@ -242,10 +372,10 @@ function RackVisualization() {
|
||||
} finally {
|
||||
setLoadingTooltipFields(false);
|
||||
}
|
||||
};
|
||||
}, [defaultTooltipFields]);
|
||||
|
||||
// 保存tooltip字段配置
|
||||
const saveTooltipConfig = async () => {
|
||||
const saveTooltipConfig = useCallback(async () => {
|
||||
try {
|
||||
setSavingTooltipConfig(true);
|
||||
|
||||
@@ -268,10 +398,10 @@ function RackVisualization() {
|
||||
} finally {
|
||||
setSavingTooltipConfig(false);
|
||||
}
|
||||
};
|
||||
}, [tooltipFields, fetchTooltipDeviceFields]);
|
||||
|
||||
// 获取所有机柜
|
||||
const fetchRacks = async () => {
|
||||
// 获取所有机柜 - 使用 useCallback 避免重复创建
|
||||
const fetchRacks = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
@@ -317,10 +447,10 @@ function RackVisualization() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 获取机柜内的设备
|
||||
const fetchDevices = async (rackId) => {
|
||||
// 获取机柜内的设备 - 使用 useCallback 避免重复创建
|
||||
const fetchDevices = useCallback(async (rackId) => {
|
||||
try {
|
||||
setLoadingDevices(true);
|
||||
console.log(`=== 开始获取机柜 ${rackId} 的设备数据 ===`);
|
||||
@@ -462,13 +592,11 @@ function RackVisualization() {
|
||||
} finally {
|
||||
setLoadingDevices(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRacks();
|
||||
loadBackgroundSettings();
|
||||
fetchTooltipDeviceFields();
|
||||
}, []);
|
||||
}, [fetchRacks]);
|
||||
|
||||
// 打开字段配置模态框时获取数据
|
||||
const handleOpenTooltipConfig = () => {
|
||||
@@ -478,120 +606,6 @@ function RackVisualization() {
|
||||
setShowTooltipConfig(true);
|
||||
};
|
||||
|
||||
// 根据设备类型获取图标
|
||||
const getDeviceIcon = (deviceType) => {
|
||||
try {
|
||||
if (!deviceType) return <CloudServerOutlined style={{ color: '#ffffff' }} />;
|
||||
const type = deviceType.toLowerCase();
|
||||
|
||||
if (type.includes('server') || type.includes('服务器')) return <CloudServerOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('switch') || type.includes('交换机')) return <SwitcherOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('storage') || type.includes('存储')) return <DatabaseOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('router') || type.includes('路由器')) return <CloudOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('laptop') || type.includes('笔记本')) return <LaptopOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('mobile') || type.includes('手机')) return <MobileOutlined style={{ color: '#ffffff' }} />;
|
||||
if (type.includes('printer') || type.includes('打印机')) return <PrinterOutlined style={{ color: '#ffffff' }} />;
|
||||
|
||||
return <CloudServerOutlined style={{ color: '#ffffff' }} />;
|
||||
} catch (error) {
|
||||
console.error('设备图标渲染错误:', error);
|
||||
return <CloudServerOutlined style={{ color: '#ffffff' }} />;
|
||||
}
|
||||
};
|
||||
|
||||
// 根据设备类型获取背景色
|
||||
const getDeviceColor = (deviceType) => {
|
||||
if (!deviceType) return '#1890ff';
|
||||
const type = deviceType.toLowerCase();
|
||||
|
||||
if (type.includes('server') || type.includes('服务器')) return '#1890ff'; // 蓝色
|
||||
if (type.includes('switch') || type.includes('交换机')) return '#52c41a'; // 绿色
|
||||
if (type.includes('storage') || type.includes('存储')) return '#faad14'; // 黄色
|
||||
if (type.includes('router') || type.includes('路由器')) return '#f5222d'; // 红色
|
||||
if (type.includes('laptop') || type.includes('笔记本')) return '#722ed1'; // 紫色
|
||||
if (type.includes('mobile') || type.includes('手机')) return '#eb2f96'; // 粉色
|
||||
if (type.includes('printer') || type.includes('打印机')) return '#13c2c2'; // 青色
|
||||
|
||||
return '#1890ff'; // 默认蓝色
|
||||
};
|
||||
|
||||
// 获取设备状态颜色
|
||||
const getDeviceStatusColor = (status) => {
|
||||
const statusColorMap = {
|
||||
'normal': '#10b981', // 正常 - 绿色常亮
|
||||
'warning': '#f59e0b', // 预警 - 黄色常亮
|
||||
'error': '#ef4444', // 告警 - 红色慢闪
|
||||
'offline': '#6b7280', // 离线 - 灰色
|
||||
'maintenance': '#3b82f6', // 维护 - 蓝色常亮
|
||||
undefined: '#3b82f6', // 默认普通设备 - 蓝色常亮
|
||||
null: '#3b82f6'
|
||||
};
|
||||
return statusColorMap[status] || '#3b82f6';
|
||||
};
|
||||
|
||||
// 获取设备类型对应的颜色主题
|
||||
const getDeviceTypeTheme = (type) => {
|
||||
const themeMap = {
|
||||
'server': {
|
||||
borderColor: '#38bdf8',
|
||||
accentColor: '#0ea5e9',
|
||||
glowColor: 'rgba(56, 189, 248, 0.3)',
|
||||
iconColor: '#38bdf8',
|
||||
label: '服务器'
|
||||
},
|
||||
'switch': {
|
||||
borderColor: '#22c55e',
|
||||
accentColor: '#16a34a',
|
||||
glowColor: 'rgba(34, 197, 94, 0.3)',
|
||||
iconColor: '#22c55e',
|
||||
label: '交换机'
|
||||
},
|
||||
'router': {
|
||||
borderColor: '#f59e0b',
|
||||
accentColor: '#d97706',
|
||||
glowColor: 'rgba(245, 158, 11, 0.3)',
|
||||
iconColor: '#f59e0b',
|
||||
label: '路由器'
|
||||
},
|
||||
'storage': {
|
||||
borderColor: '#8b5cf6',
|
||||
accentColor: '#7c3aed',
|
||||
glowColor: 'rgba(139, 92, 246, 0.3)',
|
||||
iconColor: '#8b5cf6',
|
||||
label: '存储'
|
||||
},
|
||||
'firewall': {
|
||||
borderColor: '#ef4444',
|
||||
accentColor: '#dc2626',
|
||||
glowColor: 'rgba(239, 68, 68, 0.3)',
|
||||
iconColor: '#ef4444',
|
||||
label: '防火墙'
|
||||
},
|
||||
'ups': {
|
||||
borderColor: '#14b8a6',
|
||||
accentColor: '#0d9488',
|
||||
glowColor: 'rgba(20, 184, 166, 0.3)',
|
||||
iconColor: '#14b8a6',
|
||||
label: 'UPS'
|
||||
},
|
||||
'pdus': {
|
||||
borderColor: '#64748b',
|
||||
accentColor: '#475569',
|
||||
glowColor: 'rgba(100, 116, 139, 0.3)',
|
||||
iconColor: '#64748b',
|
||||
label: 'PDU'
|
||||
},
|
||||
'other': {
|
||||
borderColor: '#94a3b8',
|
||||
accentColor: '#64748b',
|
||||
glowColor: 'rgba(148, 163, 184, 0.3)',
|
||||
iconColor: '#94a3b8',
|
||||
label: '其他'
|
||||
}
|
||||
};
|
||||
return themeMap[type?.toLowerCase()] || themeMap['other'];
|
||||
};
|
||||
|
||||
// 生成模拟监控数据
|
||||
const generateMonitoringData = (device) => {
|
||||
const baseTemp = device.type?.includes('服务器') ? 65 :
|
||||
@@ -1987,4 +2001,4 @@ function RackVisualization() {
|
||||
);
|
||||
}
|
||||
|
||||
export default RackVisualization;
|
||||
export default React.memo(RackVisualization);
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Select, DatePicker, message, Card, Space, Tag, Dropdown, Menu, Tabs, Timeline, Descriptions } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined, MoreOutlined, UserOutlined, ToolOutlined, CheckCircleOutlined, SyncOutlined, ClockCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
@@ -9,6 +9,46 @@ const { RangePicker } = DatePicker;
|
||||
const { TextArea } = Input;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
pending: 'orange',
|
||||
in_progress: 'processing',
|
||||
completed: 'green',
|
||||
closed: 'default'
|
||||
};
|
||||
return colors[status] || 'default';
|
||||
};
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const texts = {
|
||||
pending: '待处理',
|
||||
in_progress: '处理中',
|
||||
completed: '已完成',
|
||||
closed: '已关闭'
|
||||
};
|
||||
return texts[status] || status;
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority) => {
|
||||
const colors = {
|
||||
low: 'green',
|
||||
medium: 'orange',
|
||||
high: 'red',
|
||||
urgent: 'magenta'
|
||||
};
|
||||
return colors[priority] || 'default';
|
||||
};
|
||||
|
||||
const getPriorityText = (priority) => {
|
||||
const texts = {
|
||||
low: '低',
|
||||
medium: '中',
|
||||
high: '高',
|
||||
urgent: '紧急'
|
||||
};
|
||||
return texts[priority] || priority;
|
||||
};
|
||||
|
||||
function TicketManagement() {
|
||||
const [tickets, setTickets] = useState([]);
|
||||
const [devices, setDevices] = useState([]);
|
||||
@@ -35,7 +75,7 @@ function TicketManagement() {
|
||||
|
||||
const [searchFilters, setSearchFilters] = useState({});
|
||||
|
||||
const fetchTickets = async (page = 1, pageSize = 10, filters = {}) => {
|
||||
const fetchTickets = useCallback(async (page = 1, pageSize = 10, filters = {}) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const params = {
|
||||
@@ -56,27 +96,27 @@ function TicketManagement() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [searchFilters]);
|
||||
|
||||
const fetchDevices = async () => {
|
||||
const fetchDevices = useCallback(async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/devices', { params: { pageSize: 1000 } });
|
||||
setDevices(response.data.devices || []);
|
||||
} catch (error) {
|
||||
console.error('获取设备列表失败:', error);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const fetchCategories = async () => {
|
||||
const fetchCategories = useCallback(async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/ticket-categories');
|
||||
setCategories(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('获取分类列表失败:', error);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const fetchTicketDetail = async (ticketId) => {
|
||||
const fetchTicketDetail = useCallback(async (ticketId) => {
|
||||
try {
|
||||
const [ticketRes, operationsRes] = await Promise.all([
|
||||
axios.get(`/api/tickets/${ticketId}`),
|
||||
@@ -90,15 +130,15 @@ function TicketManagement() {
|
||||
message.error('获取工单详情失败');
|
||||
console.error('获取工单详情失败:', error);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTickets();
|
||||
fetchDevices();
|
||||
fetchCategories();
|
||||
}, []);
|
||||
}, [fetchTickets, fetchDevices, fetchCategories]);
|
||||
|
||||
const showModal = (ticket = null) => {
|
||||
const showModal = useCallback((ticket = null) => {
|
||||
setEditingTicket(ticket);
|
||||
if (ticket) {
|
||||
const ticketData = { ...ticket };
|
||||
@@ -113,14 +153,14 @@ function TicketManagement() {
|
||||
form.resetFields();
|
||||
}
|
||||
setModalVisible(true);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleCancel = () => {
|
||||
const handleCancel = useCallback(() => {
|
||||
setModalVisible(false);
|
||||
setEditingTicket(null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
const handleSubmit = useCallback(async (values) => {
|
||||
try {
|
||||
const ticketData = {
|
||||
...values,
|
||||
@@ -146,9 +186,9 @@ function TicketManagement() {
|
||||
message.error(editingTicket ? '工单更新失败' : '工单创建失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
}, [editingTicket, fetchTickets]);
|
||||
|
||||
const handleDelete = async (ticketId) => {
|
||||
const handleDelete = useCallback(async (ticketId) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个工单吗？',
|
||||
@@ -166,15 +206,15 @@ function TicketManagement() {
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}, [fetchTickets]);
|
||||
|
||||
const handleProcess = (ticket) => {
|
||||
const handleProcess = useCallback((ticket) => {
|
||||
setSelectedTicket(ticket);
|
||||
processForm.resetFields();
|
||||
setProcessingModalVisible(true);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleProcessSubmit = async (values) => {
|
||||
const handleProcessSubmit = useCallback(async (values) => {
|
||||
try {
|
||||
await axios.put(`/api/tickets/${selectedTicket.ticketId}/process`, {
|
||||
...values,
|
||||
@@ -188,9 +228,9 @@ function TicketManagement() {
|
||||
message.error('处理失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
}, [selectedTicket, fetchTickets]);
|
||||
|
||||
const handleStatusChange = async (ticketId, newStatus) => {
|
||||
const handleStatusChange = useCallback(async (ticketId, newStatus) => {
|
||||
try {
|
||||
await axios.put(`/api/tickets/${ticketId}/status`, {
|
||||
status: newStatus,
|
||||
@@ -203,65 +243,25 @@ function TicketManagement() {
|
||||
message.error('状态更新失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
}, [fetchTickets]);
|
||||
|
||||
const handleSearch = (values) => {
|
||||
const handleSearch = useCallback((values) => {
|
||||
setSearchFilters(values);
|
||||
fetchTickets(1, pagination.pageSize, values);
|
||||
};
|
||||
}, [fetchTickets, pagination.pageSize]);
|
||||
|
||||
const handleReset = () => {
|
||||
const handleReset = useCallback(() => {
|
||||
searchForm.resetFields();
|
||||
setSearchFilters({});
|
||||
fetchTickets(1, pagination.pageSize, {});
|
||||
};
|
||||
}, [fetchTickets, pagination.pageSize]);
|
||||
|
||||
const handleTableChange = (paginationInfo) => {
|
||||
const handleTableChange = useCallback((paginationInfo) => {
|
||||
setPagination(paginationInfo);
|
||||
fetchTickets(paginationInfo.current, paginationInfo.pageSize, searchFilters);
|
||||
};
|
||||
}, [fetchTickets, searchFilters]);
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
pending: 'orange',
|
||||
in_progress: 'processing',
|
||||
completed: 'green',
|
||||
closed: 'default'
|
||||
};
|
||||
return colors[status] || 'default';
|
||||
};
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const texts = {
|
||||
pending: '待处理',
|
||||
in_progress: '处理中',
|
||||
completed: '已完成',
|
||||
closed: '已关闭'
|
||||
};
|
||||
return texts[status] || status;
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority) => {
|
||||
const colors = {
|
||||
low: 'green',
|
||||
medium: 'orange',
|
||||
high: 'red',
|
||||
urgent: 'magenta'
|
||||
};
|
||||
return colors[priority] || 'default';
|
||||
};
|
||||
|
||||
const getPriorityText = (priority) => {
|
||||
const texts = {
|
||||
low: '低',
|
||||
medium: '中',
|
||||
high: '高',
|
||||
urgent: '紧急'
|
||||
};
|
||||
return texts[priority] || priority;
|
||||
};
|
||||
|
||||
const columns = [
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
title: '工单编号',
|
||||
dataIndex: 'ticketId',
|
||||
@@ -404,7 +404,7 @@ function TicketManagement() {
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
];
|
||||
], [fetchTicketDetail, handleStatusChange, handleDelete]);
|
||||
|
||||
return (
|
||||
<div style={{ padding: 24 }}>
|
||||
@@ -651,4 +651,4 @@ function TicketManagement() {
|
||||
);
|
||||
}
|
||||
|
||||
export default TicketManagement;
|
||||
export default React.memo(TicketManagement);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Card, Row, Col, Statistic, Table, DatePicker, Select, Space, Tag, message } from 'antd';
|
||||
import { BarChartOutlined, PieChartOutlined, RiseOutlined, FallOutlined, ClockCircleOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
@@ -7,6 +7,48 @@ import dayjs from 'dayjs';
|
||||
const { RangePicker } = DatePicker;
|
||||
const { Option } = Select;
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
pending: 'orange',
|
||||
assigned: 'blue',
|
||||
in_progress: 'processing',
|
||||
completed: 'green',
|
||||
closed: 'default'
|
||||
};
|
||||
return colors[status] || 'default';
|
||||
};
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const texts = {
|
||||
pending: '待处理',
|
||||
assigned: '已分配',
|
||||
in_progress: '处理中',
|
||||
completed: '已完成',
|
||||
closed: '已关闭'
|
||||
};
|
||||
return texts[status] || status;
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority) => {
|
||||
const colors = {
|
||||
low: 'green',
|
||||
medium: 'orange',
|
||||
high: 'red',
|
||||
urgent: 'magenta'
|
||||
};
|
||||
return colors[priority] || 'default';
|
||||
};
|
||||
|
||||
const getPriorityText = (priority) => {
|
||||
const texts = {
|
||||
low: '低',
|
||||
medium: '中',
|
||||
high: '高',
|
||||
urgent: '紧急'
|
||||
};
|
||||
return texts[priority] || priority;
|
||||
};
|
||||
|
||||
function TicketStatistics() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dateRange, setDateRange] = useState([
|
||||
@@ -27,7 +69,7 @@ function TicketStatistics() {
|
||||
trend: []
|
||||
});
|
||||
|
||||
const fetchStatistics = async () => {
|
||||
const fetchStatistics = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const params = {
|
||||
@@ -43,17 +85,17 @@ function TicketStatistics() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [dateRange]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStatistics();
|
||||
}, [dateRange]);
|
||||
}, [fetchStatistics]);
|
||||
|
||||
const handleDateChange = (dates) => {
|
||||
const handleDateChange = useCallback((dates) => {
|
||||
if (dates) {
|
||||
setDateRange(dates);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
@@ -97,7 +139,7 @@ function TicketStatistics() {
|
||||
return texts[priority] || priority;
|
||||
};
|
||||
|
||||
const statusColumns = [
|
||||
const statusColumns = useMemo(() => [
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
@@ -127,9 +169,9 @@ function TicketStatistics() {
|
||||
</span>
|
||||
)
|
||||
}
|
||||
];
|
||||
], []);
|
||||
|
||||
const categoryColumns = [
|
||||
const categoryColumns = useMemo(() => [
|
||||
{
|
||||
title: '故障分类',
|
||||
dataIndex: 'category',
|
||||
@@ -164,38 +206,9 @@ function TicketStatistics() {
|
||||
width: 150,
|
||||
render: (time) => time !== undefined && time !== null ? time.toFixed(1) : '-'
|
||||
}
|
||||
];
|
||||
], []);
|
||||
|
||||
const deviceColumns = [
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'deviceName',
|
||||
key: 'deviceName',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'count',
|
||||
key: 'count',
|
||||
width: 100,
|
||||
render: (count) => <Tag color="red">{count}</Tag>
|
||||
},
|
||||
{
|
||||
title: '最后故障时间',
|
||||
dataIndex: 'lastFaultTime',
|
||||
key: 'lastFaultTime',
|
||||
width: 160,
|
||||
render: (text) => text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'deviceType',
|
||||
key: 'deviceType',
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const priorityColumns = [
|
||||
const priorityColumns = useMemo(() => [
|
||||
{
|
||||
title: '优先级',
|
||||
dataIndex: 'priority',
|
||||
@@ -228,7 +241,36 @@ function TicketStatistics() {
|
||||
width: 150,
|
||||
render: (time) => time !== undefined && time !== null ? time.toFixed(1) : '-'
|
||||
}
|
||||
];
|
||||
], []);
|
||||
|
||||
const deviceColumns = useMemo(() => [
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'deviceName',
|
||||
key: 'deviceName',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'count',
|
||||
key: 'count',
|
||||
width: 100,
|
||||
render: (count) => <Tag color="red">{count}</Tag>
|
||||
},
|
||||
{
|
||||
title: '最后故障时间',
|
||||
dataIndex: 'lastFaultTime',
|
||||
key: 'lastFaultTime',
|
||||
width: 160,
|
||||
render: (text) => text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'deviceType',
|
||||
key: 'deviceType',
|
||||
width: 100
|
||||
}
|
||||
], []);
|
||||
|
||||
const simpleBarData = [
|
||||
{ name: '待处理', value: statistics.pending },
|
||||
@@ -454,4 +496,4 @@ function TicketStatistics() {
|
||||
);
|
||||
}
|
||||
|
||||
export default TicketStatistics;
|
||||
export default React.memo(TicketStatistics);
|
||||
|
||||
+25
-1
@@ -19,6 +19,30 @@ export default defineConfig({
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: true
|
||||
sourcemap: false,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'antd': ['antd', '@ant-design/icons'],
|
||||
'vendor': ['react', 'react-dom', 'react-router-dom'],
|
||||
'charts': ['axios', 'dayjs'],
|
||||
'utils': ['three', 'xlsx']
|
||||
},
|
||||
chunkFileNames: 'js/[name]-[hash].js',
|
||||
entryFileNames: 'js/[name]-[hash].js',
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]',
|
||||
compact: true
|
||||
}
|
||||
},
|
||||
minify: 'terser',
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
}
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['antd', '@ant-design/icons', 'axios', 'react-router-dom']
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user