|
@@ -1,12 +1,22 @@
|
|
<template>
|
|
<template>
|
|
<section class="auditory-word-img-matching-container flex-center flex-col wh-full relative">
|
|
<section class="auditory-word-img-matching-container flex-center flex-col wh-full relative">
|
|
- <water-title title="词图匹配" />
|
|
|
|
|
|
+ <water-title title="复述系列语" />
|
|
<div v-if="isMainWin" class="text-[42px] text-[#0F308C]">
|
|
<div v-if="isMainWin" class="text-[42px] text-[#0F308C]">
|
|
{{ Topics.question }}
|
|
{{ Topics.question }}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div v-if="!isMainWin && showTopics" class="flex-center flex-col text-100px text-[#0F308C]">
|
|
<div v-if="!isMainWin && showTopics" class="flex-center flex-col text-100px text-[#0F308C]">
|
|
- {{ TopicsVal[currentIndex].correct }}
|
|
|
|
|
|
+ <!-- {{ TopicsVal[currentIndex].correct }}-->
|
|
|
|
+ <span class="text-[56px] mt-[90px]">请仔细听然后复述</span>
|
|
|
|
+ <!-- <span class="mt-[250px]">{{ TopicsVal[currentIndex].correct }}</span>-->
|
|
|
|
+
|
|
|
|
+ <!-- <div v-if="tipsFlag" class="text-50px w-[80%]">{{ TopicsVal[currentIndex].Tips }}</div>-->
|
|
|
|
+ <!-- <el-image-->
|
|
|
|
+ <!-- :src="`/static/image/cognitiveAbility/SpeechTraining/OralExpression/${TopicsVal[currentIndex].correct}.png`"-->
|
|
|
|
+ <!-- fit="contain"-->
|
|
|
|
+ <!-- class="w-[440px] h-[440px] mt-150px cursor-pointer hover:scale-101"-->
|
|
|
|
+ <!-- />-->
|
|
|
|
+ <!-- @click="handlePlay"-->
|
|
</div>
|
|
</div>
|
|
<div class="w-80% h-60% my-30px flex-center flex-col">
|
|
<div class="w-80% h-60% my-30px flex-center flex-col">
|
|
<template v-if="showTopics">
|
|
<template v-if="showTopics">
|
|
@@ -17,28 +27,45 @@
|
|
class="w-[140px] h-[140px] mb-40px cursor-pointer hover:scale-101"
|
|
class="w-[140px] h-[140px] mb-40px cursor-pointer hover:scale-101"
|
|
@click="handlePlay"
|
|
@click="handlePlay"
|
|
/>
|
|
/>
|
|
|
|
+ <span v-if="isMainWin" class="text-[46px] mt-[90px]"> {{ TopicsVal[currentIndex].correct }}</span>
|
|
|
|
+ <!-- <el-image-->
|
|
|
|
+ <!-- v-if="isMainWin"-->
|
|
|
|
+ <!-- :src="`/static/image/cognitiveAbility/SpeechTraining/OralExpression/${TopicsVal[currentIndex].correct}.png`"-->
|
|
|
|
+ <!-- fit="contain"-->
|
|
|
|
+ <!-- class="w-[240px] h-[240px] mt-40px cursor-pointer hover:scale-101"-->
|
|
|
|
+ <!-- @click="handlePlay"-->
|
|
|
|
+ <!-- />-->
|
|
<div class="w-full flex flex-row justify-around">
|
|
<div class="w-full flex flex-row justify-around">
|
|
- <div v-for="(item, index) in TopicsVal[currentIndex].choices" :key="index" class="flex flex-col items-center">
|
|
|
|
- <div class="w-180px h-180px flex-center cursor-pointer" @click="handleItemClick(item, index)">
|
|
|
|
- <el-image
|
|
|
|
- :src="`/static/image/cognitiveAbility/SpeechTraining/Visual/${item}.png`"
|
|
|
|
- fit="contain"
|
|
|
|
- class="w-[180px] h-[180px] cursor-pointer mt-30px rounded-8px"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- <el-image
|
|
|
|
- :src="`/static/image/cognitiveAbility/SpeechTraining/${useClickIndex === index || item === TopicsVal[currentIndex].userAnswer ? 'Options-right' : 'Options-Blank'}.png`"
|
|
|
|
- fit="contain"
|
|
|
|
- class="w-[60px] h-[60px] mt-30px"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
|
|
+ <!-- <div v-for="(item, index) in TopicsVal[currentIndex].choices" :key="index" class="flex flex-col items-center">-->
|
|
|
|
+ <!-- <div class="w-180px h-180px flex-center cursor-pointer" @click="handleItemClick(item, index)">-->
|
|
|
|
+ <!-- <el-image-->
|
|
|
|
+ <!-- :src="`/static/image/cognitiveAbility/SpeechTraining/OralExpression/${item}.png`"-->
|
|
|
|
+ <!-- fit="contain"-->
|
|
|
|
+ <!-- class="w-[180px] h-[180px] cursor-pointer mt-30px rounded-8px"-->
|
|
|
|
+ <!-- />-->
|
|
|
|
+ <!-- </div>-->
|
|
|
|
+ <!-- <el-image-->
|
|
|
|
+ <!-- :src="`/static/image/cognitiveAbility/SpeechTraining/${useClickIndex === index || item === TopicsVal[currentIndex].userAnswer ? 'Options-right' : 'Options-Blank'}.png`"-->
|
|
|
|
+ <!-- fit="contain"-->
|
|
|
|
+ <!-- class="w-[60px] h-[60px] mt-30px"-->
|
|
|
|
+ <!-- />-->
|
|
|
|
+ <!-- </div>-->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div v-if="!isMainWin" class="w-[300px] h-[140px]">
|
|
|
|
|
|
+ <!-- <div v-if="!isMainWin" class="w-[300px] h-[140px]">-->
|
|
|
|
+ <!-- <el-image-->
|
|
|
|
+ <!-- v-if="showSubmitBtn"-->
|
|
|
|
+ <!-- src="/static/image/cognitiveAbility/SpeechTraining/verify-bg.png"-->
|
|
|
|
+ <!-- fit="contain"-->
|
|
|
|
+ <!-- class="w-[300px] h-[140px] cursor-pointer hover:scale-101"-->
|
|
|
|
+ <!-- @click="handleSubmit"-->
|
|
|
|
+ <!-- />-->
|
|
|
|
+ <!-- </div>-->
|
|
|
|
+
|
|
|
|
+ <div v-if="!isMainWin && showTopics" class="w-[300px] h-[140px]">
|
|
<el-image
|
|
<el-image
|
|
- v-if="showSubmitBtn"
|
|
|
|
src="/static/image/cognitiveAbility/SpeechTraining/verify-bg.png"
|
|
src="/static/image/cognitiveAbility/SpeechTraining/verify-bg.png"
|
|
fit="contain"
|
|
fit="contain"
|
|
class="w-[300px] h-[140px] cursor-pointer hover:scale-101"
|
|
class="w-[300px] h-[140px] cursor-pointer hover:scale-101"
|
|
@@ -111,6 +138,7 @@ import Topics from './topics.json'
|
|
interface TopicsType {
|
|
interface TopicsType {
|
|
choices: string[]
|
|
choices: string[]
|
|
correct: string
|
|
correct: string
|
|
|
|
+ Tips: string
|
|
userAnswer: string
|
|
userAnswer: string
|
|
score: string
|
|
score: string
|
|
}
|
|
}
|
|
@@ -130,7 +158,7 @@ const TopicsVal = ref<TopicsType[]>([])
|
|
const useClickIndex = ref(-1) // 副屏 - 患者点击的选项索引
|
|
const useClickIndex = ref(-1) // 副屏 - 患者点击的选项索引
|
|
const scoreIndex = ref(-1) // 主屏 - 医生评分选项索引
|
|
const scoreIndex = ref(-1) // 主屏 - 医生评分选项索引
|
|
let taskBeginTime = 0 // 任务开始时间
|
|
let taskBeginTime = 0 // 任务开始时间
|
|
-
|
|
|
|
|
|
+const tipsFlag = ref(false) // 显示副屏提示
|
|
const handleScore = (index: number) => {
|
|
const handleScore = (index: number) => {
|
|
TopicsVal.value[currentIndex.value].score = index + ''
|
|
TopicsVal.value[currentIndex.value].score = index + ''
|
|
showNextBtn.value = true
|
|
showNextBtn.value = true
|
|
@@ -144,6 +172,7 @@ const handleNext = () => {
|
|
if (TopicsVal.value[currentIndex.value].userAnswer === '') {
|
|
if (TopicsVal.value[currentIndex.value].userAnswer === '') {
|
|
showTopics.value = true
|
|
showTopics.value = true
|
|
showNextBtn.value = false
|
|
showNextBtn.value = false
|
|
|
|
+ tipsFlag.value = false
|
|
localStorage.setItem('tow-win-auditory-word-img-matching-show-topics', currentIndex.value + '')
|
|
localStorage.setItem('tow-win-auditory-word-img-matching-show-topics', currentIndex.value + '')
|
|
} else {
|
|
} else {
|
|
let tempCount = TopicsVal.value.filter((item) => item.userAnswer !== '').length
|
|
let tempCount = TopicsVal.value.filter((item) => item.userAnswer !== '').length
|
|
@@ -151,6 +180,7 @@ const handleNext = () => {
|
|
isSubmitting = true
|
|
isSubmitting = true
|
|
localStorage.setItem('tow-win-auditory-word-img-matching-isSubmitting', 'YES')
|
|
localStorage.setItem('tow-win-auditory-word-img-matching-isSubmitting', 'YES')
|
|
} else {
|
|
} else {
|
|
|
|
+ tipsFlag.value = false
|
|
currentIndex.value++
|
|
currentIndex.value++
|
|
showScoreArea.value = false
|
|
showScoreArea.value = false
|
|
scoreIndex.value = -1
|
|
scoreIndex.value = -1
|
|
@@ -161,6 +191,7 @@ const handleNext = () => {
|
|
|
|
|
|
const handlePlay = () => {
|
|
const handlePlay = () => {
|
|
localStorage.setItem('two-win-auditory-word-img-matching-item-check', TopicsVal.value[currentIndex.value].correct)
|
|
localStorage.setItem('two-win-auditory-word-img-matching-item-check', TopicsVal.value[currentIndex.value].correct)
|
|
|
|
+ tipsFlag.value = true
|
|
}
|
|
}
|
|
|
|
|
|
const handleItemClick = (item: string, index: number) => {
|
|
const handleItemClick = (item: string, index: number) => {
|
|
@@ -178,13 +209,14 @@ const handleItemClick = (item: string, index: number) => {
|
|
}
|
|
}
|
|
|
|
|
|
const handleSubmit = () => {
|
|
const handleSubmit = () => {
|
|
- if (TopicsVal.value[currentIndex.value].userAnswer === '') {
|
|
|
|
- ElMessage.warning('请先完成当前题目!')
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- VoiceImpRef.value.videoPlay(
|
|
|
|
- TopicsVal.value[currentIndex.value].userAnswer === TopicsVal.value[currentIndex.value].correct ? 'right' : 'error'
|
|
|
|
- )
|
|
|
|
|
|
+ // if (TopicsVal.value[currentIndex.value].userAnswer === '') {
|
|
|
|
+ // ElMessage.warning('请先完成当前题目!')
|
|
|
|
+ // return
|
|
|
|
+ // }
|
|
|
|
+ // VoiceImpRef.value.videoPlay(
|
|
|
|
+ // TopicsVal.value[currentIndex.value].userAnswer === TopicsVal.value[currentIndex.value].correct ? 'right' : 'error'
|
|
|
|
+ // )
|
|
|
|
+ handleItemClick()
|
|
showSubmitBtn.value = false
|
|
showSubmitBtn.value = false
|
|
localStorage.setItem('two-win-auditory-word-img-matching-try-over', 'YES')
|
|
localStorage.setItem('two-win-auditory-word-img-matching-try-over', 'YES')
|
|
}
|
|
}
|
|
@@ -201,13 +233,13 @@ async function exec() {
|
|
localStorage.setItem('two-win-auditory-word-img-matching-init-data', JSON.stringify(TopicsVal.value))
|
|
localStorage.setItem('two-win-auditory-word-img-matching-init-data', JSON.stringify(TopicsVal.value))
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
showNextBtn.value = true
|
|
showNextBtn.value = true
|
|
- }, 6600)
|
|
|
|
|
|
+ }, 600)
|
|
} else {
|
|
} else {
|
|
taskBeginTime = Date.now()
|
|
taskBeginTime = Date.now()
|
|
- VoiceImpRef.value.videoPlay(
|
|
|
|
- 'Speech-Auditory',
|
|
|
|
- 'static/voice/cognitiveAbility/SpeechTraining/Auditory/WordImgMatching/1.mp3'
|
|
|
|
- )
|
|
|
|
|
|
+ // VoiceImpRef.value.videoPlay(
|
|
|
|
+ // 'Speech-Auditory',
|
|
|
|
+ // 'static/voice/cognitiveAbility/SpeechTraining/Auditory/WordImgMatching/1.mp3'
|
|
|
|
+ // )
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -246,13 +278,13 @@ onMounted(() => {
|
|
}
|
|
}
|
|
|
|
|
|
if (val.key === 'two-win-auditory-word-img-matching-item-check') {
|
|
if (val.key === 'two-win-auditory-word-img-matching-item-check') {
|
|
|
|
+ tipsFlag.value = true
|
|
VoiceImpRef.value.videoPlay(
|
|
VoiceImpRef.value.videoPlay(
|
|
'Speech-Auditory',
|
|
'Speech-Auditory',
|
|
`static/voice/cognitiveAbility/SpeechTraining/Auditory/WordImgMatching/${val.newValue}-tips.mp3`
|
|
`static/voice/cognitiveAbility/SpeechTraining/Auditory/WordImgMatching/${val.newValue}-tips.mp3`
|
|
)
|
|
)
|
|
localStorage.removeItem('two-win-auditory-word-img-matching-item-check')
|
|
localStorage.removeItem('two-win-auditory-word-img-matching-item-check')
|
|
}
|
|
}
|
|
-
|
|
|
|
if (val.key === 'tow-win-auditory-word-img-matching-score') {
|
|
if (val.key === 'tow-win-auditory-word-img-matching-score') {
|
|
showScoreArea.value = true
|
|
showScoreArea.value = true
|
|
handleScore(Number(val.newValue))
|
|
handleScore(Number(val.newValue))
|