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

This commit is contained in:
liuwei
2025-03-26 14:11:16 +08:00
parent 857c50426d
commit 9c7a8e80f4

View File

@@ -151,8 +151,8 @@
<div v-else> <div v-else>
<div class="chart-container"> <div class="chart-container">
<h3>消息数量趋势</h3> <h3>消息数量趋势</h3>
<!-- 使用唯一ID --> <!-- 使用固定ID -->
<div :id="'chart-container-' + currentGroupId" style="width: 100%; height: 300px;"></div> <div id="message-trend-chart-container" style="width: 100%; height: 300px;"></div>
</div> </div>
<div style="margin-top: 20px; text-align: center;"> <div style="margin-top: 20px; text-align: center;">
<el-radio-group v-model="trendDays" @change="loadMessageTrend"> <el-radio-group v-model="trendDays" @change="loadMessageTrend">
@@ -425,7 +425,11 @@
// 对话框打开后的回调 // 对话框打开后的回调
onTrendDialogOpened() { onTrendDialogOpened() {
this.loadMessageTrend(); console.log('对话框已打开');
// 延迟加载确保DOM已渲染
setTimeout(() => {
this.loadMessageTrend();
}, 100);
}, },
loadMessageTrend() { loadMessageTrend() {
@@ -434,11 +438,11 @@
axios.get(`/api/robot/group/${this.currentGroupId}/message_trend?days=${this.trendDays}`) axios.get(`/api/robot/group/${this.currentGroupId}/message_trend?days=${this.trendDays}`)
.then(response => { .then(response => {
if (response.data.success) { if (response.data.success) {
// 使用setTimeout确保DOM已完全渲染 // 增加延迟时间
setTimeout(() => { setTimeout(() => {
this.renderTrendChart(response.data.data); this.renderTrendChart(response.data.data);
this.trendLoading = false; this.trendLoading = false;
}, 300); }, 500); // 增加到500毫秒
} else { } else {
this.$message.error('加载消息趋势失败'); this.$message.error('加载消息趋势失败');
this.trendLoading = false; this.trendLoading = false;
@@ -455,13 +459,11 @@
try { try {
console.log('开始渲染图表'); console.log('开始渲染图表');
// 使用唯一ID获取容器元素 // 使用固定ID获取容器元素
const containerId = 'chart-container-' + this.currentGroupId; const container = document.getElementById('message-trend-chart-container');
console.log('尝试获取图表容器ID:', containerId);
const container = document.getElementById(containerId);
if (!container) { if (!container) {
console.error('找不到图表容器ID:', containerId); console.error('找不到图表容器ID: message-trend-chart-container');
this.$message.error('无法找到图表容器,请尝试重新打开对话框'); this.$message.error('无法找到图表容器,请尝试重新打开对话框');
return; return;
} }
@@ -494,6 +496,13 @@
const labels = data.dates || []; const labels = data.dates || [];
const messageData = (data.counts || []).map(count => parseInt(count) || 0); const messageData = (data.counts || []).map(count => parseInt(count) || 0);
// 检查Chart是否存在
if (typeof Chart === 'undefined') {
console.error('Chart.js未加载');
this.$message.error('图表库未加载,请检查网络连接');
return;
}
// 创建新图表 // 创建新图表
this.charts.trendChart = new Chart(ctx, { this.charts.trendChart = new Chart(ctx, {
type: 'line', type: 'line',