feat(认知任务): 新增广度训练框架

src/router/routes/entrance.ts

@@ -50,6 +50,15 @@ export const entranceRoutes: AppRouteModule[] = [
       title: '认知任务 - 空间定位',
       ignoreAuth: true
     }
+  },
+  {
+    path: '/cognitiveTasks/BreadthTraining',
+    name: 'cognitiveTasksBreadthTraining',
+    component: () => import('/@/views/cognitiveTasks/BreadthTraining/index.vue'),
+    meta: {
+      title: '认知任务 - 广度训练',
+      ignoreAuth: true
+    }
   }
 ]
 

src/views/cognitiveTasks/BreadthTraining/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <section class="app-container">
+    <van-nav-bar :title="subjectInfo.name" />
+    <count-down v-if="showCountDown" :time="5" @end-count-down="exec" />
+  </section>
+</template>
+
+<script setup lang="ts">
+/*
+ * 组件名: BreadthTraining
+ * 组件用途: 广度训练
+ * 创建日期: 2024/8/16
+ * 编写者: JutarryWu
+ */
+// import { shuffle } from 'lodash-es'
+
+const subjectInfo = ref({
+  name: '广度训练'
+})
+const showCountDown = ref(false) // 显示倒计时
+
+function exec() {
+  showCountDown.value = false
+}
+
+onMounted(() => {
+  showCountDown.value = true
+})
+</script>
+
+<style scoped lang="less">
+.app-container {
+}
+</style>

src/views/cognitiveTasks/spatialOrientationAbility/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="app-container">
+    <van-nav-bar :title="subjectInfo.name" />
+    <count-down v-if="showCountDown" :time="5" @end-count-down="exec" />
+  </section>
+</template>
+
+<script setup lang="ts">
+/*
+ * 组件名: spatialOrientationAbility
+ * 组件用途: 空间定向训练
+ * 创建日期: 2024/8/16
+ * 编写者: JutarryWu
+ */
+// import { shuffle } from 'lodash-es'
+
+const subjectInfo = ref({
+  name: '空间定向训练'
+})
+const showCountDown = ref(false) // 显示倒计时
+// const levelNum = [3, 5, 7] // 正式测试：3个难度等级需要呈现的刺激目标数
+// let tryCount = 3 // 正式测试：每个难度等级需要进行的试次数
+// const showDataArr = ref([])
+// const arrDataDemo = [
+//   { id: 0, text: "工厂", name: "工厂", value: "factory", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/factory.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 1, text: "森林", name: "森林", value: "forest", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/forest.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 3, text: "医院", name: "医院", value: "hospital", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/hospital.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 2, text: "湖泊", name: "湖泊", value: "lakes", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/lakes.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 4, text: "山",  name: "山", value: "massif", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/massif.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 5, text: "飞机", name: "飞机", value: "plane", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/plane.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 6, text: "电力设备", name: "电力设备", value: "powerFacilities", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/powerFacilities.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 7, text: "雷达", name: "雷达", value: "radar", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/radar.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 8, text: "火箭", name: "火箭", value: "rocket", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/rocket.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 9, text: "士兵", name: "士兵", value: "soldier", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/soldier.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 10, text: "坦克", name: "坦克", value: "tank", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/tank.png"), angle: "", xAxis: "", yAxis: "" },
+//   { id: 11, text: "军舰", name: "军舰", value: "warship", imgUrl:  require("@/assets/congnitiveAblitity/spatialOrientationAbilityNew/warship.png"), angle: "", xAxis: "", yAxis: "" },
+// ]
+
+// 以下生成随机位置显示图例方法
+// const initImgData = (level: number, num: number) => {
+//   // 随机生成6个物品的位置
+//   let items = generateNonOverlappingPoints(175, 175, 175, num - 1)
+//   arrDataDemo = shuffle(arrDataDemo)
+//   let tempItems = arrDataDemo.slice(0, num)
+//   let extraInfo = {
+//     level: levelNum[level],
+//     onceStartTime: '',
+//     onceEndTime: '',
+//     reactionTime: 0
+//   }
+//   items.forEach((item, index) => {
+//     tempItems[index] = { ...tempItems[index], ...item, ...extraInfo }
+//   })
+//   return tempItems
+// }
+//
+// const initImgDataList = () => {
+//   for (let i = 0; i < levelNum.length; i++) {
+//     while (tryCount--) {
+//       let tempData = initImgData(i, levelNum[i])
+//       showDataArr.value.push(tempData)
+//     }
+//   }
+//   showDataArr.value = shuffle(showDataArr.value)
+//   console.log('生成的随机点位：', showDataArr.value)
+// }
+
+function exec() {
+  showCountDown.value = false
+}
+
+onMounted(() => {
+  showCountDown.value = true
+  // initImgDataList()
+})
+</script>
+
+<style scoped lang="less">
+.app-container {
+}
+</style>