DNS/dns-server
1
0
Fork 0
Code Pull Requests Activity

web异常待修复:屏蔽统计

Browse Source
This commit is contained in:
Alex Yang
2025-11-24 13:09:16 +08:00
parent 86faca036d
commit ce4a8d8127
5 changed files with 389 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
static/css/style.css
View File

@@ -377,6 +377,45 @@ tr:hover {
background-color: #f8f9fa;
}
/* 百分比条样式 */
.count-cell {
position: relative;
}
.count-number {
position: relative;
z-index: 2;
display: inline-block;
}
.percentage-text {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
font-size: 12px;
color: #bdc3c7;
}
.percentage-bar-container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 1;
overflow: hidden;
border-radius: 4px;
opacity: 0.2;
}
.percentage-bar {
height: 100%;
transition: width 0.5s ease;
border-radius: 4px;
}
/* 分页控件样式 */
.pagination-controls {
background-color: #ffffff;

59
static/js/modules/dashboard.js
View File

@@ -663,11 +663,30 @@ function loadTopBlockedDomains() {
}));
}
smoothRenderTable('#top-blocked-table', processedData, renderDomainRow);
// 计算最大值用于百分比计算
if (processedData.length > 0) {
const maxCount = Math.max(...processedData.map(item => {
return item.count !== undefined ? item.count :
(item.Count !== undefined ? item.Count :
(item.hits !== undefined ? item.hits :
(item.Hits !== undefined ? item.Hits : 0)));
}));
// 为每个项目添加百分比
processedData.forEach(item => {
const count = item.count !== undefined ? item.count :
(item.Count !== undefined ? item.Count :
(item.hits !== undefined ? item.hits :
(item.Hits !== undefined ? item.Hits : 0)));
item.percentage = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
});
}
smoothRenderTable('top-blocked-table', processedData, renderDomainRow);
})
.catch(error => {
console.error('获取最常屏蔽域名失败:', error);
// 显示默认空数据而不是错误消息，保持界面一致性
const tbody = document.getElementById('top-blocked-table').querySelector('tbody');
if (tbody) {
showEmpty(tbody, '获取数据失败');
}
@@ -700,7 +719,25 @@ function loadTopResolvedDomains() {
}));
}
smoothRenderTable('#top-resolved-table', processedData, renderDomainRow);
// 计算最大值用于百分比计算
if (processedData.length > 0) {
const maxCount = Math.max(...processedData.map(item => {
return item.count !== undefined ? item.count :
(item.Count !== undefined ? item.Count :
(item.hits !== undefined ? item.hits :
(item.Hits !== undefined ? item.Hits : 0)));
}));
// 为每个项目添加百分比
processedData.forEach(item => {
const count = item.count !== undefined ? item.count :
(item.Count !== undefined ? item.Count :
(item.hits !== undefined ? item.hits :
(item.Hits !== undefined ? item.Hits : 0)));
item.percentage = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
});
}
smoothRenderTable('top-resolved-table', processedData, renderDomainRow);
})
.catch(error => {
console.error('获取最常解析域名失败:', error);
@@ -727,15 +764,31 @@ function renderDomainRow(item, index) {
(item.Count !== undefined ? item.Count :
(item.hits !== undefined ? item.hits :
(item.Hits !== undefined ? item.Hits : 0)));
const percentage = item.percentage || 0;
const row = document.createElement('tr');
row.className = 'fade-in'; // 添加淡入动画类
row.dataset.domain = domainName;
row.dataset.count = count;
row.dataset.percentage = percentage;
// 为不同类型的排行使用不同的进度条颜色
let barColor = '#3498db'; // 默认蓝色
if (item.domain && item.domain.includes('microsoft.com')) {
barColor = '#2ecc71'; // 绿色
} else if (item.domain && item.domain.includes('tencent.com')) {
barColor = '#e74c3c'; // 红色
}
row.innerHTML = `
<td>${domainName}</td>
<td class="count-cell">${formatNumber(count)}</td>
<td class="count-cell" style="position: relative; padding-right: 80px;">
<div class="count-number">${formatNumber(count)}</div>
<div class="percentage-text">${percentage}%</div>
<div class="percentage-bar-container">
<div class="percentage-bar" style="width: ${percentage}%; background-color: ${barColor};"></div>
</div>
</td>
`;
// 设置动画延迟，创建级联效果