页面数据更新优化
This commit is contained in:
Alex Yang
@@ -16,7 +16,9 @@ const COLOR_CONFIG = window.COLOR_CONFIG || {};
|
||||
// 初始化仪表盘
|
||||
async function initDashboard() {
|
||||
try {
|
||||
// 加载初始数据
|
||||
console.log('页面打开时强制刷新数据...');
|
||||
|
||||
// 优先加载初始数据，确保页面显示最新信息
|
||||
await loadDashboardData();
|
||||
|
||||
// 初始化图表
|
||||
@@ -342,31 +344,94 @@ function updateStatsCards(stats) {
|
||||
activeIPsPercentage = stats[0].activeIPsPercentage || 0;
|
||||
}
|
||||
|
||||
// 更新数量显示
|
||||
document.getElementById('total-queries').textContent = formatNumber(totalQueries);
|
||||
document.getElementById('blocked-queries').textContent = formatNumber(blockedQueries);
|
||||
document.getElementById('allowed-queries').textContent = formatNumber(allowedQueries);
|
||||
document.getElementById('error-queries').textContent = formatNumber(errorQueries);
|
||||
document.getElementById('active-ips').textContent = formatNumber(activeIPs);
|
||||
// 为数字元素添加平滑过渡效果和光晕效果的函数
|
||||
function animateValue(elementId, newValue) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (!element) return;
|
||||
|
||||
const oldValue = parseInt(element.textContent.replace(/,/g, '')) || 0;
|
||||
const formattedNewValue = formatNumber(newValue);
|
||||
|
||||
// 如果值没有变化，不执行动画
|
||||
if (oldValue === newValue && element.textContent === formattedNewValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加淡入淡出动画和光晕效果
|
||||
// 先移除可能存在的光晕效果类
|
||||
element.classList.remove('number-glow');
|
||||
|
||||
// 添加淡入淡出动画
|
||||
element.style.opacity = '0';
|
||||
element.style.transition = 'opacity 200ms ease-out';
|
||||
|
||||
setTimeout(() => {
|
||||
element.textContent = formattedNewValue;
|
||||
element.style.opacity = '1';
|
||||
|
||||
// 添加光晕效果
|
||||
// 根据父级卡片类型确定光晕颜色
|
||||
const card = element.closest('.stat-card, .bg-blue-50, .bg-red-50, .bg-green-50, .bg-yellow-50');
|
||||
if (card) {
|
||||
// 设置光晕颜色类
|
||||
if (card.classList.contains('bg-blue-50') || card.id.includes('total')) {
|
||||
element.classList.add('number-glow-blue');
|
||||
} else if (card.classList.contains('bg-red-50') || card.id.includes('blocked')) {
|
||||
element.classList.add('number-glow-red');
|
||||
} else if (card.classList.contains('bg-green-50') || card.id.includes('allowed')) {
|
||||
element.classList.add('number-glow-green');
|
||||
} else if (card.classList.contains('bg-yellow-50') || card.id.includes('error')) {
|
||||
element.classList.add('number-glow-yellow');
|
||||
}
|
||||
} else {
|
||||
// 默认光晕效果
|
||||
element.classList.add('number-glow');
|
||||
}
|
||||
|
||||
// 2秒后移除光晕效果
|
||||
setTimeout(() => {
|
||||
element.classList.remove('number-glow', 'number-glow-blue', 'number-glow-red', 'number-glow-green', 'number-glow-yellow');
|
||||
}, 2000);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// 更新最常查询类型
|
||||
document.getElementById('top-query-type').textContent = topQueryType;
|
||||
document.getElementById('query-type-percentage').textContent = `${Math.round(queryTypePercentage)}%`;
|
||||
// 更新百分比元素的函数
|
||||
function updatePercentage(elementId, value) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (!element) return;
|
||||
|
||||
element.style.opacity = '0';
|
||||
element.style.transition = 'opacity 200ms ease-out';
|
||||
|
||||
setTimeout(() => {
|
||||
element.textContent = value;
|
||||
element.style.opacity = '1';
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// 更新活跃来源IP百分比
|
||||
document.getElementById('active-ips-percent').textContent = `${Math.round(activeIPsPercentage)}%`;
|
||||
// 平滑更新数量显示
|
||||
animateValue('total-queries', totalQueries);
|
||||
animateValue('blocked-queries', blockedQueries);
|
||||
animateValue('allowed-queries', allowedQueries);
|
||||
animateValue('error-queries', errorQueries);
|
||||
animateValue('active-ips', activeIPs);
|
||||
|
||||
// 计算并更新百分比
|
||||
// 平滑更新文本和百分比
|
||||
updatePercentage('top-query-type', topQueryType);
|
||||
updatePercentage('query-type-percentage', `${Math.round(queryTypePercentage)}%`);
|
||||
updatePercentage('active-ips-percent', `${Math.round(activeIPsPercentage)}%`);
|
||||
|
||||
// 计算并平滑更新百分比
|
||||
if (totalQueries > 0) {
|
||||
document.getElementById('blocked-percent').textContent = `${Math.round((blockedQueries / totalQueries) * 100)}%`;
|
||||
document.getElementById('allowed-percent').textContent = `${Math.round((allowedQueries / totalQueries) * 100)}%`;
|
||||
document.getElementById('error-percent').textContent = `${Math.round((errorQueries / totalQueries) * 100)}%`;
|
||||
document.getElementById('queries-percent').textContent = `100%`;
|
||||
updatePercentage('blocked-percent', `${Math.round((blockedQueries / totalQueries) * 100)}%`);
|
||||
updatePercentage('allowed-percent', `${Math.round((allowedQueries / totalQueries) * 100)}%`);
|
||||
updatePercentage('error-percent', `${Math.round((errorQueries / totalQueries) * 100)}%`);
|
||||
updatePercentage('queries-percent', '100%');
|
||||
} else {
|
||||
document.getElementById('queries-percent').textContent = '---';
|
||||
document.getElementById('blocked-percent').textContent = '---';
|
||||
document.getElementById('allowed-percent').textContent = '---';
|
||||
document.getElementById('error-percent').textContent = '---';
|
||||
updatePercentage('queries-percent', '---');
|
||||
updatePercentage('blocked-percent', '---');
|
||||
updatePercentage('allowed-percent', '---');
|
||||
updatePercentage('error-percent', '---');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user