From 6bafc1b21e76b6a5d1bdede82737f912b0bb3bdd Mon Sep 17 00:00:00 2001
From: liuwei <liuwei@wdtrgf.com.cn>
Date: Wed, 26 Mar 2025 13:49:23 +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           | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

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>
         <div v-if="trendLoading" style="text-align: center; padding: 20px;">
             <i class="el-icon-loading"></i>
             <p>加载中...</p>
         </div>
         <div v-else>
-            <canvas id="messageTrendChart" style="width: 100%; height: 400px;"></canvas>
+            <div style="width: 100%; height: 400px;">
+                <canvas ref="trendChart" style="width: 100%; height: 100%;"></canvas>
+            </div>
             <div style="margin-top: 20px; text-align: center;">
                 <el-radio-group v-model="trendDays" @change="loadMessageTrend">
                     <el-radio-button :label="7">最近7天</el-radio-button>
@@ -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;
                 }
             }
         }