You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1007 lines
29 KiB
1007 lines
29 KiB
<template>
|
|
<div class="user-overview-container">
|
|
<div class="tab-header">
|
|
<div
|
|
class="tab-item"
|
|
:class="{ active: activeTab === 'overview' }"
|
|
@click="activeTab = 'overview'"
|
|
>
|
|
数据概览
|
|
</div>
|
|
<div
|
|
class="tab-item"
|
|
:class="{ active: activeTab === 'detail' }"
|
|
@click="activeTab = 'detail'"
|
|
>
|
|
数据明细
|
|
</div>
|
|
<div class="tab-note">
|
|
<span class="red-asterisk">*</span> 默认展示截止到今日的数据
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据概览 -->
|
|
<div v-show="activeTab === 'overview'" class="tab-content overview-content">
|
|
<div class="stats-row">
|
|
<!-- 用户总数和登录总数 -->
|
|
<div class="stat-card purple-gradient big-card">
|
|
<div class="card-title">
|
|
<el-icon><UserFilled /></el-icon> 用户注册总数
|
|
</div>
|
|
<div class="big-card-content">
|
|
<div class="card-value">{{ overviewData.total }}</div>
|
|
<div class="card-tag" :class="getGrowthClass(overviewData.total_growth)">
|
|
{{ getGrowthText(overviewData.total_growth) }}
|
|
</div>
|
|
</div>
|
|
<div class="card-title">
|
|
<el-icon><View /></el-icon> 用户登录总数
|
|
</div>
|
|
<div class="big-card-content">
|
|
<div class="card-value">{{ overviewData.total_login }}</div>
|
|
<div class="card-tag" :class="getGrowthClass(overviewData.total_login_growth)">
|
|
{{ getGrowthText(overviewData.total_login_growth) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-stats-grid">
|
|
<!-- 会员总数 -->
|
|
<div class="stat-card orange-gradient small-card">
|
|
<div class="small-card-content">
|
|
<div class="card-title">
|
|
<el-icon><Trophy /></el-icon> 会员登录总数
|
|
</div>
|
|
<div class="card-value-small">{{ overviewData.member }}</div>
|
|
<div class="card-tag-wrapper">
|
|
<div class="card-tag" :class="getGrowthClass(overviewData.member_growth)">
|
|
{{ getGrowthText(overviewData.member_growth) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 游客总数 -->
|
|
<div class="stat-card purple-gradient small-card">
|
|
<div class="small-card-content">
|
|
<div class="card-title">
|
|
<el-icon><User /></el-icon> 游客总数
|
|
</div>
|
|
<div class="card-value-small">{{ overviewData.visitor }}</div>
|
|
<div class="card-tag-wrapper">
|
|
<div class="card-tag" :class="getGrowthClass(overviewData.vistor_growth)">
|
|
{{ getGrowthText(overviewData.vistor_growth) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 非网注册和登录总数 -->
|
|
<div class="stat-card blue-gradient small-card full-width">
|
|
<div class="small-card-row">
|
|
<!-- 非网注册总数 -->
|
|
<div class="small-card-item">
|
|
<div class="card-title">
|
|
<el-icon><User /></el-icon> 非网注册总数
|
|
</div>
|
|
<div class="card-value-small">{{ overviewData.normal_register }}</div>
|
|
<div class="card-tag-wrapper">
|
|
<div class="card-tag" :class="getGrowthClass(overviewData.normal_reg_growth)">
|
|
{{ getGrowthText(overviewData.normal_reg_growth) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 非网登录总数 -->
|
|
<div class="small-card-item">
|
|
<div class="card-title">
|
|
<el-icon><View /></el-icon> 非网登录总数
|
|
</div>
|
|
<div class="card-value-small">{{ overviewData.normal_login }}</div>
|
|
<div class="card-tag-wrapper">
|
|
<div class="card-tag" :class="getGrowthClass(overviewData.normal_login_growth)">
|
|
{{ getGrowthText(overviewData.normal_login_growth) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 登录用户构成比例 -->
|
|
<div class="composition-section">
|
|
<div class="section-header">
|
|
<el-icon><PieChart /></el-icon> 登录用户构成比例
|
|
</div>
|
|
<div class="charts-row">
|
|
<div class="chart-wrapper">
|
|
<div ref="chartMemberRef" class="chart-box"></div>
|
|
<div class="legend-custom">
|
|
<div class="legend-item"><span class="dot green"></span>会员用户</div>
|
|
<div class="legend-item"><span class="dot red"></span>非会员用户</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<div ref="chartNewOldRef" class="chart-box"></div>
|
|
<div class="legend-custom">
|
|
<div class="legend-item"><span class="dot green"></span>会员用户</div>
|
|
<div class="legend-item"><span class="dot red"></span>新非网数量</div>
|
|
<div class="legend-item"><span class="dot blue"></span>老非网数量</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据明细 -->
|
|
<div v-show="activeTab === 'detail'" class="tab-content detail-content" v-loading="loading" element-loading-text="数据加载中...">
|
|
<!-- 搜索栏 -->
|
|
<div class="search-bar">
|
|
<div class="search-label">时间段查询</div>
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
size="default"
|
|
/>
|
|
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
|
<el-button type="primary" class="reset-btn" @click="handleReset">重置</el-button>
|
|
<el-button type="danger" class="export-btn" @click="handleExport">数据导出</el-button>
|
|
</div>
|
|
|
|
<!-- 表格1: 用户构成明细 -->
|
|
<div class="detail-section">
|
|
<div class="section-title"><el-icon><User /></el-icon> 用户构成明细</div>
|
|
<el-table :data="tableData1" style="width: 100%" :header-cell-style="headerCellStyle">
|
|
<el-table-column prop="type" label="用户类型" width="180" align="center">
|
|
<template #default="scope">
|
|
<span :class="{
|
|
'text-red': scope.row.type === '用户总数',
|
|
'text-black-bold': ['会员总数', '非会员总数'].includes(scope.row.type),
|
|
'sub-item-text': ['新非网总数', '老非网总数'].includes(scope.row.type)
|
|
}">{{ scope.row.type }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="total" label="当前总数" align="center" />
|
|
<el-table-column prop="dailyNew" label="较昨日新增" align="center">
|
|
<template #default="scope">
|
|
<span :class="getValueColorClass(scope.row.dailyNew)">{{ scope.row.dailyNew }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="weeklyNew" label="较上周新增" align="center">
|
|
<template #default="scope">
|
|
<span :class="getValueColorClass(scope.row.weeklyNew)">{{ scope.row.weeklyNew }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="monthlyNew" label="较上月新增" align="center">
|
|
<template #default="scope">
|
|
<span :class="getValueColorClass(scope.row.monthlyNew)">{{ scope.row.monthlyNew }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="periodNew" label="时间段新增" align="center">
|
|
<template #default="scope">
|
|
<span :class="getValueColorClass(scope.row.periodNew)">{{ scope.row.periodNew }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<!-- 表格2: 新注册用户来源 -->
|
|
<div class="detail-section">
|
|
<div class="section-title"><el-icon><User /></el-icon> 新非网注册数据</div>
|
|
<el-table :data="tableData2" style="width: 100%" :header-cell-style="headerCellStyle">
|
|
<el-table-column prop="channel" label="来源渠道" align="center" />
|
|
<el-table-column prop="dailyNew" label="今日新增" align="center" />
|
|
<el-table-column prop="weeklyNew" label="本周新增" align="center" />
|
|
<el-table-column prop="monthlyNew" label="本月新增" align="center" />
|
|
<el-table-column prop="periodNew" label="时间段新增" align="center" />
|
|
<el-table-column prop="percent" label="占比" align="center" />
|
|
</el-table>
|
|
</div>
|
|
|
|
<!-- 表格3: 老用户来源 -->
|
|
<div class="detail-section">
|
|
<div class="section-title"><el-icon><User /></el-icon>老非网登录数据</div>
|
|
<el-table :data="tableData3" style="width: 100%" :header-cell-style="headerCellStyle">
|
|
<el-table-column prop="channel" label="来源渠道" align="center" />
|
|
<el-table-column prop="dailyNew" label="今日新增" align="center" />
|
|
<el-table-column prop="weeklyNew" label="本周新增" align="center" />
|
|
<el-table-column prop="monthlyNew" label="本月新增" align="center" />
|
|
<el-table-column prop="periodNew" label="时间段新增" align="center" />
|
|
<el-table-column prop="percent" label="占比" align="center" />
|
|
</el-table>
|
|
</div>
|
|
|
|
<!-- 图表: 用户来源渠道分布 -->
|
|
<div class="detail-section chart-section-bg">
|
|
<div class="section-title"><el-icon><PieChart /></el-icon> 用户来源渠道分布（总数据）</div>
|
|
<div ref="chartBarRef" class="bar-chart-box"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 悬浮刷新时间 -->
|
|
<div class="refresh-time" v-if="lastUpdateTime">
|
|
数据刷新时间：{{ lastUpdateTime }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, nextTick, watch, computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import * as echarts from 'echarts';
|
|
import { getUserOverviewList, getUserFullReportList, exportUserFullReport } from '../../api/platformData';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const activeTab = ref(route.query.tab || 'overview');
|
|
const dateRange = ref('');
|
|
const loading = ref(false);
|
|
const lastUpdateTime = ref('');
|
|
|
|
const hasDateRange = computed(() => {
|
|
return dateRange.value && dateRange.value.length === 2;
|
|
});
|
|
|
|
const chartMemberRef = ref(null);
|
|
const chartNewOldRef = ref(null);
|
|
const chartBarRef = ref(null);
|
|
let chartBarInstance = null;
|
|
|
|
const overviewData = ref({
|
|
total: 0,
|
|
total_growth: '0%',
|
|
total_login: 0,
|
|
total_login_growth: '0%',
|
|
member: 0,
|
|
member_growth: '0%',
|
|
visitor: 0,
|
|
vistor_growth: '0%',
|
|
normal_register: 0,
|
|
normal_reg_growth: '0%',
|
|
normal_login: 0,
|
|
normal_login_growth: '0%',
|
|
group_member_normal: {
|
|
member_val: 0,
|
|
normal_login_val: 0
|
|
},
|
|
group_triple: {
|
|
member_val: 0,
|
|
new_normal_login_val: 0,
|
|
old_normal_val: 0
|
|
}
|
|
});
|
|
|
|
// 表格数据 - 使用 ref 响应式数据
|
|
const tableData1 = ref([]);
|
|
const tableData2 = ref([]);
|
|
const tableData3 = ref([]);
|
|
|
|
const headerCellStyle = {
|
|
background: '#fff0f0',
|
|
color: '#333',
|
|
fontWeight: 'bold'
|
|
};
|
|
|
|
// 获取增长率的样式类
|
|
const getGrowthClass = (growthStr) => {
|
|
if (!growthStr) return '';
|
|
return growthStr.startsWith('-') ? 'down' : 'up';
|
|
};
|
|
|
|
// 获取增长率的显示文本（添加箭头）
|
|
const getGrowthText = (growthStr) => {
|
|
if (!growthStr) return '';
|
|
const isDown = growthStr.startsWith('-');
|
|
const arrow = isDown ? '↓' : '↑';
|
|
const prefix = isDown ? '较昨日减少' : '较昨日增加';
|
|
// 移除可能存在的负号，因为箭头已经表示了方向
|
|
const value = growthStr.replace('-', '');
|
|
return `${prefix}${arrow} ${value}`;
|
|
};
|
|
|
|
// 获取表格数值颜色样式
|
|
const getValueColorClass = (val) => {
|
|
if (!val || val === '-') return '';
|
|
return String(val).startsWith('-') ? 'text-red' : 'text-green';
|
|
};
|
|
|
|
// 格式化日期
|
|
const formatDate = (date) => {
|
|
if (!date) return '';
|
|
const d = new Date(date);
|
|
const pad = (n) => n < 10 ? '0' + n : n;
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
|
|
};
|
|
|
|
const isOverviewLoaded = ref(false);
|
|
const isDetailLoaded = ref(false);
|
|
|
|
const chartMemberInstance = ref(null);
|
|
const chartNewOldInstance = ref(null);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const res = await getUserOverviewList();
|
|
console.log("获取用户概览数据响应完成：",res);
|
|
// 根据用户反馈，响应拦截器直接返回data部分，不再包含code
|
|
if (res && res.list) {
|
|
overviewData.value = res.list;
|
|
initCharts();
|
|
isOverviewLoaded.value = true;
|
|
lastUpdateTime.value = formatDate(new Date());
|
|
}
|
|
} catch (error) {
|
|
console.error('获取用户概览数据失败:', error);
|
|
}
|
|
};
|
|
|
|
const fetchDetailData = async (forceUpdate = false) => {
|
|
// 决定是否显示加载状态：首次加载或强制更新时显示
|
|
const shouldShowLoading = !isDetailLoaded.value || forceUpdate;
|
|
|
|
if (shouldShowLoading) {
|
|
loading.value = true;
|
|
}
|
|
|
|
let params = {};
|
|
if (dateRange.value && dateRange.value.length === 2) {
|
|
params.start_time = formatDate(dateRange.value[0]);
|
|
params.end_time = formatDate(dateRange.value[1]);
|
|
}
|
|
|
|
// Check if range search is active
|
|
const isRangeSearch = !!(params.start_time && params.end_time);
|
|
|
|
try {
|
|
const res = await getUserFullReportList(params);
|
|
console.log("获取数据明细响应:", res);
|
|
|
|
// 兼容处理：如果拦截器返回了data，则直接使用res；如果没拦截，使用res.data
|
|
const data = res.composition ? res : (res.data ? res.data : null);
|
|
|
|
if (data) {
|
|
// Map Table 1
|
|
if (data.composition) {
|
|
tableData1.value = data.composition.map(item => ({
|
|
type: item.label,
|
|
total: item.total.toLocaleString(),
|
|
dailyNew: isRangeSearch ? '-' : (item.growth_day > 0 ? '+' + item.growth_day : item.growth_day),
|
|
weeklyNew: isRangeSearch ? '-' : (item.growth_week > 0 ? '+' + item.growth_week : item.growth_week),
|
|
monthlyNew: isRangeSearch ? '-' : (item.growth_month > 0 ? '+' + item.growth_month : item.growth_month),
|
|
periodNew: !isRangeSearch ? '-' : item.growth_range
|
|
}));
|
|
}
|
|
|
|
// Map Table 2
|
|
if (data.new_source) {
|
|
tableData2.value = data.new_source.map(item => ({
|
|
channel: item.channel,
|
|
dailyNew: isRangeSearch ? '-' : item.today_add,
|
|
weeklyNew: isRangeSearch ? '-' : (item.week_add > 0 ? '+' + item.week_add : item.week_add),
|
|
monthlyNew: isRangeSearch ? '-' : (item.month_add > 0 ? '+' + item.month_add : item.month_add),
|
|
periodNew: !isRangeSearch ? '-' : item.range_add,
|
|
percent: item.rate
|
|
}));
|
|
}
|
|
|
|
// Map Table 3
|
|
if (data.old_source) {
|
|
tableData3.value = data.old_source.map(item => ({
|
|
channel: item.channel,
|
|
dailyNew: isRangeSearch ? '-' : item.today_add,
|
|
weeklyNew: isRangeSearch ? '-' : (item.week_add > 0 ? '+' + item.week_add : item.week_add),
|
|
monthlyNew: isRangeSearch ? '-' : (item.month_add > 0 ? '+' + item.month_add : item.month_add),
|
|
periodNew: !isRangeSearch ? '-' : item.range_add,
|
|
percent: item.rate
|
|
}));
|
|
}
|
|
|
|
// Chart Data
|
|
if (data.chart) {
|
|
nextTick(() => {
|
|
updateBarChart(data.chart, data.new_source || [], data.old_source || []);
|
|
});
|
|
}
|
|
|
|
isDetailLoaded.value = true;
|
|
lastUpdateTime.value = formatDate(new Date());
|
|
}
|
|
} catch(e) {
|
|
console.error('获取数据明细失败:', e);
|
|
} finally {
|
|
if (shouldShowLoading) {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
fetchDetailData(true);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
dateRange.value = '';
|
|
fetchDetailData(true);
|
|
};
|
|
|
|
const handleExport = async () => {
|
|
loading.value = true;
|
|
let params = {};
|
|
if (dateRange.value && dateRange.value.length === 2) {
|
|
params.start_time = formatDate(dateRange.value[0]);
|
|
params.end_time = formatDate(dateRange.value[1]);
|
|
}
|
|
|
|
try {
|
|
const res = await exportUserFullReport(params);
|
|
// Blob 处理
|
|
const blob = new Blob([res]);
|
|
const fileName = '用户数据明细.pdf';
|
|
const link = document.createElement('a');
|
|
link.href = window.URL.createObjectURL(blob);
|
|
link.download = fileName;
|
|
link.click();
|
|
window.URL.revokeObjectURL(link.href);
|
|
ElMessage.success('导出成功');
|
|
} catch (e) {
|
|
console.error('导出失败:', e);
|
|
ElMessage.error('导出失败');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const initCharts = () => {
|
|
if (activeTab.value === 'overview') {
|
|
nextTick(() => {
|
|
// Chart 1: 会员/非会员
|
|
if (chartMemberRef.value) {
|
|
let chart1 = chartMemberInstance.value;
|
|
if (!chart1) {
|
|
chart1 = echarts.init(chartMemberRef.value);
|
|
chartMemberInstance.value = chart1;
|
|
}
|
|
chart1.setOption({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
color: ['#ff4d4f', '#52c41a'],
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
label: { show: false },
|
|
data: [
|
|
{ value: overviewData.value.group_member_normal.normal_login_val, name: '非会员用户' },
|
|
{ value: overviewData.value.group_member_normal.member_val, name: '会员用户' }
|
|
]
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
// Chart 2: 三色环形图
|
|
if (chartNewOldRef.value) {
|
|
let chart2 = chartNewOldInstance.value;
|
|
if (!chart2) {
|
|
chart2 = echarts.init(chartNewOldRef.value);
|
|
chartNewOldInstance.value = chart2;
|
|
}
|
|
chart2.setOption({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
color: ['#ff4d4f', '#52c41a', '#409eff'], // 红 绿 蓝
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
label: { show: false },
|
|
data: [
|
|
{ value: overviewData.value.group_triple.new_normal_login_val, name: '新非网数量' },
|
|
{ value: overviewData.value.group_triple.member_val, name: '会员用户' },
|
|
{ value: overviewData.value.group_triple.old_normal_val, name: '老非网数量' }
|
|
]
|
|
}
|
|
]
|
|
});
|
|
}
|
|
});
|
|
} else if (activeTab.value === 'detail') {
|
|
// 这里的初始化主要用于空状态或第一次渲染，数据更新由 updateBarChart 处理
|
|
// 如果没有数据，可以不初始化，或者初始化为空
|
|
// fetchDetailData 会被调用并初始化图表
|
|
}
|
|
};
|
|
|
|
const updateBarChart = (chartData, newSources, oldSources) => {
|
|
if (!chartBarRef.value) return;
|
|
|
|
if (!chartBarInstance) {
|
|
chartBarInstance = echarts.init(chartBarRef.value);
|
|
}
|
|
|
|
const xAxisData = chartData.x_axis || [];
|
|
const yAxisData = chartData.y_axis || [];
|
|
|
|
// 分离新老用户数据
|
|
const newUserData = [];
|
|
const oldUserData = [];
|
|
|
|
// 提取渠道名称用于匹配
|
|
const newSourceChannels = newSources.map(s => s.channel);
|
|
|
|
xAxisData.forEach((label, index) => {
|
|
const val = yAxisData[index] || 0;
|
|
if (newSourceChannels.includes(label)) {
|
|
newUserData.push(val);
|
|
oldUserData.push(0);
|
|
} else {
|
|
newUserData.push(0);
|
|
oldUserData.push(val);
|
|
}
|
|
});
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
data: ['新用户', '老用户'],
|
|
top: 'top',
|
|
left: 'center'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: xAxisData,
|
|
axisTick: { alignWithLabel: true }
|
|
}
|
|
],
|
|
yAxis: [
|
|
{ type: 'value' }
|
|
],
|
|
series: [
|
|
{
|
|
name: '新用户',
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
color: '#40a9ff',
|
|
data: newUserData,
|
|
stack: 'total'
|
|
},
|
|
{
|
|
name: '老用户',
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
color: '#92CB74',
|
|
data: oldUserData,
|
|
stack: 'total'
|
|
}
|
|
]
|
|
};
|
|
|
|
chartBarInstance.setOption(option);
|
|
};
|
|
|
|
watch(activeTab, (newVal) => {
|
|
// 同步 tab 状态到 URL
|
|
router.replace({ query: { ...route.query, tab: newVal } });
|
|
if (newVal === 'overview') {
|
|
fetchData();
|
|
} else if (newVal === 'detail') {
|
|
fetchDetailData();
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (activeTab.value === 'overview') {
|
|
fetchData();
|
|
} else {
|
|
fetchDetailData();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-overview-container {
|
|
background-color: #fee6e6;
|
|
}
|
|
|
|
/* Tabs */
|
|
.tab-header {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
}
|
|
.tab-item {
|
|
padding: 6px 16px;
|
|
margin-right: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #ffcccc;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: #ff4d4f;
|
|
font-size: 14px;
|
|
}
|
|
.tab-item.active {
|
|
background-color: #ff4d4f;
|
|
color: #fff;
|
|
}
|
|
|
|
.tab-note {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.red-asterisk {
|
|
color: #ff4d4f;
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* Overview Tab */
|
|
.stats-row {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.big-card {
|
|
flex: 1;
|
|
height: auto;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between; /* 空间分布 */
|
|
color: #fff;
|
|
position: relative; /* 确保绝对定位相对于卡片 */
|
|
}
|
|
.purple-gradient {
|
|
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
|
|
}
|
|
.orange-gradient {
|
|
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
|
|
background: linear-gradient(to right, #ffafbd, #ffc3a0); /* approximate orange */
|
|
background: linear-gradient(90deg, #ff8c6d 0%, #ffcba4 100%);
|
|
}
|
|
.blue-gradient {
|
|
background: linear-gradient(135deg, #9BB7FC 0%, #66a6ff 100%);
|
|
}
|
|
|
|
.right-stats-grid {
|
|
flex: 2;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto auto;
|
|
gap: 20px;
|
|
}
|
|
|
|
.right-stats-grid .full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.right-stats-grid .small-card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.right-stats-grid .small-card-content .card-title {
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.right-stats-grid .small-card-content .card-value-small {
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
.small-card {
|
|
flex: 1;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
color: #fff;
|
|
position: relative; /* 确保绝对定位相对于卡片 */
|
|
}
|
|
|
|
.small-card-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
}
|
|
|
|
.small-card-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.small-card-item:first-child {
|
|
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.small-card-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.small-card-content:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.left-part {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: flex-start; /* 标题垂直居上 */
|
|
}
|
|
|
|
.right-part {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* 改为水平居中 */
|
|
justify-content: center;
|
|
margin-right: 150px; /* 右边容器向左移 */
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 34px; /* 字体放大 */
|
|
font-weight: bold; /* 加粗 */
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 20px; /* 增加底部间距 */
|
|
width: 100%; /* 占满宽度 */
|
|
}
|
|
|
|
.small-card .card-title {
|
|
width: auto;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.small-card-item .card-title {
|
|
font-size: 24px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.small-card-item .card-value-small {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 64px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
.big-card-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px; /* 数字和百分比之间的间距 */
|
|
}
|
|
.card-value-small {
|
|
font-size: 64px;
|
|
font-weight: bold;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.small-card .card-value-small {
|
|
margin-left: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.top-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.card-tag-wrapper {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.small-card .card-tag-wrapper {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.small-card-item .card-tag-wrapper {
|
|
margin-top: 8px;
|
|
}
|
|
.card-tag {
|
|
background-color: #fff;
|
|
padding: 8px 16px; /* 增加高度 */
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
}
|
|
.big-card .card-tag {
|
|
font-size: 18px;
|
|
}
|
|
.card-tag.up {
|
|
color: #52c41a;
|
|
}
|
|
.card-tag.down {
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
/* Composition Section */
|
|
.composition-section {
|
|
background: linear-gradient(135deg, #b8c6db 0%, #f5f7fa 100%);
|
|
background-color: #b8c4f9; /* Fallback */
|
|
background: linear-gradient(to right, #a18cd1, #c2e9fb);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
/* background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); */
|
|
background: #a3b1ff; /* approximate purple-ish */
|
|
}
|
|
.section-header {
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.charts-row {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
.chart-wrapper {
|
|
flex: 1;
|
|
background: #e6e9f5;
|
|
border-radius: 12px;
|
|
border: 2px solid #fff;
|
|
height: 220px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
.chart-box {
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
.legend-custom {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-width: 120px;
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
.dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.dot.green { background-color: #52c41a; }
|
|
.dot.red { background-color: #ff4d4f; }
|
|
.dot.blue { background-color: #409eff; }
|
|
|
|
/* Detail Tab */
|
|
.search-bar {
|
|
background: #fff;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid #f0f0f0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
.search-label {
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
}
|
|
.search-btn, .reset-btn {
|
|
width: 80px;
|
|
}
|
|
.search-btn {
|
|
background-color: #409eff;
|
|
}
|
|
.reset-btn {
|
|
background-color: #409eff;
|
|
border-color: #409eff;
|
|
}
|
|
.export-btn {
|
|
margin-left: auto;
|
|
background-color: #ff7875;
|
|
border-color: #ff7875;
|
|
}
|
|
|
|
.detail-section {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid #f0f0f0;
|
|
}
|
|
.section-title {
|
|
color: #409eff;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.text-red { color: #ff4d4f; font-weight: bold; }
|
|
.text-green { color: #52c41a; font-weight: bold; }
|
|
.text-black-bold { color: #333; font-weight: bold; }
|
|
|
|
.sub-item-text {
|
|
font-size: 12px;
|
|
padding-left: 20px;
|
|
color: #606266;
|
|
display: inline-block;
|
|
}
|
|
|
|
.chart-section-bg {
|
|
/* background: #fff; already set by detail-section */
|
|
}
|
|
.bar-chart-box {
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
|
|
.refresh-time {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: #fff;
|
|
padding: 8px 15px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
z-index: 2000;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|