web增加恢复解析统计图表

static/js/dashboard.js

@@ -2,6 +2,7 @@
 
 // 全局变量
 let ratioChart = null;
+let dnsRequestsChart = null;
 let intervalId = null;
 
 // 初始化仪表盘
@@ -13,6 +14,9 @@ async function initDashboard() {
         // 初始化图表
         initCharts();
         
+        // 初始化时间范围切换
+        initTimeRangeToggle();
+        
         // 设置定时更新
         intervalId = setInterval(loadDashboardData, 5000); // 每5秒更新一次
     } catch (error) {
@@ -211,6 +215,28 @@ function updateRecentBlockedTable(domains) {
     tableBody.innerHTML = html;
 }
 
+// 当前选中的时间范围
+let currentTimeRange = '24h'; // 默认为24小时
+
+// 初始化时间范围切换
+function initTimeRangeToggle() {
+    const timeRangeButtons = document.querySelectorAll('.time-range-btn');
+    timeRangeButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // 移除所有按钮的激活状态
+            timeRangeButtons.forEach(btn => btn.classList.remove('active'));
+            // 添加当前按钮的激活状态
+            button.classList.add('active');
+            // 更新当前时间范围
+            currentTimeRange = button.dataset.range;
+            // 重新加载数据
+            loadDashboardData();
+            // 更新DNS请求图表
+            drawDNSRequestsChart();
+        });
+    });
+}
+
 // 初始化图表
 function initCharts() {
     // 初始化比例图表
@@ -241,6 +267,86 @@ function initCharts() {
             cutout: '70%'
         }
     });
+    
+    // 初始化DNS请求统计图表
+    drawDNSRequestsChart();
+}
+
+// 绘制DNS请求统计图表
+function drawDNSRequestsChart() {
+    const ctx = document.getElementById('dns-requests-chart');
+    if (!ctx) {
+        console.error('未找到DNS请求图表元素');
+        return;
+    }
+    
+    const chartContext = ctx.getContext('2d');
+    let apiFunction;
+    
+    // 根据当前时间范围选择API函数
+    switch (currentTimeRange) {
+        case '7d':
+            apiFunction = api.getDailyStats;
+            break;
+        case '30d':
+            apiFunction = api.getMonthlyStats;
+            break;
+        default: // 24h
+            apiFunction = api.getHourlyStats;
+    }
+    
+    // 获取统计数据
+    apiFunction().then(data => {
+        // 创建或更新图表
+        if (dnsRequestsChart) {
+            dnsRequestsChart.data.labels = data.labels;
+            dnsRequestsChart.data.datasets[0].data = data.data;
+            dnsRequestsChart.update();
+        } else {
+            dnsRequestsChart = new Chart(chartContext, {
+                type: 'line',
+                data: {
+                    labels: data.labels,
+                    datasets: [{
+                        label: 'DNS请求数量',
+                        data: data.data,
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.1)'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                display: false
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    }).catch(error => {
+        console.error('绘制DNS请求图表失败:', error);
+    });
 }
 
 // 更新图表数据