feat(认知任务): 空间定位算法实现

.eslintrc-auto-import.json

@@ -4,24 +4,39 @@
     "ComponentPublicInstance": true,
     "ComputedRef": true,
     "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
     "InjectionKey": true,
     "PropType": true,
     "Ref": true,
     "VNode": true,
+    "WritableComputedRef": true,
+    "acceptHMRUpdate": true,
     "computed": true,
     "createApp": true,
+    "createPinia": true,
     "customRef": true,
     "defineAsyncComponent": true,
     "defineComponent": true,
+    "defineStore": true,
     "effectScope": true,
+    "getActivePinia": true,
+    "getAssetsImageUrl": true,
     "getCurrentInstance": true,
     "getCurrentScope": true,
+    "getRelativeImageUrl": true,
     "h": true,
     "inject": true,
     "isProxy": true,
     "isReactive": true,
     "isReadonly": true,
     "isRef": true,
+    "mapActions": true,
+    "mapGetters": true,
+    "mapState": true,
+    "mapStores": true,
+    "mapWritableState": true,
     "markRaw": true,
     "nextTick": true,
     "onActivated": true,
@@ -44,9 +59,12 @@
     "readonly": true,
     "ref": true,
     "resolveComponent": true,
+    "setActivePinia": true,
+    "setMapStoreSuffix": true,
     "shallowReactive": true,
     "shallowReadonly": true,
     "shallowRef": true,
+    "storeToRefs": true,
     "toRaw": true,
     "toRef": true,
     "toRefs": true,
@@ -57,31 +75,13 @@
     "useCssModule": true,
     "useCssVars": true,
     "useLink": true,
+    "useMessage": true,
     "useRoute": true,
     "useRouter": true,
     "useSlots": true,
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "acceptHMRUpdate": true,
-    "createPinia": true,
-    "defineStore": true,
-    "getActivePinia": true,
-    "mapActions": true,
-    "mapGetters": true,
-    "mapState": true,
-    "mapStores": true,
-    "mapWritableState": true,
-    "setActivePinia": true,
-    "setMapStoreSuffix": true,
-    "storeToRefs": true,
-    "getAssetsImageUrl": true,
-    "getRelativeImageUrl": true,
-    "useMessage": true,
-    "WritableComputedRef": true,
-    "ExtractDefaultPropTypes": true,
-    "ExtractPropTypes": true,
-    "ExtractPublicPropTypes": true
+    "watchSyncEffect": true
   }
 }

auto-imports.d.ts

