言语任务三个子任务首页开发

.env.development

@@ -2,18 +2,17 @@
 VITE_NODE_ENV = 'development'
 
 # 应用端口
-#VITE_APP_PORT = 3000
+# VITE_APP_PORT = 3000
 VITE_APP_PORT = 5588
 
 # 代理前缀
 VITE_APP_BASE_API = '/dev-api'
 
 # 东锋
-# VITE_APP_API_URL = 'http://192.168.0.21:8001'
+# VITE_APP_API_URL = 'http://192.168.1.8:8001'
 
 # 公司本地
-# VITE_APP_API_URL = 'http://192.168.1.5:8107'
-VITE_APP_API_URL = 'http://192.168.1.4:8107'
+VITE_APP_API_URL = 'http://192.168.1.10:8107'
 
 # 家里本地
 # VITE_APP_API_URL = 'http://192.168.1.11:8107'

src/views/tester/components/RehabilitationEvaluation/CognitiveAbilityTask/CognitiveAbilityTaskAuditoryTraining/index.vue

@@ -15,8 +15,57 @@
     </div>
     <div
       v-else
-      class="absolute top-[50%] left-[50%] translate-[-50%] w-[1100px] h-[640px] rounded-[8px] bg-[#ffffffff] shadow-lg flex flex-row items-center justify-around"
-    ></div>
+      class="absolute top-[50%] left-[50%] translate-[-50%] w-[1600px] h-[960px] rounded-[8px] bg-[#ffffffff] shadow-lg flex-center flex-col"
+    >
+      <!--模式选择-->
+      <div v-if="modeSelect === -1" class="absolute wh-full top-0 left-0 bg-[#ffffff9f] z-3999 flex-center">
+        <div class="choice-bg w-800px h-400px flex-center flex-col">
+          <span class="inline-block text-45px text-black mb-36px mt-28px">请选择您任务模式：</span>
+          <div class="flex flex-row w-76% justify-between mt-18px">
+            <el-image
+              v-if="!isMainWin"
+              src="/static/image/cognitiveAbility/SpeechTraining/tips-one.png"
+              fit="contain"
+              class="w-[280px] h-[90px] cursor-pointer"
+              :class="{ 'scale-113': modeActive === 0 }"
+              @click="modeSelectFn(0)"
+            />
+            <el-image
+              v-if="!isMainWin"
+              src="/static/image/cognitiveAbility/SpeechTraining/tips-all.png"
+              fit="contain"
+              class="w-[280px] h-[90px] cursor-pointer"
+              :class="{ 'scale-113': modeActive === 1 }"
+              @click="modeSelectFn(1)"
+            />
+          </div>
+        </div>
+      </div>
+      <el-image
+        src="/static/image/cognitiveAbility/SpeechTraining/Auditory/bg-title.png"
+        fit="contain"
+        class="w-[1120px] h-[160px]"
+      />
+      <div class="w-[1120px] mt-100px flex flex-wrap flex-row justify-between">
+        <div
+          v-for="(item, index) in checkItems"
+          :key="index"
+          class="w-[300px] h-[70px] flex-center fw-700 text-[38px] color-[#ffffff] mb-[18px] cursor-pointer hover:scale-102"
+          :class="[item.active ? 'active' : 'normal']"
+          @click="checkItemFn(item, index)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <el-image
+        src="/static/image/cognitiveAbility/SpeechTraining/start-bg.png"
+        fit="contain"
+        class="w-[280px] h-[90px] mt-140px cursor-pointer hover:scale-101"
+        @click="startTask"
+      />
+    </div>
+
+    <VoiceImp ref="VoiceImpRef" />
   </section>
 </template>
 
@@ -29,7 +78,11 @@
  */
 import EvaluationSTRecordInfoAPI from '@/api/tester/evaluation/stRecord'
 import { useUserStore } from '@/store'
-import { h } from 'vue'
+interface CheckItem {
+  key: string
+  name: string
+  active: boolean
+}
 
 const isMainWin = ref(false)
 
