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

<template>
  <div id="bd " class="activeTask" v-if="quest == true">
    <img
      @click="screenState()"
      src="../../assets/small-big.png"
      alt=""
      style="
        height: 48px;
        width: 48px;
        position: fixed;
        top: 24px;
        right: 22px;
        cursor: pointer;
      "
    />
    <div class="glass">
      <div style="width: 92%; margin-left: 4%">
        <el-row>
          <el-col :span="12"><h3 class="bTitle">2.词汇联想</h3></el-col>
          <el-col :span="12">
            <div
              id="t1"
              style="
                margin-left: 58%;
                height: 36px;
                background: rgba(0, 0, 0, 0.39);
                margin-bottom:10px;
                border-radius: 24px;
                color: #ffffff;
                padding-top: 10px;
              "
              v-if="
                (isComplete == 0 && isDelay == false && isok == false) ||
                (isComplete == 0 && isDelay == true && isok == true)
              "
              v-bind:text-content.prop="time1 + '(用时)'"
            >
              用时
            </div>
          </el-col>
        </el-row>

        <el-card
          style="
            margin-top: 20px;
            background: rgb(255, 255, 255);
            opacity: 1 !important;
            border-radius: 8px;
          "
        >
          <p style="text-align: left">
            注释：包含有逻辑关系和无逻辑关系词组各12对（有关联想和无关联想），通过录音播放进行学习，随后进行测查，30分钟后进行延时回忆测查。
          </p>
        </el-card>
      </div>
      <div v-if="isDelay == true && isok == false">
        <h1 v-if="countDownDivShow" style="margin-top: 5rem;text-align: center;">
          延时测试剩余时间:{{ remainingTime }}分钟
        </h1>
        <div class="btn-content">
          <el-button
                  v-if="delayTestButtonShow"
                  style="margin-top: 60px;"
                  type="primary"
                  @click="isOk"
          >延时测试>></el-button>
        </div>

      </div>
      <div v-if="isComplete == 0 && isDelay == true && isok == true">
        <h1 style="text-align: center">延时测试</h1>
      </div>

      <div
        id="c1"
        class="txt-center"
        v-if="isComplete == 1 && isDelay == false"
      >
        <h4 class="sTitle" style="text-align: left">请先听音频后做题:</h4>

        <audio ref="audio1">
          <source src="../../assets/assoia_one.mp3" type="audio/mpeg" />
        </audio>
        <audio ref="audio2">
          <source src="../../assets/assoia_two.mp3" type="audio/mpeg" />
        </audio>

        <audio ref="baudio1">
          <source src="../../assets/assoia_three.mp3" type="audio/mpeg" />
        </audio>
        <audio ref="baudio2">
          <source src="../../assets/assoia_four.mp3" type="audio/mpeg" />
        </audio>

        <div style="text-align: left">
          <el-button
            id="btn2"
            icon="el-icon-video-play"
            @click.once="autoAudio1"
            >第一组</el-button
          >
        </div>

        <div style="text-align: left">
          <el-button
            id="btn4"
            :disabled="complete"
            icon="el-icon-video-play"
            @click.once="autoAudio2"
            >第二组</el-button
          >
        </div>

        <el-button
          v-if="showButton"
          class="saveclass"
          id="btn1"
          @click="WordTest"
          >开始即时记忆测试</el-button
        >
      </div>
      <div
        id="c2"
        class="txt-center"
        v-if="
          (isComplete == 0 && isDelay == false && isok == false) ||
          (isComplete == 0 && isDelay == true && isok == true)
        "
      >
        <h3 style="text-align: left">请根据学习的音频进行作答：</h3>

        <div id="table">
          <el-tag class="el">回忆</el-tag>
        </div>
        <div class="rc">
          <el-row class="el-row">
            <el-col class="elc" :span="3">{{display_two[two_flag][0]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="hard[0]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_one[one_flag][0]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="simple[0]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_two[two_flag][1]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="hard[1]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_one[one_flag][1]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="simple[1]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_two[two_flag][2]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="hard[2]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_one[one_flag][2]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="simple[2]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_two[two_flag][3]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="hard[3]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_one[one_flag][3]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="simple[3]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_two[two_flag][4]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="hard[4]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_one[one_flag][4]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="simple[4]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_one[one_flag][5]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="simple[5]"></el-input
            ></el-col>

            <el-col class="elc" :span="3">{{display_two[two_flag][5]}}</el-col>
            <el-col class="elc" :span="3"
              ><el-input size="mini" v-model.lazy.trim="hard[5]"></el-input
            ></el-col>
          </el-row>
        </div>

        <!--<el-button id="btn3" class="saveclass" @click="submit">保&nbsp;&nbsp;存</el-button>-->
        <el-button id="btn3" class="saveclass" @click="throttle">保&nbsp;&nbsp;存</el-button>

      </div>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  data() {
    return {
      complete: true,
      isComplete: 1,
      quest: false,
      simple: ["", "", "", "", "", ""],
      hard: ["", "", "", "", "", ""],
      display_one:[["太阳","北方","困难","颜色","牲口","站着"],["首先","剪刀","书桌","手机","树木","铅笔"]],
      display_two:[["勇敢","热心","西瓜","老师","团结","光明"],["米饭","水管","水壶","眼镜","沙发","衣架"]],
      isSimple: [["月亮", "东方", "容易", "粉红", "牛马", "躺下"],["其次", "卡片", "椅子", "电脑", "花草", "橡皮"]],
      isHard: [["电灯", "玻璃", "衣服", "铁路", "长短", "服从"],["镜子","口红","沙发","墙壁","伪装","合作"]],
      time1: "00时00分00秒",
      timer: "",
      simpleResult: 0,
      hardResult: 0,
      memoryType: 1,
      correlationMemory: "",
      countDownDivShow: false, //控制剩余时间显示隐藏
      delayTestButtonShow: false, //控制剩余时间显示隐藏
      remainingTime: 0, //延时测试剩余时间
      status: 1,
      phone: "",
      isDelay: false,
      isok: false,
      beforeTime: true,
      showButton: false,
      one_flag:"",
      two_flag:"",
      throttleTimer: null, //防重复点击
    };
  },

  created() {
    this.phone = sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9e87");
    this.internetQuest();
  },
  mounted: function () {
    var that = this;
    screenfull.request();
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key === 122) {
        e.preventDefault();
        screenfull.toggle();
      }
    };
  },
  methods: {
    screenState() {
      screenfull.toggle();
    },
    internetQuest() {
      this.$http.post("memory/getIfUsable", { phone: this.phone }, (msg) => {
        if (msg.msg == "还未到时间") {
          this.isDelay = true;
          this.remainingTime = msg.data;
          this.countDownDivShow = true;
          this.delayTestButtonShow = false;
        } else if (msg.msg == "需要先进行即时测试") {
          console.log("进行即时测试");
          //随机音频播放次序
          this.one_flag=Math.floor(Math.random()*2);
          this.two_flag=Math.floor(Math.random()*2);
          /* for(let i=1;i<10;i++){
            console.log(Math.floor(Math.random()*2))
          } */
        } else {
          console.log(msg.data)
          switch (msg.data.length) {
            case 9:
              this.isDelay = true;
              this.beforeTime = false;
              this.memoryType = 2;
              this.countDownDivShow = false;
              this.delayTestButtonShow = true;
              this.correlationMemory = msg.data[0].id;
              let arr = msg.data[1].credentials.split('&');
              this.one_flag = JSON.parse(arr[0]);
              this.two_flag = JSON.parse(arr[1]);

              console.log(this.two_flag);
              break;
            case 10:
              this.$router.push("freeRecall");
              break;
            case 11:
              this.$router.push("pictureAssociation");
              break;
            case 12:
              this.$router.push("personRecall");
              break;
          }
        }
        this.quest = true;
      });
    },
    WordTest() {
      console.log("点击了我一下");
      this.isComplete = 0;
      this.begintime();
    },
    begintime() {
      console.log("执行了");
      var count = 0;
      let _this = this;
      this.timer = setInterval(function () {
        var h = parseInt(count / 1000 / 60 / 60);
        var m = parseInt(count / 1000 / 60) % 60;
        var s = parseInt(count / 1000) % 60;
        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;
        _this.time1 = h + "时" + m + "分" + s + "秒";
        count = count + 1000;
      }, 1000);
      console.log(this.timer);
    },
    isOk() {
      if (this.beforeTime) {
        this.$message({
          message: "30分钟未到，不能进行延时测试",
          type: "info",
        });
        return;
      }
      this.isComplete = 0;
      this.begintime();
      this.isok = true;
    },
    submit() {
      for (var i = 0; i <= 5; i++) {
        if (this.simple[i] == this.isSimple[this.one_flag][i]) {
          this.simpleResult++; //简单成绩
        }
      }
      for (var i = 0; i <= 5; i++) {
        if (this.hard[i] == this.isHard[this.two_flag][i]) {
          this.hardResult++; //复杂成绩
        }
      }
      console.log(this.simpleResult + "####" + this.hardResult);

      console.log(this.time1); //用时

      var question2 = {
        questionNo: "2",
        gradea: this.simpleResult,
        gradeb: this.hardResult,
        gradec: this.simpleResult + this.hardResult,
        mina: this.time1,
        memoryType: this.memoryType,
        correlationMemory: this.correlationMemory,
        status: this.status,
        credentials:JSON.stringify(this.one_flag)+"&"+JSON.stringify(this.two_flag)
      };
      if (this.memoryType == 1) {
        sessionStorage.setItem("question2", JSON.stringify(question2));
        console.log(sessionStorage.getItem("question2"));
        this.$router.push("freeRecall");
      } else if (this.memoryType == 2) {
        console.log("延时测试信息提交");
        this.userId = sessionStorage.getItem(
          "b80bb7740288fda1f201890375a60c8f"
        );
        this.$http.post(
          "memory/saveMemoryCheck", //后台接口地址
          {
            userId: this.userId,
            memoryCheck: [question2],
          },
          (res) => {
            if (parseInt(res.code) === 200) {
              this.$router.push("freeRecall");
            } else {
              this.$message({
                message: "服务器内部故障，请联系管理员",
                type: "error",
              });
            }
          }
        );
      }
      clearInterval(this.timer); //清空定时器
    },
    autoAudio1() {
      if(this.one_flag===0){
         this.$refs.audio1.play();
      }else if(this.one_flag===1){
         this.$refs.audio2.play();
      }
     
      let _this = this;
      setTimeout(function () {
        _this.complete = false;
      }, 20000);
    },
    autoAudio2() {
      if(this.two_flag===0){
           this.$refs.baudio1.play();
      }else if(this.two_flag===1){
          this.$refs.baudio2.play();
      }
     
      let _this = this;
      setTimeout(function () {
        _this.showButton = true;
      }, 20000);
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    },
    throttle(){
        clearTimeout(this.throttleTimer);
        this.throttleTimer = setTimeout(()=>{
            this.submit();
        },500)
    },
  },

  beforeDestroy() {
    console.log("我执行了摧毁");
    clearInterval(this.timer); //关闭定时器
  },
};
</script>

