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

<template>
  <div>
  <!--   <h1 class="txt-center">任务 4：情绪回忆任务（EREC）——情感信息的记忆</h1>

    <div style="width: 650px; margin: 20px auto; line-height: 2">
      <p style="text-align: left; text-indent: 2em">
        您好，请尽可能多地回忆在实验2中出现过的相容词，并于一定时间内在屏幕中的输入框处逐个进行输入，每输入一个形容词时请按下回车键或点击白框空白处保存当前形容词，点击右上角×号可删除已输入形容词，当您回忆完成后，可点击保存进入下一个测试。
      </p>
    </div> -->
    <div class="desc_wrap">
      <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>     您好，请尽可能多地回忆在实验2中出现过的相容词，并于一定时间内在屏幕中的输入框处逐个进行输入，每输入一个形容词时请按下回车键或点击白框空白处保存当前形容词，点击右上角“x”号按钮可删除已输入形容词，当您回忆完成后，可点击保存进入下一个测试。</p>
            <!-- <p>{{subjectInfo.description}}</p> -->
          </div>
        </div>
        <div
          class="right_part"
          :style="{
            background:
              'url(' + require('../../assets/page28.png') + ')',
            'background-size': '100% 100%',
          }"
        >
          <div id="title">
            <span>任务四</span>
          </div>
          <div style="position: absolute; bottom: 30px; right: 38%">
            <el-button type="primary" class="start" @click="startTest(1)">开始测试</el-button>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="testFlag"
      :class="{ testMainDiv: !testState, activeTask: testState }"
      class="txt-center"
    >
    <div style="padding:20px;margin-left:93%;" @click.stop="screen()">
          <img src="../../assets/small-big.png" alt="" />
        </div>
          <p
          v-show="countDownShow1"
          class="imgBox1"
      >
        {{ countDownStr }}
      </p>
      <div class="tabbarbox" v-show="flag1">
        <p
          v-show="countDownShow"
          style="text-align: right; font-size: 25px; color: black"
        >
          倒计时:{{ countDownTime }}
        </p>
        <div class="eltagbox">
          <div class="eltag">
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
              style="width: 90px"
            >
            </el-input>
            <!-- <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+ 新增</el-button
            > -->
          </div>
        </div>
        <div class="submit">
          <el-button style="  width:100px;
                              background: rgb(87, 172, 187);
                              border: 2px solid rgb(255, 255, 255);
                              box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
                              opacity: 1;
                              border-radius: 39px;
                              color: #FFFFFF;
                              border-radius: 10px;" @click="userClick">保存</el-button>
        </div>
        <div v-if="testResultDivShow" class="coginitiveTestResultDiv">
            <p v-if="testResultDivShow" class="testResultStr" style="margin-top: 5%">
              超过0.5秒的比例:{{ pass05SecRate }}%
            </p>
      </div>
      </div>
    </div>

  <!--   <div style="text-align: center; padding-bottom: 2rem; display: block">
      <el-button
        class="scaleButton"

        v-if="button0Show"
        @click="startTest(1)"
        >开始任务四测试</el-button
      >
      <el-button
        class="scaleButton"

        v-if="button1Show"
        @click="nexttest"
        >进行下一个测试</el-button
      >
    </div> -->
  </div>
</template>

