feat: 新增网卡、端口和接线管理功能
- 添加网卡(NetworkCard)模型及相关路由 - 实现端口(DevicePort)管理功能 - 新增接线(Cable)管理功能 - 添加前端网卡和端口管理界面 - 更新机柜可视化页面显示接线 - 添加设备详情抽屉展示端口和接线信息 - 更新部署文档包含数据库迁移指南 - 添加批量创建端口功能 - 设备删除时自动清理相关接线
This commit is contained in:
zhang1106
@@ -0,0 +1,210 @@
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import { Drawer, Tabs, Tag, Space, Typography, Empty, Card, Tooltip } from 'antd';
|
||||
import { ApiOutlined, CloudServerOutlined, EnvironmentOutlined } from '@ant-design/icons';
|
||||
import NetworkCardPanel from './NetworkCardPanel';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
const designTokens = {
|
||||
colors: {
|
||||
primary: '#667eea',
|
||||
success: '#10b981',
|
||||
error: '#ef4444',
|
||||
warning: '#f59e0b'
|
||||
},
|
||||
spacing: {
|
||||
sm: 8,
|
||||
md: 16
|
||||
}
|
||||
};
|
||||
|
||||
function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables }) {
|
||||
const [activeTab, setActiveTab] = useState('ports');
|
||||
|
||||
const deviceCables = useMemo(() => {
|
||||
if (!device || !cables) return [];
|
||||
return cables.filter(c =>
|
||||
c.sourceDeviceId === device.deviceId || c.targetDeviceId === device.deviceId
|
||||
);
|
||||
}, [device, cables]);
|
||||
|
||||
const getStatusTag = useCallback((status) => {
|
||||
const config = {
|
||||
running: { color: 'success', text: '运行中' },
|
||||
normal: { color: 'success', text: '正常' },
|
||||
warning: { color: 'warning', text: '警告' },
|
||||
error: { color: 'error', text: '故障' },
|
||||
fault: { color: 'error', text: '故障' },
|
||||
offline: { color: 'default', text: '离线' },
|
||||
maintenance: { color: 'processing', text: '维护中' }
|
||||
};
|
||||
const { color, text } = config[status] || { color: 'default', text: status };
|
||||
return <Tag color={color}>{text}</Tag>;
|
||||
}, []);
|
||||
|
||||
const getDeviceTypeName = useCallback((type) => {
|
||||
const typeMap = {
|
||||
server: '服务器',
|
||||
switch: '交换机',
|
||||
router: '路由器',
|
||||
storage: '存储设备',
|
||||
firewall: '防火墙',
|
||||
ups: 'UPS',
|
||||
pdu: 'PDU'
|
||||
};
|
||||
return typeMap[type?.toLowerCase()] || type || '未知设备';
|
||||
}, []);
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
key: 'ports',
|
||||
label: (
|
||||
<span>
|
||||
<ApiOutlined />
|
||||
端口与网卡
|
||||
</span>
|
||||
),
|
||||
children: (
|
||||
<NetworkCardPanel
|
||||
deviceId={device?.deviceId}
|
||||
deviceName={device?.name}
|
||||
onRefresh={onRefreshCables}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'cables',
|
||||
label: (
|
||||
<span>
|
||||
<EnvironmentOutlined />
|
||||
接线 ({deviceCables.length})
|
||||
</span>
|
||||
),
|
||||
children: (
|
||||
<div className="cable-panel">
|
||||
{deviceCables.length === 0 ? (
|
||||
<Empty description="该设备暂无接线" />
|
||||
) : (
|
||||
<Space direction="vertical" size={designTokens.spacing.md} style={{ width: '100%' }}>
|
||||
{deviceCables.map(cable => (
|
||||
<Card
|
||||
key={cable.cableId}
|
||||
size="small"
|
||||
style={{ borderRadius: '8px' }}
|
||||
>
|
||||
<div style={{ marginBottom: designTokens.spacing.sm }}>
|
||||
<Space direction="vertical" size={4}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>源设备：</Text>
|
||||
<div style={{ fontWeight: 500 }}>
|
||||
{cable.sourceDevice?.name || '-'}
|
||||
<Tag color="blue" style={{ marginLeft: '8px' }}>{cable.sourcePort}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>目标设备：</Text>
|
||||
<div style={{ fontWeight: 500 }}>
|
||||
{cable.targetDevice?.name || '-'}
|
||||
<Tag color="green" style={{ marginLeft: '8px' }}>{cable.targetPort}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Space wrap>
|
||||
<Tag color={cable.status === 'normal' ? 'success' : cable.status === 'fault' ? 'error' : 'default'}>
|
||||
{cable.status === 'normal' ? '正常' : cable.status === 'fault' ? '故障' : '未连接'}
|
||||
</Tag>
|
||||
<Tag color="purple">
|
||||
{cable.cableType === 'ethernet' ? '网线' : cable.cableType === 'fiber' ? '光纤' : '铜缆'}
|
||||
</Tag>
|
||||
{cable.cableLength && (
|
||||
<Tag color="orange">
|
||||
{cable.cableLength}m
|
||||
</Tag>
|
||||
)}
|
||||
</Space>
|
||||
|
||||
{cable.description && (
|
||||
<div style={{ marginTop: designTokens.spacing.sm, fontSize: '12px', color: '#666' }}>
|
||||
{cable.description}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
if (!device) return null;
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={
|
||||
<Space>
|
||||
<CloudServerOutlined style={{ color: designTokens.colors.primary }} />
|
||||
<span>设备详情 - {device.name}</span>
|
||||
</Space>
|
||||
}
|
||||
placement="right"
|
||||
width={520}
|
||||
open={visible}
|
||||
onClose={onClose}
|
||||
styles={{ body: { padding: '16px 20px', overflow: 'auto' } }}
|
||||
>
|
||||
<div className="device-info-section" style={{ marginBottom: '20px' }}>
|
||||
<Title level={5} style={{ margin: '0 0 12px 0', color: '#1e293b' }}>基本信息</Title>
|
||||
<div className="info-grid" style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
gap: '12px',
|
||||
background: '#f8fafc',
|
||||
padding: '16px',
|
||||
borderRadius: '10px'
|
||||
}}>
|
||||
<div className="info-item">
|
||||
<Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>设备ID</Text>
|
||||
<Text strong style={{ fontSize: '14px' }}>{device.deviceId}</Text>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>设备类型</Text>
|
||||
<Text strong style={{ fontSize: '14px' }}>{getDeviceTypeName(device.type)}</Text>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>设备状态</Text>
|
||||
{getStatusTag(device.status)}
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>位置</Text>
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
U{device.position} {device.height && `(${device.height}U)`}
|
||||
</Text>
|
||||
</div>
|
||||
{device.ipAddress && (
|
||||
<div className="info-item">
|
||||
<Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>IP地址</Text>
|
||||
<Text strong style={{ fontSize: '14px' }}>{device.ipAddress}</Text>
|
||||
</div>
|
||||
)}
|
||||
{device.brand && (
|
||||
<div className="info-item">
|
||||
<Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>品牌</Text>
|
||||
<Text strong style={{ fontSize: '14px' }}>{device.brand}</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={setActiveTab}
|
||||
items={tabItems}
|
||||
/>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(DeviceDetailDrawer);
|
||||
@@ -0,0 +1,159 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Modal, Form, Input, InputNumber, Select, message, Space, Tooltip } from 'antd';
|
||||
import { PlusOutlined, InfoCircleOutlined, CloudServerOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const designTokens = {
|
||||
colors: {
|
||||
primary: {
|
||||
main: '#667eea'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
medium: '10px'
|
||||
}
|
||||
};
|
||||
|
||||
function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setLoading(true);
|
||||
|
||||
await axios.post('/api/network-cards', {
|
||||
deviceId: device.deviceId,
|
||||
name: values.name,
|
||||
slotNumber: values.slotNumber,
|
||||
description: values.description,
|
||||
model: values.model,
|
||||
manufacturer: values.manufacturer,
|
||||
status: values.status
|
||||
});
|
||||
|
||||
message.success('网卡创建成功');
|
||||
form.resetFields();
|
||||
onSuccess?.();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return;
|
||||
}
|
||||
message.error(error.response?.data?.error || '网卡创建失败');
|
||||
console.error('创建网卡失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [device, form, onClose, onSuccess]);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
form.resetFields();
|
||||
onClose();
|
||||
}, [form, onClose]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Space>
|
||||
<CloudServerOutlined style={{ color: designTokens.colors.primary.main }} />
|
||||
<span>新增网卡 - {device?.name || '设备'}</span>
|
||||
</Space>
|
||||
}
|
||||
open={visible}
|
||||
onOk={handleSubmit}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={loading}
|
||||
okText="创建"
|
||||
cancelText="取消"
|
||||
width={480}
|
||||
styles={{ body: { padding: '20px 24px' } }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
status: 'normal'
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label={
|
||||
<Space>
|
||||
网卡名称
|
||||
<Tooltip title="如: 网卡1、eth0、Primary NIC、LAN1">
|
||||
<InfoCircleOutlined style={{ color: '#999' }} />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
}
|
||||
rules={[
|
||||
{ required: true, message: '请输入网卡名称' },
|
||||
{ max: 50, message: '名称不能超过50个字符' }
|
||||
]}
|
||||
>
|
||||
<Input placeholder="例如: 网卡1、eth0、LAN1" />
|
||||
</Form.Item>
|
||||
|
||||
<Space style={{ display: 'flex', width: '100%' }}>
|
||||
<Form.Item
|
||||
name="slotNumber"
|
||||
label="插槽编号"
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="可选"
|
||||
min={1}
|
||||
max={100}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Select placeholder="请选择">
|
||||
<Option value="normal">正常</Option>
|
||||
<Option value="warning">警告</Option>
|
||||
<Option value="fault">故障</Option>
|
||||
<Option value="offline">离线</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Space>
|
||||
|
||||
<Space style={{ display: 'flex', width: '100%' }}>
|
||||
<Form.Item
|
||||
name="manufacturer"
|
||||
label="制造商"
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Input placeholder="如: Intel、Realtek、Broadcom" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="model"
|
||||
label="型号"
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Input placeholder="如: X520-DA2" />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
|
||||
<Form.Item
|
||||
name="description"
|
||||
label="描述"
|
||||
>
|
||||
<TextArea rows={2} placeholder="请输入描述信息（可选）" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(NetworkCardCreateModal);
|
||||
@@ -0,0 +1,397 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Table, Button, Space, Tag, Tooltip, Popconfirm, Empty, Spin, Badge, Collapse, Card } from 'antd';
|
||||
import { PlusOutlined, DeleteOutlined, ReloadOutlined, ApiOutlined, CloudServerOutlined, FolderOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import PortCreateModal from './PortCreateModal';
|
||||
import NetworkCardCreateModal from './NetworkCardCreateModal';
|
||||
|
||||
const { Panel } = Collapse;
|
||||
|
||||
const designTokens = {
|
||||
colors: {
|
||||
primary: {
|
||||
main: '#667eea'
|
||||
},
|
||||
success: '#10b981',
|
||||
error: '#ef4444',
|
||||
warning: '#f59e0b'
|
||||
}
|
||||
};
|
||||
|
||||
function NetworkCardPanel({ deviceId, deviceName, onRefresh }) {
|
||||
const [cards, setCards] = useState([]);
|
||||
const [networkCards, setNetworkCards] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [createPortModalVisible, setCreatePortModalVisible] = useState(false);
|
||||
const [createCardModalVisible, setCreateCardModalVisible] = useState(false);
|
||||
const [selectedCard, setSelectedCard] = useState(null);
|
||||
const [expandedCards, setExpandedCards] = useState([]);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
if (!deviceId) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const [cardsResponse, networkCardsResponse] = await Promise.all([
|
||||
axios.get(`/api/network-cards/device/${deviceId}/with-ports`),
|
||||
axios.get(`/api/network-cards/device/${deviceId}`)
|
||||
]);
|
||||
|
||||
const cardsData = cardsResponse.data || [];
|
||||
setCards(cardsData);
|
||||
setNetworkCards(networkCardsResponse.data || []);
|
||||
|
||||
const initialExpanded = cardsData
|
||||
.filter(card => card.ports && card.ports.length > 0)
|
||||
.map(card => card.nicId);
|
||||
setExpandedCards(initialExpanded);
|
||||
} catch (error) {
|
||||
console.error('获取网卡数据失败:', error);
|
||||
setCards([]);
|
||||
setNetworkCards([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [deviceId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const handleDeleteCard = useCallback(async (card) => {
|
||||
try {
|
||||
await axios.delete(`/api/network-cards/${card.nicId}`);
|
||||
import('antd').then(({ message }) => message.success('网卡删除成功'));
|
||||
fetchData();
|
||||
onRefresh?.();
|
||||
} catch (error) {
|
||||
import('antd').then(({ message }) => message.error(error.response?.data?.error || '网卡删除失败'));
|
||||
}
|
||||
}, [fetchData, onRefresh]);
|
||||
|
||||
const handleDeletePort = useCallback(async (port) => {
|
||||
try {
|
||||
await axios.delete(`/api/device-ports/${port.portId}`);
|
||||
import('antd').then(({ message }) => message.success('端口删除成功'));
|
||||
fetchData();
|
||||
onRefresh?.();
|
||||
} catch (error) {
|
||||
import('antd').then(({ message }) => message.error('端口删除失败'));
|
||||
}
|
||||
}, [fetchData, onRefresh]);
|
||||
|
||||
const handleCreateCardSuccess = useCallback(() => {
|
||||
fetchData();
|
||||
onRefresh?.();
|
||||
}, [fetchData, onRefresh]);
|
||||
|
||||
const handleCreatePortSuccess = useCallback(() => {
|
||||
fetchData();
|
||||
onRefresh?.();
|
||||
}, [fetchData, onRefresh]);
|
||||
|
||||
const handleExpand = (nicId) => {
|
||||
setExpandedCards(prev => {
|
||||
if (prev.includes(nicId)) {
|
||||
return prev.filter(id => id !== nicId);
|
||||
}
|
||||
return [...prev, nicId];
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusTag = (status) => {
|
||||
const config = {
|
||||
free: { color: 'success', text: '空闲' },
|
||||
occupied: { color: 'processing', text: '占用' },
|
||||
fault: { color: 'error', text: '故障' },
|
||||
normal: { color: 'success', text: '正常' },
|
||||
warning: { color: 'warning', text: '警告' },
|
||||
offline: { color: 'default', text: '离线' }
|
||||
};
|
||||
const { color, text } = config[status] || { color: 'default', text: status };
|
||||
return <Tag color={color}>{text}</Tag>;
|
||||
};
|
||||
|
||||
const getTypeTag = (type) => {
|
||||
const config = {
|
||||
'RJ45': { color: 'blue', text: 'RJ45' },
|
||||
'SFP': { color: 'green', text: 'SFP' },
|
||||
'SFP+': { color: 'cyan', text: 'SFP+' },
|
||||
'SFP28': { color: 'purple', text: 'SFP28' },
|
||||
'QSFP': { color: 'orange', text: 'QSFP' },
|
||||
'QSFP28': { color: 'red', text: 'QSFP28' }
|
||||
};
|
||||
const { color, text } = config[type] || { color: 'default', text: type };
|
||||
return <Tag color={color}>{text}</Tag>;
|
||||
};
|
||||
|
||||
const renderPortTable = (ports, nicId) => {
|
||||
const columns = [
|
||||
{
|
||||
title: '端口名称',
|
||||
dataIndex: 'portName',
|
||||
key: 'portName',
|
||||
width: 120,
|
||||
render: (text) => <span style={{ fontWeight: 500 }}>{text}</span>
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'portType',
|
||||
key: 'portType',
|
||||
width: 80,
|
||||
render: (type) => getTypeTag(type)
|
||||
},
|
||||
{
|
||||
title: '速率',
|
||||
dataIndex: 'portSpeed',
|
||||
key: 'portSpeed',
|
||||
width: 70
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 70,
|
||||
render: (status) => getStatusTag(status)
|
||||
},
|
||||
{
|
||||
title: 'VLAN',
|
||||
dataIndex: 'vlanId',
|
||||
key: 'vlanId',
|
||||
width: 60,
|
||||
render: (vlanId) => vlanId || '-'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
render: (_, record) => (
|
||||
<Space size="small">
|
||||
<Popconfirm
|
||||
title="确定要删除此端口吗？"
|
||||
onConfirm={() => handleDeletePort(record)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link" size="small" danger icon={<DeleteOutlined />}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={ports}
|
||||
rowKey="portId"
|
||||
pagination={false}
|
||||
size="small"
|
||||
scroll={{ x: 500 }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderCardHeader = (card) => {
|
||||
const stats = card.stats || { free: 0, occupied: 0, fault: 0, total: 0 };
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<div style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '8px',
|
||||
background: card.isUngrouped
|
||||
? 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)'
|
||||
: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#fff'
|
||||
}}>
|
||||
{card.isUngrouped ? <FolderOutlined /> : <CloudServerOutlined />}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontWeight: 600, fontSize: '14px', color: '#1e293b' }}>
|
||||
{card.name}
|
||||
{card.slotNumber && <span style={{ color: '#94a3b8', marginLeft: 8 }}>插槽 {card.slotNumber}</span>}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', color: '#64748b' }}>
|
||||
{card.description || (card.isUngrouped ? '未分配到网卡的端口' : '网卡')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Space size={12}>
|
||||
<Badge count={stats.free} style={{ backgroundColor: designTokens.colors.success }} />
|
||||
<span style={{ fontSize: '12px', color: '#64748b' }}>空闲</span>
|
||||
<Badge count={stats.occupied} style={{ backgroundColor: '#1677ff' }} />
|
||||
<span style={{ fontSize: '12px', color: '#64748b' }}>占用</span>
|
||||
<Badge count={stats.fault} style={{ backgroundColor: designTokens.colors.error }} />
|
||||
<span style={{ fontSize: '12px', color: '#64748b' }}>故障</span>
|
||||
{!card.isUngrouped && (
|
||||
<Popconfirm
|
||||
title="确定要删除此网卡吗？"
|
||||
description="删除网卡前需确保其下无端口"
|
||||
onConfirm={() => handleDeleteCard(card)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link" size="small" danger icon={<DeleteOutlined />}>
|
||||
删除网卡
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
)}
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedCard(card);
|
||||
setCreatePortModalVisible(true);
|
||||
}}
|
||||
style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
|
||||
>
|
||||
添加端口
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<Spin size="large" tip="加载网卡数据中..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const totalStats = cards.reduce((acc, card) => {
|
||||
const stats = card.stats || {};
|
||||
acc.total += stats.total || 0;
|
||||
acc.free += stats.free || 0;
|
||||
acc.occupied += stats.occupied || 0;
|
||||
acc.fault += stats.fault || 0;
|
||||
return acc;
|
||||
}, { total: 0, free: 0, occupied: 0, fault: 0 });
|
||||
|
||||
return (
|
||||
<div className="network-card-panel">
|
||||
<div className="panel-header" style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '16px'
|
||||
}}>
|
||||
<div className="stats" style={{ display: 'flex', gap: '24px' }}>
|
||||
<Space size={16}>
|
||||
<Badge count={networkCards.length} style={{ backgroundColor: designTokens.colors.primary.main }} />
|
||||
<span style={{ color: '#64748b', fontSize: '13px' }}>个网卡</span>
|
||||
<Badge count={totalStats.total} style={{ backgroundColor: '#667eea' }} />
|
||||
<span style={{ color: '#64748b', fontSize: '13px' }}>个端口</span>
|
||||
</Space>
|
||||
</div>
|
||||
<Space>
|
||||
<Button icon={<ReloadOutlined />} onClick={fetchData} size="small">
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setCreateCardModalVisible(true)}
|
||||
style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
|
||||
>
|
||||
新增网卡
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{cards.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<Empty
|
||||
description={
|
||||
<span>
|
||||
该设备暂无网卡和端口
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setCreateCardModalVisible(true)}
|
||||
style={{ padding: 0, marginTop: 8 }}
|
||||
>
|
||||
立即添加网卡
|
||||
</Button>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<CloudServerOutlined style={{ fontSize: 48, color: '#d9d9d9' }} />
|
||||
</Empty>
|
||||
</div>
|
||||
) : (
|
||||
<Collapse
|
||||
activeKey={expandedCards}
|
||||
onChange={(keys) => setExpandedCards(keys)}
|
||||
expandIconPosition="end"
|
||||
style={{ background: 'transparent' }}
|
||||
>
|
||||
{cards.map((card) => (
|
||||
<Panel
|
||||
key={card.nicId}
|
||||
header={renderCardHeader(card)}
|
||||
style={{
|
||||
background: '#fff',
|
||||
borderRadius: '8px',
|
||||
marginBottom: '8px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}
|
||||
>
|
||||
{card.ports && card.ports.length > 0 ? (
|
||||
renderPortTable(card.ports, card.nicId)
|
||||
) : (
|
||||
<div style={{ padding: '24px', textAlign: 'center', color: '#94a3b8' }}>
|
||||
该{card.isUngrouped ? '分组' : '网卡'}暂无端口
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
setSelectedCard(card);
|
||||
setCreatePortModalVisible(true);
|
||||
}}
|
||||
style={{ padding: 0, marginTop: 8 }}
|
||||
>
|
||||
添加端口
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
))}
|
||||
</Collapse>
|
||||
)}
|
||||
|
||||
<NetworkCardCreateModal
|
||||
device={{ deviceId, name: deviceName }}
|
||||
visible={createCardModalVisible}
|
||||
onClose={() => setCreateCardModalVisible(false)}
|
||||
onSuccess={handleCreateCardSuccess}
|
||||
/>
|
||||
|
||||
<PortCreateModal
|
||||
device={{ deviceId, name: deviceName }}
|
||||
visible={createPortModalVisible}
|
||||
onClose={() => {
|
||||
setCreatePortModalVisible(false);
|
||||
setSelectedCard(null);
|
||||
}}
|
||||
onSuccess={handleCreatePortSuccess}
|
||||
defaultNicId={selectedCard?.nicId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(NetworkCardPanel);
|
||||
@@ -0,0 +1,400 @@
|
||||
import React, { useState, useCallback, useEffect, useMemo } from 'react';
|
||||
import { Modal, Form, Input, Select, InputNumber, message, Space, Button, Tooltip, Alert, Tag } from 'antd';
|
||||
import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const designTokens = {
|
||||
colors: {
|
||||
primary: {
|
||||
main: '#667eea',
|
||||
gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
medium: '10px'
|
||||
}
|
||||
};
|
||||
|
||||
function parsePortRange(portName) {
|
||||
if (!portName || typeof portName !== 'string') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const trimmed = portName.trim();
|
||||
|
||||
if (!trimmed.includes('-')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [startPart, endPart] = trimmed.split('-').map(s => s.trim());
|
||||
|
||||
if (!startPart || !endPart) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const startNumMatch = startPart.match(/(\d+)$/);
|
||||
const endNumMatch = endPart.match(/(\d+)$/);
|
||||
|
||||
if (!startNumMatch || !endNumMatch) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const startNum = parseInt(startNumMatch[1], 10);
|
||||
const endNum = parseInt(endNumMatch[1], 10);
|
||||
|
||||
if (startNum >= endNum || endNum - startNum > 1000) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const prefix = startPart.replace(startNumMatch[0], '');
|
||||
const portCount = endNum - startNum + 1;
|
||||
|
||||
const ports = [];
|
||||
for (let i = 0; i < portCount; i++) {
|
||||
const num = startNum + i;
|
||||
ports.push(`${prefix}${num}`);
|
||||
}
|
||||
|
||||
return {
|
||||
isRange: true,
|
||||
prefix,
|
||||
startNum,
|
||||
endNum,
|
||||
portCount,
|
||||
ports
|
||||
};
|
||||
}
|
||||
|
||||
function generatePortNames(portName) {
|
||||
const result = parsePortRange(portName);
|
||||
|
||||
if (result && result.isRange) {
|
||||
return result.ports;
|
||||
}
|
||||
|
||||
return [portName];
|
||||
}
|
||||
|
||||
function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, networkCards = [] }) {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [previewPorts, setPreviewPorts] = useState([]);
|
||||
const [showPreview, setShowPreview] = useState(false);
|
||||
const [nicList, setNicList] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
setPreviewPorts([]);
|
||||
setShowPreview(false);
|
||||
form.resetFields();
|
||||
|
||||
if (defaultNicId) {
|
||||
form.setFieldsValue({ nicId: defaultNicId });
|
||||
}
|
||||
|
||||
if (device?.deviceId && networkCards.length === 0) {
|
||||
fetchNetworkCards();
|
||||
} else if (networkCards.length > 0) {
|
||||
setNicList(networkCards);
|
||||
}
|
||||
}
|
||||
}, [visible, device, defaultNicId, networkCards, form]);
|
||||
|
||||
const fetchNetworkCards = async () => {
|
||||
try {
|
||||
const response = await axios.get(`/api/network-cards/device/${device.deviceId}`);
|
||||
setNicList(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('获取网卡列表失败:', error);
|
||||
setNicList([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePortNameChange = useCallback((e) => {
|
||||
const value = e.target.value;
|
||||
const ports = generatePortNames(value);
|
||||
|
||||
if (ports.length > 1) {
|
||||
setPreviewPorts(ports.slice(0, 20));
|
||||
setShowPreview(true);
|
||||
} else {
|
||||
setPreviewPorts([]);
|
||||
setShowPreview(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setLoading(true);
|
||||
|
||||
const portNames = generatePortNames(values.portName);
|
||||
|
||||
if (portNames.length === 1) {
|
||||
await axios.post('/api/device-ports', {
|
||||
deviceId: device.deviceId,
|
||||
nicId: values.nicId || null,
|
||||
portName: portNames[0],
|
||||
portType: values.portType,
|
||||
portSpeed: values.portSpeed,
|
||||
vlanId: values.vlanId,
|
||||
status: values.status,
|
||||
description: values.description
|
||||
});
|
||||
message.success('端口创建成功');
|
||||
} else {
|
||||
const portsData = portNames.map((portName, index) => ({
|
||||
portId: `PORT-${Date.now()}-${index}`,
|
||||
deviceId: device.deviceId,
|
||||
nicId: values.nicId || null,
|
||||
portName,
|
||||
portType: values.portType,
|
||||
portSpeed: values.portSpeed,
|
||||
vlanId: values.vlanId,
|
||||
status: values.status,
|
||||
description: values.description
|
||||
}));
|
||||
|
||||
await axios.post('/api/device-ports/batch', { ports: portsData });
|
||||
message.success(`成功创建 ${portNames.length} 个端口`);
|
||||
}
|
||||
|
||||
form.resetFields();
|
||||
setPreviewPorts([]);
|
||||
setShowPreview(false);
|
||||
onSuccess?.();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return;
|
||||
}
|
||||
message.error(error.response?.data?.error || '端口创建失败');
|
||||
console.error('创建端口失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [device, form, onClose, onSuccess]);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
form.resetFields();
|
||||
setPreviewPorts([]);
|
||||
setShowPreview(false);
|
||||
onClose();
|
||||
}, [form, onClose]);
|
||||
|
||||
const portCount = previewPorts.length || (form.getFieldValue('portName') && !showPreview ? 1 : 0);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Space>
|
||||
<PlusOutlined style={{ color: designTokens.colors.primary.main }} />
|
||||
<span>新增端口 - {device?.name || '设备'}</span>
|
||||
{portCount > 1 && (
|
||||
<Tag color="blue">{portCount} 个端口</Tag>
|
||||
)}
|
||||
</Space>
|
||||
}
|
||||
open={visible}
|
||||
onOk={handleSubmit}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={loading}
|
||||
okText={portCount > 1 ? `创建 ${portCount} 个端口` : '创建'}
|
||||
cancelText="取消"
|
||||
width={560}
|
||||
styles={{ body: { padding: '20px 24px' } }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
portType: 'RJ45',
|
||||
portSpeed: '1G',
|
||||
status: 'free'
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
name="deviceId"
|
||||
label="设备"
|
||||
>
|
||||
<Input
|
||||
value={device?.name}
|
||||
disabled
|
||||
placeholder={device?.deviceId}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="nicId"
|
||||
label={
|
||||
<Space>
|
||||
所属网卡
|
||||
<Tooltip title="可选，不选择则端口不归属于任何网卡">
|
||||
<InfoCircleOutlined style={{ color: '#999' }} />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Select
|
||||
placeholder="选择网卡（可选）"
|
||||
allowClear
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{nicList.map(nic => (
|
||||
<Option key={nic.nicId} value={nic.nicId}>
|
||||
{nic.name}
|
||||
{nic.slotNumber && ` (插槽${nic.slotNumber})`}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="portName"
|
||||
label={
|
||||
<Space>
|
||||
端口名称
|
||||
<Tooltip title="支持单个端口（如 eth0/1）或端口范围（如 1/0/1-1/0/48）">
|
||||
<InfoCircleOutlined style={{ color: '#999' }} />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
}
|
||||
rules={[
|
||||
{ required: true, message: '请输入端口名称' },
|
||||
{
|
||||
pattern: /^[\w\/:\-]+$/,
|
||||
message: '端口名称格式不正确'
|
||||
},
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (!value) return Promise.resolve();
|
||||
const ports = generatePortNames(value);
|
||||
if (ports.length > 1000) {
|
||||
return Promise.reject(new Error('单次最多创建1000个端口'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="例如: eth0/1 或 1/0/1-1/0/48"
|
||||
onChange={handlePortNameChange}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{showPreview && (
|
||||
<Alert
|
||||
message={`将创建 ${previewPorts.length} 个端口`}
|
||||
description={
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Space wrap size={4}>
|
||||
{previewPorts.map((port, index) => (
|
||||
<Tag key={index} color="blue">{port}</Tag>
|
||||
))}
|
||||
{previewPorts.length < parsePortRange(form.getFieldValue('portName'))?.portCount && (
|
||||
<Tag color="default">...等</Tag>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
type="info"
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Space style={{ display: 'flex', width: '100%' }}>
|
||||
<Form.Item
|
||||
name="portType"
|
||||
label="端口类型"
|
||||
rules={[{ required: true, message: '请选择端口类型' }]}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Select placeholder="请选择">
|
||||
<Option value="RJ45">RJ45</Option>
|
||||
<Option value="SFP">SFP</Option>
|
||||
<Option value="SFP+">SFP+</Option>
|
||||
<Option value="SFP28">SFP28</Option>
|
||||
<Option value="QSFP">QSFP</Option>
|
||||
<Option value="QSFP28">QSFP28</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="portSpeed"
|
||||
label="端口速率"
|
||||
rules={[{ required: true, message: '请选择端口速率' }]}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Select placeholder="请选择">
|
||||
<Option value="100M">100M</Option>
|
||||
<Option value="1G">1G</Option>
|
||||
<Option value="10G">10G</Option>
|
||||
<Option value="25G">25G</Option>
|
||||
<Option value="40G">40G</Option>
|
||||
<Option value="100G">100G</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Space>
|
||||
|
||||
<Space style={{ display: 'flex', width: '100%' }}>
|
||||
<Form.Item
|
||||
name="vlanId"
|
||||
label="VLAN ID"
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="1-4094"
|
||||
min={1}
|
||||
max={4094}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<Select placeholder="请选择">
|
||||
<Option value="free">空闲</Option>
|
||||
<Option value="occupied">占用</Option>
|
||||
<Option value="fault">故障</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Space>
|
||||
|
||||
<Form.Item
|
||||
name="description"
|
||||
label="描述"
|
||||
>
|
||||
<TextArea rows={2} placeholder="请输入描述信息（可选）" />
|
||||
</Form.Item>
|
||||
|
||||
<div style={{
|
||||
background: '#f5f5f5',
|
||||
padding: '12px 16px',
|
||||
borderRadius: '8px',
|
||||
fontSize: '12px',
|
||||
color: '#666'
|
||||
}}>
|
||||
<strong>格式说明：</strong>
|
||||
<ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
|
||||
<li>单个端口：<code>eth0/1</code>、<code>gigabitethernet1/0/1</code></li>
|
||||
<li>端口范围：<code>1/0/1-1/0/48</code>（创建 1/0/1 到 1/0/48 共48个端口）</li>
|
||||
<li>简单范围：<code>eth1-eth24</code>（创建 eth1 到 eth24 共24个端口）</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(PortCreateModal);
|
||||
@@ -0,0 +1,235 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Table, Button, Space, Tag, Tooltip, Popconfirm, Empty, Spin, Badge } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined, ApiOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import PortCreateModal from './PortCreateModal';
|
||||
|
||||
const designTokens = {
|
||||
colors: {
|
||||
primary: {
|
||||
main: '#667eea'
|
||||
},
|
||||
success: '#10b981',
|
||||
error: '#ef4444',
|
||||
warning: '#f59e0b'
|
||||
}
|
||||
};
|
||||
|
||||
function PortManagementPanel({ deviceId, deviceName, onRefresh }) {
|
||||
const [ports, setPorts] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [createModalVisible, setCreateModalVisible] = useState(false);
|
||||
|
||||
const fetchPorts = useCallback(async () => {
|
||||
if (!deviceId) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get(`/api/device-ports/device/${deviceId}`);
|
||||
setPorts(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('获取端口列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [deviceId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPorts();
|
||||
}, [fetchPorts]);
|
||||
|
||||
const handleDelete = useCallback(async (port) => {
|
||||
try {
|
||||
await axios.delete(`/api/device-ports/${port.portId}`);
|
||||
import('antd').then(({ message }) => message.success('端口删除成功'));
|
||||
fetchPorts();
|
||||
onRefresh?.();
|
||||
} catch (error) {
|
||||
import('antd').then(({ message }) => message.error('端口删除失败'));
|
||||
}
|
||||
}, [fetchPorts, onRefresh]);
|
||||
|
||||
const handleCreateSuccess = useCallback(() => {
|
||||
fetchPorts();
|
||||
onRefresh?.();
|
||||
}, [fetchPorts, onRefresh]);
|
||||
|
||||
const getStatusTag = (status) => {
|
||||
const config = {
|
||||
free: { color: 'success', text: '空闲' },
|
||||
occupied: { color: 'processing', text: '占用' },
|
||||
fault: { color: 'error', text: '故障' }
|
||||
};
|
||||
const { color, text } = config[status] || { color: 'default', text: status };
|
||||
return <Tag color={color}>{text}</Tag>;
|
||||
};
|
||||
|
||||
const getTypeTag = (type) => {
|
||||
const config = {
|
||||
'RJ45': { color: 'blue', text: 'RJ45' },
|
||||
'SFP': { color: 'green', text: 'SFP' },
|
||||
'SFP+': { color: 'cyan', text: 'SFP+' },
|
||||
'SFP28': { color: 'purple', text: 'SFP28' },
|
||||
'QSFP': { color: 'orange', text: 'QSFP' },
|
||||
'QSFP28': { color: 'red', text: 'QSFP28' }
|
||||
};
|
||||
const { color, text } = config[type] || { color: 'default', text: type };
|
||||
return <Tag color={color}>{text}</Tag>;
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '端口名称',
|
||||
dataIndex: 'portName',
|
||||
key: 'portName',
|
||||
width: 120,
|
||||
render: (text) => (
|
||||
<Tooltip title={text}>
|
||||
<span style={{ fontWeight: 500 }}>{text}</span>
|
||||
</Tooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'portType',
|
||||
key: 'portType',
|
||||
width: 90,
|
||||
render: (type) => getTypeTag(type)
|
||||
},
|
||||
{
|
||||
title: '速率',
|
||||
dataIndex: 'portSpeed',
|
||||
key: 'portSpeed',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 80,
|
||||
render: (status) => getStatusTag(status)
|
||||
},
|
||||
{
|
||||
title: 'VLAN',
|
||||
dataIndex: 'vlanId',
|
||||
key: 'vlanId',
|
||||
width: 70,
|
||||
render: (vlanId) => vlanId || '-'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
render: (_, record) => (
|
||||
<Space size="small">
|
||||
<Popconfirm
|
||||
title="确定要删除此端口吗？"
|
||||
onConfirm={() => handleDelete(record)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const freeCount = ports.filter(p => p.status === 'free').length;
|
||||
const occupiedCount = ports.filter(p => p.status === 'occupied').length;
|
||||
const faultCount = ports.filter(p => p.status === 'fault').length;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<Spin size="large" tip="加载端口数据中..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="port-management-panel">
|
||||
<div className="port-panel-header">
|
||||
<div className="port-stats">
|
||||
<Space size={16}>
|
||||
<Badge count={freeCount} style={{ backgroundColor: designTokens.colors.success }} />
|
||||
<span className="stat-label">空闲</span>
|
||||
<Badge count={occupiedCount} style={{ backgroundColor: '#1677ff' }} />
|
||||
<span className="stat-label">占用</span>
|
||||
<Badge count={faultCount} style={{ backgroundColor: designTokens.colors.error }} />
|
||||
<span className="stat-label">故障</span>
|
||||
</Space>
|
||||
</div>
|
||||
<Space>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={fetchPorts}
|
||||
size="small"
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setCreateModalVisible(true)}
|
||||
style={{
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none'
|
||||
}}
|
||||
>
|
||||
新增端口
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{ports.length === 0 ? (
|
||||
<div className="port-empty">
|
||||
<Empty
|
||||
description={
|
||||
<span>
|
||||
该设备暂无端口
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setCreateModalVisible(true)}
|
||||
style={{ padding: 0, marginTop: 8 }}
|
||||
>
|
||||
立即添加端口
|
||||
</Button>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<ApiOutlined style={{ fontSize: 48, color: '#d9d9d9' }} />
|
||||
</Empty>
|
||||
</div>
|
||||
) : (
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={ports}
|
||||
rowKey="portId"
|
||||
pagination={false}
|
||||
size="small"
|
||||
scroll={{ x: 600 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<PortCreateModal
|
||||
device={{ deviceId, name: deviceName }}
|
||||
visible={createModalVisible}
|
||||
onClose={() => setCreateModalVisible(false)}
|
||||
onSuccess={handleCreateSuccess}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(PortManagementPanel);
|
||||
Reference in New Issue
Block a user