psychological-competence/src/views/CognitiveAbilityTask/EREC.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
                class="voiceBg"
                :class="{ active: isActive }"
                @click="videoPlay"
              ></div>
            </div>
          </div>
          <audio
            id="video"
            ref="video"
            :src="require('../../assets/voice/description/description45.mp3')"
          ></audio>
          <div style="margin: 100px auto; width: 80%; text-align: justify;text-justify: distribute-all-lines;">
            <!--<p>您好，请尽可能多地回忆在实验2中出现过的相容词，并于一定时间内在屏幕中的输入框处逐个进行输入，每输入一个形容词时请按下回车键或点击白框空白处保存当前形容词，点击右上角“x”号按钮可删除已输入形容词，当您回忆完成后，可点击保存进入下一个测试。</p>-->
            <!-- <p>{{subjectInfo.description}}</p> -->
            <p>
              你好，请尽可能多地回忆在词汇分类任务中出现过的相容词，并于一定时间内在屏幕中的空白框处输入。
            </p>
          </div>
        </div>
        <div
          class="right_part"
          :style="{
            background: 'url(' + require('../../assets/page28.png') + ')',
            'background-size': '100% 100%',
          }"
        >
          <div id="title">
            <span>情绪识别记忆任务（EREC）</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"
              placeholder="点击回车键填写下一个"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </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,
      countDownTime_begin: 11,
      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",
        },
      ], //词语列表
      isActive: false, //音频播放按钮
      testPlanId: "",
    };
  },
  created() {
    //进入页面即开始测试
    // this.startTest(1);
    this.taskId = this.$route.query.taskId || "";
    this.testPlanId = this.$route.query.testPlanId;
    // this.init(this.taskId);
  },
  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;
          this.countDownTime_begin = 10;
        }
      }, 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);
      this.exitFullscreen();
    },
    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(
      //    `/cognize/EREC`,{
      //     userId: this.userId,
      //     data:{
      //       totalWords: arrInter.length, //总词数
      //       positiveWordCount: arropp.length, // 积极词语个数
      //       negtiveWordCount: arrneg.length, //消极词语个数
      //     },
      //     result:{
      //       totalCorrectRate: accuracy + "%", //总的正确率
      //       posCorrectRate: accopp + "%", //积极词语的正确率
      //       negCorrectRate: accneg + "%", //消极词语的正确率
      //     }
      //     },
      //  (response) => {
      //     this.$router.push({
      //       name: "TestResult",
      //       params: {
      //         result: [
      //           {
      //             name: "总体正确率",
      //             value: accuracy + "%",
      //           },
      //         ],
      //       },
      //     });
      //   })

      let result = {
        data: {
          totalWords: arrInter.length, //总词数
          positiveWordCount: arropp.length, // 积极词语个数
          negtiveWordCount: arrneg.length, //消极词语个数
        },
        result: {
          totalCorrectRate: accuracy + "%", //总的正确率
          posCorrectRate: accopp + "%", //积极词语的正确率
          negCorrectRate: accneg + "%", //消极词语的正确率
        },
      };

      this.$store.dispatch("setVocabularyRecall", result);

      this.$alert(
        "词汇回忆任务结束，接下来进行词汇识别测试，请按确定按钮继续。",
        "提示",
        {
          confirmButtonText: "确定",
          showClose: false,
          callback: (action) => {
            this.$router.push(
              `/welcome/CognitiveAbilityTask/EMEM?testPlanId=${this.testPlanId}`
            );
          },
        }
      );
    },
    videoPlay() {
      let video = document.getElementById("video");
      if (this.isActive == false) {
        this.isActive = true;
        video.loop = false;
        video.addEventListener("ended", () => {
          this.isActive = false;
        });
        video.play();
      } else {
        this.isActive = false;
        video.pause();
      }
    },
  },
};
</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: 200px;
  margin-left: 10px;
  vertical-align: bottom;
}
.input-new-tag /deep/.el-input__inner {
  border: 1px solid #000;
}
.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;
}
.voiceBg {
  width: 40px;
  height: 40px;
  background: url(../../assets/voice.png);
  background-size: cover;
  float: left;
  margin-left: 60px;
  cursor: pointer;
}
.voiceBg.active {
  width: 40px;
  height: 40px;
  background: url(../../assets/voice.gif);
  background-size: cover;
}
</style>