safetyEducationExamination/src/views/safetyEducationExaminationNew/featurePage/learningMaterials/index.vue

<!-- 学习课件 -->
<template>
  <div class="learningMaterials">
    <div class="page-container-top-max-big-box">
      <p class="top-1-p">开始学习</p>
      <p class="top-2-p" @click="backPage()">返回</p>
    </div>
    <div class="content-box">
      <div class="left-max-big-box">
        <coursewareComponent ref="coursewareComponent"></coursewareComponent>
      </div>
      <div class="right-max-big-box">
        <p class="title-p">{{newData.coursewareName}}</p>
        <div class="text-p" style="color:#666;">{{secondsToMinutes(newData.minLearningDuration)}}分钟丨{{newData.creditHours}}学时丨{{newData.points}}积分</div>
        <!--<div class="text-p">已学 {{newData.learnedCoursewareCount}} / 总 {{newData.totalCoursewareCount}} 课件</div>-->
        <div class="progress-box">
          <p class="progress-title-box">学习进度</p>
          <div class="progress-min-box">
            <el-progress :stroke-width="12" :percentage="newData.progress?newData.progress:0"></el-progress>
          </div>
        </div>
        <div class="learning-for-max-big-box scrollbar-box">
          <div class="for-max-big-box"
               v-for="(item,index) in newData.coursewares" :key="index">
            <div class="for-big-box"
                 :class="checkLearningIndex == index ?'check-for-box':''">
              <!--<p>{{item.coursewareName}}</p>-->
              <p></p>
              <p>已学习：{{formatTime(item.learnedDuration)}} / {{formatTime(item.minLearningDuration)}}</p>
              <p :class="item.learnStatus ==2 ?'colorA':(item.learnStatus ==1 ?'colorB':'')">{{item.learnStatus==2?'已学完':(item.learnStatus==1?'学习中':'未学完')}}</p>
            </div>
            <p class="for-button" @click="finishStudying(index)"
               v-if="item.learnStatus != 2 && item.learnedDuration == item.minLearningDuration && checkLearningIndex == index">
              若已完成学习，请点此确认
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import StudyTimer from '@/utils/timerUtils/StudyTimer';
  import { VerifySlider } from 'vue-verify-slider';
  import coursewareComponent from "@/views/safetyEducationExaminationNew/components/coursewareComponent.vue";
  import {
    examUserCoursewareLearningDetail,examUserCoursewareLearningReportProgress,
    examUserCoursewareLearningConfirmCompletion,examUserCoursewareLearningRestart
  } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'index',
    components: {
      VerifySlider,
      coursewareComponent,
    },
    data() {
      return {
        coursewareId:null,
        newData:{
          coursewareName:"",
          minLearningDuration:0,
          creditHours:0,
          points:0,
          learnedCoursewareCount:0,
          totalCoursewareCount:0,
          progress:0,
          coursewares:[],
        },
        //当前选中
        checkLearningIndex:0,
        //学习计时器
        studyTimer: null,
        //验证器弹窗状态
        dialogVisible:false,
        //验证器弹窗间隔时间
        verificationTime:0,
        //心跳回报时间
        heartbeatValue:30,
      }
    },
    created() {

    },
    mounted() {
      this.initialization();
    },
    methods: {
      //初始化
      initialization(){
        this.$set(this,'coursewareId',this.$route.params.coursewareId)
        this.$nextTick(()=>{
          this.examUserCoursewareLearningDetail();
        })
      },
      //根据课件ID查询课件信息
      examUserCoursewareLearningDetail(){
        examUserCoursewareLearningDetail({ coursewareId:this.coursewareId }).then(response => {
          response.data.coursewares=[
            {
              coursewareName:response.data.coursewareName,
              learnedDuration:response.data.learnedDuration,
              minLearningDuration:response.data.minLearningDuration,
              learnStatus:response.data.learnStatus,
              attachmentPath:response.data.attachmentPath,
              attachmentType:response.data.attachmentType,
              materialType:response.data.materialType,
              articleContent:response.data.articleContent,
            },
          ]
          this.$set(this, 'newData', response.data)
          this.initTimer();//学习计时器
          this.courseRendering(this.checkLearningIndex);//课件渲染
        })
      },
      //返回
      backPage() {
        this.$router.back()
      },
      //完成课件学习
      finishStudying(index){
        let self = this;
        this.$confirm('确认完成课件学习?', "警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          self.examUserCoursewareLearningConfirmCompletion();
        }).catch(() => {});
      },
      //课件渲染
      courseRendering(index){
        let name = this.newData.coursewares[index].coursewareName;
        let url = '';
        let type = '';
        if(this.newData.coursewares[index].materialType == 1){
          //视频
          type = 'video'
          url = this.newData.coursewares[index].attachmentPath;
        }else if(this.newData.coursewares[index].materialType == 3){
          //文档
          if(this.newData.coursewares[index].attachmentType == '.docx'){
            type = 'docx'
          }else if(this.newData.coursewares[index].attachmentType == '.xlsx'){
            type = 'excel'
          }else if(this.newData.coursewares[index].attachmentType == '.pdf'){
            type = 'pdf'
          }
          url = this.newData.coursewares[index].attachmentPath;
        }else if(this.newData.coursewares[index].materialType == 4){
          //文章
          type = 'text'
          url = this.newData.coursewares[index].articleContent;
        }
        this.$refs['coursewareComponent'].initialize(name,url,type);
        if(this.newData.coursewares[this.checkLearningIndex].learnStatus == 0){
          this.$set(this.newData.coursewares[this.checkLearningIndex],'learnStatus',1);
        }
      },
      //学习完成
      examUserCoursewareLearningConfirmCompletion(){
        let self = this;
        let obj = {
          coursewareId:this.coursewareId,
          courseId:0,
          examId:0,
        }
        examUserCoursewareLearningConfirmCompletion(obj).then(response => {
          this.$set(this.newData.coursewares[this.checkLearningIndex],'learnStatus',2);
          this.msgSuccess(response.message)
        })
      },
      //心跳接口
      examUserCoursewareLearningReportProgress(){
        let obj = {
          coursewareId:this.coursewareId,
          courseId:0,
          examId:0,
          duration:this.heartbeatValue,
        }
        examUserCoursewareLearningReportProgress(obj).then(response => {})
      },
      //倒计时时间换算
      formatTime(totalSeconds) {
        if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
          return '0秒';
        }
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        if (minutes > 0 && seconds > 0) {
          return `${minutes}分${seconds}秒`;
        } else if (minutes > 0 && seconds === 0) {
          return `${minutes}分`;
        } else {
          return `${seconds}秒`;
        }
      },
      //展示时间换算
      secondsToMinutes(totalSeconds) {
        if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
          return 1;
        }
        return Math.ceil(totalSeconds / 60);
      },
      /*=================================== 学习定时器 ===================================*/
      // 初始化定时器
      initTimer() {
        let self = this;
        if(this.newData.coursewares[this.checkLearningIndex].learnedDuration == this.newData.coursewares[this.checkLearningIndex].minLearningDuration){
          return
        }
        this.studyTimer = new StudyTimer({
          initialSeconds: self.newData.coursewares[self.checkLearningIndex].learnedDuration,
          maxSeconds: self.newData.coursewares[self.checkLearningIndex].minLearningDuration,
          onTick: (elapsedSeconds) => {
            //每次计时
            this.$set(self.newData.coursewares[self.checkLearningIndex],'learnedDuration',elapsedSeconds);
            //心跳判断
            if (elapsedSeconds % this.heartbeatValue === 0) {
              //调用心跳方法
              this.examUserCoursewareLearningReportProgress();
            }
          },
          onMaxTimeReached: (elapsedSeconds) => {
            //达到最大值
            this.$set(self.newData.coursewares[self.checkLearningIndex],'learnedDuration',elapsedSeconds);
            //调用心跳方法
            this.examUserCoursewareLearningReportProgress();
          }
        });
        this.studyTimer.resume();
      },
      // 切换暂停/继续
      handleToggle() {
        if (!this.studyTimer) return;
        if (this.studyTimer.isRunning) {
          this.studyTimer.pause();
        } else {
          this.studyTimer.resume();
        }
      },
      // 清除定时器
      clearTimer() {
        if (this.studyTimer) {
          this.studyTimer.clear();
          this.studyTimer = null;
        }
      },
      //乘法
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
    },
    beforeDestroy() {
      if (this.studyTimer) {
        this.studyTimer.destroy();
        this.studyTimer = null;
      }
    },
  }
