<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.activeCompetitions }}</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-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>
|
<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 { reactive } from 'vue'
|
import { ElMessage } from 'element-plus'
|
|
// 统计数据
|
const stats = reactive({
|
activeCompetitions: 5,
|
totalPlayers: 128,
|
pendingReviews: 23,
|
totalJudges: 15
|
})
|
|
// 最近比赛数据
|
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 getStatusType = (status: string) => {
|
const typeMap: Record<string, string> = {
|
'进行中': 'success',
|
'报名中': 'warning',
|
'待开始': 'info',
|
'已结束': 'info'
|
}
|
return typeMap[status] || 'info'
|
}
|
|
// 查看比赛
|
const viewActivity = (activity: any) => {
|
ElMessage.info(`查看比赛：${activity.name}`)
|
}
|
|
// 管理比赛
|
const manageActivity = (activity: any) => {
|
ElMessage.info(`管理比赛：${activity.name}`)
|
}
|
</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>
|
