AMAZEHOME/dns-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面数据更新优化

Browse Source
This commit is contained in:
Alex Yang
2025-11-26 00:58:43 +08:00
parent b73f1be3dd
commit 63154085f7
1 changed files with 93 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
static/js/dashboard.js
View File

@@ -357,9 +357,9 @@ function updateStatsCards(stats) {
return;
}
// 添加淡入淡出动画和光晕效果
// 添加淡入淡出动画和深色光晕效果
// 先移除可能存在的光晕效果类
element.classList.remove('number-glow');
element.classList.remove('number-glow', 'number-glow-blue', 'number-glow-red', 'number-glow-green', 'number-glow-yellow');
// 添加淡入淡出动画
element.style.opacity = '0';
@@ -369,28 +369,48 @@ function updateStatsCards(stats) {
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');
let glowColorClass = '';
// 使用更精准的卡片颜色检测
if (card) {
// 设置光晕颜色类
if (card.classList.contains('bg-blue-50') || card.id.includes('total')) {
element.classList.add('number-glow-blue');
// 根据卡片类名确定深色光晕颜色
if (card.classList.contains('bg-blue-50') || card.id.includes('total') || card.id.includes('response')) {
// 蓝色卡片 - 深蓝色光晕
glowColorClass = 'number-glow-dark-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');
// 红色卡片 - 深红色光晕
glowColorClass = 'number-glow-dark-red';
} else if (card.classList.contains('bg-green-50') || card.id.includes('allowed') || card.id.includes('active')) {
// 绿色卡片 - 深绿色光晕
glowColorClass = 'number-glow-dark-green';
} else if (card.classList.contains('bg-yellow-50') || card.id.includes('error') || card.id.includes('cpu')) {
// 黄色卡片 - 深黄色光晕
glowColorClass = 'number-glow-dark-yellow';
} else {
// 其他卡片 - 根据背景色自动确定深色光晕
const bgColor = getComputedStyle(card).backgroundColor;
// 提取RGB值并转换为深色
const rgbMatch = bgColor.match(/\d+/g);
if (rgbMatch && rgbMatch.length >= 3) {
// 直接添加自定义深色光晕样式
element.style.boxShadow = `0 0 15px 3px rgba(${Math.floor(rgbMatch[0] * 0.7)}, ${Math.floor(rgbMatch[1] * 0.7)}, ${Math.floor(rgbMatch[2] * 0.7)}, 0.6)`;
element.style.transition = 'box-shadow 300ms ease-in-out, opacity 200ms ease-out';
}
}
} else {
// 默认光晕效果
element.classList.add('number-glow');
}
// 如果确定了光晕颜色类，则添加它
if (glowColorClass) {
element.classList.add(glowColorClass);
}
// 2秒后移除光晕效果
setTimeout(() => {
element.classList.remove('number-glow', 'number-glow-blue', 'number-glow-red', 'number-glow-green', 'number-glow-yellow');
element.classList.remove('number-glow-dark-blue', 'number-glow-dark-red', 'number-glow-dark-green', 'number-glow-dark-yellow');
element.style.boxShadow = 'none';
}, 2000);
}, 200);
}
@@ -693,6 +713,11 @@ function initCharts() {
options: {
responsive: true,
maintainAspectRatio: false,
// 添加全局动画配置，确保图表创建和更新时都平滑过渡
animation: {
duration: 500, // 延长动画时间，使过渡更平滑
easing: 'easeInOutQuart'
},
plugins: {
legend: {
position: 'bottom',
@@ -722,6 +747,11 @@ function initCharts() {
options: {
responsive: true,
maintainAspectRatio: false,
// 添加全局动画配置，确保图表创建和更新时都平滑过渡
animation: {
duration: 300,
easing: 'easeInOutQuart'
},
plugins: {
legend: {
position: 'bottom',
@@ -800,7 +830,11 @@ function drawDNSRequestsChart() {
dnsRequestsChart.data.labels = results[0].labels; // 使用第一个数据集的标签
dnsRequestsChart.data.datasets = datasets;
dnsRequestsChart.options.plugins.legend.display = showLegend;
dnsRequestsChart.update();
// 使用平滑过渡动画更新图表
dnsRequestsChart.update({
duration: 800,
easing: 'easeInOutQuart'
});
} else {
dnsRequestsChart = new Chart(chartContext, {
type: 'line',
@@ -811,6 +845,11 @@ function drawDNSRequestsChart() {
options: {
responsive: true,
maintainAspectRatio: false,
// 添加动画配置，确保平滑过渡
animation: {
duration: 800,
easing: 'easeInOutQuart'
},
plugins: {
legend: {
display: showLegend,
@@ -868,7 +907,11 @@ function drawDNSRequestsChart() {
fill: true
}];
dnsRequestsChart.options.plugins.legend.display = false;
dnsRequestsChart.update();
// 使用平滑过渡动画更新图表
dnsRequestsChart.update({
duration: 800,
easing: 'easeInOutQuart'
});
} else {
dnsRequestsChart = new Chart(chartContext, {
type: 'line',
@@ -886,6 +929,11 @@ function drawDNSRequestsChart() {
options: {
responsive: true,
maintainAspectRatio: false,
// 添加动画配置，确保平滑过渡
animation: {
duration: 800,
easing: 'easeInOutQuart'
},
plugins: {
legend: {
display: false
@@ -955,7 +1003,11 @@ function updateCharts(stats, queryTypeStats) {
}
ratioChart.data.datasets[0].data = [allowed, blocked, error];
ratioChart.update();
// 使用自定义动画配置更新图表，确保平滑过渡
ratioChart.update({
duration: 500,
easing: 'easeInOutQuart'
});
}
// 更新解析类型统计饼图
@@ -984,7 +1036,11 @@ function updateCharts(stats, queryTypeStats) {
queryTypeChart.data.datasets[0].backgroundColor = [queryTypeColors[0]];
}
queryTypeChart.update();
// 使用自定义动画配置更新图表，确保平滑过渡
queryTypeChart.update({
duration: 500,
easing: 'easeInOutQuart'
});
}
}
@@ -1120,7 +1176,16 @@ function updateChartData(chartId, newValue) {
// 更新图表数据
chart.data.datasets[0].data = historyData;
chart.data.labels = generateTimeLabels(historyData.length);
chart.update();
// 使用自定义动画配置更新图表，确保平滑过渡，避免空白区域
chart.update({
duration: 300, // 增加动画持续时间
easing: 'easeInOutQuart', // 使用平滑的缓动函数
transition: {
duration: 300,
easing: 'easeInOutQuart'
}
});
}
// 从统计数据中获取规则数
@@ -1224,9 +1289,14 @@ function initStatCardCharts() {
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
responsive: true,
maintainAspectRatio: false,
// 添加动画配置，确保平滑过渡
animation: {
duration: 800,
easing: 'easeInOutQuart'
},
plugins: {
legend: {
display: false
},