|
|
|
<template>
|
|
|
|
<view class="page">
|
|
|
|
<view class="wrap">
|
|
|
|
<view class="p-title">
|
|
|
|
<image class="icon" src="https://eduvessel.com/images/occupationlab/record5.png" mode="widthFix"></image> 成绩概览
|
|
|
|
</view>
|
|
|
|
<view class="stat">
|
|
|
|
<view class="item">
|
|
|
|
<view class="val">{{ overview.userName }}</view>
|
|
|
|
<view class="name">姓名</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="item">
|
|
|
|
<view class="val">{{ overview.experimentalNum }}</view>
|
|
|
|
<view class="name">实验次数(次)</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="item">
|
|
|
|
<view class="val">{{ overview.duration ? overview.duration : 0 }}小时</view>
|
|
|
|
<view class="name">实验总时长(时)</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="item">
|
|
|
|
<view class="val">{{ overview.avgScore ? overview.avgScore.toFixed(2) : overview.avgScore }}</view>
|
|
|
|
<view class="name">实验平均分</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="wrap">
|
|
|
|
<view class="p-title">
|
|
|
|
<image class="icon" src="https://eduvessel.com/images/occupationlab/record6.png" mode="widthFix"></image> 成绩记录明细
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="tab-wrap">
|
|
|
|
<ul class="tabs">
|
|
|
|
<li v-for="(item, i) in tabs" :key="i" :class="{active: curTab === item.id}" @click="tabChange(item.id)">{{ item.name }}</li>
|
|
|
|
</ul>
|
|
|
|
<uni-data-select class="select" v-model="mallId" :localdata="courses" @change="initList"></uni-data-select>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 练习成绩 -->
|
|
|
|
<view v-show="!curTab && list.length" class="list">
|
|
|
|
<view v-for="(item, i) in list" :key="i" class="item" @click="toPrac(item)">
|
|
|
|
<view class="c-name">{{ item.projectName }}</view>
|
|
|
|
<view class="line">最高分:{{ item.hightScore }}  练习次数:{{ item.practiceNum }}</view>
|
|
|
|
<view class="line">累计练习时长(小时):{{ item.hightScore }}</view>
|
|
|
|
<view class="line">最近练习时间:{{ item.lastTime }}</view>
|
|
|
|
<view class="btn">练习情况</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 考核成绩 -->
|
|
|
|
<view v-show="curTab && list.length" class="list">
|
|
|
|
<view v-for="(item, i) in list" :key="i" class="item" @click="toDetail(item)">
|
|
|
|
<view class="c-name">{{ item.experimentalName }}</view>
|
|
|
|
<view class="line">得分:{{ item.score }}  耗时:{{ item.timeSum }}min</view>
|
|
|
|
<view class="line">考核开始时间:{{ item.startTime }}</view>
|
|
|
|
<view class="line">考核结束时间:{{ item.lastTime }}</view>
|
|
|
|
<view class="btn">成绩报告</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<realName />
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { experimentOverview, getSchoolEffectiveCourse, queryPracticeByStudent, queryAssessmentByStudent } from '@/apis/modules/course.js'
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
overview: {},
|
|
|
|
curTab: 0,
|
|
|
|
tabs: [
|
|
|
|
{
|
|
|
|
id: 0,
|
|
|
|
name: '练习'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
name: '考核'
|
|
|
|
},
|
|
|
|
],
|
|
|
|
courses: [],
|
|
|
|
mallId: '',
|
|
|
|
list: [],
|
|
|
|
reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
|
|
|
|
status: 'more', // 上拉加载状态 more|loading|noMore
|
|
|
|
page: 1,
|
|
|
|
pageSize: 10,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onShow() {
|
|
|
|
this.getOverview()
|
|
|
|
this.getCourse()
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
// 获取概览
|
|
|
|
async getOverview () {
|
|
|
|
const res = await experimentOverview()
|
|
|
|
this.overview = res.data
|
|
|
|
},
|
|
|
|
// 获取课程
|
|
|
|
async getCourse () {
|
|
|
|
const { data } = await getSchoolEffectiveCourse()
|
|
|
|
if (data.length) {
|
|
|
|
data.forEach(e => {
|
|
|
|
e.value = e.mallId
|
|
|
|
e.text = e.curriculumName
|
|
|
|
})
|
|
|
|
this.courses = data
|
|
|
|
this.mallId = data[0].mallId
|
|
|
|
this.initList()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// 成绩列表
|
|
|
|
async getList () {
|
|
|
|
let res
|
|
|
|
const { mallId } = this
|
|
|
|
if (mallId) {
|
|
|
|
const { cid } = this.courses.find(e => e.mallId == mallId)
|
|
|
|
if (this.curTab) {
|
|
|
|
// 考核
|
|
|
|
res = await queryAssessmentByStudent({
|
|
|
|
pageNum: this.page,
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
mallId: this.mallId,
|
|
|
|
curriculumId: cid
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
// 练习
|
|
|
|
res = await queryPracticeByStudent({
|
|
|
|
pageNum: this.page,
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
mallId: this.mallId,
|
|
|
|
curriculumId: cid
|
|
|
|
})
|
|
|
|
}
|
|
|
|
const { page } = res
|
|
|
|
this.practices = this.reachBottom > 0 ? [...this.practices, ...page.records] : page.records
|
|
|
|
this.page++ // 每次获取了数据后page+1
|
|
|
|
const noMore = this.practices.length === page.total // 是否加载完所有数据
|
|
|
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
|
|
|
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
|
|
|
|
}
|
|
|
|
},
|
|
|
|
initList() {
|
|
|
|
this.page = 1
|
|
|
|
this.reachBottom = 0
|
|
|
|
this.getList()
|
|
|
|
},
|
|
|
|
// tab切换
|
|
|
|
tabChange(id) {
|
|
|
|
this.curTab = id
|
|
|
|
this.initList()
|
|
|
|
},
|
|
|
|
// 练习跳转
|
|
|
|
toPrac(row) {
|
|
|
|
this.$util.to(`../practiceDetail/practiceDetail?cid=${this.cid}&projectId=${row.projectId || ''}&paperId=${row.paperId || ''}`)
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.page {
|
|
|
|
.wrap {
|
|
|
|
padding: 30rpx;
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
background-color: #fff;
|
|
|
|
}
|
|
|
|
.tab-wrap {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
/deep/.select {
|
|
|
|
width: 60%;
|
|
|
|
.uni-select {
|
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.tabs {
|
|
|
|
display: flex;
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
li {
|
|
|
|
position: relative;
|
|
|
|
margin-right: 40rpx;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #333;
|
|
|
|
}
|
|
|
|
.active {
|
|
|
|
color: #007EFF;
|
|
|
|
&:after {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
|
|
|
bottom: -12rpx;
|
|
|
|
left: 50%;
|
|
|
|
width: 116%;
|
|
|
|
height: 4rpx;
|
|
|
|
margin: 10rpx auto 0;
|
|
|
|
background-color: #007EFF;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.stat {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
gap: 32rpx;
|
|
|
|
|
|
|
|
.item:nth-child(1) {
|
|
|
|
background: url(https://eduvessel.com/images/occupationlab/record1.png) (88% 25px) / auto no-repeat,
|
|
|
|
url(https://eduvessel.com/images/occupationlab/record1.png) 0 0/100% 100% no-repeat;
|
|
|
|
}
|
|
|
|
|
|
|
|
.item:nth-child(2) {
|
|
|
|
background: url(https://eduvessel.com/images/occupationlab/record2-1.png) (88% 15px) / auto no-repeat,
|
|
|
|
url(https://eduvessel.com/images/occupationlab/record2.png) 0 0/100% 100% no-repeat;
|
|
|
|
}
|
|
|
|
|
|
|
|
.item:nth-child(3) {
|
|
|
|
background: url(https://eduvessel.com/images/occupationlab/record3-1.png) (88% 20px) / auto no-repeat,
|
|
|
|
url(https://eduvessel.com/images/occupationlab/record3.png) 0 0/100% 100% no-repeat;
|
|
|
|
}
|
|
|
|
|
|
|
|
.item:nth-child(4) {
|
|
|
|
margin-right: 0;
|
|
|
|
background: url(https://eduvessel.com/images/occupationlab/record4-1.png) (88% 18px) / auto no-repeat,
|
|
|
|
url(https://eduvessel.com/images/occupationlab/record4.png) 0 0/100% 100% no-repeat;
|
|
|
|
}
|
|
|
|
|
|
|
|
.item {
|
|
|
|
width: calc(50% - 16rpx);
|
|
|
|
padding: 30rpx;
|
|
|
|
border-radius: 8rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
.name {
|
|
|
|
margin-top: 8rpx;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.val {
|
|
|
|
font-size: 42rpx;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.list {
|
|
|
|
.item {
|
|
|
|
position: relative;
|
|
|
|
padding: 20rpx 0;
|
|
|
|
border-bottom: 1px solid #e6e6e6;
|
|
|
|
}
|
|
|
|
.c-name {
|
|
|
|
font-size: 32rpx;
|
|
|
|
font-weight: 600;
|
|
|
|
color: #333;
|
|
|
|
}
|
|
|
|
.line {
|
|
|
|
margin-top: 14rpx;
|
|
|
|
font-size: 26rpx;
|
|
|
|
color: #828282;
|
|
|
|
}
|
|
|
|
.btn {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 20rpx;
|
|
|
|
right: 0;
|
|
|
|
padding: 10rpx 30rpx;
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #fff;
|
|
|
|
background-color: #007EFF;
|
|
|
|
border-radius: 36rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|