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