<template>
|
<div class="dashboard">
|
<!-- 数据统计卡片 -->
|
<el-row :gutter="20" class="stats-row">
|
<el-col :span="6">
|
<div class="stat-card">
|
<div class="stat-icon">
|
<el-icon color="#409eff"><Trophy /></el-icon>
|
</div>
|
<div class="stat-content">
|
<div class="stat-number">{{ stats.activeActivities }}</div>
|
<div class="stat-label">当前进行比赛</div>
|
</div>
|
</div>
|
</el-col>
|
|
<el-col :span="6">
|
<div class="stat-card">
|
<div class="stat-icon">
|
<el-icon color="#67c23a"><UserFilled /></el-icon>
|
</div>
|
<div class="stat-content">
|
<div class="stat-number">{{ stats.totalPlayers }}</div>
|
<div class="stat-label">参赛总人数</div>
|
</div>
|
</div>
|
</el-col>
|
|
<el-col :span="6">
|
<div class="stat-card">
|
<div class="stat-icon">
|
<el-icon color="#e6a23c"><Clock /></el-icon>
|
</div>
|
<div class="stat-content">
|
<div class="stat-number">{{ stats.pendingReviews }}</div>
|
<div class="stat-label">报名待审核</div>
|
</div>
|
</div>
|
</el-col>
|
|
<el-col :span="6">
|
<div class="stat-card">
|
<div class="stat-icon">
|
<el-icon color="#f56c6c"><User /></el-icon>
|
</div>
|
<div class="stat-content">
|
<div class="stat-number">{{ stats.totalJudges }}</div>
|
<div class="stat-label">评委总数</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
|
<!-- 最近活动 -->
|
<div class="page-card">
|
<h3 class="card-title">最近比赛</h3>
|
<el-table :data="recentActivities" style="width: 100%">
|
<el-table-column prop="name" label="比赛名称" />
|
<el-table-column prop="playerCount" label="报名人数" width="120" />
|
<el-table-column prop="startTime" label="比赛时间" width="180" />
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="{ row }">
|
<el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150">
|
<template #default="{ row }">
|
<el-button type="primary" size="small" @click="viewActivity(row)">查看</el-button>
|
<el-button type="success" size="small" @click="manageActivity(row)">管理</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import { Trophy, UserFilled, Clock, User } from '@element-plus/icons-vue'
|
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,
|
status: activity.stateName || '未知'
|
}))
|
} catch (error) {
|
console.error('加载最近活动失败:', error)
|
ElMessage.error('加载最近活动失败')
|
}
|
}
|
|
// 页面加载时获取数据
|
onMounted(() => {
|
loadStats()
|
loadRecentActivities()
|
})
|
|
// 获取状态标签类型
|
const getStatusType = (status: string) => {
|
const typeMap: Record<string, string> = {
|
'进行中': 'success',
|
'报名中': 'warning',
|
'待开始': 'info',
|
'已结束': 'info'
|
}
|
return typeMap[status] || 'info'
|
}
|
|
// 查看比赛
|
const viewActivity = (activity: any) => {
|
router.push(`/activity/${activity.id}`)
|
}
|
|
// 管理比赛
|
const manageActivity = (activity: any) => {
|
router.push('/activity')
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.dashboard {
|
.stats-row {
|
margin-bottom: 20px;
|
}
|
|
.stat-card {
|
background: white;
|
border-radius: 8px;
|
padding: 20px;
|
display: flex;
|
align-items: center;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
.stat-icon {
|
font-size: 40px;
|
margin-right: 16px;
|
}
|
|
.stat-content {
|
.stat-number {
|
font-size: 24px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 4px;
|
}
|
|
.stat-label {
|
font-size: 14px;
|
color: #909399;
|
}
|
}
|
}
|
|
.card-title {
|
margin-bottom: 20px;
|
color: #303133;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
|
.quick-btn {
|
width: 100%;
|
height: 60px;
|
font-size: 14px;
|
|
.el-icon {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
