822 lines
33 KiB
HTML
822 lines
33 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}首页概览 - 机器人管理后台{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- 首页概览 -->
|
|
<div>
|
|
<!-- 用户信息和统计数据 -->
|
|
<el-row :gutter="12" style="margin-top: 12px;">
|
|
<el-col :span="6">
|
|
<el-card shadow="hover">
|
|
<div v-if="currentUser.success" class="user-info-container">
|
|
<el-row :gutter="8">
|
|
<el-col :span="6">
|
|
<div class="user-avatar-column">
|
|
<div class="user-avatar-container">
|
|
<img :src="currentUser.data.avatar" alt="用户头像" style="width: 100%; height: 100%;" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<div class="user-info-column">
|
|
<div class="user-info-item">
|
|
<span class="user-info-label">昵称:</span>
|
|
<span class="user-info-value">{% raw %}{{ currentUser.data.nickname || '未知用户' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="user-info-item">
|
|
<span class="user-info-label">微信ID:</span>
|
|
<span class="user-info-value">{% raw %}{{ currentUser.data.wx_id }}{% endraw %}</span>
|
|
</div>
|
|
<div class="user-info-item" v-if="currentUser.data.mobile">
|
|
<span class="user-info-label">手机号:</span>
|
|
<span class="user-info-value">{% raw %}{{ currentUser.data.mobile }}{% endraw %}</span>
|
|
</div>
|
|
<div class="user-info-item" v-if="currentUser.data.signature">
|
|
<span class="user-info-label">签名:</span>
|
|
<span class="user-info-value">{% raw %}{{ currentUser.data.signature }}{% endraw %}</span>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div v-else class="user-info-empty">
|
|
<i class="el-icon-warning"></i>
|
|
<div>{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>总调用次数</span>
|
|
</div>
|
|
<div style="font-size: 20px; text-align: center;">
|
|
{% raw %}{{ totalCalls }}{% endraw %}
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>成功率</span>
|
|
</div>
|
|
<div style="font-size: 20px; text-align: center;">
|
|
{% raw %}{{ successRate.toFixed(2) }}{% endraw %}%
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>活跃用户数</span>
|
|
</div>
|
|
<div style="font-size: 20px; text-align: center;">
|
|
{% raw %}{{ activeUsers }}{% endraw %}
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>活跃群组数</span>
|
|
</div>
|
|
<div style="font-size: 20px; text-align: center;">
|
|
{% raw %}{{ activeGroups }}{% endraw %}
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>平均响应时间</span>
|
|
</div>
|
|
<div style="font-size: 20px; text-align: center;">
|
|
{% raw %}{{ avgResponseTime.toFixed(2) }}{% endraw %} ms
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<div slot="header">
|
|
<span>系统运行时间</span>
|
|
</div>
|
|
<div style="font-size: 20px; text-align: center;">
|
|
{% raw %}{{ formattedUptime }}{% endraw %}
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 添加热门用户、群组和插件 -->
|
|
<el-row :gutter="12" style="margin-top: 12px;">
|
|
<el-col :span="8">
|
|
<el-card shadow="hover">
|
|
<div slot="header">
|
|
<h3>热门用户</h3>
|
|
</div>
|
|
<el-table :data="topUsers" style="width: 100%">
|
|
<!-- 修改：将用户ID改为用户信息，使用固定像素宽度 -->
|
|
<el-table-column label="用户信息" min-width="180">
|
|
<template slot-scope="scope">
|
|
{% raw %}{{ scope.row.user_name || scope.row.user_id }} ({{ scope.row.user_id }}){% endraw %}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="total_calls" label="调用次数" width="80" align="center"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card shadow="hover">
|
|
<div slot="header">
|
|
<h3>热门群组</h3>
|
|
</div>
|
|
<el-table :data="topGroups" style="width: 100%">
|
|
<!-- 修改：将群组ID改为群组信息，使用固定像素宽度 -->
|
|
<el-table-column label="群组信息" min-width="180">
|
|
<template slot-scope="scope">
|
|
{% raw %}{{ scope.row.group_name || scope.row.group_id }} ({{ scope.row.group_id }}){% endraw %}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="total_calls" label="调用次数" width="80" align="center"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card shadow="hover">
|
|
<div slot="header">
|
|
<h3>热门插件</h3>
|
|
</div>
|
|
<el-table :data="topPlugins" style="width: 100%">
|
|
<el-table-column prop="plugin_name" label="插件名称" min-width="180"></el-table-column>
|
|
<el-table-column prop="total_calls" label="调用次数" width="80" align="center"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="12" style="margin-top: 12px;">
|
|
<el-col :span="12">
|
|
<el-card shadow="hover">
|
|
<div slot="header">
|
|
<h3>插件使用排行</h3>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="pluginChart"></canvas>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card shadow="hover">
|
|
<div slot="header">
|
|
<h3>成功率分析</h3>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="successRateChart"></canvas>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="12" style="margin-top: 12px;">
|
|
<el-col :span="24">
|
|
<el-card shadow="hover">
|
|
<div slot="header">
|
|
<h3>使用趋势</h3>
|
|
</div>
|
|
<div class="chart-container" style="height: 300px;">
|
|
<canvas id="trendChart" width="800" height="150"></canvas>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 添加一个新行用于显示按小时聊天趋势图 -->
|
|
<el-row :gutter="12" style="margin-top: 12px;">
|
|
<el-col :span="24">
|
|
<el-card shadow="hover" v-loading="hourlyMessageTrendLoading">
|
|
<div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
|
|
<h3>按小时聊天趋势</h3>
|
|
<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" style="height: 300px;">
|
|
<canvas id="hourlyMessageTrendChart" width="800" height="150"></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,
|
|
avgResponseTime: 0, // 确保这里初始化为数字
|
|
topUsers: [],
|
|
topGroups: [],
|
|
topPlugins: [],
|
|
pluginStats: [],
|
|
charts: {}, // 添加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(); // 添加这一行
|
|
// 设置定时刷新系统信息（每30秒）
|
|
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() {
|
|
// 渲染CPU使用率饼图
|
|
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).getContext('2d');
|
|
|
|
// 销毁旧图表
|
|
if (this.charts[chartId]) {
|
|
this.charts[chartId].destroy();
|
|
}
|
|
|
|
// 设置颜色
|
|
let color = 'rgba(75, 192, 192, 1)'; // 绿色 (低负载)
|
|
if (usageValue > 70) {
|
|
color = 'rgba(255, 99, 132, 1)'; // 红色 (高负载)
|
|
} else if (usageValue > 50) {
|
|
color = 'rgba(255, 205, 86, 1)'; // 黄色 (中等负载)
|
|
}
|
|
|
|
// 创建新图表
|
|
this.charts[chartId] = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['已使用', '可用'],
|
|
datasets: [{
|
|
data: [usageValue, 100 - usageValue],
|
|
backgroundColor: [
|
|
color,
|
|
'rgba(220, 220, 220, 0.6)'
|
|
],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
cutout: '70%',
|
|
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.avgResponseTime = parseFloat(data.avg_response_time) || 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(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}(${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(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 && this.charts.trendChart) {
|
|
this.charts.trendChart.destroy();
|
|
}
|
|
|
|
// 确保charts对象存在
|
|
if (!this.charts) {
|
|
this.charts = {};
|
|
}
|
|
|
|
// 准备数据 - 修改字段名匹配和数据类型转换
|
|
const labels = trendData.map(item => item.date); // 使用date而不是stat_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); // 使用failed_calls而不是error_calls
|
|
|
|
console.log('处理后的趋势数据:', { labels, totalData, successData, errorData });
|
|
|
|
// 创建新图表
|
|
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,
|
|
maintainAspectRatio: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
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,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
},
|
|
x: {
|
|
ticks: {
|
|
maxRotation: 45,
|
|
minRotation: 45
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: `${this.hourlyMessageTrendData.group_name || '未知群组'} 的聊天趋势`
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block styles %}
|
|
<style>
|
|
/* 基础卡片样式 */
|
|
.stats-card {
|
|
margin-bottom: 10px;
|
|
height: 100px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #f9fbff;
|
|
border: 1px solid #d6e6ff;
|
|
box-shadow: 0 6px 16px rgba(11, 29, 51, 0.06);
|
|
}
|
|
.stats-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: 2px;
|
|
background: #5bd3ff;
|
|
box-shadow: 0 0 10px rgba(91, 211, 255, 0.5);
|
|
}
|
|
|
|
.chart-container {
|
|
margin-bottom: 12px;
|
|
padding: 8px;
|
|
background-color: #f7faff;
|
|
border-radius: 4px;
|
|
border: 1px solid #d6e6ff;
|
|
box-shadow: 0 6px 16px rgba(11, 29, 51, 0.06);
|
|
}
|
|
|
|
.chart-container h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 6px;
|
|
font-size: 14px;
|
|
color: #2a3b55;
|
|
}
|
|
|
|
/* 用户信息卡片样式 */
|
|
.user-info-container {
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.user-avatar-column {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.user-avatar-container {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 163, 255, 0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.user-avatar-container img {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.user-info-column {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.user-info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.user-info-label {
|
|
color: #6b86a8;
|
|
width: 45px;
|
|
flex-shrink: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.user-info-value {
|
|
color: #24344c;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.user-info-empty {
|
|
text-align: center;
|
|
color: #7a94b8;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
/* 首页卡片统一冷色面板感 */
|
|
.content .el-card {
|
|
background: #f9fbff;
|
|
border: 1px solid #d6e6ff;
|
|
box-shadow: 0 6px 16px rgba(11, 29, 51, 0.06);
|
|
}
|
|
.content .el-card__header {
|
|
background: #f2f7ff;
|
|
border-bottom: 1px solid #d6e6ff;
|
|
color: #2a3b55;
|
|
}
|
|
.content .el-card__body {
|
|
padding: 10px !important;
|
|
}
|
|
|
|
</style>
|
|
{% endblock %}
|