psychological-competence/src/views/CognitiveAbilityTask/YATAI_attentionCheck.vue

<template>
  <div>
    <!-- LOGO  -->
    <div class="desc_wrap" v-show="!testResultStrShow">
      <div
        style="
          width: 70%;
          height: 100%;
          background: rgb(248, 248, 248);
          opacity: 1;
          border-radius: 12px;
          margin: 0 auto;
        "
      >
        <div class="left_part">
          <div id="left_top">
            <div>
              <div id="setting">
                <img src="../../assets/9551.png" alt="" />
              </div>
              <div id="text">
                <span>操作提示：</span>
              </div>
            </div>
          </div>
          <div style="margin: 100px auto; width: 80%; text-align: justify;text-justify: distribute-all-lines;">
            <p v-html="subjectInfo.testDescription"></p>
            <!-- <p>{{subjectInfo.description}}</p> -->
          </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: 30px; right: 20%">
            <el-button type="primary" class="start" v-if="buttonShow" @click="startTest()">{{
              buttonName
            }}</el-button>
            <el-button type="primary" class="start" v-if="buttonShow" @click="walkBack()"
              >去玩儿其他游戏</el-button
            >
            <!-- <el-button type="primary" class="start" @click="startTest()">{{
              buttonName
            }}</el-button> -->
          </div>
        </div>
      </div>
    </div>
    <div style="width: 650px; margin: 20px auto; line-height: 2">
      <!-- 20211126-cyh 为了不让学生们看到测试结果暂时注释 -->
      <!-- <p v-show="testResultStrShow" style="margin-top: 20%; font-size: 30px" class="txt-center">
        {{ testResultStr }}
      </p> -->
      <div v-show="testResultStrShow" class="txt-center">
        <p style="font-size: 16px; color: #666666; margin: 40px 0 10px">
          本游戏结束，点击更多游戏按钮查看更多游戏
        </p>
        <el-button
          class="scaleButto"
          style="margin-top: 60px"
          type="primary"
          @click="moreGame"
          >更多游戏</el-button
        >
      </div>
    </div>

    <!-- <h1 class="txt-center">
      {{ subjectInfo.name }}
    </h1>
    <div style="width: 650px; margin: 20px auto; line-height: 2">
      <p
        style="text-align: left; text-indent: 2em"
        v-html="subjectInfo.testDescription"
      >
      </p>
      <div class="txt-center" v-show="testResultStr">
        <p style="font-size: 16px; color: #666666; margin: 40px 0 10px">
          本游戏结束，点击更多游戏按钮查看更多游戏
        </p>
        <el-button
          class="scaleButto"
          style="margin-top: 60px"
          type="primary"
          @click="moreGame"
          >更多游戏</el-button
        >
      </div>
    </div> -->
    <!-- <div class="txt-center" v-show="testResultStr">
      <p style="font-size: 16px; color: #666666; margin: 40px 0 10px">
        本游戏结束，点击更多游戏按钮查看更多游戏
      </p>
      <el-button
        class="scaleButto"
        style="margin-top: 60px"
        type="primary"
        @click="moreGame"
        >更多游戏</el-button
      >
    </div> -->
    <div
      class="txt-center"
      v-if="testFlag"
      :class="{ testMainDiv: !testFlag, activeTask: testFlag }"
      @click.left="userClick('L')"
      @click.right="userClick('R')"
      @contextmenu.prevent=""
    >
      <div
        :class="{ aa: testTypeCode !== 1 }"
        style="width: 50%; margin-left: 10%; margin-top: 24px"
      >
        <el-progress
          class="main_progress"
          :text-inside="true"
          :format="format"
          :stroke-width="24"
          :percentage="(count / 145) * 100"
        ></el-progress>
      </div>
      <img
        @click="screenState()"
        src="../../assets/small-big.png"
        alt=""
        style="
          height: 48px;
          width: 48px;
          position: fixed;
          top: 24px;
          right: 22px;
          cursor: pointer;
        "
      />

      <div class="glass">
        <div class="glassPad">
          <p v-show="countDownShow" class="countdownStr">
            {{ countDownStr }}
          </p>
          <p
            v-show="!countDownShow"
            style="
              font-size: 20px;
              text-align: center;
              margin-bottom: 40px;
              height: 50px;
              line-height: 50px;
            "
            v-html="pic3_0"
          ></p>
          <p
            v-show="pic3_1 !== '+' && !countDownShow"
            style="font-size: 30px; height: 50px; line-height: 50px"
          >
            ✱
          </p>
          <p
            v-show="pic3_1 == '+' && !countDownShow"
            style="font-size: 30px; height: 50px; line-height: 50px"
          >
            <img
              src="../../assets/congnitiveAblitity/whiteFlag-new.png"
              alt=""
              style="width: 71px; height: 71px"
            />
          </p>

          <p
            v-show="!countDownShow"
            style="
              font-size: 20px;
              text-align: center;
              margin-top: 40px;
              height: 50px;
              line-height: 50px;
            "
            v-html="pic3_2"
          ></p>
        </div>
        <div
          class="correctRate"
          v-show="crIsShow && testTypeCode != 1"
          style="font-size: 22px; color: blue"
        >
          <p v-show="hasResponse && perIsTrue" style="color: blue">
            正确率：{{ this.correctRate.toFixed(2) }}%，本次正确，反应时间：{{
              this.responseTime
            }}s
          </p>
          <p v-show="hasResponse && !perIsTrue" style="color: red">
            正确率：{{ this.correctRate.toFixed(2) }}%，本次错误，反应时间：{{
              this.responseTime
            }}s
          </p>
          <p v-show="!hasResponse" style="color: red">
            正确率：{{ this.correctRate.toFixed(2) }}%，{{ this.responseTime }}
          </p>
        </div>
      </div>
    </div>

    <!-- <div style="text-align: center">
      <el-button
        class="scaleButton"
        type="primary"
        v-if="buttonShow"
        @click="startTest()"
        >{{ buttonName }}</el-button
      >
      <el-button
        class="scaleButton"
        type="primary"
        v-if="buttonShow"
        @click="walkBack()"
        >去玩儿其他游戏</el-button
      >
    </div> -->
  </div>
