45133464ce
变更项： 1. 仅调整首页顶部 Hero 行栅格断点配置，替代固定 span 比例。 2. 当前账号卡片改为 xl=7/lg=9/md~xs=24，右侧指标区改为 xl=17/lg=15/md~xs=24。 3. 保证中等屏和移动端自动上下堆叠，提升这一行的响应式表现。
1265 lines
44 KiB
HTML
1265 lines
44 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}首页概览 - 机器人管理后台{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="dashboard-page">
|
|
<div class="page-title dashboard-title">
|
|
<div class="page-title-main">
|
|
<h1>首页概览</h1>
|
|
<p>聚焦机器人运行状态、关键指标与近期趋势，先看重点，再看明细。</p>
|
|
</div>
|
|
<div class="dashboard-title-actions">
|
|
<div class="live-badge">
|
|
<span class="live-dot"></span>
|
|
<span>实时监控中</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-row :gutter="16" class="hero-row">
|
|
<el-col :xl="7" :lg="9" :md="24" :sm="24" :xs="24">
|
|
<el-card class="hero-card hero-card--profile" shadow="hover">
|
|
<div v-if="currentUser.success" class="hero-profile">
|
|
<div class="hero-profile-top">
|
|
<div class="hero-avatar-wrap">
|
|
<img :src="currentUser.data.avatar" alt="用户头像" class="hero-avatar" />
|
|
</div>
|
|
<div class="hero-profile-copy">
|
|
<div class="hero-eyebrow">当前账号</div>
|
|
<h2>{% raw %}{{ currentUser.data.nickname || '未知用户' }}{% endraw %}</h2>
|
|
<p>{% raw %}{{ currentUser.data.signature || '正在管理机器人后台与系统运行状态。' }}{% endraw %}</p>
|
|
</div>
|
|
</div>
|
|
<div class="hero-profile-meta">
|
|
<div class="meta-item">
|
|
<span class="meta-label">微信 ID</span>
|
|
<span class="meta-value">{% raw %}{{ currentUser.data.wx_id || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="meta-item" v-if="currentUser.data.mobile">
|
|
<span class="meta-label">手机号</span>
|
|
<span class="meta-value">{% raw %}{{ currentUser.data.mobile }}{% endraw %}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">系统运行</span>
|
|
<span class="meta-value">{% raw %}{{ formattedUptime }}{% endraw %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="user-info-empty hero-empty">
|
|
<i class="el-icon-warning-outline"></i>
|
|
<div>{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :xl="17" :lg="15" :md="24" :sm="24" :xs="24">
|
|
<el-row :gutter="16" class="metric-grid">
|
|
<el-col :span="8">
|
|
<el-card class="metric-card metric-card--primary" shadow="hover">
|
|
<div class="metric-label">总调用次数</div>
|
|
<div class="metric-value">{% raw %}{{ totalCalls }}{% endraw %}</div>
|
|
<div class="metric-footnote">统计周期内累计请求量</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="metric-card" shadow="hover">
|
|
<div class="metric-label">成功率</div>
|
|
<div class="metric-value">{% raw %}{{ successRate.toFixed(2) }}{% endraw %}%</div>
|
|
<div class="metric-footnote">请求成功占比</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="metric-card" shadow="hover">
|
|
<div class="metric-label">平均响应时间</div>
|
|
<div class="metric-value">{% raw %}{{ avgResponseTime.toFixed(2) }}{% endraw %}<span class="metric-unit">ms</span></div>
|
|
<div class="metric-footnote">接口平均响应耗时</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="metric-card" shadow="hover">
|
|
<div class="metric-label">活跃用户数</div>
|
|
<div class="metric-value">{% raw %}{{ activeUsers }}{% endraw %}</div>
|
|
<div class="metric-footnote">近期实际触发用户</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="metric-card" shadow="hover">
|
|
<div class="metric-label">活跃群组数</div>
|
|
<div class="metric-value">{% raw %}{{ activeGroups }}{% endraw %}</div>
|
|
<div class="metric-footnote">近期开启互动群组</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="metric-card metric-card--soft" shadow="hover">
|
|
<div class="metric-label">系统运行时间</div>
|
|
<div class="metric-value">{% raw %}{{ formattedUptime }}{% endraw %}</div>
|
|
<div class="metric-footnote">当前实例持续在线时长</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="16" class="metric-extended-row">
|
|
<el-col :span="8">
|
|
<el-card class="metric-card metric-card--soft" shadow="hover">
|
|
<div class="metric-label">新增用户数</div>
|
|
<div class="metric-value">{% raw %}{{ newUsers }}{% endraw %}</div>
|
|
<div class="metric-footnote">统计周期内首次触发用户</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="metric-card" shadow="hover">
|
|
<div class="metric-label">群渗透率</div>
|
|
<div class="metric-value">{% raw %}{{ avgGroupPenetration.toFixed(2) }}{% endraw %}%</div>
|
|
<div class="metric-footnote">活跃群触发人数占成员比例（均值）</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="metric-card metric-card--soft" shadow="hover">
|
|
<div class="metric-label">群健康分</div>
|
|
<div class="metric-value">{% raw %}{{ groupHealthScore.toFixed(2) }}{% endraw %}</div>
|
|
<div class="metric-footnote">综合成功率与响应时延评分</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="16" class="stats-highlight-row">
|
|
<el-col :span="8">
|
|
<el-card class="insight-card" shadow="hover">
|
|
<div class="section-heading">
|
|
<div>
|
|
<h3>热门用户</h3>
|
|
<p>最近最活跃的高频调用用户</p>
|
|
</div>
|
|
</div>
|
|
<el-table :data="topUsers" style="width: 100%">
|
|
<el-table-column label="用户信息" min-width="210">
|
|
<template slot-scope="scope">
|
|
<div class="rank-cell">
|
|
<span class="rank-index">{% raw %}{{ scope.$index + 1 }}{% endraw %}</span>
|
|
<div class="rank-copy">
|
|
<div class="rank-title">{% raw %}{{ scope.row.user_name || scope.row.user_id }}{% endraw %}</div>
|
|
<div class="rank-subtitle">ID: {% raw %}{{ scope.row.user_id }}{% endraw %}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="total_calls" label="调用次数" width="100" align="right"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="insight-card" shadow="hover">
|
|
<div class="section-heading">
|
|
<div>
|
|
<h3>热门群组</h3>
|
|
<p>最近互动最活跃的群组</p>
|
|
</div>
|
|
</div>
|
|
<el-table :data="topGroups" style="width: 100%">
|
|
<el-table-column label="群组信息" min-width="210">
|
|
<template slot-scope="scope">
|
|
<div class="rank-cell">
|
|
<span class="rank-index">{% raw %}{{ scope.$index + 1 }}{% endraw %}</span>
|
|
<div class="rank-copy">
|
|
<div class="rank-title">{% raw %}{{ scope.row.group_name || scope.row.group_id }}{% endraw %}</div>
|
|
<div class="rank-subtitle">ID: {% raw %}{{ scope.row.group_id }}{% endraw %}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="total_calls" label="调用次数" width="100" align="right"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="insight-card" shadow="hover">
|
|
<div class="section-heading">
|
|
<div>
|
|
<h3>热门插件</h3>
|
|
<p>最受欢迎的能力模块</p>
|
|
</div>
|
|
</div>
|
|
<el-table :data="topPlugins" style="width: 100%">
|
|
<el-table-column label="插件名称" min-width="210">
|
|
<template slot-scope="scope">
|
|
<div class="rank-cell rank-cell--simple">
|
|
<span class="rank-index">{% raw %}{{ scope.$index + 1 }}{% endraw %}</span>
|
|
<div class="rank-copy">
|
|
<div class="rank-title">{% raw %}{{ scope.row.plugin_name }}{% endraw %}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="total_calls" label="调用次数" width="100" align="right"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="16" class="chart-row">
|
|
<el-col :span="16">
|
|
<el-card class="chart-card chart-card--large" shadow="hover">
|
|
<div slot="header" class="chart-card-header">
|
|
<div>
|
|
<h3>使用趋势</h3>
|
|
<p>总调用、成功调用、失败调用随时间变化</p>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container chart-container--large">
|
|
<canvas id="trendChart" width="800" height="180"></canvas>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="chart-card" shadow="hover">
|
|
<div slot="header" class="chart-card-header">
|
|
<div>
|
|
<h3>成功率分析</h3>
|
|
<p>插件维度稳定性表现</p>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container chart-container--panel">
|
|
<canvas id="successRateChart"></canvas>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="16" class="chart-row">
|
|
<el-col :span="12">
|
|
<el-card class="chart-card" shadow="hover">
|
|
<div slot="header" class="chart-card-header">
|
|
<div>
|
|
<h3>插件使用排行</h3>
|
|
<p>按调用次数排序的前十插件</p>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container chart-container--panel">
|
|
<canvas id="pluginChart"></canvas>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card class="chart-card" shadow="hover" v-loading="hourlyMessageTrendLoading">
|
|
<div slot="header" class="chart-card-header chart-card-header--split">
|
|
<div>
|
|
<h3>按小时聊天趋势</h3>
|
|
<p>观察群组消息在一天内的分布节奏</p>
|
|
</div>
|
|
<div class="chart-toolbar">
|
|
<el-select v-model="selectedGroupForHourlyTrend" placeholder="选择群组" style="width: 190px;" @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 chart-container--panel">
|
|
<canvas id="hourlyMessageTrendChart" width="800" height="180"></canvas>
|
|
</div>
|
|
</el-card>
|
|
</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,
|
|
newUsers: 0,
|
|
avgResponseTime: 0,
|
|
avgGroupPenetration: 0,
|
|
groupHealthScore: 0,
|
|
topUsers: [],
|
|
topGroups: [],
|
|
topPlugins: [],
|
|
pluginStats: [],
|
|
charts: {},
|
|
currentUser: {
|
|
success: false,
|
|
message: '加载中...',
|
|
data: {}
|
|
},
|
|
systemInfo: {
|
|
os: '加载中...',
|
|
os_version: '',
|
|
python_version: '加载中...',
|
|
cpu_usage: 0,
|
|
memory_usage: 0,
|
|
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
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
formattedUptime() {
|
|
const seconds = this.systemInfo.uptime;
|
|
const days = Math.floor(seconds / 86400);
|
|
const hours = Math.floor((seconds % 86400) / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
|
|
let result = '';
|
|
if (days > 0) result += days + 'D ';
|
|
if (hours > 0 || days > 0) result += hours + 'H ';
|
|
result += minutes + 'M';
|
|
|
|
return result;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.currentView = '1';
|
|
this.loadData();
|
|
this.loadSystemInfo();
|
|
this.loadCurrentUserInfo();
|
|
this.loadGroups();
|
|
this.systemInfoTimer = setInterval(this.loadSystemInfo, 30000);
|
|
},
|
|
beforeDestroy() {
|
|
if (this.systemInfoTimer) {
|
|
clearInterval(this.systemInfoTimer);
|
|
}
|
|
},
|
|
methods: {
|
|
loadData() {
|
|
const days = parseInt(this.timeRange);
|
|
this.loadDashboardSummary(days);
|
|
this.loadPluginStats(days);
|
|
this.loadPluginTrend(days);
|
|
},
|
|
loadSystemInfo() {
|
|
axios.get('/api/system_info')
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.systemInfo = response.data.data;
|
|
this.$nextTick(() => {
|
|
this.renderSystemCharts();
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载系统信息出错:', error);
|
|
});
|
|
},
|
|
renderSystemCharts() {
|
|
this.renderPieChart('cpuChart', this.systemInfo.cpu_usage, 'CPU使用率');
|
|
this.renderPieChart('memoryChart', this.systemInfo.memory_usage, '内存使用率');
|
|
this.renderPieChart('diskChart', this.systemInfo.disk_usage, '磁盘使用率');
|
|
},
|
|
renderPieChart(chartId, usageValue, label) {
|
|
const ctx = document.getElementById(chartId);
|
|
if (!ctx) return;
|
|
const context = ctx.getContext('2d');
|
|
|
|
if (this.charts[chartId]) {
|
|
this.charts[chartId].destroy();
|
|
}
|
|
|
|
let color = 'rgba(16, 185, 129, 1)';
|
|
if (usageValue > 70) {
|
|
color = 'rgba(239, 68, 68, 1)';
|
|
} else if (usageValue > 50) {
|
|
color = 'rgba(245, 158, 11, 1)';
|
|
}
|
|
|
|
this.charts[chartId] = new Chart(context, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['已使用', '可用'],
|
|
datasets: [{
|
|
data: [usageValue, 100 - usageValue],
|
|
backgroundColor: [color, 'rgba(226, 232, 240, 0.85)'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
cutout: '72%',
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.label + ': ' + context.raw + '%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
loadCurrentUserInfo() {
|
|
axios.get('/api/current_user_info')
|
|
.then(response => {
|
|
this.currentUser = response.data;
|
|
})
|
|
.catch(error => {
|
|
console.error('加载当前用户信息出错:', error);
|
|
this.currentUser = {
|
|
success: false,
|
|
message: '获取用户信息失败',
|
|
data: {}
|
|
};
|
|
});
|
|
},
|
|
getProgressStatus(value) {
|
|
if (value > 70) {
|
|
return 'exception';
|
|
} else if (value > 50) {
|
|
return 'warning';
|
|
} else {
|
|
return 'success';
|
|
}
|
|
},
|
|
loadDashboardSummary(days) {
|
|
axios.get(`/api/dashboard_summary?days=${days}`)
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
const data = response.data.data;
|
|
this.totalCalls = parseInt(data.total_calls) || 0;
|
|
this.successRate = parseFloat(data.success_rate) || 0;
|
|
this.activeUsers = data.active_users || 0;
|
|
this.activeGroups = data.active_groups || 0;
|
|
this.newUsers = data.new_users || 0;
|
|
this.avgResponseTime = parseFloat(data.avg_response_time) || 0;
|
|
this.avgGroupPenetration = parseFloat(data.avg_group_penetration) || 0;
|
|
this.groupHealthScore = parseFloat(data.group_health_score) || 0;
|
|
this.topUsers = data.top_users || [];
|
|
this.topGroups = data.top_groups || [];
|
|
this.topPlugins = data.top_plugins || [];
|
|
}
|
|
})
|
|
.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}(${item.command})`);
|
|
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(99, 102, 241, 0.72)',
|
|
borderColor: 'rgba(79, 70, 229, 1)',
|
|
borderRadius: 10,
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false }
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(148, 163, 184, 0.12)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
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}(${item.command})`);
|
|
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(16, 185, 129, 0.74)',
|
|
borderColor: 'rgba(5, 150, 105, 1)',
|
|
borderRadius: 10,
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false }
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
grid: {
|
|
color: 'rgba(148, 163, 184, 0.12)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
renderTrendChart(trendData) {
|
|
const ctx = document.getElementById('trendChart').getContext('2d');
|
|
|
|
if (this.charts && this.charts.trendChart) {
|
|
this.charts.trendChart.destroy();
|
|
}
|
|
|
|
if (!this.charts) {
|
|
this.charts = {};
|
|
}
|
|
|
|
const labels = trendData.map(item => item.date);
|
|
const totalData = trendData.map(item => parseInt(item.total_calls) || 0);
|
|
const successData = trendData.map(item => parseInt(item.success_calls) || 0);
|
|
const errorData = trendData.map(item => parseInt(item.failed_calls) || 0);
|
|
|
|
this.charts.trendChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: '总调用',
|
|
data: totalData,
|
|
fill: false,
|
|
backgroundColor: 'rgba(79, 70, 229, 0.2)',
|
|
borderColor: 'rgba(79, 70, 229, 1)',
|
|
tension: 0.32,
|
|
borderWidth: 3,
|
|
pointRadius: 2
|
|
},
|
|
{
|
|
label: '成功调用',
|
|
data: successData,
|
|
fill: false,
|
|
backgroundColor: 'rgba(16, 185, 129, 0.2)',
|
|
borderColor: 'rgba(16, 185, 129, 1)',
|
|
tension: 0.32,
|
|
borderWidth: 3,
|
|
pointRadius: 2
|
|
},
|
|
{
|
|
label: '失败调用',
|
|
data: errorData,
|
|
fill: false,
|
|
backgroundColor: 'rgba(239, 68, 68, 0.2)',
|
|
borderColor: 'rgba(239, 68, 68, 1)',
|
|
tension: 0.32,
|
|
borderWidth: 3,
|
|
pointRadius: 2
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(148, 163, 184, 0.12)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
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: true,
|
|
backgroundColor: 'rgba(59, 130, 246, 0.10)',
|
|
borderColor: 'rgba(59, 130, 246, 1)',
|
|
tension: 0.32,
|
|
borderWidth: 3,
|
|
pointRadius: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(148, 163, 184, 0.12)'
|
|
}
|
|
},
|
|
x: {
|
|
ticks: {
|
|
maxRotation: 45,
|
|
minRotation: 45
|
|
},
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: `${this.hourlyMessageTrendData.group_name || '未知群组'} 的聊天趋势`
|
|
},
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block styles %}
|
|
<style>
|
|
.dashboard-title {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.dashboard-page .el-row {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.dashboard-page .el-row > .el-col {
|
|
padding-left: 8px !important;
|
|
padding-right: 8px !important;
|
|
}
|
|
|
|
.dashboard-title-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.live-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
|
color: #475569;
|
|
font-size: 13px;
|
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.live-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #10b981;
|
|
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
|
|
}
|
|
|
|
.hero-row,
|
|
.metric-extended-row,
|
|
.stats-highlight-row,
|
|
.chart-row {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.hero-row,
|
|
.stats-highlight-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.hero-row > .el-col,
|
|
.stats-highlight-row > .el-col {
|
|
display: flex;
|
|
}
|
|
|
|
.hero-card {
|
|
min-height: 228px;
|
|
height: 100%;
|
|
}
|
|
|
|
.hero-card--profile {
|
|
background: linear-gradient(145deg, rgba(79,70,229,0.94), rgba(59,130,246,0.82)) !important;
|
|
color: #fff !important;
|
|
border: none !important;
|
|
box-shadow: 0 24px 48px rgba(79, 70, 229, 0.18) !important;
|
|
}
|
|
|
|
.hero-card--profile .el-card__body {
|
|
padding: 22px !important;
|
|
}
|
|
|
|
.hero-profile {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
|
|
.hero-profile-top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 18px;
|
|
}
|
|
|
|
.hero-avatar-wrap {
|
|
width: 76px;
|
|
height: 76px;
|
|
flex-shrink: 0;
|
|
padding: 3px;
|
|
border-radius: 24px;
|
|
background: rgba(255,255,255,0.16);
|
|
}
|
|
|
|
.hero-avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 20px;
|
|
background: rgba(255,255,255,0.22);
|
|
}
|
|
|
|
.hero-profile-copy {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.hero-eyebrow {
|
|
font-size: 12px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
opacity: 0.8;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.hero-profile-copy h2 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: #fff;
|
|
}
|
|
|
|
.hero-profile-copy p {
|
|
color: rgba(255,255,255,0.80);
|
|
line-height: 1.6;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hero-profile-meta {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.meta-item {
|
|
padding: 12px 14px;
|
|
border-radius: 16px;
|
|
background: rgba(255,255,255,0.14);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.meta-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: rgba(255,255,255,0.72);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.meta-value {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.metric-grid .el-col {
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
}
|
|
|
|
.metric-extended-row > .el-col {
|
|
display: flex;
|
|
}
|
|
|
|
.metric-card {
|
|
min-height: 106px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.metric-card .el-card__body {
|
|
padding: 18px !important;
|
|
}
|
|
|
|
.metric-card--primary {
|
|
background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important;
|
|
}
|
|
|
|
.metric-card--soft {
|
|
background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 30px;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.metric-unit {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.metric-footnote {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.insight-card .el-card__body {
|
|
padding-top: 12px !important;
|
|
}
|
|
|
|
.insight-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.section-heading,
|
|
.chart-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.section-heading h3,
|
|
.chart-card-header h3 {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.section-heading p,
|
|
.chart-card-header p {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.chart-card-header--split {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.chart-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.chart-card--large {
|
|
min-height: 390px;
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
background: linear-gradient(180deg, rgba(248,250,252,0.72), rgba(255,255,255,0.96));
|
|
border: 1px solid rgba(148,163,184,0.12);
|
|
border-radius: 18px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.chart-container--large {
|
|
height: 300px;
|
|
}
|
|
|
|
.chart-container--panel {
|
|
height: 300px;
|
|
}
|
|
|
|
.rank-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.rank-index {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(79,70,229,0.10);
|
|
color: #4f46e5;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rank-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.rank-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rank-subtitle {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.hero-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 180px;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
color: rgba(255,255,255,0.85);
|
|
}
|
|
|
|
.hero-empty i {
|
|
font-size: 24px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.hero-row > .el-col,
|
|
.metric-extended-row > .el-col,
|
|
.stats-highlight-row > .el-col,
|
|
.chart-row > .el-col {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.metric-grid > .el-col {
|
|
width: 50% !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.dashboard-title {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.hero-row,
|
|
.metric-extended-row,
|
|
.stats-highlight-row,
|
|
.chart-row {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.hero-profile-top {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.hero-profile-meta {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.chart-card-header,
|
|
.chart-card-header--split,
|
|
.section-heading {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.chart-toolbar {
|
|
width: 100%;
|
|
}
|
|
|
|
.chart-toolbar .el-select {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.metric-grid > .el-col {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard-page {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.dashboard-title {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.page-title-main h1,
|
|
.page-title-main h2 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.page-title-main p {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.live-badge {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero-card,
|
|
.chart-card,
|
|
.insight-card,
|
|
.metric-card {
|
|
min-height: auto;
|
|
}
|
|
|
|
.hero-card--profile .el-card__body,
|
|
.metric-card .el-card__body {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.hero-avatar-wrap {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
.hero-profile-copy h2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.chart-container--large,
|
|
.chart-container--panel {
|
|
height: 260px;
|
|
}
|
|
|
|
.rank-cell {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.rank-title,
|
|
.rank-subtitle {
|
|
white-space: normal;
|
|
}
|
|
|
|
.el-table {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.dashboard-page .el-row > .el-col {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.hero-row,
|
|
.metric-extended-row,
|
|
.stats-highlight-row,
|
|
.chart-row {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.hero-card--profile .el-card__body,
|
|
.metric-card .el-card__body,
|
|
.insight-card .el-card__body {
|
|
padding: 14px !important;
|
|
}
|
|
|
|
.metric-label,
|
|
.metric-footnote,
|
|
.section-heading p,
|
|
.chart-card-header p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.chart-container--large,
|
|
.chart-container--panel {
|
|
height: 220px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|