</script>
<style scoped lang="scss">
  .learningMaterials {
    flex:1;
    display: flex;
    flex-direction: column;
    background:#FFFFFF;
    border-radius:10px;
    overflow: hidden;
    padding:0;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
    margin:10px;
    ::v-deep .el-progress .el-progress__text{
      margin-left:10px;
      margin-top:1px;
    }
    .content-box{
      flex: 1;
      display: flex;
      overflow: hidden;
      .left-max-big-box{
        flex:1;
        display: flex;
        flex-direction: column;
        background-color: #dedede;
        margin:20px 20px;
        border-radius:10px;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
        border:1px solid #dedede;
      }
      .right-max-big-box{
        padding:20px 0;
        width:400px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-left: 1px solid #dedede;
        .title-p{
          font-size:16px;
          font-weight:700;
          line-height:30px;
          padding:0 20px;
        }
        .text-p{
          font-size:14px;
          line-height:20px;
          margin-bottom:20px;
          padding:0 20px;
        }
        .progress-box{
          width:400px;
          height:20px;
          display: flex;
          padding:0 20px;
          .progress-title-box{
            font-size:14px;
            line-height:20px;
            font-weight:700;
          }
          .progress-min-box{
            flex:1;
            padding:0 0 0 20px;
            .el-progress{
              margin-top:1px;
            }
          }
        }
        .learning-for-max-big-box{
          flex:1;
          display: flex;
          flex-direction: column;
          padding:0 20px;
          .for-max-big-box{
            margin-top:40px;
            .for-big-box{
              cursor: pointer;
              border-radius:6px;
              border:1px solid #666;
              padding:15px 10px;
              position: relative;
              p{
                line-height:30px;
              }
              p:nth-child(1){
                font-size:16px;
                font-weight:700;
                /*单行省略号*/
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
              p:nth-child(2){
                font-size:14px;
              }
              p:nth-child(3){
                font-size:14px;
                position: absolute;
                bottom: 16px;
                right: 16px;
                color:#fff;
                background-color: #999;
                border-radius:4px;
                width:60px;
                line-height:24px;
                text-align: center;
              }
              .colorA{
                background-color: #0183fa!important;
                color:#fff!important;
              }
              .colorB{
                background-color: #fff!important;
                border:1px solid #0183fa!important;
                color:#0183fa!important;
              }
            }
            .for-button{
              margin-top:20px;
              background-color: #13CE66;
              color:#fff;
              text-align: center;
              line-height:30px;
              border-radius:4px;
              cursor: pointer;
              font-size:14px;
            }
            .check-for-box{
              background-color: rgba(1,131,250,0.1);
              border:1px solid #0183fa!important;
              p{
                color:#0183fa!important;
              }
            }
          }
        }
      }
    }
  }
</style>