@zykjcommon/questions 0.0.1

package/src/views/exam/Exam.vue

@@ -0,0 +1,594 @@
+<template>
+  <div class="white-mask" v-if="showBlur"></div>
+  <div class="exam" :class="{'showBlur':showBlur}">
+    <QuestionHeader :resData="responsiveObj.resData"></QuestionHeader>
+    <div class="content-outter">
+      <div class="content">
+        <div class="content-left">
+          <div class="return-top" v-returnTop></div>
+<!--          <div class="intro">
+            <div class="intro-tit">测评说明：</div>
+            <div class="intro-txt">{{responsiveObj.resData.exam_description}}</div>
+          </div>-->
+          <div class="question-main">
+            <ul class="question-list">
+              <li v-for="(item,index) in responsiveObj.questionList" :id="'question'+ index">
+                <component :is="item.questionComponent"
+                           :questionInfo="item"
+                           :key="'question'+ index"
+                           :ref="'question'+ index"/>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="content-right">
+<!--          {{responsiveObj.questionList}}-->
+          <QuestionCard v-model:questionList="responsiveObj.questionList"></QuestionCard>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ContentDialog v-model:visible="warnVisible"
+                 @confirm="quitQuestion"
+                 :hide-cancel="true"
+                 :confirmText="'我知道了'">
+    <template #content>
+      <div class="con-text-1" style="margin-top: 0.3rem">{{warnText}}</div>
+    </template>
+  </ContentDialog>
+
+  <Loading :loading="loading"></Loading>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref, toRefs, reactive, watch, computed, onMounted,getCurrentInstance} from 'vue'
+// import QuestionReader from '@src/components/questions/QuestionReader.js'
+import QuestionCard from '@src/components/exam/QuestionCard.vue'
+import QuestionHeader from '@src/components/exam/QuestionHeader.vue'
+import TimeCounter from '@src/components/exam/TimeCounter.vue'
+import {createNamespacedHelpers} from 'vuex-composition-helpers';
+import {useRouter,useRoute} from 'vue-router'
+import fun from "@/assets/js/fun";
+import bus from "@/assets/js/bus";
+import {questionMapper} from '@src/common/const.ts'
+
+interface dataInterface{
+  showBlur:boolean,
+  examInfo:any,
+  warnVisible:boolean,
+  autoSubmitTimer:any,
+  routeName:string,
+  loading:boolean,
+  warnText:string
+}
+
+interface responsiveData{
+  questionList:Array<any>,
+  resData:any
+}
+
+
+export default defineComponent({
+  components: {
+    // ...QuestionReader,
+    QuestionCard,
+    QuestionHeader,
+    TimeCounter,
+    // Question_SingleChoice:(aaa as any).Question_SingleChoice
+  },
+  setup(props,context) {
+    const {useState, useActions,useMutations} = createNamespacedHelpers('exam'); // specific module name
+    const {getExamPaperActions,resetExamActions} = useActions(['getExamPaperActions','resetExamActions'])
+    let {examInfo} = useState(['examInfo'])
+    let route = useRoute()
+    let router = useRouter()
+    const currentInstance:any = getCurrentInstance()
+    let _this = currentInstance.proxy
+    //不需要响应式或者写死的数据放里面
+    let data:dataInterface = reactive({
+      showBlur:false,
+      examInfo,
+      autoSubmitTimer:null,
+      warnVisible:false,
+      routeName:route.name as string,
+      loading:false,
+      warnText:''
+    })
+
+    //需要响应式放里面
+    let responsiveObj:{value:responsiveData} = ref({
+      questionList:[],
+      resData:{}
+    })
+
+
+
+    onMounted(()=>{
+      // resetExamActions({examId:29})
+      getExamPaper()
+    })
+
+
+    bus.$on('showBlur',()=>{
+      data.showBlur = true
+    })
+
+
+    function quitQuestion(){
+      fun.postMessageByType('close')
+    }
+
+    function getExamPaper(){
+      let res = {
+        "data": {
+          "examination_paper": {
+            "have_not_auto_check_question": false,
+            "size": 23,
+            "question_list": [
+              {
+                "question_type_str": "单选题",
+                "data_mode": 1,
+                "correct_judge": "",
+                "is_auto_check": "",
+                "content": "[{\"<>\":\"p\",\"text\":\"He arrived here ________. The teacher felt ________.\"}]",
+                "correct_subjective_answer": "",
+                "auto_check": true,
+                "options_data": [
+                  {
+                    "file_url": "",
+                    "content_type": 1,
+                    "file_type": 0,
+                    "name": "",
+                    "id": 0,
+                    "thumbnail_url": "",
+                    "option_content": "late, angry"
+                  },
+                  {
+                    "file_url": "",
+                    "content_type": 1,
+                    "file_type": 0,
+                    "name": "",
+                    "id": 0,
+                    "thumbnail_url": "",
+                    "option_content": "lately, angrily"
+                  },
+                  {
+                    "file_url": "",
+                    "content_type": 1,
+                    "file_type": 0,
+                    "name": "",
+                    "id": 0,
+                    "thumbnail_url": "",
+                    "option_content": " late, angrily"
+                  },
+                  {
+                    "file_url": "",
+                    "content_type": 1,
+                    "file_type": 0,
+                    "name": "",
+                    "id": 0,
+                    "thumbnail_url": "",
+                    "option_content": "lately, angry"
+                  }
+                ],
+                "score": "1.00",
+                "sub_questions": [],
+                "style_type": "SELECT_R-T",
+                "template_file_full_url": "",
+                "question_name": "He arrived here ________. The teacher felt ________.",
+                "correct_rate": "",
+                "knowledge_name": "词汇",
+                "page_location_list": [],
+                "code_type": 0,
+                "difficulty_level": "1",
+                "question_index": "",
+                "correct_single_index": 0,
+                "question_type": "1",
+                "media_resources": [],
+                "analysis": "",
+                "question_id": "13091",
+                "difficulty_level_str": "简单",
+                "update_date": "",
+                "exam_options_data": [
+                  {
+                    "data": {
+                      "file_url": "",
+                      "content_type": 1,
+                      "file_type": 0,
+                      "name": "",
+                      "id": 0,
+                      "thumbnail_url": "",
+                      "option_content": "late, angry"
+                    },
+                    "index": 1
+                  },
+                  {
+                    "data": {
+                      "file_url": "",
+                      "content_type": 1,
+                      "file_type": 0,
+                      "name": "",
+                      "id": 0,
+                      "thumbnail_url": "",
+                      "option_content": "lately, angrily"
+                    },
+                    "index": 2
+                  },
+                  {
+                    "data": {
+                      "file_url": "",
+                      "content_type": 1,
+                      "file_type": 0,
+                      "name": "",
+                      "id": 0,
+                      "thumbnail_url": "",
+                      "option_content": " late, angrily"
+                    },
+                    "index": 3
+                  },
+                  {
+                    "data": {
+                      "file_url": "",
+                      "content_type": 1,
+                      "file_type": 0,
+                      "name": "",
+                      "id": 0,
+                      "thumbnail_url": "",
+                      "option_content": "lately, angry"
+                    },
+                    "index": 4
+                  }
+                ],
+                "exam_link_answer_data": [],
+                "reference_file_full_url": "",
+                "correct_multiple_index_set": [],
+                "hint": "Multiple choice.1",
+                "knowledge_id": "2"
+              },
+              {
+                "question_type_str": "单选题",
+                "data_mode": 1,
+                "correct_judge": "",
+                "is_auto_check": "",
+                "content": "[{\"<>\":\"p\",\"text\":\"Your brother is very noisy. Please tell him _________ in the library.\"}]",
+                "correct_subjective_answer": "",
+                "auto_check": true,
+                "options_data": [
+                  {
+                    "file_url": "",
+                    "content_type": 1,
+                    "file_type": 0,
+                    "name": "",
+                    "id": 0,
+                    "thumbnail_url": "",
+                    "option_content": "not talk loudly"
+                  },
+                  {
+                    "file_url": "",
+                    "content_type": 1,
+                    "file_type": 0,
+                    "name": "",
+                    "id": 0,
+                    "thumbnail_url": "",
+                    "option_content": " talk loudly"
+                  },
+                  {
+                    "file_url": "",
+                    "content_type": 1,
+                    "file_type": 0,
+                    "name": "",
+                    "id": 0,
+                    "thumbnail_url": "",
+                    "option_content": " to talk loudly"
+                  },
+                  {
+                    "file_url": "",
+                    "content_type": 1,
+                    "file_type": 0,
+                    "name": "",
+                    "id": 0,
+                    "thumbnail_url": "",
+                    "option_content": "not to talk loudly"
+                  }
+                ],
+                "score": "1.00",
+                "sub_questions": [],
+                "style_type": "SELECT_R-T",
+                "template_file_full_url": "",
+                "question_name": "Your brother is very noisy. Please tell him _________ in the library.",
+                "correct_rate": "",
+                "knowledge_name": "",
+                "page_location_list": [],
+                "code_type": 0,
+                "difficulty_level": "2",
+                "question_index": "",
+                "correct_single_index": 0,
+                "question_type": "1",
+                "media_resources": [],
+                "analysis": "",
+                "question_id": "13092",
+                "difficulty_level_str": "困难",
+                "update_date": "",
+                "exam_options_data": [
+                  {
+                    "data": {
+                      "file_url": "",
+                      "content_type": 1,
+                      "file_type": 0,
+                      "name": "",
+                      "id": 0,
+                      "thumbnail_url": "",
+                      "option_content": "not talk loudly"
+                    },
+                    "index": 1
+                  },
+                  {
+                    "data": {
+                      "file_url": "",
+                      "content_type": 1,
+                      "file_type": 0,
+                      "name": "",
+                      "id": 0,
+                      "thumbnail_url": "",
+                      "option_content": " talk loudly"
+                    },
+                    "index": 2
+                  },
+                  {
+                    "data": {
+                      "file_url": "",
+                      "content_type": 1,
+                      "file_type": 0,
+                      "name": "",
+                      "id": 0,
+                      "thumbnail_url": "",
+                      "option_content": " to talk loudly"
+                    },
+                    "index": 3
+                  },
+                  {
+                    "data": {
+                      "file_url": "",
+                      "content_type": 1,
+                      "file_type": 0,
+                      "name": "",
+                      "id": 0,
+                      "thumbnail_url": "",
+                      "option_content": "not to talk loudly"
+                    },
+                    "index": 4
+                  }
+                ],
+                "exam_link_answer_data": [],
+                "reference_file_full_url": "",
+                "correct_multiple_index_set": [],
+                "hint": "Multiple choice.2",
+                "knowledge_id": ""
+              },
+              {
+                "question_type_str": "判断题",
+                "data_mode": 1,
+                "correct_judge": "",
+                "is_auto_check": "",
+                "content": "[{\"<>\":\"p\",\"html\":[{\"<>\":\"img\",\"src\":\"https://dev-resource.thedeer.cn/pre/resource-testing/image/7677e1e508a1e20a64e43e70dc2bbca24fp612otogstv5zx.png\",\"alt\":\"image.png\",\"title\":\"\",\"base_src\":\"resource-testing/image/7677e1e508a1e20a64e43e70dc2bbca24fp612otogstv5zx.png\"}]},{\"<>\":\"p\",\"text\":\"运行以下代码后，可以观察到角色在舞台上右转 4 次正好一圈。\"}]",
+                "correct_subjective_answer": "",
+                "auto_check": true,
+                "options_data": [],
+                "score": "6.00",
+                "sub_questions": [],
+                "style_type": "JUDGE_R",
+                "template_file_full_url": "",
+                "question_name": "运行以下代码后，可以观察到角色在舞台上右转 4 次正好一圈。",
+                "correct_rate": "",
+                "knowledge_name": "",
+                "page_location_list": [],
+                "code_type": 0,
+                "difficulty_level": "2",
+                "question_index": "",
+                "correct_single_index": 0,
+                "question_type": "3",
+                "media_resources": [],
+                "analysis": "",
+                "question_id": "12917",
+                "difficulty_level_str": "困难",
+                "update_date": "2022-05-19 11:34:35",
+                "exam_options_data": [],
+                "exam_link_answer_data": [],
+                "reference_file_full_url": "",
+                "correct_multiple_index_set": [],
+                "hint": "判断以下说法是否正确",
+                "knowledge_id": ""
+              }
+            ],
+            "examination_duration": 5400,
+            "examination_id": 495,
+            "examination_name": "校招考试（仿真数据，勿调整）",
+            "examination_record_id": 47288,
+            "skin_type": 1
+          },
+          "online_exam_name": "校招考试（仿真数据，勿调整）",
+          "remain_second": 59920,
+          "exam_description": "",
+          "applicant_simple_info": {
+            "applicant_id": "154",
+            "phone": "12345678905",
+            "applicant_name": "李老丹"
+          },
+          "answer_map": {
+            "13091": {
+              "answer_use_time": 0,
+              "scratch_answer_json": "",
+              "question_type": 0,
+              "code_file_oss_temp_path": "",
+              "multiple_index_set": [],
+              "single_index": 1,
+              "judge": false,
+              "question_id": 13091,
+              "is_correct": "",
+              "gap_data": [],
+              "subjective_answer": "",
+              "oss_temp_url": ""
+            },
+            "13092": {
+              "answer_use_time": 0,
+              "scratch_answer_json": "",
+              "question_type": 0,
+              "code_file_oss_temp_path": "",
+              "multiple_index_set": [],
+              "single_index": 4,
+              "judge": false,
+              "question_id": 13092,
+              "is_correct": "",
+              "gap_data": [],
+              "subjective_answer": "",
+              "oss_temp_url": ""
+            },
+            "12917": {
+              "answer_use_time": 0,
+              "scratch_answer_json": "",
+              "question_type": 0,
+              "code_file_oss_temp_path": "",
+              "multiple_index_set": [],
+              "single_index": 0,
+              "judge": false,
+              "question_id": 12917,
+              "is_correct": "",
+              "gap_data": [],
+              "subjective_answer": "",
+              "oss_temp_url": ""
+            }
+          }
+        },
+        "error_code": 0,
+        "message": "success",
+        "tid": "8f4f6e7b2287471fbc22ff5a3f4182e5.1822.16892350452200069",
+        "ts": 1689235045453
+      }
+      let {examination_paper,answer_map,remain_second} = res.data
+      let {question_list} = examination_paper
+
+      //todo 测试数据
+      responsiveObj.value.resData = res.data
+      responsiveObj.value.resData.remain_second = responsiveObj.value.resData.remain_second * 1000
+      // responsiveObj.value.resData.remain_second = 0
+      parseQuestionListItem(question_list,answer_map)
+      // responsiveObj.value.questionList = question_list.slice(0,1)
+      responsiveObj.value.questionList = question_list
+    }
+
+
+    function parseQuestionListItem(question_list:Array<any>,answer_map:any,parentIndex:any = undefined){
+      /*setTimeout(()=>{
+        // let editorContentWidth = (document.querySelector('.editor-content') as any)
+        // console.log(editorContentWidth,777);
+        console.log(jQuery('.editor-content').width());
+        let editorContent = jQuery('.editor-content')
+        let contentWidth = editorContent.width()
+        let imgs = editorContent.find('img')
+        console.log(contentWidth,123);
+        imgs.each((index:number,img:any)=>{
+          console.log(img.width,99);
+          if(img.width > contentWidth){
+            img.width = contentWidth
+            img.height = 'auto'
+          }
+        })
+        // console.log(imgs,1);
+      },500)*/
+      question_list.forEach((item:any,index:number)=>{
+        item.questionComponent = questionMapper[item.question_type]
+        if(parentIndex === undefined){
+          item.questionIndex = index + 1
+        }else{
+          item.questionIndex = (parentIndex + 1) + '-' + (index + 1)
+          item.questionIndex2 = index + 1
+        }
+        if(answer_map && answer_map.hasOwnProperty(item.question_id)){
+          item.answerMap = answer_map[item.question_id]
+        }else{
+          item.answerMap = null
+        }
+        let question_type = item.question_type
+        if(question_type == 3){
+          //判断题手动构造选项数组
+          item.exam_options_data = [
+            {
+              index:1,data:{
+                name:'正确'
+              }
+            },
+            {
+              index:2,data:{
+                name:'错误'
+              }
+            }
+          ]
+        }else{
+          if(item.exam_options_data && item.exam_options_data.length){
+            item.exam_options_data.forEach((subItem:any,subIndex:number)=>{
+              subItem.enIndex = fun.indexToEnIndex(subIndex+1)
+            })
+          }
+        }
+
+        //转化富文本
+        try{
+          let contentArr = JSON.parse(item.content)
+          // console.log(contentArr,333);
+          let contentWidth = jQuery('.question-list').width() - 30
+          parseContent(contentArr,contentWidth)
+          item.htmlContent = $.json2html({}, contentArr);
+        }catch(e){
+          item.htmlContent = item.content
+          console.log('json2html转化出错：', e);
+        }
+        //如果是阅读题要递归解析
+        if(item.sub_questions && item.sub_questions.length){
+          parseQuestionListItem(item.sub_questions,answer_map,index)
+        }
+
+      })
+      // console.log(question_list,33333);
+    }
+
+    //图片宽度超出框架的时候把宽度设置成框架大小
+    function parseContent(arr:any,contentWidth:number){
+      arr.forEach((item:any)=>{
+        if(item['<>'] === 'img'){
+          if(item.hasOwnProperty('width')){
+            let width = Number(item.width)
+            if(width > contentWidth){
+              item.width = Math.floor(contentWidth)
+              item.height && delete item.height
+            }
+          }
+        }
+        if(item.html && item.html.length){
+          parseContent(item.html,contentWidth)
+        }
+      })
+    }
+
+
+    return {
+      ...toRefs(data),
+      responsiveObj,
+      quitQuestion
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+.showBlur{
+  filter:blur(5px);
+}
+.white-mask{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left:0;
+  top:0;
+  z-index:666;
+}
+</style>