feat: 接口对接

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
+    })
+}

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,

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>

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="label">培训方式：</span>
-        <span class="value">100分</span>
+        <span class="value">{{ data.trainWay | trainWayText }}</span>
       </a-col>
       <a-col class="title-info">
-        <span class="label">学习时间：</span>
+        <span class="label">开始时间：</span>
-        <span class="value">100分钟</span>
+        <span class="value">{{ data.startDate }}</span>
       </a-col>
       <a-col class="title-info">
-        <span class="label">学习方式：</span>
+        <span class="label">学习状态：</span>
-        <span class="value">学习+考试</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>

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>

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>
 
@@ -106,5 +119,8 @@ export default {
     color: #fff;
     height: 60px;
   }
+  .is-right{
+    background: green;
+  }
 }
 </style>

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>

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">
-        <ul class="sub-list">
+          <span style="margin-right: 10px;">第{{ capitalizeNumber[index] }}章</span>
-          <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 }}
         </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',
+                { '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">
+            <div v-if="j.id === curVideo.id" class="sub-item-status">
-              正在学习中<History
+              正在学习中
+              <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;

src/views/mycourse/courseLearn/ExamDialog.vue

@@ -1,32 +1,98 @@
 <template>
-  <a-modal title="课中检查" :visible="visible" :confirm-loading="confirmLoading" :footer="null" :closable="false">
+  <a-modal
-    <DbQuestionItem></DbQuestionItem>
+    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 () {
+      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--
+        }
+      })
     }
   }
 }

src/views/mycourse/courseLearn/OperationModule.vue

@@ -1,14 +1,22 @@
 <template>
   <div>
+    <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 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 => {
+      reqOperationList({
-        this.dataList = res.data
+        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 lang="scss" scoped></style>
-
-</style>

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>

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: {
+      curVideo: {}, // 当前播放的视频信息
-        height: '360',
+      playerOptions: {},
-        autoplay: false,
+      isMousedown: false,
-        muted: false,
+      oldTime: 0,
-        language: 'zh-CN',
+      newTime: 0,
-        sources: [
+      maxTime: 0
-          {
-            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'
-      }
     }
   },
   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)
+        const data = res.data
-        this.catalogueList = 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)
+      const _this = this
-      this.$refs.videoPlayer.player.src('http://a.3a6.cn' + item.videoAddress)
+      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
+        }
+      }
     }
   }
 }

src/views/mycourse/mycourseList/CourseRecommendation.vue

@@ -1,26 +1,14 @@
 <template>
-  <a-card
+  <a-card :bordered="false" :loading="loading">
-    :bordered="false"
-    :loading="loading"
-  >
     <a-row :gutter="16">
-      <a-col
+      <a-col :span="6" :md="4" :sm="6" v-for="(item, index) in dataList" :key="index">
-        :span="6"
+        <a-card @click="handlerItem(item)" hoverable style="width: 100%; margin-bottom: 15px;">
-        :md="4"
+          <img slot="cover" alt="example" :src="item.coverImage" />
-        :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"
-          />
           <div>
-            <h4>建筑安全施工生产注意事项</h4>
+            <h4>{{ item.projectName }}</h4>
             <div class="flex-center justify-between">
-              <div>课时: 24小时</div>
+              <div>课时: {{ item.totalCourseHours }}小时</div>
-              <div>选修课</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>

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>

src/views/mycourse/mycourseList/TrainingPlan.vue

@@ -1,8 +1,5 @@
 <template>
-  <a-card
+  <a-card :bordered="false" :loading="loading">
-    :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>

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>

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 == '1'" color="red">线上</a-tag>
-            <a-tag v-if="record.testType == '2'" color="blue">选修课</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 == '1'" color="red">线上</a-tag>
-            <a-tag v-if="record.testType == '2'" color="blue">选修课</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()

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 } })
     }
   }
 }

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) {
+              if (Array.isArray(myAnswers)) {
-                  console.log('item.type', item.questionType)
+              } 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 lang="less" scoped></style>
-
-</style>

src/views/myreport/index.vue

@@ -2,21 +2,32 @@
   <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>
               <a-divider></a-divider>
@@ -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') {
+    // if (query.type === 'exam') {
-      this.getExamViewReport()
+    //   this.getExamViewReport()
-      this.getExamViewResolution()
+    //   this.getExamViewResolution()
-    }
+    // }
   },
   methods: {
     // 考试 start
-    getExamViewReport () {
+    // getExamViewReport () {
-      reqExamViewReport({ projectId: this.query.reportId }).then(res => {
+    //   reqExamViewReport({ projectId: this.query.reportId }).then(res => {
-        this.viewReport = res.data
+    //     this.viewReport = res.data
-      })
+    //   })
-    },
+    // },
-    getExamViewResolution () {
+    // getExamViewResolution () {
-      reqExamViewResolution({ projectId: this.query.reportId }).then(res => {
+    //   reqExamViewResolution({ projectId: this.query.reportId }).then(res => {
-        this.viewResolution = res.data
+    //     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
       })
     }
   }
@@ -89,5 +118,4 @@ export default {
   font-weight: normal;
   font-size: 14px;
 }
-
 </style>