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

<template>
  <div class="content-container">
    <div class="content-outline" v-if="!testResultStr">
      <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" v-html="subjectInfo.testDescription"></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" v-if="button0Show" @click="startTest(0)">练习测试</el-button>
          <el-button type="primary" class="start" v-if="button1Show" @click="startTest(1)">正式测试</el-button>
        </div>
      </div>
    </div>
    <!-- LOGO  -->
    <div v-show="testResultStrShow" style="width: 650px; margin: 20px auto; line-height: 2">
      <p style="margin-top: 20%; font-size: 30px">
        {{ testResultStr }}
      </p>
    </div>
    <div v-if="testFlag" :class="{ testMainDiv: !testState, activeTask: testState }" @contextmenu.prevent=""
      @click.left="userClick('L')" @click.right="userClick('R')">
      <MainProgress v-if="testTypeCode == 1" :cur-percentage="(imgIndex / 120)" />

      <div class="taskHead">
        <div class="scale" @click.stop="screen">
          <img src="@/assets/small-big.png" alt="" />
        </div>
      </div>

      <div class="taskHead">
        <div class="scale" @click.stop="screen">
          <img src="../../assets/small-big.png" alt="" />
        </div>
      </div>

      <div class="glass">
        <p v-show="countDownShow" class="countdownStr">
          {{ countDownStr }}
        </p>
        <img v-show="showDuckEgg" :src="examImgUrl" alt="" class="shapeImg" />
      </div>
      <!-- <img v-show="showWhiteFlag" src='../../assets/congnitiveAblitity/whiteFlag.png' alt="" style="width: 50px; height: 50px; margin-top: 20%"> -->
      <!-- 演示使用 -->
      <!-- <div class="steering">
        <el-button type="primary" icon="el-icon-arrow-left" @click="userClick('L')"></el-button>
        <el-button type="primary" @click="userClick('R')"><i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </div> -->
    </div>

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

import { oSessionStorage } from "../../utils/utils";
import { preloader } from "@/utils/utils";
import screenfull from "screenfull";
import MainProgress from "@/components/MainProgress/index.vue";
import GoBack from "@/components/goBack/index.vue";

