dlsx
/
virtualSimulation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: dlsx:14912bd5456992f57ba84b8465c5b619c2b74126
Branches Tags
dlsx:main
..
compare: dlsx:e4782d9b6bc563b43522a66ca613b0cc0d51c299
Branches Tags
dlsx:main

No commits in common. '14912bd5456992f57ba84b8465c5b619c2b74126' and 'e4782d9b6bc563b43522a66ca613b0cc0d51c299' have entirely different histories.
14912bd545 ... e4782d9b6b

2 changed files with 248 additions and 331 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 4
      src/views/largeDataScreen/home.vue
  2. 575
      src/views/subjectTest/index.vue

4
src/views/largeDataScreen/home.vue
Unescape View File

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

575
src/views/subjectTest/index.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save