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

web异常待修复

Browse Source
This commit is contained in:
Alex Yang
2025-11-24 10:50:03 +08:00
parent 534878fa4d
commit 4467a0bf4c
14 changed files with 30715 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,10 +2,17 @@
function initDashboardPanel() {
// 加载统计数据
loadDashboardData();
// 启动实时更新
if (typeof startRealTimeUpdate === 'function') {
startRealTimeUpdate();
}
}
// 加载仪表盘数据
function loadDashboardData() {
// 加载统计卡片数据
updateStatCards();
// 加载24小时统计数据
loadHourlyStats();
@@ -19,10 +26,137 @@ function loadDashboardData() {
loadTopResolvedDomains();
}
// 更新统计卡片数据
function updateStatCards() {
// 获取所有统计数据
apiRequest('/stats')
.then(data => {
// 更新请求统计
if (data && data.dns) {
// 屏蔽请求
const blockedCount = data.dns.Blocked || data.dns.blocked || 0;
updateStatCard('blocked-count', blockedCount);
// 允许请求
const allowedCount = data.dns.Allowed || data.dns.allowed || 0;
updateStatCard('allowed-count', allowedCount);
// 错误请求
const errorCount = data.dns.Errors || data.dns.errors || 0;
updateStatCard('error-count', errorCount);
// 总请求数
const totalCount = blockedCount + allowedCount + errorCount;
updateStatCard('total-queries', totalCount);
// 更新数据历史记录和小型图表
if (typeof updateDataHistory === 'function') {
updateDataHistory('blocked', blockedCount);
updateDataHistory('query', totalCount);
}
// 更新小型图表
if (typeof updateMiniChart === 'function' && typeof dataHistory !== 'undefined') {
updateMiniChart('blocked-chart', dataHistory.blocked);
updateMiniChart('query-chart', dataHistory.query);
}
} else {
// 处理其他可能的数据格式
// 修复语法错误，使用传统的对象属性访问方式
const blockedValue = data && (data.Blocked !== undefined ? data.Blocked : (data.blocked !== undefined ? data.blocked : 0));
const allowedValue = data && (data.Allowed !== undefined ? data.Allowed : (data.allowed !== undefined ? data.allowed : 0));
const errorValue = data && (data.Errors !== undefined ? data.Errors : (data.errors !== undefined ? data.errors : 0));
updateStatCard('blocked-count', blockedValue);
updateStatCard('allowed-count', allowedValue);
updateStatCard('error-count', errorValue);
const totalCount = blockedValue + allowedValue + errorValue;
updateStatCard('total-queries', totalCount);
}
})
.catch(error => {
console.error('获取统计数据失败:', error);
});
// 获取规则数
apiRequest('/shield')
.then(data => {
let rulesCount = 0;
if (Array.isArray(data)) {
rulesCount = data.length;
} else if (data && data.rules && Array.isArray(data.rules)) {
rulesCount = data.rules.length;
}
updateStatCard('rules-count', rulesCount);
// 更新数据历史记录和小型图表
if (typeof updateDataHistory === 'function') {
updateDataHistory('rules', rulesCount);
}
if (typeof updateMiniChart === 'function' && typeof dataHistory !== 'undefined') {
updateMiniChart('rules-chart', dataHistory.rules);
}
})
.catch(error => {
console.error('获取规则数失败:', error);
});
// 获取Hosts条目数
apiRequest('/shield/hosts')
.then(data => {
let hostsCount = 0;
if (Array.isArray(data)) {
hostsCount = data.length;
} else if (data && data.hosts && Array.isArray(data.hosts)) {
hostsCount = data.hosts.length;
}
updateStatCard('hosts-count', hostsCount);
// 更新数据历史记录和小型图表
if (typeof updateDataHistory === 'function') {
updateDataHistory('hosts', hostsCount);
}
if (typeof updateMiniChart === 'function' && typeof dataHistory !== 'undefined') {
updateMiniChart('hosts-chart', dataHistory.hosts);
}
})
.catch(error => {
console.error('获取Hosts条目数失败:', error);
});
}
// 更新单个统计卡片
function updateStatCard(elementId, value) {
const element = document.getElementById(elementId);
if (!element) return;
// 格式化为可读数字
const formattedValue = formatNumber(value);
// 更新显示
element.textContent = formattedValue;
// 使用全局checkAndAnimate函数检测变化并添加光晕效果
if (typeof checkAndAnimate === 'function') {
checkAndAnimate(elementId, value);
}
}
// 加载24小时统计数据
function loadHourlyStats() {
apiRequest('/api/hourly-stats')
apiRequest('/hourly-stats')
.then(data => {
// 检查数据是否变化，避免不必要的重绘
if (typeof previousChartData !== 'undefined' &&
JSON.stringify(previousChartData) === JSON.stringify(data)) {
return; // 数据未变化，无需更新图表
}
previousChartData = JSON.parse(JSON.stringify(data));
// 处理不同可能的数据格式
if (data) {
// 优先处理用户提供的实际数据格式 {data: [], labels: []}
@@ -141,15 +275,28 @@ function renderHourlyChart(hours, blocked, allowed) {
mode: 'index',
intersect: false
}
},
animation: {
duration: 500 // 快速动画，提升实时更新体验
}
}
});
}
// 加载请求类型分布
// 加载请求类型分布 - 注意：后端可能没有这个API，暂时注释掉
function loadRequestsDistribution() {
apiRequest('/api/stats')
// 后端没有对应的API路由，暂时跳过
console.log('请求类型分布API暂不可用');
return Promise.resolve()
.then(data => {
// 检查数据是否变化，避免不必要的重绘
if (typeof previousFullData !== 'undefined' &&
JSON.stringify(previousFullData) === JSON.stringify(data)) {
return; // 数据未变化，无需更新图表
}
previousFullData = JSON.parse(JSON.stringify(data));
// 构造饼图所需的数据，支持多种数据格式
const labels = ['允许请求', '屏蔽请求', '错误请求'];
let requestData = [0, 0, 0]; // 默认值
@@ -238,7 +385,10 @@ function renderRequestsPieChart(labels, data) {
}
}
},
cutout: '60%'
cutout: '60%',
animation: {
duration: 500 // 快速动画，提升实时更新体验
}
}
});
}
@@ -246,13 +396,15 @@ function renderRequestsPieChart(labels, data) {
// 加载最常屏蔽的域名
function loadTopBlockedDomains() {
// 首先获取表格元素并显示加载状态
const tbody = document.getElementById('top-blocked-table')?.querySelector('tbody');
// 修复语法错误，使用传统的DOM访问方式
const topBlockedTable = document.getElementById('top-blocked-table');
const tbody = topBlockedTable ? topBlockedTable.querySelector('tbody') : null;
if (tbody) {
// 显示加载中状态
tbody.innerHTML = `<td colspan="100%" style="color: #7f8c8d; font-style: italic;">加载中...</td>`;
}
apiRequest('/api/top-blocked')
apiRequest('/top-blocked')
.then(data => {
// 处理多种可能的数据格式，特别优化对用户提供格式的支持
let processedData = [];
@@ -282,12 +434,19 @@ function loadTopBlockedDomains() {
if (tbody) {
showEmpty(tbody, '获取数据失败');
}
// 使用全局通知功能
if (typeof showNotification === 'function') {
showNotification('danger', '获取最常屏蔽域名失败');
}
});
}
// 渲染最常屏蔽的域名表格
function renderTopBlockedDomains(domains) {
const tbody = document.getElementById('top-blocked-table')?.querySelector('tbody');
// 修复语法错误，使用传统的DOM访问方式
const topBlockedTable = document.getElementById('top-blocked-table');
const tbody = topBlockedTable ? topBlockedTable.querySelector('tbody') : null;
if (!tbody) return;
console.log('准备渲染的域名数据:', domains);
@@ -327,7 +486,7 @@ function renderTopBlockedDomains(domains) {
// 加载最常解析的域名
function loadTopResolvedDomains() {
apiRequest('/api/top-resolved')
apiRequest('/top-resolved')
.then(data => {
// 处理多种可能的数据格式
let processedData = [];
@@ -355,6 +514,11 @@ function loadTopResolvedDomains() {
if (tbody) {
showEmpty(tbody, '暂无解析记录');
}
// 使用全局通知功能
if (typeof showNotification === 'function') {
showNotification('danger', '获取最常解析域名失败');
}
});
}