export default {
  components: {GoBack, MainProgress},
  data() {
    return {
      userId: "",
      userTestResult: {},
      imgUrl: "",
      examImgUrl: "",
      taskId: "", // 认知任务id
      testFlag: false,
      testState: false,
      saveFlag: false, //结果保存按钮显示标志
      subjectInfo: "", //认知任务详情
      button0Show: true, // 控制按钮显示隐藏
      button1Show: false, // 控制按钮显示隐藏
      buttonName: "开始测试", // 正式测试  // 重新练习
      testTypeCode: 0, // 0-练习测试 1-正式测试 2-重新测试
      imgIndex: 0,
      userTestPicList: [], //用户点击图片列表
      showImage: true,
      difficultList: [0], // [0,10,30,45,60,90,120,180,360]
      testPicCount: 10, //测试数目
      userRightClickDirection: "", //测试者应该点击的方向
      userRightResponseCount: 0, //测试者反应正确的次数
      showDuckEgg: false,
      countDownTime: 6, //开始前的倒计时
      countDownStr: "练习马上开始！",
      countDownShow: true,
      testTunrnCount: 0, //正式测试轮数
      testEndFlag: false, //测试结束标志
      testResultStrShow: false, //测试结果展示
      testResultStr: "", //测试成绩
      userCanClick: true, //用户标识用户单次刺激只能点击一次
      myInterval: "",
      timeOne: "",
      timeTwo: "",
      startMilliSeconds: 0, //反应时
      userResponseRecords: [], //用户测试反应记录
      saveFalg: true,
    };
  },
  // 页面初始化函数
  created() {
    this.taskId = this.$route.query.taskId;
    this.init(this.taskId);
  },
  mounted() {
    document.onkeydown = (e) => {
      let key = window.event.keyCode
      if (key === 37) {
        this.userClick('L');
      }

      if (key === 39) {
        this.userClick('R');
      }
    }
  },
  destroyed() {
    clearInterval(this.myInterval);
    clearTimeout(this.timeOne);
    clearTimeout(this.timeTwo);
  },
  methods: {
    init(taskId) {
      //this.subjectInfo = cognitiveAbilityTaskList[taskId];
      this.subjectInfo = JSON.parse(oSessionStorage.getItem("subjectInfo"));
    },
    userClick(clickFlag) {
      if (this.countDownShow || !this.userCanClick) {
        return;
      }
      this.userCanClick = false;
      let milliSecondsCount = new Date().getTime() - this.startMilliSeconds;
      let userResponseStr = "Wrong";
      clearTimeout(this.timeOne);

      //用户反应正确性判断
      if (this.userRightClickDirection == clickFlag) {
        this.userRightResponseCount++;
        userResponseStr = "Right";
      }
      //判断是否测试结束
      if (this.imgIndex == this.userTestPicList.length) {
        this.testEndFlag = true;
      }
      //记录用户反应
      if (this.testTypeCode == 1) {
        this.userResponseRecords.push({
          index: this.imgIndex,
          rightOrWrong: userResponseStr,
          responseTime: milliSecondsCount,
          diff: this.userTestPicList[this.imgIndex - 1].diff,
        });
      }
      this.showDuckEgg = false;
      this.timeTwo = setTimeout(() => {
        this.showTargetNow();
      }, 500);
    },
    format(percentage) {
      return percentage === 100 ? "测试已完成" : "任务进度";
    },
    screen() {
      screenfull.toggle();
    },
    startTest(testType) {
      if (
        sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == "" ||
        sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == null
      ) {
        this.$message.error("请先登录！");
        return;
      }
      this.screen();
      if (testType == 0) {
        this.testTypeCode = 0;
      } else {
        this.saveFalg = true;
        this.testTypeCode = 1;
      }
      this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f");
      if (this.testTypeCode == 1) {
        this.difficultList = [360, 180, 90, 60, 30, 0]; // [360,180,90,60,30,0]
        this.imgIndex = 0;
        this.countDownStr = "马上开始！";
        this.countDownTime = 6;
        this.testEndFlag = false;
        this.showDuckEgg = false;
        this.userTestPicList = [];
      }
      this.countDownShow = true;
      this.userTestPicListCreate();
      // 预加载图片后开始测试
      preloader(this.userTestPicList, () => {
        this.testFlag = true;
        this.testState = true;
        this.countDown();
      });
    },
    showTargetNow() {
      // 练习间隔2~4，正式测试2~12；
      this.showDuckEgg = false;
      if (this.testEndFlag) {
        this.computeScore();
      } else {
        this.userRightClickDirection = this.userTestPicList[this.imgIndex].imgDirection;
        this.examImgUrl = this.userTestPicList[this.imgIndex].imgUrl;
        this.showDuckEgg = true;
        this.imgIndex++;
        this.startMilliSeconds = new Date().getTime();
        this.userCanClick = true;

        if (this.imgIndex == this.userTestPicList.length) {
          this.testEndFlag = true;
        }
        this.timeOne = setTimeout(this.ifShowNextOne, 10 * 1000, this.imgIndex);
      }
    },
    ifShowNextOne(needClickIndex) {
      if (needClickIndex == this.imgIndex) {
        this.userClick("NULL");
      }
    },
    computeScore() {
      screenfull.exit();
      if (this.testTypeCode == 0) {
        this.testFlag = false;
        this.testState = false;
        //this.testTypeCode =1
        this.countDownStr = "练习马上开始！";
        this.userRightResponseCount = 0;
        this.imgIndex = 0;
        this.countDownTime = 6;
        this.testEndFlag = false;
        this.showDuckEgg = false;
        this.userTestPicList = [];
        this.button1Show = true;
        this.$message({
          message: "测试结束！",
          type: "success",
        });
      } else {
        let userScore = (
          (this.userRightResponseCount / this.userResponseRecords.length) *
          100
        ).toFixed(2);
        this.testFlag = false;
        this.testState = false;
        this.button0Show = false;
        this.button1Show = false;
        //console.log(this.userResponseRecords)
        if (this.saveFalg) {
          this.$http.post(
            `/cognize/SHAPE2`,
            {
              userId: this.userId,
              userScore: userScore + "%",
              userResponseRecords: this.userResponseRecords,
              testPlanId: this.$route.query.testPlanId || "",
            },
            (response) => {

              this.goTestResult(response.data)
              this.$message({
                message: "测试结束！",
                type: "success",
              });
              //   this.$router.push({
              //   name: "TestResult",
              //   params: {
              //     result: [
              //       {
              //         name: "测试准确率",
              //         value: userScore + "%",
              //       }
              //     ],
              //   },
              // });
            }
          );
          this.saveFalg = false;
        }
      }
    },
    userTestPicListCreate() {
      let imgObj = {
        // imgUrl:'',
        // imgDirection:'',
        // userClickDirection:''
      };
      if (this.testTypeCode == 0) {
        //随机呈现最简单的10张图片
        let imgIndexList = this.getRandomNumber(10, 20);
        for (let j = 0; j < this.difficultList.length; j++) {
          for (let i = 0; i < imgIndexList.length; i++) {
            imgObj = {};
            if (i % 2 == 0) {
              imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
                this.difficultList[j] +
                "_s" +
                imgIndexList[i] +
                ".jpg");
              imgObj.imgDirection = "R";
              imgObj.userClickDirection = "";
            } else {
              imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
                this.difficultList[j] +
                "_s" +
                imgIndexList[i] +
                ".jpg");
              imgObj.imgDirection = "L";
              imgObj.userClickDirection = "";
            }
            this.userTestPicList.push(imgObj);
          }
        }
        this.shuffle(this.userTestPicList);
      } else {
        //展示所有图片
        for (let j = 0; j < this.difficultList.length; j++) {
          var tempList = [];
          for (let i = 1; i < 11; i++) {
            imgObj = {};
            imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
              this.difficultList[j] +
              "_s" +
              i +
              ".jpg");
            imgObj.imgDirection = "R";
            imgObj.userClickDirection = "";
            imgObj.diff = this.difficultList[j];
            tempList.push(imgObj);
            imgObj = {};
            imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
              this.difficultList[j] +
              "_s" +
              i +
              ".jpg");
            imgObj.imgDirection = "L";
            imgObj.userClickDirection = "";
            imgObj.diff = this.difficultList[j];
            tempList.push(imgObj);
            //console.log(tempList)
          }
          this.shuffle(tempList);
          this.userTestPicList = this.userTestPicList.concat(tempList);
          console.log(this.userTestPicList);
          this.testPicCount = this.userTestPicList.length;
        }
      }
    },
    getRandomNumber(size, maxNumber) {
      let numberList = [];
      for (var i = 0; i < size; i++) {
        numberList.push(Math.floor(Math.random() * maxNumber) + 1);
      }
      return numberList;
    },
    countDown() {
      // 测试时间倒计时
      this.myInterval = setInterval(() => {
        this.countDownTime--;
        this.countDownStr = this.countDownTime;
        if (this.countDownTime == 0) {
          this.countDownShow = false;
          //显示鸭蛋
          this.showTargetNow();
          // 清除定时器
          clearInterval(this.myInterval);
          //this.countDownTime = 5;
        }
      }, 1000);
    },
    shuffle(arr) {
      var i = arr.length,
        t,
        j;
      while (i) {
        j = Math.floor(Math.random() * i--);
        t = arr[i];
        arr[i] = arr[j];
        arr[j] = t;
      }
    },
  },
};
</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/shapeIntuition.png) no-repeat center;
  background-size: cover;
  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;
}

.steering {
  width: 50%;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}

.steering .left {
  width: 60px;
  height: 60px;
  background: url(../../assets/left.png) no-repeat center;
}

.steering .right {
  width: 60px;
  height: 60px;
  background: url(../../assets/right.png) no-repeat center;
  margin-left: 15px;
}

.imgBox {
  font-size: 50px;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.shapeImg {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.addImg {
  width: 71px;
  width: 71px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>