+
解析类型统计
-
+
+
+
+
DNS请求趋势
+
+
+
+
+
+
+
+
+
+
+
+
+
+
DNS请求趋势详细图表
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/js/dashboard.js b/static/js/dashboard.js
index 1493276..e0dcfb4 100644
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -3,6 +3,7 @@
// 全局变量
let ratioChart = null;
let dnsRequestsChart = null;
+let detailedDnsRequestsChart = null; // 详细DNS请求趋势图表(浮窗)
let queryTypeChart = null; // 解析类型统计饼图
let intervalId = null;
let wsConnection = null;
@@ -939,6 +940,219 @@ function initTimeRangeToggle() {
}
}
+// 初始化展开按钮功能
+function initExpandButton() {
+ const expandBtn = document.getElementById('expand-chart-btn');
+ const chartModal = document.getElementById('chart-modal');
+ const closeBtn = document.getElementById('close-modal-btn');
+
+ if (!expandBtn || !chartModal || !closeBtn) {
+ console.error('未找到展开按钮或浮窗元素');
+ return;
+ }
+
+ // 展开按钮点击事件
+ expandBtn.addEventListener('click', () => {
+ console.log('展开按钮被点击');
+ chartModal.classList.remove('hidden');
+ // 初始化详细图表
+ drawDetailedDNSRequestsChart();
+ });
+
+ // 关闭按钮点击事件
+ closeBtn.addEventListener('click', () => {
+ console.log('关闭浮窗');
+ chartModal.classList.add('hidden');
+ });
+
+ // 点击浮窗外部关闭
+ chartModal.addEventListener('click', (event) => {
+ if (event.target === chartModal) {
+ chartModal.classList.add('hidden');
+ }
+ });
+
+ // 初始化详细图表的时间范围切换
+ initDetailedTimeRangeToggle();
+}
+
+// 初始化详细图表的时间范围切换
+function initDetailedTimeRangeToggle() {
+ const timeRangeBtns = document.querySelectorAll('.time-range-btn[data-range]');
+
+ if (!timeRangeBtns.length) {
+ console.warn('未找到详细图表的时间范围按钮');
+ return;
+ }
+
+ // 详细图表的当前时间范围
+ let detailedCurrentTimeRange = '24h';
+ let detailedIsMixedView = false;
+
+ // 为所有时间范围按钮添加点击事件
+ timeRangeBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ const range = btn.getAttribute('data-range');
+
+ if (range === 'mixed') {
+ detailedIsMixedView = !detailedIsMixedView;
+ } else {
+ detailedCurrentTimeRange = range;
+ detailedIsMixedView = false;
+ }
+
+ // 更新按钮样式
+ updateTimeRangeButtonStyles(timeRangeBtns, range, detailedIsMixedView);
+
+ // 重新绘制详细图表
+ drawDetailedDNSRequestsChart(detailedCurrentTimeRange, detailedIsMixedView);
+ });
+ });
+}
+
+// 更新时间范围按钮样式
+function updateTimeRangeButtonStyles(buttons, activeRange, isMixedView) {
+ buttons.forEach(btn => {
+ const btnRange = btn.getAttribute('data-range');
+
+ if (btnRange === activeRange && (btnRange !== 'mixed' || isMixedView)) {
+ btn.classList.add('bg-primary', 'text-white');
+ btn.classList.remove('bg-gray-200', 'text-gray-700');
+ } else {
+ btn.classList.remove('bg-primary', 'text-white');
+ btn.classList.add('bg-gray-200', 'text-gray-700');
+ }
+ });
+}
+
+// 绘制详细DNS请求图表
+function drawDetailedDNSRequestsChart(timeRange = '24h', isMixedView = false) {
+ const chartElement = document.getElementById('detailed-dns-requests-chart');
+ if (!chartElement) {
+ console.error('未找到详细DNS请求图表元素');
+ return;
+ }
+
+ const chartContext = chartElement.getContext('2d');
+
+ // 这里可以复用或修改现有的drawDNSRequestsChart函数的逻辑
+ // 为详细图表使用与原始图表相同的数据获取逻辑
+ let apiFunction;
+ let count;
+
+ if (isMixedView) {
+ // 混合视图 - 不同时间范围的数据
+ apiFunction = () => Promise.resolve({
+ labels: ['0h', '6h', '12h', '18h', '24h', '48h', '72h', '96h', '120h', '144h', '168h'],
+ data: generateMockData(11, 1000, 5000)
+ });
+ } else {
+ // 普通视图 - 基于时间范围
+ if (timeRange === '24h') {
+ count = 24;
+ apiFunction = () => Promise.resolve({
+ labels: generateTimeLabels(count),
+ data: generateMockData(count, 100, 500)
+ });
+ } else if (timeRange === '7d') {
+ count = 7;
+ apiFunction = () => Promise.resolve({
+ labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+ data: generateMockData(count, 1000, 5000)
+ });
+ } else if (timeRange === '30d') {
+ count = 30;
+ apiFunction = () => Promise.resolve({
+ labels: Array(count).fill(''),
+ data: generateMockData(count, 10000, 50000)
+ });
+ }
+ }
+
+ // 获取数据并绘制图表
+ if (apiFunction) {
+ apiFunction().then(data => {
+ // 创建或更新图表
+ if (detailedDnsRequestsChart) {
+ detailedDnsRequestsChart.data.labels = data.labels;
+ detailedDnsRequestsChart.data.datasets = [{
+ label: 'DNS请求数量',
+ data: data.data,
+ borderColor: '#3b82f6',
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
+ tension: 0.4,
+ fill: true
+ }];
+ detailedDnsRequestsChart.options.plugins.legend.display = false;
+ // 使用平滑过渡动画更新图表
+ detailedDnsRequestsChart.update({
+ duration: 800,
+ easing: 'easeInOutQuart'
+ });
+ } else {
+ detailedDnsRequestsChart = 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,
+ animation: {
+ duration: 800,
+ easing: 'easeInOutQuart'
+ },
+ 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);
+ // 错误处理：使用空数据
+ const count = timeRange === '24h' ? 24 : (timeRange === '7d' ? 7 : 30);
+ const emptyData = {
+ labels: Array(count).fill(''),
+ data: Array(count).fill(0)
+ };
+
+ if (detailedDnsRequestsChart) {
+ detailedDnsRequestsChart.data.labels = emptyData.labels;
+ detailedDnsRequestsChart.data.datasets[0].data = emptyData.data;
+ detailedDnsRequestsChart.update();
+ }
+ });
+ }
+}
+
// 初始化图表
function initCharts() {
// 初始化比例图表
@@ -969,9 +1183,27 @@ function initCharts() {
plugins: {
legend: {
position: 'bottom',
+ labels: {
+ boxWidth: 12, // 减小图例框的宽度
+ font: {
+ size: 11 // 减小字体大小
+ },
+ padding: 10 // 减小内边距
+ }
+ },
+ tooltip: {
+ callbacks: {
+ label: function(context) {
+ const label = context.label || '';
+ const value = context.raw || 0;
+ const total = context.dataset.data.reduce((acc, val) => acc + (typeof val === 'number' ? val : 0), 0);
+ const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
+ return `${label}: ${value} (${percentage}%)`;
+ }
+ }
}
},
- cutout: '70%'
+ cutout: '75%' // 增加中心空白区域比例，使环形更适合小容器
}
});
@@ -1003,6 +1235,13 @@ function initCharts() {
plugins: {
legend: {
position: 'bottom',
+ labels: {
+ boxWidth: 12, // 减小图例框的宽度
+ font: {
+ size: 11 // 减小字体大小
+ },
+ padding: 10 // 减小内边距
+ }
},
tooltip: {
callbacks: {
@@ -1016,7 +1255,7 @@ function initCharts() {
}
}
},
- cutout: '70%'
+ cutout: '75%' // 增加中心空白区域比例，使环形更适合小容器
}
});
} else {
@@ -1025,6 +1264,299 @@ function initCharts() {
// 初始化DNS请求统计图表
drawDNSRequestsChart();
+
+ // 初始化展开按钮功能
+ initExpandButton();
+}
+
+// 初始化展开按钮事件
+function initExpandButton() {
+ const expandBtn = document.getElementById('expand-chart-btn');
+ const chartModal = document.getElementById('chart-modal');
+ const closeModalBtn = document.getElementById('close-modal-btn'); // 修复ID匹配
+
+ // 添加调试日志
+ console.log('初始化展开按钮功能:', { expandBtn, chartModal, closeModalBtn });
+
+ if (expandBtn && chartModal && closeModalBtn) {
+ // 展开按钮点击事件
+ expandBtn.addEventListener('click', () => {
+ console.log('展开按钮被点击');
+ // 显示浮窗
+ chartModal.classList.remove('hidden');
+
+ // 初始化或更新详细图表
+ drawDetailedDNSRequestsChart();
+
+ // 初始化浮窗中的时间范围切换
+ initDetailedTimeRangeToggle();
+ });
+
+ // 关闭按钮点击事件
+ closeModalBtn.addEventListener('click', () => {
+ console.log('关闭按钮被点击');
+ chartModal.classList.add('hidden');
+ });
+
+ // 点击遮罩层关闭浮窗（使用chartModal作为遮罩层）
+ chartModal.addEventListener('click', (e) => {
+ // 检查点击目标是否是遮罩层本身（即最外层div）
+ if (e.target === chartModal) {
+ console.log('点击遮罩层关闭');
+ chartModal.classList.add('hidden');
+ }
+ });
+
+ // ESC键关闭浮窗
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && !chartModal.classList.contains('hidden')) {
+ console.log('ESC键关闭浮窗');
+ chartModal.classList.add('hidden');
+ }
+ });
+ } else {
+ console.error('无法找到必要的DOM元素');
+ }
+}
+
+// 初始化详细图表的时间范围切换
+function initDetailedTimeRangeToggle() {
+ const detailedTimeRangeButtons = document.querySelectorAll('.time-range-btn');
+
+ console.log('初始化详细图表时间范围切换，找到按钮数量:', detailedTimeRangeButtons.length);
+
+ detailedTimeRangeButtons.forEach((button) => {
+ button.addEventListener('click', () => {
+ // 设置当前时间范围
+ const timeRange = button.dataset.range;
+ const isMixedMode = timeRange === 'mixed';
+
+ console.log('时间范围按钮被点击:', { timeRange, isMixedMode });
+
+ // 更新按钮状态
+ detailedTimeRangeButtons.forEach((btn) => {
+ if (btn === button) {
+ btn.classList.add('bg-blue-500', 'text-white');
+ btn.classList.remove('bg-gray-200', 'text-gray-700');
+ } else {
+ btn.classList.remove('bg-blue-500', 'text-white');
+ btn.classList.add('bg-gray-200', 'text-gray-700');
+ }
+ });
+
+ // 更新详细图表
+ currentTimeRange = timeRange;
+ isMixedView = isMixedMode;
+ drawDetailedDNSRequestsChart();
+ });
+ });
+}
+
+// 绘制详细的DNS请求趋势图表
+function drawDetailedDNSRequestsChart() {
+ console.log('绘制详细DNS请求趋势图表，时间范围:', currentTimeRange, '混合视图:', isMixedView);
+
+ const ctx = document.getElementById('detailed-dns-requests-chart');
+ if (!ctx) {
+ console.error('未找到详细DNS请求图表元素');
+ return;
+ }
+
+ 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)' }
+ ];
+
+ // 检查是否为混合视图
+ if (isMixedView || currentTimeRange === 'mixed') {
+ console.log('渲染混合视图详细图表');
+
+ // 显示图例
+ const showLegend = true;
+
+ // 获取所有时间范围的数据
+ Promise.all(datasetsConfig.map(config =>
+ config.api().catch(error => {
+ console.error(`获取${config.label}数据失败:`, error);
+ // 返回空数据
+ const count = config.label === '24小时' ? 24 : (config.label === '7天' ? 7 : 30);
+ return {
+ labels: Array(count).fill(''),
+ data: Array(count).fill(0)
+ };
+ })
+ )).then(results => {
+ // 创建数据集
+ const datasets = results.map((data, index) => ({
+ label: datasetsConfig[index].label,
+ data: data.data,
+ borderColor: datasetsConfig[index].color,
+ backgroundColor: datasetsConfig[index].fillColor,
+ tension: 0.4,
+ fill: false,
+ borderWidth: 2
+ }));
+
+ // 创建或更新图表
+ if (detailedDnsRequestsChart) {
+ detailedDnsRequestsChart.data.labels = results[0].labels;
+ detailedDnsRequestsChart.data.datasets = datasets;
+ detailedDnsRequestsChart.options.plugins.legend.display = showLegend;
+ // 使用平滑过渡动画更新图表
+ detailedDnsRequestsChart.update({
+ duration: 800,
+ easing: 'easeInOutQuart'
+ });
+ } else {
+ detailedDnsRequestsChart = new Chart(chartContext, {
+ type: 'line',
+ data: {
+ labels: results[0].labels,
+ datasets: datasets
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ animation: {
+ duration: 800,
+ easing: 'easeInOutQuart'
+ },
+ plugins: {
+ legend: {
+ display: showLegend,
+ position: 'top'
+ },
+ 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('绘制混合视图详细图表失败:', error);
+ });
+ } else {
+ // 普通视图
+ // 根据当前时间范围选择API函数
+ let apiFunction;
+ switch (currentTimeRange) {
+ case '7d':
+ apiFunction = (api && api.getDailyStats) || (() => Promise.resolve({ labels: [], data: [] }));
+ break;
+ case '30d':
+ apiFunction = (api && api.getMonthlyStats) || (() => Promise.resolve({ labels: [], data: [] }));
+ break;
+ default: // 24h
+ apiFunction = (api && api.getHourlyStats) || (() => Promise.resolve({ labels: [], data: [] }));
+ }
+
+ // 获取统计数据
+ apiFunction().then(data => {
+ // 创建或更新图表
+ if (detailedDnsRequestsChart) {
+ detailedDnsRequestsChart.data.labels = data.labels;
+ detailedDnsRequestsChart.data.datasets = [{
+ label: 'DNS请求数量',
+ data: data.data,
+ borderColor: '#3b82f6',
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
+ tension: 0.4,
+ fill: true
+ }];
+ detailedDnsRequestsChart.options.plugins.legend.display = false;
+ // 使用平滑过渡动画更新图表
+ detailedDnsRequestsChart.update({
+ duration: 800,
+ easing: 'easeInOutQuart'
+ });
+ } else {
+ detailedDnsRequestsChart = 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,
+ animation: {
+ duration: 800,
+ easing: 'easeInOutQuart'
+ },
+ plugins: {
+ legend: {
+ display: false
+ },
+ title: {
+ display: true,
+ text: 'DNS请求趋势',
+ font: {
+ size: 14
+ }
+ },
+ 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);
+ // 错误处理：使用空数据
+ const count = currentTimeRange === '24h' ? 24 : (currentTimeRange === '7d' ? 7 : 30);
+ const emptyData = {
+ labels: Array(count).fill(''),
+ data: Array(count).fill(0)
+ };
+
+ if (detailedDnsRequestsChart) {
+ detailedDnsRequestsChart.data.labels = emptyData.labels;
+ detailedDnsRequestsChart.data.datasets[0].data = emptyData.data;
+ detailedDnsRequestsChart.update();
+ }
+ });
+ }
}
// 绘制DNS请求统计图表