cpdm_pc/src/views/shapeIntuition_random.vue

<template>
  <div class="txt-center">
    <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')">
      <div class="taskHead">
        <!-- <div class="scale" @click.stop="screen">
          <img src="../../assets/small-big.png" alt="" />
        </div> -->
        <!-- <el-button @click="messageFun">弹出留言框</el-button> -->
        <el-progress class="main_progress" color="linear-gradient(to right, #ffd650, #ff8431)" :stroke-width="48"
          :text-inside="true" :format="format" :percentage="(imgIndex * 100) / 120" v-if="testTypeCode == 1"
          style="width:50%;margin-top:10px"></el-progress>
      </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>
  </div>
  <CpdmMessage ref="cpdmMe" />
</template>
<script>
// import cognitiveAbilityTaskList from "@/assets/data/cognitiveAbilityData.js";
// import { preloader, requireImg } from "@/utils/utils";
import { preloader } from "@/utils/utils";
// import { preloader } from "@/utils/utils";
// import screenfull from "screenfull";
import { userInfoStore } from '@/stores';
import { saveEggRecordApi } from '@/api/record'
import { format as myFormat } from 'date-fns';
import { userPlanDetailApi } from '@/api/home';
import CpdmMessage from '@/components/CpdmMessage.vue';
const userInfo = userInfoStore()

export default {
  components: { CpdmMessage },
  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,
      // requireImg: requireImg,
      planId: '',
      planName: '',
      flag: '',
      flagName: '',
      formalTest: '',
      beginTime: '',
      userPlanDetailApi: userPlanDetailApi
    };
  },
  // 页面初始化函数
  created() {
    // this.taskId = this.$route.query.taskId;
    //获取测试计划ID
    this.planId = this.$route.params.planId;
    //测试名称
    this.planName = this.$route.params.planName;
    //认知任务 flag
    this.flag = this.$route.params.flag;
    //认知任务 flag名称
    this.flagName = this.$route.params.flagName;
    //
    this.formalTest = this.$route.params.formalTest;

    this.beginTime = myFormat(new Date().getTime(), "yyyy-MM-dd HH:mm:ss")

    //拿到是练习测试还是正式测试
    this.init(this.formalTest);
  },
  destroyed() {
    clearInterval(this.myInterval);
    clearTimeout(this.timeOne);
    clearTimeout(this.timeTwo);
  },
  methods: {
    // messageFun() {
    //   this.$refs.cpdmMe.open()
    // },
    requireImg(name) {
      return new URL(`../assets/cognize/shapeIntuition/${name}.jpg`, import.meta.url).href
    },
    init(val) {
      this.startTest(val);
    },
    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");
      }
    },
    async 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",
        });
        //跳转到上一页
        this.$router.go(-1)
      } else {
        let userScore = (
          (this.userRightResponseCount / this.userResponseRecords.length) *
          100
        ).toFixed(2);
        this.testFlag = false;
        this.testState = false;
        this.button0Show = false;
        this.button1Show = false;
        if (this.saveFalg) {
          let result = {
            beginTime: this.beginTime,
            // "id": "string",
            orgName: userInfo.userInfo.orgName,
            orgNo: userInfo.userInfo.orgNo,
            planId: this.planId,
            planName: this.planName,
            taskFlag: this.flag,
            taskName: this.flagName,
            testRecord: JSON.stringify(this.userResponseRecords),
            testResult: JSON.stringify({ 'userScore': userScore }),
            type: 1,
            userName: userInfo.userInfo.userName,
            userNo: userInfo.userInfo.userNo
          }
          const res = await saveEggRecordApi(result);
          this.$message({
            message: "测试结束！",
            type: "success",
          });
          //调用接口---查看此计划后边是不是还有--需要测试的认知任务---如果有的话
          //跳转到--- 计划页

          //判断该计划下是否还有 需要显示且需要测试记的计划//如果还有的话需要跳转到plan界面
          //如果该计划下没有需要测试的话--需要跳转到 测试记录里边


          //根据planId查询计划列表
          let params = {
            planId: this.planId,
            userNo: userInfo.userInfo.userNo
          }

          let temp = await userPlanDetailApi(params)
          let listT = temp.data;
          let listP = []
          listP = listT.filter((item) => {
            return item.isCompleted == '0' && item.contentType == '1'
          })
          this.saveFalg = false;
          //等--认知任务如果有未测试的话--需要跳转到测试计划页面
          //否则--跳转到测试计划页面
          if (listP.length > 0) {
            this.$router.push({ name: 'plan' })
          } else {
            //当测试完了以后--需要弹出确认的弹出框
            //把弹出框的内容   及用户信息 进行处理 进行发布
            this.$refs.cpdmMe.open()
            // this.$router.push({ name: 'testRecord' })
          }
          //如果后边没有--则测试跳转到报告页
          //需要跳转到
        }
      }
    },
    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 = this.requireImg("R_ELP_test_jitter" +
                this.difficultList[j] +
                "_s" +
                imgIndexList[i]);
              imgObj.imgDirection = "R";
              imgObj.userClickDirection = "";
            } else {
              imgObj.imgUrl = this.requireImg("ELP_test_jitter" +
                this.difficultList[j] +
                "_s" +
                imgIndexList[i]);
              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 = this.requireImg("R_ELP_test_jitter" +
              this.difficultList[j] +
              "_s" +
              i);
            imgObj.imgDirection = "R";
            imgObj.userClickDirection = "";
            imgObj.diff = this.difficultList[j];
            tempList.push(imgObj);
            imgObj = {};
            imgObj.imgUrl = this.requireImg("ELP_test_jitter" +
              this.difficultList[j] +
              "_s" +
              i);
            imgObj.imgDirection = "L";
            imgObj.userClickDirection = "";
            imgObj.diff = this.difficultList[j];
            tempList.push(imgObj);
          }
          //this.shuffle(tempList);
          this.userTestPicList = this.userTestPicList.concat(tempList);
          this.testPicCount = this.userTestPicList.length;
        }
        this.shuffle(this.userTestPicList);
      }
    },
    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/cognize/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: 20vw;
  min-width: 200px;
  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%);
}

.countdownStr {
  width: 70%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 70px;
  text-align: center;
  line-height: 100px;
}

.main_progress .el-progress-bar__inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #ff3c3c !important;
  text-align: right;
  border-radius: 100px;
  line-height: 1;
  white-space: nowrap;
  transition: width 0.6s ease;
  background-image: linear-gradient(to right, #ffd650, #ff8431) !important;
}

.main_progress {
  width: 50%;
  margin-left: 10%;
}
</style>