dianshang-qianduan/src/views/learningCenter/evaluation.vue

<template>
   <el-scrollbar height="850px" always>
     <div class="app-container">
       <div class="tl_top">
         <div class="eval_top">
           <p>
             <img
               src="@/assets/icons/svg/color.svg"
               style="width: 15px"
             />选择题 (共{{ mlistLength }}题), 合计100分
           </p>
           <el-button
             style="margin-top: 10px;margin-left: 1212px;"
             type="primary"
             plain
             @click="answerAgain"
             >重新作答</el-button
           >
           <el-button
             style="margin-top: 10px"
             type="primary"
             plain
             @click="taskAnswer"
             >提交</el-button
           >
         </div>
         <hr />
       </div>
       <div
         class="eval_main"
         v-for="(item, index) in mlist"
         :key="index"
         :class="['eval_main' + index]"
       >
         <div class="eval_main_title">
           <div class="eval_main_left">
             <span>{{ index + 1 }}</span>
           </div>
           <div class="eval_main_right">
             {{ item.topicName }}&nbsp;<span>({{ item.topicType }})</span>
           </div>
         </div>
         <div class="eval_main_content">
           <div class="eval_main_single">
             <hr />
             <el-radio-group
               v-if="item.topicType === '单选题'"
               v-model="item.studentAnswer"
               @change="changeMultipleChoiceQuestions"
             >
               <el-radio
                 :class="getSingleChoiceStyle(item.rightOrWrong, item.answer, 'A',item.studentAnswer)" v-if="item.optionA !== null" label="A" border >A.{{ item.optionA}}<span class="stylingCorrectly" v-if="item.answer!=='A'&&item.studentAnswer==='A'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span>
               </el-radio
               >
               <el-radio
                 :class=" getSingleChoiceStyle(item.rightOrWrong, item.answer, 'B',item.studentAnswer) "
                 v-if="item.optionB !== null"
                 label="B"
                 border
                 >B.{{ item.optionB }}<span class="stylingCorrectly" v-if="item.answer!=='B'&&item.studentAnswer==='B'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span>
                 </el-radio
               >
               <el-radio
                 :class="
                   getSingleChoiceStyle(item.rightOrWrong, item.answer, 'C',item.studentAnswer)
                 "
                 v-if="item.optionC !== null"
                 label="C"
                 border
                 >C.{{ item.optionC }}<span class="stylingCorrectly" v-if="item.answer!=='C'&&item.studentAnswer==='C'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span>
                </el-radio
               >
               <el-radio
                 :class="
                   getSingleChoiceStyle(item.rightOrWrong, item.answer, 'D',item.studentAnswer)
                 "
                 v-if="item.optionD !== null"
                 label="D"
                 border
                 >D.{{ item.optionD }}<span class="stylingCorrectly" v-if="item.answer!=='D'&&item.studentAnswer==='D'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span></el-radio
               >
               <el-radio
                 :class="
                   getSingleChoiceStyle(item.rightOrWrong, item.answer, 'E',item.studentAnswer)
                 "
                 v-if="item.optionE !== null"
                 label="E"
                 border
                 >E.{{ item.optionE }}<span class="stylingCorrectly" v-if="item.answer!=='E'&&item.studentAnswer==='E'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span></el-radio
               >
             </el-radio-group>
             <div class="eval_main_checkbox">
 
               <el-checkbox-group
                 v-if="item.topicType === '多选题'"
                 v-model="item.studentAnswer"
               >
                 <el-checkbox
                   v-if="item.optionA !== null"
                   v-model="item.state"
                   :label="item.optionA"
                   border
                   :class="showIcon(item, 'A')"
                   >
                   A.{{ item.optionA
                   }}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionA)">正确答案:{{item.answer}}</span></el-checkbox
                 >
                 <el-checkbox
                   v-if="item.optionB !== null"
                   v-model="item.state"
                   :label="item.optionB"
                   border
                   :class="showIcon(item, 'B')"
                   >B.{{ item.optionB
                   }}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionB)">正确答案:{{item.answer}}</span></el-checkbox
                 >
                 <el-checkbox
                   v-if="item.optionC !== null"
                   v-model="item.state"
                   :label="item.optionC"
                   border
                   :class="showIcon(item, 'C')"
                   >C.{{ item.optionC
                   }}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionC)">正确答案:{{item.answer}}</span></el-checkbox
                 >
                 <el-checkbox
                   v-if="item.optionD !== null"
                   v-model="item.state"
                   :label="item.optionD"
                   border
                   :class="showIcon(item, 'D')"
                   >D.{{ item.optionD
                   }}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionD)">正确答案:{{item.answer}}</span></el-checkbox
                 >
                 <el-checkbox
                   v-if="item.optionE !== null"
                   v-model="item.state"
                   :label="item.optionE"
                   border
                   :class="showIcon(item, 'E')"
                   >E.{{ item.optionE
                   }}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionE)">正确答案:{{item.answer}}</span></el-checkbox
                 >
               </el-checkbox-group>
             </div>
             <el-radio-group
               v-if="item.topicType === '判断题'"
               v-model="item.studentAnswer"
             >
               <el-radio label="A" border  :class=" getSingleChoiceStyle(item.rightOrWrong, item.answer, 'A',item.studentAnswer)">正确</el-radio>
               <el-radio label="B" border :class=" getSingleChoiceStyle(item.rightOrWrong, item.answer, 'B',item.studentAnswer)">错误</el-radio>
             </el-radio-group>
           </div>
         </div>
       </div>
     </div>
   </el-scrollbar>
 </template>
 <script setup>
