考前摸底，真题实战

src/api/exam.js

@@ -9,8 +9,8 @@ export function getExamQuestion(params) {
 /**
  * 缓存考前摸底试题
  */
-export function setCache(data) {
-  return httpRequest.post('/api/zy/v2/examination/examination-papers', data)
+export function setCache(params) {
+  return httpRequest.post('/api/zy/v2/examination/examination-papers', params)
 }
 
 /**
@@ -20,6 +20,13 @@ export function getExamStatus(params) {
   return httpRequest.get('/api/zy/v2/examination/examination-papers-status', { params })
 }
 
+/**
+ * 模拟考试设置角色
+ */
+export function setRoles(params) {
+  return httpRequest.post('/api/zy/v2/examination/role', params)
+}
+
 /**
  * 获取课程列表
  */

src/components/exam/pieChart.vue

@@ -5,8 +5,7 @@
       <circle cx="74" cy="74" r="70" stroke-width="7" stroke="#4cce8c" fill="none" :stroke-dasharray="data" stroke-linecap="round"></circle>
     </svg>
     <div class="chart-txt">
-      <div class="num">{{ accuracy }}%</div>
-      <div class="t">正确率</div>
+      <slot name="tips"></slot>
     </div>
   </div>
 </template>

src/components/exam/resultCard.vue

@@ -88,12 +88,13 @@ export default {
       })
     },
     goQuestion(id) {
-      this.$router.push({
-        path: '/testExam/exam',
-        query: {
-          id: id
-        }
-      })
+      this.$emit('goQuestion', id)
+      // this.$router.push({
+      //   path: '/testExam/exam',
+      //   query: {
+      //     id: id
+      //   }
+      // })
     }
   }
 }

src/components/layout/aside.vue

