diff --git a/plugins/stats_dashboard/templates/robot_management.html b/plugins/stats_dashboard/templates/robot_management.html index d9236b7..e25d8ca 100644 --- a/plugins/stats_dashboard/templates/robot_management.html +++ b/plugins/stats_dashboard/templates/robot_management.html @@ -141,7 +141,8 @@ + width="70%" + @opened="onTrendDialogOpened">

加载中...

@@ -519,6 +520,11 @@ this.currentGroupId = group.group_id; this.currentGroupName = group.group_name || group.group_id; this.trendDialogVisible = true; + // 不在这里立即加载,而是等对话框打开后再加载 + }, + + // 对话框打开后的回调 + onTrendDialogOpened() { this.loadMessageTrend(); }, @@ -528,11 +534,15 @@ axios.get(`/api/robot/group/${this.currentGroupId}/message_trend?days=${this.trendDays}`) .then(response => { if (response.data.success) { - this.renderTrendChart(response.data.data); + // 确保DOM已经渲染完成 + setTimeout(() => { + this.renderTrendChart(response.data.data); + this.trendLoading = false; + }, 100); } else { this.$message.error('加载消息趋势失败'); + this.trendLoading = false; } - this.trendLoading = false; }) .catch(error => { console.error('加载消息趋势失败:', error); @@ -542,18 +552,28 @@ }, renderTrendChart(data) { - // 确保DOM元素已经渲染 - this.$nextTick(() => { + try { + // 获取canvas元素 + const canvas = document.getElementById('messageTrendChart'); + if (!canvas) { + console.error('找不到Canvas元素'); + return; + } + + const ctx = canvas.getContext('2d'); + if (!ctx) { + console.error('无法获取Canvas上下文'); + return; + } + // 如果已有图表,先销毁 if (this.trendChart) { this.trendChart.destroy(); } - // 获取canvas元素 - const ctx = document.getElementById('messageTrendChart').getContext('2d'); - // 创建新图表 this.trendChart = new Chart(ctx, { + // 保持原有配置不变 type: 'line', data: { labels: data.dates, @@ -600,7 +620,10 @@ } } }); - }); + } catch (error) { + console.error('渲染图表出错:', error); + this.$message.error('渲染图表出错: ' + error.message); + } } } });