| | |
| | | <el-icon color="#409eff"><Trophy /></el-icon> |
| | | </div> |
| | | <div class="stat-content"> |
| | | <div class="stat-number">{{ stats.activeCompetitions }}</div> |
| | | <div class="stat-number">{{ stats.activeActivities }}</div> |
| | | <div class="stat-label">当前进行比赛</div> |
| | | </div> |
| | | </div> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <!-- 快速操作 --> |
| | | <div class="page-card"> |
| | | <h3 class="card-title">快速操作</h3> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <el-button type="primary" size="large" class="quick-btn" @click="$router.push('/activity')"> |
| | | <el-icon><Plus /></el-icon> |
| | | 新增比赛 |
| | | </el-button> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-button type="success" size="large" class="quick-btn" @click="$router.push('/judge')"> |
| | | <el-icon><Plus /></el-icon> |
| | | 新增评委 |
| | | </el-button> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-button type="warning" size="large" class="quick-btn" @click="$router.push('/player')"> |
| | | <el-icon><View /></el-icon> |
| | | 审核报名 |
| | | </el-button> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-button type="info" size="large" class="quick-btn" @click="$router.push('/carousel')"> |
| | | <el-icon><Plus /></el-icon> |
| | | 发布新闻 |
| | | </el-button> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | |
| | | <!-- 最近活动 --> |
| | | <div class="page-card"> |
| | | <h3 class="card-title">最近比赛</h3> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { reactive } from 'vue' |
| | | 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 = reactive({ |
| | | activeCompetitions: 5, |
| | | totalPlayers: 128, |
| | | pendingReviews: 23, |
| | | totalJudges: 15 |
| | | const stats = ref({ |
| | | activeActivities: 0, |
| | | totalPlayers: 0, |
| | | pendingReviews: 0, |
| | | totalJudges: 0 |
| | | }) |
| | | |
| | | // 最近比赛数据 |
| | | const recentActivities = reactive([ |
| | | { |
| | | id: 1, |
| | | name: '2024年创新创业大赛', |
| | | playerCount: 45, |
| | | startTime: '2024-01-15 09:00', |
| | | status: '进行中' |
| | | }, |
| | | { |
| | | id: 2, |
| | | name: '技能竞赛初赛', |
| | | playerCount: 32, |
| | | startTime: '2024-01-20 14:00', |
| | | status: '报名中' |
| | | }, |
| | | { |
| | | id: 3, |
| | | name: '设计大赛决赛', |
| | | playerCount: 18, |
| | | startTime: '2024-01-25 10:00', |
| | | status: '待开始' |
| | | // 最近活动数据 |
| | | 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 viewActivity = (activity: any) => { |
| | | ElMessage.info(`查看比赛:${activity.name}`) |
| | | router.push(`/activity/${activity.id}`) |
| | | } |
| | | |
| | | // 管理比赛 |
| | | const manageActivity = (activity: any) => { |
| | | ElMessage.info(`管理比赛:${activity.name}`) |
| | | router.push('/activity') |
| | | } |
| | | </script> |
| | | |