safetyEducationExamination/src/views/safetyEducationExaminationNew/workbench/TaskCard.vue

<!-- 工作台任务卡片 -->
<template>
  <div class="task-card">
    <div class="top-title-box">
      <p>工作台任务</p>
    </div>
    <div class="card-max-big-box">
      <div class="year-card-box for-max-big-box">
        <div class="year-card-top-title-box">
          <p>学年数据统计</p>
          <p>按学年统计历年考试通过情况与成绩</p>
        </div>
        <div class="bottom-content-box scrollbar-box">
          <p class="null-p" v-if="!yearMinList[0]">暂无数据</p>
          <div class="bottom-big-box-1" v-for="(item,index) in yearMinList">
            <p>{{item.academicYear}}</p>
            <p>{{item.statusCode==0?'未开始':(item.statusCode==2?'通过丨'+item.score:(item.statusCode==1?'进行中':'未通过'))}}</p>
          </div>
        </div>
      </div>
      <!--任务卡列表-->
      <div class="year-card-box for-max-big-box">
        <div class="year-card-top-title-box">
          <p>学习考试任务</p>
          <p>待完成的学习任务</p>
        </div>
        <div class="bottom-content-box scrollbar-box">
          <p class="null-p" v-if="!dataList2[0]">暂无数据</p>
          <div class="bottom-big-box-5" v-for="(item,index) in dataList2" @click="tableButtonOne(item.conditionType,item)">
            <p class="text-name-p">{{item.examName}}</p>
            <div class="text-flex-box" v-if="item.conditionType == 1">
              <p>考前学习</p>
              <p>{{item.completedStudyHours}} / {{item.studyHoursRequirement}} 学时</p>
            </div>
            <div class="text-flex-box" v-if="item.conditionType == 2">
              <p>考前学习</p>
              <p>未完成</p>
            </div>
            <div class="text-flex-box" v-if="item.conditionType == 3">
              <p>模拟考试</p>
              <p>未完成</p>
            </div>
            <div class="text-flex-box" v-if="item.examKind==1&&item.conditionType == 4">
              <p>在线考试</p>
              <p>
                <span :class="!item.isPassed&&item.attemptCount==0?'color-A':(!item.isPassed&&item.attemptCount>0?'color-B':(item.isPassed?'color-C':''))">{{!item.isPassed&&item.attemptCount==0?'未开始':(!item.isPassed&&item.attemptCount>0?'未通过':(item.isPassed?'已通过':''))}}</span>
                <span style="margin-left:20px;">{{item.attemptCount>0?'成绩：'+item.maxScore+'分':''}}</span>
              </p>
            </div>
            <div class="text-flex-box" v-if="item.examKind==2&&item.conditionType == 4">
              <p>补考</p>
              <p>未完成</p>
            </div>
            <p class="time-p">{{parseTime(item.startTime,"{y}-{m}-{d} {h}:{i}")}} 至 {{parseTime(item.endTime,"{y}-{m}-{d} {h}:{i}")}}</p>
          </div>
        </div>
      </div>
      <!--模拟练习卡-->
      <div class="examination-card-box for-max-big-box">
        <div class="year-card-top-title-box">
          <p>模拟练习</p>
          <p>刷题进度和正确率</p>
        </div>
        <div class="bottom-content-box scrollbar-box" style="cursor: pointer;" @click="goPracticeQuestions()">
          <div class="bottom-big-box-6">
            <p>{{summaryData.completedCount}} / {{summaryData.totalCount}}</p>
            <p >已完成题目数 / 题库总数</p>
          </div>
          <div class="bottom-big-box-6">
            <p>{{summaryData.correctRate}}%</p>
            <p >当前模拟练习正确率</p>
          </div>
        </div>
      </div>
      <!--在线任务卡-->
      <div class="for-max-big-box" v-for="(item,index) in dataList" :key="index">
        <div class="year-card-top-title-box">
          <p>{{item.examName}}</p>
          <p v-if="item.examKind==1&&item.conditionType != 4">满足前置条件后可参加考试</p>
          <p v-if="item.examKind==1&&item.conditionType == 4">
            <span>{{parseTime(item.startTime,"{y}-{m}-{d} {h}:{i}")}} 至 {{parseTime(item.endTime,"{y}-{m}-{d} {h}:{i}")}}</span>
          </p>
          <p v-if="item.examKind==1&&item.conditionType == 4">
            <span :class="!item.isPassed&&item.attemptCount==0?'color-A':(!item.isPassed&&item.attemptCount>0?'color-B':(item.isPassed?'color-C':''))">{{!item.isPassed&&item.attemptCount==0?'未考试':(!item.isPassed&&item.attemptCount>0?'未通过':(item.isPassed?'已通过':''))}}</span>
            <span v-if="item.maxScore>0" style="margin-left:15px;">{{item.attemptCount>0?'成绩：'+item.maxScore+'分':''}}</span>
          </p>
        </div>
        <div class="bottom-content-box scrollbar-box">
          <div class="bottom-big-box-4">
            <p :class="item.completedStudyHours<item.studyHoursRequirement?'text-name':''">学时要求</p>
            <p class="colorA" v-if="item.needStudy" @click="tableButton(1,item)">开始学习</p>
            <p class="position-p-1" v-if="item.completedStudyHours<item.studyHoursRequirement">{{item.completedStudyHours}} / {{item.studyHoursRequirement}} 学时</p>
            <p class="text-type" v-if="item.completedStudyHours>=item.studyHoursRequirement">已达标</p>
          </div>
          <div class="bottom-big-box-4" v-if="item.examStudy">
            <p>考前学习</p>
            <p class="colorA" @click="tableButton(2,item)">开始学习</p>
            <!--<p class="colorA" v-if="!item.needStudy" @click="tableButton(2,item)">开始学习</p>-->
            <!--<p class="colorC" v-if="item.needStudy">待满足学时要求后解锁</p>-->
          </div>
          <div class="bottom-big-box-4" v-if="item.mockExam">
            <p>模拟考试</p>
            <p class="colorA" v-if="!item.examStudy" @click="tableButton(3,item)">开始考试</p>
            <p class="colorC" v-if="item.examStudy">待完成学习任务后解锁</p>
          </div>
          <div class="bottom-big-box-4">
            <p>在线考试</p>
            <p class="colorA" v-if="item.examKind==1&&item.conditionType == 4" @click="tableButton(4,item)">开始考试</p>
            <p class="colorC" v-if="item.examKind==1&&item.conditionType != 4">待通过模拟考试后解锁</p>
            <p class="colorB" v-if="item.examKind==2">考试未通过</p>
          </div>
          <div class="bottom-big-box-4" v-if="item.examKind == 2">
            <p>参加补考</p>
            <p class="colorA" @click="tableButton(4,item)">开始考试</p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog class="preExam-dialog"
               :modal-append-to-body="false"
               :close-on-click-modal="false" :close-on-press-escape="false"
               title="考试承诺书"
               :visible.sync="preExamDialogType"
               v-if="preExamDialogType"
               width="840px"
               append-to-body>
      <div style="height:600px;" class="scrollbar-box">
        <richTextPdf ref="richTextPdf" :content="richTextHtml" />
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-border" v-if="preButtonType" @click="preExamDialogCancel">下载</p>
        <p class="dialog-footer-button-primary" @click="examUserExamStart">确认</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { Encrypt,Decrypt} from '@/utils/secret'
  import {
    examUserCoursewareLearningRestart,examElLabEduRelationAcademicYearProgress,
    examUserExamStudyTaskList,examUserExamStart,examUserPracticeSummary,
    examUserExamCommitmentConfirm,examUserExamAttemptFinished,
  } from "@/api/safetyEducationExaminationNew/index";
  import richTextPdf from '@/views/safetyEducationExaminationNew/components/richTextPdf.vue';
