<template>
|
<div>
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-card class="box-card">
|
<template #header>
|
<div class="card-header">
|
<span>当前进行比赛</span>
|
</div>
|
</template>
|
<div class="text item">
|
{{ stats.activeActivities }}
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="box-card">
|
<template #header>
|
<div class="card-header">
|
<span>参赛总人数</span>
|
</div>
|
</template>
|
<div class="text item">
|
{{ stats.totalPlayers }}
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="box-card">
|
<template #header>
|
<div class="card-header">
|
<span>报名待审核</span>
|
</div>
|
</template>
|
<div class="text item">
|
{{ stats.pendingReviews }}
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="box-card">
|
<template #header>
|
<div class="card-header">
|
<span>评委总数</span>
|
</div>
|
</template>
|
<div class="text item">
|
{{ stats.totalJudges }}
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-card class="box-card" style="margin-top: 20px;">
|
<template #header>
|
<div class="card-header">
|
<span>最近比赛</span>
|
<el-button type="primary" @click="$router.push('/activity')">查看全部</el-button>
|
</div>
|
</template>
|
<el-table :data="recentActivities" style="width: 100%">
|
<el-table-column prop="name" label="比赛名称" width="180" />
|
<el-table-column prop="playerCount" label="报名人数" width="120" />
|
<el-table-column prop="startTime" label="开始时间" width="180" />
|
<el-table-column prop="endTime" label="结束时间" width="180" />
|
<el-table-column prop="status" label="状态" width="100" />
|
<el-table-column label="操作">
|
<template #default="scope">
|
<el-button size="small" @click="viewActivity(scope.row)">查看</el-button>
|
<el-button size="small" type="primary" @click="manageActivity(scope.row)">管理</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import { getDashboardStats } from '@/api/dashboard'
|
import { getActivities } from '@/api/activity'
|
|
const router = useRouter()
|
|
// 统计数据
|
const stats = ref({
|
activeActivities: 0,
|
totalPlayers: 0,
|
pendingReviews: 0,
|
totalJudges: 0
|
})
|
|
// 最近活动数据
|
const recentActivities = ref([])
|
|
// 加载统计数据
|
const loadStats = async () => {
|
try {
|
const data = await getDashboardStats()
|
stats.value = data
|
} catch (error) {
|
console.error('加载统计数据失败:', error)
|
ElMessage.error('加载统计数据失败')
|
}
|
}
|
|
// 加载最近活动
|
const loadRecentActivities = async () => {
|
try {
|
const data = await getActivities(0, 5) // 获取前5条活动
|
recentActivities.value = data.content.map(activity => ({
|
id: activity.id,
|
name: activity.name,
|
playerCount: activity.playerCount || 0,
|
startTime: activity.matchTime || activity.createTime,
|
endTime: activity.endTime || '待定',
|
status: activity.stateName || '未知'
|
}))
|
} catch (error) {
|
console.error('加载最近活动失败:', error)
|
ElMessage.error('加载最近活动失败')
|
}
|
}
|
|
// 页面加载时获取数据
|
onMounted(() => {
|
loadStats()
|
loadRecentActivities()
|
})
|
|
// 查看比赛
|
const viewActivity = (activity: any) => {
|
router.push(`/activity/${activity.id}`)
|
}
|
|
// 管理比赛
|
const manageActivity = (activity: any) => {
|
router.push('/activity')
|
}
|
</script>
|
|
<style scoped>
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.text {
|
font-size: 24px;
|
font-weight: bold;
|
}
|
|
.item {
|
margin-bottom: 18px;
|
}
|
|
.box-card {
|
width: 100%;
|
}
|
</style>
|
