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; } } }