export default {
  name: 'TaskCard',
  components: { richTextPdf },
  data() {
    return {
      //学年数据
      yearType:true,
      yearMinList:[],
      studyMinList:[],
      examinationMinList:[],
      dataList:[],
      dataList2:[],
      summaryData:{
        totalCount:0,
        completedCount:0,
        correctRate:0,
      },
      //考前承诺相关
      preExamDialogType:false,
      preButtonType:false,
      richTextHtml: '',
      preData:null,
    }
  },
  created() {

  },
  mounted() {
    this.initialization();
  },
  methods: {
    initialization(){
      this.examUserPracticeSummary();
      this.examElLabEduRelationAcademicYearProgress();
      this.examUserExamStudyTaskList();
      this.examUserExamStudyTaskList2();
    },
    //下载承诺书
    preExamDialogCancel(){
      this.msgSuccess('正在下载,请耐心等候')
      this.$refs['richTextPdf'].downloadPDF();
    },
    //确认承诺-并考试
    examUserExamStart(){
      if(this.preData.attemptId){
        this.examUserExamCommitmentConfirm(1,this.preData.attemptId);
      }else{
        examUserExamStart({examId:this.preData.examId,examScene:1,}).then(response => {
          if(response.data.attemptId){
            this.examUserExamCommitmentConfirm(2,response.data.attemptId);
          }else{
            this.msgError(response.message)
          }
        })
      }
    },
    //确认考试承诺书
    examUserExamCommitmentConfirm(type,attemptId){
      examUserExamCommitmentConfirm({attemptId:attemptId}).then(response => {
        let obj = {
          examId: this.preData.examId,
          attemptId: attemptId,
          type: '1',
          examKind:this.preData.examKind,
          attemptLimit:this.preData.attemptLimit,
          attemptCount:this.preData.attemptCount,
        }
        this.examUserExamAttemptFinished(1,obj);
      })
    },
    //开始考试判断是否有承诺书
    setRichExamData(item){
      if(item.commitmentEnabled == 1 && !item.commitmentConfirmed){
        this.$set(this,'preButtonType',item.commitmentPrintEnabled == 1?true:false);
        this.$set(this,'richTextHtml',item.commitmentContent);
        this.$set(this,'preData',item);
        this.$set(this,'preExamDialogType',true);
      }else{
        if(item.attemptId){
          this.examUserExamAttemptFinished(1,item);
        }else{
          this.examUserExamStartPlay(1,item);
        }
      }
    },
    //跳转刷题练习
    goPracticeQuestions(){
      this.$router.push({
        path: '/safetyEducationExaminationNew/safetyTest/practiceQuestions',
        query: {}
      })
    },
    //考试跳转
    tableButtonOne(type,item){
      let self = this;
      if(type == 1){
        if(item.examStudy&&item.courseId){
          //学习课程
          this.$router.push({
            path: '/learningCourse',
            query: {
              courseId: item.courseId,
              examId: item.examId,
            }
          })
        }else{
          //学时要求
          let obj = {
            examName:item.examName,
            knowledgePointIds:item.knowledgePointIds,
            completedStudyHours:item.completedStudyHours,
            studyHoursRequirement:item.studyHoursRequirement,
          }
          let text = Encrypt(JSON.stringify(obj))
          self.$router.push({
            path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
            query: {
              text : text
            }
          })
        }
      }else if(type == 2){
        //学习课程
        this.$router.push({
          path: '/learningCourse',
          query: {
            courseId: item.courseId,
            examId: item.examId,
          }
        })
      }else if(type == 3){
        //模拟考试
        if(item.mockExamId){
          let obj = {
            examId: item.examId,
            attemptId: item.mockExamId,
          };
          this.examUserExamAttemptFinished(2,obj);
        }else{
          let obj = {
            examId: item.examId,
          };
          this.examUserExamStartPlay(2,obj);
        }
      }else if(type == 4){
        //在线考试//补考
        this.setRichExamData(item);
      }
    },
    //考试跳转
    tableButton(type,item){
      let self = this;
      if(type == 1){
        if(item.examStudy&&item.courseId){
          //学习课程
          this.$router.push({
            path: '/learningCourse',
            query: {
              courseId: item.courseId,
              examId: item.examId,
            }
          })
        }else{
          //学时要求
          let obj = {
            examName:item.examName,
            knowledgePointIds:item.knowledgePointIds,
            completedStudyHours:item.completedStudyHours,
            studyHoursRequirement:item.studyHoursRequirement,
          }
          let text = Encrypt(JSON.stringify(obj))
          self.$router.push({
            path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
            query: {
              text : text
            }
          })
        }
      }else if(type == 2){
        //学习课程
        this.$router.push({
          path: '/learningCourse',
          query: {
            courseId: item.courseId,
            examId: item.examId,
          }
        })
      }else if(type == 3){
        //模拟考试
        if(item.mockExamId){
          let obj = {
            examId: item.examId,
            attemptId: item.mockExamId,
          };
          this.examUserExamAttemptFinished(2,obj);
        }else{
          let obj = {
            examId: item.examId,
          };
          this.examUserExamStartPlay(2,obj);
        }
      }else if(type == 4){
        //在线考试//补考
        this.setRichExamData(item);
      }
    },
    //二次验证考试是否已结束
    examUserExamAttemptFinished(type,item){
      examUserExamAttemptFinished({attemptId:item.attemptId}).then(response => {
        if(response.data){
          //已结束
          if(type == 1){
            //在线考试
            if(item.attemptLimit == 0 || item.attemptCount < item.attemptLimit){
              //获取新试卷
              this.examUserExamStartPlay(type,item)
            }else{
              //无可用次数 提示并刷新数据列表
              this.msgError('当前考试已结束')
              this.examUserExamStudyTaskList();
              this.examUserExamStudyTaskList2();
            }
          }else if(type == 2){
            //模拟考试-获取新试卷
            this.examUserExamStartPlay(type,item)
          }
        }else{
          //未结束
          this.confirmTitle(type,item);
        }
      })
    },
    //获取考试试卷
    examUserExamStartPlay(type,item){
      examUserExamStart({examId:item.examId,examScene:type,}).then(response => {
        if(response.data.attemptId){
          let obj = {
            examId: item.examId,
            attemptId: response.data.attemptId,
          };
          if(type == 1){
            obj.type = 1;
            obj.examKind = item.examKind;
          }
          this.confirmTitle(type,obj);
        }else{
          this.msgError(response.message)
        }
      })
    },
    //提示与跳转
    confirmTitle(type,obj){
      let self = this;
      if(type == 1){
        this.$confirm(
          '考试期间未完成答题请勿离开页面，离开后倒计时仍会继续，超时将自动交卷并记录成绩，扣除 1 次考试机会。',
          '进入考试页面',
          {
            confirmButtonText: '确定进入',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal: false,
            closeOnPressEscape: false
          }
        ).then(() => {
          //在线考试
          this.$router.push({
            path: '/startTheExam',
            query: obj
          })
        }).catch(() => {})
      }else if(type == 2){
        //模拟考试
        self.$router.push({
          path: '/mockExam',
          query: obj
        })
      }
    },
    //查询学年进度列表
    examElLabEduRelationAcademicYearProgress(){
      examElLabEduRelationAcademicYearProgress({}).then(response => {
        this.$set(this, 'yearMinList', response.data)
      })
    },
    //特殊考试
    examUserExamStudyTaskList(){
      let obj = {
        page:1,
        pageSize:5,
        examStatus:2,
        isSpecialExam:true,
      }
      examUserExamStudyTaskList(obj).then(response => {
        this.$set(this, 'dataList', response.data.records)
      })
    },
    //在线考试
    examUserExamStudyTaskList2(){
      let obj = {
        page:1,
        pageSize:5,
        examStatus:2,
        isSpecialExam:false,
      }
      examUserExamStudyTaskList(obj).then(response => {
        this.$set(this, 'dataList2', response.data.records)
      })
    },
    //在线考试
    examUserPracticeSummary(){
      examUserPracticeSummary({}).then(response => {
        this.$set(this, 'summaryData', response.data)
      })
    },
  },
}
</script>

