{
try {
@@ -165,12 +178,14 @@ function PortManagement() {
const fetchDevices = useCallback(async (keyword = '') => {
try {
setDeviceSearching(true);
- const params = { pageSize: 50 };
if (keyword && keyword.trim()) {
- params.keyword = keyword.trim();
+ const params = { keyword: keyword.trim() };
+ const response = await api.get('/devices/all', { params });
+ setDevices(response.devices || response || []);
+ } else {
+ const response = await api.get('/devices/all');
+ setDevices(response.devices || response || []);
}
- const response = await api.get('/devices', { params });
- setDevices(response.devices || response || []);
} catch (error) {
message.error('获取设备列表失败');
console.error('获取设备列表失败:', error);
@@ -256,16 +271,87 @@ function PortManagement() {
const handleAdd = () => {
setEditingPort(null);
form.resetFields();
- setModalVisible(true);
+ fetchDevices();
+ setSelectDeviceModalVisible(true);
+ };
+
+ const handleSelectDeviceForPort = device => {
+ setSelectDeviceModalVisible(false);
+ if (!device) return;
+
+ const deviceType = getDeviceType(device);
+
+ if (deviceType === 'server') {
+ api.get(`/network-cards/device/${device.deviceId}`)
+ .then(nicList => {
+ const validNicList = Array.isArray(nicList) ? nicList : (nicList.data || []);
+ if (validNicList.length === 0) {
+ message.warning({
+ content: '该服务器尚未添加网卡，请先在网卡管理中添加网卡',
+ icon:
,
+ duration: 3,
+ });
+ handleManageNetworkCards(device);
+ } else {
+ setNicList(validNicList);
+ setSelectedDeviceForPort(device);
+ form.resetFields();
+ form.setFieldsValue({ deviceId: device.deviceId });
+ setModalVisible(true);
+ }
+ })
+ .catch(() => {
+ message.warning({
+ content: '该服务器尚未添加网卡，请先在网卡管理中添加网卡',
+ icon:
,
+ duration: 3,
+ });
+ handleManageNetworkCards(device);
+ });
+ } else {
+ setSelectedDeviceForPort(device);
+ form.resetFields();
+ form.setFieldsValue({ deviceId: device.deviceId });
+ setModalVisible(true);
+ }
};
const handleAddPortForDevice = device => {
- setEditingPort(null);
- form.resetFields();
- form.setFieldsValue({
- deviceId: device.deviceId,
- });
- setModalVisible(true);
+ const deviceType = getDeviceType(device);
+
+ if (deviceType === 'server') {
+ api.get(`/network-cards/device/${device.deviceId}`)
+ .then(response => {
+ const nicList = response.data || [];
+ if (nicList.length === 0) {
+ message.warning({
+ content: '该服务器尚未添加网卡，请先在网卡管理中添加网卡',
+ icon:
,
+ duration: 3,
+ });
+ handleManageNetworkCards(device);
+ } else {
+ setNicList(nicList);
+ setSelectedDeviceForPort(device);
+ form.resetFields();
+ form.setFieldsValue({ deviceId: device.deviceId });
+ setModalVisible(true);
+ }
+ })
+ .catch(() => {
+ message.warning({
+ content: '该服务器尚未添加网卡，请先在网卡管理中添加网卡',
+ icon:
,
+ duration: 3,
+ });
+ handleManageNetworkCards(device);
+ });
+ } else {
+ setSelectedDeviceForPort(device);
+ form.resetFields();
+ form.setFieldsValue({ deviceId: device.deviceId });
+ setModalVisible(true);
+ }
};
const handleManageNetworkCards = device => {
@@ -313,13 +399,54 @@ function PortManagement() {
});
fetchPorts();
} catch (error) {
- message.error('删除失败');
+ const errorMsg = error.response?.data?.error || '';
+ if (errorMsg.includes('关联的接线记录')) {
+ message.error('该端口存在关联的接线记录，请先删除关联的接线');
+ } else {
+ message.error('删除失败');
+ }
console.error('删除失败:', error);
}
},
});
};
+ const handleBatchDelete = () => {
+ if (selectedRowKeys.length === 0) {
+ message.warning('请先选择要删除的端口');
+ return;
+ }
+
+ Modal.confirm({
+ title: '确认批量删除',
+ content: `确定要删除选中的 ${selectedRowKeys.length} 个端口吗？此操作不可恢复！`,
+ okText: '删除',
+ okType: 'danger',
+ cancelText: '取消',
+ onOk: async () => {
+ try {
+ const result = await api.post('/device-ports/batch-delete', {
+ portIds: selectedRowKeys,
+ });
+ message.success({
+ content: `成功删除 ${selectedRowKeys.length} 个端口`,
+ icon:
,
+ });
+ setSelectedRowKeys([]);
+ fetchPorts();
+ } catch (error) {
+ const errorMsg = error.response?.data?.error || '';
+ if (errorMsg.includes('关联的接线记录')) {
+ message.error('部分端口存在关联的接线记录，请先删除关联的接线');
+ } else {
+ message.error('批量删除失败');
+ }
+ console.error('批量删除失败:', error);
+ }
+ },
+ });
+ };
+
const parsePortRange = portName => {
const rangeMatch = portName.match(/^(.*?)\/(\d+)-\1\/(\d+)$/);
if (rangeMatch) {
@@ -334,6 +461,10 @@ function PortManagement() {
return [portName];
};
+ const generateUniquePortId = () => {
+ return `PORT-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+ };
+
const handleSubmit = async () => {
try {
const values = await form.validateFields();
@@ -346,21 +477,24 @@ function PortManagement() {
});
} else {
const portNames = parsePortRange(values.portName);
+ const targetDeviceId = selectedDeviceForPort ? selectedDeviceForPort.deviceId : values.deviceId;
if (portNames.length > 1) {
const portsData = portNames.map((name, index) => ({
- portId: `PORT-${Date.now()}-${index}`,
- deviceId: values.deviceId,
+ portId: generateUniquePortId(),
+ deviceId: targetDeviceId,
portName: name,
portType: values.portType,
portSpeed: values.portSpeed,
status: values.status,
vlanId: values.vlanId,
description: values.description,
+ nicId: values.nicId || null,
}));
- const response = await api.post('/device-ports/batch', { ports: portsData });
- const { success, failed } = response.data;
+ const result = await api.post('/device-ports/batch', { ports: portsData });
+ const success = result.success ?? 0;
+ const failed = result.failed ?? 0;
if (failed > 0) {
message.warning(`批量创建完成！成功 ${success} 个，失败 ${failed} 个`);
@@ -371,7 +505,16 @@ function PortManagement() {
});
}
} else {
- await api.post('/device-ports', values);
+ const result = await api.post('/device-ports', {
+ deviceId: targetDeviceId,
+ portName: portNames[0],
+ portType: values.portType,
+ portSpeed: values.portSpeed,
+ status: values.status,
+ vlanId: values.vlanId,
+ description: values.description,
+ nicId: values.nicId || null,
+ });
message.success({
content: '创建成功',
icon:
,
@@ -381,9 +524,10 @@ function PortManagement() {
setModalVisible(false);
form.resetFields();
+ setSelectedDeviceForPort(null);
fetchPorts();
} catch (error) {
- message.error(editingPort ? '更新失败' : '创建失败');
+ message.error(error.response?.data?.error || editingPort ? '更新失败' : '创建失败');
console.error('提交失败:', error);
}
};
@@ -480,6 +624,19 @@ function PortManagement() {
return { valid: false, error: `第 ${index + 1} 行：无效的状态` };
}
+ let nicId = null;
+ if (row['网卡名称']) {
+ try {
+ const nicResponse = await api.get('/network-cards/find', {
+ params: { deviceId: row['设备ID'], name: row['网卡名称'] }
+ });
+ nicId = nicResponse.nicId || null;
+ } catch (error) {
+ nicId = null;
+ }
+ }
+
+ row._nicId = nicId;
return { valid: true };
};
@@ -492,6 +649,9 @@ function PortManagement() {
setImporting(true);
setImportProgress({ current: 0, total: importPreview.length });
+ let progressInterval;
+ let currentProgress = 0;
+
try {
const statusMap = {
空闲: 'free',
@@ -500,8 +660,9 @@ function PortManagement() {
};
const portsData = importPreview.map((row, index) => ({
- portId: `PORT-${Date.now()}-${index}`,
+ portId: generateUniquePortId(),
deviceId: row['设备ID'],
+ nicId: row._nicId || null,
portName: row['端口名称'],
portType: row['端口类型'],
portSpeed: row['端口速率'],
@@ -510,17 +671,44 @@ function PortManagement() {
description: row['描述'],
}));
- const response = await api.post('/device-ports/batch', { ports: portsData });
- const { total, success, failed, errors } = response;
+ progressInterval = setInterval(() => {
+ currentProgress = Math.min(currentProgress + Math.random() * 15, 85);
+ setImportProgress(prev => ({
+ ...prev,
+ current: Math.floor((currentProgress / 100) * importPreview.length)
+ }));
+ }, 200);
- setImportProgress({ current: total, total: total });
+ const response = await api.post('/device-ports/batch', {
+ ports: portsData,
+ skipExisting,
+ updateExisting
+ });
+ const { total, success, failed, skipped = 0, updated = 0, errors } = response;
+ clearInterval(progressInterval);
+ setImportProgress({ current: importPreview.length, total: importPreview.length });
+
+ let msgContent = '';
+ if (updated > 0) {
+ msgContent += `更新 ${updated} 个，`;
+ }
+ if (skipped > 0) {
+ msgContent += `跳过 ${skipped} 个，`;
+ }
+ if (success > 0) {
+ msgContent += `新增 ${success - updated} 个，`;
+ }
if (failed > 0) {
+ msgContent += `失败 ${failed} 个`;
console.error('导入错误:', errors);
- message.warning(`导入完成！成功 ${success} 条，失败 ${failed} 条`);
+ }
+
+ if (failed > 0 && success === 0 && skipped === 0 && updated === 0) {
+ message.error(`导入失败！${msgContent}`);
} else {
message.success({
- content: `导入完成！成功 ${success} 条`,
+ content: `导入完成！${msgContent}`,
icon:
,
});
}
@@ -529,9 +717,11 @@ function PortManagement() {
setImportModalVisible(false);
setImportPreview([]);
} catch (error) {
+ clearInterval(progressInterval);
console.error('批量导入失败:', error);
message.error('批量导入失败，请检查数据格式');
} finally {
+ clearInterval(progressInterval);
setImporting(false);
}
};
@@ -541,6 +731,7 @@ function PortManagement() {
{
设备ID: 'DEV001',
端口名称: 'eth0/1',
+ 网卡名称: '',
端口类型: 'RJ45',
端口速率: '1G',
状态: '空闲',
@@ -555,6 +746,57 @@ function PortManagement() {
XLSX.writeFile(workbook, '端口导入模板.xlsx');
};
+ const handleExport = () => {
+ if (ports.length === 0) {
+ message.warning('没有可导出的端口数据');
+ return;
+ }
+
+ const statusMap = {
+ free: '空闲',
+ occupied: '占用',
+ fault: '故障',
+ };
+
+ const exportData = ports.map(port => {
+ const device = devices.find(d => d.deviceId === port.deviceId);
+ return {
+ '设备ID': port.deviceId,
+ '设备名称': device?.name || '-',
+ '端口名称': port.portName,
+ '端口类型': port.portType,
+ '端口速率': port.portSpeed,
+ '状态': statusMap[port.status] || port.status,
+ 'VLAN ID': port.vlanId || '-',
+ '描述': port.description || '-',
+ };
+ });
+
+ const worksheet = XLSX.utils.json_to_sheet(exportData);
+ const workbook = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(workbook, worksheet, '端口数据');
+
+ const colWidths = [
+ { wch: 15 },
+ { wch: 20 },
+ { wch: 15 },
+ { wch: 10 },
+ { wch: 10 },
+ { wch: 8 },
+ { wch: 10 },
+ { wch: 25 },
+ ];
+ worksheet['!cols'] = colWidths;
+
+ const timestamp = new Date().toISOString().slice(0, 10).replace(/-/g, '');
+ XLSX.writeFile(workbook, `端口导出_${timestamp}.xlsx`);
+
+ message.success({
+ content: `成功导出 ${ports.length} 个端口`,
+ icon:
,
+ });
+ };
+
const getStatusTag = status => {
const statusMap = {
free: { color: 'success', text: '空闲', icon:
},
@@ -601,6 +843,18 @@ function PortManagement() {
width: 120,
render: text =>
{text},
},
+ {
+ title: '所属网卡',
+ dataIndex: 'networkCard',
+ key: 'networkCard',
+ width: 120,
+ render: (nic, record) => {
+ const isServer = record.device?.type?.toLowerCase()?.includes('server');
+ if (!isServer) return
-;
+ if (!nic) return
未关联;
+ return
{nic.name};
+ },
+ },
{
title: '端口类型',
dataIndex: 'portType',
@@ -677,6 +931,55 @@ function PortManagement() {
return
;
};
+ const getDeviceType = device => {
+ if (!device?.type) return 'unknown';
+ const type = device.type.toLowerCase();
+ if (type.includes('switch')) return 'switch';
+ if (type.includes('server')) return 'server';
+ return 'other';
+ };
+
+ const isSwitchDevice = device => getDeviceType(device) === 'switch';
+ const isServerDevice = device => getDeviceType(device) === 'server';
+
+ // 过滤后的设备列表（带分页）
+ const paginatedDevices = useMemo(() => {
+ const filtered = devices.filter(d => {
+ const type = getDeviceType(d);
+ if (type !== 'switch' && type !== 'server') return false;
+ if (deviceFilterType !== 'all' && type !== deviceFilterType) return false;
+ return true;
+ });
+ const pageSize = 100;
+ const end = devicePage * pageSize;
+ const hasMore = end < filtered.length;
+ hasMoreRef.current = hasMore;
+ return {
+ list: filtered.slice(0, end),
+ total: filtered.length,
+ hasMore
+ };
+ }, [devices, deviceFilterType, devicePage]);
+
+ useEffect(() => {
+ if (!loadMoreRef.current) return;
+
+ const observer = new IntersectionObserver(
+ entries => {
+ if (entries[0].isIntersecting && hasMoreRef.current && !isLoadingRef.current) {
+ isLoadingRef.current = true;
+ setDevicePage(p => p + 1);
+ setTimeout(() => { isLoadingRef.current = false; }, 200);
+ }
+ },
+ { threshold: 0.1 }
+ );
+
+ observer.observe(loadMoreRef.current);
+
+ return () => observer.disconnect();
+ }, []);
+
return (
}
onClick={handleAdd}
size="large"
- style={{
- background: designTokens.colors.primary.gradient,
+ style={{
+ background: designTokens.colors.primary.gradient,
border: 'none',
borderRadius: designTokens.borderRadius.sm,
boxShadow: designTokens.shadows.md,
@@ -886,9 +1189,10 @@ function PortManagement() {
>
批量导入
-
}
size="large"
+ onClick={handleExport}
style={{ borderRadius: designTokens.borderRadius.sm }}
>
导出
@@ -1028,7 +1332,11 @@ function PortManagement() {
width: '48px',
height: '48px',
borderRadius: designTokens.borderRadius.md,
- background: designTokens.colors.primary.gradient,
+ background: isServerDevice(device)
+ ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+ : isSwitchDevice(device)
+ ? 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)'
+ : designTokens.colors.primary.gradient,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -1040,8 +1348,13 @@ function PortManagement() {
{getDeviceIcon(device)}