/**
* 网络拓扑可视化模块
* 基于D3.js实现网络拓扑图的可视化和交互
*/
class TopologyVisualization {
constructor() {
// 初始化变量
this.svg = null;
this.simulation = null;
this.nodes = [];
this.links = [];
this.selectedNode = null;
this.selectedLink = null;
this.transform = d3.zoomIdentity;
this.width = 0;
this.height = 0;
// UI元素
this.elements = {};
// 厂商颜色映射
this.vendorColors = {
cisco: '#1e40af',
huawei: '#dc2626',
h3c: '#059669',
juniper: '#7c3aed',
other: '#6b7280'
};
// 初始化
this.init();
}
/**
* 初始化拓扑可视化
*/
init() {
console.log('初始化网络拓扑可视化模块');
// 缓存DOM元素
this.cacheElements();
// 初始化SVG
this.initSVG();
// 绑定事件
this.bindEvents();
// 加载初始拓扑数据
this.loadTopology();
}
/**
* 缓存DOM元素
*/
cacheElements() {
this.elements = {
// 主要容器
topologyContent: document.getElementById('topology-content'),
topologyCanvas: document.getElementById('topology-canvas'),
topologySvg: document.getElementById('topology-svg'),
topologyLoading: document.getElementById('topology-loading'),
topologyEmpty: document.getElementById('topology-empty'),
// 工具栏按钮
discoverBtn: document.getElementById('discover-topology-btn'),
refreshBtn: document.getElementById('refresh-topology-btn'),
clearBtn: document.getElementById('clear-topology-btn'),
fitBtn: document.getElementById('fit-topology-btn'),
zoomInBtn: document.getElementById('zoom-in-btn'),
zoomOutBtn: document.getElementById('zoom-out-btn'),
centerBtn: document.getElementById('center-topology-btn'),
// 过滤器
vendorFilter: document.getElementById('vendor-filter'),
deviceTypeFilter: document.getElementById('device-type-filter'),
applyFilterBtn: document.getElementById('apply-filter-btn'),
// 统计元素
statNodes: document.getElementById('stat-nodes'),
statLinks: document.getElementById('stat-links'),
statProtocols: document.getElementById('stat-protocols'),
statVendors: document.getElementById('stat-vendors'),
// 详情面板
nodeDetails: document.getElementById('node-details'),
linkDetails: document.getElementById('link-details'),
// 操作按钮
connectBtn: document.getElementById('connect-to-device-btn'),
pingBtn: document.getElementById('ping-device-btn'),
discoverNeighborsBtn: document.getElementById('discover-neighbors-btn'),
propertiesBtn: document.getElementById('device-properties-btn'),
// 对话框
discoverModal: document.getElementById('topology-discover-modal'),
discoverForm: document.getElementById('topology-discover-form'),
seedDevicesList: document.getElementById('seed-devices-list'),
discoveryProgress: document.getElementById('discovery-progress'),
discoveryStatus: document.getElementById('discovery-status'),
discoveryProgressBar: document.getElementById('discovery-progress-bar'),
// 其他
gotoDevicesBtn: document.getElementById('goto-devices-btn')
};
}
/**
* 初始化SVG
*/
initSVG() {
const container = this.elements.topologyCanvas;
this.width = container.clientWidth;
this.height = container.clientHeight;
this.svg = d3.select('#topology-svg')
.attr('width', this.width)
.attr('height', this.height);
// 创建主要的图形组
this.g = this.svg.select('#topology-graph');
this.linkGroup = this.svg.select('#links-group');
this.nodeGroup = this.svg.select('#nodes-group');
this.labelGroup = this.svg.select('#labels-group');
// 获取或创建defs元素
let defs = this.svg.select('defs');
if (defs.empty()) {
defs = this.svg.append('defs');
}
// 添加渐变定义
this.createGradients(defs);
// 添加阴影滤镜
this.createShadowFilter(defs);
// 设置缩放行为
const zoom = d3.zoom()
.scaleExtent([0.1, 4])
.on('zoom', (event) => {
this.transform = event.transform;
this.g.attr('transform', this.transform);
});
this.svg.call(zoom);
// 初始化力仿真
this.simulation = d3.forceSimulation()
.force('link', d3.forceLink().id(d => d.id).distance(150))
.force('charge', d3.forceManyBody().strength(-300))
.force('center', d3.forceCenter(this.width / 2, this.height / 2))
.force('collision', d3.forceCollide().radius(30)); // 从25增加到30，适应更大的图标
}
/**
* 创建渐变定义
*/
createGradients(defs) {
const vendors = ['cisco', 'huawei', 'h3c', 'juniper', 'other'];
vendors.forEach(vendor => {
const gradient = defs.append('radialGradient')
.attr('id', `gradient-${vendor}`)
.attr('cx', '30%')
.attr('cy', '30%')
.attr('r', '70%');
const baseColor = this.vendorColors[vendor];
gradient.append('stop')
.attr('offset', '0%')
.attr('stop-color', this.lightenColor(baseColor, 0.3));
gradient.append('stop')
.attr('offset', '100%')
.attr('stop-color', baseColor);
});
}
/**
* 创建阴影滤镜
*/
createShadowFilter(defs) {
const filter = defs.append('filter')
.attr('id', 'drop-shadow')
.attr('x', '-50%')
.attr('y', '-50%')
.attr('width', '200%')
.attr('height', '200%');
filter.append('feDropShadow')
.attr('dx', 2)
.attr('dy', 2)
.attr('stdDeviation', 3)
.attr('flood-color', '#000')
.attr('flood-opacity', 0.3);
}
/**
* 调亮颜色
*/
lightenColor(color, percent) {
const num = parseInt(color.replace("#",""), 16);
const amt = Math.round(2.55 * percent * 100);
const R = (num >> 16) + amt;
const G = (num >> 8 & 0x00FF) + amt;
const B = (num & 0x0000FF) + amt;
return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
(G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
(B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
}
/**
* 绑定事件
*/
bindEvents() {
// 工具栏事件
this.elements.discoverBtn?.addEventListener('click', () => this.showDiscoverDialog());
this.elements.refreshBtn?.addEventListener('click', () => this.loadTopology());
this.elements.clearBtn?.addEventListener('click', () => this.clearTopology());
this.elements.fitBtn?.addEventListener('click', () => this.fitToView());
this.elements.zoomInBtn?.addEventListener('click', () => this.zoomIn());
this.elements.zoomOutBtn?.addEventListener('click', () => this.zoomOut());
this.elements.centerBtn?.addEventListener('click', () => this.centerView());
this.elements.applyFilterBtn?.addEventListener('click', () => this.applyFilters());
// 操作按钮事件
this.elements.connectBtn?.addEventListener('click', () => this.connectToDevice());
this.elements.pingBtn?.addEventListener('click', () => this.pingDevice());
this.elements.discoverNeighborsBtn?.addEventListener('click', () => this.discoverNeighbors());
this.elements.propertiesBtn?.addEventListener('click', () => this.showDeviceProperties());
// 其他事件
this.elements.gotoDevicesBtn?.addEventListener('click', () => this.gotoDevicesPage());
// 发现对话框事件
this.elements.discoverForm?.addEventListener('submit', (e) => this.handleDiscoverSubmit(e));
// 窗口大小改变事件
window.addEventListener('resize', () => this.handleResize());
// SVG点击事件（取消选择和隐藏菜单）
this.svg?.on('click', (event) => {
if (event.target === this.svg.node()) {
this.clearSelection();
this.hideContextMenu();
}
});
// 全局点击事件（隐藏上下文菜单）
document.addEventListener('click', (event) => {
// 如果点击的不是菜单内容，则隐藏菜单
const menu = document.getElementById('topology-context-menu');
if (menu && !menu.contains(event.target)) {
this.hideContextMenu();
}
});
// 全局ESC键事件（隐藏上下文菜单）
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
this.hideContextMenu();
}
});
}
/**
* 加载拓扑数据
*/
async loadTopology() {
try {
this.showLoading(true);
const response = await fetch('/api/topology');
const data = await response.json();
if (data.success && data.topology) {
this.updateTopology(data.topology);
this.showEmpty(false);
} else {
this.showEmpty(true);
}
} catch (error) {
console.error('加载拓扑数据失败:', error);
this.showEmpty(true);
} finally {
this.showLoading(false);
}
}
/**
* 更新拓扑数据
*/
updateTopology(topology) {
// 转换节点数据
this.nodes = Object.values(topology.nodes || {}).map(node => ({
id: node.device_id,
name: node.name,
ip: node.ip_address,
vendor: node.vendor || 'other',
deviceType: node.device_type || 'other',
status: node.status || 'unknown',
interfaces: node.interfaces || [],
interface_count: node.interface_count || (node.interfaces ? node.interfaces.length : 0), // 添加接口数字段
// D3需要的位置信息
x: Math.random() * this.width,
y: Math.random() * this.height
}));
// 转换链路数据
this.links = topology.links?.map(link => ({
id: `${link.source_device_id}-${link.target_device_id}`,
source: link.source_device_id,
target: link.target_device_id,
sourceInterface: link.source_interface,
targetInterface: link.target_interface,
protocol: link.protocol || 'unknown'
})) || [];
// 更新可视化
this.renderTopology();
// 更新统计信息
this.updateStatistics();
}
/**
* 渲染拓扑图
*/
renderTopology() {
// 更新仿真数据
this.simulation.nodes(this.nodes);
this.simulation.force('link').links(this.links);
// 渲染链路
this.renderLinks();
// 渲染节点
this.renderNodes();
// 渲染标签
this.renderLabels();
// 重启仿真
this.simulation.alpha(1).restart();
// 显示SVG并隐藏空状态
this.elements.topologySvg.style.display = 'block';
// 根据节点数量决定是否显示空状态
if (this.nodes.length > 0) {
this.showEmpty(false);
} else {
this.showEmpty(true);
}
}
/**
* 渲染链路
*/
renderLinks() {
const links = this.linkGroup.selectAll('.topology-link')
.data(this.links, d => d.id);
links.exit().remove();
const linkEnter = links.enter()
.append('line')
.attr('class', d => `topology-link ${d.protocol}`)
.attr('stroke-width', 2)
.on('click', (event, d) => this.selectLink(event, d));
const linkUpdate = linkEnter.merge(links);
// 更新链路位置（在仿真tick中处理）
this.simulation.on('tick', () => {
linkUpdate
.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y);
this.updateNodePositions();
this.updateLabelPositions();
});
}
/**
* 渲染节点
*/
renderNodes() {
const nodes = this.nodeGroup.selectAll('.topology-node-group')
.data(this.nodes, d => d.id);
nodes.exit().remove();
// 创建节点组
const nodeEnter = nodes.enter()
.append('g')
.attr('class', d => `topology-node-group ${d.vendor}`)
.call(this.createDragBehavior());
// 绑定点击和双击事件
this.bindNodeEvents(nodeEnter);
// 添加主节点圆圈（修改为完全透明）
nodeEnter.append('circle')
.attr('class', 'node-main-circle')
.attr('r', 18)
.attr('stroke', 'transparent') // 边框透明
.attr('stroke-width', 0) // 边框宽度为0
.style('fill', 'transparent') // 填充透明
.style('filter', 'none'); // 移除阴影效果
// 添加设备类型SVG图标（进一步增大尺寸）
const iconGroup = nodeEnter.append('g')
.attr('class', 'node-icon-group')
.attr('transform', 'translate(-20, -20)'); // 调整位置以适应更大的图标
// 根据设备类型添加不同的SVG图标
iconGroup.each(function(d) {
const group = d3.select(this);
const iconSvg = window.topologyVisualization.createDeviceIcon(d.deviceType, true); // 传递黑色参数
group.node().innerHTML = iconSvg;
});
// 添加状态指示器
nodeEnter.append('circle')
.attr('class', 'node-status-indicator')
.attr('r', 5)
.attr('cx', 18) // 调整位置以适应更大的图标
.attr('cy', -18)
.attr('stroke', '#fff')
.attr('stroke-width', 2)
.style('fill', d => this.getStatusColor(d.status));
// 添加厂商徽章
nodeEnter.append('circle')
.attr('class', 'node-vendor-badge')
.attr('r', 6)
.attr('cx', -18) // 调整位置以适应更大的图标
.attr('cy', -18)
.attr('stroke', '#fff')
.attr('stroke-width', 2)
.style('fill', d => this.vendorColors[d.vendor] || this.vendorColors.other);
// 添加厂商徽章文字
nodeEnter.append('text')
.attr('class', 'node-vendor-text')
.attr('x', -18) // 调整位置以适应更大的图标
.attr('y', -15)
.attr('text-anchor', 'middle')
.style('font-size', '7px')
.style('font-weight', 'bold')
.style('fill', '#fff')
.style('pointer-events', 'none')
.text(d => this.getVendorBadgeText(d.vendor));
// 更新现有节点
const nodeUpdate = nodeEnter.merge(nodes);
// 更新事件绑定
this.bindNodeEvents(nodeUpdate);
// 更新主圆圈样式
nodeUpdate.select('.node-main-circle')
.attr('r', 18)
.style('fill', 'transparent');
// 更新状态指示器颜色
nodeUpdate.select('.node-status-indicator')
.style('fill', d => this.getStatusColor(d.status));
// 更新图标
nodeUpdate.select('.node-icon-group')
.each(function(d) {
const group = d3.select(this);
const iconSvg = window.topologyVisualization.createDeviceIcon(d.deviceType, true);
group.node().innerHTML = iconSvg;
});
// 添加选择效果
nodeUpdate.classed('selected', d => d === this.selectedNode);
}
/**
* 绑定节点事件（单击选择，双击菜单）
*/
bindNodeEvents(selection) {
let clickTimeout = null;
selection
.on('click', (event, d) => {
event.stopPropagation();
// 清除之前的延迟
if (clickTimeout) {
clearTimeout(clickTimeout);
clickTimeout = null;
}
// 延迟执行单击，以区分双击
clickTimeout = setTimeout(() => {
this.selectNode(event, d);
clickTimeout = null;
}, 250);
})
.on('dblclick', (event, d) => {
event.stopPropagation();
// 取消单击延迟
if (clickTimeout) {
clearTimeout(clickTimeout);
clickTimeout = null;
}
// 先选择节点
this.selectNode(event, d);
// 显示上下文菜单
this.showContextMenu(event, d);
});
}
/**
* 显示上下文菜单
*/
showContextMenu(event, node) {
// 隐藏已存在的菜单
this.hideContextMenu();
// 创建菜单容器
const menu = document.createElement('div');
menu.className = 'topology-context-menu';
menu.id = 'topology-context-menu';
// 菜单项配置
const menuItems = [
{
icon: 'fas fa-terminal',
text: '连接终端',
action: () => this.connectToDevice(),
disabled: false
},
{
icon: 'fas fa-satellite-dish',
text: 'Ping测试',
action: () => this.pingDevice(),
disabled: false
},
{
icon: 'fas fa-search',
text: '发现邻居',
action: () => this.discoverNeighbors(),
disabled: false
},
{
type: 'divider'
},
{
icon: 'fas fa-cog',
text: '设备属性',
action: () => this.showDeviceProperties(),
disabled: false
},
{
icon: 'fas fa-copy',
text: '复制IP地址',
action: () => this.copyIPAddress(node),
disabled: false
},
{
type: 'divider'
},
{
icon: 'fas fa-expand-arrows-alt',
text: '居中到此设备',
action: () => this.centerToNode(node),
disabled: false
}
];
// 创建菜单项
menuItems.forEach(item => {
if (item.type === 'divider') {
const divider = document.createElement('div');
divider.className = 'context-menu-divider';
menu.appendChild(divider);
} else {
const menuItem = document.createElement('div');
menuItem.className = `context-menu-item ${item.disabled ? 'disabled' : ''}`;
menuItem.innerHTML = `
<i class="${item.icon}"></i>
<span>${item.text}</span>
`;
if (!item.disabled) {
menuItem.addEventListener('click', (e) => {
e.stopPropagation();
item.action();
this.hideContextMenu();
});
}
menu.appendChild(menuItem);
}
});
// 添加到页面
document.body.appendChild(menu);
// 计算位置（确保菜单不超出视窗）
const rect = this.elements.topologyCanvas.getBoundingClientRect();
const menuRect = menu.getBoundingClientRect();
let x = event.clientX;
let y = event.clientY;
// 防止菜单超出右边界
if (x + menuRect.width > window.innerWidth) {
x = window.innerWidth - menuRect.width - 10;
}
// 防止菜单超出下边界
if (y + menuRect.height > window.innerHeight) {
y = window.innerHeight - menuRect.height - 10;
}
// 设置位置
menu.style.left = `${x}px`;
menu.style.top = `${y}px`;
// 添加动画效果
menu.style.opacity = '0';
menu.style.transform = 'scale(0.8)';
requestAnimationFrame(() => {
menu.style.opacity = '1';
menu.style.transform = 'scale(1)';
});
// 存储当前菜单节点
this.contextMenuNode = node;
}
/**
* 隐藏上下文菜单
*/
hideContextMenu() {
const existingMenu = document.getElementById('topology-context-menu');
if (existingMenu) {
existingMenu.remove();
}
this.contextMenuNode = null;
}
/**
* 复制IP地址到剪贴板
*/
async copyIPAddress(node) {
try {
await navigator.clipboard.writeText(node.ip);
this.showNotification(`IP地址已复制: ${node.ip}`, 'success');
} catch (error) {
console.error('复制失败:', error);
this.showNotification('复制失败，请手动复制', 'error');
}
}
/**
* 居中到指定节点
*/
centerToNode(node) {
if (!node) return;
const scale = this.transform.k || 1;
const translateX = this.width / 2 - node.x * scale;
const translateY = this.height / 2 - node.y * scale;
this.svg.transition()
.duration(750)
.call(d3.zoom().transform, d3.zoomIdentity.translate(translateX, translateY).scale(scale));
}
/**
* 显示通知消息
*/
showNotification(message, type = 'info') {
// 创建通知元素
const notification = document.createElement('div');
notification.className = `topology-notification ${type}`;
notification.textContent = message;
// 添加到页面
document.body.appendChild(notification);
// 设置初始样式
notification.style.position = 'fixed';
notification.style.top = '20px';
notification.style.right = '20px';
notification.style.zIndex = '10000';
notification.style.opacity = '0';
notification.style.transform = 'translateX(100%)';
notification.style.transition = 'all 0.3s ease';
// 显示动画
requestAnimationFrame(() => {
notification.style.opacity = '1';
notification.style.transform = 'translateX(0)';
});
// 自动隐藏
setTimeout(() => {
notification.style.opacity = '0';
notification.style.transform = 'translateX(100%)';
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification);
}
}, 300);
}, 3000);
}
/**
* 渲染标签
*/
renderLabels() {
const labels = this.labelGroup.selectAll('.node-label')
.data(this.nodes, d => d.id);
labels.exit().remove();
const labelEnter = labels.enter()
.append('text')
.attr('class', 'node-label')
.attr('dy', 35) // 调整标签位置，从25改回35
.text(d => d.name);
const labelUpdate = labelEnter.merge(labels);
}
/**
* 更新节点位置 - 优化版，支持拖拽时的实时更新
*/
updateNodePositions() {
this.nodeGroup.selectAll('.topology-node-group')
.attr('transform', d => {
// 优先使用固定位置（拖拽时设置的fx, fy），否则使用模拟位置
const x = d.fx !== undefined ? d.fx : d.x;
const y = d.fy !== undefined ? d.fy : d.y;
return `translate(${x},${y})`;
});
}
/**
* 更新标签位置
*/
updateLabelPositions() {
this.labelGroup.selectAll('.node-label')
.attr('x', d => d.x)
.attr('y', d => d.y);
}
/**
* 创建拖拽行为 - 优化版，只移动当前设备，其他设备保持固定
*/
createDragBehavior() {
return d3.drag()
.on('start', (event, d) => {
// 固定所有其他节点
this.nodes.forEach(node => {
if (node !== d) {
node.fx = node.x;
node.fy = node.y;
}
});
// 设置当前节点为拖拽状态
d.fx = d.x;
d.fy = d.y;
// 提升被拖拽节点的层级
d3.select(event.sourceEvent.currentTarget.parentNode)
.raise()
.classed('dragging', true);
// 暂停力模拟或设置很低的alpha值
this.simulation.alphaTarget(0.01).restart();
})
.on('drag', (event, d) => {
// 实时更新当前节点位置
d.fx = event.x;
d.fy = event.y;
// 立即更新节点位置
const nodeGroup = d3.select(event.sourceEvent.currentTarget.parentNode);
nodeGroup.attr('transform', `translate(${d.fx},${d.fy})`);
// 立即更新相关链路
this.linkGroup.selectAll('.topology-link')
.filter(link => link.source === d || link.target === d)
.attr('x1', link => link.source.fx || link.source.x)
.attr('y1', link => link.source.fy || link.source.y)
.attr('x2', link => link.target.fx || link.target.x)
.attr('y2', link => link.target.fy || link.target.y);
// 立即更新标签位置
this.labelGroup.selectAll('.node-label')
.filter(node => node === d)
.attr('x', d.fx)
.attr('y', d.fy + 35); // 调整标签位置，从25改回35
})
.on('end', (event, d) => {
// 拖拽结束，停止力模拟
this.simulation.alphaTarget(0);
// 移除拖拽状态
d3.select(event.sourceEvent.currentTarget.parentNode)
.classed('dragging', false);
// 保持当前节点在拖拽结束位置（固定位置）
// 保持其他节点的固定位置不变
// 注意：不释放fx, fy，这样所有节点都保持在固定位置
});
}
/**
* 选择节点
*/
selectNode(event, node) {
event.stopPropagation();
// 清除之前的选择
this.clearSelection();
// 设置新选择
this.selectedNode = node;
this.selectedLink = null;
// 更新UI
this.updateNodeSelection();
this.showNodeDetails(node);
this.updateActionButtons();
}
/**
* 选择链路
*/
selectLink(event, link) {
event.stopPropagation();
// 清除之前的选择
this.clearSelection();
// 设置新选择
this.selectedLink = link;
this.selectedNode = null;
// 更新UI
this.updateLinkSelection();
this.showLinkDetails(link);
this.updateActionButtons();
}
/**
* 清除选择
*/
clearSelection() {
this.selectedNode = null;
this.selectedLink = null;
// 更新UI
this.updateNodeSelection();
this.updateLinkSelection();
this.showDefaultDetails();
this.updateActionButtons();
}
/**
* 更新节点选择状态
*/
updateNodeSelection() {
this.nodeGroup.selectAll('.topology-node-group')
.classed('selected', d => d === this.selectedNode);
this.labelGroup.selectAll('.node-label')
.classed('selected', d => d === this.selectedNode);
}
/**
* 更新链路选择状态
*/
updateLinkSelection() {
this.linkGroup.selectAll('.topology-link')
.classed('selected', d => d === this.selectedLink);
}
/**
* 显示节点详情
*/
showNodeDetails(node) {
// 获取接口数，优先级：直接接口数据 > 连接数推测 > 显示未知
let interfaceCount;
if (node.interfaces && Array.isArray(node.interfaces) && node.interfaces.length > 0) {
// 有实际接口数据
interfaceCount = node.interfaces.length;
} else if (node.interface_count && node.interface_count > 0) {
// 有接口数字段
interfaceCount = node.interface_count;
} else {
// 尝试从连接的链路数推测
const connectedLinks = this.links.filter(link =>
(link.source.id || link.source) === node.id ||
(link.target.id || link.target) === node.id
);
if (connectedLinks.length > 0) {
interfaceCount = `${connectedLinks.length}+ (推测)`;
} else {
interfaceCount = '未知';
}
}
const detailsHtml = `
<div class="device-info">
<div class="device-name">${node.name}</div>
<div class="device-details">
<div class="detail-item">
<span class="detail-label">IP地址:</span>
<span>${node.ip}</span>
</div>
<div class="detail-item">
<span class="detail-label">厂商:</span>
<span>${this.getVendorDisplayName(node.vendor)}</span>
</div>
<div class="detail-item">
<span class="detail-label">类型:</span>
<span>${this.getDeviceTypeDisplayName(node.deviceType)}</span>
</div>
<div class="detail-item">
<span class="detail-label">状态:</span>
<span class="device-status-indicator ${node.status}"></span>
</div>
<div class="detail-item">
<span class="detail-label">接口数:</span>
<span>${interfaceCount}</span>
</div>
</div>
</div>
`;
this.elements.nodeDetails.innerHTML = detailsHtml;
}
/**
* 显示链路详情
*/
showLinkDetails(link) {
const sourceNode = this.nodes.find(n => n.id === link.source.id || n.id === link.source);
const targetNode = this.nodes.find(n => n.id === link.target.id || n.id === link.target);
const detailsHtml = `
<div class="link-info">
<div class="link-endpoints">
${sourceNode?.name || 'Unknown'} ↔ ${targetNode?.name || 'Unknown'}
</div>
<div class="link-details-info">
<div class="detail-item">
<span class="detail-label">协议:</span>
<span class="protocol-badge ${link.protocol}">${link.protocol.toUpperCase()}</span>
</div>
${link.sourceInterface ? `
<div class="detail-item">
<span class="detail-label">源接口:</span>
<span>${link.sourceInterface}</span>
</div>
` : ''}
${link.targetInterface ? `
<div class="detail-item">
<span class="detail-label">目标接口:</span>
<span>${link.targetInterface}</span>
</div>
` : ''}
</div>
</div>
`;
this.elements.linkDetails.innerHTML = detailsHtml;
}
/**
* 显示默认详情
*/
showDefaultDetails() {
this.elements.nodeDetails.innerHTML = `
<div class="no-selection">
<i class="fas fa-mouse-pointer"></i>
<span>点击节点查看详细信息</span>
</div>
`;
this.elements.linkDetails.innerHTML = `
<div class="no-selection">
<i class="fas fa-mouse-pointer"></i>
<span>点击链路查看连接信息</span>
</div>
`;
}
/**
* 更新操作按钮状态
*/
updateActionButtons() {
const hasSelection = this.selectedNode !== null;
if (this.elements.connectBtn) this.elements.connectBtn.disabled = !hasSelection;
if (this.elements.pingBtn) this.elements.pingBtn.disabled = !hasSelection;
if (this.elements.discoverNeighborsBtn) this.elements.discoverNeighborsBtn.disabled = !hasSelection;
if (this.elements.propertiesBtn) this.elements.propertiesBtn.disabled = !hasSelection;
}
/**
* 更新统计信息
*/
updateStatistics() {
// 计算协议数量
const protocols = new Set(this.links.map(l => l.protocol));
const vendors = new Set(this.nodes.map(n => n.vendor));
if (this.elements.statNodes) this.elements.statNodes.textContent = this.nodes.length;
if (this.elements.statLinks) this.elements.statLinks.textContent = this.links.length;
if (this.elements.statProtocols) this.elements.statProtocols.textContent = protocols.size;
if (this.elements.statVendors) this.elements.statVendors.textContent = vendors.size;
}
/**
* 显示发现对话框
*/
async showDiscoverDialog() {
try {
// 加载可用设备
const response = await fetch('/api/devices');
const devices = await response.json();
this.populateDeviceList(devices);
this.showModal(this.elements.discoverModal);
} catch (error) {
console.error('加载设备列表失败:', error);
}
}
/**
* 填充设备列表
*/
populateDeviceList(devices) {
const container = this.elements.seedDevicesList;
if (!devices || devices.length === 0) {
container.innerHTML = `
<div class="no-devices">
<p>没有可用的设备。请先在设备管理页面添加设备。</p>
</div>
`;
return;
}
const deviceListHtml = devices.map(device => `
<label class="checkbox-label">
<input type="checkbox" value="${device.id}" data-device-name="${device.name}">
<div class="device-checkbox-item">
<span class="device-checkbox-name">${device.name}</span>
<span class="device-checkbox-info">${device.ip_address} (${device.vendor})</span>
</div>
</label>
`).join('');
container.innerHTML = deviceListHtml;
}
/**
* 处理发现表单提交
*/
async handleDiscoverSubmit(event) {
event.preventDefault();
// 获取选中的设备
const selectedDevices = Array.from(this.elements.seedDevicesList.querySelectorAll('input[type="checkbox"]:checked'))
.map(cb => cb.value);
if (selectedDevices.length === 0) {
alert('请至少选择一个种子设备');
return;
}
// 显示进度
this.showDiscoveryProgress(true);
try {
// 调用发现API
const response = await fetch('/api/topology/discover', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(selectedDevices)
});
const result = await response.json();
if (result.success) {
// 发现成功，更新拓扑
this.updateTopology(result.topology);
this.hideModal(this.elements.discoverModal);
this.showDiscoveryProgress(false);
} else {
throw new Error(result.message || '拓扑发现失败');
}
} catch (error) {
console.error('拓扑发现失败:', error);
alert('拓扑发现失败: ' + error.message);
this.showDiscoveryProgress(false);
}
}
/**
* 显示/隐藏发现进度
*/
showDiscoveryProgress(show) {
if (this.elements.discoveryProgress) {
this.elements.discoveryProgress.style.display = show ? 'block' : 'none';
}
if (this.elements.discoverForm) {
this.elements.discoverForm.style.display = show ? 'none' : 'block';
}
}
/**
* 清空拓扑
*/
async clearTopology() {
if (!confirm('确定要清空拓扑数据吗？')) {
return;
}
try {
const response = await fetch('/api/topology', {
method: 'DELETE'
});
const result = await response.json();
if (result.success) {
this.nodes = [];
this.links = [];
this.clearSelection();
this.renderTopology();
this.updateStatistics();
this.showEmpty(true);
}
} catch (error) {
console.error('清空拓扑失败:', error);
}
}
/**
* 缩放控制
*/
fitToView() {
if (this.nodes.length === 0) return;
const bounds = this.getTopologyBounds();
const fullWidth = this.width;
const fullHeight = this.height;
const width = bounds.x[1] - bounds.x[0];
const height = bounds.y[1] - bounds.y[0];
const midX = (bounds.x[0] + bounds.x[1]) / 2;
const midY = (bounds.y[0] + bounds.y[1]) / 2;
if (width === 0 || height === 0) return;
const scale = Math.min(fullWidth / width, fullHeight / height) * 0.8;
const translate = [fullWidth / 2 - scale * midX, fullHeight / 2 - scale * midY];
this.svg.transition()
.duration(750)
.call(d3.zoom().transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale));
}
zoomIn() {
this.svg.transition()
.duration(300)
.call(d3.zoom().scaleBy, 1.5);
}
zoomOut() {
this.svg.transition()
.duration(300)
.call(d3.zoom().scaleBy, 1 / 1.5);
}
centerView() {
this.svg.transition()
.duration(750)
.call(d3.zoom().transform, d3.zoomIdentity);
}
/**
* 获取拓扑边界
*/
getTopologyBounds() {
const xs = this.nodes.map(d => d.x);
const ys = this.nodes.map(d => d.y);
return {
x: [Math.min(...xs) - 50, Math.max(...xs) + 50],
y: [Math.min(...ys) - 50, Math.max(...ys) + 50]
};
}
/**
* 应用过滤器
*/
applyFilters() {
const vendorFilter = this.elements.vendorFilter?.value;
const deviceTypeFilter = this.elements.deviceTypeFilter?.value;
// 应用节点过滤
this.nodeGroup.selectAll('.topology-node-group')
.style('opacity', d => {
let visible = true;
if (vendorFilter && d.vendor !== vendorFilter) visible = false;
if (deviceTypeFilter && d.deviceType !== deviceTypeFilter) visible = false;
return visible ? 1 : 0.2;
});
// 应用标签过滤
this.labelGroup.selectAll('.node-label')
.style('opacity', d => {
let visible = true;
if (vendorFilter && d.vendor !== vendorFilter) visible = false;
if (deviceTypeFilter && d.deviceType !== deviceTypeFilter) visible = false;
return visible ? 1 : 0.2;
});
}
/**
* 操作按钮功能
*/
connectToDevice() {
if (!this.selectedNode) return;
// 切换到终端页面并连接设备
this.gotoTerminalPage();
// 触发设备连接（需要集成到终端模块）
setTimeout(() => {
const event = new CustomEvent('connectDevice', {
detail: { deviceId: this.selectedNode.id }
});
document.dispatchEvent(event);
}, 100);
}
async pingDevice() {
if (!this.selectedNode) return;
alert(`Ping功能待实现: ${this.selectedNode.ip}`);
}
async discoverNeighbors() {
if (!this.selectedNode) return;
try {
// 显示加载状态
this.showLoading(true);
const response = await fetch(`/api/devices/${this.selectedNode.id}/discover-neighbors`, {
method: 'POST'
});
const result = await response.json();
if (result.success) {
// 发现成功，重新加载拓扑但保持当前状态
await this.loadTopologyData();
// 显示成功消息
alert(`发现邻居成功，找到 ${result.neighbor_count} 个邻居`);
// 如果有数据，确保不显示空状态
if (this.nodes.length > 0) {
this.showEmpty(false);
}
} else {
throw new Error(result.message || '发现邻居失败');
}
} catch (error) {
console.error('发现邻居失败:', error);
alert('发现邻居失败: ' + error.message);
} finally {
this.showLoading(false);
}
}
/**
* 加载拓扑数据（不改变UI状态）
*/
async loadTopologyData() {
try {
const response = await fetch('/api/topology');
const data = await response.json();
if (data.success && data.topology) {
this.updateTopology(data.topology);
return true;
} else {
return false;
}
} catch (error) {
console.error('加载拓扑数据失败:', error);
return false;
}
}
showDeviceProperties() {
if (!this.selectedNode) return;
// 切换到设备管理页面并高亮选中的设备
this.gotoDevicesPage();
setTimeout(() => {
const event = new CustomEvent('highlightDevice', {
detail: { deviceId: this.selectedNode.id }
});
document.dispatchEvent(event);
}, 100);
}
/**
* 页面导航
*/
gotoDevicesPage() {
const devicesNavLink = document.querySelector('.nav-link[data-page="devices"]');
if (devicesNavLink) {
devicesNavLink.click();
}
}
gotoTerminalPage() {
const terminalNavLink = document.querySelector('.nav-link[data-page="terminal"]');
if (terminalNavLink) {
terminalNavLink.click();
}
}
/**
* 工具函数
*/
getVendorDisplayName(vendor) {
const vendorNames = {
cisco: 'Cisco',
huawei: '华为',
h3c: 'H3C',
juniper: 'Juniper',
other: '其他'
};
return vendorNames[vendor] || vendor;
}
getDeviceTypeDisplayName(deviceType) {
const typeNames = {
router: '路由器',
switch: '交换机',
firewall: '防火墙',
wireless_controller: '无线控制器',
access_point: '接入点',
load_balancer: '负载均衡器',
other: '其他'
};
return typeNames[deviceType] || deviceType;
}
getStatusDisplayName(status) {
const statusNames = {
online: '在线',
offline: '离线',
unreachable: '不可达',
maintenance: '维护中',
unknown: '未知'
};
return statusNames[status] || status;
}
/**
* 获取状态颜色
*/
getStatusColor(status) {
const statusColors = {
online: '#10b981', // 绿色
offline: '#ef4444', // 红色
unreachable: '#f59e0b', // 橙色
maintenance: '#3b82f6', // 蓝色
unknown: '#6b7280' // 灰色
};
return statusColors[status] || statusColors.unknown;
}
/**
* 获取厂商徽章文字
*/
getVendorBadgeText(vendor) {
const vendorTexts = {
cisco: 'C',
huawei: '华',
h3c: 'H',
juniper: 'J',
other: '?'
};
return vendorTexts[vendor] || vendorTexts.other;
}
/**
* 创建设备类型图标 (SVG) - 升级版本，更具设备特征
*/
createDeviceIcon(deviceType, black = false) {
const iconSize = 40; // 从32进一步增大到40
const iconColor = black ? '#000000' : '#ffffff';
const shadowColor = 'rgba(0,0,0,0.15)';
const icons = {
router: `
<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" style="pointer-events: none;">
<defs>
<linearGradient id="routerGrad${black ? 'Black' : ''}" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:${iconColor};stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:${black ? '#333333' : '#e5e7eb'};stop-opacity:0.8"/>
</linearGradient>
<filter id="routerShadow${black ? 'Black' : ''}">
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="${shadowColor}"/>
</filter>
</defs>
<g filter="url(#routerShadow${black ? 'Black' : ''})">
<!-- 路由器主机箱 -->
<rect x="2" y="8" width="20" height="8" rx="2" fill="url(#routerGrad${black ? 'Black' : ''})" stroke="${iconColor}" stroke-width="0.5"/>
<rect x="3" y="9" width="18" height="6" rx="1" fill="rgba(${black ? '255,255,255' : '0,0,0'},0.1)"/>
<!-- 前面板指示灯 -->
<circle cx="5" cy="12" r="1" fill="#10b981"/>
<circle cx="7.5" cy="12" r="1" fill="#f59e0b"/>
<circle cx="10" cy="12" r="1" fill="#ef4444"/>
<!-- 以太网端口 -->
<rect x="14" y="10.5" width="6" height="3" rx="0.5" fill="rgba(${black ? '255,255,255' : '0,0,0'},0.3)"/>
<rect x="14.5" y="11" width="1" height="2" rx="0.2" fill="${iconColor}"/>
<rect x="16" y="11" width="1" height="2" rx="0.2" fill="${iconColor}"/>
<rect x="17.5" y="11" width="1" height="2" rx="0.2" fill="${iconColor}"/>
<rect x="19" y="11" width="1" height="2" rx="0.2" fill="${iconColor}"/>
<!-- WiFi天线 -->
<rect x="5" y="5" width="1.5" height="3" rx="0.5" fill="${iconColor}"/>
<rect x="8" y="4" width="1.5" height="4" rx="0.5" fill="${iconColor}"/>
<rect x="11" y="3" width="1.5" height="5" rx="0.5" fill="${iconColor}"/>
<rect x="14" y="4" width="1.5" height="4" rx="0.5" fill="${iconColor}"/>
<rect x="17" y="5" width="1.5" height="3" rx="0.5" fill="${iconColor}"/>
<!-- 天线顶部 -->
<circle cx="5.75" cy="4.5" r="0.5" fill="#fbbf24"/>
<circle cx="8.75" cy="3.5" r="0.5" fill="#fbbf24"/>
<circle cx="11.75" cy="2.5" r="0.5" fill="#fbbf24"/>
<circle cx="14.75" cy="3.5" r="0.5" fill="#fbbf24"/>
<circle cx="17.75" cy="4.5" r="0.5" fill="#fbbf24"/>
</g>
</svg>`,
switch: `
<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" style="pointer-events: none;">
<defs>
<linearGradient id="switchGrad${black ? 'Black' : ''}" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:${iconColor};stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:${black ? '#333333' : '#e5e7eb'};stop-opacity:0.8"/>
</linearGradient>
<filter id="switchShadow${black ? 'Black' : ''}">
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="${shadowColor}"/>
</filter>
</defs>
<g filter="url(#switchShadow${black ? 'Black' : ''})">
<!-- 交换机主体 -->
<rect x="1" y="7" width="22" height="10" rx="2" fill="url(#switchGrad${black ? 'Black' : ''})" stroke="${iconColor}" stroke-width="0.5"/>
<rect x="2" y="8" width="20" height="8" rx="1" fill="rgba(${black ? '255,255,255' : '0,0,0'},0.1)"/>
<!-- 前面板 -->
<rect x="2.5" y="8.5" width="19" height="7" rx="0.5" fill="rgba(${black ? '255,255,255' : '0,0,0'},0.05)"/>
<!-- 端口灯光指示器 -->
<rect x="3" y="9.5" width="17" height="1" rx="0.5" fill="rgba(16,185,129,0.3)"/>
<rect x="3" y="11" width="17" height="1" rx="0.5" fill="rgba(245,158,11,0.3)"/>
<!-- 网络端口组 1 -->
<rect x="3" y="13" width="1.8" height="1.5" rx="0.3" fill="${iconColor}" stroke="rgba(${black ? '255,255,255' : '0,0,0'},0.2)" stroke-width="0.3"/>
<rect x="5.2" y="13" width="1.8" height="1.5" rx="0.3" fill="${iconColor}" stroke="rgba(${black ? '255,255,255' : '0,0,0'},0.2)" stroke-width="0.3"/>
<rect x="7.4" y="13" width="1.8" height="1.5" rx="0.3" fill="${iconColor}" stroke="rgba(${black ? '255,255,255' : '0,0,0'},0.2)" stroke-width="0.3"/>
<rect x="9.6" y="13" width="1.8" height="1.5" rx="0.3" fill="${iconColor}" stroke="rgba(${black ? '255,255,255' : '0,0,0'},0.2)" stroke-width="0.3"/>
<rect x="11.8" y="13" width="1.8" height="1.5" rx="0.3" fill="${iconColor}" stroke="rgba(${black ? '255,255,255' : '0,0,0'},0.2)" stroke-width="0.3"/>
<rect x="14" y="13" width="1.8" height="1.5" rx="0.3" fill="${iconColor}" stroke="rgba(${black ? '255,255,255' : '0,0,0'},0.2)" stroke-width="0.3"/>
<rect x="16.2" y="13" width="1.8" height="1.5" rx="0.3" fill="${iconColor}" stroke="rgba(${black ? '255,255,255' : '0,0,0'},0.2)" stroke-width="0.3"/>
<rect x="18.4" y="13" width="1.8" height="1.5" rx="0.3" fill="${iconColor}" stroke="rgba(${black ? '255,255,255' : '0,0,0'},0.2)" stroke-width="0.3"/>
<!-- 千兆上行端口 -->
<rect x="17" y="9" width="2.5" height="2" rx="0.3" fill="#3b82f6" stroke="${iconColor}" stroke-width="0.3"/>
<text x="18.25" y="10.5" text-anchor="middle" font-size="3" fill="${iconColor}" font-weight="bold">G</text>
<!-- 状态LED -->
<circle cx="4" cy="10.5" r="0.4" fill="#10b981"/>
<circle cx="6" cy="10.5" r="0.4" fill="#10b981"/>
<circle cx="8" cy="10.5" r="0.4" fill="#f59e0b"/>
<circle cx="10" cy="10.5" r="0.4" fill="#10b981"/>
<circle cx="12" cy="10.5" r="0.4" fill="#10b981"/>
</g>
</svg>`,
firewall: `
<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" style="pointer-events: none;">
<defs>
<linearGradient id="firewallGrad${black ? 'Black' : ''}" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:${black ? '#000000' : '#ef4444'};stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:${black ? '#333333' : '#dc2626'};stop-opacity:0.8"/>
</linearGradient>
<filter id="firewallShadow${black ? 'Black' : ''}">
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="${shadowColor}"/>
</filter>
</defs>
<g filter="url(#firewallShadow${black ? 'Black' : ''})">
<!-- 盾牌外形 -->
<path d="M12 2L3 6v6c0 6.55 4.03 12.74 9 14 4.97-1.26 9-7.45 9-14V6l-9-4z" fill="url(#firewallGrad${black ? 'Black' : ''})" stroke="${iconColor}" stroke-width="0.5"/>
<!-- 内部盾牌 -->
<path d="M12 3.5L4.5 7v5.5c0 5.8 3.5 10.6 7.5 11.8 4-1.2 7.5-6 7.5-11.8V7L12 3.5z" fill="rgba(${black ? '255,255,255' : '0,0,0'},0.1)"/>
<!-- 防火墙图标 -->
<rect x="7" y="8" width="10" height="1" rx="0.5" fill="${iconColor}"/>
<rect x="7" y="10" width="10" height="1" rx="0.5" fill="${iconColor}"/>
<rect x="7" y="12" width="10" height="1" rx="0.5" fill="${iconColor}"/>
<rect x="7" y="14" width="10" height="1" rx="0.5" fill="${iconColor}"/>
<!-- 中心锁 -->
<rect x="10" y="9.5" width="4" height="3.5" rx="0.5" fill="${iconColor}"/>
<rect x="10.5" y="10" width="3" height="2.5" rx="0.3" fill="${black ? '#000000' : '#ef4444'}"/>
<path d="M11.5 9.5v-1c0-0.8 0.7-1.5 1.5-1.5s1.5 0.7 1.5 1.5v1" stroke="${iconColor}" stroke-width="0.8" fill="none"/>
<!-- 安全指示器 -->
<circle cx="8" cy="16" r="0.8" fill="#10b981"/>
<circle cx="12" cy="16" r="0.8" fill="#f59e0b"/>
<circle cx="16" cy="16" r="0.8" fill="#ef4444"/>
</g>
</svg>`,
wireless_controller: `
<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" style="pointer-events: none;">
<defs>
<linearGradient id="wifiGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:0.8"/>
</linearGradient>
<filter id="wifiShadow">
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="${shadowColor}"/>
</filter>
</defs>
<g filter="url(#wifiShadow)">
<!-- 控制器主体 -->
<rect x="2" y="12" width="20" height="6" rx="2" fill="url(#wifiGrad)" stroke="${iconColor}" stroke-width="0.5"/>
<rect x="3" y="13" width="18" height="4" rx="1" fill="rgba(0,0,0,0.1)"/>
<!-- WiFi信号波纹（大范围） -->
<path d="M12 9c-4 0-7.5 1.6-10 4.2L3.4 12C6.2 9.9 9 8.5 12 8.5s5.8 1.4 8.6 3.5L19.6 13.2C17.5 10.6 14 9 12 9z" fill="${iconColor}" opacity="0.3"/>
<path d="M12 6c-5.5 0-10.5 2.2-14 5.8L-0.6 10.4C3.3 6.4 7.5 4.5 12 4.5s8.7 1.9 12.6 5.9L23.4 11.8C19.5 8.2 14.5 6 12 6z" fill="${iconColor}" opacity="0.2"/>
<!-- 中等信号波 -->
<path d="M12 11c-2.2 0-4.2 0.9-5.7 2.4l1.4 1.4c1-1 2.4-1.6 3.8-1.6s2.8 0.6 3.8 1.6l1.4-1.4C16.2 11.9 14.2 11 12 11z" fill="${iconColor}" opacity="0.6"/>
<!-- 小信号波 -->
<circle cx="12" cy="15.5" r="1.5" fill="${iconColor}"/>
<!-- 天线 -->
<rect x="6" y="9" width="1" height="3" rx="0.5" fill="${iconColor}"/>
<rect x="17" y="9" width="1" height="3" rx="0.5" fill="${iconColor}"/>
<!-- 天线顶部 -->
<circle cx="6.5" cy="8.5" r="0.8" fill="#10b981"/>
<circle cx="17.5" cy="8.5" r="0.8" fill="#10b981"/>
<!-- 前面板LED -->
<rect x="4" y="14.5" width="2" height="1" rx="0.3" fill="#10b981"/>
<rect x="7" y="14.5" width="2" height="1" rx="0.3" fill="#f59e0b"/>
<rect x="10" y="14.5" width="2" height="1" rx="0.3" fill="#ef4444"/>
<!-- 接入点管理指示 -->
<text x="18" y="15.8" text-anchor="middle" font-size="3" fill="${iconColor}" font-weight="bold">AP</text>
</g>
</svg>`,
access_point: `
<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" style="pointer-events: none;">
<defs>
<radialGradient id="apGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#d1d5db;stop-opacity:0.8"/>
</radialGradient>
<filter id="apShadow">
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="${shadowColor}"/>
</filter>
</defs>
<g filter="url(#apShadow)">
<!-- AP圆形外壳 -->
<circle cx="12" cy="15" r="7" fill="url(#apGrad)" stroke="${iconColor}" stroke-width="0.5"/>
<circle cx="12" cy="15" r="5.5" fill="rgba(0,0,0,0.05)"/>
<!-- WiFi波纹效果 -->
<circle cx="12" cy="15" r="2" fill="none" stroke="#3b82f6" stroke-width="1.5" opacity="0.8"/>
<circle cx="12" cy="15" r="3.5" fill="none" stroke="#3b82f6" stroke-width="1" opacity="0.5"/>
<circle cx="12" cy="15" r="5" fill="none" stroke="#3b82f6" stroke-width="0.8" opacity="0.3"/>
<!-- 中心发射点 -->
<circle cx="12" cy="15" r="1.2" fill="#3b82f6"/>
<circle cx="12" cy="15" r="0.6" fill="${iconColor}"/>
<!-- 天线基座 -->
<rect x="11" y="7" width="2" height="8" rx="1" fill="${iconColor}" stroke="rgba(0,0,0,0.2)" stroke-width="0.3"/>
<!-- 安装支架 -->
<rect x="9" y="6.5" width="6" height="2" rx="1" fill="${iconColor}" stroke="rgba(0,0,0,0.2)" stroke-width="0.3"/>
<rect x="10" y="5.5" width="4" height="1" rx="0.5" fill="rgba(0,0,0,0.1)"/>
<!-- 状态指示灯 -->
<circle cx="12" cy="11" r="0.8" fill="#10b981"/>
<!-- AP标识 -->
<text x="12" y="19" text-anchor="middle" font-size="3" fill="#6b7280" font-weight="bold">WiFi</text>
</g>
</svg>`,
load_balancer: `
<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" style="pointer-events: none;">
<defs>
<linearGradient id="lbGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0.8"/>
</linearGradient>
<filter id="lbShadow">
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="${shadowColor}"/>
</filter>
</defs>
<g filter="url(#lbShadow)">
<!-- 负载均衡器主体 -->
<rect x="2" y="9" width="20" height="6" rx="2" fill="url(#lbGrad)" stroke="${iconColor}" stroke-width="0.5"/>
<rect x="3" y="10" width="18" height="4" rx="1" fill="rgba(0,0,0,0.1)"/>
<!-- 负载均衡核心 -->
<circle cx="12" cy="12" r="2.5" fill="${iconColor}" stroke="rgba(0,0,0,0.2)" stroke-width="0.5"/>
<circle cx="12" cy="12" r="1.5" fill="#8b5cf6"/>
<!-- 负载分配箭头 -->
<path d="M9 8l3 2 3-2" stroke="${iconColor}" stroke-width="1.5" fill="none" marker-end="url(#arrowhead)"/>
<path d="M9 16l3-2 3 2" stroke="${iconColor}" stroke-width="1.5" fill="none" marker-end="url(#arrowhead)"/>
<!-- 连接线 -->
<line x1="5" y1="12" x2="9.5" y2="12" stroke="${iconColor}" stroke-width="2"/>
<line x1="14.5" y1="12" x2="19" y2="12" stroke="${iconColor}" stroke-width="2"/>
<!-- 输入输出端点 -->
<circle cx="4" cy="12" r="1.5" fill="#10b981" stroke="${iconColor}" stroke-width="0.5"/>
<circle cx="20" cy="12" r="1.5" fill="#10b981" stroke="${iconColor}" stroke-width="0.5"/>
<!-- 多个后端连接 -->
<circle cx="20" cy="9" r="0.8" fill="#3b82f6"/>
<circle cx="20" cy="12" r="0.8" fill="#10b981"/>
<circle cx="20" cy="15" r="0.8" fill="#f59e0b"/>
<!-- LB标识 -->
<text x="12" y="12.8" text-anchor="middle" font-size="3" fill="${iconColor}" font-weight="bold">LB</text>
<!-- 状态指示 -->
<circle cx="6" cy="10.5" r="0.5" fill="#10b981"/>
<circle cx="18" cy="10.5" r="0.5" fill="#10b981"/>
</g>
</svg>`,
server: `
<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" style="pointer-events: none;">
<defs>
<linearGradient id="serverGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6b7280;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#4b5563;stop-opacity:0.8"/>
</linearGradient>
<filter id="serverShadow">
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="${shadowColor}"/>
</filter>
</defs>
<g filter="url(#serverShadow)">
<!-- 服务器机箱 -->
<rect x="4" y="3" width="16" height="18" rx="2" fill="url(#serverGrad)" stroke="${iconColor}" stroke-width="0.5"/>
<rect x="5" y="4" width="14" height="16" rx="1" fill="rgba(0,0,0,0.1)"/>
<!-- 服务器单元 1 -->
<rect x="6" y="5" width="12" height="3" rx="0.5" fill="${iconColor}" stroke="rgba(0,0,0,0.2)" stroke-width="0.3"/>
<circle cx="7.5" cy="6.5" r="0.5" fill="#10b981"/>
<circle cx="9" cy="6.5" r="0.5" fill="#10b981"/>
<rect x="15" y="6" width="2" height="1" rx="0.2" fill="rgba(0,0,0,0.3)"/>
<!-- 服务器单元 2 -->
<rect x="6" y="9" width="12" height="3" rx="0.5" fill="${iconColor}" stroke="rgba(0,0,0,0.2)" stroke-width="0.3"/>
<circle cx="7.5" cy="10.5" r="0.5" fill="#10b981"/>
<circle cx="9" cy="10.5" r="0.5" fill="#f59e0b"/>
<rect x="15" y="10" width="2" height="1" rx="0.2" fill="rgba(0,0,0,0.3)"/>
<!-- 服务器单元 3 -->
<rect x="6" y="13" width="12" height="3" rx="0.5" fill="${iconColor}" stroke="rgba(0,0,0,0.2)" stroke-width="0.3"/>
<circle cx="7.5" cy="14.5" r="0.5" fill="#ef4444"/>
<circle cx="9" cy="14.5" r="0.5" fill="#6b7280"/>
<rect x="15" y="14" width="2" height="1" rx="0.2" fill="rgba(0,0,0,0.3)"/>
<!-- 底部电源/连接部分 -->
<rect x="6" y="17" width="12" height="2" rx="0.5" fill="rgba(0,0,0,0.2)"/>
<rect x="7" y="17.5" width="2" height="1" rx="0.2" fill="#10b981"/>
<rect x="10" y="17.5" width="2" height="1" rx="0.2" fill="#3b82f6"/>
<rect x="13" y="17.5" width="2" height="1" rx="0.2" fill="#f59e0b"/>
<rect x="16" y="17.5" width="1" height="1" rx="0.2" fill="#ef4444"/>
<!-- 散热孔 -->
<rect x="11" y="6" width="0.5" height="1" fill="rgba(0,0,0,0.3)"/>
<rect x="12.5" y="6" width="0.5" height="1" fill="rgba(0,0,0,0.3)"/>
<rect x="11" y="10" width="0.5" height="1" fill="rgba(0,0,0,0.3)"/>
<rect x="12.5" y="10" width="0.5" height="1" fill="rgba(0,0,0,0.3)"/>
<rect x="11" y="14" width="0.5" height="1" fill="rgba(0,0,0,0.3)"/>
<rect x="12.5" y="14" width="0.5" height="1" fill="rgba(0,0,0,0.3)"/>
</g>
</svg>`,
other: `
<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" style="pointer-events: none;">
<defs>
<linearGradient id="otherGrad${black ? 'Black' : ''}" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:${iconColor};stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:${black ? '#333333' : '#6b7280'};stop-opacity:0.8"/>
</linearGradient>
<filter id="otherShadow${black ? 'Black' : ''}">
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="${shadowColor}"/>
</filter>
</defs>
<g filter="url(#otherShadow${black ? 'Black' : ''})">
<!-- 通用网络设备外壳 -->
<rect x="3" y="8" width="18" height="8" rx="2" fill="url(#otherGrad${black ? 'Black' : ''})" stroke="${iconColor}" stroke-width="0.5"/>
<rect x="4" y="9" width="16" height="6" rx="1" fill="rgba(${black ? '255,255,255' : '0,0,0'},0.1)"/>
<!-- 网络连接图标 -->
<circle cx="8" cy="12" r="2.5" fill="none" stroke="${iconColor}" stroke-width="1.5"/>
<circle cx="16" cy="12" r="2.5" fill="none" stroke="${iconColor}" stroke-width="1.5"/>
<!-- 连接线 -->
<line x1="10.5" y1="12" x2="13.5" y2="12" stroke="${iconColor}" stroke-width="2"/>
<!-- 数据流动指示 -->
<circle cx="11" cy="12" r="0.5" fill="#3b82f6"/>
<circle cx="12" cy="12" r="0.5" fill="#10b981"/>
<circle cx="13" cy="12" r="0.5" fill="#f59e0b"/>
<!-- 状态指示灯 -->
<circle cx="5" cy="10" r="0.8" fill="#10b981"/>
<circle cx="19" cy="10" r="0.8" fill="#f59e0b"/>
<circle cx="5" cy="14" r="0.8" fill="#3b82f6"/>
<circle cx="19" cy="14" r="0.8" fill="#ef4444"/>
<!-- 设备标识 -->
<text x="12" y="10.5" text-anchor="middle" font-size="2.5" fill="${iconColor}" font-weight="bold">NET</text>
</g>
</svg>`
};
return icons[deviceType] || icons.other;
}
/**
* 显示/隐藏状态
*/
showLoading(show) {
if (this.elements.topologyLoading) {
this.elements.topologyLoading.style.display = show ? 'block' : 'none';
}
}
showEmpty(show) {
if (this.elements.topologyEmpty) {
this.elements.topologyEmpty.style.display = show ? 'block' : 'none';
}
if (this.elements.topologySvg) {
this.elements.topologySvg.style.display = show ? 'none' : 'block';
}
}
/**
* 模态框控制
*/
showModal(modal) {
if (modal) {
modal.style.display = 'block';
}
}
hideModal(modal) {
if (modal) {
modal.style.display = 'none';
}
}
/**
* 窗口大小改变处理
*/
handleResize() {
const container = this.elements.topologyCanvas;
if (container) {
this.width = container.clientWidth;
this.height = container.clientHeight;
this.svg
.attr('width', this.width)
.attr('height', this.height);
this.simulation
.force('center', d3.forceCenter(this.width / 2, this.height / 2))
.alpha(0.3)
.restart();
}
}
}
// 全局变量
let topologyVisualization = null;
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
console.log('拓扑模块JavaScript已加载');
// 将TopologyVisualization类暴露到全局作用域，供其他模块使用
window.TopologyVisualization = TopologyVisualization;
// 检查拓扑页面是否当前可见，如果是则立即初始化
const topologyContent = document.getElementById('topology-content');
if (topologyContent && topologyContent.style.display === 'block') {
console.log('拓扑页面当前可见，立即初始化');
try {
topologyVisualization = new TopologyVisualization();
window.topologyVisualization = topologyVisualization;
console.log('拓扑可视化模块初始化成功');
} catch (error) {
console.error('拓扑可视化模块初始化失败:', error);
}
}
});
// 导出模块（如果需要）
if (typeof module !== 'undefined' && module.exports) {
module.exports = TopologyVisualization;
}
