三力分析页面完成

package-lock.json

@@ -2283,6 +2283,27 @@
         "whatwg-fetch": "^3.6.2"
       },
       "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
         "autoprefixer": {
           "version": "10.4.14",
           "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -2297,6 +2318,26 @@
             "postcss-value-parser": "^4.2.0"
           }
         },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
         "postcss": {
           "version": "8.4.23",
           "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
@@ -2587,47 +2628,6 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz",
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",

src/hooks/exam/threeExam.ts

@@ -5,6 +5,7 @@ import audio from "@/utils/audio";
 import { useStore } from "vuex";
 import { message } from "ant-design-vue";
 import { threeApi } from "@/api/three/type";
+import router from "@/router";
 export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config = {
     countDown: true,
     autoAnswer: true
@@ -380,7 +381,7 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
 
 
     //   }
-    
+
 
 
     const setPageNumToListIndex = (page: string | number) => {
@@ -497,7 +498,7 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
     };
     const switchPageNumBySelect = (index: number | string) => {
         let name = "";
-        const i = Number(index)-1
+        const i = Number(index) - 1
         switch (i) {
             case 0:
                 name = "A";
@@ -591,14 +592,43 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
 
     }
 
-    const submitExam = ()=>{
+    const submitThreeExam = () => {
         setUserAnswerAndRes(list.value[listIndex.value].userAnswer)
         let score = 0
-        const wrongId:number[] = []
-        list.value.forEach(item=>{
-            !item.isError&&item.isComplete?score+=score:wrongId.push(list.value[listIndex.value].id)
-        })
+        const wrongList:threeApi.threeForceList["rows"] = []
+        const wrongListRes:string[] = []
+        list.value.forEach((item, index) => {
+            //题目正确加分
+            if (item.isComplete && !item.isError&&list.value[index].userAnswer.length>0) {
+                score = score + 1
+            }
+            else if(!item.isComplete&&list.value[index].userAnswer.length==0){
+                console.log('')
 
+            }
+            else {
+                let userAnswerIndex = 0
+                wrongList.push(list.value[index])
+                for (let i = 1; i <= 6; i++) {
+                    if (list.value[index].userAnswer == '') {
+                        break;
+                    }
+        
+                    if (list.value[index].userAnswer == list.value[index]['an' + i]) {
+                        userAnswerIndex = i
+                    }
+                }
+                wrongListRes.push(String(userAnswerIndex))
+            }
+        })
+        window.sessionStorage.setItem('threeExam_temp_wrong_list',JSON.stringify(wrongList))
+        router.push({
+            path:'/driverExamAnaly',
+            query:{
+                wrongListRes:JSON.stringify(wrongListRes),
+                score:score
+            }
+        })
     }
 
     onMounted(() => {
@@ -649,7 +679,8 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
         switchAnswerBySelect,
         switchIndexBySelect,
         setPageNumToListIndex,
-        switchPageNumBySelect
+        switchPageNumBySelect,
+        submitThreeExam
 
 
 

src/router/index.ts

@@ -26,6 +26,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/threeExam',
     component: () => import('../views/threeExam/index.vue')
   },
+  {
+    path: '/threeExamAnaly',
+    component: () => import('../views/threeExamAnaly/index.vue')
+  },
   {
     path: '/threeStudyExam',
     component: () => import('../views/threeStudyExam/index.vue')

src/views/home/practiseSelect/index.vue

@@ -26,7 +26,10 @@
               </div>
               <router-link
                 :to="
-                  '/studySkill?subject='+($route.query.subject||4)+'&classIssue=' + (item.classIssue || '')
+                  '/studySkill?subject=' +
+                  ($route.query.subject || 4) +
+                  '&classIssue=' +
+                  (item.classIssue || '')
                 "
               >
                 <div
@@ -46,9 +49,28 @@
         <div class="vertical-line mr10"></div>
         <span class="font20 font-bold mr15">全部错误题回顾</span>
         <div class="lh34 round4 pr15 pl15 select-border1 mr15">错误回顾</div>
-        <div class="lh34 round4 pr15 pl15 select-border1">清空全部错题</div>
+        <div
+          @click="
+            () => {
+              dialogVisible = true;
+            }
+          "
+          class="lh34 round4 pr15 pl15 select-border1"
+        >
+          清空全部错题
+        </div>
       </div>
     </div>
+    <mProblemAlert
+      v-model:visible="alertVisible"
+      title="开启"
+      content="禁止重复"
+    ></mProblemAlert>
+    <mProblemDialog
+      v-model:visible="dialogVisible"
+      title="提示"
+      content="是否要清空全部错题"
+    ></mProblemDialog>
   </div>
 </template>
 
@@ -56,6 +78,8 @@
 import { defineComponent, ref } from "vue";
 import api from "@/api";
 import { useRoute } from "vue-router";
+import mProblemDialog from "@/components/mProblemDialog/index.vue";
+import mProblemAlert from "@/components/mProblemAlert/index.vue";
 export default defineComponent({
   name: "practiseSelect",
   setup() {
@@ -71,12 +95,10 @@ export default defineComponent({
     api.question
       .questionInfoSelectFlQuestionInfo({
         subject: Number(route.query.subject),
-        liceBus:route.query.liceBus as string,
-        liceCar:route.query.liceCar as string,
-        liceMoto:route.query.liceMoto as string,
-        liceTruck:route.query.liceTruck as string
-
-
+        liceBus: route.query.liceBus as string,
+        liceCar: route.query.liceCar as string,
+        liceMoto: route.query.liceMoto as string,
+        liceTruck: route.query.liceTruck as string,
       })
       .then((res) => {
         res.data.shift();
@@ -84,9 +106,15 @@ export default defineComponent({
       });
 
     return {
+      dialogVisible: ref(false),
+      alertVisible: ref(false),
       list: list,
     };
   },
+  components: {
+    mProblemDialog,
+    mProblemAlert,
+  },
 });
 </script>
 

src/views/home/selectDriveExamSubject/index.vue

@@ -31,34 +31,56 @@
         <div class="vertical-line mr10"></div>
         <span class="font20 font-bold mr15">全部错误题回顾</span>
         <div class="lh34 round4 pr15 pl15 select-border1 mr15">错误回顾</div>
-        <div class="lh34 round4 pr15 pl15 select-border1">清空全部错题</div>
+        <div
+          @click="
+            () => {
+              dialogVisible = true;
+            }
+          "
+          class="lh34 round4 pr15 pl15 select-border1"
+        >
+          清空全部错题
+        </div>
       </div>
     </div>
+    <mProblemAlert
+      v-model:visible="alertVisible"
+      title="开启"
+      content="禁止重复"
+    ></mProblemAlert>
+    <mProblemDialog
+      v-model:visible="dialogVisible"
+      title="提示"
+      content="是否要清空全部错题"
+    ></mProblemDialog>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-
+import { defineComponent, ref } from "vue";
+import mProblemDialog from "@/components/mProblemDialog/index.vue";
+import mProblemAlert from "@/components/mProblemAlert/index.vue";
 export default defineComponent({
   setup() {
-
     return {
-
+      dialogVisible: ref(false),
+      alertVisible: ref(false),
     };
   },
   methods: {
-    goDriveExam(gs:string) {
+    goDriveExam(gs: string) {
       this.$router.push({
-        path:'/examInstructions',
-        query:{
-          gs:gs,
-          ...this.$route.query
-        }
-
-      })
-      
-    }
+        path: "/examInstructions",
+        query: {
+          gs: gs,
+          ...this.$route.query,
+        },
+      });
+    },
+  },
+  components: {
+    mProblemDialog,
+    mProblemAlert,
   },
 });
 </script>

src/views/home/threeExam/index.vue

@@ -33,18 +33,42 @@
         <div class="vertical-line mr10"></div>
         <span class="font20 font-bold mr15">全部错误题回顾</span>
         <div class="lh34 round4 pr15 pl15 select-border1 mr15">错误回顾</div>
-        <div class="lh34 round4 pr15 pl15 select-border1">清空全部错题</div>
+        <div
+          @click="
+            () => {
+              dialogVisible = true;
+            }
+          "
+          class="lh34 round4 pr15 pl15 select-border1"
+        >
+          清空全部错题
+        </div>
       </div>
+      <mProblemAlert
+        v-model:visible="alertVisible"
+        title="开启"
+        content="禁止重复"
+      ></mProblemAlert>
+      <mProblemDialog
+        
+        v-model:visible="dialogVisible"
+        title="提示"
+        content="是否清空全部错题"
+      ></mProblemDialog>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-
+import { defineComponent, ref } from "vue";
+import mProblemDialog from "@/components/mProblemDialog/index.vue";
+import mProblemAlert from "@/components/mProblemAlert/index.vue";
 export default defineComponent({
   setup() {
-    return {};
+    return {
+      dialogVisible: ref(false),
+      alertVisible: ref(false),
+    };
   },
   methods: {
     goThreeExam() {
@@ -64,6 +88,10 @@ export default defineComponent({
       });
     },
   },
+  components: {
+    mProblemDialog,
+    mProblemAlert,
+  },
 });
 </script>
 

src/views/threeExam/index.vue

@@ -293,6 +293,7 @@
       content="禁止重复"
     ></mProblemAlert>
     <mProblemDialog
+    @confirm="submitThreeExam"
       v-model:visible="dialogVisible"
       title="提示"
       content="是否真的要交卷（按确定键交卷，按取消键继续答题）"

src/views/threeExamAnaly/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="">
+    <img class="w-full" src="@/assets/img/login/top_bg.png" />
+    <div class="pr30 pl30">
+      <div
+        class="flex w-full flex-col h137 justify-center content-center relative"
+      >
+        <div
+          class="flex w72 h40 right0 round4 items-center justify-center absolute bottom16 bg-primary-yellow cursor-pointer"
+        >
+          <img
+            class="w15 h15 mr5"
+            src="@/assets/img/driverExamAnaly/close_icon.png"
+          />
+          <span class="font16">关闭</span>
+        </div>
+
+        <div class="font0 overflow-hidden">
+          <span class="font50 text-red-500">{{ score }}</span>
+          <span class="font16 text-red-500">分</span>
+        </div>
+
+        <div class="font16 w-full">你的成绩</div>
+      </div>
+      <div
+        class="bg-red-100 h46 lh46 w-full pr20 pl20 text-left"
+        style="color: #66645c"
+      >
+        提示：打"√"表示是正确答案；打"×"表示你答错的答案；答题是红色表示没有做。
+      </div>
+      <div class="pt30 pb30 pt30 pb30">
+        <div
+          v-for="(item, index) in list"
+          :key="index"
+          class="round10 pt30 pr30 pl30 pb30 text-left round10 gray-border mb20"
+        >
+          <div>
+            {{ index + 1 }}、<span v-html="list[index].question"></span>
+          </div>
+          <img
+            class="w400"
+            v-if="list[index].mediaUrl"
+            :src="list[index].mediaUrl"
+          />
+          <div
+            :class="{
+              yes:
+                userAnswerList[index] !== '0' &&
+                userAnswerList[index].includes(list[index].answertrue),
+              no:
+                userAnswerList[index] !== '0' &&
+                userAnswerList[index].includes('1'),
+              'text-red-500': userAnswerList[index].includes('0'),
+            }"
+            key="1"
+          >
+            A、{{ list[index]["an1"] }}
+          </div>
+          <div
+            :class="{
+              yes:
+                userAnswerList[index] !== '0' && list[index].answertrue == '2',
+              no:
+                userAnswerList[index] !== '0' &&
+                userAnswerList[index].includes('2'),
+              'text-red-500': userAnswerList[index].includes('0'),
+            }"
+            key="2"
+          >
+            B、{{ list[index]["an2"] }}
+          </div>
+          <div
+            :class="{
+              yes:
+                userAnswerList[index] !== '0' && list[index].answertrue == '3',
+              no:
+                userAnswerList[index] !== '0' &&
+                userAnswerList[index].includes('3'),
+              'text-red-500': userAnswerList[index].includes('0'),
+            }"
+            key="3"
+            v-if="list[index]['an3']"
+          >
+            C、{{ list[index]["an3"] }}
+          </div>
+          <div
+            :class="{
+              yes:
+                userAnswerList[index] !== '0' && list[index].answertrue == '4',
+              no:
+                userAnswerList[index] !== '0' &&
+                userAnswerList[index].includes('4'),
+              'text-red-500': userAnswerList[index].includes('0'),
+            }"
+            key="4"
+            v-if="list[index]['an4']"
+          >
+            D、{{ list[index]["an4"] }}
+          </div>
+          <div
+            @click="
+              () => {
+                alertVisible = true;
+                alertContent = list[index].explain;
+              }
+            "
+            class="bg-primary-yellow font16 lh40 w110 text-center round4 mt20 cursor-pointer"
+          >
+            本题解析
+          </div>
+        </div>
+      </div>
+    </div>
+    <mProblemAlert
+      v-model:visible="alertVisible"
+      :title="alertTitle"
+      :content="alertContent"
+    ></mProblemAlert>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { threeApi } from "@/api/three/type";
+import mProblemAlert from "@/components/mProblemAlert/index.vue";
+// import { Button } from "ant-design-vue";
+export default defineComponent({
+  setup() {
+    return {
+      score: ref(0),
+      alertVisible: ref(false),
+      userAnswerList: ref<string[]>([]),
+      alertTitle: ref("解析"),
+      alertContent: ref(""),
+      list: ref<threeApi.threeForceList[]>([]),
+    };
+  },
+  mounted() {
+    this.score = Number(this.$route.query.score);
+
+    this.userAnswerList = JSON.parse(
+      (this.$route.query.wrongListRes as string) || "[]"
+    );
+    this.list = JSON.parse(
+      window.sessionStorage.getItem("threeExam_temp_wrong_list") || "[]"
+    );
+  },
+  components: {
+    mProblemAlert,
+    // aButton: Button,
+  },
+});
+</script>
+
+<style scoped>
+.gray-border {
+  border: 1px solid #d8d8d8;
+}
+.bg-primary-yellow {
+  background: #f9de5b;
+}
+.yes::before {
+  content: "√";
+}
+.no::before {
+  content: "ⅹ";
+}
+</style>