477 lines
15 KiB
Vue
477 lines
15 KiB
Vue
<template>
|
||
<div class="statistics-dashboard">
|
||
<!-- 顶部操作栏 -->
|
||
<div class="toolbar">
|
||
<div class="toolbar-left">
|
||
<span class="toolbar-label">统计区间：</span>
|
||
<el-radio-group v-model="selectedRange" size="default" @change="onRangeChange">
|
||
<el-radio-button value="today">今日</el-radio-button>
|
||
<el-radio-button value="week">本周</el-radio-button>
|
||
<el-radio-button value="month">本月</el-radio-button>
|
||
<el-radio-button value="last30">近30天</el-radio-button>
|
||
<el-radio-button value="last90">近90天</el-radio-button>
|
||
<el-radio-button value="year">今年</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="toolbar-right">
|
||
<el-button
|
||
type="primary"
|
||
:icon="Download"
|
||
:loading="exporting"
|
||
@click="handleExport"
|
||
>
|
||
导出报表
|
||
</el-button>
|
||
<span class="generated-hint" v-if="generatedAt">
|
||
数据更新时间：{{ generatedAt }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-loading="loading" class="dashboard-content">
|
||
<!-- ========== 总览统计卡片 ========== -->
|
||
<el-row :gutter="16" class="stat-cards-row">
|
||
<el-col :xs="12" :sm="6">
|
||
<el-card shadow="hover" class="stat-card stat-card--primary">
|
||
<div class="stat-card__label">会员总数</div>
|
||
<div class="stat-card__value">{{ summary?.memberStatistics?.totalMembers ?? '-' }}</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="12" :sm="6">
|
||
<el-card shadow="hover" class="stat-card stat-card--success">
|
||
<div class="stat-card__label">活跃会员</div>
|
||
<div class="stat-card__value">{{ summary?.memberStatistics?.activeMembers ?? '-' }}</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="12" :sm="6">
|
||
<el-card shadow="hover" class="stat-card stat-card--warning">
|
||
<div class="stat-card__label">预约总数</div>
|
||
<div class="stat-card__value">{{ summary?.bookingStatistics?.newBookings ?? '-' }}</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="12" :sm="6">
|
||
<el-card shadow="hover" class="stat-card stat-card--danger">
|
||
<div class="stat-card__label">教练违规</div>
|
||
<div class="stat-card__value">{{ summary?.coachStatistics?.totalViolations ?? '-' }}</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- ========== 会员统计明细 ========== -->
|
||
<el-card class="section-card">
|
||
<template #header>
|
||
<span class="section-title">会员统计</span>
|
||
</template>
|
||
<el-row :gutter="20">
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">新增会员</span>
|
||
<span class="metric-value">{{ summary?.memberStatistics?.newMembers ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">签到会员</span>
|
||
<span class="metric-value">{{ summary?.memberStatistics?.signInMembers ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">预约会员</span>
|
||
<span class="metric-value">{{ summary?.memberStatistics?.bookingMembers ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">取消预约</span>
|
||
<span class="metric-value">{{ summary?.memberStatistics?.cancelBookingMembers ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">活跃会员</span>
|
||
<span class="metric-value">{{ summary?.memberStatistics?.activeMembers ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- ========== 预约统计明细 ========== -->
|
||
<el-card class="section-card">
|
||
<template #header>
|
||
<span class="section-title">预约统计</span>
|
||
</template>
|
||
<el-row :gutter="20">
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">总预约</span>
|
||
<span class="metric-value">{{ summary?.bookingStatistics?.newBookings ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">已签到</span>
|
||
<span class="metric-value">{{ summary?.bookingStatistics?.attendBookings ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">已取消</span>
|
||
<span class="metric-value">{{ summary?.bookingStatistics?.cancelBookings ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">缺席</span>
|
||
<span class="metric-value">{{ summary?.bookingStatistics?.absentBookings ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="16" :sm="8">
|
||
<div class="rate-group">
|
||
<div class="rate-item">
|
||
<span class="rate-label">出勤率</span>
|
||
<el-progress
|
||
:percentage="Number(summary?.bookingStatistics?.attendanceRate ?? 0)"
|
||
:stroke-width="12"
|
||
:color="rateColor(summary?.bookingStatistics?.attendanceRate)"
|
||
/>
|
||
</div>
|
||
<div class="rate-item">
|
||
<span class="rate-label">取消率</span>
|
||
<el-progress
|
||
:percentage="Number(summary?.bookingStatistics?.cancelRate ?? 0)"
|
||
:stroke-width="12"
|
||
:color="rateColor(summary?.bookingStatistics?.cancelRate, true)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- ========== 签到统计明细 ========== -->
|
||
<el-card class="section-card">
|
||
<template #header>
|
||
<span class="section-title">签到统计</span>
|
||
</template>
|
||
<el-row :gutter="20">
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">总签到</span>
|
||
<span class="metric-value">{{ summary?.signInStatistics?.totalSignIns ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">成功</span>
|
||
<span class="metric-value">{{ summary?.signInStatistics?.successSignIns ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">失败</span>
|
||
<span class="metric-value">{{ summary?.signInStatistics?.failedSignIns ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12">
|
||
<div class="rate-group">
|
||
<div class="rate-item">
|
||
<span class="rate-label">成功率</span>
|
||
<el-progress
|
||
:percentage="Number(summary?.signInStatistics?.successRate ?? 0)"
|
||
:stroke-width="12"
|
||
color="#67c23a"
|
||
/>
|
||
</div>
|
||
<div class="signin-type-row">
|
||
<el-tag type="primary" size="small">扫码: {{ summary?.signInStatistics?.qrCodeSignIns ?? 0 }}</el-tag>
|
||
<el-tag type="warning" size="small">手动: {{ summary?.signInStatistics?.manualSignIns ?? 0 }}</el-tag>
|
||
<el-tag type="success" size="small">人脸: {{ summary?.signInStatistics?.faceSignIns ?? 0 }}</el-tag>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- ========== 教练统计明细 ========== -->
|
||
<el-card class="section-card">
|
||
<template #header>
|
||
<span class="section-title">教练统计</span>
|
||
</template>
|
||
<el-row :gutter="20">
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">教练总数</span>
|
||
<span class="metric-value">{{ summary?.coachStatistics?.totalCoaches ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">违规教练</span>
|
||
<span class="metric-value" :class="{ 'metric-value--danger': (summary?.coachStatistics?.violatedCoaches ?? 0) > 0 }">
|
||
{{ summary?.coachStatistics?.violatedCoaches ?? '-' }}
|
||
</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">开课总数</span>
|
||
<span class="metric-value">{{ summary?.coachStatistics?.totalCourses ?? '-' }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">迟到</span>
|
||
<span class="metric-value" :class="{ 'metric-value--warn': (summary?.coachStatistics?.lateCount ?? 0) > 0 }">
|
||
{{ summary?.coachStatistics?.lateCount ?? '-' }}
|
||
</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">缺席</span>
|
||
<span class="metric-value" :class="{ 'metric-value--danger': (summary?.coachStatistics?.absentCount ?? 0) > 0 }">
|
||
{{ summary?.coachStatistics?.absentCount ?? '-' }}
|
||
</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :sm="4">
|
||
<div class="metric-item">
|
||
<span class="metric-label">未手动结课</span>
|
||
<span class="metric-value" :class="{ 'metric-value--warn': (summary?.coachStatistics?.notManualEndCount ?? 0) > 0 }">
|
||
{{ summary?.coachStatistics?.notManualEndCount ?? '-' }}
|
||
</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted } from 'vue'
|
||
import { Download } from '@element-plus/icons-vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { statisticsApi, type StatisticsSummary } from '@/api/statistics.api'
|
||
|
||
// ---- 时间区间映射 ----
|
||
const RANGE_MAP: Record<string, { periodType: string }> = {
|
||
today: { periodType: 'DAY' },
|
||
week: { periodType: 'WEEK' },
|
||
month: { periodType: 'MONTH' },
|
||
last30: { periodType: 'LAST_30_DAYS' },
|
||
last90: { periodType: 'LAST_90_DAYS' },
|
||
year: { periodType: 'YEAR' },
|
||
}
|
||
|
||
const loading = ref(false)
|
||
const exporting = ref(false)
|
||
const summary = ref<StatisticsSummary>()
|
||
const generatedAt = ref('')
|
||
const selectedRange = ref('today')
|
||
|
||
const rateColor = (rate: number | undefined, inverse = false) => {
|
||
const val = Number(rate ?? 0)
|
||
if (inverse) {
|
||
if (val <= 20) return '#67c23a'
|
||
if (val <= 50) return '#e6a23c'
|
||
return '#f56c6c'
|
||
}
|
||
if (val >= 80) return '#67c23a'
|
||
if (val >= 50) return '#e6a23c'
|
||
return '#f56c6c'
|
||
}
|
||
|
||
const getQueryParams = () => {
|
||
const config = RANGE_MAP[selectedRange.value]
|
||
if (!config) return {}
|
||
return { periodType: config.periodType }
|
||
}
|
||
|
||
const fetchSummary = async () => {
|
||
loading.value = true
|
||
try {
|
||
const data = await statisticsApi.getSummary(getQueryParams())
|
||
summary.value = data
|
||
if (data?.generatedAt) {
|
||
generatedAt.value = new Date(data.generatedAt).toLocaleString()
|
||
}
|
||
} catch (e: any) {
|
||
ElMessage.error(e?.response?.data?.message || e?.message || '获取统计数据失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
const onRangeChange = () => {
|
||
fetchSummary()
|
||
}
|
||
|
||
const handleExport = async () => {
|
||
exporting.value = true
|
||
try {
|
||
const blob: any = await statisticsApi.exportStatistics(getQueryParams())
|
||
const url = URL.createObjectURL(blob instanceof Blob ? blob : new Blob([blob]))
|
||
const link = document.createElement('a')
|
||
link.href = url
|
||
const label = selectedRange.value === 'today' ? '今日' :
|
||
selectedRange.value === 'week' ? '本周' :
|
||
selectedRange.value === 'month' ? '本月' :
|
||
selectedRange.value === 'last30' ? '近30天' :
|
||
selectedRange.value === 'last90' ? '近90天' : '今年'
|
||
link.download = `statistics_${label}_${new Date().toISOString().slice(0, 10)}.xlsx`
|
||
link.click()
|
||
URL.revokeObjectURL(url)
|
||
ElMessage.success('导出成功')
|
||
} catch (e: any) {
|
||
ElMessage.error(e?.response?.data?.message || e?.message || '导出失败')
|
||
} finally {
|
||
exporting.value = false
|
||
}
|
||
}
|
||
|
||
let statsTimer: ReturnType<typeof setInterval> | null = null
|
||
|
||
onMounted(() => {
|
||
fetchSummary()
|
||
statsTimer = setInterval(() => {
|
||
fetchSummary()
|
||
}, 60_000)
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
if (statsTimer !== null) {
|
||
clearInterval(statsTimer)
|
||
statsTimer = null
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.statistics-dashboard {
|
||
padding: 16px;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.toolbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.toolbar-label {
|
||
color: #606266;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.toolbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.generated-hint {
|
||
color: #909399;
|
||
font-size: 13px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dashboard-content {
|
||
min-height: 400px;
|
||
}
|
||
|
||
/* ---- 统计卡片 ---- */
|
||
.stat-cards-row {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.stat-card {
|
||
text-align: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.stat-card__label {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-card__value {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.stat-card--primary .stat-card__value { color: #409eff; }
|
||
.stat-card--success .stat-card__value { color: #67c23a; }
|
||
.stat-card--warning .stat-card__value { color: #e6a23c; }
|
||
.stat-card--info .stat-card__value { color: #909399; }
|
||
.stat-card--danger .stat-card__value { color: #f56c6c; }
|
||
|
||
/* ---- 明细分区 ---- */
|
||
.section-card {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.metric-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 13px;
|
||
color: #909399;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
|
||
.metric-value--warn {
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.metric-value--danger {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.rate-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.rate-item .rate-label {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.signin-type-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 4px;
|
||
flex-wrap: wrap;
|
||
}
|
||
</style>
|