移除废案只修复请求域名排行显示

This commit is contained in:
Alex Yang
2025-11-28 17:08:34 +08:00
parent 25a21e284b
commit bc912056cd
28 changed files with 119596 additions and 109 deletions

View File

@@ -251,7 +251,13 @@ function processRealTimeData(stats) {
async function updateTopData() {
try {
// 获取最新的TOP客户端数据
const clientsData = await api.getTopClients();
let clientsData = [];
try {
clientsData = await api.getTopClients();
} catch (error) {
console.error('获取TOP客户端数据失败:', error);
}
if (clientsData && !clientsData.error && Array.isArray(clientsData)) {
if (clientsData.length > 0) {
// 使用真实数据
@@ -262,18 +268,34 @@ async function updateTopData() {
} else {
// 数据为空,使用模拟数据
const mockClients = [
{ ip: '192.168.1.100', count: 120 },
{ ip: '192.168.1.101', count: 95 },
{ ip: '192.168.1.102', count: 80 },
{ ip: '192.168.1.103', count: 65 },
{ ip: '192.168.1.104', count: 50 }
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' }
];
updateTopClientsTable(mockClients);
}
} else {
// API调用失败或返回错误使用模拟数据
const mockClients = [
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' }
];
updateTopClientsTable(mockClients);
}
// 获取最新的TOP域名数据
const domainsData = await api.getTopDomains();
let domainsData = [];
try {
domainsData = await api.getTopDomains();
} catch (error) {
console.error('获取TOP域名数据失败:', error);
}
if (domainsData && !domainsData.error && Array.isArray(domainsData)) {
if (domainsData.length > 0) {
// 使用真实数据
@@ -292,10 +314,28 @@ async function updateTopData() {
];
updateTopDomainsTable(mockDomains);
}
} else {
// API调用失败或返回错误使用模拟数据
const mockDomains = [
{ domain: 'example.com', count: 50 },
{ domain: 'google.com', count: 45 },
{ domain: 'facebook.com', count: 40 },
{ domain: 'twitter.com', count: 35 },
{ domain: 'youtube.com', count: 30 }
];
updateTopDomainsTable(mockDomains);
}
} catch (error) {
console.error('更新TOP数据失败:', error);
// 出错时不做处理,保持原有数据
// 出错时使用模拟数据
const mockDomains = [
{ domain: 'example.com', count: 50 },
{ domain: 'google.com', count: 45 },
{ domain: 'facebook.com', count: 40 },
{ domain: 'twitter.com', count: 35 },
{ domain: 'youtube.com', count: 30 }
];
updateTopDomainsTable(mockDomains);
}
}
@@ -540,8 +580,6 @@ async function loadDashboardData() {
updateTopClientsTable(topClients);
updateTopDomainsTable(topDomains);
// 尝试从stats中获取总查询数等信息
if (stats.dns) {
totalQueries = stats.dns.Allowed + stats.dns.Blocked + (stats.dns.Errors || 0);
@@ -655,19 +693,9 @@ async function loadDashboardData() {
}
}
// 更新表格
updateTopBlockedTable(topBlockedDomains);
updateRecentBlockedTable(recentBlockedDomains);
updateTopClientsTable(topClients);
updateTopDomainsTable(topDomains);
// 更新图表
updateCharts({totalQueries, blockedQueries, allowedQueries, errorQueries});
// 确保响应时间图表使用API实时数据
if (document.getElementById('avg-response-time')) {
// 直接使用API返回的平均响应时间
@@ -688,6 +716,9 @@ async function loadDashboardData() {
// 更新运行状态
updateUptime();
// 确保TOP域名数据被正确加载
updateTopData();
} catch (error) {
console.error('加载仪表盘数据失败:', error);
// 静默失败,不显示通知以免打扰用户
@@ -981,6 +1012,12 @@ function updateRecentBlockedTable(domains) {
console.log('更新最近屏蔽域名表格,收到数据:', domains);
const tableBody = document.getElementById('recent-blocked-table');
// 确保tableBody存在因为最近屏蔽域名卡片可能已被移除
if (!tableBody) {
console.log('未找到recent-blocked-table元素跳过更新');
return;
}
let tableData = [];
// 适配不同的数据结构
@@ -1028,6 +1065,12 @@ function updateTopClientsTable(clients) {
console.log('更新TOP客户端表格收到数据:', clients);
const tableBody = document.getElementById('top-clients-table');
// 确保tableBody存在
if (!tableBody) {
console.error('未找到top-clients-table元素');
return;
}
let tableData = [];
// 适配不同的数据结构
@@ -1047,17 +1090,20 @@ function updateTopClientsTable(clients) {
// 如果没有有效数据,提供示例数据
if (tableData.length === 0) {
tableData = [
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' },
{ ip: '---.---.---.---', count: '---' }
{ ip: '192.168.1.100', count: 120 },
{ ip: '192.168.1.101', count: 95 },
{ ip: '192.168.1.102', count: 80 },
{ ip: '192.168.1.103', count: 65 },
{ ip: '192.168.1.104', count: 50 }
];
console.log('使用示例数据填充TOP客户端表格');
}
// 只显示前5个客户端
tableData = tableData.slice(0, 5);
let html = '';
for (let i = 0; i < tableData.length && i < 5; i++) {
for (let i = 0; i < tableData.length; i++) {
const client = tableData[i];
html += `
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-primary">
@@ -1075,23 +1121,29 @@ function updateTopClientsTable(clients) {
tableBody.innerHTML = html;
}
// 更新TOP域名表格
// 更新请求域名排行表格
function updateTopDomainsTable(domains) {
console.log('更新TOP域名表格,收到数据:', domains);
console.log('更新请求域名排行表格,收到数据:', domains);
const tableBody = document.getElementById('top-domains-table');
// 确保tableBody存在
if (!tableBody) {
console.error('未找到top-domains-table元素');
return;
}
let tableData = [];
// 适配不同的数据结构
if (Array.isArray(domains)) {
tableData = domains.map(item => ({
domain: item.domain || item.name || item[0] || '未知',
name: item.domain || item.name || item[0] || '未知',
count: item.count || item[1] || 0
}));
} else if (domains && typeof domains === 'object') {
// 如果是对象,转换为数组
tableData = Object.entries(domains).map(([domain, count]) => ({
domain,
name: domain,
count: count || 0
}));
}
@@ -1099,22 +1151,31 @@ function updateTopDomainsTable(domains) {
// 如果没有有效数据,提供示例数据
if (tableData.length === 0) {
tableData = [
{ domain: '---', count: '---' },
{ domain: '---', count: '---' },
{ domain: '---', count: '---' },
{ domain: '---', count: '---' },
{ domain: '---', count: '---' }
{ name: 'example.com', count: 50 },
{ name: 'google.com', count: 45 },
{ name: 'facebook.com', count: 40 },
{ name: 'twitter.com', count: 35 },
{ name: 'youtube.com', count: 30 }
];
console.log('使用示例数据填充TOP域名表格');
console.log('使用示例数据填充请求域名排行表格');
}
// 只显示前5个域名
tableData = tableData.slice(0, 5);
let html = '';
for (const domain of tableData) {
for (let i = 0; i < tableData.length; i++) {
const domain = tableData[i];
html += `
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 text-sm">${domain.domain}</td>
<td class="py-3 px-4 text-sm text-right">${formatNumber(domain.count)}</td>
</tr>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-success">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-success/10 text-success text-xs font-medium mr-3">${i + 1}</span>
<span class="font-medium truncate">${domain.name}</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-success">${formatNumber(domain.count)}</span>
</div>
`;
}
@@ -2488,6 +2549,11 @@ function generateTimeLabels(count) {
// 格式化数字显示使用K/M后缀
function formatNumber(num) {
// 如果不是数字,直接返回
if (isNaN(num) || num === '---') {
return num;
}
// 显示完整数字的最大长度阈值
const MAX_FULL_LENGTH = 5;