<style scoped>
#bd {
  margin-top: 20px;
}

.bTitle {
  font-size: 24px;
  color: #333333;
  text-align: left;
}

.sTitle {
  font-size: 20px;
  color: #333333;
  margin-left: 5%;
}

.el-row {
  margin-bottom: 5px;
  height: 30px;
}
.rc {
  margin-left: 10%;
}
.el-input {
  font-size: 20px;
}
.elc {
  margin-right: 75px;
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.el {
  width: 160px;
  line-height: 40px;
  margin: 20px 0;
  font-size: 24px;
}

.el-tag {
  line-height: 40px;
  height: 40px;
}

h5 {
  margin-top: 20px;
}

#table {
  margin-top: 20px;
}

#c1 {
  margin-top: 10px;
}
#c2 {
  width: 90%;
  margin: 0 auto;
}
#t1 {
  font-size: 20px;
  margin-top: 20px;
  margin-left: 80%;
}

.mp3 {
  height: 120px;
  margin-left: 35%;
  margin-top: 20px;
  display: flex;
}
#btn2 {
  margin-top: 60px;
  width: 170px;
  height: 48px;
  background: rgb(87, 172, 187);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 39px;
  color: white;
  margin-left: 20px;
}
#btn1 {
  margin-top: 60px;
}
#btn3 {
  margin-top: 20px;
}
#btn4 {
  margin-top: 30px;
  margin-left: 20px;
  width: 170px;
  height: 48px;
  background: rgb(87, 172, 187);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 39px;
  color: white;
}
.activeTask {
  background: url(../../assets/congnitiveAblitity/zhixing.png) no-repeat center;
  background-size: cover;
  /* background: black; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.glass {
  width: 932px;
  height: 720px;
  /* height: 593px; */
  background: rgba(255, 255, 255, 0.41);
  border: 3px solid rgb(255, 255, 255);
  box-shadow: 0px 3px 6px rgba(255, 255, 255);
  border-radius: 12px;
  margin: 1vh auto;
  position: relative;
}
.saveclass {
  background: rgb(87, 172, 187);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 39px;
  font-size: 20px;
  font-family: PingFang SC;
  color: #ffffff;
}
.btn-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>