270 lines
8.8 KiB
JavaScript
270 lines
8.8 KiB
JavaScript
// dashboard.js - 仪表盘页面功能
|
|
|
|
// 加载仪表盘数据
|
|
async function loadDashboardData() {
|
|
try {
|
|
// 并行加载所有需要的数据
|
|
const [statsData, topBlockedData, recentBlockedData, hourlyStatsData] = await Promise.all([
|
|
api.getStats(),
|
|
api.getTopBlockedDomains(),
|
|
api.getRecentBlockedDomains(),
|
|
api.getHourlyStats()
|
|
]);
|
|
|
|
// 更新统计卡片
|
|
updateStatsCards(statsData);
|
|
|
|
// 更新表格数据
|
|
updateTopBlockedTable(topBlockedData);
|
|
updateRecentBlockedTable(recentBlockedData);
|
|
|
|
// 更新图表
|
|
updateQueryTrendChart(hourlyStatsData);
|
|
updateRatioChart(statsData);
|
|
|
|
} catch (error) {
|
|
console.error('加载仪表盘数据失败:', error);
|
|
showErrorMessage('数据加载失败，请刷新页面重试');
|
|
}
|
|
}
|
|
|
|
// 更新统计卡片
|
|
function updateStatsCards(data) {
|
|
const dnsStats = data.dns;
|
|
|
|
// 更新总查询数
|
|
document.getElementById('total-queries').textContent = formatNumber(dnsStats.Queries);
|
|
|
|
// 更新屏蔽数量
|
|
document.getElementById('blocked-queries').textContent = formatNumber(dnsStats.Blocked);
|
|
|
|
// 更新正常解析数量
|
|
document.getElementById('allowed-queries').textContent = formatNumber(dnsStats.Allowed);
|
|
|
|
// 更新错误数量
|
|
document.getElementById('error-queries').textContent = formatNumber(dnsStats.Errors);
|
|
|
|
// 计算百分比（简化计算，实际可能需要与历史数据比较）
|
|
if (dnsStats.Queries > 0) {
|
|
const blockedPercent = Math.round((dnsStats.Blocked / dnsStats.Queries) * 100);
|
|
const allowedPercent = Math.round((dnsStats.Allowed / dnsStats.Queries) * 100);
|
|
const errorPercent = Math.round((dnsStats.Errors / dnsStats.Queries) * 100);
|
|
|
|
document.getElementById('blocked-percent').textContent = `${blockedPercent}%`;
|
|
document.getElementById('allowed-percent').textContent = `${allowedPercent}%`;
|
|
document.getElementById('error-percent').textContent = `${errorPercent}%`;
|
|
document.getElementById('queries-percent').textContent = '100%';
|
|
}
|
|
}
|
|
|
|
// 更新最常屏蔽域名表格
|
|
function updateTopBlockedTable(data) {
|
|
const tableBody = document.getElementById('top-blocked-table');
|
|
tableBody.innerHTML = '';
|
|
|
|
if (data.length === 0) {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `<td colspan="2" class="py-4 text-center text-gray-500">暂无数据</td>`;
|
|
tableBody.appendChild(row);
|
|
return;
|
|
}
|
|
|
|
data.forEach(item => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'border-b border-gray-100 hover:bg-gray-50';
|
|
row.innerHTML = `
|
|
<td class="py-3 px-4 text-sm text-gray-800">${item.domain}</td>
|
|
<td class="py-3 px-4 text-sm text-gray-800 text-right">${formatNumber(item.count)}</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// 更新最近屏蔽域名表格
|
|
function updateRecentBlockedTable(data) {
|
|
const tableBody = document.getElementById('recent-blocked-table');
|
|
tableBody.innerHTML = '';
|
|
|
|
if (data.length === 0) {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `<td colspan="2" class="py-4 text-center text-gray-500">暂无数据</td>`;
|
|
tableBody.appendChild(row);
|
|
return;
|
|
}
|
|
|
|
data.forEach(item => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'border-b border-gray-100 hover:bg-gray-50';
|
|
row.innerHTML = `
|
|
<td class="py-3 px-4 text-sm text-gray-800">${item.domain}</td>
|
|
<td class="py-3 px-4 text-sm text-gray-500 text-right">${item.time}</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// 更新查询趋势图表
|
|
function updateQueryTrendChart(data) {
|
|
const ctx = document.getElementById('query-trend-chart').getContext('2d');
|
|
|
|
// 创建图表
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.labels,
|
|
datasets: [{
|
|
label: '查询数量',
|
|
data: data.data,
|
|
borderColor: '#165DFF',
|
|
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.3,
|
|
fill: true,
|
|
pointBackgroundColor: '#FFFFFF',
|
|
pointBorderColor: '#165DFF',
|
|
pointBorderWidth: 2,
|
|
pointRadius: 4,
|
|
pointHoverRadius: 6
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
padding: 12,
|
|
cornerRadius: 8,
|
|
titleFont: {
|
|
size: 14,
|
|
weight: 'bold'
|
|
},
|
|
bodyFont: {
|
|
size: 13
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 12
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)'
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 12
|
|
},
|
|
callback: function(value) {
|
|
return formatNumber(value);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 更新比例图表
|
|
function updateRatioChart(data) {
|
|
const dnsStats = data.dns;
|
|
const ctx = document.getElementById('ratio-chart').getContext('2d');
|
|
|
|
// 准备数据
|
|
const chartData = [dnsStats.Allowed, dnsStats.Blocked, dnsStats.Errors];
|
|
const chartColors = ['#00B42A', '#F53F3F', '#FF7D00'];
|
|
const chartLabels = ['正常解析', '屏蔽', '错误'];
|
|
|
|
// 创建图表
|
|
new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: chartLabels,
|
|
datasets: [{
|
|
data: chartData,
|
|
backgroundColor: chartColors,
|
|
borderWidth: 0,
|
|
hoverOffset: 10
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',',\,
|
|
labels: {
|
|
padding: 20,
|
|
font: {
|
|
size: 13
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
padding: 12,
|
|
cornerRadius: 8,
|
|
callbacks: {
|
|
label: function(context) {
|
|
const value = context.parsed;
|
|
const total = context.dataset.data.reduce((a, b) => a + b, 0);
|
|
const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
|
|
return `${context.label}: ${formatNumber(value)} (${percentage}%)`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
cutout: '70%'
|
|
}
|
|
});
|
|
}
|
|
|
|
// 格式化数字
|
|
function formatNumber(num) {
|
|
if (num >= 1000000) {
|
|
return (num / 1000000).toFixed(1) + 'M';
|
|
} else if (num >= 1000) {
|
|
return (num / 1000).toFixed(1) + 'K';
|
|
}
|
|
return num.toString();
|
|
}
|
|
|
|
// 显示错误消息
|
|
function showErrorMessage(message) {
|
|
// 创建错误消息元素
|
|
const errorElement = document.createElement('div');
|
|
errorElement.className = 'fixed bottom-4 right-4 bg-danger text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center';
|
|
errorElement.innerHTML = `
|
|
<i class="fa fa-exclamation-circle mr-2"></i>
|
|
<span>${message}</span>
|
|
`;
|
|
|
|
document.body.appendChild(errorElement);
|
|
|
|
// 3秒后自动移除
|
|
setTimeout(() => {
|
|
errorElement.classList.add('opacity-0', 'transition-opacity', 'duration-300');
|
|
setTimeout(() => {
|
|
document.body.removeChild(errorElement);
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// 定期刷新数据
|
|
setInterval(loadDashboardData, 30000); // 每30秒刷新一次
|