<template>
|
<el-dialog
|
title="学时清单"
|
:visible.sync="dialogVisible"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
width="850px"
|
:before-close="handleClose"
|
>
|
<div v-for="(item,index) in classList" :key="index">
|
<span style="font-size: 16px;">{{item.courseName}}：总学时 {{item.durationDesc}}</span>
|
<el-table
|
:data="item.studentList"
|
style="width: 100%;margin-top: 10px">
|
<el-table-column
|
prop="name"
|
label="姓名"
|
>
|
</el-table-column>
|
<el-table-column
|
label="身份证号"
|
prop="idcard" :show-overflow-tooltip="true">
|
</el-table-column>
|
<el-table-column
|
prop="durationRate"
|
label="当前学时进度"
|
>
|
<template #default="scope">
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.durationRate" :status="scope.row.progressStatus"></el-progress>
|
</template>
|
</el-table-column>
|
<el-table-column label="关联上报记录" align="center" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-button
|
size="mini"
|
type="text"
|
style="color: #1890ff"
|
@click="openClassHour(scope.row)"
|
>查看记录清单</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column label="学时报告" align="center" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-button
|
v-if="scope.row.duration == item.duration"
|
size="mini"
|
type="text"
|
style="color: #1890ff"
|
@click="viewLessonReport(scope.row)"
|
>查看学时报告</el-button>
|
<div v-else>——</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-dialog
|
title="学习记录"
|
:visible.sync="learningDialog"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
width="850px"
|
append-to-body
|
:before-close="handleCloseLearning">
|
<learning-record ref="learnRef" ></learning-record>
|
</el-dialog>
|
<lessonReport ref="lessonRef"></lessonReport>
|
</el-dialog>
|
</template>
|
|
<script >
|
import learningRecord from '@/views/onlineEducation/learnRecord/index.vue'
|
import lessonReport from '@/views/onlineEducation/studentSupervision/compontents/lessonReport.vue'
|
import { periodDetail } from '@/api/onlineEducation/student'
|
import { listPlatSelect } from '@/api/onlineEducation/plat'
|
export default {
|
name: 'addUser',
|
components: {
|
lessonReport,
|
learningRecord
|
},
|
data() {
|
return {
|
learningDialog: false,
|
dialogVisible: false,
|
dataForm: {},
|
uuid: '',
|
classList: [
|
{
|
courseName:'课程一',
|
totalTime: 130,
|
total: 2,
|
userList: [
|
{
|
name: '张三',
|
idCard: '320154198514571152',
|
progress: 65,
|
progressRate: 50,
|
progressStatus:'exception'
|
},
|
{
|
name: '李四',
|
idCard: '320241198514571152',
|
progress: 104,
|
progressRate: 80,
|
progressStatus:'warning'
|
}
|
]
|
},
|
{
|
courseName:'课程二',
|
totalTime: 130,
|
total: 2,
|
userList: [
|
{
|
name: '张三',
|
idCard: '320154198514571152',
|
progress: 130,
|
progressRate: 100,
|
progressStatus:'success'
|
},
|
{
|
name: '李四',
|
idCard: '320241198514571152',
|
progress: 117,
|
progressRate: 90,
|
progressStatus:'warning'
|
}
|
]
|
}
|
]
|
}
|
},
|
created() {
|
},
|
methods: {
|
getList() {
|
periodDetail(this.uuid).then((res) => {
|
if (res.code == 200) {
|
this.classList = res.data.map(item => {
|
return {
|
...item,
|
studentList: item.studentList.map(stu => {
|
return {
|
...stu,
|
durationRate: Math.round(stu.duration/item.duration * 10000) / 100.00,
|
progressStatus: Math.round(stu.duration/item.duration * 10000) / 100.00<=50 ? 'exception'
|
: Math.round(stu.duration/item.duration * 10000) / 100.00 >50 && Math.round(stu.duration/item.duration * 10000) / 100.00<=90 ? 'warning'
|
: 'success'
|
}
|
})
|
}
|
})
|
console.log("class",this.classList)
|
this.dialogVisible = true;
|
}
|
})
|
},
|
handleCloseLearning() {
|
this.learningDialog = false;
|
},
|
openDialog (data) {
|
this.uuid = data.uuid;
|
this.getList()
|
|
|
|
},
|
|
handleClose() {
|
this.dialogVisible = false;
|
this.$emit("getList");
|
},
|
openClassHour(data){
|
this.learningDialog = true
|
setTimeout(() => {
|
this.$refs.learnRef.getList(data)
|
},10)
|
},
|
viewLessonReport(data){
|
this.$refs.lessonRef.openDialog(data.url)
|
}
|
|
}
|
}
|
|
</script>
|
<style scoped>
|
|
</style>
|
