答完回显效果

src/views/largeDataScreen/home.vue

@@ -509,7 +509,7 @@
         <el-progress
           :text-inside="true"
           :stroke-width="20"
-          :percentage="80"
+          :percentage="100"
           style="margin-bottom: 25px"
         />
         <p class="name">复制新文件</p>
@@ -520,7 +520,7 @@
         <el-progress
           :text-inside="true"
           :stroke-width="20"
-          :percentage="80"
+          :percentage="100"
           style="margin-bottom: 25px"
         />
         <p class="name">复制新文件</p>

src/views/subjectTest/index.vue

@@ -8,37 +8,40 @@
         <!-- 左边按钮 -->
         <button class="submit-left" @click="SubLeft"></button>
         <div class="question-body">
-            <div class="question" >
+            <div class="question">
-                第<span class="question-count" >{{ currentSum }}</span>题
+                第<span class="question-count">{{ currentSum }}</span>题
-                <div class="timer">{{ formattedTime  }} 秒</div>
+                <!-- <div class="timer">{{ formattedTime  }} 秒</div> -->
             </div>
-            <p class="questions">共<span class="questions-count">{{questions.length}}</span>题</p>
+            <p class="questions">共<span class="questions-count">{{ questions.length }}</span>题</p>
             <!-- 遍历题目 -->
             <div v-if="currentQuestionIndex < questions.length" class="txt">
                 <span>{{ currentQuestion }}</span>
             </div>
             <!-- 遍历选项 -->
             <div class="options">
-                <button
+                <button v-for="option in xnOptionsList" :key="option.id"
-                v-for="option in xnOptionsList"
+                    :class="['option', {
-                :key="option.id"
+                        // 'selected': option.hasOwnProperty('isChecked') ? option.isChecked : 
-                :class="['option', { 'selected': selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid == option.id }]"
+                        // selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid == option.id
-                @click="selectOption(option.id)"
+                        // 'selected': option.isChecked || (selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid === option.id)
-                class="option"
+                        'selected': 
-                >
+                            complete == true 
+                              ? option.isChecked 
+                              : (selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid === option.id)
+                    }]"
+                    @click="selectOption(option.id)" class="option">
                     <span class="option-letter">{{ option.optionName }}</span>
-                    {{ option.optionText  }}
+                    {{ option.optionText }}
                 </button>
             </div>
-            
+
         </div>
         <div class="submit-buttons">
-        <button class="submit-btn" @click="resetAnswers">退出答题</button>
+            <button class="submit-btn" @click="resetAnswers">退出答题</button>
-        <button class="submit-btn" @click="submitAnswers">提交成绩</button>
+            <button class="submit-btn" @click="submitAnswers" v-if="complete === false">提交成绩</button>
         </div>
-        <el-dialog
+        <el-dialog v-model="isVisible" :close-on-click-modal="false" :show-close="false">
-        v-model="isVisible" :close-on-click-modal="false" :show-close="false">
+            <resultsAnnounced :score="score" :formattedTime="formattedTime" @recreate="handleRecreate" />
-        <resultsAnnounced  :score = "score" :formattedTime ="formattedTime "@recreate="handleRecreate"/>
         </el-dialog>
     </div>
 </template>
@@ -46,161 +49,170 @@
 <script lang="ts" setup>
 import resultsAnnounced from '@/views/resultsAnnounced/index.vue'
 import settingStore from "@/store/modules/setting";
-import {subTestapi,checkapi} from '@/api/index.ts'
+import { subTestapi, checkapi } from '@/api/index.ts'
-import { ref,computed,onMounted, onUnmounted} from "vue"
+import { ref, computed, onMounted, onUnmounted } from "vue"
 import { ElMessage } from 'element-plus'