@@ -28,7 +28,7 @@ export default {
     return {
       defaultMenus: [
         { title: '考前摸底', icon: '', path: '/testExam' },
-        { title: '真题实战', icon: '', path: '/mockExam' },
+        { title: '真题实战', icon: '', path: '/mock' },
         { title: '错题集合', icon: '', path: '/my/questions/wrong' },
         { title: '收藏试题', icon: '', path: '/my/questions/collection' },
         { title: '必考考点', icon: '', path: '/course/test' },

src/pages/mockExam/exam/result.vue

+<template>
+  <div class="result-box">
+    <div class="card-left">
+      <div class="title">成绩报告</div>
+      <div class="chart-box">
+        <chart :accuracy="accuracy">
+          <template v-slot:tips>
+            <div class="num">{{ accuracy }}</div>
+            <div class="t">分</div>
+          </template>
+        </chart>
+      </div>
+      <!-- <div class="assess">测试评估</div>
+      <div class="assess-box">
+        <div class="prog">
+          <div class="line-box">
+            <div class="line" :style="setStyle"></div>
+          </div>
+          <div class="icon"></div>
+        </div>
+        <div class="text">{{ accuracy !== 100 ? '您离成功还有一段距离，继续努力！' : '成功近在眼前，再接再厉！' }}</div>
+        <div class="btn">全部考试服务</div>
+      </div> -->
+    </div>
+    <div class="card-right">
+      <card v-if="data.sheet" :data="data.sheet" @goQuestion="goPage">
+        <template v-slot:btnBox>
+          <div class="btn-box">
+            <div class="btn" @click="goPage('all')">全部解析</div>
+            <div class="btn" @click="goPage('err')">错误解析</div>
+          </div>
+        </template>
+      </card>
+    </div>
+  </div>
+</template>
+<script>
+import chart from '@/components/exam/pieChart.vue'
+import card from '@/components/exam/resultCard.vue'
+import * as api from '@/api/exam.js'
+export default {
+  components: {
+    chart,
+    card
+  },
+  data() {
+    return {
+      data: {},
+      accuracy: 0
+    }
+  },
+  created() {
+    this.getExamPapers()
+  },
+  computed: {
+  },
+  mounted() {
+  },
+  methods: {
+    goPage(param) {
+      this.$router.push({
+        path: '/mock/exam',
+        query: {
+          id: param
+        }
+      })
+    },
+    getExamPapers() {
+      const param = {
+        type: 1,
+        is_create: 0
+      }
+      api
+        .getExamQuestion(param)
+        .then(response => {
+          const data = JSON.parse(response.data)
+          this.data = data
+          this.accuracy = parseInt(data.sheet.score)
+          // console.log(this.accuracy)
+        })
+        .finally(() => {
+          // this.loaded = true
+        })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.result-box{
+  width: 100%;
+  display: flex;
+  .card-left{
+    position: relative;
+    box-sizing: border-box;
+    padding: 10px 30px 20px;
+    flex: 1;
+    background: #fff;
+    margin-right: 10px;
+    height: 560px;
+    border-radius: 8px;
+    .title{
+      font-size: 18px;
+      color: #222222;
+      line-height: 45px;
+      border-bottom: 1px solid #ccc;
+    }
+    .chart-box{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -webkit-transform: translate(-50%, -50%);
+      width: 148px;
+      // margin: 26px auto 0;
+    }
+    .assess{
+      font-size: 18px;
+      color: #222222;
+      line-height: 45px;
+      border-bottom: 1px solid #ccc;
+    }
+    .assess-box{
+      padding-top: 27px;
+      .prog{
+        width: 350px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .line-box{
+          width: 300px;
+          width: 300px;
+          height: 10px;
+          background: #F9F9F9;
+          border-radius: 5px;
+          .line{
+            width: 80%;
+            height: 10px;
+            background: linear-gradient(90deg, #F47C46 0%, #F22F48 100%);
+            border-radius: 5px;
+          }
+        }
+        .icon{
+          width: 41px;
+          height: 38px;
+          background: url(@/assets/images/res-icon.png);
+          background-size: 100% 100%;
+        }
+      }
+      .text{
+        font-size: 14px;
+        color: #222222;
+        line-height: 20px;
+        text-align: center;
+        margin: 50px 0 68px 0;
+      }
+      .btn{
+        cursor: pointer;
+        text-align: center;
+        line-height: 40px;
+        width: 144px;
+        height: 40px;
+        background: #C01540;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #FFFFFF;
+        margin: 0 auto;
+      }
+    }
+  }
+  .card-right{
+    box-sizing: border-box;
+    flex: 1;
+    background: #fff;
+    height: 560px;
+    border-radius: 8px;
+    margin-left: 10px;
+    padding: 10px 30px 0;
+  }
+}
+</style>

src/pages/mockExam/index.vue

@@ -20,8 +20,8 @@
       <div class="item">
         <p><b>选择角色</b></p>
         <el-radio-group v-model="role">
-          <el-radio :label="0">管理人员</el-radio>
-          <el-radio :label="1">安全人员</el-radio>
+          <el-radio :label="1">管理人员</el-radio>
+          <el-radio :label="2">安全人员</el-radio>
         </el-radio-group>
       </div>
       <div class="item">
@@ -30,18 +30,71 @@
       </div>
     </div>
     <template #footer>
-      <div class="app-container-ft"><el-button type="primary">开始考试</el-button></div>
+      <div class="app-container-ft"><el-button type="primary" @click="startExam">开始考试</el-button></div>
     </template>
   </app-container>
 </template>
 
 <script>
 import AppContainer from '@/components/AppContainer'
+import * as api from '@/api/exam.js'
 export default {
   components: { AppContainer },
   data() {
     return {
-      role: 0
+      role: window.localStorage.role ? parseInt(window.localStorage.role) : 1
+    }
+  },
+  mounted() {},
+  methods: {
+    startExam() {
+      api
+        .setRoles({ role: this.role })
+        .then(response => {
+          if (response.code === 0) {
+            window.localStorage.role = this.role
+            api
+              .getExamStatus({ type: 2 })
+              .then(response => {
+                if (parseInt(response.status) === 0 || parseInt(response.status) === 3) {
+                  this.toolTipBox()
+                } else {
+                  this.$router.push({
+                    path: '/mock/exam',
+                    query: {
+                      is_create: true
+                    }
+                  })
+                }
+              })
+              .finally(() => {
+              })
+          }
+        })
+        .finally(() => {
+        })
+    },
+    toolTipBox() {
+      this.$confirm('您上次未做完试题', '', {
+        confirmButtonText: '重新答题',
+        cancelButtonText: '继续答题',
+        type: 'warning'
+      }).then(() => {
+        this.$router.push({
+          path: '/mock/exam',
+          query: {
+            is_create: 1
+          }
+        })
+      }).catch((e) => {
+        console.log(e)
+        this.$router.push({
+          path: '/mock/exam',
+          query: {
+            is_create: 0
+          }
+        })
+      })
     }
   }
 }

src/pages/testExam/exam/index.vue

@@ -165,7 +165,7 @@ export default {
     getTopic() {
       const param = {
         type: 1,
-        is_create: this.$route.query.id || !this.$route.query.is_create ? 0 : 1
+        is_create: this.$route.query.id || this.$route.query.is_create === undefined ? 0 : this.$route.query.is_create
       }
       api
         .getExamQuestion(param)

src/pages/testExam/exam/result.vue

@@ -3,7 +3,12 @@
     <div class="card-left">
       <div class="title">成绩报告</div>
       <div class="chart-box">
-        <chart :accuracy="accuracy"/>
+        <chart :accuracy="accuracy">
+          <template v-slot:tips>
+            <div class="num">{{ accuracy }}%</div>
+            <div class="t">正确率</div>
+          </template>
+        </chart>
       </div>
       <div class="assess">测试评估</div>
       <div class="assess-box">
@@ -18,7 +23,7 @@
       </div>
     </div>
     <div class="card-right">
-      <card v-if="data.sheet" :data="data.sheet">
+      <card v-if="data.sheet" :data="data.sheet" @goQuestion="goPage">
         <template v-slot:btnBox>
           <div class="btn-box">
             <div class="btn" @click="goPage('all')">全部解析</div>

src/pages/testExam/index.vue

@@ -23,11 +23,8 @@ export default {
   },
   methods: {
     getExamStatus() {
-      const param = {
-        type: 1
-      }
       api
-        .getExamStatus(param)
+        .getExamStatus({ type: 1 })
         .then(response => {
           if (response.status === 0 || response.status === 3) {
             this.open()
@@ -35,7 +32,7 @@ export default {
             this.$router.push({
               path: '/testExam/exam',
               query: {
-                is_create: true
+                is_create: 1
               }
             })
           }
@@ -60,14 +57,14 @@ export default {
             this.$router.push({
               path: '/testExam/exam',
               query: {
-                is_create: false
+                is_create: 0
               }
             })
           } else {
             this.$router.push({
               path: '/testExam/exam',
               query: {
-                is_create: true
+                is_create: 1
               }
             })
           }

src/router/routes.js

@@ -43,10 +43,15 @@ const examAnswer = [
     path: '/testExam/result',
     component: () => import(/* webpackChunkName: "exam" */ '@/pages/testExam/exam/result')
   },
-  // 真题实战
+  /* 真题实战 */
   {
-    path: '/mockExam',
+    path: '/mock',
     component: () => import(/* webpackChunkName: "exam" */ '@/pages/mockExam')
+  },
+  /* 真题实战结果页 */
+  {
+    path: '/mock/result',
+    component: () => import(/* webpackChunkName: "exam" */ '@/pages/mockExam/exam/result')
   }
 ]
 
@@ -259,5 +264,10 @@ export default [
     path: '/testExam/exam',
     component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/testExam/exam/index')
   },
+  /* 模拟考试 */
+  {
+    path: '/mock/exam',
+    component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/mockExam/exam/index')
+  },
   ...viewerRoutes
 ]