From 7706a2ce3ee1c049c916903cc04304da1f49ddf4 Mon Sep 17 00:00:00 2001
From: liuwei <liuwei@wdtrgf.com.cn>
Date: Wed, 26 Mar 2025 13:46:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=B6=8B=E5=8A=BF=E5=9B=BE?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8A=A0=E5=85=A5=E4=BA=86=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=95=B0=E6=8D=AE=E5=BA=93=EF=BC=8C=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E7=BE=A4=E8=81=8A=E8=81=8A=E5=A4=A9=E6=95=B0=E9=87=8F=E7=9A=84?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/robot_management.html           | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

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 @@
     <el-dialog 
         :title="currentGroupName + ' 消息趋势'" 
         :visible.sync="trendDialogVisible"
-        width="70%">
+        width="70%"
+        @opened="onTrendDialogOpened">
         <div v-if="trendLoading" style="text-align: center; padding: 20px;">
             <i class="el-icon-loading"></i>
             <p>加载中...</p>
@@ -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);
+                }
             }
         }
     });