305 lines
8.8 KiB
JavaScript
305 lines
8.8 KiB
JavaScript
// 服务器状态组件 - 显示CPU使用率和查询统计
|
||
|
||
// 全局变量
|
||
let serverStatusUpdateTimer = null;
|
||
let previousServerData = {
|
||
cpu: 0,
|
||
queries: 0
|
||
};
|
||
|
||
// 初始化服务器状态组件
|
||
function initServerStatusWidget() {
|
||
// 确保DOM元素存在
|
||
const widget = document.getElementById('server-status-widget');
|
||
if (!widget) return;
|
||
|
||
// 初始化页面类型检测
|
||
updateWidgetDisplayByPageType();
|
||
|
||
// 设置页面切换事件监听
|
||
handlePageSwitchEvents();
|
||
|
||
// 设置WebSocket监听（如果可用）
|
||
setupWebSocketListeners();
|
||
|
||
// 立即加载一次数据
|
||
loadServerStatusData();
|
||
|
||
// 设置定时更新（每5秒更新一次）
|
||
serverStatusUpdateTimer = setInterval(loadServerStatusData, 5000);
|
||
}
|
||
|
||
// 判断当前页面是否为仪表盘
|
||
function isCurrentPageDashboard() {
|
||
// 方法1：检查侧边栏激活状态
|
||
const dashboardLink = document.querySelector('.sidebar a[href="#dashboard"]');
|
||
if (dashboardLink && dashboardLink.classList.contains('active')) {
|
||
return true;
|
||
}
|
||
|
||
// 方法2：检查仪表盘特有元素
|
||
const dashboardElements = [
|
||
'#dashboard-container',
|
||
'.dashboard-summary',
|
||
'#dashboard-stats'
|
||
];
|
||
|
||
for (const selector of dashboardElements) {
|
||
if (document.querySelector(selector)) {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
// 方法3：检查URL哈希值
|
||
if (window.location.hash === '#dashboard' || window.location.hash === '') {
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
// 根据页面类型更新组件显示
|
||
function updateWidgetDisplayByPageType() {
|
||
const additionalStats = document.getElementById('server-additional-stats');
|
||
if (!additionalStats) return;
|
||
|
||
// 如果当前页面是仪表盘，隐藏额外统计指标
|
||
if (isCurrentPageDashboard()) {
|
||
additionalStats.classList.add('hidden');
|
||
} else {
|
||
// 非仪表盘页面，显示额外统计指标
|
||
additionalStats.classList.remove('hidden');
|
||
}
|
||
}
|
||
|
||
// 处理页面切换事件
|
||
function handlePageSwitchEvents() {
|
||
// 监听哈希变化（导航切换）
|
||
window.addEventListener('hashchange', updateWidgetDisplayByPageType);
|
||
|
||
// 监听侧边栏点击事件
|
||
const sidebarLinks = document.querySelectorAll('.sidebar a');
|
||
sidebarLinks.forEach(link => {
|
||
link.addEventListener('click', function() {
|
||
// 延迟检查，确保页面已切换
|
||
setTimeout(updateWidgetDisplayByPageType, 100);
|
||
});
|
||
});
|
||
|
||
// 监听导航菜单点击事件
|
||
const navLinks = document.querySelectorAll('nav a');
|
||
navLinks.forEach(link => {
|
||
link.addEventListener('click', function() {
|
||
setTimeout(updateWidgetDisplayByPageType, 100);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 监控WebSocket连接状态
|
||
function monitorWebSocketConnection() {
|
||
// 如果存在WebSocket连接，监听消息
|
||
if (window.socket) {
|
||
window.socket.addEventListener('message', function(event) {
|
||
try {
|
||
const data = JSON.parse(event.data);
|
||
if (data.type === 'status_update') {
|
||
updateServerStatusWidget(data.payload);
|
||
}
|
||
} catch (error) {
|
||
console.error('解析WebSocket消息失败:', error);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 设置WebSocket监听器
|
||
function setupWebSocketListeners() {
|
||
// 如果WebSocket已经存在
|
||
if (window.socket) {
|
||
monitorWebSocketConnection();
|
||
} else {
|
||
// 监听socket初始化事件
|
||
window.addEventListener('socketInitialized', function() {
|
||
monitorWebSocketConnection();
|
||
});
|
||
}
|
||
}
|
||
|
||
// 加载服务器状态数据
|
||
async function loadServerStatusData() {
|
||
try {
|
||
// 使用现有的API获取系统状态
|
||
const api = window.api || {};
|
||
const getStatusFn = api.getStatus || function() { return Promise.resolve({}); };
|
||
const statusData = await getStatusFn();
|
||
if (statusData && !statusData.error) {
|
||
updateServerStatusWidget(statusData);
|
||
}
|
||
} catch (error) {
|
||
console.error('加载服务器状态数据失败:', error);
|
||
}
|
||
}
|
||
|
||
// 更新服务器状态组件
|
||
function updateServerStatusWidget(stats) {
|
||
// 确保组件存在
|
||
const widget = document.getElementById('server-status-widget');
|
||
if (!widget) return;
|
||
|
||
// 确保stats存在
|
||
stats = stats || {};
|
||
|
||
// 提取CPU使用率
|
||
let cpuUsage = 0;
|
||
if (stats.system && typeof stats.system.cpu === 'number') {
|
||
cpuUsage = stats.system.cpu;
|
||
} else if (typeof stats.cpuUsage === 'number') {
|
||
cpuUsage = stats.cpuUsage;
|
||
}
|
||
|
||
// 提取查询统计数据
|
||
let totalQueries = 0;
|
||
let blockedQueries = 0;
|
||
let allowedQueries = 0;
|
||
|
||
if (stats.dns) {
|
||
const allowed = typeof stats.dns.Allowed === 'number' ? stats.dns.Allowed : 0;
|
||
const blocked = typeof stats.dns.Blocked === 'number' ? stats.dns.Blocked : 0;
|
||
const errors = typeof stats.dns.Errors === 'number' ? stats.dns.Errors : 0;
|
||
totalQueries = allowed + blocked + errors;
|
||
blockedQueries = blocked;
|
||
allowedQueries = allowed;
|
||
} else {
|
||
totalQueries = typeof stats.totalQueries === 'number' ? stats.totalQueries : 0;
|
||
blockedQueries = typeof stats.blockedQueries === 'number' ? stats.blockedQueries : 0;
|
||
allowedQueries = typeof stats.allowedQueries === 'number' ? stats.allowedQueries : 0;
|
||
}
|
||
|
||
// 更新CPU使用率
|
||
const cpuValueElement = document.getElementById('server-cpu-value');
|
||
if (cpuValueElement) {
|
||
cpuValueElement.textContent = cpuUsage.toFixed(1) + '%';
|
||
}
|
||
|
||
const cpuBarElement = document.getElementById('server-cpu-bar');
|
||
if (cpuBarElement) {
|
||
cpuBarElement.style.width = Math.min(cpuUsage, 100) + '%';
|
||
|
||
// 根据CPU使用率改变颜色
|
||
if (cpuUsage > 80) {
|
||
cpuBarElement.className = 'h-full bg-danger rounded-full';
|
||
} else if (cpuUsage > 50) {
|
||
cpuBarElement.className = 'h-full bg-warning rounded-full';
|
||
} else {
|
||
cpuBarElement.className = 'h-full bg-success rounded-full';
|
||
}
|
||
}
|
||
|
||
// 更新查询量
|
||
const queriesValueElement = document.getElementById('server-queries-value');
|
||
if (queriesValueElement) {
|
||
queriesValueElement.textContent = formatNumber(totalQueries);
|
||
}
|
||
|
||
// 计算查询量百分比（假设最大查询量为10000）
|
||
const queryPercentage = Math.min((totalQueries / 10000) * 100, 100);
|
||
const queriesBarElement = document.getElementById('server-queries-bar');
|
||
if (queriesBarElement) {
|
||
queriesBarElement.style.width = queryPercentage + '%';
|
||
}
|
||
|
||
// 更新额外统计指标
|
||
const totalQueriesElement = document.getElementById('server-total-queries');
|
||
if (totalQueriesElement) {
|
||
totalQueriesElement.textContent = formatNumber(totalQueries);
|
||
}
|
||
|
||
const blockedQueriesElement = document.getElementById('server-blocked-queries');
|
||
if (blockedQueriesElement) {
|
||
blockedQueriesElement.textContent = formatNumber(blockedQueries);
|
||
}
|
||
|
||
const allowedQueriesElement = document.getElementById('server-allowed-queries');
|
||
if (allowedQueriesElement) {
|
||
allowedQueriesElement.textContent = formatNumber(allowedQueries);
|
||
}
|
||
|
||
// 添加光晕提示效果
|
||
if (previousServerData.cpu !== cpuUsage || previousServerData.queries !== totalQueries) {
|
||
addGlowEffect();
|
||
}
|
||
|
||
// 更新服务器状态指示器
|
||
const statusIndicator = document.getElementById('server-status-indicator');
|
||
if (statusIndicator) {
|
||
// 检查系统状态
|
||
if (stats.system && stats.system.status === 'error') {
|
||
statusIndicator.className = 'inline-block w-2 h-2 bg-danger rounded-full';
|
||
} else {
|
||
statusIndicator.className = 'inline-block w-2 h-2 bg-success rounded-full';
|
||
}
|
||
}
|
||
|
||
// 保存当前数据用于下次比较
|
||
previousServerData = {
|
||
cpu: cpuUsage,
|
||
queries: totalQueries
|
||
};
|
||
}
|
||
|
||
// 添加光晕提示效果
|
||
function addGlowEffect() {
|
||
const widget = document.getElementById('server-status-widget');
|
||
if (!widget) return;
|
||
|
||
// 添加光晕类
|
||
widget.classList.add('glow-effect');
|
||
|
||
// 2秒后移除光晕
|
||
setTimeout(function() {
|
||
widget.classList.remove('glow-effect');
|
||
}, 2000);
|
||
}
|
||
|
||
// 格式化数字
|
||
function formatNumber(num) {
|
||
// 显示完整数字的最大长度阈值
|
||
const MAX_FULL_LENGTH = 5;
|
||
|
||
// 先获取完整数字字符串
|
||
const fullNumStr = num.toString();
|
||
|
||
// 如果数字长度小于等于阈值，直接返回完整数字
|
||
if (fullNumStr.length <= MAX_FULL_LENGTH) {
|
||
return fullNumStr;
|
||
}
|
||
|
||
// 否则使用缩写格式
|
||
if (num >= 1000000) {
|
||
return (num / 1000000).toFixed(1) + 'M';
|
||
} else if (num >= 1000) {
|
||
return (num / 1000).toFixed(1) + 'K';
|
||
}
|
||
|
||
return fullNumStr;
|
||
}
|
||
|
||
// 在DOM加载完成后初始化
|
||
window.addEventListener('DOMContentLoaded', function() {
|
||
// 延迟初始化，确保页面完全加载
|
||
setTimeout(initServerStatusWidget, 500);
|
||
});
|
||
|
||
// 在页面卸载时清理资源
|
||
window.addEventListener('beforeunload', function() {
|
||
if (serverStatusUpdateTimer) {
|
||
clearInterval(serverStatusUpdateTimer);
|
||
serverStatusUpdateTimer = null;
|
||
}
|
||
});
|
||
|
||
// 导出函数供其他模块使用
|
||
window.serverStatusWidget = {
|
||
init: initServerStatusWidget,
|
||
update: updateServerStatusWidget
|
||
}; |