|
|
@@ -0,0 +1,872 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <Header />
|
|
|
+ <div v-if="!running" class="main-container" style="padding-left: 1.5rem">
|
|
|
+ <van-nav-bar :title="subjectInfo.name" left-arrow @click-left="goBack" />
|
|
|
+
|
|
|
+ <div class="main-text-div">
|
|
|
+ {{
|
|
|
+ practiceFlag
|
|
|
+ ? "请先练习测试，练习完成后，即将正式测试。"
|
|
|
+ : "请开始正式测试！"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div class="start-btn">
|
|
|
+ <van-button
|
|
|
+ block
|
|
|
+ round
|
|
|
+ size="normal"
|
|
|
+ type="primary"
|
|
|
+ @click="startTest()"
|
|
|
+ >
|
|
|
+ {{ practiceFlag ? "开始练习" : "正式测试" }}
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="running" class="activeTask">
|
|
|
+ <van-progress
|
|
|
+ v-if="!practiceFlag"
|
|
|
+ :percentage="(currentIndex / collectedDataArray.length) * 100"
|
|
|
+ :show-pivot="false"
|
|
|
+ />
|
|
|
+ <div id="game" class="flex-row">
|
|
|
+ <img
|
|
|
+ v-if="showPic"
|
|
|
+ id="missile"
|
|
|
+ ref="missile"
|
|
|
+ :src="collectedDataArray[currentIndex].leftImg"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="showPic"
|
|
|
+ id="compass"
|
|
|
+ ref="compass"
|
|
|
+ :src="collectedDataArray[currentIndex].rightImg"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="button-area flex-row">
|
|
|
+ <img
|
|
|
+ v-for="(item, index) in imgJSON"
|
|
|
+ :key="item.src"
|
|
|
+ :class="{ active: item.active }"
|
|
|
+ :src="`${imgBaseUrl}static/flying/${item.src}.png`"
|
|
|
+ alt=""
|
|
|
+ class="button-item"
|
|
|
+ @click="keyDown({ code: item.code }, index)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="false" id="tip">
|
|
|
+ <img v-if="currentArrowImg" id="arrow" :src="currentArrowImg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { dateFormat } from "@/utils/utils";
|
|
|
+import Header from "@/components/header/index.vue";
|
|
|
+import { generateRandomRangeNumbers } from "../../utils/utils";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "prospectiveMemoryAbility",
|
|
|
+ components: { Header },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ subjectInfo: {}, //认知任务详情
|
|
|
+ userId: "",
|
|
|
+
|
|
|
+ imgJSON: [
|
|
|
+ { active: false, src: "key_left", code: "ArrowLeft" },
|
|
|
+ { active: false, src: "key_a", code: "KeyA" },
|
|
|
+ { active: false, src: "key_s", code: "KeyS" },
|
|
|
+ { active: false, src: "key_d", code: "KeyD" },
|
|
|
+ { active: false, src: "key_space", code: "Space" },
|
|
|
+ { active: false, src: "key_right", code: "ArrowRight" }
|
|
|
+ ],
|
|
|
+ imgBaseUrl: process.env.NODE_ENV === "production" ? "/h5/" : "/",
|
|
|
+
|
|
|
+ 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.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
|
|
|
+ this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"));
|
|
|
+
|
|
|
+ this.createData();
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ createData() {
|
|
|
+ this.pseudoRandomArray = this.pseudoRandomArray.map((item, index) => {
|
|
|
+ let newItem = {
|
|
|
+ id: 1,
|
|
|
+
|
|
|
+ leftImg: `${this.imgBaseUrl}static/flying/${item.missile}.png`,
|
|
|
+ rightImg: `${this.imgBaseUrl}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;
|
|
|
+ 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() {
|
|
|
+ console.log(
|
|
|
+ "currentIndex / collectedDataArray.length: ",
|
|
|
+ this.currentIndex / this.collectedDataArray.length
|
|
|
+ );
|
|
|
+ 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.collectedDataArray = []; // 清理数据
|
|
|
+ // 否则进入正式测试模式
|
|
|
+ this.practiceFlag = false; // 将练习标识改成 false，下次开始游戏时，则为正式测试
|
|
|
+ console.log(
|
|
|
+ "--------------------------------------------------===============================================--------------------------------"
|
|
|
+ );
|
|
|
+ } 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
|
|
|
+ );
|
|
|
+ this.$http.post("/cognize/ProspectiveMemory", data, res => {
|
|
|
+ console.log(res);
|
|
|
+ if (parseInt(res.code) === 200) {
|
|
|
+ this.$toast({
|
|
|
+ type: "success",
|
|
|
+ message: "数据提交成功",
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ if (res.data) {
|
|
|
+ //跳转测试结果页
|
|
|
+ this.goTestResult(res.data);
|
|
|
+ } else {
|
|
|
+ //跳转列表选择页
|
|
|
+ this.$toast({
|
|
|
+ type: "fail",
|
|
|
+ message: res.msg,
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$toast({
|
|
|
+ type: "fail",
|
|
|
+ message: "服务器内部故障，请联系管理员",
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 退出游戏
|
|
|
+ this.running = false;
|
|
|
+ // 发送数据之后，清理数据
|
|
|
+ this.collectedDataArray = [];
|
|
|
+ this.maps.forEach(map => (map.count = 0));
|
|
|
+ });
|
|
|
+ },
|
|
|
+ keyDown(e, index) {
|
|
|
+ if (this.disabled) {
|
|
|
+ console.log("注视点时长内不响应任何按键");
|
|
|
+ return;
|
|
|
+ } // 注视点时长内不响应任何按键
|
|
|
+ this.disabled = true;
|
|
|
+
|
|
|
+ this.imgJSON[index].active = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.imgJSON[index].active = false;
|
|
|
+ }, 200);
|
|
|
+
|
|
|
+ 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.$toast({
|
|
|
+ type: "success",
|
|
|
+ message: "方向反应正确",
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.disabled = false;
|
|
|
+ } else {
|
|
|
+ this.collectedDataArray[
|
|
|
+ this.currentIndex
|
|
|
+ ].mainTaskDirectionCorrection = "0";
|
|
|
+ if (e.code === "Space") {
|
|
|
+ console.log("主任务不可以点击空格键");
|
|
|
+ if (this.practiceFlag) {
|
|
|
+ this.$toast({
|
|
|
+ type: "fail",
|
|
|
+ message: "方向反应错误，主任务不可以点击空格键",
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ 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.$toast({
|
|
|
+ type: "fail",
|
|
|
+ message: "方向反应错误",
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } 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.$toast({
|
|
|
+ type: "success",
|
|
|
+ message: "挂载反应正确",
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.collectedDataArray[
|
|
|
+ this.currentIndex
|
|
|
+ ].mainTaskMissileCorrection = "0";
|
|
|
+ console.log("武器选择错误");
|
|
|
+ if (this.practiceFlag) {
|
|
|
+ this.$toast({
|
|
|
+ type: "fail",
|
|
|
+ message:
|
|
|
+ e.code === "Space"
|
|
|
+ ? "挂载反应错误，主任务不可以点击空格键"
|
|
|
+ : "挂载反应错误",
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } 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.$toast({
|
|
|
+ type: "success",
|
|
|
+ message: "前瞻性记忆任务反应正确",
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.collectedDataArray[
|
|
|
+ this.currentIndex
|
|
|
+ ].prospectiveTaskCorrection = "0";
|
|
|
+ console.log("前瞻性记忆任务选择错误");
|
|
|
+ if (this.practiceFlag) {
|
|
|
+ this.$toast({
|
|
|
+ type: "fail",
|
|
|
+ message: "前瞻性记忆任务反应错误",
|
|
|
+ className: "rotate-90-toast"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+ transform: rotate(90deg);
|
|
|
+ transform-origin: right top;
|
|
|
+ width: 100vh; /* 适应横屏的高度 */
|
|
|
+ height: 100vw; /* 适应横屏的宽度 */
|
|
|
+ overflow-x: hidden;
|
|
|
+ position: fixed;
|
|
|
+ top: 100%;
|
|
|
+ right: 0;
|
|
|
+
|
|
|
+ .main-container {
|
|
|
+ width: 90vh;
|
|
|
+ height: 100vw;
|
|
|
+
|
|
|
+ .start-btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .activeTask {
|
|
|
+ background: url(/static/flying/bg_game.png) no-repeat center;
|
|
|
+ background-size: cover;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ #game {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ //border: 1px solid black;
|
|
|
+ background-image: url(/static/flying/dashboard.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 94% 98%;
|
|
|
+ background-position: center;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-bottom: 1%;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 4%;
|
|
|
+ width: 34%;
|
|
|
+ height: 70%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 1%;
|
|
|
+ width: 278px;
|
|
|
+ height: 277px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-area {
|
|
|
+ width: 90%;
|
|
|
+ height: 40px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 5%;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .button-item {
|
|
|
+ width: 96px;
|
|
|
+ height: 36px;
|
|
|
+ display: block;
|
|
|
+ transition: all 0.12s linear;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ scale: 1.08;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#tip {
|
|
|
+ width: 809px;
|
|
|
+ height: 100px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 800px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background-color: #0abdc4;
|
|
|
+}
|
|
|
+
|
|
|
+#arrow {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.van-toast {
|
|
|
+ transform: rotate(90deg) translate(-50%, 50%) !important;
|
|
|
+}
|
|
|
+</style>
|
