建机协会在线练习

src/assets/css/base.css

@@ -224,6 +224,12 @@ button:focus {
 .w840 {
    width: 840px;
 }
+.w220 {
+   width: 220px;
+}
+.w245 {
+   width: 245px;
+}
 
 .post-nav  {
   margin-left: -20px;

src/assets/css/exam.css

@@ -0,0 +1,135 @@
+[v-cloak] {
+  display: none;
+}
+.center {
+  text-align: center;
+}
+.card-header {
+  padding: 10px;
+  margin-top: 30px;
+}
+
+
+.answer-item {
+  padding: 8px;
+  width: 100%;
+}
+
+.answer-title{
+  font-size: 15px;
+  word-wrap:break-word;
+  word-break:normal;
+  white-space:normal;
+  white-space: normal;
+}
+
+
+.el-radio, .el-radio__input{
+  word-wrap:break-word;
+  word-break:normal;
+  white-space: normal;
+}
+
+.el-radio__label{
+  font-size: 15px !important;
+  line-height:150%;
+  letter-spacing: 1px;
+}
+.mark{
+  position:absolute;
+  bottom: 70px;
+  left: 20px;
+}
+.select {
+  background-color: #7FBAE4 !important;
+}
+
+.question {
+  padding: 4px 0;
+  min-height: 100px;
+}
+.question span{
+  padding-left: 20px;
+}
+
+.exam-content {
+  margin: 0 auto;
+  font-size: 17px;
+  margin-top: 40px;
+}
+
+.exam-content .box-card {
+  position: relative;
+  padding: 10px;
+  margin: 10px;
+  min-height: 660px;
+  padding-bottom: 100px;
+}
+
+.page-ctrl{
+  position:absolute;
+  bottom: 40px;
+  right: 40px;
+  padding: 3px 0;
+}
+
+.b-grid {
+  width: 100%;
+  padding: 8px !important;
+  text-align: center !important;
+  background-color: #ffffff;
+}
+.finish {
+  background-color: #add8e6 !important;
+}
+.el-radio__inner{
+  border: 1px solid #1c1c1d;
+  border-radius: 100%;
+  background-color: #FFF;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.red {
+  color: red;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.card-select {
+  margin: 10px auto;
+  font-size: 16px;
+  font-weight: 900;
+  margin-top: 50px;
+}
+.select-item{
+  padding: 0px !important;
+  margin: 1px;
+  margin-top: 5px;
+  height: 36px;
+}
+
+.show-true{
+  font-weight: 900;
+  color: green;
+  padding: 1rem;
+}
+.show-false{
+  font-weight: 900;
+  color: red;
+  padding: 1rem;
+}
+.w130{
+  width: 130px;
+}
+
+.n-select{
+ -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

src/containers/center/play/components/iCourseAnswerTest.vue

@@ -0,0 +1,292 @@
+<template>
+  <div >
+    <ul class="pt-line" style="background-color: #EBEEF5;">
+      <li style="width: 25%;float: left" :class="{activeTest:1==type }">
+        <span @click="type=1"  class="nav-btn-test w245"  > 判断题</span>
+      </li>
+      <li style="width: 25%;float: left" :class="{activeTest:2==type }" >
+        <span @click="type=2" class="nav-btn-test w245" > 单选题</span>
+      </li>
+      <li style="width: 25%;float: left" :class="{activeTest:3==type }">
+        <span @click="type=3"  class="nav-btn-test w245"> 多选题</span>
+      </li>
+      <li style="width: 25%;float: left"  :class="{activeTest:4==type }" v-if="counter[4]>0">
+        <span @click="type=4" class="nav-btn-test w245"> 案例题</span>
+      </li>
+    </ul>
+    <div class="clear"></div>
+
+    <div style="display: flex;margin-top: 16px;">
+
+      <div style="width: 300px;">
+        <el-row :gutter="24" style="height: 600px;overflow-y: scroll;margin-left: 10px;">
+          <el-col :span="4" v-for="cidx in counter[type]" class="select-item" :key="cidx">
+            <el-button class="b-grid" @click="gotoQuestion(cidx-1)" :class="{active:index-1==cidx, 'finish':finishMap[type][cidx-1]}">
+              {{cidx}}
+            </el-button>
+          </el-col>
+        </el-row>
+      </div>
+      </ul>
+
+      <el-card style="width: 750px;min-height: 400px;text-align: left;">
+        <div slot="header" class="clearfix">
+          <span>第{{index+1}}题（{{currentQuestion.type|getType}}）</span>
+        </div>
+        <div class="q-single n-select">
+          <div class="question">
+            题目 : <span v-html="currentQuestion.title"></span>
+          </div>
+          <!-- 当选题 -->
+          <div class="answer" v-if="currentQuestion.type<3">
+            <el-radio-group v-model="currentQuestion.answer" @change="selectRadio">
+              <el-radio class="answer-item" v-for="(item,choiceIdx) in currentQuestion.choice" :label="choiceIdx+1"
+                :key="choiceIdx">
+                <span class="answer-title">{{transformChar[choiceIdx]+'、 '+item}}</span>
+              </el-radio>
+            </el-radio-group>
+            <div class="mt10" v-if="finish">
+              <span v-html="getReult(currentQuestion)"></span>
+            </div>
+          </div>
+
+          <!-- 多选题 -->
+          <div class="answer" v-if="currentQuestion.type==3">
+            <el-checkbox-group v-model="currentQuestion.answer" @change="selectCheckBox">
+              <el-checkbox v-for="(item,choiceIdx) in currentQuestion.choice" :label="choiceIdx+1" :key="choiceIdx"
+                class="answer-item">
+                {{transformChar[choiceIdx]+'、 '+item}}
+              </el-checkbox>
+            </el-checkbox-group>
+
+
+            <div class="mt10 " v-if="finish">
+              <span v-html="getReult(currentQuestion)"></span>
+            </div>
+          </div>
+
+          <!-- 案例题 -->
+          <div class="answer" v-if="currentQuestion.type==4">
+            <div v-for="(child,cidx) in currentQuestion.child" :key="child.id">
+              {{cidx+1}}[{{child.type|getType}}]: <span v-html="child.title"></span>
+
+              <div class="answer" v-if="child.type==3">
+                <el-checkbox-group v-model="answers['answer'+cidx]" @change="(e)=>{selectCheckBox(e,cidx)}">
+                  <el-checkbox v-for="(item,choiceIdx) in child.choice" :label="choiceIdx+1" :key="choiceIdx" class="answer-item">
+                    {{transformChar[choiceIdx]+'、'+item}}
+                  </el-checkbox>
+                </el-checkbox-group>
+                <div class="mt10" v-if="finish">
+                  <span v-html="getReult(child)"></span>
+                </div>
+              </div>
+
+              <div class="answer" v-else>
+                <el-radio-group v-model="answers['answer'+cidx]" @change="(e)=>{selectRadio(e, cidx)}">
+                  <el-radio class="answer-item" v-for="(item,choiceIdx) in child.choice" :label="choiceIdx+1" :key="choiceIdx">
+                    <span class="answer-title">{{transformChar[choiceIdx]+'、 '+item}}</span>
+                  </el-radio>
+                </el-radio-group>
+                <div class="mt10" v-if="finish">
+                  <span v-html="getReult(child)"></span>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+        <div class="tc" v-if="!finish">
+          <el-button type="primary" @click="submitQustion" >完成</el-button>
+        </div>
+        <div class="tc" v-else>
+          <el-button type="primary" :disabled="index<1" @click="prevQuestion" >上一题</el-button>
+          <el-button type="primary" :disabled="index>=counter[type]" @click="nextQuestion">下一题</el-button>
+        </div>
+      </el-card>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import {
+    httpServer
+  } from "@/components/httpServer/httpServer.js";
+  import {
+    getSelect
+  } from "@/containers/center/exam/components/util.js";
+  export default {
+    data() {
+      return {
+        index: 0,
+        id: 0,
+        type: 1,
+        finish: false,
+        transformChar: ["A", "B", "C", "D", "E"],
+        currentQuestion: {
+          child: [],
+          choice: []
+        },
+        finishMap:{1:{},2:{},3:{},4:{}},
+        answers: {
+          answerlist: [],
+          answer: '',
+          answer0: '',
+          answer1: '',
+          answer2: '',
+          answer3: '',
+          answer4: '',
+        },
+        counter: {
+          1: 200,
+          2: 400,
+          3: 100,
+          4: 30
+        }
+      }
+    },
+    props: ['info', 'tpl', 'groupId'],
+    mounted() {
+      this.id = this.info.id || 0;
+      console.log("groupId", this.groupId)
+      this.loadPaperInfo()
+    },
+    watch: {
+      type() {
+        this.index = 0;
+        this.loadAnswer();
+      }
+    },
+    filters: {
+      getType(val) {
+        const d = {
+          1: '判断题',
+          2: '单选题',
+          3: '多选题',
+          4: '案例题'
+        }
+        return d[val]
+      }
+    },
+    methods: {
+      submitQustion() {
+        let param = {
+          id: this.id,
+          groupId: this.groupId,
+          type: this.type,
+          index: this.index,
+        }
+        this.finish = true
+      },
+      showResult(index) {
+        let val = '' + index;
+        val = val.replaceAll('1', 'A').replaceAll('2', 'B').replaceAll('3', 'C').replaceAll('4', 'D').replaceAll('5',
+          'E');
+        return val.split('').join(',')
+      },
+      getReult(item) {
+        let select = getSelect(item.answer);
+        let result = this.showResult(item.result)
+        if (select == item.result) {
+          return `正确答案：<span class="show-true">${result}</span>`
+        } else {
+          return `正确答案：<span class="show-false">${result}</span>`
+        }
+      },
+      prevQuestion() {
+        if (this.index < 1) return;
+        this.index--
+        this.loadAnswer()
+      },
+      nextQuestion() {
+        this.index++
+        this.loadAnswer()
+      },
+      gotoQuestion(index) {
+        this.index = index
+        this.loadAnswer()
+      },
+      selectRadio(value, cidx) {
+        if (this.currentQuestion.type == 4) {
+          this.currentQuestion.child[cidx].answer = value;
+        }
+        this.currentQuestion.answer = value;
+        this.$forceUpdate()
+      },
+      selectCheckBox(value, cidx) {
+        if (this.currentQuestion.type == 4) {
+          this.currentQuestion.child[cidx].answer = value;
+        }
+        this.currentQuestion.answer = value;
+        this.$forceUpdate()
+      },
+      doLoadQuestion(item) {
+        item.choice = [];
+        for (let i = 0; i < 6; i++) {
+          let mkey = "answer" + i
+          if (item[mkey]) item.choice.push(item[mkey]);
+        }
+        item.answer = [];
+        if (item.type == 4) {
+          for (let i in item.child) {
+            let child = item.child[i]
+            child.choice = [];
+            child.answer = [];
+            this.answers['answer' + i] = child.answer;
+            for (let i = 0; i < 6; i++) {
+              let mkey = "answer" + i
+              if (child[mkey]) child.choice.push(child[mkey]);
+            }
+          }
+        } else {
+          item.child = []
+        }
+        this.finish = false
+        this.currentQuestion = item
+      },
+      loadPaperInfo(){
+        let param = {
+          groupId: this.groupId,
+        }
+        httpServer("course.loadPaperInfo", param).then(res => {
+          if (res.code != 200) return;
+          this.counter[1] = res.data.count1||0;
+          this.counter[2] = res.data.count2||0;
+          this.counter[3] = res.data.count3||0;
+          this.counter[4] = res.data.count4||0;
+          this.loadAnswer()
+        })
+      },
+      loadAnswer() {
+        let param = {
+          id: this.id,
+          groupId: this.groupId,
+          type: this.type,
+          index: this.index,
+        }
+        httpServer("course.loadPaperAnswer", param).then(res => {
+          if (res.code != 200) return;
+          if (this.index == 0) this.index = res.data.index;
+          this.finishMap[this.type][this.index] = true
+          this.doLoadQuestion(res.data.info || {})
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="css">
+  @import url("../../../../assets/css/exam.css");
+  .activeTest{
+    color: blue;
+    background-color: #3290D4;
+  }
+  .nav-btn-test {
+    border: 1px;
+    font-size: 16px;
+    font-weight: 600;
+    padding: 12px;
+    border: 1px solid #EBEEF5;
+    text-align: center;
+  }
+</style>

src/containers/center/play/index.vue

@@ -3,15 +3,15 @@
 
     <el-row class="p20">
       <el-col :span="6">
-       <img :src="tpl.tb"  width="200px" style="border-radius: 20px;"  />
+        <img :src="tpl.tb" width="200px" style="border-radius: 20px;" />
       </el-col>
       <el-col :span="6">
         <div>
           <p style="font-size: 24px;"> 课程信息 </p>
-          <p class="mt10" >岗位名称：{{tpl.name}} </p>
-          <p class="mt10" >课程学时：<strong style="color: red;">{{tpl.xs/10}} </strong>学时
+          <p class="mt10">岗位名称：{{tpl.name}} </p>
+          <p class="mt10">课程学时：<strong style="color: red;">{{tpl.xs/10}} </strong>学时
           </p>
-          <p class="mt10" v-if="tpl.examGroupId" >课程年度：
+          <p class="mt10" v-if="tpl.examGroupId">课程年度：
             <strong style="color: red;">{{tpl.nd}} </strong>
           </p>
         </div>
@@ -19,29 +19,34 @@
       <el-col :span="6">
         <div>
           <p style="font-size: 24px;"> 学习信息 </p>
-          <p class="mt10" >学习情况：
+          <p class="mt10">学习情况：
             完成 <strong style="color: red;">{{info.getXs/10}} </strong>
             共计 <strong style="color: red;">{{info.totalXs/10}}</strong>
           </p>
-          <p class="mt10" v-if="tpl.examGroupId" >最高分数：
+          <p class="mt10" v-if="tpl.examGroupId">最高分数：
             <strong style="color: red;">{{info.score}} </strong>
-             分
+            分
           </p>
-          <p class="mt10" v-if="tpl.examGroupId" >开始时间：
+          <p class="mt10" v-if="tpl.examGroupId">开始时间：
             <strong style="color: red;">{{info.startDate}} </strong>
           </p>
         </div>
       </el-col>
 
       <el-col :span="6">
-        <div>
-          <el-button type="primary" class="mt10" style="font-size: 14px;" @click="startExam" v-if="tpl.examGroupId>0">
+          <p>
+          <el-button type="primary" class="mt10" style="font-size: 14px;"  @click="startExam" v-if="tpl.examGroupId>0">
             模拟练习
           </el-button>
-          <el-button type="warning" class="mt10" style="font-size: 14px;" @click="printCert">
+</p><p>
+          <el-button type="success" class="mt10" style="font-size: 14px;"  @click="startExamTest" v-if="tpl.examGroupId>0">
+            在线练习
+          </el-button>
+</p><p>
+          <el-button type="warning" class="mt10" style="font-size: 14px;"  @click="printCert">
             学时证明
           </el-button>
-         </div>
+          </p>
       </el-col>
 
     </el-row>
@@ -50,14 +55,14 @@
 
       <div class="m-account">
         <div class="account-tit" style="height:30px">
-          <a :class="{'current':show===1}"  @click="show=1" class="">正在学习</a>
-          <a :class="{'current':show===2}"  @click="show=2" class="">已经完成</a>
-          <a :class="{'current':show===3}"  @click="show=3" class="" v-if="tpl.examGroupId>0">考试记录</a>
+          <a :class="{'current':show===1}" @click="show=1" class="">正在学习</a>
+          <a :class="{'current':show===2}" @click="show=2" class="">已经完成</a>
+          <a :class="{'current':show===3}" @click="show=3" class="" v-if="tpl.examGroupId>0">考试记录</a>
         </div>
 
         <div v-if="show <3" class="lwh-ul-form mt20">
           <!-- 列表展示 -->
-          <el-table :data="showList" border stripe style="width: 100%;"  >
+          <el-table :data="showList" border stripe style="width: 100%;">
             <el-table-column label="NO." prop="id" width="50" align="center">
               <template v-slot="{$index}">
                 <span> {{$index+1}}</span>
@@ -80,14 +85,8 @@
             <el-table-column label="学习进度" prop="useTime" align="left" width="220">
               <template v-slot="{row}">
                 <span style="display: flex;">
-                  <el-progress
-                    type="line"
-                    style="width: 120px;"
-                    :stroke-width="26"
-                    :text-inside="true"
-                    :show-text="false"
-                    :percentage="row.percent"
-                    :class="row.percent|showProgressColor">
+                  <el-progress type="line" style="width: 120px;" :stroke-width="26" :text-inside="true" :show-text="false"
+                    :percentage="row.percent" :class="row.percent|showProgressColor">
                   </el-progress>
                   <span style="margin-left: 10px;"> {{row.percent}}% </span>
                 </span>
@@ -107,38 +106,26 @@
           <exam-list :courseId="courseId"> </exam-list>
         </div>
       </div>
-     </div>
-    <el-dialog
-     class="fc tc media-dialog"
-     :visible.sync="mediaDialog"
-     append-to-body
-     top="50px"
-     :title="media.name"
-     :close-on-click-modal="false"
-     width="640px"
-     >
+    </div>
+    <el-dialog class="fc tc media-dialog" :visible.sync="mediaDialog" append-to-body top="50px" :title="media.name"
+      :close-on-click-modal="false" width="640px">
 
-        <Media
-          :options="options"
-          :dialog="mediaDialog"
-          :media="media"
-          :duration="info.duration"
-          @close="mediaDialog=false"
-          @update="update">
-        </Media>
-        <span slot="footer" class="dialog-footer mt5">
-          <el-button type="warning" @click="mediaDialog=false">退出播放</el-button>
-          <el-select placeholder="流畅" v-model="mediaType" style="width: 80px;">
-            <el-option label="流畅" value="ld"></el-option>
-            <el-option label="标清" value="hls"></el-option>
-          </el-select>
-        </span>
+      <Media :options="options" :dialog="mediaDialog" :media="media" :duration="info.duration" @close="mediaDialog=false"
+        @update="update">
+      </Media>
+      <span slot="footer" class="dialog-footer mt5">
+        <el-button type="warning" @click="mediaDialog=false">退出播放</el-button>
+        <el-select placeholder="流畅" v-model="mediaType" style="width: 80px;">
+          <el-option label="流畅" value="ld"></el-option>
+          <el-option label="标清" value="hls"></el-option>
+        </el-select>
+      </span>
 
     </el-dialog>
 
-    <el-dialog title="输入认证" center :visible.sync="editRzcode"  >
-      <el-form  label-width="120px" ref="elAdd">
-        <el-form-item  label="认证编号">
+    <el-dialog title="输入认证" center :visible.sync="editRzcode">
+      <el-form label-width="120px" ref="elAdd">
+        <el-form-item label="认证编号">
           <el-input v-model="info.rzCode" type="text" disabled></el-input>
         </el-form-item>
       </el-form>
@@ -148,30 +135,51 @@
       </div>
     </el-dialog>
 
+    <el-dialog class="previewDialog" :visible.sync="testExamDalog"
+      :title="'在线练习-'+tpl.name"
+       center
+       style="color:red"
+       top="50px" width="1024px"
+       @close="testExamDalog=false">
+       <ICourseAnswerTest :info="info" :tpl="tpl" :groupId="examGroupId" > </ICourseAnswerTest>
+     </el-dialog>
+
   </div>
 </template>
 
 <script>
-  import {httpServer } from "@/components/httpServer/httpServer.js";
+  import {
+    httpServer
+  } from "@/components/httpServer/httpServer.js";
   import Media from "./components/media.vue";
   import ExamList from "./components/ExamList.vue";
-  import {getPercent} from '@/utils/index.js'
-   import {delExam} from '../exam/components/util.js'
+  import ICourseAnswerTest from "./components/iCourseAnswerTest.vue";
+  import {
+    getPercent
+  } from '@/utils/index.js'
+  import {
+    delExam
+  } from '../exam/components/util.js'
   import md5 from 'js-md5';
   export default {
     name: "Index",
     data() {
       return {
         courseId: 0,
-        show:1,
+        examGroupId:0,
+        show: 1,
         mediaDialog: false,
-        mediaType:'hls',
-        mediaUrl:'',
+        mediaType: 'hls',
+        mediaUrl: '',
         editRzcode: false,
-        info: {score:0, percent:0},
-        tpl:{},
-        media:{},
-        options:{
+        testExamDalog: false,
+        info: {
+          score: 0,
+          percent: 0
+        },
+        tpl: {},
+        media: {},
+        options: {
           autoplay: true, // 如果true,浏览器准备好时开始回放。
           muted: false, // 默认情况下将会消除任何音频。
           loop: false, // 导致视频一结束就重新开始。
@@ -195,162 +203,203 @@
           }
         },
         list: [],
-        showList:[],
+        showList: [],
       };
     },
-    components:{Media,ExamList},
+    components: {
+      Media,
+      ICourseAnswerTest,
+      ExamList
+    },
     beforeMount() {
       this.courseId = +this.$route.params.courseId
       this.getData()
     },
-    watch:{
-      show(val){
+    watch: {
+      show(val) {
         this.updateShowList()
       },
-      mediaType(val){
+      mediaType(val) {
         let mediaUrl = this.mediaUrl;
-        if( val == 'ld'){
+        if (val == 'ld') {
           mediaUrl = mediaUrl.replace('/hls/', '/ld/');
         }
-        this.options.sources = [{src:mediaUrl,type: "application/x-mpegURL"}];
-        this.options.playtimes = this.media.position||0;
-        this.options.autoplay = this.options.playtimes>0;
+        this.options.sources = [{
+          src: mediaUrl,
+          type: "application/x-mpegURL"
+        }];
+        this.options.playtimes = this.media.position || 0;
+        this.options.autoplay = this.options.playtimes > 0;
         this.mediaDialog = true;
       }
     },
-    filters:{
-      showProgressColor: function (val) {
-      	if (val == '进行中') {
-          	return val = 'el-bg-inner-running';
-          } else if (val == '失败') {
-             return val = 'el-bg-inner-error'
-         } else if (val == '完成') {
-             return val = 'el-bg-inner-done'
-         }
+    filters: {
+      showProgressColor: function(val) {
+        if (val == '进行中') {
+          return val = 'el-bg-inner-running';
+        } else if (val == '失败') {
+          return val = 'el-bg-inner-error'
+        } else if (val == '完成') {
+          return val = 'el-bg-inner-done'
+        }
       },
-      useTime(val){
+      useTime(val) {
         let timestr = ""
-        timestr+=  val> 3600?parseInt(val/3600):"0";
-        timestr+=  ":"+(val> 60?parseInt((val%3600)/60):"00");
-        timestr += ":" + (val%60);
+        timestr += val > 3600 ? parseInt(val / 3600) : "0";
+        timestr += ":" + (val > 60 ? parseInt((val % 3600) / 60) : "00");
+        timestr += ":" + (val % 60);
         return timestr
       }
     },
     methods: {
-      startExam( ){
+      startExam() {
         let courseId = this.courseId
         delExam()
         this.$router.push(`/center/exam/${courseId}`);
       },
-      printCert( ){
-        if( this.info.getXs < this.info.totalXs ){
+      startExamTest( ){
+        this.examGroupId = this.tpl.examGroupId;
+        this.testExamDalog = true;
+      },
+      printCert() {
+        if (this.info.getXs < this.info.totalXs) {
           this.$message.errorMsg("课程还未完成", 2)
           return;
         }
-        if( this.tpl.examGroupId >0 && this.info.score < 60){
+        if (this.tpl.examGroupId > 0 && this.info.score < 60) {
           this.$message.errorMsg("考试未通过", 2)
           return;
         }
-        let {id, rzCode} = this.info
+        let {
+          id,
+          rzCode
+        } = this.info
         // this.editRzcode = true
-        httpServer('Cert.printCert', {rzCode, id}).then( res => {
-          if( res.code == 200 ){
+        httpServer('Cert.printCert', {
+          rzCode,
+          id
+        }).then(res => {
+          if (res.code == 200) {
             this.editRzcode = false;
-            this.info.tmpRzCode="";
-            window.open(  res.data.url )
+            this.info.tmpRzCode = "";
+            window.open(res.data.url)
           }
         })
       },
-      cancelRzCode(){
-        this.info.rzCode= this.info.tmpRzCode;
+      cancelRzCode() {
+        this.info.rzCode = this.info.tmpRzCode;
         this.editRzcode = false;
       },
-      doAddRzCode(){
-        let {type, rzCode, id} = this.info;
-        if( !rzCode ) rzCode = "sm"+id
-        httpServer('Cert.printCert', {rzCode, id}).then( res => {
-          if( res.code == 200 ){
+      doAddRzCode() {
+        let {
+          type,
+          rzCode,
+          id
+        } = this.info;
+        if (!rzCode) rzCode = "sm" + id
+        httpServer('Cert.printCert', {
+          rzCode,
+          id
+        }).then(res => {
+          if (res.code == 200) {
             this.editRzcode = false;
-            this.info.tmpRzCode="";
-            window.open(  res.data.url )
+            this.info.tmpRzCode = "";
+            window.open(res.data.url)
           }
         })
       },
       formatFinish() {
-        let {gxs,axs} = this.info;
-        if( !axs ) axs = 1;
+        let {
+          gxs,
+          axs
+        } = this.info;
+        if (!axs) axs = 1;
         return `获得${gxs}学时, 总共${axs}学时`;
       },
       formatExam() {
-        let {score} = this.info
-        if( score == -1 ) return `已答0次，未通过`;
+        let {
+          score
+        } = this.info
+        if (score == -1) return `已答0次，未通过`;
         return `最高${score<1?0:score}分, ${score>=60?'通过':'未通过'}`;
       },
       formatPass() {
-        let {score} = this.info
-        if( score == -1 ) return `未参加`;
+        let {
+          score
+        } = this.info
+        if (score == -1) return `未参加`;
         return `${score||0}分,${score>=60?'通过':'未通过'}`;
       },
-      formatString(val){
-        return ()=> val;
+      formatString(val) {
+        return () => val;
       },
       getData() {
-        let param = { courseId: this.courseId }
+        let param = {
+          courseId: this.courseId
+        }
         httpServer("course.getCourse", param).then(res => {
           if (res.code == 200) {
             this.info = res.data.info;
             let list = res.data.list;
-            this.tpl = res.data.tpl||{};
-            this.list = list.map( (item)=>{
-              item.percent = getPercent(item)||0;
+            this.tpl = res.data.tpl || {};
+            this.list = list.map((item) => {
+              item.percent = getPercent(item) || 0;
               return item;
             })
             this.updateShowList()
           }
         })
       },
-      updateShowList(){
+      updateShowList() {
         let show = this.show;
-        this.showList = this.list.filter( item=>{
-          if( show == 1) return !item.isFinish
-          if( show == 2) return !!item.isFinish
+        this.showList = this.list.filter(item => {
+          if (show == 1) return !item.isFinish
+          if (show == 2) return !!item.isFinish
           return false
         })
         //
         this.info.gxs = 0
         this.info.axs = 0;
         this.info.tcount = this.list.length;
-        this.info.fcount =0;
+        this.info.fcount = 0;
         this.info.percent = 0;
-        for( let i = 0; i< this.list.length;i++){
+        for (let i = 0; i < this.list.length; i++) {
           let item = this.list[i]
-          this.info.axs  += (item.xs/10)
-          if( item.isFinish ){
-            this.info.gxs += (item.xs/10)
+          this.info.axs += (item.xs / 10)
+          if (item.isFinish) {
+            this.info.gxs += (item.xs / 10)
             this.info.fcount++
           }
         }
-        this.info.percent = (this.info.gxs*10000/this.info.axs)/100;
+        this.info.percent = (this.info.gxs * 10000 / this.info.axs) / 100;
       },
       //
-      update( item ){
+      update(item) {
         let index = this.media.index
-        if( item.position ) this.media.position = item.position
+        if (item.position) this.media.position = item.position
         this.media.isFinish = item.isFinish
         this.media.id = item.id
         this.media.percent = getPercent(this.media);
         this.updateShowList()
       },
       // 加载媒体
-      loadMedia( item, index ) {
+      loadMedia(item, index) {
         this.media = item;
         this.media.index = index
-        httpServer('course.GetMedia', {id:item.id}).then( ({data, code}) => {
+        httpServer('course.GetMedia', {
+          id: item.id
+        }).then(({
+          data,
+          code
+        }) => {
           this.mediaUrl = data
           this.mediaType = 'hls';
-          this.options.sources = [{src:this.mediaUrl,type: "application/x-mpegURL"}];
+          this.options.sources = [{
+            src: this.mediaUrl,
+            type: "application/x-mpegURL"
+          }];
           this.options.playtimes = item.position;
-          this.options.autoplay = item.position>0;
+          this.options.autoplay = item.position > 0;
           this.mediaDialog = true;
         });
       }
@@ -363,44 +412,52 @@
   @import "../../../assets/css/course.css";
   @import url("../../../assets/css/m-account.css");
   @import url("./index.css");
-  .media-dialog .el-dialog__header{
+
+  .media-dialog .el-dialog__header {
     /* display: none !important; */
-   }
-  .media-dialog .el-dialog__body{
+  }
+
+  .media-dialog .el-dialog__body {
     padding: 0 !important;
-   }
-   .media-dialog .el-scrollbar__wrap {
-    overflow-x: hidden!important;
   }
 
-   .mprocess{
-     margin: 0 auto;
-     width: 150px !important;
-   }
-   .el-progress{
-     width: 100%;
-   }
-   .el-progress__text{
-     font-size: 16px;
-     font-weight: 700;
-     line-height:1.5;
-     color: #3290D4;
-   }
-   .el-progress-bar__outer{
-     height: 20px!important;
-     border: 1px solid #78335f;
-     background-color:transparent;
-   }
+  .media-dialog .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+
+  .mprocess {
+    margin: 0 auto;
+    width: 150px !important;
+  }
+
+  .el-progress {
+    width: 100%;
+  }
+
+  .el-progress__text {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1.5;
+    color: #3290D4;
+  }
 
-   /* 渐变进度条 */
-   .el-bg-inner-running .el-progress-bar__inner{
-     background-color: unset;
-     background-image: linear-gradient(to right, #3587d8 , #6855ff);
-   }
-   .el-bg-inner-error .el-progress-bar__inner{
-     background-image: linear-gradient(to right, #3587d8 , #fb3a7e);
-   }
-   .el-bg-inner-done .el-progress-bar__inner{
-     background-image: linear-gradient(to right, #3587d8 , #53ff54);
-   }
+  .el-progress-bar__outer {
+    height: 20px !important;
+    border: 1px solid #78335f;
+    background-color: transparent;
+  }
+
+  /* 渐变进度条 */
+  .el-bg-inner-running .el-progress-bar__inner {
+    background-color: unset;
+    background-image: linear-gradient(to right, #3587d8, #6855ff);
+  }
+
+  .el-bg-inner-error .el-progress-bar__inner {
+    background-image: linear-gradient(to right, #3587d8, #fb3a7e);
+  }
+
+  .el-bg-inner-done .el-progress-bar__inner {
+    background-image: linear-gradient(to right, #3587d8, #53ff54);
+  }
 </style>