完善仪表盘统计
This commit is contained in:
parent
eec987041c
commit
858f7500bd
@ -166,3 +166,30 @@ export function deleteUser(id) {
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*************************************************
|
||||
****************** 仪表盘相关接口 ******************
|
||||
*************************************************/
|
||||
|
||||
/**
|
||||
* 获取用户列表
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function getUserCounts() {
|
||||
return request({
|
||||
url: "/admin/babyhealthDashborad/users",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取宝贝列表
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function getBabyCounts() {
|
||||
return request({
|
||||
url: "/admin/babyhealthDashborad/babys",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
@ -1,114 +1,152 @@
|
||||
<template>
|
||||
<div class="statistics-container">
|
||||
<!-- 第一行：宝贝统计 -->
|
||||
<el-row :gutter="20" class="data-overview">
|
||||
<el-col :span="6" v-for="item in summaryData" :key="item.title">
|
||||
<el-col :span="8" v-for="item in babyData" :key="item.title">
|
||||
<el-card shadow="hover" class="data-card">
|
||||
<div class="card-content">
|
||||
<div class="icon-box" :style="{ backgroundColor: item.color }">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="value">{{ item.value.toLocaleString() }}</div>
|
||||
<div class="trend" :class="item.isUp ? 'up' : 'down'">
|
||||
{{ item.isUp ? '↑' : '↓' }} {{ item.percentage }}%
|
||||
<span>较上月</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="charts-row">
|
||||
<el-col :span="16">
|
||||
<el-card shadow="hover" header="用户增长趋势">
|
||||
<div ref="lineChartRef" class="chart-box"></div>
|
||||
<!-- 第二行：用户统计 -->
|
||||
<el-row :gutter="20" class="data-overview" style="margin-top: 20px;">
|
||||
<el-col :span="8" v-for="item in userData" :key="item.title">
|
||||
<el-card shadow="hover" class="data-card">
|
||||
<div class="card-content">
|
||||
<div class="icon-box" :style="{ backgroundColor: item.color }">
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="value">{{ item.value.toLocaleString() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" header="用户等级分布">
|
||||
<div ref="pieChartRef" class="chart-box"></div>
|
||||
</el-row>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<el-row :gutter="20" class="charts-row" style="margin-top: 20px;">
|
||||
<!-- 宝贝增长趋势柱状图 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" header="宝贝增长趋势">
|
||||
<div ref="babyChartRef" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 用户增长趋势柱状图 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" header="用户增长趋势">
|
||||
<div ref="userChartRef" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { User, Pointer, Connection, Histogram } from '@element-plus/icons-vue';
|
||||
import { getBabyCounts, getUserCounts } from '@/api/babyhealth';
|
||||
|
||||
// --- 类型定义 ---
|
||||
interface SummaryItem {
|
||||
title: string;
|
||||
value: number;
|
||||
icon: any;
|
||||
icon: string;
|
||||
color: string;
|
||||
percentage: number;
|
||||
isUp: boolean;
|
||||
}
|
||||
|
||||
// --- 响应式数据 ---
|
||||
const lineChartRef = ref<HTMLElement | null>(null);
|
||||
const pieChartRef = ref<HTMLElement | null>(null);
|
||||
const lineChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const pieChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const babyChartRef = ref<HTMLElement | null>(null);
|
||||
const userChartRef = ref<HTMLElement | null>(null);
|
||||
const babyChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const userChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
|
||||
const summaryData = ref<SummaryItem[]>([
|
||||
{ title: '总用户数', value: 12840, icon: User, color: '#3973FF', percentage: 12, isUp: true },
|
||||
{ title: '今日新增', value: 156, icon: Pointer, color: '#67C23A', percentage: 5, isUp: true },
|
||||
{ title: '活跃用户', value: 3420, icon: Connection, color: '#E6A23C', percentage: 2, isUp: false },
|
||||
{ title: '留存率', value: 85, icon: Histogram, color: '#F56C6C', percentage: 1, isUp: true },
|
||||
const babyData = ref<SummaryItem[]>([
|
||||
{ title: '总宝贝数', value: 0, icon: 'fa-solid fa-baby', color: '#67C23A', percentage: 0, isUp: false },
|
||||
{ title: '男宝宝数', value: 0, icon: 'fa-solid fa-person', color: '#409EFF', percentage: 0, isUp: false },
|
||||
{ title: '女宝宝数', value: 0, icon: 'fa-solid fa-person-dress', color: '#F56C6C', percentage: 0, isUp: false }
|
||||
]);
|
||||
|
||||
// --- 初始化图表 ---
|
||||
const initCharts = () => {
|
||||
// 折线图配置
|
||||
if (lineChartRef.value) {
|
||||
lineChartInstance.value = echarts.init(lineChartRef.value);
|
||||
lineChartInstance.value.setOption({
|
||||
tooltip: { trigger: 'axis' },
|
||||
const userData = ref<SummaryItem[]>([
|
||||
{ title: '总用户数', value: 0, icon: 'fa-solid fa-users', color: '#3973FF', percentage: 0, isUp: false },
|
||||
{ title: '父亲数', value: 0, icon: 'fa-solid fa-person', color: '#409EFF', percentage: 0, isUp: false },
|
||||
{ title: '母亲数', value: 0, icon: 'fa-solid fa-person-dress', color: '#F56C6C', percentage: 0, isUp: false }
|
||||
]);
|
||||
|
||||
// 调用宝贝统计接口
|
||||
async function fetchGetBabyDatas() {
|
||||
const res = await getBabyCounts();
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
const { total, male, female } = res.data;
|
||||
|
||||
// 更新 babyData
|
||||
babyData.value = [
|
||||
{ title: '总宝贝数', value: total, icon: 'fa-solid fa-baby', color: '#67C23A', percentage: 0, isUp: false },
|
||||
{ title: '男宝宝数', value: male !== undefined ? male : 0, icon: 'fa-solid fa-person', color: '#409EFF', percentage: 0, isUp: false },
|
||||
{ title: '女宝宝数', value: female !== undefined ? female : 0, icon: 'fa-solid fa-person-dress', color: '#F56C6C', percentage: 0, isUp: false }
|
||||
];
|
||||
|
||||
// 更新宝贝柱状图
|
||||
updateBabyChart(total, male, female);
|
||||
}
|
||||
}
|
||||
|
||||
// 调用用户统计接口
|
||||
async function fetchGetUserDatas() {
|
||||
const res = await getUserCounts();
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
const { total, father, mother } = res.data;
|
||||
|
||||
// 更新 userData
|
||||
userData.value = [
|
||||
{ title: '总用户数', value: total, icon: 'fa-solid fa-users', color: '#3973FF', percentage: 0, isUp: false },
|
||||
{ title: '父亲数', value: father !== undefined ? father : 0, icon: 'fa-solid fa-person', color: '#409EFF', percentage: 0, isUp: false },
|
||||
{ title: '母亲数', value: mother !== undefined ? mother : 0, icon: 'fa-solid fa-person-dress', color: '#F56C6C', percentage: 0, isUp: false }
|
||||
];
|
||||
|
||||
// 更新用户柱状图
|
||||
updateUserChart(total, father, mother);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化宝贝柱状图
|
||||
const initBabyChart = () => {
|
||||
if (babyChartRef.value) {
|
||||
babyChartInstance.value = echarts.init(babyChartRef.value);
|
||||
babyChartInstance.value.setOption({
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
data: ['总宝贝数', '男宝宝数', '女宝宝数'],
|
||||
axisTick: { alignWithLabel: true }
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '新增用户',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
areaStyle: { opacity: 0.3 },
|
||||
itemStyle: { color: '#3973FF' }
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// 饼图配置
|
||||
if (pieChartRef.value) {
|
||||
pieChartInstance.value = echarts.init(pieChartRef.value);
|
||||
pieChartInstance.value.setOption({
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: { bottom: '0%', left: 'center' },
|
||||
series: [
|
||||
{
|
||||
name: '等级分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
|
||||
label: { show: false },
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: [
|
||||
{ value: 1048, name: '普通用户' },
|
||||
{ value: 735, name: 'VIP会员' },
|
||||
{ value: 580, name: '超级管理员' },
|
||||
{ value: 484, name: '运营人员' }
|
||||
{ value: 0, itemStyle: { color: '#67C23A' } },
|
||||
{ value: 0, itemStyle: { color: '#409EFF' } },
|
||||
{ value: 0, itemStyle: { color: '#F56C6C' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -116,31 +154,97 @@ const initCharts = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// --- 生命周期与自适应 ---
|
||||
// 初始化用户柱状图
|
||||
const initUserChart = () => {
|
||||
if (userChartRef.value) {
|
||||
userChartInstance.value = echarts.init(userChartRef.value);
|
||||
userChartInstance.value.setOption({
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['总用户数', '父亲数', '母亲数'],
|
||||
axisTick: { alignWithLabel: true }
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: [
|
||||
{ value: 0, itemStyle: { color: '#3973FF' } },
|
||||
{ value: 0, itemStyle: { color: '#409EFF' } },
|
||||
{ value: 0, itemStyle: { color: '#F56C6C' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 更新宝贝柱状图数据
|
||||
const updateBabyChart = (total: number, male: number, female: number) => {
|
||||
if (babyChartInstance.value) {
|
||||
babyChartInstance.value.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: total, itemStyle: { color: '#67C23A' } },
|
||||
{ value: male, itemStyle: { color: '#409EFF' } },
|
||||
{ value: female, itemStyle: { color: '#F56C6C' } }
|
||||
]
|
||||
}]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 更新用户柱状图数据
|
||||
const updateUserChart = (total: number, father: number, mother: number) => {
|
||||
if (userChartInstance.value) {
|
||||
userChartInstance.value.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: total, itemStyle: { color: '#3973FF' } },
|
||||
{ value: father, itemStyle: { color: '#409EFF' } },
|
||||
{ value: mother, itemStyle: { color: '#F56C6C' } }
|
||||
]
|
||||
}]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期与自适应
|
||||
const handleResize = () => {
|
||||
lineChartInstance.value?.resize();
|
||||
pieChartInstance.value?.resize();
|
||||
babyChartInstance.value?.resize();
|
||||
userChartInstance.value?.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initCharts();
|
||||
initBabyChart();
|
||||
initUserChart();
|
||||
fetchGetBabyDatas();
|
||||
fetchGetUserDatas();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
babyChartInstance.value?.dispose();
|
||||
userChartInstance.value?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.statistics-container {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.data-overview {
|
||||
.data-overview {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.data-card {
|
||||
.data-card {
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -156,41 +260,29 @@ onUnmounted(() => {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-box {
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 4px 0;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.trend {
|
||||
font-size: 12px;
|
||||
&.up { color: #67c23a; }
|
||||
&.down { color: #f56c6c; }
|
||||
span { color: #909399; margin-left: 4px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.charts-row {
|
||||
margin-top: 20px;
|
||||
|
||||
.charts-row {
|
||||
.chart-box {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深度修改 Element Plus 卡片头部样式
|
||||
:deep(.el-card__header) {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
</style>
|
||||
@ -106,7 +106,7 @@ import { ElMessage } from "element-plus";
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import type { UploadProps, UploadRequestOptions } from 'element-plus';
|
||||
import { createUser, updateUser, getUserDetail } from "@/api/babyhealth";
|
||||
import { uploadAvatar } from '@/api/upload';
|
||||
import { uploadAvatar } from '@/api/file';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user