liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
liuwei
2025-03-26 14:21:51 +08:00
parent 82ab98c787
commit 85a88bb79a
1 changed files with 76 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
plugins/stats_dashboard/templates/robot_management.html
View File

@@ -464,9 +464,6 @@
return;
}
// 清空容器
container.innerHTML = '';
// 准备数据
const labels = data.dates || [];
const messageData = (data.counts || []).map(count => parseInt(count) || 0);
@@ -476,16 +473,77 @@
return;
}
// 创建表格显示数据
// 销毁之前的图表实例（如果存在）
if (this.charts.trendChart) {
this.charts.trendChart.destroy();
}
// 创建canvas元素
container.innerHTML = '<canvas id="messageChart" width="100%" height="300"></canvas>';
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 = `
<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>
<div style="margin-top: 20px;">
<h4 style="margin: 10px 0;">详细数据</h4>
<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++) {
@@ -498,39 +556,15 @@
}
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>
</tbody>
</table>
</div>
`;
container.innerHTML += chartHtml;
// 在图表下方添加表格
const tableContainer = document.createElement('div');
tableContainer.innerHTML = tableHtml;
container.parentNode.insertBefore(tableContainer, container.nextSibling);
} catch (error) {
console.error('渲染趋势数据出错:', error);