<template>
|
<div class="app-container">
|
<div style="display: flex">
|
<div>
|
<span style="font-size: 14px;margin-right:10px">学员身份证号:</span>
|
<el-input v-model="queryParams.idcard" style="width: 200px" placeholder="请输入学员身份证号" clearable></el-input>
|
<span style="font-size: 14px;margin: 0 20px">平台:</span>
|
<el-select v-model="queryParams.institutionId" placeholder="请选择平台" clearable>
|
<el-option
|
v-for="item in platformList"
|
:key="item.id"
|
:label="item.institutionalName"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
<el-button
|
size="small"
|
type="primary"
|
style="margin-bottom: 10px;margin-left: 20px"
|
@click="handleQuery()"
|
>查询实时进度</el-button>
|
<el-button
|
plain
|
size="small"
|
type="primary"
|
style="margin-bottom: 10px"
|
@click="resetQuery()"
|
>重置</el-button>
|
</div>
|
</div>
|
<!-- 查询数据-->
|
<div style="margin: 30px 20%" >
|
<div v-if="data">
|
<div style="display: flex;align-items: center;margin-bottom: -15px" >
|
<span style="font-size: 18px;font-weight: 550">姓名：</span>
|
<span style="font-size: 17px;margin-right: 60px">{{data.name}}</span>
|
<span style="font-size: 18px;font-weight: 550">查询平台：</span>
|
<span style="font-size: 17px">{{data.institutionalName}}</span>
|
</div>
|
<el-divider></el-divider>
|
<div>
|
<div v-for="(batch,index) in data.batchList" :key="index" >
|
<div style="display: flex;align-items: center;margin-bottom: -15px" >
|
<span style="font-size: 18px">班级(批次)：</span>
|
<span style="font-size: 16px;margin-right: 60px">{{batch.batchName}}</span>
|
<span style="font-size: 18px">创建时间：</span>
|
<span style="font-size: 16px">{{batch.createTime}}</span>
|
</div>
|
<div v-for="(course,index) in batch.courseList" :key="index" style="margin-top: 40px;margin-bottom: 50px">
|
<div style="margin-bottom: -15px;display: flex;justify-content: space-between" >
|
<div style="display: flex;align-items: center;">
|
<span style="font-size: 18px">课程名称：</span>
|
<span style="font-size: 16px;margin-right: 60px">{{course.courseName}}</span>
|
<span style="font-size: 18px">总学时：</span>
|
<span style="font-size: 16px;margin-right: 60px">{{course.lessonNum}}</span>
|
<span style="font-size: 18px">当前学时：</span>
|
<span style="font-size: 16px;margin-right: 60px">{{course.duration}}</span>
|
</div>
|
<el-progress :percentage="course.durationRate" style="width: 250px" ></el-progress>
|
</div>
|
<div v-for="(chapter,index) in course.chapterList" :key="index" style="margin-top: 50px;margin-left: 40px;">
|
<div style="margin-bottom: -15px;display: flex;justify-content: space-between" >
|
<div style="display: flex;align-items: center" >
|
<span style="font-size: 16px;margin-right: 60px">{{chapter.chapterName}}</span>
|
<span style="font-size: 16px">总时长：</span>
|
<span style="font-size: 16px;margin-right: 60px">{{chapter.lessonTocal}}</span>
|
<span style="font-size: 16px"> 已学时长：</span>
|
<span style="font-size: 16px">{{chapter.lessonNum}}</span>
|
</div>
|
<span v-if="chapter.lessonTocal == chapter.lessonNum " style="color: #13ce66">[已完成]</span>
|
<span v-else style="color: #1890ff">[学习中]</span>
|
</div>
|
</div>
|
</div>
|
<el-divider></el-divider>
|
</div>
|
</div>
|
</div>
|
<el-empty description="暂无数据" style="margin-top: 10%" v-else></el-empty>
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:layout="layout"
|
:page.sync="queryParams.pageIndex"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import courseDialog from '@/views/onlineEducation/courseSupervision/components/courseDialog.vue'
|
import studentList from '@/views/onlineEducation/count/components/studentList.vue'
|
import { delJobRegist } from '@/api/coalMine/jobRegist'
|
import { listPlat, listPlatSelect } from '@/api/onlineEducation/plat'
|
import { listCourse } from '@/api/onlineEducation/course'
|
export default {
|
name: "nPeopleManage",
|
dicts: [],
|
components: { courseDialog,studentList},
|
data() {
|
return {
|
total: 2,
|
platformList: [],
|
data: {},
|
queryParams: {
|
pageIndex: 1,
|
pageSize: 2,
|
institutionId: '',
|
idcard: ''
|
},
|
layout: 'total,prev, pager, next, jumper'
|
};
|
},
|
created() {
|
this.getPlat();
|
this.getList();
|
},
|
methods: {
|
getList(){
|
console.log("111",this.queryParams)
|
this.data =
|
{
|
id: null,
|
idcard: '11111',
|
name: '李四',
|
institutionalName: '链工宝',
|
batchList: [
|
{
|
batchName: 'xxxx',
|
createTime: 'xxxx',
|
courseList: [
|
{
|
courseName: 'xx',
|
lessonNum: 100,
|
duration: 90,
|
durationRate: 90,
|
chapterList: [
|
{
|
chapterName: '第5章：章节名称',
|
lessonTocal: 20,
|
lessonNum: 10
|
},
|
{
|
chapterName: '第1章：章节名称',
|
lessonTocal: 80,
|
lessonNum: 80
|
},
|
]
|
},
|
{
|
courseName: 'xx',
|
lessonNum: 100,
|
duration: 90,
|
durationRate: 90,
|
chapterList: [
|
{
|
chapterName: '第5章：章节名称',
|
lessonTocal: 20,
|
lessonNum: 10
|
},
|
{
|
chapterName: '第1章：章节名称',
|
lessonTocal: 80,
|
lessonNum: 80
|
},
|
]
|
}
|
]
|
},
|
|
]
|
}
|
this.total = 1;
|
// listCourse( this.queryParams).then((res) => {
|
// if (res.code == 200) {
|
// this.expertList = res.rows.map(item => {
|
// return {
|
// ...item,
|
// courseNum: item.outline ? item.outline.length : ''
|
// }
|
// })
|
// }
|
// })
|
},
|
getPlat() {
|
listPlatSelect().then((res) => {
|
if (res.code == 200) {
|
this.platformList = res.data
|
}
|
})
|
|
},
|
|
handleQuery(){
|
this.getList();
|
|
},
|
resetQuery(){
|
this.queryParams = {
|
pageIndex: 1,
|
pageSize: 10,
|
institutionId: '',
|
idcard: ''
|
}
|
this.getList();
|
},
|
|
}
|
};
|
</script>
|