//  import { useRouter } from "vue-router";
//  import {Base64} from 'js-base64'
 import * as API from "@/api/prtrait/prtrait.js" 
 import { getUserInfo } from "@/utils/auth";
 import { ElMessage } from "element-plus";
import { onMounted } from "vue";
 const data = ref({
   module: "",
   ascription:"",
   userId: JSON.parse(getUserInfo()).userId,
 });
 const multipleChoiceAnswer = ref();
//  const router = useRouter();
 const mlist = ref({});
 const mlistLength = ref(0);
 const correctNot1 = ref(false);
 const correctNot2 = ref(false);
 const getSingleChoiceStyle = (item, answer, answer2,studentAnswer) => {
   // console.log(item, answer, answer2);
   // if (item === "正确" && answer === answer2) {
     if(item===''||item===null){
       return
     }
     if ( answer === answer2) {
     correctNot1.value = true;
     return "correctStyleSingleChoiceQuestions";
   }
   if (answer !== answer2) {
     correctNot2.value = true;
     return "singleChoiceErrorStyle";
   }
   return;
 };
 const showIcon = (item, answer) => {
 if(item.rightOrWrong===''||item.rightOrWrong===null){
   return
 }
   if(item.answer!==null){
     const isFlag=ref(false)
       item.answer.split(',').map((item2)=>{
          if(item2===answer){
           isFlag.value=true
          }
         return item2
     })
     if(isFlag.value){
       return "Correct";
     }else{
       return "error"
     }
   }
 };
 // 单选题ico函数
 
 //哈希函数学习测评
 const answerData=ref([])
 onMounted(()=>{
  //  data.value.module='数字营销'
   submitDialogVisible1()
 })
 const submitDialogVisible1 = () => {
   const newArray = [];
      API.hashFunctionLearningReview(data.value).then((res)=>{
         mlist.value = res.data;
       mlist.value.forEach((item) => {
         answerData.value.push(item.studentAnswer)
            if (item.topicType === "多选题"&&item.rightOrWrong===null) {
            item.studentAnswer = [];
            }
            if(item.topicType === "多选题"&&item.rightOrWrong!==null){
            item.studentAnswer = item.studentAnswer.split(',').map((item2) => {
            if (item2 === "A") {
            return item.optionA;
            }
            if (item2 === "B") {
            return item.optionB;
            }
            if (item2 === "C") {
            return item.optionC;
            }
            if (item2 === "D") {
            return item.optionD;
            }
            if (item2 === "E") {
            return item.optionE;
            }
            return item2;
         });
         }
      });
      mlistLength.value = res.data.length;

      })
    
 };
 const answer = ref([]);
 // const checkboxGroup = ref([]);
 
 const ifShow=(item,item2)=>{
   if(item.rightOrWrong===''||item.rightOrWrong===null){
     return false
   }
   const flag2=ref(false)
  const item4=item.answer.split(',')
       const arr=ref([])
       item4.forEach(item5=>{
           if(item5==='A'){
              arr.value.push(item.optionA)
           }
           if(item5==='B'){
             arr.value.push(item.optionB)
           }
           if(item5==='C'){
             arr.value.push(item.optionC)
           }if(item5==='D'){
             arr.value.push(item.optionD)
           }
           if(item5==='E'){
             arr.value.push(item.optionE)
           }
       })  
     item.studentAnswer.forEach(item3=>{
           if(item3===item2){
             flag2.value=true
           }
         })
     // if(JSON.stringify(item.studentAnswer) === JSON.stringify(arr.value)){
     if(arraysAreEqual(JSON.stringify(item.studentAnswer),JSON.stringify(arr.value))){
       flag2.value=false
     }
     
     return flag2.value
 }
 function arraysAreEqual(arr1, arr2) {
     const set1 = new Set(arr1);
     const set2 = new Set(arr2);
     return Array.from(set1).every(value => set2.has(value)) && Array.from(set2).every(value => set1.has(value));
 }
 //哈希函数提交
 const isTask=ref(false)
 let number=0
 const TaskAssessment1 = async (TaskData) => {
   TaskData.stuScoreDetailsDTO.stuLearningAssessmentDTOS.forEach(item => {
     if(item.studentAnswer[0]===null||item.studentAnswer.length===0){
      isTask.value=true
     }
   });
   if(isTask.value&&number===0){
     ElMessage({
           message: "还有题目未完成",
           type: "warning",
         })
         isTask.value=false
         number++
         return
   }
   try {
     const res = await API.scoreLearningAssessment(TaskData);
     ElMessage({
       message: "提交成功",
       type: "success",
     });
     setTimeout(()=>{
      submitDialogVisible1()
     },500)
   } catch (error) {
   //   ElMessage({
   //     message: "请勿重复提交",
   //     type: "warning",
   //   });
   }
 };
 const answerAgain=()=>{
   mlist.value.forEach(item=>{
     // item.answer=''
     if(item.topicType==='多选题'){
       item.studentAnswer=[]
     }else{
       item.studentAnswer=''
     }
     item.rightOrWrong=''
   })
 }
 const taskAnswer = () => {
   mlist.value.forEach((item) => {
     if (item.studentAnswer === "" || item.studentAnswer === null) {
       return;
     }
   });
   const mlistArray = Object.values(mlist.value);
   const transformedData = {
    stuScoreDetailsDTO: {
       userId: JSON.parse(getUserInfo()).userId,
       learningProjects: "学习测评",
       assessmentItems: "客观题测试",
       stuLearningAssessmentDTOS: mlistArray.map((item) => {
         return {
           topicId: item.topicId,
           topicName: item.topicName,
           topicType: item.topicType,
           topicDifficultyLevel: item.topicDifficultyLevel,
           topicScore: item.topicScore,
           topicNumber: item.topicNumber,
           optionA: item.optionA,
           optionB: item.optionB,
           optionC: item.optionC,
           optionD: item.optionD,
           optionE: item.optionE,
           optionF: item.optionF,
           answer: item.answer,
           studentAnswer: item.studentAnswer,
           questionAnswer: item.questionAnswer,
           module: item.module,
           logic: item.logic,
         };
       }),
     },
   };
   transformedData.stuScoreDetailsDTO.stuLearningAssessmentDTOS.forEach(
     (item) => {
       // console.log(item,"89465845");
       if (item.topicType === "多选题") {
         const newArray = [];
         item.studentAnswer.forEach((item2) => {
           if (item2 === item.optionA) {
             newArray.push("A");
           }
           if (item2 === item.optionB) {
             newArray.push("B");
           }
           if (item2 === item.optionC) {
             newArray.push("C");
           }
           if (item2 === item.optionD) {
             newArray.push("D");
           }
           if (item2 === item.optionE) {
             newArray.push("E");
           }
         });
         item.studentAnswer = newArray;
         // item.studentAnswer.push(newArray)
       }
       if (item.topicType === "多选题") {
       item.studentAnswer.sort(function (s1, s2) {
         let x1 = s1.toUpperCase();
         let x2 = s2.toUpperCase();
         if (x1 < x2) {
           return -1;
         }
         if (x1 > x2) {
           return 1;
         }
         return 0;
       });
     }
       if (item.topicType !== "多选题") {
         let flag = item.studentAnswer;
         item.studentAnswer = [];
         item.studentAnswer.push(flag);
       }
     }
   );
   TaskAssessment1(transformedData);
 };
 </script>
 <style lang="scss" scoped>
 .app-container {
   background-color: #fff;
   border-radius: 6px;
 }
 .tl_top {
  position: fixed;
    width: 82%;
    height: 45px;
    z-index: 999;
    top: 80px;
    right: 50px;
    background-color: white;
 }
 .eval_top {
   display: flex;
   justify-content: space-between;
   // position: fixed;
   // z-index: 999;
   p {
     width: 210px;
     height: 14px;
     font-size: 14px;
     font-family: Source Han Sans CN;
     font-weight: 400;
     color: #333333;
   }
 }
 .eval_main {
   margin-top: 25px;
   .eval_main_title {
     width: 100%;
     display: flex;
     font-weight: bold;
     font-size: 14px;
     align-items: center;
     .eval_main_right {
       margin-left: 23px;
       span {
         font-size: 14px;
         color: #00b4f2;
       }
       // &::before{
       //     content: ' ';
       //     margin-right:80PX;
       // }
     }
   }
 }
 .eval_main_single {
   margin: 20px 0 10px 91px;
   .el-radio-group {
     width: 985px;
   }
   .el-radio {
     margin-bottom: 5px;
     width: 801px;
     top: 5px;
   }
   .el-checkbox {
     margin-bottom: 5px;
     width: 801px;
     top: 5px;
   }
   .el-checkbox-group {
     font-size: 0;
     line-height: 0;
     display: inline-flex;
     align-items: center;
     flex-wrap: wrap;
     width: 985px;
   }
 }
 .eval_main_left {
   position: relative;
   align-items: center;
   display: flex;
   justify-content: center;
   width: 32px;
   height: 32px;
   background-color: #00b4f2;
   color: white;
   border-radius: 50%;
   font-size: 13px;
   font-size: 15px;
   font-weight: 100;
   margin-left: 35px;
 }
 hr {
   border: 1px solid #e5e5e5;
 }
 .eval_main0 {
   margin-top: 53px !important;
 }
 .correctStyleSingleChoiceQuestions.el-radio.is-bordered.is-checked {
   border-color: #00bb00 !important;
   position: relative;
   &::after{
       content: '√';
       position: absolute;
       // margin-left: 94%;
       left: 805px;
       color: #00bb00;
   }
 }
 .singleChoiceErrorStyle.el-radio.is-bordered.is-checked {
   border-color: red !important;
   // 尾部插入
   position: relative;
   &::after{
       content: 'X';
       position: absolute;
       // margin-left: 93%;
       left: 805px;
       color: red;
   }
 }
 .error.el-checkbox.is-bordered.is-checked  {
   position: relative;
   border-color: red !important;
   &::after{
       content: 'X';
       // margin-left: 96% !important;
       position: absolute;
       left: 805px;
       color: red;
   }
 }
 .Correct.el-checkbox.is-bordered.is-checked   {
   position: relative;
   // right: -2%;
   border-color: #00bb00 !important;
   &::after{
       content: '√';
       // margin-left: 93%;
       position: absolute;
       color: #00bb00;
       left: 805px;
   }
 }
 .stylingCorrectly{
   position: absolute;
     right: -101px;
 }
 .stylingCorrectly2{
   position: absolute;
     left: 828px;
 }
 </style>