调整趋势图功能，加入了查询数据库，分析群聊聊天数量的功能

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已经渲染完成
+                            console.log('数据加载成功，准备渲染图表');
-                            setTimeout(() => {
+                            // 延迟渲染，确保DOM已更新
-                                this.renderTrendChart(response.data.data);
+                            this.$nextTick(() => {
-                                this.trendLoading = false;
+                                setTimeout(() => {
-                            }, 100);
+                                    this.renderTrendChart(response.data.data);
+                                }, 300);
+                            });
                         } else {
                             this.$message.error('加载消息趋势失败');
                             this.trendLoading = false;
@@ -553,16 +562,30 @@
             
             renderTrendChart(data) {
                 try {
-                    // 获取canvas元素
+                    console.log('开始渲染图表');
-                    const canvas = document.getElementById('messageTrendChart');
+                    this.trendLoading = false;
+                    
+                    // 使用Vue的$refs获取Canvas元素
+                    const canvas = this.$refs.trendChart;
+                    console.log('Canvas元素:', canvas);
+                    
                     if (!canvas) {
-                        console.error('找不到Canvas元素');
+                        console.error('找不到Canvas元素 (通过$refs)');
-                        return;
+                        // 尝试通过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;
                 }
             }
         }