| | |
| | | <template> |
| | | <div class="dashboard"> |
| | | <!-- 数据统计卡片 --> |
| | | <el-row :gutter="20" class="stats-row"> |
| | | <div> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <div class="stat-card"> |
| | | <div class="stat-icon"> |
| | | <el-icon color="#409eff"><Trophy /></el-icon> |
| | | <el-card class="box-card"> |
| | | <template #header> |
| | | <div class="card-header"> |
| | | <span>当前进行比赛</span> |
| | | </div> |
| | | <div class="stat-content"> |
| | | <div class="stat-number">{{ stats.activeActivities }}</div> |
| | | <div class="stat-label">当前进行比赛</div> |
| | | </template> |
| | | <div class="text item"> |
| | | {{ stats.activeActivities }} |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="6"> |
| | | <div class="stat-card"> |
| | | <div class="stat-icon"> |
| | | <el-icon color="#67c23a"><UserFilled /></el-icon> |
| | | <el-card class="box-card"> |
| | | <template #header> |
| | | <div class="card-header"> |
| | | <span>参赛总人数</span> |
| | | </div> |
| | | <div class="stat-content"> |
| | | <div class="stat-number">{{ stats.totalPlayers }}</div> |
| | | <div class="stat-label">参赛总人数</div> |
| | | </template> |
| | | <div class="text item"> |
| | | {{ stats.totalPlayers }} |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="6"> |
| | | <div class="stat-card"> |
| | | <div class="stat-icon"> |
| | | <el-icon color="#e6a23c"><Clock /></el-icon> |
| | | <el-card class="box-card"> |
| | | <template #header> |
| | | <div class="card-header"> |
| | | <span>报名待审核</span> |
| | | </div> |
| | | <div class="stat-content"> |
| | | <div class="stat-number">{{ stats.pendingReviews }}</div> |
| | | <div class="stat-label">报名待审核</div> |
| | | </template> |
| | | <div class="text item"> |
| | | {{ stats.pendingReviews }} |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="6"> |
| | | <div class="stat-card"> |
| | | <div class="stat-icon"> |
| | | <el-icon color="#f56c6c"><User /></el-icon> |
| | | <el-card class="box-card"> |
| | | <template #header> |
| | | <div class="card-header"> |
| | | <span>评委总数</span> |
| | | </div> |
| | | <div class="stat-content"> |
| | | <div class="stat-number">{{ stats.totalJudges }}</div> |
| | | <div class="stat-label">评委总数</div> |
| | | </template> |
| | | <div class="text item"> |
| | | {{ stats.totalJudges }} |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </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> |
| | | <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-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> |
| | | <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> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | 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' |
| | | |
| | |
| | | name: activity.name, |
| | | playerCount: activity.playerCount || 0, |
| | | startTime: activity.matchTime || activity.createTime, |
| | | endTime: activity.endTime || '待定', |
| | | status: activity.stateName || '未知' |
| | | })) |
| | | } catch (error) { |
| | |
| | | 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}`) |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .dashboard { |
| | | .stats-row { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .stat-card { |
| | | background: white; |
| | | border-radius: 8px; |
| | | padding: 20px; |
| | | <style scoped> |
| | | .card-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | 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 { |
| | | .text { |
| | | font-size: 24px; |
| | | font-weight: bold; |
| | | color: #303133; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .stat-label { |
| | | font-size: 14px; |
| | | color: #909399; |
| | | } |
| | | } |
| | | .item { |
| | | margin-bottom: 18px; |
| | | } |
| | | |
| | | .card-title { |
| | | margin-bottom: 20px; |
| | | color: #303133; |
| | | font-size: 16px; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .quick-btn { |
| | | .box-card { |
| | | width: 100%; |
| | | height: 60px; |
| | | font-size: 14px; |
| | | |
| | | .el-icon { |
| | | margin-right: 8px; |
| | | } |
| | | } |
| | | } |
| | | </style> |