调整趋势图功能,加入了查询数据库,分析群聊聊天数量的功能
This commit is contained in:
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user