修改

zhouwx

2024-07-05 1f34754ce77199ffb9bbea09c5ef34e03e30f881

 src/views/onlineEducation/realtimeStatus/index.vue

@@ -20,6 +20,7 @@
          @click="handleQuery()"
        >查询实时进度</el-button>
        <el-button
          plain
          size="small"
          type="primary"
          style="margin-bottom: 10px"
@@ -28,55 +29,58 @@
      </div>
    </div>
<!--    查询数据-->
    <div style="margin: 30px 20%" >
      <div  style="display: flex;align-items: center;margin-bottom: -15px" >
        <span style="font-size: 20px;font-weight: 550">姓名：</span>
        <span style="font-size: 18px;margin-right: 60px">{{dataList[0].name}}</span>
        <span style="font-size: 20px;font-weight: 550">查询平台：</span>
        <span style="font-size: 18px">{{dataList[0].institutionalName}}</span>
      </div>
      <el-divider></el-divider>
      <div v-for="(item,index) in dataList" :key="index" v-if="dataList && dataList.length>0">
        <div v-for="(batch,index) in item.batchList" :key="index">
          <div  style="display: flex;align-items: center;margin-bottom: -15px" >
            <span style="font-size: 20px">班级(批次)：</span>
            <span style="font-size: 18px;margin-right: 60px">{{batch.batchName}}</span>
            <span style="font-size: 20px">创建时间：</span>
            <span style="font-size: 18px">{{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: 20px">课程名称：</span>
                <span style="font-size: 18px;margin-right: 60px">{{course.courseName}}</span>
                <span style="font-size: 20px">总学时：</span>
                <span style="font-size: 18px;margin-right: 60px">{{course.lessonNum}}</span>
                <span style="font-size: 20px">当前学时：</span>
                <span style="font-size: 18px;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>
    <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"
@@ -100,13 +104,14 @@
    return {
      total: 2,
      platformList: [],
      dataList: [],
      data: {},
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        pageSize: 2,
        institutionId: '',
        idcard: ''
      },
      layout: 'total,prev, pager, next, jumper'
    };
  },
  created() {
@@ -115,7 +120,8 @@
  },
  methods: {
    getList(){
      this.dataList = [
      console.log("111",this.queryParams)
      this.data =
        {
          id: null,
          idcard: '11111',
@@ -163,15 +169,91 @@
                  ]
                }
              ]
            }
          ]
        },
        {
          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
                    },
                  ]
                }
              ]
            },
            {
              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
                    },
                  ]
                }
              ]
            },
            {
              batchName: 'xxxx',
              createTime: 'xxxx',
@@ -214,9 +296,60 @@
                }
              ]
            }

          ]
        }
      ]
        // {
        //   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 = 4;
      // listCourse( this.queryParams).then((res) => {
      //   if (res.code == 200) {
      //     this.expertList = res.rows.map(item => {
@@ -228,9 +361,6 @@
      //   }
      // })
    },
    openUrl(url) {
      window.open(url,'_blank')
    },
    getPlat() {
      listPlatSelect().then((res) => {
        if (res.code == 200) {
@@ -239,9 +369,7 @@
      })

    },
    handleChange(){

    },
    handleQuery(){
      this.getList();

@@ -255,22 +383,7 @@
      }
      this.getList();
    },
    handleViewCourse(data){
      this.$refs.courseDialogRef.openDialog(data);
    },
    openStudent(data) {
      // this.$refs.studentDialog.openDialog(data);
    },
    check(val){
      this.$confirm('此操作将审核该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
      }).catch(() => {

      });
    }
  }
};
</script>