<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 10%" >
|
<div v-if="show">
|
<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" >-->
|
<el-form :model="batch" size="default" ref="busRef" style="display: flex" label-width="95px">
|
<el-form-item label="班级(批次)：">
|
<span>{{batch.batchName}}</span>
|
</el-form-item>
|
<el-form-item label="创建时间：">
|
<span>{{batch.createTime}}</span>
|
</el-form-item>
|
</el-form>
|
<!-- <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" >
|
<div style="display: flex;justify-content: space-between">
|
<el-form :model="course" size="default" ref="busRef" style="display: flex;align-items: center" label-width="95px">
|
<el-form-item label="课程名称：">
|
<span>{{course.courseName}}</span>
|
</el-form-item>
|
<el-form-item label="总学时：">
|
<span>{{course.courseLessonNum}}</span>
|
</el-form-item>
|
<el-form-item label="当前学时：">
|
<span>{{course.coCompleteLessonNum}}</span>
|
</el-form-item>
|
</el-form>
|
<el-progress :percentage="course.durationRate" style="width: 250px;margin-top: 5px" :text-inside="true" :stroke-width="23"></el-progress>
|
</div>
|
|
<!-- <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.courseLessonNum}}</span>-->
|
<!-- <span style="font-size: 18px">当前学时：</span>-->
|
<!-- <span style="font-size: 16px;margin-right: 60px">{{course.coCompleteLessonNum}}</span>-->
|
<!-- </div>-->
|
<!-- <el-progress :percentage="course.durationRate" style="width: 250px" ></el-progress>-->
|
<!-- </div>-->
|
<div v-for="(chapter,index) in course.chapterList" :key="index">
|
<div style="display: flex;justify-content: space-between">
|
<el-form :model="chapter" size="default" ref="busRef" style="display: flex;align-items: center" label-width="95px">
|
<el-form-item>
|
<span>{{chapter.chapterName}}</span>
|
</el-form-item>
|
<el-form-item label="总时长：">
|
<span>{{dayjs.duration(chapter.chapterDuration,'seconds').format('HH:mm:ss')}}</span>
|
</el-form-item>
|
<el-form-item label="已学时长：">
|
<span>{{dayjs.duration(chapter.chCompleteDuration,'seconds').format('HH:mm:ss')}}</span>
|
</el-form-item>
|
</el-form>
|
<span v-if="chapter.chapterStatus == 1 " style="color: #13ce66">[已完成]</span>
|
<span v-else style="color: #1890ff">[学习中]</span>
|
</div>
|
|
<!-- <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.chapterLessonNum}}</span>-->
|
<!-- <span style="font-size: 16px"> 已学时长：</span>-->
|
<!-- <span style="font-size: 16px">{{chapter.lessonNum}}</span>-->
|
<!-- </div>-->
|
<!-- <span v-if="chapter.chapterStatus == 1 " 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.pageNum"
|
: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, realTimeQuery } from '@/api/onlineEducation/course'
|
import dayjs from 'dayjs'
|
import duration from 'dayjs/plugin/duration'
|
dayjs.extend(duration);
|
export default {
|
name: "nPeopleManage",
|
dicts: [],
|
components: { courseDialog,studentList},
|
data() {
|
return {
|
dayjs:dayjs,
|
total: 0,
|
platformList: [],
|
data: {
|
idcard: '620202199001060217 ',
|
batchList: []
|
},
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
institutionId: '',
|
idcard: ''
|
},
|
layout: 'total,prev, pager, next, jumper',
|
show:false
|
|
};
|
},
|
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;
|
realTimeQuery( this.queryParams).then((res) => {
|
if (res.code == 200) {
|
this.data = res.data
|
if(res.data ){
|
const batchList = res.data.batchList?.map(item => {
|
return {
|
...item,
|
courseList:item.courseList.map(c => {
|
return {
|
...c,
|
durationRate: Math.round( c.coCompleteLessonNum/c.courseLessonNum *10000 ) /100
|
|
}
|
})
|
}
|
})
|
this.data.batchList = batchList
|
this.show = true
|
}else {
|
this.show = false
|
}
|
|
|
// this.total = res.total
|
}
|
console.log('res',this.data)
|
})
|
},
|
getPlat() {
|
listPlatSelect().then((res) => {
|
if (res.code == 200) {
|
this.platformList = res.data
|
}
|
})
|
|
},
|
|
handleQuery(){
|
this.getList();
|
|
},
|
resetQuery(){
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
institutionId: '',
|
idcard: ''
|
}
|
this.getList();
|
},
|
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
::v-deep .el-form-item__content{
|
font-size: 16px;
|
}
|
</style>
|