<style scoped lang="scss">
.task-card {
  background: #fff;
  /*border-radius: 6px;*/
  padding: 16px 0 0 0;
  margin-bottom: 12px;
  /*box-shadow: 0 1px 4px rgba(0,0,0,0.06);*/
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e8edf5;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(37, 50, 74, 0.06);
  .top-title-box{
    display: flex;
    flex-direction: column;
    padding-left:20px;
    p{
      flex:1;
      line-height:20px;
    }
    p:nth-child(1){
      font-size:16px;
      font-weight:700;
    }
    p:nth-child(2){
      font-size:14px;
    }
    p:nth-child(3){
      font-size:14px;
    }
  }
  .card-max-big-box{
    margin-top:20px;
    .year-card-box{

    }
    .study-card-box{

    }
    .examination-card-box{

    }
    .for-max-big-box{
      display: inline-block;
      width:360px;
      height:300px;
      margin: 0 0 20px 20px;
      /*border-radius:6px;*/
      /*border:1px solid #dedede;*/
      /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
      overflow: hidden;
      background: linear-gradient(180deg, #fff, #f7faff);
      border: 1px solid #eaf0f8;
      border-radius: 14px;
      .year-card-top-title-box{
        padding:20px 20px 0 20px;
        position: relative;
        height:64px;
        p:nth-child(1){
          font-size:15px;
          font-weight:700;
          line-height:20px;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        p:nth-child(2){
          font-size:14px;
          line-height:20px;
          margin-top:6px;
          color:#60708a;

        }
        p:nth-child(3){
          cursor: pointer;
          font-size:12px;
          line-height:26px;
          color:#60708a;
          text-align: right;
          position: absolute;
          top:0;
          right:10px;
        }
        .color-A{
          color:#999;
        }
        .color-B{
          color:#f56c6c;
        }
        .color-C{
          color:#4fbe7e;
        }
      }
      .bottom-content-box{
        height:208px;
        margin-top:6px;
        padding:8px 14px 0 20px;
        .null-p{
          text-align: center;
          font-size: 14px;
          color:#999;
          line-height: 100px;
        }
        .bottom-big-box-1{
          display: flex;
          /*background-color: rgba(1, 131, 250, 0.1);*/
          border-radius:6px;
          padding:12px 14px;
          margin-bottom:12px;
          height:68px;
          border: 1px solid #e5edf8;
          background-color: #fff;
          p{
            font-size:14px;
            line-height:44px;
          }
          p:nth-child(1){
            flex:1;
            font-size:15px;
            font-weight:700;
          }
          p:nth-child(2){
            width:80px;
            text-align: center;
          }
        }
        .bottom-big-box-2{
          /*background-color: rgba(1, 131, 250, 0.1);*/
          border-radius:6px;
          padding:12px 14px;
          margin-bottom:12px;
          height:68px;
          cursor: pointer;
          border: 1px solid #e5edf8;
          background-color: #fff;
          p{
            font-size:14px;
            line-height:22px;
          }
          p:nth-child(1){
            font-size:15px;
            font-weight:700;
          }
        }
        .bottom-big-box-3{
          /*background-color: rgba(1, 131, 250, 0.1);*/
          border-radius:6px;
          padding:12px 14px;
          margin-bottom:12px;
          height:68px;
          cursor: pointer;
          border: 1px solid #e5edf8;
          background-color: #fff;
          p{
            font-size:14px;
            line-height:22px;
          }
          p:nth-child(1){
            font-size:15px;
            font-weight:700;
          }
        }
        .bottom-big-box-4{
          /*background-color: rgba(1, 131, 250, 0.1);*/
          border-radius:6px;
          padding:12px 14px;
          margin-bottom:12px;
          height:68px;
          display: flex;
          position: relative;
          border: 1px solid #e5edf8;
          background-color: #fff;
          p{
            font-size:14px;
            line-height:44px;
          }
          p:nth-child(1){

          }
          p:nth-child(2){
            flex: 1;
            text-align: right;
          }
          .colorA{
            color:#0183fa;
            cursor: pointer;
          }
          .colorB{
            color:#D9001B;
          }
          .colorC{
            color:#60708a;
          }
          .position-p-1{
            position: absolute;
            bottom:0;
            left:15px;
            width: 120px;
            font-size:12px;
            color:#60708a;
          }
          .text-name{
            margin-top:-10px;
          }
          .text-type{
            color: #4fbe7e;
          }
        }
        .bottom-big-box-5{
          /*background-color: rgba(1, 131, 250, 0.1);*/
          border-radius:6px;
          padding:8px 14px;
          margin-bottom:12px;
          height:76px;
          position: relative;
          border: 1px solid #e5edf8;
          background-color: #fff;
          cursor: pointer;
          .text-name-p{
            font-size:14px;
            font-weight:700;
            line-height:20px;
          }
          .text-flex-box{
            display: flex;
            color:#60708a;
            p{
              font-size:14px;
              line-height:20px;
            }
            p:nth-child(1){
              margin-right:20px;
            }
            p:nth-child(2){
              color:#60708a;
              .color-A{
                color:#999;
              }
              .color-B{
                color:#f56c6c;
              }
              .color-C{
                color:#4fbe7e;
              }
            }
          }
          .time-p{
            color:#60708a;
            font-size:14px;
            line-height:20px;
          }
        }
        .bottom-big-box-6{
          /*background-color: rgba(1, 131, 250, 0.1);*/
          border-radius:6px;
          padding:13px 14px;
          margin-bottom:12px;
          height:78px;
          position: relative;
          border: 1px solid #e5edf8;
          background-color: #fff;
          p:nth-child(1){
            display: block;
            font-size: 22px;
            color: #25324a;
            font-weight:700;
            line-height:26px;
          }
          p:nth-child(2){
            font-size:14px;
            line-height:26px;
            color:#60708a;
          }
        }
      }
    }
  }
}
</style>