1305 lines
42 KiB
React
1305 lines
42 KiB
React
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||
import { useDebounce } from '../hooks/useDebounce';
|
||
import {
|
||
Table,
|
||
Button,
|
||
Modal,
|
||
Form,
|
||
Input,
|
||
Select,
|
||
message,
|
||
Card,
|
||
Space,
|
||
InputNumber,
|
||
Progress,
|
||
Drawer,
|
||
Tag,
|
||
Tooltip,
|
||
Row,
|
||
Col,
|
||
Typography,
|
||
Empty,
|
||
Badge,
|
||
Checkbox,
|
||
Dropdown,
|
||
Statistic,
|
||
Spin,
|
||
Pagination,
|
||
} from 'antd';
|
||
import {
|
||
PlusOutlined,
|
||
EditOutlined,
|
||
DeleteOutlined,
|
||
UploadOutlined,
|
||
DownloadOutlined,
|
||
SearchOutlined,
|
||
ReloadOutlined,
|
||
EyeOutlined,
|
||
DatabaseOutlined,
|
||
HomeOutlined,
|
||
ThunderboltOutlined,
|
||
ExpandOutlined,
|
||
CompressOutlined,
|
||
MoreOutlined,
|
||
CheckCircleOutlined,
|
||
WarningOutlined,
|
||
SyncOutlined,
|
||
LineChartOutlined,
|
||
FilterOutlined,
|
||
DeleteFilled,
|
||
} from '@ant-design/icons';
|
||
import { designTokens } from '../config/theme';
|
||
import CloseButton from '../components/CloseButton';
|
||
import RackImportModal from '../components/rack/RackImportModal';
|
||
import api from '../api';
|
||
|
||
const { Option } = Select;
|
||
const { Title, Text } = Typography;
|
||
|
||
const containerStyle = {
|
||
minHeight: '100vh',
|
||
background: 'linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%)',
|
||
padding: '24px',
|
||
};
|
||
|
||
const headerStyle = {
|
||
marginBottom: '24px',
|
||
padding: '24px',
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
borderRadius: '20px',
|
||
color: '#fff',
|
||
boxShadow: '0 8px 32px rgba(102, 126, 234, 0.3)',
|
||
};
|
||
|
||
const statCardStyle = {
|
||
background: 'rgba(255, 255, 255, 0.15)',
|
||
borderRadius: designTokens.borderRadius.medium,
|
||
padding: '16px',
|
||
border: '1px solid rgba(255, 255, 255, 0.2)',
|
||
backdropFilter: 'blur(10px)',
|
||
};
|
||
|
||
const cardStyle = {
|
||
borderRadius: designTokens.borderRadius.large,
|
||
border: 'none',
|
||
boxShadow: designTokens.shadows.medium,
|
||
background: '#fff',
|
||
overflow: 'hidden',
|
||
};
|
||
|
||
const cardHeadStyle = {
|
||
borderBottom: '1px solid #f0f0f0',
|
||
padding: '16px 24px',
|
||
background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)',
|
||
};
|
||
|
||
const primaryButtonStyle = {
|
||
height: '42px',
|
||
borderRadius: '10px',
|
||
background: designTokens.colors.primary.gradient,
|
||
border: 'none',
|
||
boxShadow: '0 4px 16px rgba(102, 126, 234, 0.35)',
|
||
fontWeight: '500',
|
||
};
|
||
|
||
const actionButtonStyle = {
|
||
height: '36px',
|
||
borderRadius: '8px',
|
||
border: '1px solid #e8e8e8',
|
||
};
|
||
|
||
const searchInputStyle = {
|
||
borderRadius: '10px',
|
||
height: '42px',
|
||
border: '1px solid #e8e8e8',
|
||
};
|
||
|
||
const statusConfig = {
|
||
active: { text: '在用', color: 'success', icon: <CheckCircleOutlined /> },
|
||
maintenance: { text: '维护中', color: 'warning', icon: <SyncOutlined spin /> },
|
||
inactive: { text: '停用', color: 'default', icon: <WarningOutlined /> },
|
||
};
|
||
|
||
const PowerGauge = ({ current, max }) => {
|
||
const percentage = Math.min((current / max) * 100, 100);
|
||
const getColor = () => {
|
||
if (percentage >= 80) return designTokens.colors.error.main;
|
||
if (percentage >= 60) return designTokens.colors.warning.main;
|
||
return designTokens.colors.success.main;
|
||
};
|
||
|
||
return (
|
||
<div style={{ width: '100%' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
|
||
<Text style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>
|
||
{current} / {max} W
|
||
</Text>
|
||
<Text style={{ fontSize: '13px', fontWeight: '600', color: getColor() }}>
|
||
{percentage.toFixed(1)}%
|
||
</Text>
|
||
</div>
|
||
<Progress
|
||
percent={percentage}
|
||
showInfo={false}
|
||
strokeColor={getColor()}
|
||
trailColor="#f0f0f0"
|
||
strokeLinecap="round"
|
||
size="small"
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const RackCard = ({ rack, onEdit, onDelete, onView, selected, onSelect }) => {
|
||
const usedU = rack.Devices?.reduce((sum, d) => sum + (d.height || 1), 0) || 0;
|
||
const powerUsage = (rack.currentPower / rack.maxPower) * 100;
|
||
const statusInfo = statusConfig[rack.status];
|
||
const availableU = rack.height - usedU;
|
||
|
||
return (
|
||
<Card
|
||
hoverable
|
||
style={{
|
||
borderRadius: designTokens.borderRadius.medium,
|
||
border: selected ? `2px solid ${designTokens.colors.primary.main}` : '1px solid #f0f0f0',
|
||
boxShadow: designTokens.shadows.small,
|
||
transition: `all ${designTokens.transitions.normal}`,
|
||
cursor: 'pointer',
|
||
}}
|
||
onClick={() => onSelect(rack.rackId)}
|
||
onDoubleClick={() => onView(rack)}
|
||
styles={{ body: { padding: '20px' } }}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'flex-start',
|
||
marginBottom: '16px',
|
||
}}
|
||
>
|
||
<div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
|
||
<DatabaseOutlined
|
||
style={{ fontSize: '20px', color: designTokens.colors.purple.main }}
|
||
/>
|
||
<Text strong style={{ fontSize: '16px', color: designTokens.colors.text.primary }}>
|
||
{rack.name}
|
||
</Text>
|
||
</div>
|
||
<Text type="secondary" style={{ fontSize: '13px' }}>
|
||
{rack.rackId}
|
||
</Text>
|
||
</div>
|
||
<Tag color={statusInfo.color} icon={statusInfo.icon} style={{ borderRadius: '20px' }}>
|
||
{statusInfo.text}
|
||
</Tag>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
|
||
<HomeOutlined style={{ color: designTokens.colors.text.tertiary }} />
|
||
<Text style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>
|
||
{rack.Room?.name || '未分配'}
|
||
</Text>
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: '1fr 1fr',
|
||
gap: '12px',
|
||
marginBottom: '16px',
|
||
}}
|
||
>
|
||
<div style={{ padding: '12px', background: '#fafafa', borderRadius: '8px' }}>
|
||
<Text type="secondary" style={{ fontSize: '11px' }}>
|
||
高度/已用U位
|
||
</Text>
|
||
<div
|
||
style={{ fontSize: '14px', fontWeight: '600', color: designTokens.colors.text.primary }}
|
||
>
|
||
{rack.height}U / {usedU}
|
||
</div>
|
||
<Progress
|
||
percent={rack.height > 0 ? Math.min((usedU / rack.height) * 100, 100) : 0}
|
||
showInfo={false}
|
||
size="small"
|
||
strokeColor={usedU / rack.height >= 0.8 ? '#ff4d4f' : usedU / rack.height >= 0.6 ? '#faad14' : '#52c41a'}
|
||
style={{ marginTop: '4px' }}
|
||
/>
|
||
</div>
|
||
<div style={{ padding: '12px', background: '#fafafa', borderRadius: '8px' }}>
|
||
<Text type="secondary" style={{ fontSize: '11px' }}>
|
||
功率使用
|
||
</Text>
|
||
<div
|
||
style={{
|
||
fontSize: '14px',
|
||
fontWeight: '600',
|
||
color:
|
||
powerUsage >= 80
|
||
? designTokens.colors.error.main
|
||
: designTokens.colors.text.primary,
|
||
}}
|
||
>
|
||
{powerUsage.toFixed(1)}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<PowerGauge current={rack.currentPower} max={rack.maxPower} />
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||
最大功率: {rack.maxPower}W
|
||
</Text>
|
||
<Space>
|
||
<Tooltip title="查看详情">
|
||
<Button
|
||
type="text"
|
||
icon={<EyeOutlined />}
|
||
onClick={e => {
|
||
e.stopPropagation();
|
||
onView(rack);
|
||
}}
|
||
style={{ color: designTokens.colors.text.secondary }}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title="编辑">
|
||
<Button
|
||
type="text"
|
||
icon={<EditOutlined />}
|
||
onClick={e => {
|
||
e.stopPropagation();
|
||
onEdit(rack);
|
||
}}
|
||
style={{ color: designTokens.colors.primary.main }}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title="删除">
|
||
<Button
|
||
type="text"
|
||
icon={<DeleteOutlined />}
|
||
danger
|
||
onClick={e => {
|
||
e.stopPropagation();
|
||
onDelete(rack.rackId);
|
||
}}
|
||
/>
|
||
</Tooltip>
|
||
</Space>
|
||
</div>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
function RackManagement() {
|
||
const [racks, setRacks] = useState([]);
|
||
const [rooms, setRooms] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [modalVisible, setModalVisible] = useState(false);
|
||
const [drawerVisible, setDrawerVisible] = useState(false);
|
||
const [importModalVisible, setImportModalVisible] = useState(false);
|
||
const [editingRack, setEditingRack] = useState(null);
|
||
const [viewingRack, setViewingRack] = useState(null);
|
||
const [selectedRackIds, setSelectedRackIds] = useState([]);
|
||
const [viewMode, setViewMode] = useState('table');
|
||
const [searchKeyword, setSearchKeyword] = useState('');
|
||
const debouncedSearchKeyword = useDebounce(searchKeyword, 300);
|
||
const [statusFilter, setStatusFilter] = useState('all');
|
||
const [roomFilter, setRoomFilter] = useState('all');
|
||
const [stats, setStats] = useState({ total: 0, active: 0, totalPower: 0, totalDevices: 0 });
|
||
const [pagination, setPagination] = useState({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
pageSizeOptions: ['10', '20', '30', '50', '100'],
|
||
showSizeChanger: true,
|
||
showTotal: total => `共 ${total} 条记录`,
|
||
});
|
||
const [form] = Form.useForm();
|
||
|
||
const fetchRacks = useCallback(
|
||
async (page = 1, pageSize = 10) => {
|
||
try {
|
||
setLoading(true);
|
||
const [racksRes, statsRes] = await Promise.all([
|
||
api.get('/racks', {
|
||
params: {
|
||
page,
|
||
pageSize,
|
||
roomId: roomFilter,
|
||
status: statusFilter,
|
||
keyword: debouncedSearchKeyword || undefined,
|
||
},
|
||
}),
|
||
api.get('/racks/stats', {
|
||
params: {
|
||
roomId: roomFilter,
|
||
status: statusFilter,
|
||
keyword: debouncedSearchKeyword || undefined,
|
||
},
|
||
}),
|
||
]);
|
||
const { racks: data, total } = racksRes;
|
||
setRacks(data);
|
||
setPagination(prev => ({ ...prev, current: page, pageSize, total }));
|
||
setStats(statsRes);
|
||
} catch (error) {
|
||
message.error('获取机柜列表失败');
|
||
console.error('获取机柜列表失败:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
},
|
||
[roomFilter, statusFilter, debouncedSearchKeyword]
|
||
);
|
||
|
||
const fetchRooms = useCallback(async () => {
|
||
try {
|
||
const response = await api.get('/rooms');
|
||
setRooms(response.rooms || []);
|
||
} catch (error) {
|
||
message.error('获取机房列表失败');
|
||
console.error('获取机房列表失败:', error);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
fetchRacks(pagination.current, pagination.pageSize);
|
||
fetchRooms();
|
||
}, [fetchRacks, fetchRooms]);
|
||
|
||
// 当筛选条件变化时，重置到第一页并重新加载
|
||
useEffect(() => {
|
||
setPagination(prev => ({ ...prev, current: 1 }));
|
||
fetchRacks(1, pagination.pageSize);
|
||
}, [roomFilter, statusFilter, debouncedSearchKeyword]);
|
||
|
||
const handleTableChange = useCallback(
|
||
pagination => {
|
||
fetchRacks(pagination.current, pagination.pageSize);
|
||
},
|
||
[fetchRacks]
|
||
);
|
||
|
||
const showModal = (rack = null) => {
|
||
setEditingRack(rack);
|
||
if (rack) {
|
||
form.setFieldsValue(rack);
|
||
} else {
|
||
form.resetFields();
|
||
}
|
||
setModalVisible(true);
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
setModalVisible(false);
|
||
setEditingRack(null);
|
||
};
|
||
|
||
const handleSubmit = async values => {
|
||
try {
|
||
if (editingRack) {
|
||
await api.put(`/racks/${editingRack.rackId}`, values);
|
||
message.success('机柜更新成功');
|
||
} else {
|
||
await api.post('/racks', values);
|
||
message.success('机柜创建成功');
|
||
}
|
||
setModalVisible(false);
|
||
fetchRacks();
|
||
setEditingRack(null);
|
||
} catch (error) {
|
||
message.error(editingRack ? '机柜更新失败' : '机柜创建失败');
|
||
console.error(editingRack ? '机柜更新失败:' : '机柜创建失败:', error);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async rackId => {
|
||
Modal.confirm({
|
||
title: '确认删除',
|
||
content: '确定要删除这个机柜吗？删除后无法恢复。',
|
||
okText: '删除',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
try {
|
||
await api.delete(`/racks/${rackId}`);
|
||
message.success('机柜删除成功');
|
||
fetchRacks();
|
||
} catch (error) {
|
||
const errorMsg = error.response?.data?.error || '机柜删除失败';
|
||
message.error(errorMsg);
|
||
console.error('机柜删除失败:', error);
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleBatchDelete = async () => {
|
||
if (selectedRackIds.length === 0) {
|
||
message.warning('请先选择要删除的机柜');
|
||
return;
|
||
}
|
||
|
||
Modal.confirm({
|
||
title: '批量删除',
|
||
content: `确定要删除选中的 ${selectedRackIds.length} 个机柜吗？`,
|
||
okText: '删除',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
try {
|
||
const results = await Promise.allSettled(
|
||
selectedRackIds.map(id => api.delete(`/racks/${id}`))
|
||
);
|
||
const succeeded = results.filter(r => r.status === 'fulfilled').length;
|
||
const failed = results.filter(r => r.status === 'rejected');
|
||
if (succeeded > 0) {
|
||
message.success(`成功删除 ${succeeded} 个机柜`);
|
||
}
|
||
if (failed.length > 0) {
|
||
const firstError = failed[0].reason.error || '部分机柜删除失败';
|
||
message.error(`${firstError}（${failed.length} 个失败）`);
|
||
}
|
||
setSelectedRackIds([]);
|
||
fetchRacks();
|
||
} catch (error) {
|
||
message.error('批量删除失败');
|
||
console.error('批量删除失败:', error);
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleView = rack => {
|
||
setViewingRack(rack);
|
||
setDrawerVisible(true);
|
||
};
|
||
|
||
const handleDownloadTemplate = useCallback(async () => {
|
||
try {
|
||
message.loading('正在下载模板...', 0);
|
||
|
||
const response = await api.get('/racks/import-template', {
|
||
responseType: 'blob',
|
||
});
|
||
|
||
// 创建下载链接
|
||
const blob = new Blob([response.data], {
|
||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||
});
|
||
const url = window.URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.setAttribute('download', '机柜导入模板.xlsx');
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
window.URL.revokeObjectURL(url);
|
||
|
||
message.destroy();
|
||
message.success('模板下载成功');
|
||
} catch (error) {
|
||
message.destroy();
|
||
message.error('模板下载失败');
|
||
console.error('模板下载失败:', error);
|
||
}
|
||
}, []);
|
||
|
||
// 导出租机柜数据
|
||
const handleExport = useCallback(async () => {
|
||
try {
|
||
const hasSelection = selectedRackIds.length > 0;
|
||
message.loading(hasSelection ? '正在导出选中机柜数据...' : '正在导出全部机柜数据...', 0);
|
||
|
||
const response = await api.get('/racks/export', {
|
||
params: hasSelection ? { rackIds: selectedRackIds.join(',') } : {},
|
||
responseType: 'blob',
|
||
});
|
||
|
||
// 创建下载链接
|
||
const blob = new Blob([response.data], {
|
||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||
});
|
||
const url = window.URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
|
||
// 从响应头获取文件名，或使用默认文件名
|
||
const contentDisposition = response.headers['content-disposition'];
|
||
let fileName = '机柜导出.xlsx';
|
||
if (contentDisposition) {
|
||
const match = contentDisposition.match(/filename\*?=(?:UTF-8'')?([^;]+)/);
|
||
if (match) {
|
||
fileName = decodeURIComponent(match[1].replace(/['"]/g, ''));
|
||
}
|
||
}
|
||
|
||
link.setAttribute('download', fileName);
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
window.URL.revokeObjectURL(url);
|
||
|
||
message.destroy();
|
||
message.success(hasSelection ? `已导出 ${selectedRackIds.length} 个选中机柜` : '已导出全部机柜');
|
||
} catch (error) {
|
||
message.destroy();
|
||
message.error('机柜导出失败');
|
||
console.error('机柜导出失败:', error);
|
||
}
|
||
}, [selectedRackIds]);
|
||
|
||
const handleImport = useCallback(
|
||
(file, { onProgress } = {}) => {
|
||
return new Promise((resolve, reject) => {
|
||
const doImport = async () => {
|
||
try {
|
||
onProgress?.(10, '正在上传文件...');
|
||
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
onProgress?.(50, '正在处理数据...');
|
||
|
||
const response = await api.post('/racks/import', formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
});
|
||
|
||
onProgress?.(100, '导入完成');
|
||
|
||
const resData = response;
|
||
const importResult = {
|
||
total: resData.total || 0,
|
||
successCount: resData.imported || 0,
|
||
duplicates: resData.duplicates || 0,
|
||
failedCount: 0,
|
||
errors: [],
|
||
createdRacks: resData.createdRacks || [],
|
||
skippedRacks: resData.skippedRacks || [],
|
||
};
|
||
|
||
if (resData.details && Array.isArray(resData.details)) {
|
||
importResult.failedCount = resData.details.length;
|
||
importResult.errors = resData.details.map(item => ({
|
||
row: item.row,
|
||
error: item.errors.join('；'),
|
||
}));
|
||
}
|
||
|
||
if (resData.success) {
|
||
message.success('机柜导入成功');
|
||
} else {
|
||
message.warning(resData.message || '部分记录导入失败');
|
||
}
|
||
|
||
fetchRacks();
|
||
resolve(importResult);
|
||
} catch (error) {
|
||
const errorData = error.response?.data;
|
||
if (errorData?.details && Array.isArray(errorData.details)) {
|
||
const importResult = {
|
||
total: errorData.total || 0,
|
||
successCount: 0,
|
||
failedCount: errorData.details.length,
|
||
errors: errorData.details.map(item => ({
|
||
row: item.row,
|
||
error: item.errors.join('；'),
|
||
})),
|
||
};
|
||
resolve(importResult);
|
||
} else {
|
||
message.error(errorData?.error || errorData?.message || '机柜导入失败');
|
||
console.error('机柜导入失败:', error);
|
||
reject(new Error(errorData?.error || errorData?.message || '机柜导入失败'));
|
||
}
|
||
}
|
||
};
|
||
|
||
doImport();
|
||
});
|
||
},
|
||
[fetchRacks]
|
||
);
|
||
|
||
// 后端已过滤，直接使用 racks 数据
|
||
const tableColumns = [
|
||
{
|
||
title: '机柜信息',
|
||
key: 'rackInfo',
|
||
render: (_, record) => (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||
<div
|
||
style={{
|
||
width: '44px',
|
||
height: '44px',
|
||
borderRadius: '10px',
|
||
background: 'linear-gradient(135deg, #722ed115 0%, #722ed108 100%)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}
|
||
>
|
||
<DatabaseOutlined
|
||
style={{ fontSize: '22px', color: designTokens.colors.purple.main }}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<div style={{ fontWeight: '600', color: designTokens.colors.text.primary }}>
|
||
{record.name}
|
||
</div>
|
||
<div style={{ fontSize: '12px', color: designTokens.colors.text.tertiary }}>
|
||
{record.rackId}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
title: '所属机房',
|
||
dataIndex: ['Room', 'name'],
|
||
key: 'room',
|
||
render: (name, record) => (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
||
<HomeOutlined style={{ color: designTokens.colors.text.tertiary }} />
|
||
<span>{name || '未分配'}</span>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
title: '高度/已用U位',
|
||
key: 'heightUsage',
|
||
render: (_, record) => {
|
||
const used = record.Devices?.reduce((sum, d) => sum + (d.height || 1), 0) || 0;
|
||
const percentage = record.height > 0 ? Math.min((used / record.height) * 100, 100) : 0;
|
||
return (
|
||
<div style={{ minWidth: '120px' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
|
||
<Text style={{ fontSize: '13px' }}>
|
||
{record.height}U / 已用 {used}U
|
||
</Text>
|
||
<Text style={{ fontSize: '12px', color: percentage >= 80 ? '#ff4d4f' : percentage >= 60 ? '#faad14' : '#52c41a' }}>
|
||
{percentage.toFixed(0)}%
|
||
</Text>
|
||
</div>
|
||
<Progress
|
||
percent={percentage}
|
||
showInfo={false}
|
||
size="small"
|
||
strokeColor={percentage >= 80 ? '#ff4d4f' : percentage >= 60 ? '#faad14' : '#52c41a'}
|
||
/>
|
||
</div>
|
||
);
|
||
},
|
||
sorter: (a, b) =>
|
||
(a.Devices?.reduce((sum, d) => sum + (d.height || 1), 0) || 0) -
|
||
(b.Devices?.reduce((sum, d) => sum + (d.height || 1), 0) || 0),
|
||
},
|
||
{
|
||
title: '功率使用',
|
||
key: 'powerUsage',
|
||
render: (_, record) => (
|
||
<div style={{ minWidth: '120px' }}>
|
||
<PowerGauge current={record.currentPower} max={record.maxPower} />
|
||
</div>
|
||
),
|
||
sorter: (a, b) => (a.currentPower || 0) - (b.currentPower || 0),
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
render: status => {
|
||
const config = statusConfig[status];
|
||
return (
|
||
<Tag color={config.color} icon={config.icon} style={{ borderRadius: '20px' }}>
|
||
{config.text}
|
||
</Tag>
|
||
);
|
||
},
|
||
filters: [
|
||
{ text: '在用', value: 'active' },
|
||
{ text: '维护中', value: 'maintenance' },
|
||
{ text: '停用', value: 'inactive' },
|
||
],
|
||
onFilter: (value, record) => record.status === value,
|
||
},
|
||
{
|
||
title: '设备数',
|
||
key: 'deviceCount',
|
||
render: (_, record) => (
|
||
<Badge count={record.Devices?.length || 0} style={{ backgroundColor: '#52c41a' }} />
|
||
),
|
||
sorter: (a, b) => (a.Devices?.length || 0) - (b.Devices?.length || 0),
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'createdAt',
|
||
key: 'createdAt',
|
||
render: date => (date ? new Date(date).toLocaleString() : '-'),
|
||
sorter: (a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0),
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
fixed: 'right',
|
||
width: 160,
|
||
render: (_, record) => (
|
||
<Space>
|
||
<Tooltip title="查看">
|
||
<Button
|
||
type="text"
|
||
icon={<EyeOutlined />}
|
||
onClick={() => handleView(record)}
|
||
style={{ color: designTokens.colors.text.secondary }}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title="编辑">
|
||
<Button
|
||
type="text"
|
||
icon={<EditOutlined />}
|
||
onClick={() => showModal(record)}
|
||
style={{ color: designTokens.colors.primary.main }}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title="删除">
|
||
<Button
|
||
type="text"
|
||
icon={<DeleteOutlined />}
|
||
danger
|
||
onClick={() => handleDelete(record.rackId)}
|
||
/>
|
||
</Tooltip>
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
const rowSelection = {
|
||
selectedRowKeys: selectedRackIds,
|
||
onChange: selectedRowKeys => {
|
||
setSelectedRackIds(selectedRowKeys);
|
||
},
|
||
};
|
||
|
||
return (
|
||
<div style={containerStyle}>
|
||
<style>{`
|
||
.ant-modal-close {
|
||
top: 16px !important;
|
||
right: 16px !important;
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
line-height: 32px !important;
|
||
}
|
||
.ant-modal-close-x {
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
line-height: 32px !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
}
|
||
`}</style>
|
||
<div style={headerStyle}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
flexWrap: 'wrap',
|
||
gap: '16px',
|
||
}}
|
||
>
|
||
<div>
|
||
<h1
|
||
style={{
|
||
fontSize: '24px',
|
||
fontWeight: '700',
|
||
margin: '0 0 4px 0',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '12px',
|
||
}}
|
||
>
|
||
<DatabaseOutlined />
|
||
机柜管理
|
||
</h1>
|
||
<p style={{ margin: 0, opacity: 0.9, fontSize: '14px' }}>管理和监控所有机柜设备</p>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: '12px' }}>
|
||
<div style={statCardStyle}>
|
||
<Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>总机柜</Text>
|
||
<div style={{ fontSize: '24px', fontWeight: '700' }}>{stats.total}</div>
|
||
</div>
|
||
<div style={statCardStyle}>
|
||
<Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>在用机柜</Text>
|
||
<div style={{ fontSize: '24px', fontWeight: '700', color: '#52c41a' }}>
|
||
{stats.active}
|
||
</div>
|
||
</div>
|
||
<div style={statCardStyle}>
|
||
<Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>设备总数</Text>
|
||
<div style={{ fontSize: '24px', fontWeight: '700' }}>{stats.totalDevices}</div>
|
||
</div>
|
||
<div style={statCardStyle}>
|
||
<Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>总功率</Text>
|
||
<div style={{ fontSize: '24px', fontWeight: '700' }}>
|
||
{(stats.totalPower / 1000).toFixed(1)}kW
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Card style={cardStyle} styles={{ header: cardHeadStyle, body: { padding: '20px 24px' } }}>
|
||
<div
|
||
style={{
|
||
marginBottom: '20px',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
flexWrap: 'wrap',
|
||
gap: '16px',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', gap: '12px', flex: 1, maxWidth: '800px' }}>
|
||
<Input
|
||
placeholder="搜索机柜名称、ID..."
|
||
prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
|
||
value={searchKeyword}
|
||
onChange={e => setSearchKeyword(e.target.value)}
|
||
style={searchInputStyle}
|
||
allowClear
|
||
/>
|
||
<Select
|
||
value={statusFilter}
|
||
onChange={setStatusFilter}
|
||
style={{ width: '120px', height: '42px' }}
|
||
>
|
||
<Option value="all">全部状态</Option>
|
||
<Option value="active">在用</Option>
|
||
<Option value="maintenance">维护中</Option>
|
||
<Option value="inactive">停用</Option>
|
||
</Select>
|
||
<Select
|
||
value={roomFilter}
|
||
onChange={setRoomFilter}
|
||
style={{ width: '160px', height: '42px' }}
|
||
>
|
||
<Option value="all">全部机房</Option>
|
||
{rooms.map(room => (
|
||
<Option key={room.roomId} value={room.roomId}>
|
||
{room.name}
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: '12px' }}>
|
||
{selectedRackIds.length > 0 && (
|
||
<Button
|
||
danger
|
||
icon={<DeleteFilled />}
|
||
onClick={handleBatchDelete}
|
||
style={{ borderRadius: '10px', height: '42px' }}
|
||
>
|
||
批量删除 ({selectedRackIds.length})
|
||
</Button>
|
||
)}
|
||
<Button
|
||
icon={<ReloadOutlined />}
|
||
onClick={() => fetchRacks(pagination.current, pagination.pageSize)}
|
||
loading={loading}
|
||
style={actionButtonStyle}
|
||
>
|
||
刷新
|
||
</Button>
|
||
<Button
|
||
icon={<UploadOutlined />}
|
||
onClick={() => setImportModalVisible(true)}
|
||
style={actionButtonStyle}
|
||
>
|
||
导入
|
||
</Button>
|
||
<Button
|
||
icon={<DownloadOutlined />}
|
||
onClick={handleExport}
|
||
style={actionButtonStyle}
|
||
>
|
||
{selectedRackIds.length > 0 ? `导出选中 (${selectedRackIds.length})` : '导出全部'}
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
icon={<PlusOutlined />}
|
||
onClick={() => showModal()}
|
||
style={primaryButtonStyle}
|
||
>
|
||
添加机柜
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
|
||
<Button
|
||
type={viewMode === 'table' ? 'primary' : 'text'}
|
||
icon={<ExpandOutlined />}
|
||
onClick={() => setViewMode('table')}
|
||
style={viewMode === 'table' ? primaryButtonStyle : actionButtonStyle}
|
||
>
|
||
表格视图
|
||
</Button>
|
||
<Button
|
||
type={viewMode === 'card' ? 'primary' : 'text'}
|
||
icon={<CompressOutlined />}
|
||
onClick={() => setViewMode('card')}
|
||
style={viewMode === 'card' ? primaryButtonStyle : actionButtonStyle}
|
||
>
|
||
卡片视图
|
||
</Button>
|
||
</div>
|
||
|
||
{viewMode === 'table' ? (
|
||
<Table
|
||
columns={tableColumns}
|
||
dataSource={racks}
|
||
rowKey="rackId"
|
||
loading={loading}
|
||
rowSelection={rowSelection}
|
||
pagination={pagination}
|
||
onChange={handleTableChange}
|
||
scroll={{ x: 1200 }}
|
||
rowClassName={() => 'table-row'}
|
||
/>
|
||
) : (
|
||
<Row gutter={[16, 16]}>
|
||
{racks.length > 0 ? (
|
||
racks.map(rack => (
|
||
<Col xs={24} sm={12} lg={8} xl={6} key={rack.rackId}>
|
||
<RackCard
|
||
rack={rack}
|
||
onEdit={showModal}
|
||
onDelete={handleDelete}
|
||
onView={handleView}
|
||
selected={selectedRackIds.includes(rack.rackId)}
|
||
onSelect={id => {
|
||
if (selectedRackIds.includes(id)) {
|
||
setSelectedRackIds(selectedRackIds.filter(rid => rid !== id));
|
||
} else {
|
||
setSelectedRackIds([...selectedRackIds, id]);
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
))
|
||
) : (
|
||
<Col span={24}>
|
||
<Empty description="暂无机柜数据" style={{ padding: '60px 0' }} />
|
||
</Col>
|
||
)}
|
||
</Row>
|
||
)}
|
||
|
||
{/* 卡片视图分页 - 始终显示当总数据大于0时 */}
|
||
{viewMode === 'card' && (
|
||
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '24px' }}>
|
||
<Pagination
|
||
current={pagination.current}
|
||
pageSize={pagination.pageSize}
|
||
total={pagination.total}
|
||
pageSizeOptions={pagination.pageSizeOptions}
|
||
showSizeChanger={pagination.showSizeChanger}
|
||
showTotal={pagination.showTotal}
|
||
onChange={(page, pageSize) => {
|
||
handleTableChange({ current: page, pageSize });
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
|
||
<Modal
|
||
title={
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', paddingRight: '32px' }}>
|
||
<div
|
||
style={{
|
||
width: '4px',
|
||
height: '20px',
|
||
background: designTokens.colors.primary.gradient,
|
||
borderRadius: '2px',
|
||
}}
|
||
/>
|
||
{editingRack ? '编辑机柜' : '添加机柜'}
|
||
</div>
|
||
}
|
||
open={modalVisible}
|
||
closeIcon={<CloseButton />}
|
||
onCancel={handleCancel}
|
||
footer={null}
|
||
width={600}
|
||
destroyOnHidden
|
||
styles={{
|
||
body: { padding: '24px' },
|
||
header: {
|
||
borderBottom: '1px solid #f0f0f0',
|
||
padding: '16px 24px',
|
||
position: 'relative',
|
||
},
|
||
}}
|
||
style={{ borderRadius: '16px' }}
|
||
classNames={{
|
||
header: 'modal-header-fix',
|
||
}}
|
||
>
|
||
<Form form={form} layout="vertical" onFinish={handleSubmit}>
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item name="rackId" label="机柜ID（留空自动生成）">
|
||
<Input placeholder="如：RACK001，留空则自动生成" style={{ borderRadius: '8px' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="name"
|
||
label="机柜名称"
|
||
rules={[{ required: true, message: '请输入机柜名称' }]}
|
||
>
|
||
<Input placeholder="请输入机柜名称" style={{ borderRadius: '8px' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Form.Item
|
||
name="roomId"
|
||
label="所属机房"
|
||
rules={[{ required: true, message: '请选择机房' }]}
|
||
>
|
||
<Select placeholder="请选择机房" style={{ borderRadius: '8px' }}>
|
||
{rooms.map(room => (
|
||
<Option key={room.roomId} value={room.roomId}>
|
||
{room.name} ({room.roomId})
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="height"
|
||
label="高度(U)"
|
||
rules={[{ required: true, message: '请输入机柜高度' }]}
|
||
>
|
||
<InputNumber
|
||
placeholder="请输入机柜高度"
|
||
min={1}
|
||
max={50}
|
||
style={{ width: '100%', borderRadius: '8px' }}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="maxPower"
|
||
label="最大功率(W)"
|
||
rules={[{ required: true, message: '请输入最大功率' }]}
|
||
>
|
||
<InputNumber
|
||
placeholder="请输入最大功率"
|
||
min={0}
|
||
style={{ width: '100%', borderRadius: '8px' }}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Form.Item name="status" label="状态" rules={[{ required: true, message: '请选择状态' }]}>
|
||
<Select placeholder="请选择状态" style={{ borderRadius: '8px' }}>
|
||
<Option value="active">在用</Option>
|
||
<Option value="maintenance">维护中</Option>
|
||
<Option value="inactive">停用</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<div
|
||
style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '24px' }}
|
||
>
|
||
<Button onClick={handleCancel} style={{ borderRadius: '8px', height: '42px' }}>
|
||
取消
|
||
</Button>
|
||
<Button type="primary" htmlType="submit" style={primaryButtonStyle}>
|
||
确定
|
||
</Button>
|
||
</div>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Drawer
|
||
title={
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
<DatabaseOutlined
|
||
style={{ fontSize: '20px', color: designTokens.colors.purple.main }}
|
||
/>
|
||
机柜详情 - {viewingRack?.name}
|
||
</div>
|
||
}
|
||
open={drawerVisible}
|
||
onClose={() => setDrawerVisible(false)}
|
||
width={520}
|
||
styles={{
|
||
header: { borderBottom: '1px solid #f0f0f0' },
|
||
body: { padding: '24px' },
|
||
}}
|
||
>
|
||
{viewingRack && (
|
||
<div>
|
||
<div
|
||
style={{
|
||
padding: '20px',
|
||
background: 'linear-gradient(135deg, #722ed115 0%, #722ed108 100%)',
|
||
borderRadius: designTokens.borderRadius.medium,
|
||
marginBottom: '20px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}
|
||
>
|
||
<DatabaseOutlined
|
||
style={{ fontSize: '32px', color: designTokens.colors.purple.main }}
|
||
/>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: '18px',
|
||
fontWeight: '600',
|
||
color: designTokens.colors.text.primary,
|
||
}}
|
||
>
|
||
{viewingRack.name}
|
||
</div>
|
||
<div style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>
|
||
{viewingRack.rackId}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Tag color={statusConfig[viewingRack.status].color} style={{ borderRadius: '20px' }}>
|
||
{statusConfig[viewingRack.status].text}
|
||
</Tag>
|
||
</div>
|
||
|
||
<Row gutter={16} style={{ marginBottom: '20px' }}>
|
||
<Col span={12}>
|
||
<div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
|
||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||
所属机房
|
||
</Text>
|
||
<div style={{ fontSize: '15px', fontWeight: '500', marginTop: '4px' }}>
|
||
{viewingRack.Room?.name || '未分配'}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={12}>
|
||
<div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
|
||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||
设备数量
|
||
</Text>
|
||
<div
|
||
style={{
|
||
fontSize: '20px',
|
||
fontWeight: '600',
|
||
color: designTokens.colors.primary.main,
|
||
}}
|
||
>
|
||
{viewingRack.Devices?.length || 0}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16} style={{ marginBottom: '20px' }}>
|
||
<Col span={12}>
|
||
<div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
|
||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||
机柜高度
|
||
</Text>
|
||
<div
|
||
style={{
|
||
fontSize: '20px',
|
||
fontWeight: '600',
|
||
color: designTokens.colors.text.primary,
|
||
}}
|
||
>
|
||
{viewingRack.height}U
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={12}>
|
||
<div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
|
||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||
可用U位
|
||
</Text>
|
||
<div
|
||
style={{
|
||
fontSize: '20px',
|
||
fontWeight: '600',
|
||
color: designTokens.colors.success.main,
|
||
}}
|
||
>
|
||
{viewingRack.height - (viewingRack.Devices?.reduce((sum, d) => sum + (d.height || 1), 0) || 0)}U
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
|
||
<div style={{ marginBottom: '20px' }}>
|
||
<Text type="secondary" style={{ fontSize: '13px' }}>
|
||
功率使用情况
|
||
</Text>
|
||
<div style={{ marginTop: '12px' }}>
|
||
<PowerGauge current={viewingRack.currentPower} max={viewingRack.maxPower} />
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
|
||
<Button
|
||
type="primary"
|
||
icon={<EditOutlined />}
|
||
onClick={() => {
|
||
setDrawerVisible(false);
|
||
showModal(viewingRack);
|
||
}}
|
||
style={primaryButtonStyle}
|
||
>
|
||
编辑机柜
|
||
</Button>
|
||
<Button
|
||
danger
|
||
icon={<DeleteOutlined />}
|
||
onClick={() => {
|
||
setDrawerVisible(false);
|
||
handleDelete(viewingRack.rackId);
|
||
}}
|
||
style={{ borderRadius: '8px', height: '42px' }}
|
||
>
|
||
删除机柜
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Drawer>
|
||
|
||
<RackImportModal
|
||
visible={importModalVisible}
|
||
onClose={() => setImportModalVisible(false)}
|
||
onImport={handleImport}
|
||
onDownloadTemplate={handleDownloadTemplate}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default React.memo(RackManagement);
|