@@ -19,7 +19,6 @@ declare global {
   const getAssetsImageUrl: typeof import('../../../@/utils/file/image')['getAssetsImageUrl']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const getImageUrl: typeof import('../../../../@/utils/file/image')['getImageUrl']
   const getRelativeImageUrl: typeof import('../../../@/utils/file/image')['getRelativeImageUrl']
   const h: typeof import('vue')['h']
   const inject: typeof import('vue')['inject']

src/views/cognitiveTasks/spatialOrientationAbility/index.vue

@@ -12,58 +12,136 @@
  * 创建日期: 2024/8/16
  * 编写者: JutarryWu
  */
-// import { shuffle } from 'lodash-es'
+import { shuffle } from 'lodash-es'
+import Url_forest from '/@/assets/images/task/spatialOrientationAbility/forest.png'
+import Url_hospital from '/@/assets/images/task/spatialOrientationAbility/hospital.png'
+import Url_lakes from '/@/assets/images/task/spatialOrientationAbility/lakes.png'
+import Url_massif from '/@/assets/images/task/spatialOrientationAbility/massif.png'
+import Url_cat from '/@/assets/images/task/spatialOrientationAbility/cat.png'
+import Url_flower from '/@/assets/images/task/spatialOrientationAbility/flower.png'
+import Url_car from '/@/assets/images/task/spatialOrientationAbility/car.png'
+import Url_trafficLight from '/@/assets/images/task/spatialOrientationAbility/trafficLight.png'
+import Url_stop from '/@/assets/images/task/spatialOrientationAbility/stop.png'
+import Url_house from '/@/assets/images/task/spatialOrientationAbility/house.png'
+
+interface IData {
+  level?: number
+  onceStartTime?: string
+  onceEndTime?: string
+  reactionTime?: number
+  xAxis?: string | number
+  yAxis?: string | number
+  id?: number
+  text?: string
+  name?: string
+  value?: string
+  imgUrl?: string
+  angle?: string
+}
 
 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 levelNum = [3, 5, 7] // 正式测试：3个难度等级需要呈现的刺激目标数
+let tryCount = 3 // 正式测试：每个难度等级需要进行的试次数
+const showDataArr = ref<IData[]>([])
+let arrDataDemo: IData[] = [
+  { id: 0, text: '森林', name: '森林', value: 'forest', imgUrl: Url_forest, angle: '', xAxis: '', yAxis: '' },
+  { id: 1, text: '医院', name: '医院', value: 'hospital', imgUrl: Url_hospital, angle: '', xAxis: '', yAxis: '' },
+  { id: 2, text: '湖泊', name: '湖泊', value: 'lakes', imgUrl: Url_lakes, angle: '', xAxis: '', yAxis: '' },
+  { id: 3, text: '山', name: '山', value: 'massif', imgUrl: Url_massif, angle: '', xAxis: '', yAxis: '' },
+  { id: 4, text: '猫', name: '猫', value: 'cat', imgUrl: Url_cat, angle: '', xAxis: '', yAxis: '' },
+  { id: 5, text: '花', name: '花', value: 'flower', imgUrl: Url_flower, angle: '', xAxis: '', yAxis: '' },
+  { id: 6, text: '车', name: '车', value: 'car', imgUrl: Url_car, angle: '', xAxis: '', yAxis: '' },
+  {
+    id: 7,
+    text: '红绿灯',
+    name: '红绿灯',
+    value: 'trafficLight',
+    imgUrl: Url_trafficLight,
+    angle: '',
+    xAxis: '',
+    yAxis: ''
+  },
+  { id: 8, text: '停止牌', name: '停止牌', value: 'soldier', imgUrl: Url_stop, angle: '', xAxis: '', yAxis: '' },
+  { id: 9, text: '房子', name: '房子', value: 'house', imgUrl: Url_house, angle: '', xAxis: '', yAxis: '' }
+]
+
+/**
+ * 生成不重叠随机点
+ * @param centerX
+ * @param centerY
+ * @param radius
+ * @param existingPoints
+ */
+const generateRandomPoint = (
+  centerX: number,
+  centerY: number,
+  radius: number,
+  existingPoints: Record<string, any>[]
+) => {
+  let angle = Math.random() * 2 * Math.PI
+  let distance = Math.sqrt(Math.random()) * radius // 确保点更均匀地分布在圆内
+  let xAxis = centerX + distance * Math.cos(angle)
+  let yAxis = centerY + distance * Math.sin(angle)
+
+  // 检查是否与现有点重叠
+  for (let point of existingPoints) {
+    let dx = xAxis - point.xAxis
+    let dy = yAxis - point.yAxis
+    if (Math.sqrt(dx * dx + dy * dy) < radius / 3) {
+      // 阈值设为半径的1/4
+      return generateRandomPoint(centerX, centerY, radius, existingPoints) // 递归调用直到找到合适的点
+    }
+  }
+
+  return { xAxis, yAxis }
+}
+
+const generateNonOverlappingPoints = (centerX: number, centerY: number, radius: number, num: number) => {
+  let points = [{ xAxis: centerX, yAxis: centerY }] // 中心点
+  for (let i = 0; i < num; i++) {
+    let newPoint = generateRandomPoint(centerX, centerY, radius, points)
+    points.push(newPoint)
+  }
+  return points.map((item) => {
+    return {
+      xAxis: (item.xAxis + 16) / 41.4,
+      yAxis: (item.yAxis + 16) / 41.4
+    }
+  })
+}
 
 // 以下生成随机位置显示图例方法
-// 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)
-// }
+const initImgData = (level: number, num: number) => {
+  // 随机生成6个物品的位置
+  let items = generateNonOverlappingPoints(175, 175, 175, num - 1)
+  arrDataDemo = shuffle(arrDataDemo)
+  let tempItems: IData[] = 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 > 0) {
+      let tempData: IData[] = initImgData(i, levelNum[i])
+      showDataArr.value = [...showDataArr.value, ...tempData]
+      tryCount--
+    }
+  }
+  showDataArr.value = shuffle(showDataArr.value)
+  console.log('生成的随机点位：', showDataArr.value)
+}
 
 function exec() {
   showCountDown.value = false
@@ -71,7 +149,7 @@ function exec() {
 
 onMounted(() => {
   showCountDown.value = true
-  // initImgDataList()
+  initImgDataList()
 })
 </script>