修改测试计划认知任务

src/router/index.ts

@@ -116,8 +116,8 @@ const routes = [
     component: () => import('@/views/CognizeFaceDot.vue')
 
   }, {
-    path: '/shapeIntuition_random/:planId/:planName/:flag/:flagName',
-    name: 'ShapeIntuitionRandom',
+    path: '/shapeIntuition_random/:planId/:planName/:flag/:flagName:/:formalTest',
+    name: 'shapeIntuitionRandom',
     component: () => import('@/views/shapeIntuition_random.vue')
   }
 ]

src/views/Cognize.vue

@@ -45,7 +45,6 @@ const queryScaleDetail = async () => {
     let res: any = await queryCognizeDetailApi(flag.value)
     console.log(res)
     cognizeDetail.value = res.data
-    debugger;
 
     // scaleName.value = res.data.name;
     // detail.value = res.data.description;
@@ -67,6 +66,12 @@ const requireImg = (name: string) => {
 }
 
 const startCog = (val: number) => {
+    debugger;
+    router.push(
+        {
+            name: 'shapeIntuitionRandom',
+            params: { planId: planId.value, planName: planName.value, flag: flag.value, flagName: cognizeDetail.value.name, formalTest: val }
+        })
     // if (num.value == '3') {
     //     router.push({ name: 'cognizeGoNoGo', params: { currentType: val } })
     // } else if (num.value == '4') {

src/views/Plan.vue

@@ -3,7 +3,7 @@ import CpmdHeader from '@/components/CpmdHeader.vue';
 import CpmdQuestionnaire from '@/components/CpmdQuestionnaire.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { format } from 'date-fns/format';
+
 const router = useRouter()
 
 //调用子组件的ref

src/views/shapeIntuition_random.vue

@@ -0,0 +1,484 @@
+<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-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%"></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>
+</template>
+<script>
+// import cognitiveAbilityTaskList from "@/assets/data/cognitiveAbilityData.js";
+import { preloader, requireImg } 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/format';
+const userInfo = userInfoStore()
+
+export default {
+  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: '',
+      startTime: ''
+    };
+  },
+  // 页面初始化函数
+  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;
+    console.log(this.$route.params.formalTest)
+    debugger;
+    //拿到是练习测试还是正式测试
+    this.init(this.formalTest);
+  },
+  destroyed() {
+    clearInterval(this.myInterval);
+    clearTimeout(this.timeOne);
+    clearTimeout(this.timeTwo);
+  },
+  methods: {
+    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) {
+      debugger;
+      // 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",
+        });
+      } 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: myFormat(new Date().getTime(), "yyyy-MM-dd HH:mm:ss"),
+            // "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);
+          console.log(res);
+          this.$message({
+            message: "测试结束！",
+            type: "success",
+          });
+          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 = requireImg("../assets/cognize/shapeIntuition/R_ELP_test_jitter" +
+                this.difficultList[j] +
+                "_s" +
+                imgIndexList[i] +
+                ".jpg");
+              imgObj.imgDirection = "R";
+              imgObj.userClickDirection = "";
+            } else {
+              imgObj.imgUrl = requireImg("../assets/cognize/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 = requireImg("../assets/cognize/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 = requireImg("../assets/cognize/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);
+          this.testPicCount = this.userTestPicList.length;
+        }
+        this.shuffle(this.userTestPicList);
+        console.log(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>