285 lines
11 KiB
HTML
285 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}首页概览 - 机器人统计看板{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- 首页概览 -->
|
|
<div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>总调用次数</span>
|
|
</div>
|
|
<div style="font-size: 24px; text-align: center;">
|
|
{{ totalCalls }}
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>成功率</span>
|
|
</div>
|
|
<div style="font-size: 24px; text-align: center;">
|
|
{{ successRate }}%
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>活跃用户数</span>
|
|
</div>
|
|
<div style="font-size: 24px; text-align: center;">
|
|
{{ activeUsers }}
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>活跃群组数</span>
|
|
</div>
|
|
<div style="font-size: 24px; text-align: center;">
|
|
{{ activeGroups }}
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<div class="chart-container">
|
|
<h3>插件使用排行</h3>
|
|
<canvas id="pluginChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="chart-container">
|
|
<h3>成功率分析</h3>
|
|
<canvas id="successRateChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<div class="chart-container">
|
|
<h3>使用趋势</h3>
|
|
<canvas id="trendChart" width="800" height="300"></canvas>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
mixins: [baseApp],
|
|
data() {
|
|
return {
|
|
totalCalls: 0,
|
|
successRate: 0,
|
|
activeUsers: 0,
|
|
activeGroups: 0,
|
|
pluginStats: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.currentView = '1';
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
loadData() {
|
|
const days = parseInt(this.timeRange);
|
|
this.loadDashboardSummary(days);
|
|
this.loadPluginStats(days);
|
|
this.loadPluginTrend(days);
|
|
},
|
|
loadDashboardSummary(days) {
|
|
axios.get(`/api/dashboard_summary?days=${days}`)
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
const data = response.data.data;
|
|
this.totalCalls = data.total_calls || 0;
|
|
this.successRate = data.success_rate || 0;
|
|
this.activeUsers = data.active_users || 0;
|
|
this.activeGroups = data.active_groups || 0;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载仪表盘摘要数据出错:', error);
|
|
this.$message.error('加载仪表盘摘要数据出错');
|
|
});
|
|
},
|
|
loadPluginStats(days) {
|
|
axios.get(`/api/plugin_stats?days=${days}`)
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.pluginStats = response.data.data || [];
|
|
this.$nextTick(() => {
|
|
this.renderPluginChart();
|
|
this.renderSuccessRateChart();
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载插件统计数据出错:', error);
|
|
this.$message.error('加载插件统计数据出错');
|
|
});
|
|
},
|
|
loadPluginTrend(days) {
|
|
axios.get(`/api/plugin_trend?days=${days}`)
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
const trendData = response.data.data || [];
|
|
this.$nextTick(() => {
|
|
this.renderTrendChart(trendData);
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载插件趋势数据出错:', error);
|
|
this.$message.error('加载插件趋势数据出错');
|
|
});
|
|
},
|
|
renderPluginChart() {
|
|
const ctx = document.getElementById('pluginChart').getContext('2d');
|
|
|
|
// 销毁旧图表
|
|
if (this.charts.pluginChart) {
|
|
this.charts.pluginChart.destroy();
|
|
}
|
|
|
|
// 准备数据
|
|
const sortedData = [...this.pluginStats].sort((a, b) => b.total_calls - a.total_calls).slice(0, 10);
|
|
const labels = sortedData.map(item => item.plugin_name);
|
|
const data = sortedData.map(item => item.total_calls);
|
|
|
|
// 创建新图表
|
|
this.charts.pluginChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: '调用次数',
|
|
data: data,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.6)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
renderSuccessRateChart() {
|
|
const ctx = document.getElementById('successRateChart').getContext('2d');
|
|
|
|
// 销毁旧图表
|
|
if (this.charts.successRateChart) {
|
|
this.charts.successRateChart.destroy();
|
|
}
|
|
|
|
// 准备数据
|
|
const sortedData = [...this.pluginStats]
|
|
.filter(item => item.total_calls > 0)
|
|
.sort((a, b) => (b.success_calls / b.total_calls) - (a.success_calls / a.total_calls))
|
|
.slice(0, 10);
|
|
|
|
const labels = sortedData.map(item => item.plugin_name);
|
|
const data = sortedData.map(item => (item.success_calls / item.total_calls) * 100);
|
|
|
|
// 创建新图表
|
|
this.charts.successRateChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: '成功率 (%)',
|
|
data: data,
|
|
backgroundColor: 'rgba(75, 192, 192, 0.6)',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
renderTrendChart(trendData) {
|
|
const ctx = document.getElementById('trendChart').getContext('2d');
|
|
|
|
// 销毁旧图表
|
|
if (this.charts.trendChart) {
|
|
this.charts.trendChart.destroy();
|
|
}
|
|
|
|
// 准备数据
|
|
const labels = trendData.map(item => item.stat_date);
|
|
const totalData = trendData.map(item => item.total_calls);
|
|
const successData = trendData.map(item => item.success_calls);
|
|
const errorData = trendData.map(item => item.error_calls);
|
|
|
|
// 创建新图表
|
|
this.charts.trendChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: '总调用',
|
|
data: totalData,
|
|
fill: false,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.6)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
tension: 0.1
|
|
},
|
|
{
|
|
label: '成功调用',
|
|
data: successData,
|
|
fill: false,
|
|
backgroundColor: 'rgba(75, 192, 192, 0.6)',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
tension: 0.1
|
|
},
|
|
{
|
|
label: '失败调用',
|
|
data: errorData,
|
|
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
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |