feat: 接口对接

2022-02-22 17:53:04 +08:00 · 2022-02-22 17:53:04 +08:00 · f797c6a418
parent de5cd00958
commit f797c6a418
20 changed files with 695 additions and 309 deletions
--- a/src/api/mycourse/index.js
+++ b/src/api/mycourse/index.js
@ -9,9 +9,12 @@ const mycourseApi = {
    recommendDetail: 'sys/recommend/detail', // 系统课程推荐详情
    getCourseDetail: 'myCourse/getCourseDetail', // 我的课程详情
    getCourseCatalogue: 'myCourse/getCourseCatalogue', // 获取课程目录
+    reqCourseExam: 'testInClass/add', // 课中检测
    simulateTestList: 'simulateTest/list', // 模拟测试列表
    simulateTestDetail: 'simulateTest/getQuestions', // 获取模拟测试详情
-    operationList: 'classwork/getDetail', // 作业列表
+    operationList: 'classwork/list', // 作业列表
+    reqOperationDetail: 'classwork/get', // 作业详情
+    reqOperationSubmit: 'classwork/submit', // 作业提交
    getMyCourseList: 'studyStatistics/getMyCourseList' // 课程学习统计
 }

@ -23,10 +26,26 @@ export function reqMycourseCount (params) {
    })
 }

+export function reqOperationDetail (params) {
+    return request({
+        url: mycourseApi.reqOperationDetail,
+        method: 'get',
+        params: params
+    })
+}
+
+export function reqOperationSubmit (params) {
+    return request({
+        url: mycourseApi.reqOperationSubmit,
+        method: 'post',
+        data: params
+    })
+}
+
 export function reqOperationList (params) {
    return request({
        url: mycourseApi.operationList,
-        method: 'post',
+        method: 'get',
        params: params
    })
 }
@ -111,3 +130,12 @@ export function reqCourseCatalogue (params) {
        params: params
    })
 }
+
+export function reqCourseExam (params, data) {
+    return request({
+        url: mycourseApi.reqCourseExam,
+        method: 'post',
+        params: params,
+        data: data
+    })
+}
--- a/src/api/myexam/exam.js
+++ b/src/api/myexam/exam.js
@ -6,7 +6,8 @@ const examApi = {
    exam: 'exam/exam', // 我的考试进入考试
    viewReport: 'exam/viewReport', // 查看报告
    viewResolution: 'exam/viewResolution', // 查看解析
-    submit: 'exam/submit' // 交卷
+    submit: 'exam/submit', // 交卷
+    subscribe: '/exam/subscribe'
 }

 export function reqExamViewResolution (data) {
@ -17,6 +18,14 @@ export function reqExamViewResolution (data) {
    })
 }

