diff --git a/plugins/stats_dashboard/templates/robot_management.html b/plugins/stats_dashboard/templates/robot_management.html index c4dcbf0..ac6c984 100644 --- a/plugins/stats_dashboard/templates/robot_management.html +++ b/plugins/stats_dashboard/templates/robot_management.html @@ -151,8 +151,57 @@

消息数量趋势

- -
+ +
+ + + + + + + + + + + + + + + + + +
日期消息数量
{{ date }} + {{ trendData.counts[index] }} + ({{ getPercentage(index) }}%) +
+
+
+
总计{{ totalMessages }}
+
+
暂无数据
+ + +
+

统计摘要

+
+
+
总消息数
+
{{ totalMessages }}
+
+
+
日均消息数
+
{{ avgMessages }}
+
+
+
最高消息日
+
{{ maxDay }} ({{ maxMessages }})
+
+
+
最低消息日
+
{{ minDay }} ({{ minMessages }})
+
+
+
@@ -195,7 +244,10 @@ trendDialogVisible: false, trendLoading: false, trendDays: 7, - charts: {} // 使用charts对象存储图表实例 + trendData: { + dates: [], + counts: [] + } } }, computed: { @@ -206,6 +258,30 @@ (group.group_id && group.group_id.toLowerCase().includes(query)) || (group.group_name && group.group_name.toLowerCase().includes(query)) ); + }, + // 计算属性用于趋势数据 + totalMessages() { + return this.trendData.counts.reduce((sum, count) => sum + parseInt(count || 0), 0); + }, + avgMessages() { + return this.trendData.dates.length > 0 ? + (this.totalMessages / this.trendData.dates.length).toFixed(2) : 0; + }, + maxMessages() { + return this.trendData.counts.length > 0 ? + Math.max(...this.trendData.counts.map(c => parseInt(c || 0))) : 0; + }, + minMessages() { + return this.trendData.counts.length > 0 ? + Math.min(...this.trendData.counts.map(c => parseInt(c || 0))) : 0; + }, + maxDay() { + const maxIndex = this.trendData.counts.indexOf(this.maxMessages.toString()); + return maxIndex >= 0 ? this.trendData.dates[maxIndex] : ''; + }, + minDay() { + const minIndex = this.trendData.counts.indexOf(this.minMessages.toString()); + return minIndex >= 0 ? this.trendData.dates[minIndex] : ''; } }, mounted() { @@ -426,8 +502,9 @@ // 对话框打开后的回调 onTrendDialogOpened() { console.log('对话框已打开'); - // 直接加载数据，不使用延迟 - this.loadMessageTrend(); + this.$nextTick(() => { + this.loadMessageTrend(); + }); }, loadMessageTrend() { @@ -436,8 +513,8 @@ axios.get(`/api/robot/group/${this.currentGroupId}/message_trend?days=${this.trendDays}`) .then(response => { if (response.data.success) { - // 直接渲染表格显示数据 - this.renderTrendTable(response.data.data); + // 直接更新数据，让Vue的响应式系统处理渲染 + this.trendData = response.data.data || { dates: [], counts: [] }; this.trendLoading = false; } else { this.$message.error('加载消息趋势失败'); @@ -451,126 +528,14 @@ }); }, - renderTrendTable(data) { - try { - console.log('开始渲染趋势数据'); - - // 获取容器元素 - const container = this.$refs.trendChartContainer; - - if (!container) { - console.error('找不到图表容器'); - this.$message.error('无法找到图表容器，请尝试重新打开对话框'); - return; - } - - // 准备数据 - const labels = data.dates || []; - const messageData = (data.counts || []).map(count => parseInt(count) || 0); - - if (labels.length === 0) { - container.innerHTML = '
暂无数据
'; - return; - } - - // 销毁之前的图表实例（如果存在） - if (this.charts.trendChart) { - this.charts.trendChart.destroy(); - } - - // 创建canvas元素 - container.innerHTML = ''; - const ctx = document.getElementById('messageChart').getContext('2d'); - - // 使用Chart.js创建图表 - this.charts.trendChart = new Chart(ctx, { - type: 'bar', - data: { - labels: labels, - datasets: [{ - label: '消息数量', - data: messageData, - backgroundColor: 'rgba(75, 192, 192, 0.5)', - borderColor: 'rgba(75, 192, 192, 1)', - borderWidth: 1 - }] - }, - options: { - responsive: true, - maintainAspectRatio: false, - scales: { - y: { - beginAtZero: true, - title: { - display: true, - text: '消息数量' - } - }, - x: { - title: { - display: true, - text: '日期' - } - } - }, - plugins: { - title: { - display: true, - text: '群组消息数量趋势', - font: { - size: 16 - } - }, - tooltip: { - callbacks: { - label: function(context) { - return `消息数量: ${context.raw}`; - } - } - } - } - } - }); - - // 添加表格显示详细数据 - let tableHtml = ` -
-

详细数据

- - - - - - - - - `; - - for (let i = 0; i < labels.length; i++) { - tableHtml += ` - - - - - `; - } - - tableHtml += ` - -
日期消息数量
${labels[i]}${messageData[i]}
-
- `; - - // 在图表下方添加表格 - const tableContainer = document.createElement('div'); - tableContainer.innerHTML = tableHtml; - container.parentNode.insertBefore(tableContainer, container.nextSibling); - - } catch (error) { - console.error('渲染趋势数据出错:', error); - this.$message.error('渲染趋势数据出错: ' + error.message); - } + // 计算百分比的方法 + getPercentage(index) { + const count = parseInt(this.trendData.counts[index] || 0); + return this.totalMessages > 0 ? + ((count / this.totalMessages) * 100).toFixed(2) : 0; } + + // ... 保留其他方法 ... } });