dashboard.js•28 kB
/**
* 仪表盘功能模块
* 提供主题切换、数据统计、系统状态监控等功能
*/
class DashboardManager {
constructor() {
this.refreshInterval = null;
this.timeInterval = null;
this.activities = [];
this.lastDataSnapshot = null;
this.init();
}
/**
* 初始化仪表盘
*/
init() {
console.log('初始化仪表盘管理器...');
// 初始化主题切换器
this.initializeThemeSwitcher();
// 更新当前时间
this.updateCurrentTime();
this.timeInterval = setInterval(() => this.updateCurrentTime(), 1000);
// 加载仪表盘数据
this.loadDashboardData();
// 绑定仪表盘事件
this.bindEvents();
// 添加活动记录
this.addActivity('仪表盘初始化成功', 'success');
// 设置自动刷新（30秒）
this.refreshInterval = setInterval(() => this.loadDashboardData(), 30000);
}
/**
* 主题切换器初始化
*/
initializeThemeSwitcher() {
const themeToggle = document.getElementById('theme-toggle');
if (!themeToggle) {
console.warn('主题切换器元素未找到');
return;
}
// 获取保存的主题或使用默认主题
const currentTheme = localStorage.getItem('theme') || 'light';
console.log('当前主题:', currentTheme);
// 应用主题
this.applyTheme(currentTheme);
// 设置切换器状态
themeToggle.checked = currentTheme === 'dark';
// 监听主题切换事件
themeToggle.addEventListener('change', (event) => {
const newTheme = event.target.checked ? 'dark' : 'light';
console.log('切换主题到:', newTheme);
this.applyTheme(newTheme);
localStorage.setItem('theme', newTheme);
// 添加活动记录
this.addActivity(`切换到${newTheme === 'dark' ? '暗色' : '明亮'}主题`, 'info');
});
console.log('主题切换器初始化完成');
}
/**
* 应用主题
*/
applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
// 更新元标签以支持系统主题
let themeColorMeta = document.querySelector('meta[name="theme-color"]');
if (!themeColorMeta) {
themeColorMeta = document.createElement('meta');
themeColorMeta.name = 'theme-color';
document.head.appendChild(themeColorMeta);
}
// 根据主题设置元标签颜色
if (theme === 'dark') {
themeColorMeta.content = '#1e293b';
} else {
themeColorMeta.content = '#ffffff';
}
console.log(`主题 ${theme} 已应用`);
}
/**
* 更新当前时间
*/
updateCurrentTime() {
const now = new Date();
const timeString = now.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
const currentTimeElement = document.getElementById('current-time');
if (currentTimeElement) {
currentTimeElement.textContent = timeString;
}
}
/**
* 加载仪表盘数据
*/
async loadDashboardData() {
try {
console.log('开始加载仪表盘数据...');
// 显示加载状态
this.setLoadingState(true);
// 并行加载各种数据
const [devices, topology, credentials, activeConnections, terminalSessions] = await Promise.all([
this.fetchWithFallback('/api/devices', []),
this.fetchWithFallback('/api/topology', { nodes: {}, links: [] }),
this.fetchWithFallback('/api/credentials', []),
this.getActiveSessions(),
this.getTerminalSessions()
]);
console.log('数据加载完成:', {
devices: devices.length,
topology: Object.keys(topology.nodes || {}).length,
credentials: credentials.length,
activeConnections: activeConnections.length,
terminalSessions: terminalSessions.length
});
// 检测数据变化
const currentSnapshot = {
devicesCount: devices.length,
topologyCount: Object.keys(topology.nodes || {}).length,
credentialsCount: credentials.length,
connectionsCount: activeConnections.length,
sessionsCount: terminalSessions.length
};
// 如果有数据变化，记录活动
if (this.lastDataSnapshot) {
this.detectDataChanges(this.lastDataSnapshot, currentSnapshot);
}
this.lastDataSnapshot = currentSnapshot;
// 更新统计数据
this.updateDashboardStats(devices, topology, credentials, activeConnections, terminalSessions);
// 更新设备概览
this.updateDevicesOverview(devices);
// 检查系统状态
await this.checkSystemStatus();
} catch (error) {
console.error('加载仪表盘数据失败:', error);
this.addActivity('加载仪表盘数据失败', 'error');
} finally {
this.setLoadingState(false);
}
}
/**
* 检测数据变化
*/
detectDataChanges(oldSnapshot, newSnapshot) {
if (newSnapshot.devicesCount !== oldSnapshot.devicesCount) {
const change = newSnapshot.devicesCount - oldSnapshot.devicesCount;
this.addActivity(`设备数量${change > 0 ? '增加' : '减少'}${Math.abs(change)}个`, change > 0 ? 'success' : 'warning');
}
if (newSnapshot.topologyCount !== oldSnapshot.topologyCount) {
const change = newSnapshot.topologyCount - oldSnapshot.topologyCount;
this.addActivity(`拓扑节点${change > 0 ? '增加' : '减少'}${Math.abs(change)}个`, 'info');
}
if (newSnapshot.credentialsCount !== oldSnapshot.credentialsCount) {
const change = newSnapshot.credentialsCount - oldSnapshot.credentialsCount;
this.addActivity(`凭据${change > 0 ? '增加' : '减少'}${Math.abs(change)}个`, 'info');
}
if (newSnapshot.connectionsCount !== oldSnapshot.connectionsCount) {
const change = newSnapshot.connectionsCount - oldSnapshot.connectionsCount;
this.addActivity(`活跃连接${change > 0 ? '增加' : '减少'}${Math.abs(change)}个`, change > 0 ? 'success' : 'info');
}
if (newSnapshot.sessionsCount !== oldSnapshot.sessionsCount) {
const change = newSnapshot.sessionsCount - oldSnapshot.sessionsCount;
this.addActivity(`终端会话${change > 0 ? '增加' : '减少'}${Math.abs(change)}个`, change > 0 ? 'success' : 'info');
}
}
/**
* 获取活跃会话数
*/
async getActiveSessions() {
try {
// 首先尝试从后端API获取活跃连接
const response = await fetch('/api/connections/active');
if (response.ok) {
const connections = await response.json();
return connections || [];
}
} catch (error) {
console.warn('无法从API获取活跃连接:', error);
}
// 从全局会话管理器获取活跃会话
if (window.sessionManager && window.sessionManager.activeSessions) {
return Object.keys(window.sessionManager.activeSessions);
}
// 从终端管理器获取
if (window.terminalManager && window.terminalManager.terminals) {
return Object.keys(window.terminalManager.terminals);
}
return [];
}
/**
* 获取真正的终端会话数
*/
async getTerminalSessions() {
try {
// 尝试从终端管理器获取
if (window.terminalManager && window.terminalManager.terminals) {
return Object.keys(window.terminalManager.terminals);
}
// 尝试从会话管理器获取
if (window.sessionManager && window.sessionManager.activeSessions) {
return Object.keys(window.sessionManager.activeSessions);
}
// 尝试从DOM获取终端标签页数量
const terminalTabs = document.querySelectorAll('.terminal-tab');
if (terminalTabs.length > 0) {
return Array.from(terminalTabs).map((tab, index) => `terminal-${index}`);
}
return [];
} catch (error) {
console.warn('获取终端会话失败:', error);
return [];
}
}
/**
* 带回退的网络请求
*/
async fetchWithFallback(url, fallback) {
try {
const response = await fetch(url);
if (response.ok) {
const data = await response.json();
console.log(`API ${url} 请求成功:`, data);
return data;
} else {
console.warn(`API ${url} 请求失败 (${response.status}):`, response.statusText);
return fallback;
}
} catch (error) {
console.warn(`API ${url} 请求异常:`, error);
return fallback;
}
}
/**
* 设置加载状态
*/
setLoadingState(loading) {
const refreshBtn = document.getElementById('refresh-dashboard');
if (refreshBtn) {
if (loading) {
refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中';
refreshBtn.disabled = true;
} else {
refreshBtn.innerHTML = '<i class="fas fa-sync"></i> 刷新';
refreshBtn.disabled = false;
}
}
}
/**
* 更新仪表盘统计数据
*/
updateDashboardStats(devices, topology, credentials, activeConnections, terminalSessions) {
// 设备数量
const devicesCount = devices.length;
this.updateStatCard('dashboard-devices-count', devicesCount);
this.updateStatChange('dashboard-devices-change', `+${devicesCount}`);
// 活跃连接数（会话数）
const connectionsCount = activeConnections.length;
this.updateStatCard('dashboard-connections-count', connectionsCount);
this.updateStatChange('dashboard-connections-change', connectionsCount > 0 ? `+${connectionsCount}` : '0');
// 拓扑节点数
const topologyNodes = topology.nodes ? Object.keys(topology.nodes).length : 0;
this.updateStatCard('dashboard-topology-nodes', topologyNodes);
this.updateStatChange('dashboard-topology-change', `+${topologyNodes}`);
// 终端会话数（修正：之前错误地显示凭据数量）
const sessionsCount = terminalSessions.length;
this.updateStatCard('dashboard-sessions-count', sessionsCount);
this.updateStatChange('dashboard-sessions-change', `+${sessionsCount}`);
}
/**
* 更新统计卡片的数值
*/
updateStatCard(elementId, value) {
const element = document.getElementById(elementId);
if (element) {
const currentValue = parseInt(element.textContent) || 0;
const targetValue = parseInt(value) || 0;
if (currentValue !== targetValue) {
this.animateNumber(element, currentValue, targetValue, 500);
}
}
}
/**
* 更新统计变化指示器
*/
updateStatChange(elementId, value) {
const element = document.getElementById(elementId);
if (element) {
element.textContent = value;
// 根据值设置样式
element.className = 'stat-change';
if (value.startsWith('+') && value !== '+0') {
element.classList.add('positive');
} else if (value.startsWith('-')) {
element.classList.add('negative');
} else {
element.classList.add('neutral');
}
}
}
/**
* 数字动画效果
*/
animateNumber(element, start, end, duration) {
const startTime = performance.now();
const updateNumber = (currentTime) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// 使用缓动函数
const easedProgress = 1 - Math.pow(1 - progress, 3);
const current = Math.round(start + (end - start) * easedProgress);
element.textContent = current;
if (progress < 1) {
requestAnimationFrame(updateNumber);
}
};
requestAnimationFrame(updateNumber);
}
/**
* 更新设备概览
*/
updateDevicesOverview(devices) {
const devicesOverview = document.getElementById('devices-overview');
if (!devicesOverview) return;
if (!devices || devices.length === 0) {
devicesOverview.innerHTML = `
<div class="no-devices">
<i class="fas fa-server"></i>
<p>暂无设备</p>
<button class="btn btn-sm" onclick="dashboardManager.goToDevices()">
<i class="fas fa-plus"></i> 添加设备
</button>
</div>
`;
return;
}
// 显示前5个设备
const displayDevices = devices.slice(0, 5);
const deviceItems = displayDevices.map(device => `
<div class="device-overview-item" onclick="dashboardManager.goToDevices('${device.id}')" title="点击查看设备详情">
<div class="device-overview-icon">
<i class="fas fa-${this.getDeviceIcon(device.device_type)}"></i>
</div>
<div class="device-overview-info">
<div class="device-overview-name">${device.name}</div>
<div class="device-overview-details">${device.ip_address} • ${this.getVendorDisplayName(device.vendor)}</div>
</div>
<div class="device-overview-status ${device.status || 'unknown'}" title="状态: ${this.getStatusDisplayName(device.status)}"></div>
</div>
`).join('');
devicesOverview.innerHTML = deviceItems;
// 如果设备数量超过5个，显示"查看更多"
if (devices.length > 5) {
devicesOverview.innerHTML += `
<div class="device-overview-item" onclick="dashboardManager.goToDevices()" style="cursor: pointer;" title="查看所有设备">
<div class="device-overview-icon">
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="device-overview-info">
<div class="device-overview-name">查看更多</div>
<div class="device-overview-details">还有 ${devices.length - 5} 个设备</div>
</div>
<div class="device-overview-status more-indicator"></div>
</div>
`;
}
}
/**
* 获取设备图标
*/
getDeviceIcon(deviceType) {
const icons = {
router: 'route',
switch: 'network-wired',
firewall: 'shield-alt',
wireless_controller: 'wifi',
access_point: 'broadcast-tower',
load_balancer: 'balance-scale',
server: 'server'
};
return icons[deviceType] || 'server';
}
/**
* 获取厂商显示名称
*/
getVendorDisplayName(vendor) {
const vendorNames = {
cisco: 'Cisco',
huawei: '华为',
h3c: 'H3C',
juniper: 'Juniper',
arista: 'Arista',
fortinet: 'Fortinet',
checkpoint: 'CheckPoint',
other: '其他'
};
return vendorNames[vendor] || vendor;
}
/**
* 获取状态显示名称
*/
getStatusDisplayName(status) {
const statusNames = {
online: '在线',
offline: '离线',
unreachable: '不可达',
maintenance: '维护中',
unknown: '未知'
};
return statusNames[status] || '未知';
}
/**
* 检查系统状态
*/
async checkSystemStatus() {
// 检查网络连接
await this.checkNetworkStatus();
// 检查数据库状态
await this.checkDatabaseStatus();
}
/**
* 检查网络状态
*/
async checkNetworkStatus() {
const statusIcon = document.getElementById('network-status');
const statusText = document.getElementById('network-status-text');
if (!statusIcon || !statusText) return;
try {
const response = await fetch('/api/devices', {
method: 'HEAD',
signal: AbortSignal.timeout(5000) // 5秒超时
});
if (response.ok) {
statusIcon.className = 'status-icon online';
statusIcon.innerHTML = '<i class="fas fa-wifi"></i>';
statusText.textContent = '连接正常';
} else {
statusIcon.className = 'status-icon warning';
statusIcon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
statusText.textContent = '连接异常';
}
} catch (error) {
statusIcon.className = 'status-icon offline';
statusIcon.innerHTML = '<i class="fas fa-times-circle"></i>';
statusText.textContent = '连接失败';
console.error('网络状态检查失败:', error);
}
}
/**
* 检查数据库状态
*/
async checkDatabaseStatus() {
const statusIcon = document.getElementById('database-status');
const statusText = document.getElementById('database-status-text');
if (!statusIcon || !statusText) return;
try {
// 通过尝试加载设备列表来检查数据库状态
const response = await fetch('/api/devices', {
signal: AbortSignal.timeout(3000) // 3秒超时
});
if (response.ok) {
statusIcon.className = 'status-icon online';
statusIcon.innerHTML = '<i class="fas fa-check-circle"></i>';
statusText.textContent = '正常';
} else {
statusIcon.className = 'status-icon warning';
statusIcon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
statusText.textContent = '异常';
}
} catch (error) {
statusIcon.className = 'status-icon offline';
statusIcon.innerHTML = '<i class="fas fa-times-circle"></i>';
statusText.textContent = '错误';
console.error('数据库状态检查失败:', error);
}
}
/**
* 绑定事件
*/
bindEvents() {
// 刷新仪表盘按钮
const refreshBtn = document.getElementById('refresh-dashboard');
if (refreshBtn) {
refreshBtn.addEventListener('click', () => {
this.loadDashboardData();
this.addActivity('手动刷新仪表盘数据', 'info');
});
}
}
/**
* 添加活动记录
*/
addActivity(text, type = 'info') {
const activitiesList = document.getElementById('recent-activities');
if (!activitiesList) return;
const now = new Date();
// 添加到内部数组
this.activities.unshift({ text, type, time: now });
// 限制活动数量
if (this.activities.length > 50) {
this.activities = this.activities.slice(0, 50);
}
const activityItem = document.createElement('div');
activityItem.className = 'activity-item';
activityItem.innerHTML = `
<div class="activity-icon ${type}">
<i class="fas fa-${this.getActivityIcon(type)}"></i>
</div>
<div class="activity-content">
<div class="activity-text">${text}</div>
<div class="activity-time">${this.getRelativeTime(now)}</div>
</div>
`;
// 插入到列表顶部
activitiesList.insertBefore(activityItem, activitiesList.firstChild);
// 限制显示的活动数量（最多保留10条显示）
const displayedActivities = activitiesList.querySelectorAll('.activity-item');
if (displayedActivities.length > 10) {
activitiesList.removeChild(displayedActivities[displayedActivities.length - 1]);
}
// 定期更新活动时间
setTimeout(() => this.updateActivityTimes(), 60000);
console.log(`活动记录: ${text} (${type})`);
}
/**
* 获取活动图标
*/
getActivityIcon(type) {
const icons = {
info: 'info-circle',
success: 'check-circle',
warning: 'exclamation-triangle',
error: 'times-circle'
};
return icons[type] || 'info-circle';
}
/**
* 获取相对时间
*/
getRelativeTime(date) {
const now = new Date();
const diff = now - date;
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
if (seconds < 60) return '刚刚';
if (minutes < 60) return `${minutes}分钟前`;
if (hours < 24) return `${hours}小时前`;
if (days < 7) return `${days}天前`;
return date.toLocaleDateString('zh-CN');
}
/**
* 更新活动时间显示
*/
updateActivityTimes() {
const timeElements = document.querySelectorAll('.activity-time');
timeElements.forEach((element, index) => {
if (this.activities[index]) {
element.textContent = this.getRelativeTime(this.activities[index].time);
}
});
}
/**
* 导航到设备页面
*/
goToDevices(deviceId = null) {
const devicesLink = document.querySelector('.nav-link[data-page="devices"]');
if (devicesLink) {
devicesLink.click();
// 如果指定了设备ID，在设备页面高亮该设备
if (deviceId) {
setTimeout(() => {
const deviceElement = document.getElementById(`device-${deviceId}`);
if (deviceElement) {
deviceElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
deviceElement.style.backgroundColor = 'var(--primary-color)';
deviceElement.style.color = 'white';
setTimeout(() => {
deviceElement.style.backgroundColor = '';
deviceElement.style.color = '';
}, 2000);
}
}, 500);
}
this.addActivity('跳转到设备管理页面', 'info');
}
}
/**
* 刷新系统状态
*/
refreshSystemStatus() {
this.checkSystemStatus();
this.addActivity('刷新系统状态', 'info');
}
/**
* 刷新设备概览
*/
refreshDevicesOverview() {
this.loadDashboardData();
this.addActivity('刷新设备概览', 'info');
}
/**
* 清空活动记录
*/
clearActivities() {
this.activities = [];
const activitiesList = document.getElementById('recent-activities');
if (activitiesList) {
activitiesList.innerHTML = `
<div class="activity-item">
<div class="activity-icon info">
<i class="fas fa-info-circle"></i>
</div>
<div class="activity-content">
<div class="activity-text">活动记录已清空</div>
<div class="activity-time">刚刚</div>
</div>
</div>
`;
}
console.log('活动记录已清空');
}
/**
* 销毁函数
*/
destroy() {
if (this.refreshInterval) {
clearInterval(this.refreshInterval);
this.refreshInterval = null;
}
if (this.timeInterval) {
clearInterval(this.timeInterval);
this.timeInterval = null;
}
console.log('仪表盘管理器已销毁');
}
}
// 全局仪表盘管理器实例
let dashboardManager = null;
// 初始化仪表盘的全局函数
function initializeDashboard() {
if (!dashboardManager) {
dashboardManager = new DashboardManager();
console.log('仪表盘管理器初始化完成');
}
return dashboardManager;
}
// 全局快捷函数
function goToDevices(deviceId = null) {
if (dashboardManager) {
dashboardManager.goToDevices(deviceId);
}
}
function refreshSystemStatus() {
if (dashboardManager) {
dashboardManager.refreshSystemStatus();
}
}
function refreshDevicesOverview() {
if (dashboardManager) {
dashboardManager.refreshDevicesOverview();
}
}
function clearActivities() {
if (dashboardManager) {
dashboardManager.clearActivities();
}
}
// 暴露到全局作用域
window.DashboardManager = DashboardManager;
window.initializeDashboard = initializeDashboard;
window.dashboardManager = dashboardManager;
window.goToDevices = goToDevices;
window.refreshSystemStatus = refreshSystemStatus;
window.refreshDevicesOverview = refreshDevicesOverview;
window.clearActivities = clearActivities;
// 页面卸载时清理
window.addEventListener('beforeunload', () => {
if (dashboardManager) {
dashboardManager.destroy();
}
});
// 页面可见性变化时的处理
document.addEventListener('visibilitychange', () => {
if (dashboardManager) {
if (document.hidden) {
console.log('页面隐藏，暂停定时器');
if (dashboardManager.refreshInterval) {
clearInterval(dashboardManager.refreshInterval);
dashboardManager.refreshInterval = null;
}
} else {
console.log('页面可见，恢复定时器');
if (!dashboardManager.refreshInterval) {
dashboardManager.refreshInterval = setInterval(() => dashboardManager.loadDashboardData(), 30000);
}
// 立即刷新一次数据
dashboardManager.loadDashboardData();
}
}
});
console.log('仪表盘模块已加载');