psychological-competence/src/views/CognitiveAbilityTask/prospectiveMemoryAbility/formal.vue

<template>
  <div class="content-container">
    <div class="content-outline" v-if="!running">
      <div class="left_part">
        <div id="left_top" class="flex-row">
          <el-image class="setting" :src="require('@/assets/9551.png')" fit="cover" />
          <div class="text"> 操作提示：</div>
        </div>
        <div class="left-desc-80">
          {{ practiceFlag ? '请先练习测试，练习完成后，即将正式测试。' : '请开始正式测试！' }}
        </div>
      </div>
      <div
          class="right_part"
          :style="{
          background:
            'url(' + require('../../../assets/page' + taskId + '.png') + ')',
          'background-size': '100% 100%',
        }"
      >
        <div id="title">
          <span>{{ subjectInfo.name }}</span>
        </div>
        <div
            style="
            position: absolute;
            bottom: 0.156rem;
            left: 50%;
            transform: translateX(-50%);
          "
        >
          <el-button type="primary" class="start" @click="startTest()">
            {{ practiceFlag ? '练习测试' : '正式测试' }}
          </el-button>
        </div>
      </div>
    </div>

    <div v-if="running" class="activeTask" >
      <MainProgress v-if="!practiceFlag" :cur-percentage="(currentIndex / collectedDataArray.length)" />

      <div class="taskHead">
        <div class="scale" @click.stop="screen">
          <img src="@/assets/small-big.png" alt="" />
        </div>
      </div>
      <div id="game">
        <img v-if="showPic" ref="missile" id="missile" :src="collectedDataArray[currentIndex].leftImg" alt="" draggable="false">
        <img v-if="showPic" ref="compass" id="compass" :src="collectedDataArray[currentIndex].rightImg" alt="" draggable="false">
      </div>
      <div id="tip" v-if="false">
        <img id="arrow" v-if="currentArrowImg" :src="currentArrowImg" alt="">
      </div>
    </div>


<!--    <pre>{{ practiceMaps }}</pre>-->

    <go-back />
  </div>
</template>

<script>
import screenfull from "screenfull";
import { oSessionStorage, dateFormat } from "@/utils/utils";
import GoBack from "@/components/goBack/index.vue"
import MainProgress from "@/components/MainProgress/index.vue"
import { generateRandomRangeNumbers } from "../../../utils/utils";