-import { useRouter   } from 'vue-router';
+import { useRouter } from 'vue-router';
-    const setting = settingStore();
+const setting = settingStore();
-    //左箭头
+//左箭头
-    const SubLeft =()=>{
+const SubLeft = () => {
-        console.log(currentQuestionIndex.value)
+    console.log(currentQuestionIndex.value)
-        if(currentQuestionIndex.value >= 1){
+    if (currentQuestionIndex.value >= 1) {
-            currentQuestionIndex.value = currentQuestionIndex.value - 1
+        currentQuestionIndex.value = currentQuestionIndex.value - 1
-        }else{
+    } else {
-            ElMessage.warning('无法上翻')
+        ElMessage.warning('无法上翻')
-        }
     }
-    //右箭头
+}
-    const SubRight = async()=>{
+//右箭头
-        
+const SubRight = async () => {
-        const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
+    console.log(complete.value,'11111111')
-        // answer.value = res.result;
+    if(complete.value == false){
+        const res: any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
         console.log(selectedOption.value);
-        console.log(res,'res')
+        console.log(res, 'res')
         // 如果答对了，进入下一题
         if (res.result == "success") {
-            if(currentSum.value < questions.value.length){
+            if (currentSum.value < questions.value.length) {
                 currentQuestionIndex.value++; // 更新到下一题
             }
-            else{
+            else {
                 ElMessage.success('答题已完成，请提交')
             }
         }
-        else{
+        else {
-            if(selectedOption.value[currentQuestionIndex.value] == null){
+            if (selectedOption.value[currentQuestionIndex.value] == null) {
                 ElMessage.warning('请先答题')
-            }else{
+            } else {
                 ElMessage.error('回答错误')
             }
         }
+    }else{
+        if (currentSum.value < questions.value.length) {
+                currentQuestionIndex.value++; // 更新到下一题
+            }
+            else {
+                ElMessage.warning('无法下翻')
+            }
     }
-    const questions = ref<any[]>([]);
+    
-    const currentList = async ()=>{
+}
-        const res:any = await subTestapi();
+const questions = ref<any[]>([]);
-        questions.value = res.result
+const currentList = async () => {
-        console.log(res.result)
+    const res: any = await subTestapi();
-        // console.log(questions.value[0].xnOptionsList[0].id)
+    questions.value = res.result
-        // console.log(questions.value,'questions1.value')
+    console.log(res.result)
+    // console.log(questions.value[0].xnOptionsList[0].id)
+    // console.log(questions.value,'questions1.value')
+}
+// 当前题目的索引
+const currentQuestionIndex = ref(0);
+//计算当前题目的序号（从1开始）
+const currentSum = computed(() => currentQuestionIndex.value + 1);
+// 当前题目
+const currentQuestion = computed(() => {
+    // 确保 questions.value 至少有一个元素
+    if (questions.value.length > 0) {
+        return questions.value[currentQuestionIndex.value].questionText;
     }
-    // 当前题目的索引
+    return '';
-    const currentQuestionIndex = ref(0);
+});
-    //计算当前题目的序号（从1开始）
+const xnOptionsList = computed(() => {
-    const currentSum = computed(() => currentQuestionIndex.value + 1);
+    if (questions.value.length > 0) {
-    // 当前题目
+        return questions.value[currentQuestionIndex.value].xnOptionsList
-    const currentQuestion = computed(() => {
+    }
-        // 确保 questions.value 至少有一个元素
+    console.log(selectedOption.value)
-        if (questions.value.length > 0) {
+    return [];
-            return questions.value[currentQuestionIndex.value].questionText;
+})
-        }
+// 当前选中的按钮索引
-        return '';
+// 初始化为一个数组，数组长度与 questions.value 的长度一致，每个元素初始值为 null
-        });
+const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.length).fill(null));
-    const xnOptionsList =computed(() =>{
-        if (questions.value.length > 0) {
-            return questions.value[currentQuestionIndex.value].xnOptionsList
-        }
-        console.log(selectedOption.value)
-        return [];
-    })
-    // 当前选中的按钮索引
-    // 初始化为一个数组，数组长度与 questions.value 的长度一致，每个元素初始值为 null
-    const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.length).fill(null));
-
-    //选中逻辑
-    const selectOption = (option:any) => {
-        
-        if (questions.value.length > 0) {
 
+//选中逻辑
+const selectOption = (option: any) => {
+    if (complete.value == false) {
+        if (questions.value.length > 0) {
             const currentQuestion = questions.value[currentQuestionIndex.value];
-            selectedOption.value[currentQuestionIndex.value]= {
+            selectedOption.value[currentQuestionIndex.value] = {
                 oid: option,
                 qid: currentQuestion.id
             };
-            console.log(selectedOption.value[currentQuestionIndex.value].oid,option);
+            console.log(selectedOption.value[currentQuestionIndex.value].oid, option);
         }
     }
-    const score = ref(0); // 初始化分数为0
+}
-    const isVisible = ref (false)     //成绩公布页的显示与否
+const score = ref(0); // 初始化分数为0
-    // 提交成绩按钮
+const isVisible = ref(false)     //成绩公布页的显示与否
-    const submitAnswers = async() => {
+const complete = ref<boolean>(Boolean(localStorage.getItem("complete")));    //点击提交按钮后控制答题回显
-        console.log(selectedOption.value[currentQuestionIndex.value])
+
-        //答完全部题才能提交成绩
+
-        if(selectedOption.value[questions.value.length - 1] == null){
+// 提交成绩按钮
-            ElMessage.warning('请先完成答题')
+const submitAnswers = async () => {
-        }else{
-            const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
-            if (res.result !== "success"){
-                ElMessage.error('回答错误')
-            }else{
-                stopTimer(); // 停止计时
-                score.value = 100;    // 重置分数
-                isVisible.value = true;
-                // for (let i = 0; i < questions.value.length; i++) {
-                //     // 如果当前题目的选中选项与正确答案一致，则加10分
-                //     if (res.result == "success") {
-                //         // score.value += 10;
-                //         score.value == 100
-                //     }
-                // }
-            }
-        }
-    };
-    // 退出答题
-    const router = useRouter()
-    const resetAnswers = () => {
-        router.push('/studyPage')
-    };
-    // 计时器相关变量
-    const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值
-    const elapsedTime = ref(0); // 已经过去的时间（单位：秒）
-
-    // 计算属性：将秒数转换为“分：秒”格式
-    const formattedTime = computed(() => {
-        const minutes = Math.floor(elapsedTime.value / 60); // 计算分钟数
-        const seconds = elapsedTime.value % 60; // 计算剩余秒数
-        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-    });
-
-    // 开始计时
-    const startTimer = () => {
-        timer.value = setInterval(() => {
-            elapsedTime.value += 1; // 每秒增加 1
-        }, 1000);
-    };
-
-    // 停止计时
-    const stopTimer = () => {
-        if (timer.value) {
-            clearInterval(timer.value);
-            timer.value = null;
-        }
-    };
-    // 页面加载时开始计时
-    onMounted(() => {startTimer();currentList();});
-
-    // 页面卸载时停止计时（防止内存泄漏）
-    onUnmounted(() => {stopTimer();});
-
-    // 处理子组件触发的重做事件
-    const handleRecreate = () => {
-        console.log(timer.value,"子组件触发了重做事件");
-        isVisible.value = false; // 隐藏子组件
-        selectedOption.value = Array(questions.value.length).fill(null); // 重置所有选中结果
-        currentQuestionIndex.value = 0; // 重置到第一题
-        stopTimer()//计时器清零
-        elapsedTime.value = 0
-        startTimer()
-    };
     
+    console.log(selectedOption.value[currentQuestionIndex.value])
+    //答完全部题才能提交成绩
+    if (selectedOption.value[questions.value.length - 1] == null) {
+        ElMessage.warning('请先完成答题')
+    }else {
+        const res: any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
+        if (res.result !== "success") {
+            ElMessage.error('回答错误')
+        } else {
+            stopTimer(); // 停止计时
+            score.value = 100;    // 重置分数
+            isVisible.value = true;
+            localStorage.setItem("complete", "true");;
+            // const display = complete.value
+        }
+    }
+};
+// 退出答题
+const router = useRouter()
+const resetAnswers = () => {
+    router.push('/studyPage')
+};
+// 计时器相关变量
+const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值
+const elapsedTime = ref(0); // 已经过去的时间（单位：秒）
+
+// 计算属性：将秒数转换为“分：秒”格式
+const formattedTime = computed(() => {
+    const minutes = Math.floor(elapsedTime.value / 60); // 计算分钟数
+    const seconds = elapsedTime.value % 60; // 计算剩余秒数
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+});
+
+// 开始计时
+const startTimer = () => {
+    timer.value = setInterval(() => {
+        elapsedTime.value += 1; // 每秒增加 1
+    }, 1000);
+};
+
+// 停止计时
+const stopTimer = () => {
+    if (timer.value) {
+        clearInterval(timer.value);
+        timer.value = null;
+    }
+};
+// 页面加载时开始计时
+onMounted(() => { startTimer(); currentList();});
+
+// 页面卸载时停止计时（防止内存泄漏）
+onUnmounted(() => { stopTimer(); });
+
+// 处理子组件触发的重做事件
+const handleRecreate = () => {
+    console.log(timer.value, "子组件触发了重做事件");
+    isVisible.value = false; // 隐藏子组件
+    selectedOption.value = Array(questions.value.length).fill(null); // 重置所有选中结果
+    currentQuestionIndex.value = 0; // 重置到第一题
+    stopTimer()//计时器清零
+    elapsedTime.value = 0
+    startTimer()
+    localStorage.setItem("complete", "false");
+};
+
 </script>
 
 <style lang="scss" scoped>
@@ -213,27 +225,36 @@ import { useRouter   } from 'vue-router';
     background: url("@/assets/images/bg3.png") no-repeat;
     background-size: cover;
 
-    .submit-right{
+    .submit-right {
         background: url("@/assets/images/right.png") no-repeat;
         background-size: contain;
-        width: 60px; /* 按钮宽度 */
+        width: 60px;
-        height: 60px; /* 按钮高度 */
+        /* 按钮宽度 */
+        height: 60px;
+        /* 按钮高度 */
         border: none;
         cursor: pointer;
         position: absolute;
-        right: 0; /* 紧靠右部 */
+        right: 0;
-        top: 40%; /* 垂直居中*/
+        /* 紧靠右部 */
+        top: 40%;
+        /* 垂直居中*/
     }
-    .submit-left{
+
+    .submit-left {
         background: url("@/assets/images/left.png") no-repeat;
         background-size: contain;
-        width: 60px; /* 按钮宽度 */
+        width: 60px;
-        height: 60px; /* 按钮高度 */
+        /* 按钮宽度 */
+        height: 60px;
+        /* 按钮高度 */
         border: none;
         cursor: pointer;
         position: absolute;
-        left: 0; /* 紧靠左部 */
+        left: 0;
-        top: 40%; /* 垂直居中*/
+        /* 紧靠左部 */
+        top: 40%;
+        /* 垂直居中*/
     }
 
     .top {
@@ -252,10 +273,14 @@ import { useRouter   } from 'vue-router';
     }
 
     .question-body {
-        background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; /* 添加 background-position */
+        background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center;
-        background-size: contain; /* 确保背景图片覆盖整个元素 */
+        /* 添加 background-position */
-        width: 1100px; /* 100% 宽度以确保背景图片完全显示 */
+        background-size: contain;
-        height: 500px; /* 固定高度 */
+        /* 确保背景图片覆盖整个元素 */
+        width: 1100px;
+        /* 100% 宽度以确保背景图片完全显示 */
+        height: 500px;
+        /* 固定高度 */
         margin-top: 100px;
         margin-left: auto;
         margin-right: auto;
@@ -263,104 +288,162 @@ import { useRouter   } from 'vue-router';
         padding-right: 50px;
         padding-top: 30px;
 
-    .question{
+        .question {
-        font-size: 42px; /* 字体大小 */
+            font-size: 42px;
-        text-align: center; /* 水平居中 */
+            /* 字体大小 */
-        letter-spacing: 3px; /* 字符间距，单位可以是 px、em 等 */
+            text-align: center;
-        // margin-top: 50px;
+            /* 水平居中 */
-        color: #fff;
+            letter-spacing: 3px;
-    }
+            /* 字符间距，单位可以是 px、em 等 */
-    .question-count {
+            // margin-top: 50px;
-        font-weight: bold; /* 数字加粗 */
+            color: #fff;
-        color: rgb(165, 144, 95); /* 数字颜色为红色 */
+        }
-        font-size: 55px; /* 数字字体大小 */
+
-    }
+        .question-count {
-    .timer{
+            font-weight: bold;
-        font-size: 18px; /* 字体大小 */
+            /* 数字加粗 */
-        letter-spacing: 3px; /* 字符间距 */
+            color: rgb(165, 144, 95);
-        text-align: right;
+            /* 数字颜色为红色 */
-        position: absolute; /* 使用绝对定位 */
+            font-size: 55px;
-        top: 25%; /* 距离顶部 */
+            /* 数字字体大小 */
-        left: 71.3%; /* 距离左侧 */
+        }
-    }
+
-    .questions{
+        .timer {
-        font-size: 23px; /* 字体大小 */
+            font-size: 18px;
-        letter-spacing: 3px; /* 字符间距 */
+            /* 字体大小 */
-        text-align: right;
+            letter-spacing: 3px;
-        color: #fff;
+            /* 字符间距 */
-    }
+            text-align: right;
-    .questions-count {
+            position: absolute;
-        font-weight: bold; /* 数字加粗 */
+            /* 使用绝对定位 */
-        color: rgb(165, 144, 95); /* 数字颜色为红色 */
+            top: 25%;
-        font-size: 25px; /* 数字字体大小 */
+            /* 距离顶部 */
-    }
+            left: 71.3%;
-    .txt {
+            /* 距离左侧 */
-            margin-top: 18px;
+        }
-            font-size: 22px; /* 字体大小 */
+
-            font-family: Consolas, sans-serif; /* 字体样式 */
+        .questions {
-            letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */
+            font-size: 23px;
-            line-height: 1.5; /* 行间距，1.5 表示字体大小的 1.5 倍 */
+            /* 字体大小 */
+            letter-spacing: 3px;
+            /* 字符间距 */
+            text-align: right;
+            color: #fff;
+        }
+
+        .questions-count {
+            font-weight: bold;
+            /* 数字加粗 */
+            color: rgb(165, 144, 95);
+            /* 数字颜色为红色 */
+            font-size: 25px;
+            /* 数字字体大小 */
+        }
+
+        .txt {
+            margin-top: 15px;
+            font-size: 20px;
+            /* 字体大小 */
+            font-family: Consolas, sans-serif;
+            /* 字体样式 */
+            letter-spacing: 1.5px;
+            /* 字符间距，单位可以是 px、em 等 */
+            line-height: 1.5;
+            /* 行间距，1.5 表示字体大小的 1.5 倍 */
             color: #9b9a9a;
         }
-    /* 选项容器样式 */
-    .options {
-        margin-top: 10px;
-        color: #9b9a9a;
-        display: flex; /* 使用 Flexbox 布局 */
-        flex-direction: column; /* 垂直排列按钮 */
-    }
 
-    /* 单个选项样式 */
+        /* 选项容器样式 */
-    .option {
+        .options {
-        padding: 5px 10px; /* 内边距，让按钮看起来更舒适 */
+            margin-top: 10px;
-        font-size: 20px; /* 字体大小 */
+            color: #9b9a9a;
-        letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */
+            display: flex;
-        text-align: left; /* 设置文字左对齐 */
+            /* 使用 Flexbox 布局 */
-        margin-top: 5px;
+            flex-direction: column;
-        background-color: transparent; /* 背景颜色设置为透明 */
+            /* 垂直排列按钮 */
-        border: none; /* 移除边框 */
+        }
-        cursor: pointer; /* 鼠标悬停时显示手型 */
+
-        transition: background-color 0.3s ease; /* 平滑过渡效果 */
+        /* 单个选项样式 */
-    }
+        .option {
-    .option:hover {
+            padding: 5px 10px;
-        color: #e7e2e2; /* 鼠标悬停时的字体颜色 */
+            /* 内边距，让按钮看起来更舒适 */
-    }
+            font-size: 19px;
-    .option.selected{
+            /* 字体大小 */
-        color: #d4cb48; /* 按钮按下或获得焦点时的背景颜色 */ 
+            letter-spacing: 1.5px;
-    }
+            /* 字符间距，单位可以是 px、em 等 */
-    .option-letter{
+            text-align: left;
-        font-size: 30px;
+            /* 设置文字左对齐 */
-        font-weight: bold; /* 字母加粗 */
+            margin-top: 5px;
-        margin-right: 5px; /* 字母与后面文字的间距 */
+            background-color: transparent;
-        color: rgb(165, 144, 95);
+            /* 背景颜色设置为透明 */
-    }
+            border: none;
+            /* 移除边框 */
+            cursor: pointer;
+            /* 鼠标悬停时显示手型 */
+            transition: background-color 0.3s ease;
+            /* 平滑过渡效果 */
+        }
+
+        .option:hover {
+            color: #e7e2e2;
+            /* 鼠标悬停时的字体颜色 */
+        }
+
+        .option.selected {
+            color: #d4cb48;
+            /* 按钮按下或获得焦点时的背景颜色 */
+        }
+
+        .option-letter {
+            font-size: 30px;
+            font-weight: bold;
+            /* 字母加粗 */
+            margin-right: 5px;
+            /* 字母与后面文字的间距 */
+            color: rgb(165, 144, 95);
+        }
     }
+
     .submit-buttons {
-        display: flex; /* 使用 Flexbox 布局 */
+        display: flex;
-        flex-direction: row; /* 水平排列按钮 */
+        /* 使用 Flexbox 布局 */
-        justify-content: center; /* 水平居中 */
+        flex-direction: row;
-        gap: 450px; /* 按钮之间的间距 */
+        /* 水平排列按钮 */
+        justify-content: center;
+        /* 水平居中 */
+        gap: 450px;
+        /* 按钮之间的间距 */
         margin-top: 50px;
     }
 
     .submit-btn {
         background: url("@/assets/images/Button.png") center;
-        background-size: contain; /* 确保背景图片覆盖整个元素 */
+        background-size: contain;
-        background-color: transparent; /* 背景颜色设置为透明 */
+        /* 确保背景图片覆盖整个元素 */
-        border: none; /* 移除边框 */
+        background-color: transparent;
-        cursor: pointer; /* 鼠标悬停时显示手型 */
+        /* 背景颜色设置为透明 */
+        border: none;
+        /* 移除边框 */
+        cursor: pointer;
+        /* 鼠标悬停时显示手型 */
         width: 300px;
-        height: 41px;     
+        height: 41px;
         font-size: 18px;
-        font-weight: bold; /* 文字加粗 */
+        font-weight: bold;
+        /* 文字加粗 */
         color: #fff;
     }
+
     /* 覆盖 el-dialog 的背景和边框样式 */
-    :deep(.el-dialog){
+    :deep(.el-dialog) {
-        background: transparent !important; /* 设置背景为透明 */
+        background: transparent !important;
-        border: none !important; /* 移除边框 */
+        /* 设置背景为透明 */
-        box-shadow: none !important; /* 移除阴影 */
+        border: none !important;
-        overflow: hidden; /* 防止内容溢出 */
+        /* 移除边框 */
+        box-shadow: none !important;
+        /* 移除阴影 */
+        overflow: hidden;
+        /* 防止内容溢出 */
         width: 640px;
 
     }