|
@@ -1,54 +1,88 @@
|
|
|
<template>
|
|
|
<!-- <my-full-screen-dialog ref="openDialogRef" close-color="#0F4DD8" @close-dialog="handleClose">-->
|
|
|
- <div class="adl-container w-full h-full flex-center text-[#134FA4]">
|
|
|
+ <div v-if="isMainWin" class="adl-container w-full h-full flex-center text-[#134FA4]">
|
|
|
<div class="center-area w-[90%] h-[90%]">
|
|
|
<div
|
|
|
- class="child-container bg-[#ffffff] bor-radius-8 w-[1960px] h-[960px] mt-[100px] flex flex-col justify-center items-center gap-y-[30px]"
|
|
|
+ class="child-container bg-[#ffffff] bor-radius-[10] w-[1360px] h-[860px] mt-[100px] flex flex-col justify-center items-center gap-y-[30px] absolute left-[500px]"
|
|
|
>
|
|
|
<div class="bg-1">
|
|
|
- <div class="bg-1 text-[48px] w-[80%] absolute top-[330px] left-[240px] color-[#333333]">
|
|
|
- <div class="question-img w-[260px] h-[260px]">{{ onceData.question }}</div>
|
|
|
- <!-- <el-image :src="onceData.question" fit="contain" class="w-[260px] h-[260px]" />-->
|
|
|
+ <div class="bg-1 text-[68px] w-[80%] absolute top-[30px] left-[550px] color-[#333333]">
|
|
|
+ <div class="question-img w-[290px] h-[290px] text-[186px]">
|
|
|
+ {{ onceData.question }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
id="myButton"
|
|
|
- class="divMain absolute left-[225px] top-[605px] flex flex-wrap flex-row justify-center gap-x-[20px] mt-[70px] w-[1800px]"
|
|
|
+ class="divMain absolute left-[165px] top-[305px] flex flex-wrap flex-row gap-x-[20px] mt-[50px] w-[1100px]"
|
|
|
+ :class="checkItems && checkItems.length < 3 ? 'flex-center' : ''"
|
|
|
>
|
|
|
- <div v-for="(it, index) in onceData.choices" :key="it" @click="handleClick(it)">
|
|
|
- <div class="text-[40px]">
|
|
|
- <div class="w-[750px] sab ml-[25px] mt-[30px] p-[10px]">
|
|
|
- <div
|
|
|
- class="bg-[#000] w-[60px] h-[60px]"
|
|
|
- :class="[it.active ? 'active' : 'normal']"
|
|
|
- @click="checkItemFn(it, index)"
|
|
|
- ></div>
|
|
|
- <span class="color-[#0072FF] mr-[50px] ml-[50px]">{{ chengList[index] }}.</span
|
|
|
- ><span class="color-[#333333]">{{ it }}</span>
|
|
|
- </div>
|
|
|
+ <div v-for="(it, index) in checkItems" :key="it">
|
|
|
+ <div class="text-[80px] w-[350px] flex flex-wrap flex-row justify-between">
|
|
|
+ <!-- <div class="w-[450px] sab ml-[115px] mt-[30px] flex flex-wrap flex-row justify-between">-->
|
|
|
+ <div
|
|
|
+ class="bg-[#000] w-[120px] h-[120px] flex-center"
|
|
|
+ :class="[it.active ? 'active' : 'normal']"
|
|
|
+ @click="checkItemFn(it, index)"
|
|
|
+ ></div>
|
|
|
+ <span class="color-[#000] fw-700 line-height-[155px]">{{ chengList[index] }}.</span
|
|
|
+ ><span class="color-[#333333] line-height-[155px] fw-700 mr-[60px]"> {{ it.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- <div class="dialog-footer text-right absolute bottom-[0px] right-[0px]">-->
|
|
|
- <!-- <el-button type="text" @click="handleSubmit">结束测验</el-button>-->
|
|
|
- <!-- </div>-->
|
|
|
+ <div v-else class="adl-container w-full h-full flex-center text-[#134FA4]">
|
|
|
+ <div class="center-area w-[90%] h-[90%]">
|
|
|
+ <div
|
|
|
+ class="child-container bg-[#ffffff] bor-radius-[10] w-[1360px] h-[860px] mt-[100px] flex flex-col justify-center items-center gap-y-[30px] absolute left-[500px]"
|
|
|
+ >
|
|
|
+ <div class="bg-1">
|
|
|
+ <div class="bg-1 text-[68px] w-[80%] absolute top-[30px] left-[550px] color-[#333333]">
|
|
|
+ <div class="question-img w-[290px] h-[290px] text-[186px]">
|
|
|
+ {{ onceData.question }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="myButton"
|
|
|
+ class="divMain absolute left-[165px] top-[305px] flex flex-wrap flex-row gap-x-[20px] mt-[50px] w-[1100px]"
|
|
|
+ :class="checkItems && checkItems.length < 3 ? 'flex-center' : ''"
|
|
|
+ >
|
|
|
+ <div v-for="(it, index) in checkItems" :key="it">
|
|
|
+ <div class="text-[80px] w-[350px] flex flex-wrap flex-row justify-between">
|
|
|
+ <!-- <div class="w-[450px] sab ml-[115px] mt-[30px] flex flex-wrap flex-row justify-between">-->
|
|
|
+ <div
|
|
|
+ class="bg-[#000] w-[120px] h-[120px] flex-center"
|
|
|
+ :class="[it.active ? 'active' : 'normal']"
|
|
|
+ @click="checkItemFn(it, isMainWin ? 1 : 0)"
|
|
|
+ ></div>
|
|
|
+ <span class="color-[#000] fw-700 line-height-[155px]">{{ chengList[index] }}.</span
|
|
|
+ ><span class="color-[#333333] line-height-[155px] fw-700 mr-[60px]"> {{ it.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question-imgStart w-[290px] h-[90px] text-[186px] absolute bottom-[-170px] left-[405px]"
|
|
|
+ @click="handleClick(it, index)"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<VoiceImp ref="VoiceImpRef" />
|
|
|
<!-- </my-full-screen-dialog>-->
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
/*
|
|
|
- * 组件名: LogicalReasoning
|
|
|
- * 组件用途: 逻辑推理
|
|
|
+ * 组件名: wordWord
|
|
|
+ * 组件用途: 字字匹配
|
|
|
* 创建日期: 2024/9/9
|
|
|
* 编写者: JutarryWu
|
|
|
*/
|
|
|
import { getCurrentInstance, ref } from 'vue'
|
|
|
-import { getRandomInt } from '@/utils'
|
|
|
+import { getRandomInt, isJSON } from '@/utils'
|
|
|
import AchievementAPI from '@/api/tester/rehabilitation/training/achievement'
|
|
|
import { RTPlanMgrQuery } from '@/api/tester/rehabilitation/training/plain'
|
|
|
import { useUserStore } from '@/store'
|
|
@@ -90,34 +124,37 @@ let currentNumber = 0
|
|
|
// 每个等级的最大试次 15
|
|
|
const maxNumber = 3
|
|
|
let timerId: any
|
|
|
-const $emits = defineEmits(['gameOver'])
|
|
|
+const $emits = defineEmits(['close'])
|
|
|
const openDialogRef = ref()
|
|
|
const VoiceImpRef = ref()
|
|
|
|
|
|
const handleClose = (done: () => void) => {
|
|
|
- $emits('gameOver', 'ADLCapability')
|
|
|
+ $emits('close', '')
|
|
|
}
|
|
|
-
|
|
|
+const isMainWin = ref(false)
|
|
|
const instance = getCurrentInstance()
|
|
|
const planInfo = ref<RTPlanMgrQuery>()
|
|
|
const userStore = useUserStore()
|
|
|
// 当前试次的游戏图片数据
|
|
|
const onceData = ref({} as OnceItem)
|
|
|
+const checkItems = ref([])
|
|
|
const handleClick = (answer: string) => {
|
|
|
- const correct = onceData.value.answer === answer
|
|
|
- VoiceImpRef.value.videoPlay('click')
|
|
|
- setTimeout(() => {
|
|
|
- if (correct) {
|
|
|
- console.log(VoiceImpRef.value, 'hbbbbbbbbbbbbbbbbbbbbbbbbbdf=============>')
|
|
|
- if (VoiceImpRef.value) {
|
|
|
- VoiceImpRef.value.videoPlay('right')
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (VoiceImpRef.value) {
|
|
|
- VoiceImpRef.value.videoPlay('error')
|
|
|
- }
|
|
|
- }
|
|
|
- }, 200)
|
|
|
+ console.log(answer, '用户操作数据')
|
|
|
+ const correct = false
|
|
|
+ // const correct = onceData.value.answer === answer
|
|
|
+ // VoiceImpRef.value.videoPlay('click')
|
|
|
+ // setTimeout(() => {
|
|
|
+ // if (correct) {
|
|
|
+ // console.log(VoiceImpRef.value, 'hbbbbbbbbbbbbbbbbbbbbbbbbbdf=============>')
|
|
|
+ // if (VoiceImpRef.value) {
|
|
|
+ // VoiceImpRef.value.videoPlay('right')
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // if (VoiceImpRef.value) {
|
|
|
+ // VoiceImpRef.value.videoPlay('error')
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }, 200)
|
|
|
// 收集当前试次的用户操作数据
|
|
|
gameList.push({
|
|
|
level: currentLevel,
|
|
@@ -131,32 +168,28 @@ const handleClick = (answer: string) => {
|
|
|
// 开始下一次
|
|
|
nextOnce()
|
|
|
}
|
|
|
-const checkItemFn = (item: any, index: number) => {
|
|
|
+const checkItemFn = (item: any, flag: number = 0) => {
|
|
|
// if (modeSelect.value === 0) {
|
|
|
- // checkItems.value.forEach((item2) => {
|
|
|
- // item2.active = false
|
|
|
- // })
|
|
|
- // VoiceImpRef.value.videoPlay()
|
|
|
- // item.active = !item.active
|
|
|
- // itemActive.value = item.key
|
|
|
- // }
|
|
|
+ console.log(item, '参数')
|
|
|
+ if (flag === 1) return
|
|
|
+ let tempIndex = -1
|
|
|
+ checkItems.value.forEach((item2, index) => {
|
|
|
+ item2.active = false
|
|
|
+ if (item2.name === item.name) tempIndex = index
|
|
|
+ })
|
|
|
+ checkItems.value[tempIndex].active = true
|
|
|
+ if (!isMainWin.value) {
|
|
|
+ console.log('本地存储', item)
|
|
|
+ localStorage.setItem('two-win-Visual-item-List', JSON.stringify(item))
|
|
|
+ }
|
|
|
}
|
|
|
const nextOnce = () => {
|
|
|
- console.log(onceData.value.choices, 'onceData392')
|
|
|
- // const a = document.getElementById('countdown');
|
|
|
- // dingshqi()
|
|
|
+ // console.log(onceData.value.choices, 'onceData392')
|
|
|
gameEndTime = performance.now()
|
|
|
const gameDuration = gameEndTime - gameStartTime
|
|
|
console.log(gameDuration, 'gameDuration')
|
|
|
console.log(gameEndTime, 'gameEndTime')
|
|
|
console.log(gameStartTime, 'gameStartTime')
|
|
|
-
|
|
|
- // if (gameDuration >= gameMaxDuration) {
|
|
|
- // // 游戏结束
|
|
|
- // console.log('游戏结束1')
|
|
|
- // sendData()
|
|
|
- // return
|
|
|
- // }
|
|
|
const currentLevelList = gameList.filter((it) => it.level === currentLevel)
|
|
|
// 当前等级进行 10 个试次以上时,计算正确率
|
|
|
if (currentLevelList.length >= 3) {
|
|
@@ -167,10 +200,8 @@ const nextOnce = () => {
|
|
|
}
|
|
|
return acc
|
|
|
}, 0)
|
|
|
-
|
|
|
// 当前等级正确率
|
|
|
const accuracy = (count / currentLevelList.length) * 100
|
|
|
-
|
|
|
// 升降级规则:正确率达到80%难度升级,低于40%降级
|
|
|
if (accuracy >= 80) {
|
|
|
if (currentLevel < maxLevel) {
|
|
@@ -184,16 +215,6 @@ const nextOnce = () => {
|
|
|
} else if (accuracy < 40) {
|
|
|
sendData()
|
|
|
return
|
|
|
- // if (currentLevel > 0) {
|
|
|
- // // 删除降级之前的已有数据
|
|
|
- // gameList = gameList.filter((it) => it.level !== currentLevel)
|
|
|
- // currentLevel--
|
|
|
- // // 删除降级之后的已有数据
|
|
|
- // gameList = gameList.filter((it) => it.level !== currentLevel)
|
|
|
- // // 重置当前等级试次索引
|
|
|
- // currentNumber = 0
|
|
|
- // console.log('低于40%降级')
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -300,6 +321,7 @@ const sendData = () => {
|
|
|
}
|
|
|
async function exec() {
|
|
|
// openDialogRef.value.openDialog()
|
|
|
+ isMainWin.value = window.location.href.includes('win=main')
|
|
|
const tempPlan = sessionStorage.getItem('currentPlanInfo')
|
|
|
if (tempPlan) {
|
|
|
planInfo.value = JSON.parse(tempPlan)
|
|
@@ -330,6 +352,7 @@ const setOnceData = () => {
|
|
|
onceData.value = gameData.value[currentLevel][currentNumber]
|
|
|
console.log(currentLevel, currentNumber, '1.2')
|
|
|
onceData.value.choices = shuffleArray(onceData.value.choices)
|
|
|
+ checkItems.value = onceData.value.choices
|
|
|
}
|
|
|
// 随机排列数组
|
|
|
function shuffleArray(array: any) {
|
|
@@ -342,13 +365,31 @@ function shuffleArray(array: any) {
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
exec()
|
|
|
+ window.addEventListener('storage', (val) => {
|
|
|
+ if (isMainWin.value) {
|
|
|
+ console.log(val.key)
|
|
|
+ // if (val.key === 'two-win-Visual-mode-select') {
|
|
|
+ // modeSelectFn(Number(val.newValue))
|
|
|
+ // localStorage.removeItem('two-win-Visual-mode-select')
|
|
|
+ // }
|
|
|
+ if (val.key === 'two-win-Visual-item-List' && isJSON(val.newValue!)) {
|
|
|
+ let tempVal = JSON.parse(val.newValue!)
|
|
|
+ checkItemFn(tempVal, 0)
|
|
|
+ // localStorage.removeItem('two-win-Visual-item-List')
|
|
|
+ }
|
|
|
+ // if (val.key === 'two-win-Visual-mode-start') {
|
|
|
+ // startTask()
|
|
|
+ // localStorage.removeItem('two-win-Visual-mode-start')
|
|
|
+ // }
|
|
|
+ } else {
|
|
|
+ console.log('')
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.adl-container {
|
|
|
- //background-color: #f5f4e9;
|
|
|
- //background-image: url('/static/image/game/bg-ADL.png');
|
|
|
background-size: 100% 100%;
|
|
|
background-position: center center;
|
|
|
background-repeat: repeat;
|
|
@@ -357,52 +398,24 @@ onMounted(() => {
|
|
|
background-size: 100% 100%;
|
|
|
background-position: center center;
|
|
|
background-repeat: repeat;
|
|
|
+ //font-family: 楷体;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
- .active {
|
|
|
- background: url('/static/image/cognitiveAbility/SpeechTraining/item-active.png') no-repeat 0 0 / 100% 100%
|
|
|
- border-box border-box fixed;
|
|
|
- }
|
|
|
-
|
|
|
- .normal {
|
|
|
- background: url('/static/image/cognitiveAbility/SpeechTraining/item.png') no-repeat 0 0 / 100% 100% border-box
|
|
|
- border-box fixed;
|
|
|
- }
|
|
|
- .center-area {
|
|
|
- //background-image: url('/static/image/game/ADL/bg-center.png');
|
|
|
+ .question-imgStart {
|
|
|
+ background-image: url('/static/image/cognitiveAbility/SpeechTraining/Visual/verify-bg.png');
|
|
|
background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center; /* 可选,让图片居中对齐 */
|
|
|
- }
|
|
|
- .bg-2a {
|
|
|
- cursor: pointer;
|
|
|
- transition: All 0.4s ease-in-out; //设置动画执行的时间为0.6s
|
|
|
-
|
|
|
- :hover {
|
|
|
- //transform: scale(1.1);
|
|
|
- //border: 1px solid #0f4dd8;
|
|
|
- background: #e5ffd8;
|
|
|
- //background-image: url('/static/image/game/ADL/v.png');
|
|
|
- background-size: 10% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: right; /* 可选,让图片居中对齐 */
|
|
|
- }
|
|
|
- }
|
|
|
- .sab {
|
|
|
- //border: 1px solid #0f4dd8;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 50px;
|
|
|
- cursor: pointer;
|
|
|
+ background-position: center center;
|
|
|
+ background-repeat: repeat;
|
|
|
+ //font-family: 楷体;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
- .bg-chen {
|
|
|
- background-image: url('/static/image/game/ADL/v.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
+ .active {
|
|
|
+ background: url('/static/image/cognitiveAbility/SpeechTraining/Visual/Options-right.png') no-repeat 0 0 / 100% 100%;
|
|
|
+ //background-position: 90% 54%; /* 可选,让图片居中对齐 */
|
|
|
}
|
|
|
- .divMain {
|
|
|
- & div:nth-child(3) {
|
|
|
- //background: #1b1b1c;
|
|
|
- float: left;
|
|
|
- }
|
|
|
+ .normal {
|
|
|
+ background: url('/static/image/cognitiveAbility/SpeechTraining/Visual/Options-Blank.png') no-repeat 0 0 / 70% 70%;
|
|
|
+ background-position: 10% 90%; /* 可选,让图片居中对齐 */
|
|
|
}
|
|
|
}
|
|
|
</style>
|