export default {
  name: "prospectiveMemoryAbility",
  components: { GoBack, MainProgress },
  data() {
    return {
      subjectInfo: "", //认知任务详情
      taskId: "", // 认知任务id
      userId: '',

      disabled: true, // 是否处于注视点时长内，如果是，在不响应任何按键

      running: false,  // 游戏是否开始
      practiceFlag: true, // 是否处于练习模式，默认是练习模式

      currentIndex: 0,
      selectedDirection: '',  // 用户选择的方向，left 或 right
      selectedKey: '',  // 用户当前选择的按键，用于阻止重复选择
      pseudoRandomArray: [
        // 伪随机数组,前72个是主任务,后8个是前瞻性任务
        // 第1-12个是左键-A键, 第13-24个是左键-S键, 第25-36个是左键-D键, 第37-48个是右键-A键, 第49-60个是右键-S键, 第61-72个是右键-D键, 第73-80个是空格键
        { index: 0, missile: 'm1s0', compass: 'tjq3dc', taskType: '1' },
        { index: 1, missile: 'm1s1', compass: 'tjq3dc', taskType: '1' },
        { index: 2, missile: 'm1s2', compass: 'tjq3dc', taskType: '1' },
        { index: 3, missile: 'm2s0', compass: 'tjq3dc', taskType: '1' },
        { index: 4, missile: 'm2s1', compass: 'tjq3dc', taskType: '1' },
        { index: 5, missile: 'm2s2', compass: 'tjq3dc', taskType: '1' },
        { index: 6, missile: 'm1s0', compass: 'tjq2dc', taskType: '1' },
        { index: 7, missile: 'm1s1', compass: 'tjq2dc', taskType: '1' },
        { index: 8, missile: 'm1s2', compass: 'tjq2dc', taskType: '1' },
        { index: 9, missile: 'm2s0', compass: 'tjq2dc', taskType: '1' },
        { index: 10, missile: 'm2s1', compass: 'tjq2dc', taskType: '1' },
        { index: 11, missile: 'm2s2', compass: 'tjq2dc', taskType: '1' },
        { index: 12, missile: 'm1s0', compass: 'tjq1dc', taskType: '1' },
        { index: 13, missile: 'm1s1', compass: 'tjq1dc', taskType: '1' },
        { index: 14, missile: 'm1s2', compass: 'tjq1dc', taskType: '1' },
        { index: 15, missile: 'm2s0', compass: 'tjq1dc', taskType: '1' },
        { index: 16, missile: 'm2s1', compass: 'tjq1dc', taskType: '1' },
        { index: 17, missile: 'm2s2', compass: 'tjq1dc', taskType: '1' },
        { index: 18, missile: 'm1s0', compass: 'tjq4dc', taskType: '1' },
        { index: 19, missile: 'm1s1', compass: 'tjq4dc', taskType: '1' },
        { index: 20, missile: 'm1s2', compass: 'tjq4dc', taskType: '1' },
        { index: 21, missile: 'm2s0', compass: 'tjq4dc', taskType: '1' },
        { index: 22, missile: 'm2s1', compass: 'tjq4dc', taskType: '1' },
        { index: 23, missile: 'm2s2', compass: 'tjq4dc', taskType: '1' },
        { index: 24, missile: 'm0s1', compass: 'tjq3di', taskType: '1' },
        { index: 25, missile: 'm1s1', compass: 'tjq3di', taskType: '1' },
        { index: 26, missile: 'm2s1', compass: 'tjq3di', taskType: '1' },
        { index: 27, missile: 'm0s2', compass: 'tjq3di', taskType: '1' },
        { index: 28, missile: 'm1s2', compass: 'tjq3di', taskType: '1' },
        { index: 29, missile: 'm2s2', compass: 'tjq3di', taskType: '1' },
        { index: 30, missile: 'm0s1', compass: 'tjq2di', taskType: '1' },
        { index: 31, missile: 'm1s1', compass: 'tjq2di', taskType: '1' },
        { index: 32, missile: 'm2s1', compass: 'tjq2di', taskType: '1' },
        { index: 33, missile: 'm0s2', compass: 'tjq2di', taskType: '1' },
        { index: 34, missile: 'm1s2', compass: 'tjq2di', taskType: '1' },
        { index: 35, missile: 'm2s2', compass: 'tjq2di', taskType: '1' },
        { index: 36, missile: 'm0s1', compass: 'tjq1di', taskType: '1' },
        { index: 37, missile: 'm1s1', compass: 'tjq1di', taskType: '1' },
        { index: 38, missile: 'm2s1', compass: 'tjq1di', taskType: '1' },
        { index: 39, missile: 'm0s2', compass: 'tjq1di', taskType: '1' },
        { index: 40, missile: 'm1s2', compass: 'tjq1di', taskType: '1' },
        { index: 41, missile: 'm2s2', compass: 'tjq1di', taskType: '1' },
        { index: 42, missile: 'm0s1', compass: 'tjq4di', taskType: '1' },
        { index: 43, missile: 'm1s1', compass: 'tjq4di', taskType: '1' },
        { index: 44, missile: 'm2s1', compass: 'tjq4di', taskType: '1' },
        { index: 45, missile: 'm0s2', compass: 'tjq4di', taskType: '1' },
        { index: 46, missile: 'm1s2', compass: 'tjq4di', taskType: '1' },
        { index: 47, missile: 'm2s2', compass: 'tjq4di', taskType: '1' },
        { index: 48, missile: 'm0s0', compass: 'tyq2di', taskType: '1' },
        { index: 49, missile: 'm0s1', compass: 'tyq3di', taskType: '1' },
        { index: 50, missile: 'm0s2', compass: 'tyq2dc', taskType: '1' },
        { index: 51, missile: 'm1s0', compass: 'tyq3dc', taskType: '1' },
        { index: 52, missile: 'm1s1', compass: 'tyq2do', taskType: '1' },
        { index: 53, missile: 'm1s2', compass: 'tyq3do', taskType: '1' },
        { index: 54, missile: 'm2s0', compass: 'tyq2di', taskType: '1' },
        { index: 55, missile: 'm2s1', compass: 'tyq3di', taskType: '1' },
        { index: 56, missile: 'm2s2', compass: 'tyq2dc', taskType: '1' },
        { index: 57, missile: 'm0s1', compass: 'tyq3dc', taskType: '1' },
        { index: 58, missile: 'm1s2', compass: 'tyq2do', taskType: '1' },
        { index: 59, missile: 'm2s0', compass: 'tyq3do', taskType: '1' },
        { index: 60, missile: 'm0s0', compass: 'tyq1di', taskType: '1' },
        { index: 61, missile: 'm0s1', compass: 'tyq4di', taskType: '1' },
        { index: 62, missile: 'm0s2', compass: 'tyq1dc', taskType: '1' },
        { index: 63, missile: 'm1s0', compass: 'tyq4dc', taskType: '1' },
        { index: 64, missile: 'm1s1', compass: 'tyq1do', taskType: '1' },
        { index: 65, missile: 'm1s2', compass: 'tyq4do', taskType: '1' },
        { index: 66, missile: 'm2s0', compass: 'tyq1di', taskType: '1' },
        { index: 67, missile: 'm2s1', compass: 'tyq4di', taskType: '1' },
        { index: 68, missile: 'm2s2', compass: 'tyq1dc', taskType: '1' },
        { index: 69, missile: 'm0s1', compass: 'tyq4dc', taskType: '1' },
        { index: 70, missile: 'm1s2', compass: 'tyq1do', taskType: '1' },
        { index: 71, missile: 'm2s0', compass: 'tyq4do', taskType: '1' },
        { index: 72, missile: 'm2s1', compass: 'tnq1di', taskType: '2' },
        { index: 73, missile: 'm2s2', compass: 'tnq2dc', taskType: '2' },
        { index: 74, missile: 'm0s1', compass: 'tnq3do', taskType: '2' },
        { index: 75, missile: 'm1s2', compass: 'tnq4dc', taskType: '2' },
        { index: 76, missile: 'm1s0', compass: 'tjq1do', taskType: '2' },
        { index: 77, missile: 'm0s1', compass: 'tjq2dc', taskType: '2' },
        { index: 78, missile: 'm1s2', compass: 'tjq3do', taskType: '2' },
        { index: 79, missile: 'm0s0', compass: 'tjq4di', taskType: '2' }
      ],
      currentMap: null,
      collectedDataArray: [
        // {
        //   id: 1,
        //   name: '1',
        //   startTime: '',
        //   missile: '',
        //   compass: '',
        //   taskType: '1', // 1 主任务，2 前瞻性任务
        //   mainTaskDirectionReactionTime: '', // 主任务的方向选择反应时间
        //   mainTaskMissileReactionTime: '', // 主任务的挂载反应时间
        //   mainTaskDirectionCorrection: '', // 主任务的方向选择是否正确
        //   mainTaskMissileCorrection: '', // 主任务的挂载选择是否正确
        //   prospectiveTaskReactionTime: '', // 主任务的反应时间
        //   prospectiveTaskCorrection: '', // 主任务的反应是否正确
        // }
      ],
      collectedData: null,
      directionKey: '',
      missileKey: '',
      prospectiveKey: '',
      taskStartTime: 0, // 任务开始时间
      taskEndTime: 0, // 任务结束时间
      showPic: false,

      showCurrentMissile: false, // 隐藏图片
      showCurrentCompass: false  // 隐藏图片
    };
  },
  computed: { },
  created() {
    this.taskId = this.$route.query.taskId;
    this.subjectInfo = JSON.parse(oSessionStorage.getItem("subjectInfo"));
    this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f");

    this.createData()
  },
  watch: { },
  methods: {
    screen() {
      screenfull.toggle()
    },

    createData() {
      this.pseudoRandomArray = this.pseudoRandomArray.map((item, index) => {
        let newItem = {
          id: 1,

          leftImg: `/static/flying/${item.missile}.png`,
          rightImg: `/static/flying/${item.compass}.png`,

          startTime: '', // 本局开始时间
          endTime: '', // 本局结束时间
          onceStartTime: '',
          onceEndTime: '',

          mainTaskDirectionReactionTime: '', // 主任务的方向选择反应时间
          mainTaskDirectionCorrection: '', // 主任务的方向选择是否正确
          mainTaskDirectionStartTime: '', // 主任务方向选择的开始时间
          mainTaskDirectionEndTime: '', // 主任务方向选择的结束时间
          mainTaskDirectionCorrectionResponse: '', // 主任务方向正确反应 ['ArrowLeft' | 'ArrowRight' | '']
          mainTaskDirectionActualResponse: '', // 主任务方向实际反应 ['ArrowLeft' | 'ArrowRight' | '其他任意按键' | '']

          mainTaskMissileReactionTime: '', // 主任务的挂载反应时间
          mainTaskMissileCorrection: '', // 主任务的挂载选择是否正确
          mainTaskMissileStartTime: '', // 主任务武器选择的开始时间
          mainTaskMissileEndTime: '', // 主任务武器选择的结束时间
          mainTaskMissileCorrectionResponse: '', // 主任务挂载正确反应 ['KeyA' | 'KeyS' | 'KeyD' | '']
          mainTaskMissileActualResponse: '', // 主任务挂载实际反应 ['KeyA' | 'KeyS' | 'KeyD' | '其他任意按键' | '']

          prospectiveTaskReactionTime: '', // 前瞻性记忆任务的反应时间
          prospectiveTaskCorrection: '', // 前瞻性记忆任务的反应是否正确
          prospectiveTaskStartTime: '', // 前瞻性记忆任务反应的开始时间
          prospectiveTaskEndTime: '', // 前瞻性记忆任务反应的结束时间
          prospectiveTaskCorrectionResponse: '', // 前瞻性记忆任务正确反应  ['Space' | '']
          prospectiveTaskActualResponse: '', // 前瞻性记忆任务实际反应  ['Space' | 'ArrowLeft' | 'ArrowRight' | '其他任意按键' | '']
        }
        // 第1-12个是左键-A键,
        // 第13-24个是右键-A键,
        // 第25-36个是左键-S键,
        // 第37-48个是右键-S键,
        // 第49-60个是左键-D键,
        // 第61-72个是右键-D键,
        // 第73-80个是空格键
        if(index < 12) {
          newItem.mainTaskDirectionCorrectionResponse = 'ArrowLeft'
          newItem.mainTaskMissileCorrectionResponse = 'KeyA'
        } else if (index >= 12 && index < 24) {
          newItem.mainTaskDirectionCorrectionResponse = 'ArrowRight'
          newItem.mainTaskMissileCorrectionResponse = 'KeyA'
        } else if (index >= 24 && index < 36) {
          newItem.mainTaskDirectionCorrectionResponse = 'ArrowLeft'
          newItem.mainTaskMissileCorrectionResponse = 'KeyS'
        } else if(index >= 36 && index < 48) {
          newItem.mainTaskDirectionCorrectionResponse = 'ArrowRight'
          newItem.mainTaskMissileCorrectionResponse = 'KeyS'
        } else if (index >= 48 && index < 60) {
          newItem.mainTaskDirectionCorrectionResponse = 'ArrowLeft'
          newItem.mainTaskMissileCorrectionResponse = 'KeyD'
        } else if (index >= 60 && index < 72) {
          newItem.mainTaskDirectionCorrectionResponse = 'ArrowRight'
          newItem.mainTaskMissileCorrectionResponse = 'KeyD'
        } else {
          newItem.prospectiveTaskCorrectionResponse = 'Space'
        }

        return  { ...item, ...newItem }
      })
    },

    startTest() {
      // 进入全屏
      this.currentIndex = 0
      this.running = true
      this.screen()
      if (this.practiceFlag) {
        let tempArray = generateRandomRangeNumbers(1, 72, 6)
        this.collectedDataArray = tempArray.map(index => {
          return this.pseudoRandomArray[index - 1]
        })
        let tempArray_1 = generateRandomRangeNumbers(72, 80, 1)
        this.collectedDataArray.push(this.pseudoRandomArray[tempArray_1[0] - 1])
      } else {
        this.taskStartTime = Date.now()
        this.collectedDataArray = this.pseudoRandomArray
      }
      console.log('this.collectedDataArray: ', this.collectedDataArray)
      this.collectedDataArray = this.collectedDataArray.sort(() => Math.random() - 0.5)
      this.next()
    },

    next() {
      if (this.currentIndex < this.collectedDataArray.length) {
        console.log(' ------------------------------------------ ')
        console.log(' ---- current:  ', this.collectedDataArray[this.currentIndex])
        console.log(' ------------------------------------------ ')
        setTimeout(() => {
          // 注视点时长300-500之间
          setTimeout(() => this.disabled = false, Math.floor(Math.random() * 200 + 300))
          this.collectedDataArray[this.currentIndex].startTime = performance.now()
          this.collectedDataArray[this.currentIndex].onceStartTime = Date.now()
          this.collectedDataArray[this.currentIndex].mainTaskDirectionStartTime = performance.now()
          this.collectedDataArray[this.currentIndex].mainTaskMissileStartTime = performance.now()
          this.collectedDataArray[this.currentIndex].prospectiveTaskStartTime = performance.now()
          this.showPic = true
        }, 240) // 空屏 500 毫秒

        this.disabled = true // 开启注视点时长控制
      } else {
        // 结束游戏
        if (this.practiceFlag) {
          // 游戏结束时，如果是练习模式，则不发送数据，，，并且
          this.running = false // 退出游戏
          this.screen() // 退出全屏
          this.collectedDataArray = [] // 清理数据
          // 否则进入正式测试模式
          this.practiceFlag = false  // 将练习标识改成 false，下次开始游戏时，则为正式测试
        } else {
          // 如果不是测试模式，则发送，发送完成后，退出游戏，退出全屏，清理数据
          this.sendCollectedData()
        }
      }
    },
    sendCollectedData() {
      // 计算各种反应时间，单位秒，保留两位小数
      const result = this.collectedDataArray.map(data => {
        return {
          ...data,
          startTime: dateFormat("YY-mm-dd HH:MM:SS", new Date(data.onceStartTime)),
          endTime: dateFormat("YY-mm-dd HH:MM:SS", new Date(data.onceEndTime)),
          onceStartTime: dateFormat("YY-mm-dd HH:MM:SS", new Date(data.onceStartTime)),
          onceEndTime: dateFormat("YY-mm-dd HH:MM:SS", new Date(data.onceEndTime)),
          responseTime: (data.endTime - data.startTime).toFixed(2),
        }
      })

      // 计算各种成绩和准确率
      const {
          prospectiveTaskScore,
          prospectiveTaskCount,
          prospectiveTaskRight,
          mainTaskDirectionScore,
          mainTaskDirectionCount,
          mainTaskDirectionRight,
          mainTaskMissileScore,
          mainTaskMissileCount,
          mainTaskMissileRight
      } = result.reduce((obj, task) => {
        if (task.taskType === '1') {
          if (task.mainTaskDirectionCorrection === '1') {
            obj.mainTaskDirectionScore++
            obj.mainTaskDirectionRight++
          }
          obj.mainTaskDirectionCount++
          if (task.mainTaskDirectionCorrection === '1') {
            obj.mainTaskMissileScore++
            obj.mainTaskMissileRight++
          }
          obj.mainTaskMissileCount++
        } else {
          if (task.prospectiveTaskCorrection === '1') {
            obj.prospectiveTaskScore++
            obj.prospectiveTaskRight++
          }
          obj.prospectiveTaskCount++
        }
        return obj
      }, {
        prospectiveTaskScore: 0, // 前瞻性任务成绩
        prospectiveTaskCount: 0, // 前瞻性任务数量
        prospectiveTaskRight: 0, // 前瞻性任务正确数量

        mainTaskDirectionScore: 0, // 主任务方向选择成绩
        mainTaskDirectionCount: 0, // 主任务方向选择数量
        mainTaskDirectionRight: 0, // 主任务方向选择正确数量

        mainTaskMissileScore: 0, // 主任务子弹选择成绩
        mainTaskMissileCount: 0, // 主任务子弹选择数量
        mainTaskMissileRight: 0, // 主任务子弹选择正确数量
      })

      const prospectiveTaskAccuracy = (prospectiveTaskRight / prospectiveTaskCount).toFixed(4)
      const mainTaskDirectionAccuracy = (mainTaskDirectionRight / mainTaskDirectionCount).toFixed(4)
      const mainTaskMissileAccuracy = (mainTaskMissileRight / mainTaskMissileCount).toFixed(4)

      this.taskEndTime = Date.now()
      console.log('xxx前瞻性记忆任务：', this.taskEndTime - this.taskStartTime + 'ms');

      const data = {
        userId: this.userId,
        testPlanId: this.$route.query.testPlanId || '',
        prospectiveTaskScore, // 前瞻性任务成绩
        prospectiveTaskAccuracy, // 前瞻性任务平均准确率
        mainTaskDirectionScore, // 主任务方向选择成绩
        mainTaskDirectionAccuracy, // 主任务方向选择平均准确率
        mainTaskMissileScore, // 主任务子弹选择成绩
        mainTaskMissileAccuracy, //  主任务子弹选择准确率
        result,
        taskStartTime: dateFormat("YY-mm-dd HH:MM:SS", new Date(this.taskStartTime)),
        taskEndTime: dateFormat("YY-mm-dd HH:MM:SS", new Date(this.taskEndTime)),
      }

      console.log(' ------ 前瞻性任务提交数据：', data)
      console.log(' ------ 前瞻性任务提交数据：', data.result.filter(item => item.taskType === '1').length)

      if (
          sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") === "" ||
          sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == null
      ) {
        alert("请先登录！");
        return;
      } else {
        this.$http.post("/cognize/ProspectiveMemory", data, (res) => {
          console.log(res)
          if (parseInt(res.code) === 200) {
            this.$message({
              message: "数据提交成功",
              type: "success",
            });
            if(res.data && res.data != null){
              //跳转测试结果页
              this.goTestResult(res.data);
            }else {
              //跳转列表选择页
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          } else {
            this.$message({
              message: "服务器内部故障，请联系管理员",
              type: "error",
            });
          }
          // 退出游戏
          this.running = false
          // 退出全屏
          this.screen()
          // 发送数据之后，清理数据
          this.collectedDataArray = []
          this.maps.forEach(map => map.count = 0)
        });
      }

    },
    onKeyDown(e) {
      if (this.disabled) {
        console.log('注视点时长内不响应任何按键')
        return
      } // 注视点时长内不响应任何按键
      this.disabled = true
      if (this.collectedDataArray[this.currentIndex].taskType === '1') {
        // 主任务
        console.log('主任务')

        // 先选择方向
        if (this.collectedDataArray[this.currentIndex].mainTaskDirectionActualResponse === '') {
          // 主任务方向的实际反应

          // 记录主任务的方向选择按键
          this.collectedDataArray[this.currentIndex].mainTaskDirectionActualResponse = e.code
          // 记录主任务的方向选择反应时间
          this.collectedDataArray[this.currentIndex].mainTaskDirectionEndTime = performance.now()
          // 记录主任务的方向选择按键
          this.collectedDataArray[this.currentIndex].mainTaskDirectionReactionTime = (this.collectedDataArray[this.currentIndex].mainTaskDirectionEndTime - this.collectedDataArray[this.currentIndex].mainTaskDirectionStartTime).toFixed(2)

          // 判断主任务方向反应是否正确 ‘1’：正确  '0':错误
          if (this.collectedDataArray[this.currentIndex].mainTaskDirectionActualResponse === this.collectedDataArray[this.currentIndex].mainTaskDirectionCorrectionResponse) {
            this.collectedDataArray[this.currentIndex].mainTaskDirectionCorrection = '1'
            console.log('方向选择正确')
            if (this.practiceFlag) {
              this.$message({
                message: '方向反应正确',
                type: 'success',
              })
            }
            this.disabled = false
          } else {
            this.collectedDataArray[this.currentIndex].mainTaskDirectionCorrection = '0'
            if (e.code === 'Space') {
              console.log('主任务不可以点击空格键')
              if (this.practiceFlag) {
                this.$message({
                  message: '方向反应错误，主任务不可以点击空格键',
                  type: 'error',
                })
              }
              this.collectedDataArray[this.currentIndex].mainTaskMissileCorrection = '0'

              this.collectedDataArray[this.currentIndex].endTime = performance.now() // 记录本局结束时间
              this.collectedDataArray[this.currentIndex].onceEndTime = Date.now() // 记录本试次结束时间

              setTimeout(() => {
                this.disabled = false
                this.showPic = false
                // 本次主任务结束，进入下一次
                this.currentIndex++
                this.next()
              }, 500)
            } else {
              this.disabled = false
              console.log('方向反应错误')
              if (this.practiceFlag) {
                this.$message({
                  message: '方向反应错误',
                  type: 'error',
                })
              }
            }
          }
        } else {
          // 如果方向键已经选择过，说明本次按键是为了选择武器挂载的
          // 主任务挂载的实际反应
          if (this.collectedDataArray[this.currentIndex].mainTaskMissileActualResponse === '') {
            // 记录主任务的武器选择按键
            this.collectedDataArray[this.currentIndex].mainTaskMissileActualResponse = e.code
            // 记录主任务的武器选择反应时间
            this.collectedDataArray[this.currentIndex].mainTaskMissileEndTime = performance.now()
            // 记录主任务的武器选择按键
            this.collectedDataArray[this.currentIndex].mainTaskMissileReactionTime = (this.collectedDataArray[this.currentIndex].mainTaskMissileEndTime - this.collectedDataArray[this.currentIndex].mainTaskMissileStartTime).toFixed(2)

            // 判断主任务挂载反应是否正确 ‘1’：正确  '2':错误
            if (this.collectedDataArray[this.currentIndex].mainTaskMissileActualResponse === this.collectedDataArray[this.currentIndex].mainTaskMissileCorrectionResponse) {
              this.collectedDataArray[this.currentIndex].mainTaskMissileCorrection = '1'
              console.log('武器选择正确')
              if (this.practiceFlag) {
                this.$message({
                  message: '挂载反应正确',
                  type: 'success',
                })
              }
            } else {
              this.collectedDataArray[this.currentIndex].mainTaskMissileCorrection = '0'
              console.log('武器选择错误')
              if (this.practiceFlag) {
                this.$message({
                  message: e.code === 'Space' ? '挂载反应错误，主任务不可以点击空格键' : '挂载反应错误',
                  type: 'error',
                })
              }
            }
          } else {
            console.log('按键错误')
          }

          this.collectedDataArray[this.currentIndex].endTime = performance.now() // 记录本局结束时间
          this.collectedDataArray[this.currentIndex].onceEndTime = Date.now() // 记录本试次结束时间

          setTimeout(() => {
            this.disabled = false
            this.showPic = false
            // 本次主任务结束，进入下一次
            this.currentIndex++
            this.next()
          }, 500)
        }
      } else {
        // 前瞻性记忆任务
        console.log('前瞻性记忆任务')
        // 前瞻性记忆任务的实际反应
        if (this.collectedDataArray[this.currentIndex].prospectiveTaskActualResponse === '') {
          // 前瞻性记忆任务选择按键
          this.collectedDataArray[this.currentIndex].prospectiveTaskActualResponse = e.code
          // 前瞻性记忆任务结束时间
          this.collectedDataArray[this.currentIndex].prospectiveTaskEndTime = performance.now()
          // 前瞻性记忆任务反应时间
          this.collectedDataArray[this.currentIndex].prospectiveTaskReactionTime = (this.collectedDataArray[this.currentIndex].prospectiveTaskEndTime - this.collectedDataArray[this.currentIndex].prospectiveTaskStartTime).toFixed(2)

          // 判断主任务挂载反应是否正确 ‘1’：正确  '2':错误
          if (this.collectedDataArray[this.currentIndex].prospectiveTaskActualResponse === this.collectedDataArray[this.currentIndex].prospectiveTaskCorrectionResponse) {
            this.collectedDataArray[this.currentIndex].prospectiveTaskCorrection = '1'
            console.log('前瞻性记忆任务选择正确')
            if (this.practiceFlag) {
              this.$message({
                message: '前瞻性记忆任务反应正确',
                type: 'success',
              })
            }
          } else {
            this.collectedDataArray[this.currentIndex].prospectiveTaskCorrection = '0'
            console.log('前瞻性记忆任务选择错误')
            if (this.practiceFlag) {
              this.$message({
                message: '前瞻性记忆任务反应错误',
                type: 'error',
              })
            }
          }

          this.collectedDataArray[this.currentIndex].endTime = performance.now() // 记录本局结束时间
          this.collectedDataArray[this.currentIndex].onceEndTime = Date.now() // 记录本试次结束时间

          setTimeout(() => {
            this.disabled = false
            this.showPic = false
            // 本次前瞻性记忆任务结束，进入下一次
            this.currentIndex++
            this.next()
          }, 500)
        } else {
          this.disabled = false
          this.showPic = false
          // 本次前瞻性记忆任务结束，进入下一次
          this.currentIndex++
          this.next()
        }
      }
    }
  },
  mounted() {
    window.addEventListener('keydown', this.onKeyDown)
  },
  destroyed() {
    window.removeEventListener('keydown', this.onKeyDown)
  }
}
</script>

<style lang="scss" scoped>

$sizeModifier: 2.1;

.bTitle {
  font-size: 24px;
  color: #333333;
  text-align: left;
  text-indent: 20px;
}

#t1 {
  font-size: 18px;
  height: 36px;
  line-height: 36px;
  background: rgba(0, 0, 0, 0.39);
  border-radius: 24px;
  color: #ffffff;
  margin-left: 240px;
  text-align: center;
}

