From cce9b105726750f1b76eef2fa250680ebf36d06c Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期五, 08 十一月 2024 09:54:45 +0800
Subject: [PATCH] 完成教师端，页面顶部展示
---
src/views/dashboard/index.vue | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
src/api/examPaperAnswer.js | 3 +
2 files changed, 109 insertions(+), 7 deletions(-)
diff --git a/src/api/examPaperAnswer.js b/src/api/examPaperAnswer.js
index 0a02a80..7a339f9 100644
--- a/src/api/examPaperAnswer.js
+++ b/src/api/examPaperAnswer.js
@@ -4,5 +4,6 @@
page: query => post('/api/admin/examPaperAnswer/page', query),
pageExamPaper: query => post('/api/admin/examPaperAnswer/pageExamPaper', query),
pageUser: query => post('/api/admin/examPaperAnswer/pageUser', query),
- read: id => post('/api/admin/examPaperAnswer/read/' + id)
+ read: id => post('/api/admin/examPaperAnswer/read/' + id),
+ queryMaxAndMinScore: id => post('/api/admin/examPaperAnswer/queryMaxAndMinScore/' + id),
}
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 5428283..53dfcae 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,9 +1,9 @@
<template>
<div class="dashboard-container">
<el-row :gutter="40" class="panel-group">
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" >
<div class="card-panel">
- <el-row class="panel-group">
+ <el-row class="panel-group" :gutter="20">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="list" class-name="card-panel-icon"/>
</div>
@@ -18,12 +18,44 @@
<el-button type="primary" size="small" @click="getExamList">鏌ヨ</el-button>
</el-row>
<el-row class="panel-group">
- <el-table :data="examList" style="width: 100%;" height="430">
+ <el-table :data="examList" style="width: 100%;" height="430" @row-click="handleRowClick">
<el-table-column label="鑰冭瘯鍚嶇О" prop="examName"></el-table-column>
<el-table-column label="鑰冭瘯鐘舵��" prop="status"></el-table-column>
</el-table>
</el-row>
</div>
+ </el-col>
+ <el-col :span="18">
+ <el-row>
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <div class="nameClass">
+ <p class="examInfo-text">褰撳墠鑰冭瘯锛歿{examInfo.currentExamName}}</p>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
+ <div class="nameClass">
+ <p class="examInfo-text">搴旇�冧汉鏁帮細{{examInfo.toUserCount}}</p>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
+ <div class="nameClass">
+ <p class="examInfo-text">缂鸿�冧汉鏁帮細{{examInfo.missUserCount}}</p>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
+ <div class="nameClass">
+ <p class="examInfo-text">鏈�楂樺垎锛歿{examInfo.maxScore}}</p>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
+ <div class="nameClass">
+ <p class="examInfo-text">鏈�浣庡垎锛歿{examInfo.minScore}}</p>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row>
+
+ </el-row>
</el-col>
</el-row>
<el-row class="echarts-line">
@@ -39,8 +71,11 @@
import resize from './components/mixins/resize'
import CountTo from 'vue-count-to'
import dashboardApi from '@/api/dashboard'
-import {getExamList} from "@/api/exam";
-import exam from "@/store/modules/exam";
+import {getExamList} from "@/api/exam"
+import exam from "@/store/modules/exam"
+import examPaperAnswerApi from '@/api/examPaperAnswer'
+
+
export default {
mixins: [resize],
components: {
@@ -53,6 +88,18 @@
// 鑰冭瘯鏌ヨ鏉′欢
query:{
examName: '',
+ },
+ examInfo:{
+ // 鑰冭瘯鍚嶇О
+ currentExamName: '',
+ // 搴斿埌浜烘暟
+ toUserCount: 0,
+ // 缂鸿�冧汉鏁�
+ missUserCount: 0,
+ // 鏈�楂樺垎
+ maxScore: 0,
+ // 鏈�浣庡垎
+ minScore: 0,
},
examPaperCount: 0,
questionCount: 0,
@@ -82,11 +129,34 @@
})
},
methods: {
+ // 鑾峰彇鑰冭瘯鍒楄〃
getExamList() {
let _this = this
getExamList(this.query).then(res => {
let response = res.data
_this.examList = response.data
+ })
+ },
+ // 鐐瑰嚮鑰冭瘯鍒楄〃鏇存柊鑰冭瘯鏁版嵁
+ handleRowClick(row){
+ // 鑾峰彇褰撳墠鑰冭瘯鍚嶇О
+ this.examInfo.currentExamName = row.examName
+ // 鑾峰彇搴斿埌瀹炲埌浜烘暟
+ examPaperAnswerApi.pageExamPaper({examId: row.id, pageIndex: 1, pageSize: 10}).then(res => {
+ let response = res.data.list[0]
+ this.examInfo.toUserCount = response.personTotalNum
+ this.examInfo.missUserCount = this.examInfo.toUserCount - response.personAnswerNum
+ })
+ // 鑾峰彇鏈満鑰冭瘯鐨勬渶楂樺垎鍜屾渶浣庡垎
+ examPaperAnswerApi.queryMaxAndMinScore(row.id).then(res => {
+ let data = res.data
+ if (!data || data.length === 0) {
+ this.examInfo.maxScore = 0
+ this.examInfo.minScore = 0
+ }else {
+ this.examInfo.maxScore = data[0].totalScore
+ this.examInfo.minScore = data[1].totalScore
+ }
})
},
option (title, formatter, label, vaule) {
@@ -172,10 +242,24 @@
}
.panel-group {
- margin-top: 8px;
+ margin-top: 0px;
.card-panel-col {
+ padding: 10px;
margin-bottom: 32px;
+ }
+
+ .card-panel2 {
+ height: 100px;
+ width: 100%;
+ cursor: pointer;
+ font-size: 12px;
+ position: relative;
+ overflow: hidden;
+ color: #666;
+ background: #fff;
+ box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+ border-color: rgba(0, 0, 0, .05);
}
.card-panel {
@@ -284,4 +368,21 @@
padding:16px 16px 0;
margin-bottom:32px;
}
+
+.examInfo-text {
+ line-height: 18px;
+ color: rgba(0, 0, 0, 0.45);
+ font-size: 16px;
+ margin-bottom: 12px;
+}
+
+.nameClass {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 70px;
+ background-color: white;
+}
</style>
--
Gitblit v1.8.0