调整趋势图功能,加入了查询数据库,分析群聊聊天数量的功能
This commit is contained in:
@@ -141,7 +141,8 @@
|
|||||||
<el-dialog
|
<el-dialog
|
||||||
:title="currentGroupName + ' 消息趋势'"
|
:title="currentGroupName + ' 消息趋势'"
|
||||||
:visible.sync="trendDialogVisible"
|
:visible.sync="trendDialogVisible"
|
||||||
width="70%">
|
width="70%"
|
||||||
|
@opened="onTrendDialogOpened">
|
||||||
<div v-if="trendLoading" style="text-align: center; padding: 20px;">
|
<div v-if="trendLoading" style="text-align: center; padding: 20px;">
|
||||||
<i class="el-icon-loading"></i>
|
<i class="el-icon-loading"></i>
|
||||||
<p>加载中...</p>
|
<p>加载中...</p>
|
||||||
@@ -519,6 +520,11 @@
|
|||||||
this.currentGroupId = group.group_id;
|
this.currentGroupId = group.group_id;
|
||||||
this.currentGroupName = group.group_name || group.group_id;
|
this.currentGroupName = group.group_name || group.group_id;
|
||||||
this.trendDialogVisible = true;
|
this.trendDialogVisible = true;
|
||||||
|
// 不在这里立即加载,而是等对话框打开后再加载
|
||||||
|
},
|
||||||
|
|
||||||
|
// 对话框打开后的回调
|
||||||
|
onTrendDialogOpened() {
|
||||||
this.loadMessageTrend();
|
this.loadMessageTrend();
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -528,11 +534,15 @@
|
|||||||
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) {
|
||||||
|
// 确保DOM已经渲染完成
|
||||||
|
setTimeout(() => {
|
||||||
this.renderTrendChart(response.data.data);
|
this.renderTrendChart(response.data.data);
|
||||||
|
this.trendLoading = false;
|
||||||
|
}, 100);
|
||||||
} else {
|
} else {
|
||||||
this.$message.error('加载消息趋势失败');
|
this.$message.error('加载消息趋势失败');
|
||||||
}
|
|
||||||
this.trendLoading = false;
|
this.trendLoading = false;
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.error('加载消息趋势失败:', error);
|
console.error('加载消息趋势失败:', error);
|
||||||
@@ -542,18 +552,28 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
renderTrendChart(data) {
|
renderTrendChart(data) {
|
||||||
// 确保DOM元素已经渲染
|
try {
|
||||||
this.$nextTick(() => {
|
// 获取canvas元素
|
||||||
|
const canvas = document.getElementById('messageTrendChart');
|
||||||
|
if (!canvas) {
|
||||||
|
console.error('找不到Canvas元素');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
if (!ctx) {
|
||||||
|
console.error('无法获取Canvas上下文');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 如果已有图表,先销毁
|
// 如果已有图表,先销毁
|
||||||
if (this.trendChart) {
|
if (this.trendChart) {
|
||||||
this.trendChart.destroy();
|
this.trendChart.destroy();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取canvas元素
|
|
||||||
const ctx = document.getElementById('messageTrendChart').getContext('2d');
|
|
||||||
|
|
||||||
// 创建新图表
|
// 创建新图表
|
||||||
this.trendChart = new Chart(ctx, {
|
this.trendChart = new Chart(ctx, {
|
||||||
|
// 保持原有配置不变
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: {
|
data: {
|
||||||
labels: data.dates,
|
labels: data.dates,
|
||||||
@@ -600,7 +620,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
} catch (error) {
|
||||||
|
console.error('渲染图表出错:', error);
|
||||||
|
this.$message.error('渲染图表出错: ' + error.message);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user