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-05-29 09:03:48 +08:00
parent 3c08352dd9
commit b93d217101
3 changed files with 192 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
admin/dashboard/templates/index.html
View File

@@ -143,6 +143,29 @@
</el-col>
</el-row>
<!-- 添加一个新行用于显示按小时聊天趋势图 -->
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="24">
<el-card shadow="hover" v-loading="hourlyMessageTrendLoading">
<div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
<span>按小时聊天趋势</span>
<div style="display: flex; align-items: center;">
<el-select v-model="selectedGroupForHourlyTrend" placeholder="选择群组" style="width: 200px; margin-right: 10px;" @change="loadHourlyMessageTrend">
<el-option v-for="group in groups" :key="group.group_id" :label="group.group_name" :value="group.group_id"></el-option>
</el-select>
<el-select v-model="hourlyTrendDays" placeholder="选择时间范围" style="width: 120px;" @change="loadHourlyMessageTrend">
<el-option :value="1" label="最近1天"></el-option>
<el-option :value="2" label="最近2天"></el-option>
<el-option :value="3" label="最近3天"></el-option>
</el-select>
</div>
</div>
<div class="chart-container">
<canvas id="hourlyMessageTrendChart" height="200"></canvas>
</div>
</el-card>
</el-col>
</el-row>
<!-- 系统状态卡片移到顶部 -->
<el-row :gutter="20">
<el-col :span="24">
@@ -261,6 +284,23 @@
disk_usage: 0,
uptime: 0,
timestamp: '-'
},
groups: [],
selectedGroupForHourlyTrend: '',
hourlyTrendDays: 1,
hourlyMessageTrendData: {
hours: [],
counts: []
},
hourlyMessageTrendLoading: true,
charts: {
pluginChart: null,
successRateChart: null,
trendChart: null,
cpuChart: null,
memoryChart: null,
diskChart: null,
hourlyMessageTrendChart: null // 添加这一行
}
}
},
@@ -287,6 +327,7 @@
this.loadSystemInfo();
// 加载当前用户信息
this.loadCurrentUserInfo();
this.loadGroups(); // 添加这一行
// 设置定时刷新系统信息（每30秒）
this.systemInfoTimer = setInterval(this.loadSystemInfo, 30000);
},
@@ -598,6 +639,87 @@
}
}
});
},
loadGroups() {
axios.get('/api/groups')
.then(response => {
if (response.data && response.data.groups) {
this.groups = response.data.groups;
if (this.groups.length > 0) {
this.selectedGroupForHourlyTrend = this.groups[0].group_id;
this.loadHourlyMessageTrend();
}
}
})
.catch(error => {
console.error('加载群组列表失败:', error);
this.$message.error('加载群组列表失败');
});
},
loadHourlyMessageTrend() {
if (!this.selectedGroupForHourlyTrend) return;
this.hourlyMessageTrendLoading = true;
axios.get('/api/hourly_message_trend', {
params: {
group_id: this.selectedGroupForHourlyTrend,
days: this.hourlyTrendDays
}
})
.then(response => {
if (response.data && response.data.success) {
this.hourlyMessageTrendData = response.data.data;
this.$nextTick(() => {
this.renderHourlyMessageTrendChart();
});
} else {
this.$message.error(response.data.error || '加载按小时聊天趋势数据失败');
}
this.hourlyMessageTrendLoading = false;
})
.catch(error => {
console.error('加载按小时聊天趋势数据失败:', error);
this.$message.error('加载按小时聊天趋势数据失败');
this.hourlyMessageTrendLoading = false;
});
},
renderHourlyMessageTrendChart() {
const ctx = document.getElementById('hourlyMessageTrendChart').getContext('2d');
// 销毁旧图表
if (this.charts.hourlyMessageTrendChart) {
this.charts.hourlyMessageTrendChart.destroy();
}
// 创建新图表
this.charts.hourlyMessageTrendChart = new Chart(ctx, {
type: 'line',
data: {
labels: this.hourlyMessageTrendData.hours,
datasets: [{
label: '消息数量',
data: this.hourlyMessageTrendData.counts,
fill: false,
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
},
plugins: {
title: {
display: true,
text: `${this.hourlyMessageTrendData.group_name || '未知群组'} 的聊天趋势`
}
}
}
});
}
}
});