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

增加websocket,数据实时显示

Browse Source
This commit is contained in:
Alex Yang
2025-11-26 01:42:14 +08:00
parent d293831bf9
commit 30ddd53f19
1 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
static/js/dashboard.js
View File

@@ -1038,11 +1038,11 @@ function drawDNSRequestsChart() {
const chartContext = ctx.getContext('2d'); const chartContext = ctx.getContext('2d');
// 混合视图配置 // 混合视图配置
const datasetsConfig = [ const datasetsConfig = [
{ label: '24小时', api: (api && api.getHourlyStats) || (() => Promise.resolve({ labels: [], data: [] })), color: '#3b82f6', fillColor: 'rgba(59, 130, 246, 0.1)' }, { label: '24小时', api: (api && api.getHourlyStats) || (() => Promise.resolve({ labels: [], data: [] })), color: '#3b82f6', fillColor: 'rgba(59, 130, 246, 0.1)' },
{ label: '7天', api: (api && api.getDailyStats) || (() => Promise.resolve({ labels: [], data: [] })), color: '#22c55e', fillColor: 'rgba(34, 197, 94, 0.1)' }, { label: '7天', api: (api && api.getDailyStats) || (() => Promise.resolve({ labels: [], data: [] })), color: '#22c55e', fillColor: 'rgba(34, 197, 94, 0.1)' },
{ label: '30天', api: (api && api.getMonthlyStats) || (() => Promise.resolve({ labels: [], data: [] })), color: '#a855f7', fillColor: 'rgba(168, 85, 247, 0.1)' } { label: '30天', api: (api && api.getMonthlyStats) || (() => Promise.resolve({ labels: [], data: [] })), color: '#a855f7', fillColor: 'rgba(168, 85, 247, 0.1)' }
]; ];
// 检查是否为混合视图 // 检查是否为混合视图
if (isMixedView || currentTimeRange === 'mixed') { if (isMixedView || currentTimeRange === 'mixed') {
@@ -1054,11 +1054,12 @@ function drawDNSRequestsChart() {
// 获取所有时间范围的数据 // 获取所有时间范围的数据
Promise.all(datasetsConfig.map(config => Promise.all(datasetsConfig.map(config =>
config.api().catch(error => { config.api().catch(error => {
console.error(`获取${config.label}数据失败，使用模拟数据:`, error); console.error(`获取${config.label}数据失败:`, error);
// 返回模拟数据 // 返回空数据而不是模拟数据
const count = config.label === '24小时' ? 24 : (config.label === '7天' ? 7 : 30);
return { return {
labels: generateTimeLabels(config.label === '24小时' ? 24 : (config.label === '7天' ? 7 : 30)), labels: Array(count).fill(''),
data: generateMockData(config.label === '24小时' ? 24 : (config.label === '7天' ? 7 : 30), 100, 1000) data: Array(count).fill(0)
}; };
}) })
)).then(results => { )).then(results => {
@@ -1075,7 +1076,7 @@ function drawDNSRequestsChart() {
// 创建或更新图表 // 创建或更新图表
if (dnsRequestsChart) { if (dnsRequestsChart) {
dnsRequestsChart.data.labels = results[0].labels; // 使用第一个数据集的标签 dnsRequestsChart.data.labels = results[0].labels;
dnsRequestsChart.data.datasets = datasets; dnsRequestsChart.data.datasets = datasets;
dnsRequestsChart.options.plugins.legend.display = showLegend; dnsRequestsChart.options.plugins.legend.display = showLegend;
// 使用平滑过渡动画更新图表 // 使用平滑过渡动画更新图表
@@ -1093,7 +1094,6 @@ function drawDNSRequestsChart() {
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
// 添加动画配置，确保平滑过渡
animation: { animation: {
duration: 800, duration: 800,
easing: 'easeInOutQuart' easing: 'easeInOutQuart'
@@ -1130,6 +1130,7 @@ function drawDNSRequestsChart() {
} else { } else {
// 普通视图 // 普通视图
// 根据当前时间范围选择API函数 // 根据当前时间范围选择API函数
let apiFunction;
switch (currentTimeRange) { switch (currentTimeRange) {
case '7d': case '7d':
apiFunction = (api && api.getDailyStats) || (() => Promise.resolve({ labels: [], data: [] })); apiFunction = (api && api.getDailyStats) || (() => Promise.resolve({ labels: [], data: [] }));
@@ -1177,7 +1178,6 @@ function drawDNSRequestsChart() {
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
// 添加动画配置，确保平滑过渡
animation: { animation: {
duration: 800, duration: 800,
easing: 'easeInOutQuart' easing: 'easeInOutQuart'
@@ -1209,15 +1209,16 @@ function drawDNSRequestsChart() {
} }
}).catch(error => { }).catch(error => {
console.error('绘制DNS请求图表失败:', error); console.error('绘制DNS请求图表失败:', error);
// 使用模拟数据 // 错误处理：使用空数据而不是模拟数据
const mockData = { const count = currentTimeRange === '24h' ? 24 : (currentTimeRange === '7d' ? 7 : 30);
labels: generateTimeLabels(currentTimeRange === '24h' ? 24 : (currentTimeRange === '7d' ? 7 : 30)), const emptyData = {
data: generateMockData(currentTimeRange === '24h' ? 24 : (currentTimeRange === '7d' ? 7 : 30), 100, 1000) labels: Array(count).fill(''),
data: Array(count).fill(0)
}; };
if (dnsRequestsChart) { if (dnsRequestsChart) {
dnsRequestsChart.data.labels = mockData.labels; dnsRequestsChart.data.labels = emptyData.labels;
dnsRequestsChart.data.datasets[0].data = mockData.data; dnsRequestsChart.data.datasets[0].data = emptyData.data;
dnsRequestsChart.update(); dnsRequestsChart.update();
} }
}); });