修改

zhouwx

2024-08-16 55f821ecb4b61bda2e4308b0a04b5ec0d767b31e

 src/views/onlineEducation/realtimeStatus/index.vue

@@ -29,47 +29,86 @@
      </div>
    </div>
<!--    查询数据-->
    <div style="margin: 30px 20%"  >
      <div v-if="data">
    <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>
<!--          <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  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 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>

<!--              <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>
@@ -95,95 +134,121 @@
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'
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 {
      total: 2,
      dayjs:dayjs,
      total: 0,
      platformList: [],
      data: {},
      data: {
        idcard: '620202199001060217  ',
        batchList: []
      },
      queryParams: {
        pageNum: 1,
        pageSize: 2,
        pageSize: 10,
        institutionId: '',
        idcard: ''
      },
      layout: 'total,prev, pager, next, jumper'
      layout: 'total,prev, pager, next, jumper',
      show:false

    };
  },
  created() {
    this.getPlat();
    this.getList();
    // 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 : ''
      // 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) => {
@@ -211,3 +276,8 @@
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content{
  font-size: 16px;
}
</style>