From 82ab98c787ef8052c22dac82e85059929c24820e Mon Sep 17 00:00:00 2001
From: liuwei <liuwei@wdtrgf.com.cn>
Date: Wed, 26 Mar 2025 14:17:11 +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

---
 plugins/stats_dashboard/templates/base.html   |   2 +
 .../templates/robot_management.html           | 163 ++++++++----------
 2 files changed, 74 insertions(+), 91 deletions(-)

diff --git a/plugins/stats_dashboard/templates/base.html b/plugins/stats_dashboard/templates/base.html
index 72c2553..5dc6262 100644
--- a/plugins/stats_dashboard/templates/base.html
+++ b/plugins/stats_dashboard/templates/base.html
@@ -14,6 +14,8 @@
     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
     <!-- Axios -->
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <!-- ECharts -->
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
     <style>
         body {
             margin: 0;
diff --git a/plugins/stats_dashboard/templates/robot_management.html b/plugins/stats_dashboard/templates/robot_management.html
index c2bd59d..4963e69 100644
--- a/plugins/stats_dashboard/templates/robot_management.html
+++ b/plugins/stats_dashboard/templates/robot_management.html
@@ -151,8 +151,8 @@
         <div v-else>
             <div class="chart-container">
                 <h3>消息数量趋势</h3>
-                <!-- 使用固定ID -->
-                <div id="message-trend-chart-container" style="width: 100%; height: 300px;"></div>
+                <!-- 直接在Vue模板中创建图表容器 -->
+                <div ref="trendChartContainer" style="width: 100%; height: 300px;"></div>
             </div>
             <div style="margin-top: 20px; text-align: center;">
                 <el-radio-group v-model="trendDays" @change="loadMessageTrend">
@@ -426,10 +426,8 @@
             // 对话框打开后的回调
             onTrendDialogOpened() {
                 console.log('对话框已打开');
-                // 延迟加载，确保DOM已渲染
-                setTimeout(() => {
-                    this.loadMessageTrend();
-                }, 100);
+                // 直接加载数据，不使用延迟
+                this.loadMessageTrend();
             },
             
             loadMessageTrend() {
@@ -438,11 +436,9 @@
                 axios.get(`/api/robot/group/${this.currentGroupId}/message_trend?days=${this.trendDays}`)
                     .then(response => {
                         if (response.data.success) {
-                            // 增加延迟时间
-                            setTimeout(() => {
-                                this.renderTrendChart(response.data.data);
-                                this.trendLoading = false;
-                            }, 500); // 增加到500毫秒
+                            // 直接渲染表格显示数据
+                            this.renderTrendTable(response.data.data);
+                            this.trendLoading = false;
                         } else {
                             this.$message.error('加载消息趋势失败');
                             this.trendLoading = false;
@@ -455,105 +451,90 @@
                     });
             },
             
-            renderTrendChart(data) {
+            renderTrendTable(data) {
                 try {
-                    console.log('开始渲染图表');
+                    console.log('开始渲染趋势数据');
                     
-                    // 使用固定ID获取容器元素
-                    const container = document.getElementById('message-trend-chart-container');
+                    // 获取容器元素
+                    const container = this.$refs.trendChartContainer;
                     
                     if (!container) {
-                        console.error('找不到图表容器，ID: message-trend-chart-container');
+                        console.error('找不到图表容器');
                         this.$message.error('无法找到图表容器，请尝试重新打开对话框');
                         return;
                     }
                     
-                    console.log('找到图表容器:', container);
-                    
                     // 清空容器
                     container.innerHTML = '';
                     
-                    // 动态创建Canvas元素
-                    const canvas = document.createElement('canvas');
-                    canvas.width = container.clientWidth;
-                    canvas.height = container.clientHeight;
-                    container.appendChild(canvas);
-                    
-                    console.log('已创建Canvas元素');
-                    const ctx = canvas.getContext('2d');
-                    
-                    // 销毁旧图表
-                    if (this.charts.trendChart) {
-                        this.charts.trendChart.destroy();
-                    }
-                    
-                    // 确保charts对象存在
-                    if (!this.charts) {
-                        this.charts = {};
-                    }
-                    
                     // 准备数据
                     const labels = data.dates || [];
                     const messageData = (data.counts || []).map(count => parseInt(count) || 0);
                     
-                    // 检查Chart是否存在
-                    if (typeof Chart === 'undefined') {
-                        console.error('Chart.js未加载');
-                        this.$message.error('图表库未加载，请检查网络连接');
+                    if (labels.length === 0) {
+                        container.innerHTML = '<div style="text-align: center; padding: 20px;">暂无数据</div>';
                         return;
                     }
                     
-                    // 创建新图表
-                    this.charts.trendChart = new Chart(ctx, {
-                        type: 'line',
-                        data: {
-                            labels: labels,
-                            datasets: [{
-                                label: '消息数量',
-                                data: messageData,
-                                backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                                borderColor: 'rgba(75, 192, 192, 1)',
-                                borderWidth: 2,
-                                tension: 0.3,
-                                fill: true
-                            }]
-                        },
-                        options: {
-                            responsive: true,
-                            maintainAspectRatio: false,
-                            plugins: {
-                                title: {
-                                    display: false
-                                },
-                                tooltip: {
-                                    mode: 'index',
-                                    intersect: false
-                                },
-                                legend: {
-                                    position: 'top',
-                                }
-                            },
-                            scales: {
-                                y: {
-                                    beginAtZero: true,
-                                    title: {
-                                        display: true,
-                                        text: '消息数量'
-                                    }
-                                },
-                                x: {
-                                    ticks: {
-                                        maxRotation: 45,
-                                        minRotation: 45
-                                    }
-                                }
-                            }
-                        }
-                    });
+                    // 创建表格显示数据
+                    let tableHtml = `
+                        <table class="el-table" style="width: 100%;">
+                            <thead>
+                                <tr>
+                                    <th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">日期</th>
+                                    <th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">消息数量</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                    `;
+                    
+                    for (let i = 0; i < labels.length; i++) {
+                        tableHtml += `
+                            <tr>
+                                <td style="padding: 12px 0; text-align: center; border-bottom: 1px solid #ebeef5;">${labels[i]}</td>
+                                <td style="padding: 12px 0; text-align: center; border-bottom: 1px solid #ebeef5;">${messageData[i]}</td>
+                            </tr>
+                        `;
+                    }
+                    
+                    tableHtml += `
+                            </tbody>
+                        </table>
+                    `;
+                    
+                    container.innerHTML = tableHtml;
+                    
+                    // 添加简单的可视化条形图
+                    const maxValue = Math.max(...messageData);
+                    let chartHtml = `
+                        <div style="margin-top: 20px;">
+                            <h4 style="margin: 10px 0;">消息数量可视化</h4>
+                            <div style="display: flex; flex-direction: column; gap: 5px;">
+                    `;
+                    
+                    for (let i = 0; i < labels.length; i++) {
+                        const percentage = (messageData[i] / maxValue) * 100;
+                        chartHtml += `
+                            <div style="display: flex; align-items: center; margin-bottom: 5px;">
+                                <span style="width: 80px; text-align: right; margin-right: 10px;">${labels[i]}</span>
+                                <div style="flex-grow: 1; display: flex; align-items: center;">
+                                    <div style="background-color: rgba(75, 192, 192, 0.7); height: 20px; width: ${percentage}%; min-width: 2px; border-radius: 2px;"></div>
+                                    <span style="margin-left: 10px;">${messageData[i]}</span>
+                                </div>
+                            </div>
+                        `;
+                    }
+                    
+                    chartHtml += `
+                            </div>
+                        </div>
+                    `;
+                    
+                    container.innerHTML += chartHtml;
+                    
                 } catch (error) {
-                    console.error('渲染图表出错:', error);
-                    this.$message.error('渲染图表出错: ' + error.message);
-                    this.trendLoading = false;
+                    console.error('渲染趋势数据出错:', error);
+                    this.$message.error('渲染趋势数据出错: ' + error.message);
                 }
             }
         }