+export function reqExamSubscribe (data) {
+    return request({
+        url: examApi.subscribe,
+        method: 'get',
+        params: data
+    })
+}
+
 export function reqExamSubmit (data) {
    return request({
        url: examApi.submit,
--- a/src/components/DbExam/index.vue
+++ b/src/components/DbExam/index.vue
@ -8,7 +8,7 @@
          <b style="margin-left: 5px;"><a-statistic-countdown :value="deadline" :valueStyle="{ fontSize: '16px' }" @finish="onFinish"/></b>
        </div>
        <DbAnswerCard :data="data"></DbAnswerCard>
-        <div class="answer-cart-footer flex-center">
+        <div class="answer-cart-footer flex-center" style="margin-top: 20px;">
          <a-button @click="handlerSubmit" type="primary" size="large">交卷</a-button>
        </div>
      </a-card>
--- a/src/components/DbLearnCount/index.vue
+++ b/src/components/DbLearnCount/index.vue
@ -3,23 +3,25 @@
    <a-row>
      <a-col class="title-info">
        <span class="label">课程名称：</span>
-        <span class="value">安全培训项目第一期</span>
+        <span class="value">{{ data.projectName }}</span>
      </a-col>
      <a-col class="title-info">
        <span class="label">课时统计：</span>
-        <span class="value">10课时（1/10）</span>
+        <span class="value">
+          {{ data.totalHours }}课时（{{ data.learnedHours }}/{{ data.totalHours }}）
+        </span>
      </a-col>
      <a-col class="title-info">
-        <span class="label">考试成绩：</span>
-        <span class="value">100分</span>
+        <span class="label">培训方式：</span>
+        <span class="value">{{ data.trainWay | trainWayText }}</span>
      </a-col>
      <a-col class="title-info">
-        <span class="label">学习时间：</span>
-        <span class="value">100分钟</span>
+        <span class="label">开始时间：</span>
+        <span class="value">{{ data.startDate }}</span>
      </a-col>
      <a-col class="title-info">
-        <span class="label">学习方式：</span>
-        <span class="value">学习+考试</span>
+        <span class="label">学习状态：</span>
+        <span class="value">{{ data.status }}</span>
      </a-col>
    </a-row>
  </div>
@ -35,6 +37,28 @@ export default {
  },
  data () {
    return {}
+  },
+  filters: {
+    trainWayText: function (value) {
+      let result = ''
+      switch (value) {
+        case '1':
+          result = '培训'
+          break
+        case '2':
+          result = '考试'
+          break
+        case '3':
+          result = '培训练习'
+          break
+        case '4':
+          result = '培训练习考试'
+          break
+        default:
+          break
+      }
+      return result
+    }
  }
 }
 </script>
--- a/src/components/DbQuestionItem/index.vue
+++ b/src/components/DbQuestionItem/index.vue
@ -2,12 +2,12 @@
  <div class="question-item">
    <div class="question-title">
      <span>{{ index || 1 }}、</span>
-      <span>({{ $getQuestionTypeText(type) }})</span>
+      <span>({{ $getQuestionTypeText(data.questionType) }})</span>
      <span v-html="data.questionName"></span>
    </div>
    <div class="options-box">
      <!-- 单选题选项 -->
-      <template v-if="type == 1">
+      <template v-if="data.questionType == 1">
        <a-radio-group v-model="data.myAnswers">
          <a-radio v-if="data.answerA" :style="radioStyle" value="A"><span>A、</span>{{ data.answerA }}</a-radio>
          <a-radio v-if="data.answerB" :style="radioStyle" value="B"><span>B、</span>{{ data.answerB }}</a-radio>
@ -18,7 +18,7 @@
        </a-radio-group>
      </template>
      <!-- 多选题选项 -->
-      <template v-if="type == 2">
+      <template v-if="data.questionType == 2">
        <a-checkbox-group v-model="data.myAnswers">
          <a-col :span="24">
            <a-checkbox v-if="data.answerA" value="A" :style="radioStyle"><span>A、</span>{{ data.answerA }}</a-checkbox>
@ -31,14 +31,14 @@
        </a-checkbox-group>
      </template>
      <!-- 判断题选项 -->
-      <template v-if="type == 3">
+      <template v-if="data.questionType == 3">
        <a-radio-group v-model="data.myAnswers">
          <a-radio :style="radioStyle" value="A"><span>A、</span>{{ data.answerA || '正确' }}</a-radio>
          <a-radio :style="radioStyle" value="B"><span>B、</span>{{ data.answerB || '错误' }}</a-radio>
        </a-radio-group>
      </template>
      <!-- 填空题 -->
-      <template v-if="type == 4">
+      <template v-if="data.questionType == 4">
        <a-row :gutter="50" style="font-size: 14px;">
          <a-col
            :span="12"
@ -69,7 +69,7 @@
        </a-row>
      </template>
      <!-- 简单题 -->
-      <template v-if="type == 5">
+      <template v-if="data.questionType == 5">
        <div style="font-size: 14px;padding-bottom: 5px;">答案区:</div>
        <a-row>
          <a-textarea placeholder="请填写答案" :rows="4" />
@ -85,10 +85,6 @@ export default {
    index: {
      type: Number,
      default: 0
-    }, // 题目序号
-    type: {
-      type: [String, Number], // 1: 单选, 2: 多选, 3: 判断题, 4: 填空题, 5: 简答题
-      default: 1
    },
    data: {
      type: Object,
@ -131,5 +127,6 @@ export default {

 ::v-deep .ant-checkbox-wrapper + .ant-checkbox-wrapper{
  margin-left: 0;
+  height: auto !important;
 }
 </style>
--- a/src/components/DbReport/index.vue
+++ b/src/components/DbReport/index.vue
@ -5,10 +5,18 @@
        <a-card title="得分统计" :bordered="false">
          <a-row :gutter="30" style="margin: 15px 0;">
            <a-col :span="12" class="flex-center">
-              <a-progress type="circle" :percent="score/totalScore * 100" :format="percent => `${percent} 分`" />
+              <a-progress
+                type="circle"
+                :percent="data.score / (data.totalScore * 100)"
+                :format="percent => `${percent} 分`"
+              />
            </a-col>
            <a-col class="count-info" :span="12">
-              <div>共{{ data.totalQuestions }}道题，答对{{ data.rightQuestions }}道。总用时{{ data.answerTime }}分钟</div>
+              <div>
+                共{{ data.totalQuestions }}道题，答对{{ data.rightQuestions }}道。总用时{{
+                  data.answerTime
+                }}分钟
+              </div>
              <div>已击败考生{{ data.beat }}%的考生</div>
              <div>全站平均得分{{ data.avgScore }}分</div>
            </a-col>
@ -28,12 +36,17 @@
      <a-col :span="24" style="margin-top: 15px;">
        <a-card title="答题卡" :bordered="false">
          <ul class="answer-box">
-            <li class="flex-center" v-for="(item, index) in data.reportItems" :key="index">{{ index+1 }}</li>
+            <li
+              :class="['flex-center', {'is-right': item.answerType === 1}]"
+              v-for="(item, index) in data.reportItems"
+              :key="index"
+            >
+              {{ index + 1 }}
+            </li>
          </ul>
        </a-card>
      </a-col>
    </a-row>
-
  </div>
 </template>

@ -80,11 +93,11 @@ export default {
 </script>

 <style lang="less" scoped>
-::v-deep .ant-card-head{
+::v-deep .ant-card-head {
  padding-left: 0 !important;
 }

-.count-info{
+.count-info {
  font-weight: bold;
  color: #333;
  line-height: 2;
@ -94,17 +107,20 @@ export default {
  height: 112px;
 }

-.answer-box{
+.answer-box {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 0;
-  li{
+  li {
    background: red;
    color: #fff;
    height: 60px;
  }
+  .is-right{
+    background: green;
+  }
 }
 </style>
--- a/src/views/mycollection/index.vue
+++ b/src/views/mycollection/index.vue
@ -27,7 +27,7 @@
              </div>
            </template>
            <div class="flex-center">
-              <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'record')}" :default-current="wrongInfo.pageNum" :total="wrongInfo.total" />
+              <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'wrong')}" :default-current="wrongInfo.pageNum" :total="wrongInfo.total" />
            </div>
          </template>
          <a-empty style="margin: 30px 0;" v-else />
@ -47,7 +47,7 @@
          </div>
        </a-card>
        <div class="flex-center">
-          <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'wrong')}" :default-current="recordInfo.pageNum" :total="recordInfo.total" />
+          <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'record')}" :default-current="recordInfo.pageNum" :total="recordInfo.total" />
        </div>
      </a-tab-pane>
    </a-tabs>
--- a/src/views/mycourse/courseLearn/CourseCatalogue.vue
+++ b/src/views/mycourse/courseLearn/CourseCatalogue.vue
@ -2,16 +2,39 @@
  <div class="CourseCatalogue-box">
    <ul class="list-box">
      <li class="list-item" v-for="(item, index) in catalogueList" :key="index">
-        <div class="list-item-title"><span style="margin-right: 10px;">第{{ capitalizeNumber[index] }}章</span>{{ item.name }}</div>
+        <div class="list-item-title">
+          <span style="margin-right: 10px;">第{{ capitalizeNumber[index] }}章</span>
+          {{ item.name }}
+        </div>
        <ul class="sub-list">
-          <li @click="handlerItem(j, item)" class="sub-list-item" v-for="(j, k) in item.courseList" :key="`${index}-${k}`">
-            <div class="sub-item-info">
-              <VideoOne theme="filled" fill="#ccc" style="margin-right: 6px;" size="1.2em"></VideoOne>{{index+1}}.{{k+1}}
-              {{item.name}}
+          <li
+            @click="handlerItem(j, item)"
+            class="sub-list-item"
+            v-for="(j, k) in item.courseList"
+            :key="`${index}-${k}`"
+          >
+            <div
+              :class="[
+                'sub-item-info',
+                { 'sub-item-info-success': j.status === 1 },
+                {
+                  'sub-item-info-active': j.id === curVideo.id,
+                },
+              ]"
+            >
+              <VideoOne
+                theme="filled"
+                :fill="j.id === curVideo.id ? '#1890ff' : j.status === 1 ? '#26bd71' : '#ccc'"
+                style="margin-right: 6px;"
+                size="1.2em"
+              ></VideoOne>
+              {{ index + 1 }}.{{ k + 1 }}
+              {{ j.name }}
            </div>
            <!--  0-未学 1-已学 -->
-            <div v-if="`${index}-${k}` === selectedId" class="sub-item-status">
-              正在学习中<History
+            <div v-if="j.id === curVideo.id" class="sub-item-status">
+              正在学习中
+              <History
                theme="filled"
                tyle="margin-left: 10px;"
                size="1.2em"
@ -19,7 +42,12 @@
              ></History>
            </div>
            <div v-else class="sub-item-status">
-              <Round theme="filled" strokeWidth="6" fill="#666" style="margin-left: 10px;"></Round>
+              <Round
+                theme="filled"
+                strokeWidth="6"
+                :fill="j.status === 1 ? '#26bd71' : '#666'"
+                style="margin-left: 10px;"
+              ></Round>
            </div>
          </li>
        </ul>
@ -35,15 +63,20 @@ export default {
  props: {
    catalogueList: {
      type: Array,
-      default: () => ([])
+      default: () => []
+    },
+    curVideo: {
+      type: Object,
+      default: () => ({})
    }
  },
  data () {
    return {
      capitalizeNumber: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一'],
-      selectedId: '1-1'
+      data: []
    }
  },
+  mounted () {},
  methods: {
    handlerItem (item, pItem) {
      this.$emit('changeVideo', { item, pItem })
@ -101,6 +134,14 @@ export default {
    line-height: 2;
  }

+  .sub-item-info-active {
+    color: #1890ff !important;
+  }
+
+  .sub-item-info-success {
+    color: #26bd71;
+  }
+
  .sub-item-status {
    flex: 0 0 200px;
    font-size: 12px;
--- a/src/views/mycourse/courseLearn/ExamDialog.vue
+++ b/src/views/mycourse/courseLearn/ExamDialog.vue
@ -1,32 +1,98 @@
 <template>
-  <a-modal title="课中检查" :visible="visible" :confirm-loading="confirmLoading" :footer="null" :closable="false">
-    <DbQuestionItem></DbQuestionItem>
+  <a-modal
+    title="课中检查"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :footer="null"
+    :closable="false"
+  >
+    <DbQuestionItem :data="data"></DbQuestionItem>
    <div class="text-center margin-top">
      <a-button type="primary" @click="handlerSubmit">提交</a-button>
    </div>
    <p class="tip-info margin-top">
-      注意：每段课程学习完成后都会随机出现1道小题，答对题目，方可继续下一部分学习，您有2次机会。否则之前上一小段学习时间不计算学时，需要重新学习
+      注意：每段课程学习完成后都会随机出现1道小题，答对题目，方可继续下一部分学习，您有{{
+        chance
+      }}次机会。否则之前上一小段学习时间不计算学时，需要重新学习
    </p>
  </a-modal>
 </template>

 <script>
 import DbQuestionItem from '@/components/DbQuestionItem/index.vue'
+import { reqCourseExam } from '@/api/mycourse/index.js'
 export default {
  components: { DbQuestionItem },
+  props: {
+    curVideo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
  data () {
    return {
      visible: false,
-      confirmLoading: false
+      confirmLoading: false,
+      chance: 2, // 初始机会2次
+      data: {} // 题目信息
    }
  },
  methods: {
-    show(){
+    show () {
+      this.chance = 2
      this.visible = true
    },
+    // 获取课中题目
+    getExamQuestion () {
+      const curVideo = this.curVideo
+      const query = this.$route.query
+      const { person } = this.$store.state.user
+      const params = {
+        courseId: curVideo.courseId,
+        coursewareId: curVideo.id,
+        personId: person.id,
+        projectId: query.courseId,
+        count: ''
+      }
+      reqCourseExam(params).then(res => {
+        this.data = res.data
+      })
+    },
    handlerSubmit () {
      // 处理考试提交逻辑
+      const curVideo = this.curVideo
+      const { person } = this.$store.state.user
+      const query = this.$route.query
+      const question = { ...this.data }
+      if (Array.isArray(question.myAnswers)) {
+        question.myAnswerList = question.myAnswers
+        question.myAnswers = question.myAnswers && question.myAnswers.join(',')
+      } else {
+        question.myAnswerList = question.myAnswers && question.myAnswers.split(',')
+      }
+      const params = {
+        courseId: curVideo.courseId,
+        coursewareId: curVideo.id,
+        personId: person.id,
+        projectId: query.courseId,
+        count: ''
+      }
+      reqCourseExam(params, question).then(res => {
+        // this.data = res.data
+        const data = res.data
+        if (res.correctness) {
+          this.$message.success('恭喜你,回答正确!')
          this.visible = false
+        } else {
+          if (this.chance === 1) {
+            this.visible = false
+          } else {
+            this.data = data
+          }
+          this.$message.warning('很遗憾,回答错误!')
+          this.chance--
+        }
+      })
    }
  }
 }
--- a/src/views/mycourse/courseLearn/OperationModule.vue
+++ b/src/views/mycourse/courseLearn/OperationModule.vue
@ -1,14 +1,22 @@
 <template>
  <div>
-    <template v-if="dataList && dataList.length>0">
+    <a-row style="margin-bottom: 20px;">
+      <a-button @click="handlerExam" type="primary">写作业</a-button>
+    </a-row>
+    <template v-if="dataList && dataList.length > 0">
      <a-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
-        <div class="flex-center" >
+        <div class="flex-center">
          <div style="flex: 1;">
            <h3>{{ item.name }}</h3>
-            <div><span style="margin-right: 20px;">提交时间：{{ item.submitTime }}</span><span>出题范围：{{ item.questionScope }}</span></div>
+            <div>
+              <span style="margin-right: 20px;">提交时间：{{ item.submitTime }}</span>
+              <span>出题范围：{{ item.rangeOfQuestions }}</span>
+            </div>
          </div>
          <div style="flex: 0 0 200px; text-align: right;">
-            <div @click="handlerDetail(item)" :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >查看详情</a-button></div>
+            <div @click="handlerDetail(item)" :span="24" style="margin-bottom: 10px;">
+              <a-button type="primary" size="small">查看详情</a-button>
+            </div>
            <!-- <div @click="handlerPreview(item)" :span="24"><a-button type="danger" size="small">预览</a-button></div> -->
          </div>
        </div>
@ -18,7 +26,6 @@
      <a-empty style="margin: 30px 0;" description="暂无相关作业" />
    </template>
  </div>
-
 </template>

 <script>
@ -36,17 +43,29 @@ export default {
  methods: {
    getList () {
      const { person } = this.$store.state.user
-      reqOperationList({ personId: person.id, projectId: this.$route.query.courseId }).then(res => {
-        this.dataList = res.data
+      reqOperationList({
+        personId: person.id,
+        projectId: this.$route.query.courseId,
+        pageSize: 99999,
+        pageNum: 1
+      }).then(res => {
+        this.dataList = res.rows
      })
    },
-    handlerDetail () {
-
+    handlerExam () {
+      this.$router.push({
+        path: '/myexamDetail',
+        query: { type: 'operation', projectId: this.$route.query.courseId, practiceType: 4 }
+      })
+    },
+    handlerDetail (data) {
+      this.$router.push({
+        path: '/myreport',
+        query: { type: 'operation', reportId: data.id, practiceType: 4 }
+      })
    }
  }
 }
 </script>

-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
--- a/src/views/mycourse/courseLearn/StatisticalLearning.vue
+++ b/src/views/mycourse/courseLearn/StatisticalLearning.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <DbLearnCount></DbLearnCount>
+    <DbLearnCount :data="data"></DbLearnCount>
  </div>
 </template>

@ -9,6 +9,12 @@ import DbLearnCount from '@/components/DbLearnCount/index'
 import { reqMycourseCount } from '@/api/mycourse/index'
 export default {
  components: { DbLearnCount },
+  props: {
+    courseInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
  data () {
    return {
      data: {}
@ -28,6 +34,4 @@ export default {
 }
 </script>

-<style>
-
-</style>
+<style></style>
--- a/src/views/mycourse/courseLearn/index.vue
+++ b/src/views/mycourse/courseLearn/index.vue
@ -9,6 +9,7 @@
          :options="playerOptions"
          :playsinline="true"
          @ended="onPlayerEnded($event)"
+          @timeupdate="onPlayerTimeupdate"
        ></video-player>
      </div>
    </div>
@ -16,7 +17,11 @@
      <a-tabs :default-active-key="activeTab" @change="tabChange">
        <a-tab-pane key="1" tab="课程目录">
          <div class="tab-box">
-            <CourseCatalogue @changeVideo="changeVideo" :catalogueList="catalogueList"></CourseCatalogue>
+            <CourseCatalogue
+              @changeVideo="changeVideo"
+              :catalogueList="catalogueList"
+              :curVideo="curVideo"
+            ></CourseCatalogue>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="模拟测试">
@ -31,13 +36,13 @@
        </a-tab-pane>
        <a-tab-pane key="4" tab="学习统计">
          <div class="tab-box">
-            <StatisticalLearning></StatisticalLearning>
+            <StatisticalLearning :courseInfo="courseInfo"></StatisticalLearning>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 课中考试 -->
-    <ExamDialog ref="examDialog"></ExamDialog>
+    <ExamDialog ref="examDialog" :curVideo="curVideo"></ExamDialog>
  </a-card>
 </template>

@ -53,40 +58,26 @@ import StatisticalLearning from './StatisticalLearning.vue'
 import { reqCourseDetail, reqCourseCatalogue } from '@/api/mycourse/index'

 export default {
-  components: { CourseCatalogue, OperationModule, SimulationTest, ExamDialog, StatisticalLearning, videoPlayer },
+  components: {
+    CourseCatalogue,
+    OperationModule,
+    SimulationTest,
+    ExamDialog,
+    StatisticalLearning,
+    videoPlayer
+  },
  data () {
    return {
      activeTab: '1',
      query: {},
      courseInfo: {},
      catalogueList: [], // 目录列表
-      playerOptions: {
-        height: '360',
-        autoplay: false,
-        muted: false,
-        language: 'zh-CN',
-        sources: [
-          {
-            type: 'video/mp4',
-            src: 'http://vjs.zencdn.net/v/oceans.mp4'
-          }
-        ],
-        controlBar: {
-          /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
-          children: [
-            { name: 'playToggle' }, // 播放按钮
-            { name: 'currentTimeDisplay' }, // 当前已播放时间
-            { name: 'progressControl' }, // 播放进度条
-            // { name: 'durationDisplay' }, // 总时间
-            {
-              name: 'volumePanel', // 音量控制
-              inline: false // 不使用水平方式
-            },
-            { name: 'FullscreenToggle' } // 全屏
-          ]
-        },
-        poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg'
-      }
+      curVideo: {}, // 当前播放的视频信息
+      playerOptions: {},
+      isMousedown: false,
+      oldTime: 0,
+      newTime: 0,
+      maxTime: 0
    }
  },
  mounted () {
@ -97,28 +88,121 @@ export default {
  methods: {
    initData () {
      const { person } = this.$store.state.user
+      // 获取课程详情
      reqCourseDetail({ personId: person.id, id: this.query.courseId }).then(res => {
-        console.log('课程详情', res)
        this.courseInfo = res.data
      })
+      // 获取课程目录
      reqCourseCatalogue({ personId: person.id, projectId: this.query.courseId }).then(res => {
-        console.log('课程目录', res)
-        this.catalogueList = res.data
+        const data = res.data
+        let videoList = []
+        if (Array.isArray(data)) {
+          data.map(item => {
+            videoList = [...videoList, ...item.courseList]
+            if (Array.isArray(item.courseList)) {
+              item.courseList.map(j => {
+                j.courseId = item.id
+              })
+            }
+          })
+        }
+        const selected = videoList[0] || ''
+        if (selected) {
+          this.curVideo = selected
+          this.playerOptions = {
+            height: '360',
+            autoplay: false,
+            muted: false,
+            language: 'zh-CN',
+            sources: [
+              {
+                type: 'video/mp4',
+                src: selected.videoAddress
+              }
+            ],
+            controlBar: {
+              /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
+              children: [
+                { name: 'playToggle' }, // 播放按钮
+                { name: 'currentTimeDisplay' }, // 当前已播放时间
+                { name: 'progressControl' }, // 播放进度条
+                { name: 'durationDisplay' }, // 总时间
+                {
+                  name: 'volumePanel', // 音量控制
+                  inline: false // 不使用水平方式
+                },
+                { name: 'FullscreenToggle' } // 全屏
+              ]
+            },
+            poster: selected.coverPath
+          }
+        }
+        this.catalogueList = data
      })
    },
+    // 切换视频
    changeVideo ({ item, pItem }) {
-      console.log('item', item)
-      this.$refs.videoPlayer.player.src('http://a.3a6.cn' + item.videoAddress)
+      const _this = this
+      const vid = this.$refs.videoPlayer.player
+      const change = function () {
+        _this.curVideo = item
+        vid.src(item.videoAddress)
+        vid.play()
+        _this.openCourseExam() // 调试用
+      }
+      if (this.oldTime > 0) {
+        this.$confirm({
+          title: '确定要切换学习视频吗?',
+          content: '一但切换学习视频,您现在正在学习的视频学时将清0,确定要切换吗?',
+          onOk () {
+            change()
+          },
+          onCancel () {}
+        })
+      } else {
+        change()
+      }
    },
    tabChange (key) {
-      console.log('key', key)
      // this.$refs.videoPlayer.player.play() // 播放
      // this.$refs.videoPlayer.player.pause() // 暂停
      // this.$refs.videoPlayer.player.src('src') // 重置进度条复制代码
    },
    // 当视频播放完毕的回调处理
    onPlayerEnded () {
-      this.$refs.examDialog.show()
+      console.log('播放完毕')
+      this.openCourseExam()
+    },
+    // 打开课中检查
+    openCourseExam () {
+      const _this = this
+      const curVideo = this.curVideo
+      if (curVideo.status === 1) return
+      this.$confirm({
+        title: '课中检查',
+        content:
+          '课程学习完成后都会随机出现1道小题，答对题目，方可继续下一部分学习，您有2次机会。否则之前上一小段学习时间不计算学时，需要重新学习!',
+        onOk () {
+          _this.$refs.examDialog.show()
+          _this.$refs.examDialog.getExamQuestion()
+        },
+        onCancel () {}
+      })
+    },
+    // 禁止快进
+    onPlayerTimeupdate () {
+      const { oldTime, maxTime } = this
+      const vd = this.$refs.videoPlayer.player
+      var current = vd.currentTime()
+      if (current < maxTime) {
+      } else if (current - oldTime > 1) {
+        vd.currentTime(oldTime)
+      } else {
+        this.oldTime = current
+        if (oldTime >= maxTime) {
+          this.maxTime = oldTime
+        }
+      }
    }
  }
 }
--- a/src/views/mycourse/mycourseList/CourseRecommendation.vue
+++ b/src/views/mycourse/mycourseList/CourseRecommendation.vue
@ -1,26 +1,14 @@
 <template>
-  <a-card
-    :bordered="false"
-    :loading="loading"
-  >
+  <a-card :bordered="false" :loading="loading">
    <a-row :gutter="16">
-      <a-col
-        :span="6"
-        :md="4"
-        :sm="6"
-        v-for="(item, index) in 8"
-        :key="index">
-        <a-card hoverable style="width: 100%; margin-bottom: 15px;">
-          <img
-            slot="cover"
-            alt="example"
-            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
-          />
+      <a-col :span="6" :md="4" :sm="6" v-for="(item, index) in dataList" :key="index">
+        <a-card @click="handlerItem(item)" hoverable style="width: 100%; margin-bottom: 15px;">
+          <img slot="cover" alt="example" :src="item.coverImage" />
          <div>
-            <h4>建筑安全施工生产注意事项</h4>
+            <h4>{{ item.projectName }}</h4>
            <div class="flex-center justify-between">
-              <div>课时: 24小时</div>
-              <div>选修课</div>
+              <div>课时: {{ item.totalCourseHours }}小时</div>
+              <div>{{ item.trainType === 1 ? '必修课' : '选修课' }}</div>
            </div>
          </div>
        </a-card>
@ -32,8 +20,7 @@
 <script>
 import { reqRecommendList } from '@/api/mycourse/index'
 export default {
-  components: {
-  },
+  components: {},
  data () {
    return {
      dataList: [],
@ -49,8 +36,13 @@ export default {
        this.dataList = res.rows
        this.loading = false
      })
+    },
+    handlerItem (data) {
+      this.$router.push({
+        path: '/mycourse/courseLearn',
+        query: { courseId: data.id }
+      })
    }
-
  }
 }
 </script>
--- a/src/views/mycourse/mycourseList/MyCourseList.vue
+++ b/src/views/mycourse/mycourseList/MyCourseList.vue
@ -51,7 +51,7 @@
          <a>添加课程</a>
        </a-popconfirm>
        <a v-if="record.status === 1" @click="handlerContinue(record)">继续学习</a>
-        <a v-if="record.status === 2">已完成学习</a>
+        <a v-if="record.status === 2" @click="handlerContinue(record)">已完成学习</a>
      </span>
    </s-table>
    <MycourseDetail ref="aycourseDetail"></MycourseDetail>
--- a/src/views/mycourse/mycourseList/TrainingPlan.vue
+++ b/src/views/mycourse/mycourseList/TrainingPlan.vue
@ -1,8 +1,5 @@
 <template>
-  <a-card
-    :bordered="false"
-    :loading="loading"
-  >
+  <a-card :bordered="false" :loading="loading">
    <a-tabs :default-active-key="activeTab" @change="tabChange">
      <a-tab-pane key="1" tab="年度培训计划">
        <s-table
@ -10,7 +7,12 @@
          :pageSize="5"
          :columns="columns"
          :data="loadDataYear"
-          :rowKey="record => record.id">
+          :rowKey="record => record.id"
+        >
+          <span slot="trainType" slot-scope="text, record">
+            <a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
+            <a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
+          </span>
          <span slot="action" slot-scope="text, record">
            <a-popconfirm
              v-if="record.status === 1"
@ -32,7 +34,12 @@
          :pageSize="5"
          :columns="columns"
          :data="loadDataUnit"
-          :rowKey="record => record.id">
+          :rowKey="record => record.id"
+        >
+          <span slot="trainType" slot-scope="text, record">
+            <a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
+            <a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
+          </span>
          <span slot="action" slot-scope="text, record">
            <a-popconfirm
              v-if="record.status === 1"
@ -69,16 +76,17 @@ export default {
      columns: [
        {
          title: '课程名称',
-          dataIndex: 'courseName',
+          dataIndex: 'name',
          scopedSlots: { customRender: 'courseName' }
        },
        {
          title: '课程类别',
-          dataIndex: 'courseTypeName'
+          dataIndex: 'trainType',
+          scopedSlots: { customRender: 'trainType' }
        },
        {
          title: '学习时间',
-          dataIndex: 'date'
+          dataIndex: 'totalCourseHours'
        },
        {
          title: '操作',
@ -90,15 +98,19 @@ export default {
      // 加载数据方法 必须为 Promise 对象
      loadDataYear: parameter => {
        const { person } = this.$store.state.user
-        return reqMyCourseList({ personId: person.id, type: 2, pageNum: 1, pageSize: 5 }).then(res => {
+        return reqMyCourseList({ personId: person.id, type: 2, pageNum: 1, pageSize: 5 }).then(
+          res => {
            return res
-        })
+          }
+        )
      },
      loadDataUnit: parameter => {
        const { person } = this.$store.state.user
-        return reqMyCourseList({ personId: person.id, type: 3, pageNum: 1, pageSize: 5 }).then(res => {
+        return reqMyCourseList({ personId: person.id, type: 3, pageNum: 1, pageSize: 5 }).then(
+          res => {
            return res
-        })
+          }
+        )
      }
    }
  },
@ -127,7 +139,6 @@ export default {
    handlerContinue (row) {
      this.$emit('continue', { row: row })
    }
-
  }
 }
 </script>
--- a/src/views/mycourse/mycourseList/index.vue
+++ b/src/views/mycourse/mycourseList/index.vue
@ -6,17 +6,17 @@
      </a-card>
      <br />
      <a-card title="培训计划" :bodyStyle="{padding: '0px !important'}">
-        <a slot="extra" href="#">查看更多</a>
+        <!-- <a slot="extra" href="#">查看更多</a> -->
        <TrainingPlan @add="handlerAddCourse" @continue="handlerContinue"></TrainingPlan>
      </a-card>
      <br />
      <a-card title="集中培训" :bodyStyle="{padding: '0px !important'}">
-        <a slot="extra" href="#">查看更多</a>
+        <!-- <a slot="extra" href="#">查看更多</a> -->
        <CentralizedTraining></CentralizedTraining>
      </a-card>
      <br />
      <a-card title="系统推荐课程" :bodyStyle="{padding: '0px !important'}">
-        <a slot="extra" href="#">查看更多</a>
+        <!-- <a slot="extra" href="#">查看更多</a> -->
        <CourseRecommendation></CourseRecommendation>
      </a-card>
    </a-card>
--- a/src/views/myexam/index.vue
+++ b/src/views/myexam/index.vue
@ -25,8 +25,10 @@
            {{ index + 1 }}
          </span>
          <template slot="testType" slot-scope="text, record">
-            <a-tag v-if="record.testType == '1'" color="red">必修课</a-tag>
-            <a-tag v-if="record.testType == '2'" color="blue">选修课</a-tag>
+            <a-tag v-if="record.testType == '1'" color="red">线上</a-tag>
+          </template>
+          <template slot="zige" slot-scope="text, record">
+            <a-tag color="blue">学完后考试</a-tag>
          </template>
          <template slot="examTime" slot-scope="text, record">
            {{ record.examTime }}分钟
@ -36,7 +38,9 @@
              <a disabled>预约考试</a>
            </template>
            <template v-else>
-              <a @click="handlerGoExam(record)">进入考试</a>
+              <a v-if="record.subscribeStatus === 1 && record.sAttend === 0" @click="handlerMarker(record)">预约考试</a>
+              <a v-if="record.isAttend === 1 || record.examState === 3" @click="handlerGoReport(record)">查看详情</a>
+              <a v-if="record.subscribeStatus === 1 || record.isAttendStatus === 3" @click="handlerGoExam(record)">进入考试</a>
            </template>
          </span>
        </s-table>
@ -52,14 +56,19 @@
            {{ index + 1 }}
          </span>
          <template slot="testType" slot-scope="text, record">
-            <a-tag v-if="record.testType == '1'" color="red">必修课</a-tag>
-            <a-tag v-if="record.testType == '2'" color="blue">选修课</a-tag>
+            <a-tag v-if="record.testType == '1'" color="red">线上</a-tag>
+          </template>
+          <template slot="zige" slot-scope="text, record">
+            <a-tag color="blue">学完后考试</a-tag>
          </template>
          <template slot="examTime" slot-scope="text, record">
            {{ record.examTime }}分钟
          </template>
          <span slot="action" slot-scope="text, record">
+            <a v-if="record.isAttendStatus === 1" @click="handlerGoReport(record)">预约考试</a>
+            <template v-else>
              <a @click="handlerGoReport(record)">查看详情</a>
+            </template>
          </span>
        </s-table>
      </a-tab-pane>
@ -69,7 +78,7 @@

 <script>
 import { STable, SearchCom } from '@/components'
-import { reqExamList, reqExamAttendList } from '@/api/myexam/exam'
+import { reqExamList, reqExamAttendList, reqExamSubscribe } from '@/api/myexam/exam'

 export default {
  components: { STable, SearchCom },
@ -114,7 +123,8 @@ export default {
        },
        {
          title: '考试资格',
-          dataIndex: 'zige'
+          dataIndex: 'zige',
+          scopedSlots: { customRender: 'zige' }
        },
        {
          title: '操作',
@ -187,6 +197,21 @@ export default {
        this.$refs.examDoneColumns.refresh()
      }
    },
+    // 预约考试
+    handlerMarker (data) {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确定要预约考试吗?',
+        onOk () {
+          reqExamSubscribe({ projectId: data.id }).then(res => {
+            this.$message.success('预约成功!')
+            _this.handleRefresh()
+          })
+        },
+        onCancel () {}
+      })
+    },
    handlerGoExam (row) {
      // 考试前5分钟才能进入考试界面(待办...)
      // const diff = new Date().getTime() - new Date(examSdate).getTime()
--- a/src/views/myexamCount/index.vue
+++ b/src/views/myexamCount/index.vue
@ -191,7 +191,7 @@ export default {
      }
    },
    handlerDetail (row) {
-      this.$router.push({ path: '/myresult', query: { id: row.id } })
+      this.$router.push({ path: '/mycourse/courseLearn', query: { courseId: row.courseId } })
    }
  }
 }
--- a/src/views/myexamDetail/index.vue
+++ b/src/views/myexamDetail/index.vue
@ -8,7 +8,11 @@
 import DbExam from '@/components/DbExam/index'
 import { practiceStartAnswer, practiceExecuteSubmit } from '@/api/practice/practice'
 import { reqExamExam, reqExamSubmit } from '@/api/myexam/exam.js'
-import { reqSimulateTestDetail } from '@/api/mycourse/index'
+import {
+  reqSimulateTestDetail,
+  reqOperationDetail,
+  reqOperationSubmit
+} from '@/api/mycourse/index'
 import _ from 'lodash'
 export default {
  components: { DbExam },
@ -36,38 +40,58 @@ export default {
      if (type === 'test') {
        this.getTestDetail()
      }
+      if (type === 'operation') {
+        this.getOperationDetail()
+      }
+    },
+    // 获取作业详情
+    getOperationDetail () {
+      const query = this.query
+      const { person } = this.$store.state.user
+      reqOperationDetail({ projectId: Number(query.projectId), personId: person.id }).then(res => {
+        this.examData = res.data
+      })
    },
    // 获取测试详情
    getTestDetail () {
      const query = this.query
      const { person } = this.$store.state.user
-        reqSimulateTestDetail({ projectId: Number(query.projectId), personId: person.id }).then(res => {
+      reqSimulateTestDetail({ projectId: Number(query.projectId), personId: person.id }).then(
+        res => {
          this.examData = res.data
-        })
+        }
+      )
    },
    // 获取练习详情
    getPracticeDetail () {
      const query = this.query
-        practiceStartAnswer({ projectId: Number(query.projectId), courseId: Number(query.courseId), type: Number(query.practiceType || 1) }).then(res => {
+      practiceStartAnswer({
+        projectId: Number(query.projectId),
+        courseId: Number(query.courseId),
+        type: Number(query.practiceType || 1)
+      }).then(res => {
        this.examData = res.data
      })
    },
    // 获取考试详情
    getExamDetail () {
      const { person } = this.$store.state.user
-        reqExamExam({ personId: person.id, projectId: this.query.projectId }).then((res) => {
+      reqExamExam({ personId: person.id, projectId: this.query.projectId }).then(res => {
        this.examData = res.data
      })
    },
    // 提交
    handlerSubmit (result) {
      const { type } = this.query
-        if (type === 'practice') {
+      if (type === 'practice' || type === 'operation') {
        this.submitPractice(result)
      }
      if (type === 'exam') {
        this.submitExam(result)
      }
+      // if (type === 'operation') {
+      //   this.submitOperation(result)
+      // }
    },
    // 格式化题目答案
    formatSubmit (result) {
@ -83,14 +107,19 @@ export default {
              // if (item.type != 2 && _.isArray(myAnswers)) {
              //   myAnswers = myAnswers.join(',')
              // }
-                if (['1', '3'].indexOf(item.questionType) !== -1 && myAnswers) {
-                  console.log('item.type', item.questionType)
+              if (Array.isArray(myAnswers)) {
+              } else {
                myAnswers = [myAnswers]
              }
+              // if (['1', '3'].indexOf(item.questionType) !== -1 && myAnswers) {
+              //   console.log('item.type', item.questionType)
+              //   myAnswers = [myAnswers]
+              // }
              allQuestion.push({
                ...j,
                questionId: j.questionId,
                answerTime: 0,
+                myAnswers: myAnswers,
                myAnswerList: myAnswers
              })
            })
@ -99,6 +128,21 @@ export default {
      }
      return allQuestion
    },
+    // 提交作业
+    submitOperation (result) {
+      const query = this.query
+      const params = {
+        projectId: query.projectId,
+        courseId: query.courseId,
+        answerTime: 0,
+        type: query.practiceType,
+        questionList: this.formatSubmit(result)
+      }
+      reqOperationSubmit(params).then(() => {
+        this.$message.success('交卷成功!')
+        this.$router.go(-1)
+      })
+    },
    // 提交练习
    submitPractice (result) {
      const query = this.query
@ -133,6 +177,4 @@ export default {
 }
 </script>

-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>
--- a/src/views/myreport/index.vue
+++ b/src/views/myreport/index.vue
@ -2,23 +2,34 @@
  <a-card :bordered="false">
    <a-tabs v-if="query.type" :default-active-key="query.type">
      <a-tab-pane key="1" tab="答题报告">
-        <a-card :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
+        <a-card
+          :bordered="false"
+          :bodyStyle="{ padding: '0px !important' }"
+          :headStyle="{ paddingLeft: '0px !important' }"
+        >
          <template slot="title">
            <h3>{{ viewReport.courseName }}</h3>
-            <div class="sub-info"><span>交卷时间：{{ viewReport.submitTime }}</span><span v-if="viewReport.totalScore">答题用时：{{ viewReport.totalScore }}</span></div>
+            <div class="sub-info">
+              <span>交卷时间：{{ viewReport.submitTime }}</span>
+              <span v-if="viewReport.totalScore">答题用时：{{ viewReport.totalScore }}</span>
+            </div>
            <DbReport :data="viewReport"></DbReport>
          </template>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="查看解析">
-        <a-card :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
+        <a-card
+          :bordered="false"
+          :bodyStyle="{ padding: '0px !important' }"
+          :headStyle="{ paddingLeft: '0px !important' }"
+        >
          <template slot="title">
            <h4>{{ viewReport.courseName }}</h4>
            <!-- <div class="sub-info"><span>选择题30/30</span><span>选择题30/30</span><span>选择题30/30</span></div> -->
          </template>
-          <template v-for="(item, index) in viewResolution" >
+          <template v-for="(item, index) in questionList">
            <div :key="index">
-              <DbQuestionInfoItem :data="item" :questionIndex="index+1" ></DbQuestionInfoItem>
+              <DbQuestionInfoItem :data="item" :questionIndex="index + 1"></DbQuestionInfoItem>
              <a-divider></a-divider>
            </div>
          </template>
@ -41,33 +52,42 @@ export default {
      query: {},
      activeTab: '',
      viewReport: {}, // 答题报告
+      questionList: [],
      viewResolution: [] // 答题解析
    }
  },
  mounted () {
    const query = this.$route.query
    this.query = query
-    if (query.type === 'practice') {
+    // if (query.type === 'practice') {
    this.getAnswerViewReport()
    this.getAnswerViewResolution()
-    }
-    if (query.type === 'exam') {
-      this.getExamViewReport()
-      this.getExamViewResolution()
-    }
+    // }
+    // if (query.type === 'exam') {
+    //   this.getExamViewReport()
+    //   this.getExamViewResolution()
+    // }
  },
  methods: {
    // 考试 start
-    getExamViewReport () {
-      reqExamViewReport({ projectId: this.query.reportId }).then(res => {
-        this.viewReport = res.data
-      })
-    },
-    getExamViewResolution () {
-      reqExamViewResolution({ projectId: this.query.reportId }).then(res => {
-        this.viewResolution = res.data
-      })
-    },
+    // getExamViewReport () {
+    //   reqExamViewReport({ projectId: this.query.reportId }).then(res => {
+    //     this.viewReport = res.data
+    //   })
+    // },
+    // getExamViewResolution () {
+    //   reqExamViewResolution({ projectId: this.query.reportId }).then(res => {
+    //     const data = res.data
+    //     let list = []
+    //     if (Array.isArray(data)) {
+    //       data.map(item => {
+    //         list = [...list, ...data.questionList]
+    //       })
+    //     }
+    //     console.log('list', list)
+    //     this.viewResolution = list
+    //   })
+    // },
    // 练习 start
    getAnswerViewReport () {
      answerViewReport({ reportId: Number(this.query.reportId) }).then(res => {
@ -76,7 +96,16 @@ export default {
    },
    getAnswerViewResolution () {
      answerViewResolution({ reportId: Number(this.query.reportId) }).then(res => {
+        const data = res.data.question
+        let list = []
+        if (Array.isArray(data)) {
+          data.map(item => {
+            list = [...list, ...item.questionList]
+          })
+        }
+        console.log('list', list)
        this.viewResolution = res.data
+        this.questionList = list
      })
    }
  }
@ -84,10 +113,9 @@ export default {
 </script>

 <style lang="less" scoped>
-.sub-info{
+.sub-info {
  color: #666;
  font-weight: normal;
  font-size: 14px;
 }
-
 </style>