diff --git a/plugins/stats_dashboard/templates/robot_management.html b/plugins/stats_dashboard/templates/robot_management.html
index e25d8ca..8385187 100644
--- a/plugins/stats_dashboard/templates/robot_management.html
+++ b/plugins/stats_dashboard/templates/robot_management.html
@@ -142,13 +142,16 @@
:title="currentGroupName + ' 消息趋势'"
:visible.sync="trendDialogVisible"
width="70%"
- @opened="onTrendDialogOpened">
+ @opened="onTrendDialogOpened"
+ destroy-on-close>
-
+
+
+
最近7天
@@ -525,20 +528,26 @@
// 对话框打开后的回调
onTrendDialogOpened() {
+ console.log('对话框已打开,准备加载数据');
+ // 重置图表
+ this.trendChart = null;
this.loadMessageTrend();
},
loadMessageTrend() {
this.trendLoading = true;
+ console.log('开始加载消息趋势数据');
axios.get(`/api/robot/group/${this.currentGroupId}/message_trend?days=${this.trendDays}`)
.then(response => {
if (response.data.success) {
- // 确保DOM已经渲染完成
- setTimeout(() => {
- this.renderTrendChart(response.data.data);
- this.trendLoading = false;
- }, 100);
+ console.log('数据加载成功,准备渲染图表');
+ // 延迟渲染,确保DOM已更新
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.renderTrendChart(response.data.data);
+ }, 300);
+ });
} else {
this.$message.error('加载消息趋势失败');
this.trendLoading = false;
@@ -553,16 +562,30 @@
renderTrendChart(data) {
try {
- // 获取canvas元素
- const canvas = document.getElementById('messageTrendChart');
+ console.log('开始渲染图表');
+ this.trendLoading = false;
+
+ // 使用Vue的$refs获取Canvas元素
+ const canvas = this.$refs.trendChart;
+ console.log('Canvas元素:', canvas);
+
if (!canvas) {
- console.error('找不到Canvas元素');
- return;
+ console.error('找不到Canvas元素 (通过$refs)');
+ // 尝试通过ID获取
+ const canvasById = document.getElementById('messageTrendChart');
+ console.log('通过ID获取Canvas元素:', canvasById);
+ if (!canvasById) {
+ this.$message.error('无法找到图表元素,请尝试重新打开对话框');
+ return;
+ }
+ // 如果能通过ID获取,使用它
+ canvas = canvasById;
}
const ctx = canvas.getContext('2d');
if (!ctx) {
console.error('无法获取Canvas上下文');
+ this.$message.error('无法初始化图表,请尝试重新打开对话框');
return;
}
@@ -571,9 +594,9 @@
this.trendChart.destroy();
}
+ console.log('创建新图表');
// 创建新图表
this.trendChart = new Chart(ctx, {
- // 保持原有配置不变
type: 'line',
data: {
labels: data.dates,
@@ -620,9 +643,11 @@
}
}
});
+ console.log('图表创建完成');
} catch (error) {
console.error('渲染图表出错:', error);
this.$message.error('渲染图表出错: ' + error.message);
+ this.trendLoading = false;
}
}
}