</template>
<script>
import { arrowList } from "@/assets/data/attentionCheckData.js";
import { oSessionStorage } from "../../utils/utils";
import screenfull from "screenfull";
export default {
  data() {
    return {
      userId: "",
      userTestResult: {},
      imgUrl: "",
      taskId: "", // 认知任务id
      subjectInfo: "", //认知任务详情
      buttonShow: true, // 控制按钮显示吟唱
      buttonName: "试玩一下", // 正式测试  // 重新练习
      testTypeCode: 0, // 0-练习测试 1-正式测试 2-重新测试
      testState: false, // 每个图片的测试状态，false表示测试结束、不在测试，true表示正在测试
      testFlag: false, // false表示未开始测试，true表示开始测试
      testResultStr: "", // 测试结果
      testResultStrShow: false, //测试结果展示
      currentAnswer: "", // 当前图片对应的是左键还是右键
      currentType: "", // 当前展示的类型，0，1，2，3，4（上、下、中、上下，无提示）
      numTrue: 0, // 点击正确的个数
      numAll: 0, // 全部点击次数
      isEnd: false, // 每一轮的测试（如测试练习阶段）是否结束
      startT: 0, // 开始显示图片的时间
      endT: 0, // 点击鼠标的时间
      st: 0, // 每轮测试开始的时间
      et: 0, // 当前时间
      // ft-ptimer4为定时器
      ft: null,
      ft1: null,
      ft2: null,
      ft3: null,
      ft4: null,
      ptimer: null,
      ptimer1: null,
      ptimer2: null,
      ptimer3: null,
      ptimer4: null,
      practiceTime: 120000, // 测试练习阶段的总时间，单位ms，2分钟
      formalTime: 300000, // 正式练习的时间，每轮5分钟，共2轮
      timePlus: 100, // 显示+号的时间
      timeCue: 150, // 显示*号提示的时间，标志版
      timeCueQuick: 50, // 显示*号提示的时间，快速版
      timeArrow: 1150, // 显示箭头的最长时间
      timeResult: 1000, // 测试练习时显示结果的时间
      correctRate: 0, // 正确率
      responseTime: 0, // 反应时间
      hasResponse: true, // 是否有反应
      perIsTrue: false, // 本次点击是否正确
      crIsShow: false, // 正确率和反应时间是否显示
      restTime: 10000, // 正式测试时每个阶段之间的休息时间
      phase: 0, // 正式测试的第几轮，共有3轮，每轮5分钟
      rnum: 0, // 标志提示的类型
      pic3_0: "", // 垂直显示的3张图片的第1张
      pic3_1: "", // 垂直显示的3张图片的第2张
      pic3_2: "", // 垂直显示的3张图片的第3张

      arrPos: 0, // 数组下标
      arr: null, // 随机排序后的数组
      CONSTANT_24: 12,
      CONSTANT_48: 48,
      pcount: 0, // 练习测试的次数
      fcount: 0, // 正式测试的次数
      count: 1,
      countDownTime: 0, //开始前的倒计时
      countDownStr: "试玩一下！",
      countDownShow: false,
      result: {
        userId: 0,
        rightRate: 0,
        totalResponseTime: 0,
        data: [],
        result: {},
      }, // 存放正式测试的结果
      d: {
        index: null,
        type: null,
        currentDir: null,
        userClickDir: null,
        consistency: -1,
        responseTime: 0,
      }, // 存放每次操作的结果（正式测试阶段）
      totalResponseTime: 0, // 总反应时间
    };
  },
  // 页面初始化函数
  created() {
    this.taskId = this.$route.query.taskId;
    this.init();
  },
  mounted() {
    var that = this;
    // screenfull.toggle();
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key === 122) {
        e.preventDefault();
        screenfull.toggle();
      }
    };
  },
  methods: {
    screenState() {
      if (screenfull.isFullscreen) {
        //处于全屏状态
        screenfull.exit();
        //处于全屏状态则取消全屏状态
      } else {
        //不处于全屏状态
        screenfull.toggle();
        //不处于全屏状态则进入全屏状态
      }
    },
    // 初始化
    init() {
      this.subjectInfo = JSON.parse(oSessionStorage.getItem("subjectInfo"));
    },
    // 用户点击鼠标左键和右键
    userClick(clickFlag) {
      if (!this.testState || this.isEnd) {
        return;
      }
      this.perIsTrue = false;
      // 点击左键
      if (clickFlag === "L") {
        if (this.currentAnswer === "L") {
          this.numTrue++;
          this.d.index = this.numAll;
          this.d.type = this.currentType;
          this.d.currentDir = "L";
          this.d.userClickDir = "L";
          this.perIsTrue = true;
        } else {
          this.d.index = this.numAll;
          this.d.type = this.currentType;
          this.d.currentDir = "R";
          this.d.userClickDir = "L";
        }
        this.clickMouseLater();
      }
      // 点击右键
      else if (clickFlag === "R") {
        if (this.currentAnswer === "R") {
          this.numTrue++;
          this.d.index = this.numAll;
          this.d.type = this.currentType;
          this.d.currentDir = "R";
          this.d.userClickDir = "R";
          this.perIsTrue = true;
        } else {
          this.d.index = this.numAll;
          this.d.type = this.currentType;
          this.d.currentDir = "L";
          this.d.userClickDir = "R";
        }
        this.clickMouseLater();
      }
    },
    // 每次鼠标点完的操作
    format(percentage) {
      return percentage == 100 ? "游戏已完成" : "游戏进度";
    },
    clickMouseLater() {
      this.endT = new Date().getTime();
      this.correctRate = (this.numTrue / this.numAll).toFixed(2) * 100;
      this.responseTime = (this.endT - this.startT) / 1000;
      this.d.responseTime = this.endT - this.startT;
      this.totalResponseTime += this.endT - this.startT;
      this.hasResponse = true;
      clearTimeout(this.ptimer1);
      clearTimeout(this.ptimer2);
      clearTimeout(this.ptimer3);
      this.testState = false;
      this.rnum = 0;
      this.startT = 0;
      this.endT = 0;
      if (this.testTypeCode === 0 || this.testTypeCode === 2) {
        this.pcount--;
        this.pic3_0 = "&#160";
        this.pic3_1 = "+";

        this.pic3_2 = "&#160";

        // 如果是练习测试阶段，则显示每次操作的结果
        this.crIsShow = true;
        this.ptimer4 = setTimeout(() => {
          this.crIsShow = false;
          this.handlePerPic(
            this.timePlus,
            this.timeCue,
            this.timeCueQuick,
            this.timeArrow,
            this.practiceTime
          );
        }, this.timeResult);
        return;
      } else {
        // 正式练习阶段
        this.fcount--;
        if (this.testTypeCode == 1) {
          this.count++;
        }
        console.log("count:" + this.count);
        this.result.data.push(this.d);
        this.d = {
          index: null,
          type: null,
          currentDir: null,
          userClickDir: null,
          responseTime: 0,
        };
        this.pic3_0 = "&#160";
        this.pic3_1 = "+";

        this.pic3_2 = "&#160";
        // 400ms到1600ms
        var randomtime = Math.random() * (1600 - 400 + 1) + 400;
        this.ptimer4 = setTimeout(() => {
          this.handlePerPic(
            this.timePlus,
            this.timeCue,
            this.timeCueQuick,
            this.timeArrow,
            this.formalTime
          );
          clearTimeout(this.ptimer4);
        }, randomtime);
      }
    },
    screen() {
      screenfull.request();
    },
    screenExit() {
      screenfull.exit();
    },
    // 开始测试
    startTest() {
      if (
        sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == "" ||
        sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == null
      ) {
        this.$message.error("请先登录！");
        return;
      }

      this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f");
      // 开始测试
      this.testFlag = true;
      this.isEnd = false;
      this.pcount = this.CONSTANT_24;
      this.fcount = this.CONSTANT_48;
      // 如果是测试练习或重新测试
      if (this.testTypeCode === 0 || this.testTypeCode === 2) {
        this.arrPos = 0;
        this.arr = this.shuffle(arrowList);
        this.handlePractisePhase();
      }
      // 如果是正式测试
      else if (this.testTypeCode === 1) {
        this.numTrue = 0;
        this.numAll = 0;
        this.arrPos = 0;
        this.arr = this.shuffle(arrowList);
        //开始正式测试
        this.handleFormalPhase();
      }
    },
    // 练习测试的处理
    handlePractisePhase() {
      this.st = new Date().getTime();
      this.screen();
      // 本轮测试共pcount次
      this.handlePerPic(
        this.timePlus,
        this.timeCue,
        this.timeCueQuick,
        this.timeArrow,
        this.practiceTime
      );
    },
    // 正式测试的处理，phase(int型)表示第几阶段
    handleFormalPhase() {
      //console.log("类型：", this.testTypeCode, "rest:", this.restTime);
      // console.log("开始第1轮测试.");
      this.st = new Date().getTime();
      this.screen();
      this.handlePerPic(
        this.timePlus,
        this.timeCue,
        this.timeCueQuick,
        this.timeArrow,
        this.formalTime
      );
    },
    // 每个箭头图片的处理，timePlus：+号的显示时间;timeCue：*号正常的提示时间;timeCueQuick: *号快速的提示时间
    // timeArrow：箭头的提示时间；timePhase为每一阶段测试的总时间
    // 默认：timePlus:0.5s timeCue:1s timeCueQuick:0.5 timeArrow:1s 每个周期总时间为3s
    handlePerPic(timePlus, timeCue, timeCueQuick, timeArrow, timePhase) {
      this.et = new Date().getTime();
      //console.log(this.numAll + 1, '：', (this.et - this.st) / 1000);
      // 练习测试
      //当刚进来的时候是阶段是0
      //打开然后阶段加1
      //倒计时5秒然后再重新调用该方法
      if (this.phase === 0) {
        this.phase += 1;
        this.countDownShow = true;
        this.countDownTime = 6;
        let myInterval = setInterval(() => {
          this.countDownTime--;
          this.countDownStr = this.countDownTime;
          if (this.countDownTime == 0) {
            this.countDownShow = false;
            //console.log("开始第2轮测试.");
            this.arrPos = 0;
            this.arr = this.shuffle(arrowList);
            this.fcount = this.CONSTANT_48;
            //this.countDown();
            this.st = new Date().getTime();
            this.handlePerPic(
              this.timePlus,
              this.timeCue,
              this.timeCueQuick,
              this.timeArrow,
              this.formalTime
            );
            clearInterval(myInterval);
            this.countDownTime = this.restTime / 1000;
          }
        }, 1000);
        return;
        //倒计时5秒
      }

      // 练习测试
      if (
        this.pcount == 0 &&
        (this.testTypeCode === 0 || this.testTypeCode === 2)
      ) {
        this.phase = 0;
        // 如果这是最后一轮，则直接结束
        //console.log("结束练习测试.");
        this.isEnd = true;
        this.pic3_0 = "&#160";
        this.pic3_1 = "&#160";
        this.pic3_2 = "&#160";
        this.practiseEndHandle();
        clearTimeout(this.ptimer1);
        clearTimeout(this.ptimer2);
        clearTimeout(this.ptimer3);
        return;
      }
      // 正式测试
      if (this.fcount == 0 && this.testTypeCode === 1) {
        // 新一轮的开始时间
        // this.st = new Date().getTime();
        //console.log("结束第", this.phase, "轮测试.");
        this.countDownShow = true;
        // this.countDownStr = "第" + this.phase + "轮已结束！";
        this.countDownStr = "休息一下";
        this.pic3_0 = "&#160";
        this.pic3_1 = "&#160";
        this.pic3_2 = "&#160";
        clearTimeout(this.ptimer1);
        clearTimeout(this.ptimer2);
        clearTimeout(this.ptimer3);
        this.phase++;
        // 开始正式阶段的第二轮测试
        if (this.phase === 2) {
          // 显示倒计时
          //console.log("开始第2轮测试倒计时");
          this.countDownShow = true;
          this.countDownTime = this.restTime / 1000;
          let myInterval = setInterval(() => {
            this.countDownTime--;
            this.countDownStr = this.countDownTime;
            if (this.countDownTime == 0) {
              this.countDownShow = false;
              //console.log("开始第2轮测试.");
              this.arrPos = 0;
              this.arr = this.shuffle(arrowList);
              this.fcount = this.CONSTANT_48;
              //this.countDown();
              this.st = new Date().getTime();
              this.handlePerPic(
                this.timePlus,
                this.timeCue,
                this.timeCueQuick,
                this.timeArrow,
                this.formalTime
              );
              clearInterval(myInterval);
              this.countDownTime = this.restTime / 1000;
            }
          }, 1000);
          return;
        } else if (this.phase == 3) {
          // 显示倒计时
          //console.log("开始第3轮测试倒计时");
          this.countDownShow = true;
          this.countDownTime = this.restTime / 1000;
          let myInterval = setInterval(() => {
            this.countDownTime--;
            this.countDownStr = this.countDownTime;
            if (this.countDownTime == 0) {
              this.countDownShow = false;
              //console.log("开始第3轮测试.");
              this.arrPos = 0;
              this.arr = this.shuffle(arrowList);
              this.fcount = this.CONSTANT_48;
              this.st = new Date().getTime();
              this.handlePerPic(
                this.timePlus,
                this.timeCue,
                this.timeCueQuick,
                this.timeArrow,
                this.formalTime
              );
              clearInterval(myInterval);
              this.countDownTime = this.restTime / 1000;
            }
          }, 1000);
          return;
        } else if (this.phase === 4) {
          //console.log("sucessfully end.");
          // 正式测试结束
          this.isEnd = true;
          this.testFlag = false;
          this.testState = false;
          // this.$router.go(-1);
          //this.picList = [];
          this.correctRate = (this.numTrue / this.numAll).toFixed(2) * 100;
          //console.log("data:"+this.result.data)
          var resData = this.computeData(this.result.data);
          this.result.result = resData;
          this.testResultStr =
            "总正确率：" +
            this.correctRate +
            "%, 总次数: " +
            this.numAll +
            ", 正确次数: " +
            this.numTrue;

          this.numAll = 0;
          this.numTrue = 0;
          this.buttonShow = false;
          this.result.userId = this.userId;
          this.result.rightRate = this.correctRate;
          //this.result.totalResponseTime = this.totalResponseTime;
          this.result.totalResponseTime = this.result.result.responseTimeAll;
          this.result.testPlanId = this.$route.query.testPlanId || "";
          //console.log("res: ", this.result);
          // 将结果传给服务器
          //      //20211126-cyh
          //为了不让学生们看到测试结果暂时注释
          //
          this.testResultStrShow = true;
          this.$http.post(
            `cognize/ANT_YATAI`,
            this.result,
            (response) => {
              if (response.code == 200) {
                this.$message({
                  message: "游戏结束！",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "哇哦，服务器开小差了！",
                  type: "error",
                });
              }
              this.subjectInfo.testDescription = "";
            }
          );
          //
          //
          return;
        }
        this.fcount = 4;
      }
      // 每一个阶段测试的图片的次数加1
      this.numAll++;
      // 设置当前箭头为白色
      // 屏幕中先显示+号
      this.pic3_0 = "&#160";
      this.pic3_1 = "+";

      this.pic3_2 = "&#160";
      // 随机产生提示(1-4之间)
      // 1*出现表示上方，2表示下方，3表示中央，4表示上下都出现，5表示不出现
      this.rnum = parseInt(Math.random() * (5 - 1 + 1) + 1);
      // [0, 47]
      //let arrowIndex = parseInt(Math.random() * (47 - 0 + 1) + 0);
      let arrowIndex = this.arr[this.arrPos].id;
      this.arrPos++;

      this.currentConsistency = arrowList[arrowIndex].consistency;
      this.d.consistency = arrowList[arrowIndex].consistency;
      if (arrowIndex >= 0 && arrowIndex <= 11) {
        // 没有*出现
        timePlus = 0;
        this.currentType = 4;
      } else {
        // timePlus时间后显示*
        this.ptimer1 = setTimeout(() => {
          // 设置提示

          if (arrowList[arrowIndex].cue == "up") {
            // 上方
            this.pic3_0 = "✱";
            this.pic3_1 = "+";

            this.pic3_2 = "&#160";
            this.currentType = 0;
          } else if (arrowList[arrowIndex].cue == "down") {
            // 下方
            this.pic3_0 = "&#160";
            this.pic3_1 = "+";

            this.pic3_2 = "✱";
            this.currentType = 1;
          } else if (arrowList[arrowIndex].cue == "center") {
            // 中央
            this.pic3_0 = "&#160";
            this.pic3_1 = "✱";
            this.pic3_2 = "&#160";
            this.currentType = 2;
          } else if (arrowList[arrowIndex].cue == "double") {
            // 上下方
            this.pic3_0 = "✱";
            this.pic3_1 = "+";

            this.pic3_2 = "✱";
            this.currentType = 3;
          }
          clearTimeout(this.ptimer1);
        }, timePlus);
      }

      // 提示出现的时间
      let _timeCue = timeCue;
      let _px = setTimeout(() => {
        // *显示完后400ms不显示东西
        this.pic3_0 = "&#160";
        this.pic3_1 = "+";

        this.pic3_2 = "&#160";
      }, timePlus + _timeCue);
      // 设置箭头，如果rnum=3或4则提示之后马上(0.05s后)显示箭头
      // if (this.rnum === 3 || this.rnum === 4) {
      //   _timeCue = 50;
      // }

      // timePlus + timeCue + 400ms后显示箭头
      this.ptimer2 = setTimeout(() => {
        // 设置箭头
        if (arrowList[arrowIndex].position == "up") {
          // 上方
          this.pic3_0 = `<span style='font-size:40px;'>${arrowList[arrowIndex].arrow}</span>`;
          this.pic3_1 = "+";

          this.pic3_2 = "&#160";
        } else if (arrowList[arrowIndex].position == "down") {
          // 下方
          this.pic3_0 = "&#160";
          this.pic3_1 = "+";

          this.pic3_2 = `<span style='font-size:40px;'>${arrowList[arrowIndex].arrow}</span>`;
        }

        this.currentAnswer = arrowList[arrowIndex].answer;
        // 正在测试
        this.testState = true;
        this.startT = new Date().getTime();
        clearTimeout(this.ptimer2);
      }, timePlus + _timeCue + 400);
      // 在[timePlus+timeCue,timePlus+timeCue+timeArrow]之间如果没反应，则判错
      this.ptimer3 = setTimeout(() => {
        if (this.testState == true) {
          // 清除定时器
          clearTimeout(this.ptimer1);
          clearTimeout(this.ptimer2);
          clearTimeout(this.ptimer3);
          this.testState = false;

          this.rnum = 0;
          this.startT = 0;
          this.endT = 0;
          // 显示提示
          this.correctRate = (this.numTrue / this.numAll).toFixed(2) * 100;
          this.responseTime = "没有反应!";
          this.hasResponse = false;
          this.fcount--;
          if (this.testTypeCode == 1) {
            this.count++;
          }

          if (this.testTypeCode === 0 || this.testTypeCode === 2) {
            this.pic3_0 = "&#160";
            this.pic3_1 = "+";

            this.pic3_2 = "&#160";
            // 如果是练习测试阶段，则显示提示
            this.pcount--;
            this.crIsShow = true;
            this.ptimer4 = setTimeout(() => {
              this.crIsShow = false;
              this.handlePerPic(
                timePlus,
                timeCue,
                timeCueQuick,
                timeArrow,
                timePhase
              );
              clearTimeout(this.ptimer4);
            }, this.timeResult);
            return;
          }
          // 400ms到1600ms
          this.d.index = this.numAll;
          this.d.type = this.currentType;
          this.d.currentDir = this.currentAnswer;
          this.d.userClickDir = "";
          this.d.responseTime = this.timeArrow;
          this.totalResponseTime += this.timeArrow;
          //console.log("thisd:")
          //console.log(this.d)
          this.result.data.push(this.d);
          this.d = {
            index: null,
            type: null,
            currentDir: null,
            userClickDir: null,
            responseTime: 0,
          };
          var randomtime = Math.random() * (1600 - 400 + 1) + 400;
          this.ptimer4 = setTimeout(() => {
            this.handlePerPic(
              this.timePlus,
              this.timeCue,
              this.timeCueQuick,
              this.timeArrow,
              timePhase
            );
            clearTimeout(this.ptimer4);
          }, randomtime);
        }
      }, timePlus + _timeCue + timeArrow + 400);
    },
    countDown() {
      // 测试时间倒计时
      let myInterval = setInterval(() => {
        this.countDownTime--;
        this.countDownStr = this.countDownTime;
        if (this.countDownTime == 0) {
          this.countDownShow = false;
          //计算测试结果
          this.showTargetNow();
          // 清除定时器
          clearInterval(myInterval);
          this.countDownTime = 5;
        }
      }, 1000);
    },
    practiseEndHandle() {
      this.screenState();
      this.isEnd = true;
      this.testFlag = false;
      this.testState = false;
      this.correctRate = (this.numTrue / this.numAll).toFixed(2) * 100;
      //20211126-cyh
      //为了不让学生们看到测试结果暂时注释

      // this.testResultStr =
      //   "最后测试结果：" +
      //   this.correctRate +
      //   "%, 总次数: " +
      //   this.numAll +
      //   ", 正确次数: " +
      //   this.numTrue;
      if (this.correctRate < 45) {
        this.countDownStr = "试玩一下!";
        this.buttonName = "再试一下";
        this.numTrue = 0;
        this.numAll = 0;
        this.pcount = this.CONSTANT_24;

        this.$message({
          message: "没有通过练习游戏哦，加油！",
          type: "warning",
        });
        this.screenExit();
        this.testTypeCode = 2;
      } else {
        this.countDownStr = "马上开始!";
        this.buttonName = "开始游戏";
        this.testTypeCode = 1;
        this.$message({
          message: "试玩通过！开始游戏",
          type: "success",
        });
        this.screenExit();
      }
    },
    walkBack() {
      this.$router.push({ path: "/welcome/CognitiveAbility" });
    },
    // 实现数组随机排序
    shuffle(arr) {
      var len = arr.length;
      for (var i = 0; i < len; i++) {
        var a = parseInt(Math.random() * len);
        var temp = arr[a];
        arr[a] = arr[i];
        arr[i] = temp;
      }
      return arr;
    },
    // 计算正式测试的结果
    computeData(data) {
      //data = this.result.data;
      //命中次数：总命中次数、不同实验（一致性、不一致性）和不同线索下的命中次数
      // var hitsAll = 0;
      // var hitscongruent = 0;
      // var hitsincongruent = 0;
      // var hitsNoCue = 0;
      // var hitsNeutralCue = 0;
      // var hitsSpatialCue = 0;

      // var inhitscongruent = 0;
      // var inhitsincongruent = 0;
      // var inhitsNoCue = 0;
      // var inhitsNeutralCue = 0;
      // var inhitsSpatialCue = 0;
      // for (let i = 0; i < data.length; i++) {
      //   if (data[i].currentDir === data[i].userClickDir) {
      //     hitsAll++;
      //     if (data[i].consistency === 1) {
      //       hitscongruent++;
      //     } else if (data[i].consistency === 0) {
      //       hitsincongruent++;
      //     }

      //     if (data[i].type === 4) {
      //       hitsNoCue++;
      //     } else if (data[i].type === 2 || data[i].type === 3) {
      //       hitsNeutralCue++;
      //     } else if (data[i].type === 0 || data[i].type === 1) {
      //       hitsSpatialCue++;
      //     }
      //   } else {
      //     // 没有命中
      //     if (data[i].consistency === 1) {
      //       inhitscongruent++;
      //     } else if (data[i].consistency === 0) {
      //       inhitsincongruent++;
      //     }
      //     if (data[i].type === 4) {
      //       inhitsNoCue++;
      //     } else if (data[i].type === 2 || data[i].type === 3) {
      //       inhitsNeutralCue++;
      //     } else if (data[i].type === 0 || data[i].type === 1) {
      //       inhitsSpatialCue++;
      //     }
      //   }
      // }
      // //命中率：全部命中率：正确点击次数/全部点击次数
      // var hitRate = hitsAll / 144;
      // //命中率：不同实验（一致性、不一致性）和不同线索下的命中率
      // var congruentHitRate = hitscongruent / (hitscongruent + inhitscongruent);
      // var incongruentHitRate =
      //   hitsincongruent / (hitsincongruent + inhitsincongruent);

      // var noCueHitRate = hitsNoCue / (inhitsNoCue + hitsNoCue);
      // var neutralCueHitRate =
      //   hitsNeutralCue / (inhitsNeutralCue + hitsNeutralCue);
      // var spatialCueHitRate =
      //   hitsSpatialCue / (inhitsSpatialCue + hitsSpatialCue);

      // //RT:反应时
      // var responseTimeAll = 0;
      // //反应时以及不同实验（一致性、不一致性）和不同线索下的平均反应时
      // var responseTimeCongruent = 0;
      // var responseTimeIncongruent = 0;
      // var responseTimeNoCue = 0;
      // var responseTimeNeutralCue = 0;
      // var responseTimeSpatialCue = 0;
      // for (let i = 0; i < data.length; i++) {
      //   responseTimeAll += data[i].responseTime;
      //   if (data[i].consistency === 1) {
      //     responseTimeCongruent += data[i].responseTime;
      //   } else if (data[i].consistency === 0) {
      //     responseTimeIncongruent += data[i].responseTime;
      //   }

      //   if (data[i].type === 4) {
      //     responseTimeNoCue += data[i].responseTime;
      //   } else if (data[i].type === 2 || data[i].type === 3) {
      //     responseTimeNeutralCue += data[i].responseTime;
      //   } else if (data[i].type === 0 || data[i].type === 1) {
      //     responseTimeSpatialCue += data[i].responseTime;
      //   }
      // }
      // var avgresponseTimeCongruent =
      //   responseTimeCongruent / (hitscongruent + inhitscongruent);
      // var avgresponseTimeIncongruent =
      //   responseTimeIncongruent / (hitsincongruent + inhitscongruent);
      // var avgresponseTimeNoCue = responseTimeNoCue / (inhitsNoCue + hitsNoCue);
      // var avgresponseTimeNeutralCue =
      //   responseTimeNeutralCue / (inhitsNeutralCue + hitsNeutralCue);
      // var avgresponseTimeSpatialCue =
      //   responseTimeSpatialCue / (inhitsSpatialCue + hitsSpatialCue);
      // //警报分数（无刺激条件试验的反应时减去中性试验的反应时）
      // var warnScore = responseTimeNoCue - responseTimeNeutralCue;
      // //定向分数（中性试验的反应时减去空间条件下的反应时）
      // var directionScore = responseTimeNeutralCue - responseTimeSpatialCue;
      // //冲突分数（不一致试验的反应时减去一致试验的反应时）
      // var conflictScore = responseTimeIncongruent - responseTimeCongruent;
      //命中次数：总命中次数、不同实验（一致性、不一致性）和不同线索下的命中次数
      var hitsAll = 0;
      var hitscongruent = 0;
      var hitsincongruent = 0;
      var hitsNoCue = 0;
      var hitsNeutralCue = 0;
      var hitsSpatialCue = 0;

      var inhitscongruent = 0;
      var inhitsincongruent = 0;
      var inhitsNoCue = 0;
      var inhitsNeutralCue = 0;
      var inhitsSpatialCue = 0;
      for (let i = 0; i < data.length; i++) {
        if (data[i].currentDir === data[i].userClickDir) {
          hitsAll++;
          if (data[i].consistency === 1) {
            hitscongruent++;
          } else if (data[i].consistency === 0) {
            hitsincongruent++;
          }

          if (data[i].type === 3) {
            hitsNoCue++;
          } else if (data[i].type === 2) {
            hitsNeutralCue++;
          } else if (data[i].type === 0 || data[i].type === 1) {
            hitsSpatialCue++;
          }
        } else {
          // 没有命中
          if (data[i].consistency === 1) {
            inhitscongruent++;
          } else if (data[i].consistency === 0) {
            inhitsincongruent++;
          }
          if (data[i].type === 3) {
            inhitsNoCue++;
          } else if (data[i].type === 2) {
            inhitsNeutralCue++;
          } else if (data[i].type === 0 || data[i].type === 1) {
            inhitsSpatialCue++;
          }
        }
      }
      //命中率：全部命中率：正确点击次数/全部点击次数
      var hitRate = (hitsAll / 144).toFixed(2);
      //命中率：不同实验（一致性、不一致性）和不同线索下的命中率
      var congruentHitRate = (
        hitscongruent /
        (hitscongruent + inhitscongruent)
      ).toFixed(2);
      var incongruentHitRate = (
        hitsincongruent /
        (hitsincongruent + inhitsincongruent)
      ).toFixed(2);

      var noCueHitRate = (hitsNoCue / (inhitsNoCue + hitsNoCue)).toFixed(2);
      var neutralCueHitRate = (
        hitsNeutralCue /
        (inhitsNeutralCue + hitsNeutralCue)
      ).toFixed(2);
      var spatialCueHitRate = (
        hitsSpatialCue /
        (inhitsSpatialCue + hitsSpatialCue)
      ).toFixed(2);

      //RT:反应时
      var responseTimeAll = 0;
      //反应时以及不同实验（一致性、不一致性）和不同线索下的平均反应时
      var responseTimeCongruent = 0;
      var responseTimeIncongruent = 0;
      var responseTimeNoCue = 0;
      var responseTimeNeutralCue = 0;
      var responseTimeSpatialCue = 0;
      for (let i = 0; i < data.length; i++) {
        responseTimeAll += data[i].responseTime;
        if (data[i].consistency === 1) {
          responseTimeCongruent += data[i].responseTime;
        } else if (data[i].consistency === 0) {
          responseTimeIncongruent += data[i].responseTime;
        }

        if (data[i].type === 3) {
          responseTimeNoCue += data[i].responseTime;
        } else if (data[i].type === 2) {
          responseTimeNeutralCue += data[i].responseTime;
        } else if (data[i].type === 0 || data[i].type === 1) {
          responseTimeSpatialCue += data[i].responseTime;
        }
      }
      var avgresponseTimeCongruent = (
        responseTimeCongruent /
        (hitscongruent + inhitscongruent)
      ).toFixed(2);
      var avgresponseTimeIncongruent = (
        responseTimeIncongruent /
        (hitsincongruent + inhitscongruent)
      ).toFixed(2);
      var avgresponseTimeNoCue = (
        responseTimeNoCue /
        (inhitsNoCue + hitsNoCue)
      ).toFixed(2);
      var avgresponseTimeNeutralCue = (
        responseTimeNeutralCue /
        (inhitsNeutralCue + hitsNeutralCue)
      ).toFixed(2);
      var avgresponseTimeSpatialCue = (
        responseTimeSpatialCue /
        (inhitsSpatialCue + hitsSpatialCue)
      ).toFixed(2);
      //警报分数（无刺激条件试验的反应时减去中性试验的反应时）
      var warnScore = responseTimeNoCue - responseTimeNeutralCue;
      //定向分数（中性试验的反应时减去空间条件下的反应时）
      var directionScore = responseTimeNeutralCue - responseTimeSpatialCue;
      //冲突分数（不一致试验的反应时减去一致试验的反应时）
      var conflictScore = responseTimeIncongruent - responseTimeCongruent;
      // console.log(
      // hitsAll  // 总命中次数
      // hitscongruent, // 一致性命中次数
      // hitsincongruent, // 不一致性命中次数
      // hitsNoCue, // NoCue命中次数
      // hitsNeutralCue, // NeutralCue命中次数
      // hitsSpatialCue, //SpatialCue命中次数
      // hitRate, // 命中率
      // congruentHitRate, // 一致性命中率
      // incongruentHitRate, // 不一致性命中率
      // noCueHitRate, // noCue命中率
      // neutralCueHitRate, // neutralCue命中率
      // spatialCueHitRate, // spatialCue命中率
      // responseTimeAll, // 反应时 ，前面加avg的表示的是平均反应时
      // responseTimeCongruent, // 一致性反应时
      // responseTimeIncongruent, // 不一致性反应时
      // responseTimeNoCue, // NoCue反应时
      // responseTimeNeutralCue, // NeutralCue
      // responseTimeSpatialCue, // 警报分数（无刺激条件试验的反应时减去中性试验的反应时）
      // warnScore, // 定向分数（中性试验的反应时减去空间条件下的反应时）
      // directionScore, // 冲突分数（不一致试验的反应时减去一致试验的反应时）
      // );
      var computeResult = {};
      computeResult.hitsAll = hitsAll;
      computeResult.hitscongruent = hitscongruent;
      computeResult.hitsincongruent = hitsincongruent;
      computeResult.hitsNoCue = hitsNoCue;
      computeResult.hitsNeutralCue = hitsNeutralCue;
      computeResult.hitsSpatialCue = hitsSpatialCue; //命中率：全部命中率：正确点击次数/全部点击次数
      computeResult.hitRate = hitRate; //命中率：不同实验（一致性、不一致性）和不同线索下的命中率
      computeResult.congruentHitRate = congruentHitRate;
      computeResult.incongruentHitRate = incongruentHitRate;
      computeResult.noCueHitRate = noCueHitRate;
      computeResult.neutralCueHitRate = neutralCueHitRate;
      computeResult.spatialCueHitRate = spatialCueHitRate; //RT:反应时
      computeResult.responseTimeAll = responseTimeAll; //反应时以及不同实验（一致性、不一致性）和不同线索下的平均反应时
      computeResult.responseTimeCongruent = responseTimeCongruent;
      computeResult.responseTimeIncongruent = responseTimeIncongruent;
      computeResult.responseTimeNoCue = responseTimeNoCue;
      computeResult.responseTimeNeutralCue = responseTimeNeutralCue;
      computeResult.responseTimeSpatialCue = responseTimeSpatialCue;
      computeResult.avgresponseTimeCongruent = avgresponseTimeCongruent;
      computeResult.avgresponseTimeIncongruent = avgresponseTimeIncongruent;
      computeResult.avgresponseTimeNoCue = avgresponseTimeNoCue;
      computeResult.avgresponseTimeNeutralCue = avgresponseTimeNeutralCue;
      computeResult.avgresponseTimeSpatialCue = avgresponseTimeSpatialCue; //警报分数（无刺激条件试验的反应时减去中性试验的反应时）
      computeResult.warnScore = warnScore; //定向分数（中性试验的反应时减去空间条件下的反应时）
      computeResult.directionScore = directionScore; //冲突分数（不一致试验的反应时减去一致试验的反应时）
      computeResult.conflictScore = conflictScore;
      return computeResult;
    },
    // 更多游戏
    moreGame() {
      this.$router.push("/welcome/CognitiveAbility");
    },
  },
};
</script>
<style scoped>
.testMainDiv {
  margin: 0 auto;
  margin-top: 10px;
  background: gray;
  background-size: cover;
  /* text-align:center; */
  width: 500px;
  height: 300px;
  /* object-fit:fill; */
}

.activeTask {
  background: url(../../assets/congnitiveAblitity/speed-bg.png) no-repeat center;
  background-size: cover;
  /* background: gray; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.scaleName {
  margin-top: 70px;
  background-size: cover;
}

.scaleButton {
  margin-top: 20px;
  margin-bottom: 20px;
  background-size: cover;
}

.aa {
  visibility: hidden;
}
.glassPad {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.correctRate {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
}
</style>