.pd-r16 {
  padding-top: 8px;
  padding-right: 16px;
}

#body2 {
  margin-top: 65px;
}
.item {
  width: 200px;
  height: 210px;
  margin-top: 20px;
  margin-right: 10px;
  float: left;
}

.el-image {
  width: 100%;
  height: 100%;
}
.btn {
  margin-top: 60px;
  margin-left: -10%;
}
.pbg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
}
.mainbody {
  height: 550px;
  width: 500px;
  border: 2px solid black;
  border-radius: 12px;
  background: #ffffff;
}

/*居中效果*/
.middle {
  /*使左上角对应到父元素的中心*/

  top: 50%;
  left: 50%;
  position: absolute;
  /*向左向上偏移50%*/
  transform: translate(-50%, -50%);
}
.activeTask {
  background: url(/static/flying/bg_game.png) no-repeat center;
  background-size: cover;
  /* background: black; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.activeTask3 {
  background: url(../../../assets/congnitiveAblitity/zhixing.png) no-repeat center;
  background-size: cover;
  /* background: black; */
  /* position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; */
}
.glass {
  width: 932px;
  height: 720px;
  background: rgba(255, 255, 255, 0.39);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);

  .opt-outline {
    width: 70%;
    height: 400px;
    border: solid;
    margin-left: 15%;
  }

  .opt-div {
    width: 50%;
    height: 400px;
    float: right;
    border-left: solid;
    justify-content: space-around;

    .start-bb {
      width: 120px;
      height: 42px;
      border: 2px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      opacity: 1;
      border-radius: 39px;
      color: white;
    }
  }
}
.opt-tips {
  font-size: 13px;
  text-align: left;
  text-indent: 2em;
}

#game {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  //border: 1px solid black;
  background-image: url("/static/flying/dashboard.png");
  background-repeat: no-repeat;
  background-size: 95% 90%;
  background-position: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
#missile {
  width: 359.5px * $sizeModifier;
  height: 359.5px * $sizeModifier;
}
#compass {
  width: 359.5px * $sizeModifier;
  height: 359.5px * $sizeModifier;
}

#tip {
  width: 809px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 800px;
  transform: translateX(-50%);
  background-color: #0abdc4;
}

#arrow {
  width: 32px;
  height: 32px;
}
</style>