@@ -47,11 +100,24 @@ const props = defineProps({
 
 const emits = defineEmits(['showResult', 'close'])
 const userStore = useUserStore()
-const showCountDown = ref(true)
+const showCountDown = ref(false)
 const countDownBegin = ref(false)
 const countDownStr = ref('测试马上开始！')
 const loading = ref(false)
+const VoiceImpRef = ref()
+
+const modeSelect = ref(-1) // -1: 未选择，0: 单流程模式，1: 全流程模式
+const modeActive = ref(-1) // -1: 未选择，0: 单流程模式，1: 全流程模式
+
 const dialogVisible = ref(false) // 学历弹窗
+const checkItems = ref<CheckItem[]>([
+  { key: '1', name: '语音辨识', active: false },
+  { key: '2', name: '词图匹配', active: false },
+  { key: '3', name: '句图匹配', active: false },
+  { key: '4', name: '是非反应', active: false },
+  { key: '5', name: '执行指令', active: false },
+  { key: '6', name: '听短文回答故事', active: false }
+])
 
 const closeDialog = () => {
   dialogVisible.value = false
@@ -67,6 +133,38 @@ const handleClose = () => {
   emits('close')
 }
 
+const checkItemFn = (item: CheckItem, index: number) => {
+  if (modeSelect.value === 0) {
+    checkItems.value.forEach((item2) => {
+      item2.active = false
+    })
+    VoiceImpRef.value.videoPlay()
+    item.active = !item.active
+  }
+}
+
+/**
+ * 选择模式
+ * @param mode 0: 单流程模式，1: 全流程模式
+ */
+const modeSelectFn = (mode: number) => {
+  if (modeActive.value !== -1) return
+  VoiceImpRef.value.videoPlay('right')
+  modeActive.value = mode
+  setTimeout(() => {
+    modeSelect.value = mode
+    if (mode === 1) {
+      checkItems.value.forEach((item) => {
+        item.active = true
+      })
+    }
+  }, 800)
+}
+
+const startTask = () => {
+  // TODO 开始任务
+}
+
 const countDownEnd = () => {
   countDownBegin.value = false
   showCountDown.value = false
@@ -101,24 +199,26 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .boston-container {
-  background: url('/static/image/cognitiveAbility/SpeechTraining/bg.png') no-repeat 0 0 / 100% 100% border-box fixed;
+  background: url('/static/image/cognitiveAbility/SpeechTraining/Auditory/bg.png') no-repeat 0 0 / 100% 100% border-box
+    fixed;
 
   .el-button + .el-button {
     margin-left: 0;
   }
 
-  .shadow {
-    scale: 1.37;
-    box-shadow:
-      0 0 0 2px #fdfdfd inset,
-      0 0 0 0 rgba(0, 0, 0, 0);
+  .active {
+    background: url('/static/image/cognitiveAbility/SpeechTraining/item-active.png') no-repeat 0 0 / 100% 100%
+      border-box border-box fixed;
   }
-}
 
-:deep(h3) {
-  margin-top: 18px !important;
-  margin-bottom: 5px !important;
-  margin-block-end: 5px !important;
-  margin-block-start: 18px !important;
+  .normal {
+    background: url('/static/image/cognitiveAbility/SpeechTraining/item.png') no-repeat 0 0 / 100% 100% border-box
+      border-box fixed;
+  }
+
+  .choice-bg {
+    background: url('/static/image/cognitiveAbility/SpeechTraining/tips-bg.png') no-repeat 0 0 / 100% 100% border-box
+      border-box fixed;
+  }
 }
 </style>

src/views/tester/components/RehabilitationEvaluation/CognitiveAbilityTask/CognitiveAbilityTaskOralExpression/index.vue

@@ -1,5 +1,12 @@
 <template>
   <section class="boston-container wh-full overflow-hidden relative">
+    <el-image
+      v-if="!isMainWin"
+      src="/static/image/cognitiveAbility/SpeechTraining/close.png"
+      fit="contain"
+      class="!absolute z-5999 top-[36px] right-[36px] w-[70px] h-[70px] cursor-pointer"
+      @click="handleClose"
+    />
     <div v-if="showCountDown" class="absolute top-[50%] left-[50%] translate-[-50%] w-[400px] h-[200px] flex-center">
       <div class="w-[120px] h-[120px] relative">
         <wu-count-down :begin="countDownBegin" :num="5" @count-down-end="countDownEnd" />
@@ -8,20 +15,73 @@
     </div>
     <div
       v-else
-      class="absolute top-[50%] left-[50%] translate-[-50%] w-[1100px] h-[640px] rounded-[8px] bg-[#ffffffff] shadow-lg flex flex-row items-center justify-around"
-    ></div>
+      class="absolute top-[50%] left-[50%] translate-[-50%] w-[1600px] h-[960px] rounded-[8px] bg-[#ffffffff] shadow-lg flex-center flex-col"
+    >
+      <!--模式选择-->
+      <div v-if="modeSelect === -1" class="absolute wh-full top-0 left-0 bg-[#ffffff9f] z-3999 flex-center">
+        <div class="choice-bg w-800px h-400px flex-center flex-col">
+          <span class="inline-block text-45px text-black mb-36px mt-28px">请选择您任务模式：</span>
+          <div class="flex flex-row w-76% justify-between mt-18px">
+            <el-image
+              v-if="!isMainWin"
+              src="/static/image/cognitiveAbility/SpeechTraining/tips-one.png"
+              fit="contain"
+              class="w-[280px] h-[90px] cursor-pointer"
+              :class="{ 'scale-113': modeActive === 0 }"
+              @click="modeSelectFn(0)"
+            />
+            <el-image
+              v-if="!isMainWin"
+              src="/static/image/cognitiveAbility/SpeechTraining/tips-all.png"
+              fit="contain"
+              class="w-[280px] h-[90px] cursor-pointer"
+              :class="{ 'scale-113': modeActive === 1 }"
+              @click="modeSelectFn(1)"
+            />
+          </div>
+        </div>
+      </div>
+      <el-image
+        src="/static/image/cognitiveAbility/SpeechTraining/Visual/bg-title.png"
+        fit="contain"
+        class="w-[1120px] h-[160px]"
+      />
+      <div class="w-[1120px] mt-100px flex flex-wrap flex-row justify-between">
+        <div
+          v-for="(item, index) in checkItems"
+          :key="index"
+          class="w-[300px] h-[70px] flex-center fw-700 text-[38px] color-[#ffffff] mb-[18px] cursor-pointer hover:scale-102"
+          :class="[item.active ? 'active' : 'normal']"
+          @click="checkItemFn(item, index)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <el-image
+        src="/static/image/cognitiveAbility/SpeechTraining/start-bg.png"
+        fit="contain"
+        class="w-[280px] h-[90px] mt-140px cursor-pointer hover:scale-101"
+      />
+    </div>
+
+    <VoiceImp ref="VoiceImpRef" />
   </section>
 </template>
 
 <script setup lang="ts">
 /*
  * 组件名: CognitiveAbilityTaskOralExpression
- * 组件用途: 常规康复训练 - 口语表达
+ * 组件用途: 常规视康复训练
  * 创建日期: 2024/7/16
  * 编写者: JutarryWu
  */
 import EvaluationSTRecordInfoAPI from '@/api/tester/evaluation/stRecord'
 import { useUserStore } from '@/store'
+interface CheckItem {
+  key: string
+  name: string
+  active: boolean
+}
 
 const isMainWin = ref(false)
 
@@ -39,11 +99,25 @@ const props = defineProps({
 
 const emits = defineEmits(['showResult', 'close'])
 const userStore = useUserStore()
-const showCountDown = ref(true)
+const showCountDown = ref(false)
 const countDownBegin = ref(false)
 const countDownStr = ref('测试马上开始！')
 const loading = ref(false)
+const VoiceImpRef = ref()
+
+const modeSelect = ref(-1) // -1: 未选择，0: 单流程模式，1: 全流程模式
+const modeActive = ref(-1) // -1: 未选择，0: 单流程模式，1: 全流程模式
+
 const dialogVisible = ref(false) // 学历弹窗
+const checkItems = ref<CheckItem[]>([
+  { key: '1', name: '字字匹配', active: false },
+  { key: '2', name: '词图匹配', active: false },
+  { key: '3', name: '图词匹配', active: false },
+  { key: '4', name: '句图匹配', active: false },
+  { key: '5', name: '执行指令', active: false },
+  { key: '6', name: '词语组句', active: false },
+  { key: '7', name: '短文理解', active: false }
+])
 
 const closeDialog = () => {
   dialogVisible.value = false
@@ -55,6 +129,42 @@ const closeDialog = () => {
  */
 const handleSubmit = () => {}
 
+const handleClose = () => {
+  emits('close')
+}
+
+const checkItemFn = (item: CheckItem, index: number) => {
+  if (modeSelect.value === 0) {
+    checkItems.value.forEach((item2) => {
+      item2.active = false
+    })
+    VoiceImpRef.value.videoPlay()
+    item.active = !item.active
+  }
+}
+
+/**
+ * 选择模式
+ * @param mode 0: 单流程模式，1: 全流程模式
+ */
+const modeSelectFn = (mode: number) => {
+  if (modeActive.value !== -1) return
+  VoiceImpRef.value.videoPlay('right')
+  modeActive.value = mode
+  setTimeout(() => {
+    modeSelect.value = mode
+    if (mode === 1) {
+      checkItems.value.forEach((item) => {
+        item.active = true
+      })
+    }
+  }, 800)
+}
+
+const startTask = () => {
+  // TODO 开始任务
+}
+
 const countDownEnd = () => {
   countDownBegin.value = false
   showCountDown.value = false
@@ -89,25 +199,26 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .boston-container {
-  background: url('/static/image/cognitiveAbility/SpeechTraining/bg.png') no-repeat 0 0 / 100% 100% border-box
-    border-box fixed;
+  background: url('/static/image/cognitiveAbility/SpeechTraining/Visual/bg.png') no-repeat 0 0 / 100% 100% border-box
+    fixed;
 
   .el-button + .el-button {
     margin-left: 0;
   }
 
-  .shadow {
-    scale: 1.37;
-    box-shadow:
-      0 0 0 2px #fdfdfd inset,
-      0 0 0 0 rgba(0, 0, 0, 0);
+  .active {
+    background: url('/static/image/cognitiveAbility/SpeechTraining/item-active.png') no-repeat 0 0 / 100% 100%
+      border-box border-box fixed;
   }
-}
 
-:deep(h3) {
-  margin-top: 18px !important;
-  margin-bottom: 5px !important;
-  margin-block-end: 5px !important;
-  margin-block-start: 18px !important;
+  .normal {
+    background: url('/static/image/cognitiveAbility/SpeechTraining/item.png') no-repeat 0 0 / 100% 100% border-box
+      border-box fixed;
+  }
+
+  .choice-bg {
+    background: url('/static/image/cognitiveAbility/SpeechTraining/tips-bg.png') no-repeat 0 0 / 100% 100% border-box
+      border-box fixed;
+  }
 }
 </style>

src/views/tester/components/RehabilitationEvaluation/CognitiveAbilityTask/CognitiveAbilityTaskVisualTraining/index.vue

@@ -1,5 +1,12 @@
 <template>
   <section class="boston-container wh-full overflow-hidden relative">
+    <el-image
+      v-if="!isMainWin"
+      src="/static/image/cognitiveAbility/SpeechTraining/close.png"
+      fit="contain"
+      class="!absolute z-5999 top-[36px] right-[36px] w-[70px] h-[70px] cursor-pointer"
+      @click="handleClose"
+    />
     <div v-if="showCountDown" class="absolute top-[50%] left-[50%] translate-[-50%] w-[400px] h-[200px] flex-center">
       <div class="w-[120px] h-[120px] relative">
         <wu-count-down :begin="countDownBegin" :num="5" @count-down-end="countDownEnd" />
@@ -8,30 +15,56 @@
     </div>
     <div
       v-else
-      class="absolute top-[50%] left-[50%] translate-[-50%] w-[1600px] h-[840px] rounded-[8px] bg-[#ffffffff] shadow-lg flex flex-row items-center justify-around"
+      class="absolute top-[50%] left-[50%] translate-[-50%] w-[1600px] h-[960px] rounded-[8px] bg-[#ffffffff] shadow-lg flex-center flex-col"
     >
-      <div class="title w-[1100px] h-[150px] absolute top-[100px]"></div>
-      <div class="w-[1200px] h-[150px] absolute top-[300px] flex flex-wrap">
-        <div
-          class="w-[300px] h-[70px] line-height-[10px] fw-700 text-[25px] color-[#ffffff] ml-[60px] mr-[50px]"
-          :class="styTitle"
-        >
-          <h1>字字匹配</h1>
-        </div>
-        <div
-          class="w-[300px] h-[70px] line-height-[10px] fw-700 text-[25px] color-[#ffffff] ml-[20px] mr-[50px]"
-          :class="styTitle"
-        >
-          <h1>字字匹配</h1>
+      <!--模式选择-->
+      <div v-if="modeSelect === -1" class="absolute wh-full top-0 left-0 bg-[#ffffff9f] z-3999 flex-center">
+        <div class="choice-bg w-800px h-400px flex-center flex-col">
+          <span class="inline-block text-45px text-black mb-36px mt-28px">请选择您任务模式：</span>
+          <div class="flex flex-row w-76% justify-between mt-18px">
+            <el-image
+              v-if="!isMainWin"
+              src="/static/image/cognitiveAbility/SpeechTraining/tips-one.png"
+              fit="contain"
+              class="w-[280px] h-[90px] cursor-pointer"
+              :class="{ 'scale-113': modeActive === 0 }"
+              @click="modeSelectFn(0)"
+            />
+            <el-image
+              v-if="!isMainWin"
+              src="/static/image/cognitiveAbility/SpeechTraining/tips-all.png"
+              fit="contain"
+              class="w-[280px] h-[90px] cursor-pointer"
+              :class="{ 'scale-113': modeActive === 1 }"
+              @click="modeSelectFn(1)"
+            />
+          </div>
         </div>
+      </div>
+      <el-image
+        src="/static/image/cognitiveAbility/SpeechTraining/Visual/bg-title.png"
+        fit="contain"
+        class="w-[1120px] h-[160px]"
+      />
+      <div class="w-[1120px] mt-100px flex flex-wrap flex-row justify-between">
         <div
-          class="w-[300px] h-[70px] line-height-[10px] fw-700 text-[25px] color-[#ffffff] ml-[20px] mr-[40px]"
-          :class="styTitle"
+          v-for="(item, index) in checkItems"
+          :key="index"
+          class="w-[300px] h-[70px] flex-center fw-700 text-[38px] color-[#ffffff] mb-[18px] cursor-pointer hover:scale-102"
+          :class="[item.active ? 'active' : 'normal']"
+          @click="checkItemFn(item, index)"
         >
-          <h1>字字匹配</h1>
+          {{ item.name }}
         </div>
       </div>
+      <el-image
+        src="/static/image/cognitiveAbility/SpeechTraining/start-bg.png"
+        fit="contain"
+        class="w-[280px] h-[90px] mt-140px cursor-pointer hover:scale-101"
+      />
     </div>
+
+    <VoiceImp ref="VoiceImpRef" />
   </section>
 </template>
 
@@ -44,6 +77,11 @@
  */
 import EvaluationSTRecordInfoAPI from '@/api/tester/evaluation/stRecord'
 import { useUserStore } from '@/store'
+interface CheckItem {
+  key: string
+  name: string
+  active: boolean
+}
 
 const isMainWin = ref(false)
 
@@ -65,9 +103,21 @@ const showCountDown = ref(false)
 const countDownBegin = ref(false)
 const countDownStr = ref('测试马上开始！')
 const loading = ref(false)
-const styTitle = ref('item-active')
-// styTitle
+const VoiceImpRef = ref()
+
+const modeSelect = ref(-1) // -1: 未选择，0: 单流程模式，1: 全流程模式
+const modeActive = ref(-1) // -1: 未选择，0: 单流程模式，1: 全流程模式
+
 const dialogVisible = ref(false) // 学历弹窗
+const checkItems = ref<CheckItem[]>([
+  { key: '1', name: '字字匹配', active: false },
+  { key: '2', name: '词图匹配', active: false },
+  { key: '3', name: '图词匹配', active: false },
+  { key: '4', name: '句图匹配', active: false },
+  { key: '5', name: '执行指令', active: false },
+  { key: '6', name: '词语组句', active: false },
+  { key: '7', name: '短文理解', active: false }
+])
 
 const closeDialog = () => {
   dialogVisible.value = false
@@ -79,6 +129,42 @@ const closeDialog = () => {
  */
 const handleSubmit = () => {}
 
+const handleClose = () => {
+  emits('close')
+}
+
+const checkItemFn = (item: CheckItem, index: number) => {
+  if (modeSelect.value === 0) {
+    checkItems.value.forEach((item2) => {
+      item2.active = false
+    })
+    VoiceImpRef.value.videoPlay()
+    item.active = !item.active
+  }
+}
+
+/**
+ * 选择模式
+ * @param mode 0: 单流程模式，1: 全流程模式
+ */
+const modeSelectFn = (mode: number) => {
+  if (modeActive.value !== -1) return
+  VoiceImpRef.value.videoPlay('right')
+  modeActive.value = mode
+  setTimeout(() => {
+    modeSelect.value = mode
+    if (mode === 1) {
+      checkItems.value.forEach((item) => {
+        item.active = true
+      })
+    }
+  }, 800)
+}
+
+const startTask = () => {
+  // TODO 开始任务
+}
+
 const countDownEnd = () => {
   countDownBegin.value = false
   showCountDown.value = false
@@ -113,32 +199,26 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .boston-container {
-  background: url('static/image/cognitiveAbility/SpeechTraining/bg.png') no-repeat 0 0 / 100% 100% border-box border-box
+  background: url('/static/image/cognitiveAbility/SpeechTraining/Visual/bg.png') no-repeat 0 0 / 100% 100% border-box
     fixed;
 
   .el-button + .el-button {
     margin-left: 0;
   }
-  .title {
-    background: url('static/image/cognitiveAbility/SpeechTraining/Visual/bg-title.png') no-repeat 0 0 / 100% 100%
+
+  .active {
+    background: url('/static/image/cognitiveAbility/SpeechTraining/item-active.png') no-repeat 0 0 / 100% 100%
       border-box border-box fixed;
   }
-  .shadow {
-    scale: 1.37;
-    box-shadow:
-      0 0 0 2px #fdfdfd inset,
-      0 0 0 0 rgba(0, 0, 0, 0);
+
+  .normal {
+    background: url('/static/image/cognitiveAbility/SpeechTraining/item.png') no-repeat 0 0 / 100% 100% border-box
+      border-box fixed;
+  }
+
+  .choice-bg {
+    background: url('/static/image/cognitiveAbility/SpeechTraining/tips-bg.png') no-repeat 0 0 / 100% 100% border-box
+      border-box fixed;
   }
-}
-.item-active {
-  text-align: center;
-  background: url('static/image/cognitiveAbility/SpeechTraining/item-active.png') no-repeat 0 0 / 100% 100% border-box
-    border-box fixed;
-}
-:deep(h3) {
-  margin-top: 18px !important;
-  margin-bottom: 5px !important;
-  margin-block-end: 5px !important;
-  margin-block-start: 18px !important;
 }
 </style>