<script>
import screenfull from 'screenfull';
export default {
  data() {
    return {
      flag1:false,
      countDownStr: "马上开始！",
      countDownTime_begin: 6,
      countDownShow1:true,
      userId: "",
      testFlag: false,
      testState: false,
      button0Show: true,
      button1Show: false,
      countDownShow: false,
      countDownTime: 150, //倒计时
      dynamicTags: [],
      inputVisible: true,
      testResultDivShow:false,
      inputValue: "",
      timeOne: "",
      myInterval: "",
      wordlist: [
        {
          index: 1,
          currentword: "优秀",
          wordtype: "positive",
        },
        {
          index: 2,
          currentword: "高尚",
          wordtype: "positive",
        },
        {
          index: 3,
          currentword: "聪慧",
          wordtype: "positive",
        },
        {
          index: 4,
          currentword: "崇高",
          wordtype: "positive",
        },
        {
          index: 5,
          currentword: "聪明",
          wordtype: "positive",
        },
        {
          index: 6,
          currentword: "杰出",
          wordtype: "positive",
        },
        {
          index: 7,
          currentword: "伟大",
          wordtype: "positive",
        },
        {
          index: 8,
          currentword: "睿智",
          wordtype: "positive",
        },
        {
          index: 9,
          currentword: "乐观",
          wordtype: "positive",
        },
        {
          index: 10,
          currentword: "渊博",
          wordtype: "positive",
        },
        {
          index: 11,
          currentword: "卓越",
          wordtype: "positive",
        },
        {
          index: 12,
          currentword: "诚实",
          wordtype: "positive",
        },
        {
          index: 13,
          currentword: "爽朗",
          wordtype: "positive",
        },
        {
          index: 14,
          currentword: "热情",
          wordtype: "positive",
        },
        {
          index: 15,
          currentword: "自豪",
          wordtype: "positive",
        },
        {
          index: 16,
          currentword: "正直",
          wordtype: "positive",
        },
        {
          index: 17,
          currentword: "温暖",
          wordtype: "positive",
        },
        {
          index: 18,
          currentword: "勤快",
          wordtype: "positive",
        },
        {
          index: 19,
          currentword: "坚强",
          wordtype: "positive",
        },
        {
          index: 20,
          currentword: "勇敢",
          wordtype: "positive",
        },
        {
          index: 21,
          currentword: "勤奋",
          wordtype: "positive",
        },
        {
          index: 22,
          currentword: "爽快",
          wordtype: "positive",
        },
        {
          index: 23,
          currentword: "恬静",
          wordtype: "positive",
        },
        {
          index: 24,
          currentword: "机智",
          wordtype: "positive",
        },
        {
          index: 25,
          currentword: "有趣",
          wordtype: "positive",
        },
        {
          index: 26,
          currentword: "豪迈",
          wordtype: "positive",
        },
        {
          index: 27,
          currentword: "精干",
          wordtype: "positive",
        },
        {
          index: 28,
          currentword: "热切",
          wordtype: "positive",
        },
        {
          index: 29,
          currentword: "活泼",
          wordtype: "positive",
        },
        {
          index: 30,
          currentword: "认真",
          wordtype: "positive",
        },
        {
          index: 31,
          currentword: "下贱",
          wordtype: "negative",
        },
        {
          index: 32,
          currentword: "卑劣",
          wordtype: "negative",
        },
        {
          index: 33,
          currentword: "凶狠",
          wordtype: "negative",
        },
        {
          index: 34,
          currentword: "窝囊",
          wordtype: "negative",
        },
        {
          index: 35,
          currentword: "虚伪",
          wordtype: "negative",
        },
        {
          index: 36,
          currentword: "自私",
          wordtype: "negative",
        },
        {
          index: 37,
          currentword: "丑陋",
          wordtype: "negative",
        },
        {
          index: 38,
          currentword: "无能",
          wordtype: "negative",
        },
        {
          index: 39,
          currentword: "愚蠢",
          wordtype: "negative",
        },
        {
          index: 40,
          currentword: "暴躁",
          wordtype: "negative",
        },
        {
          index: 41,
          currentword: "刻薄",
          wordtype: "negative",
        },
        {
          index: 42,
          currentword: "猖狂",
          wordtype: "negative",
        },
        {
          index: 43,
          currentword: "残酷",
          wordtype: "negative",
        },
        {
          index: 44,
          currentword: "狠心",
          wordtype: "negative",
        },
        {
          index: 45,
          currentword: "悲观",
          wordtype: "negative",
        },
        {
          index: 46,
          currentword: "尖刻",
          wordtype: "negative",
        },
        {
          index: 47,
          currentword: "阴沉",
          wordtype: "negative",
        },
        {
          index: 48,
          currentword: "腐朽",
          wordtype: "negative",
        },
        {
          index: 49,
          currentword: "无情",
          wordtype: "negative",
        },
        {
          index: 50,
          currentword: "消极",
          wordtype: "negative",
        },
        {
          index: 51,
          currentword: "自卑",
          wordtype: "negative",
        },
        {
          index: 52,
          currentword: "蛮横",
          wordtype: "negative",
        },
        {
          index: 53,
          currentword: "呆滞",
          wordtype: "negative",
        },
        {
          index: 54,
          currentword: "焦躁",
          wordtype: "negative",
        },
        {
          index: 55,
          currentword: "懒惰",
          wordtype: "negative",
        },
        {
          index: 56,
          currentword: "阴暗",
          wordtype: "negative",
        },
        {
          index: 57,
          currentword: "危险",
          wordtype: "negative",
        },
        {
          index: 58,
          currentword: "粗鲁",
          wordtype: "negative",
        },
        {
          index: 59,
          currentword: "傲慢",
          wordtype: "negative",
        },
        {
          index: 60,
          currentword: "自负",
          wordtype: "negative",
        },
      ], //词语列表
    };
  },
  created() {
    // this.testlist()
  },
  destroyed() {
    clearInterval(this.myInterval);
  },
  methods: {
      countDown_begin() {
      // 测试时间倒计时
      this.myInterval = setInterval(() => {
        this.countDownTime_begin--;
        this.countDownStr = this.countDownTime_begin;
        if (this.countDownTime_begin == 0) {
          this.countDownShow1 = false;
          //计算测试结果
          this.flag1=true;
          this.countDownShow = true;
        // this.showTargetNow();

          // 清除定时器
          clearInterval(this.myInterval);
           this.countDown();
          this.countDownTime_begin = 5;
        }
      }, 1000);
    },
    screen() {
      // 如果不允许进入全屏，发出不允许提示
      // if (!screenfull.isEnabled) {
      //   this.$message("您的浏览器不能全屏");
      //   return false;
      // }
      screenfull.toggle();
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    },
    startTest(testType) {
      this.screen();
      if (
        sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == "" ||
        sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == null
      ) {
        this.$message.error("请先登录！");
        return;
      }
      if (testType == 0) {
        this.testTypeCode = 0;
      } else {
        this.testTypeCode = 1;
      }
      this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f");
      if (this.testTypeCode == 1) {
        // this.userTestPicList = [];
        this.testFlag = true;
        this.testState = true;
        this.countDownShow = true;
        // this.showTargetNow();
        this.countDown_begin();
      }
    },
    // 定时器
    // showTargetNow() {
    //   var time = 150000;
    //   this.timeOne = setTimeout(() => {
    //     this.testFlag = false;
    //     this.testState = false;
    //     this.button0Show = false;
    //     this.button1Show = true;
    //   }, time);
    // },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    // showInput() {
    //   this.inputVisible = true;
    //   this.$nextTick((_) => {
    //     this.$refs.saveTagInput.$refs.input.focus();
    //   });
    // },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if(this.dynamicTags.includes(inputValue)){
        // 限制弹出框弹出一次
        let doms = document.getElementsByClassName('el-message')[0]
        if(doms == undefined){undefined
        this.$message({
          message: "重复输入！",
          type: "warning",
        });
        }
         this.inputValue = "";
      }else{
      if (inputValue) {
          this.dynamicTags.push(inputValue);
      }
      console.log(this.dynamicTags);
      // this.inputVisible = false;
      this.inputValue = "";
      }
    },
    // 去除输入数组重复元素，不加入最后计算
    newData(data) {
    var nData = new Array();
    for (var i = 0; i < data.length; i++) {
        if (nData.indexOf(data[i]) == -1) {
            nData.push(data[i]);
        }
    }
    return nData;
    },
    userClick() {
      this.countDownShow == false;
      this.testFlag = false;
      this.testState = false;
      this.button0Show = false;
      // this.button1Show = true;
      this.dynamicTags = this.newData(this.dynamicTags);
      console.log(this.dynamicTags);
      this.compareWordlist();
      this.$message({
          message: "测试结束！",
          type: "success",
        });
      // this.nexttest();
      clearInterval(this.myInterval);
    },
    nexttest() {
      this.screen();
      this.$router.push("EMEMexperiment");
    },
    // 倒计时
    countDown() {
      this.myInterval = setInterval(() => {
        this.countDownTime--;
        if (this.countDownTime == 0) {
          this.countDownShow == false;
          this.testFlag = false;
          this.testState = false;
          this.button0Show = false;
          // this.button1Show = true;
          this.dynamicTags = this.newData(this.dynamicTags);
          this.compareWordlist();
          this.exitFullscreen();
          this.$message({
          message: "测试结束！",
          type: "success",
        });
        // this.nexttest();
        clearInterval(this.myInterval);
        }
      }, 1000);
    },
    //取数组交集
    // doIntersection(firstArray, secondArray) {
    // // The logic here is to create a hashmap with the elements of the firstArray as the keys.
    // // After that, you can use the hashmap's O(1) look up time to check if the element exists in the hash
    // // If it does exist, add that element to the new array.
    // var hashmap = {};
    // var intersectionArray = [];
    // firstArray.forEach(function (element) {
    // hashmap[element] = 1;
    // });
    // // Since we only want to push unique elements in our case... we can implement a counter to keep track of what we already added
    // secondArray.forEach(function (element) {
    // if (hashmap[element] === 1) {
    // intersectionArray.push(element);
    // hashmap[element]++;
    // }
    // });
    // return intersectionArray;
    // // Time complexity O(n), Space complexity O(n)
    // },
    // 取数组对象中词
    // testlist(){
    //   const wordlistIds = this.wordlist.map(wordlists => wordlists.currentword);
    //       console.log(wordlistIds);
    // },

    compareWordlist(){
      // 判断用户输入结果正确率
      var accuracy = 0;
      let arrInter = [...this.dynamicTags].filter(x => [...this.wordlist].some(y => y.currentword === x));
      console.log(arrInter.length );
      accuracy = ((arrInter.length/this.wordlist.length)*100).toFixed(2);
      console.log(accuracy);
      // 积极词语的正确率
      var accopp = 0;
      var newArr = this.wordlist.slice(0,30)
      console.log(newArr)
      let arropp = [...this.dynamicTags].filter(x => [...newArr].some(y => y.currentword === x));
      accopp = ((arropp.length/newArr.length)*100).toFixed(2);
      console.log(accopp);
      // 消极词语的正确率
      var accneg = 0;
      var newArrneg = this.wordlist.slice(30,60)
      console.log(newArrneg);
      let arrneg = [...this.dynamicTags].filter(x => [...newArrneg].some(y => y.currentword === x));
      accneg = ((arrneg.length/newArr.length)*100).toFixed(2);
      console.log(accneg);
      //跳转
      // this.$http.post(
      //  (response) => {
          this.$router.push({
            name: "TestResult",
            params: {
              result: [
                {
                  name: "总体正确率",
                  value: accuracy + "%",
                },
              ],
            },
          });
      //   }
      // )
    },
  },
};
</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/rememberAbilityTask.png")
    no-repeat center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.scaleButton {
  margin-top: 20px;
  margin-bottom: 20px;
  background-size: cover;
   background: rgb(87, 172, 187);
  border: 2px solid rgb(255, 255, 255);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 39px;
  color: #FFFFFF;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
/* .button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
} */
.input-new-tag {
  margin-top: 25px;
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-tag {
  margin-top: 25px;
}
.eltagbox {
  background-color: white;
  border-radius: 25px;
  width: 800px;
  height: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow: auto;
  opacity: 0.7;
}
.tabbarbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.submit {
  margin-top: 10px;
}
.imgBox1 {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:black;
  font-size:70px;
  text-align:center;
  line-height:100px;
  margin:0 auto;
}
</style>