insomnia-cognition-h5/src/views/cognitiveTasks/spatialOrientationAbility/index.vue

<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'
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<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: 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
}

onMounted(() => {
  showCountDown.value = true
  initImgDataList()
})
</script>

<style scoped lang="less">
.app-container {
}
</style>