增加websocket,数据实时显示
This commit is contained in:
@@ -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();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user