learning-system-portal/src/views/lecturer/OnlineLearning.vue

<script>
import {addTeacher, getProgress, getTeacherInfo} from "@/api/modules/lecturer";
import lecturer from "@/api/modules/lecturer";
import processStatus from "@/components/processStatus.vue";

export default {
  name: "OnlineLearning",
  components: {processStatus},
  data(){
    return{
      teacherId:'',
      form:{
        teacherName:'',
        teacherNo:'',
        orgName:''
      },
      progressData:{},
      fileBaseUrl:process.env.VUE_APP_BOE_MOBILE_URL,
      uploadUrl:process.env.VUE_APP_FILE_BASE_URL,
      disabled:true,
      statusInfo:'',
      teacherInfo:'',
      pid:''
    }
  },
  created() {
    //读取路由参数
    this.teacherId=this.$route.query.teacherId
    //获取教师基本信息
    this.baseInfo()
  },
  methods:{
    baseInfo(){
      getTeacherInfo({teacherId:this.teacherId}).then(res=>{
        this.teacherInfo=res.data[0]
        var orgNameList=res.data[0].orgName.split('/')
        if (orgNameList.length<=3){
          this.form.orgName=res.data[0].orgName
        }else {
          this.form.orgName=orgNameList[orgNameList.length-3]+'/'+orgNameList[orgNameList.length-2]+'/'+orgNameList[orgNameList.length-1]
        }
        /*
        * teacherName:教师姓名 teacherNo:教师工号 orgName:组织 positionName:岗位 bandCode:职级 courseName:认证课程名称 courseContent课程内容分类
        * courseIntroduction:课程简介
        * */
        this.form.teacherName=res.data[0].teacherName
        this.form.teacherNo=res.data[0].teacherNo
        this.form.positionName=res.data[0].positionName
        this.form.bandCode=res.data[0].bandCode
        this.form.courseName=res.data[0].courseName
        this.form.courseContent=res.data[0].courseContent
        this.form.courseIntroduction=res.data[0].courseIntroduction
        this.form.coursewareName=res.data[0].examineCourseware.coursewareName
        //获取学习进度
        this.addTeacher()
      })
    },
    addTeacher(){
      addTeacher({pageNo:1,pageSize:10,userNo:this.form.teacherNo}).then(res=>{
        this.getProgress(res.data[0].id)
      })
    },
    getProgress(id){
      getProgress({teacherId:id}).then(res=>{
        this.progressData=res.data
        if ( res.data.length>=1 ){
          const isAll = true;
          res.data.some(item => {
            if (item.progress != 100) {
              this.disabled = true;
              isAll = false;
              return true;
            }
          });
          if (isAll) {
            this.disabled = false;
          }
        }
      })
    },
    getJump(){
      this.$router.push({
        path:'/need/coaching',
        query:{teacherId:this.teacherId}
      })
    },
    toCaseData(courseId){
      this.$router.push("/course/studyindex?id=" + courseId);
    },
    downloadFile(){
      lecturer.exportPdf({coursewareId:this.teacherInfo.examineCourseware.id}).then(res=>{
        if(res.status) {
          this.$message.error('导出失败');
        } else {
          const link = document.createElement('a');// 创建a标签
          let blob = new Blob([res],{type: 'application/vnd.;charset=UTF-8'}); // 设置文件类型
          link.style.display = "none";
          link.href = URL.createObjectURL(blob); // 创建URL
          link.setAttribute("download", this.teacherInfo.examineCourseware.coursewareName);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.dialogVisible = false;
        }
      })
    }
  }
}
</script>

<template>
  <div>
    <process-status :teacherId="teacherId.toString()" :pid="pid.toString()"></process-status>
    <div class="title">基本信息</div>
    <el-container>
      <div class="form-table">
        <el-form>
          <div>
            <el-col :span="11">
              <el-form-item label="姓名：">
                {{form.teacherName}}
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="工号：">
                {{form.teacherNo}}
              </el-form-item>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <el-form-item label="组织：">
                {{form.orgName}}
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="岗位：">
                {{form.positionName}}
              </el-form-item>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <el-form-item label="认证课程名称：" prop="courseName">
                <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;" :title="form.courseName">
                  {{ form.courseName }}
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="课程内容分类：" prop="courseContent">
                {{form.courseContent}}
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="课程简介：" prop="courseIntroduction">
            {{form.courseIntroduction}}
          </el-form-item>
          <el-form-item label="初稿课件：" prop="courseIntroduction">
            {{form.coursewareName}} <span style="color: #1378f6;display: inline-block;margin-left: 16px; cursor: pointer;" @click="downloadFile">查看</span>
          </el-form-item>
        </el-form>
      </div>
    </el-container>
    <div class="title" style="margin-top: 20px">线上课程</div>
    <div class="progress" >
      <div v-for="(item,index) in progressData" :key="index" @click="toCaseData(item.courseId)">
        <div class="uc-course-img" style="width: 212px;height:119px">
          <img style="width: 100%;" v-if="item.courseImage!=''&&item.courseImage.includes('https://')" :src="item.courseImage">
          <img style="width: 100%;" v-else-if="item.courseImage!=''" :src="uploadUrl+item.courseImage">
          <img style="width: 100%;" v-else :src="fileBaseUrl+'/pc/images/bgimg/course.png'">
        </div>
        <div class="courseName" :title="item.courseName">{{ item.courseName }}</div>
        <div class="smallTitle">当前进度</div>
        <el-progress :percentage="parseInt(item.progress)" :color="parseInt(item.progress)=='100'?'#31AF0D':'#FFA050'"></el-progress>
      </div>
    </div>
    <div class="tip">
      {{ disabled==false?'提示：您的线上课程已经学习完毕，快去进行下一步吧':'提示：您的课程还未学习完毕，不能进行下一步！'}}
    </div>
    <el-button type="primary" :disabled="disabled" style="margin-top: 20px;" @click="getJump()">下一步</el-button>
  </div>
</template>

<style scoped lang="scss">
.title{
  font-size: 16px;
  font-weight: 800;
  border-bottom: 1px solid rgba(153, 153, 153, 0.2);
  padding: 2px 2px 20px 2px;
}
.form-table{
  width: 100%;
  margin-top: 20px;
}
.progress{
  display: flex;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;

}
.progress>div{
  width: 300px;
  margin-right: 30px;
  margin-bottom: 12px;
}
.courseName {
  font-weight: 650;
  color: #333333;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  width: 100%;
}
.smallTitle{
  color:#134054;
  font-size:12px;
  margin-top: 7px;
}
::v-deep .el-form-item__content{
  font-weight: 500;
}
::v-deep .el-form-item{
  margin-bottom: 0px;
}
.tip{
  color: #333333;
  font-weight: 400;
  font-size: 14px;
  margin-top: 20px;
}
::v-deep .el-progress-bar__outer{
  background-color: rgba(255, 160, 80, 0.2);
}

::v-deep .el-form-item__label{
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 40px;
}
::v-deep .el-form-item__content{
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 40px;
}
</style>