150 lines
3.6 KiB
Vue
150 lines
3.6 KiB
Vue
<template>
|
|
<div class="dashboard-container">
|
|
<!-- 页面标题 -->
|
|
<div class="mb-4">
|
|
<h1 class="text-primary">系统管理首页</h1>
|
|
<p class="text-muted">欢迎管理员登录系统后台管理界面</p>
|
|
</div>
|
|
|
|
<!-- 数据概览卡片 -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card bg-primary text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">总考生数</h5>
|
|
<p class="card-text text-4xl">{{ examineeCount }}</p>
|
|
<a href="#" class="text-white">查看详情</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card bg-success text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">总题目数</h5>
|
|
<p class="card-text text-4xl">{{ questionCount }}</p>
|
|
<a href="#" class="text-white">查看详情</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card bg-warning text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">总考试数</h5>
|
|
<p class="card-text text-4xl">{{ examCount }}</p>
|
|
<a href="#" class="text-white">查看详情</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card bg-info text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">已完成考试</h5>
|
|
<p class="card-text text-4xl">{{ completedExamCount }}</p>
|
|
<a href="#" class="text-white">查看详情</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AdminHomeView',
|
|
components: {
|
|
ElButton: require('element-ui').Button,
|
|
ElTable: require('element-ui').Table,
|
|
ElTableColumn: require('element-ui').TableColumn
|
|
},
|
|
data() {
|
|
return {
|
|
examineeCount: 0,
|
|
questionCount: 0,
|
|
examCount: 0,
|
|
completedExamCount: 0,
|
|
recentActivities: [
|
|
// 模拟数据
|
|
{
|
|
time: '2025-08-28 09:30',
|
|
user: 'admin',
|
|
action: '登录',
|
|
details: '管理员成功登录系统'
|
|
},
|
|
{
|
|
time: '2025-08-27 16:45',
|
|
user: 'system',
|
|
action: '更新',
|
|
details: '系统题库已更新至最新版本'
|
|
},
|
|
{
|
|
time: '2025-08-27 14:20',
|
|
user: 'admin',
|
|
action: '添加',
|
|
details: '添加了10名新考生'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchDashboardData()
|
|
},
|
|
methods: {
|
|
async fetchDashboardData() {
|
|
try {
|
|
// 这里可以添加实际的数据获取逻辑
|
|
// 暂时使用模拟数据
|
|
console.log('获取仪表盘数据...')
|
|
|
|
// 模拟API调用延迟
|
|
await new Promise(resolve => setTimeout(resolve, 500))
|
|
|
|
// 模拟数据
|
|
this.examineeCount = 120
|
|
this.questionCount = 500
|
|
this.examCount = 5
|
|
this.completedExamCount = 3
|
|
} catch (error) {
|
|
console.error('获取仪表盘数据失败:', error)
|
|
this.$message.error('获取数据失败，请稍后重试')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-container {
|
|
height: 100%;
|
|
}
|
|
|
|
.card {
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 15px;
|
|
}
|
|
|
|
.card-title {
|
|
margin-bottom: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text-4xl {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 适配移动设备 */
|
|
@media (max-width: 768px) {
|
|
.row > div {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.text-4xl {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
</style> |