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

<template>
  <div class="bd activeTask">
    <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>
        <el-row>
          <el-col :span="12">
            <h3 class="bTitle">6.视觉空间记忆</h3>
          </el-col>
          <el-col :span="12" style="text-align: center">
            <div
              style="
                height: 36px;
                background: rgba(0, 0, 0, 0.39);

                border-radius: 24px;
                color: #ffffff;
                padding-top: 10px;

                margin-left: 250px;
                padding-right: 10px;
              "
              v-if="isbegin == true"
              v-bind:text-content.prop="time1 + '(用时)'"
            >
              用时
            </div>
          </el-col>
        </el-row>

        <el-card
          style="
            margin-top: 20px;
            background-color: white;
            width: 90%;
            margin-left: 5%;
          "
        >
          <p style="text-align: left">
            屏幕呈现一个方形矩阵，里面的方块随机点亮，需要被试准确记住点亮方块的具体位置，再后续测查中还原点亮方块的位置，同一个难度有2次机会，两次全部做错后结束测试，做对任何一个进行下一难度测试。成绩：做对一个加1分
          </p>
        </el-card>
      </div>

      <div class="txt-center">
        <el-button
          v-if="isbegin == false"
          style="margin-top: 10%"
          class="start-bb"
          @click="begin"
          >开始测试>></el-button
        >
      </div>
      <div v-if="isbegin == true">
        <div class="rubik">
          <div
            v-for="(item, index) in imgGroup"
            :key="index"
            :style="styleItem"
            @click="btn(index)"
          >
            <el-image :src="item.url" />
          </div>
        </div>
        <div class="txt-center">
          <!--<el-button style="margin-top: 5px" class="start-bb" @click="check" :disabled="choice">提交</el-button>-->
          <el-button style="margin-top: 5px" class="start-bb" @click="throttle" :disabled="choice">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  data() {
    return {
      width: 3, //表示的是方块一行个数
      height: 3, //表示的是方块一列的列数
      //根据width和height的乘积来生成新的imgGroup,并初始化为全部不亮
      leval: 1,
      isbegin: false, //是否点击开始按钮
      // isdisplaycomplete: false,
      time1: "00时00分00秒",
      flag1: 0,
      flag2: 0,
      grades1: 0,
      grade: 0,
      timer: "",
      memoryType: 1,
      correlationMemory: "",
      status: 1,
      userId: "",
      choice:true,
      ssss:true,
      result: 0, //保存第一次测试错误的成绩
      /**
       * 默认等级是一级,一级点亮三，二级点亮四，点亮的个数为2+leval
       *                     l,w
       * 看leval与长和宽的关系，1)33    2)34 l+1   3)44 w+1    4)45 l+1     5)55
       * this.width=3  this.height=3(初值)  根据leval的值，及现在的width 和height 的值生成下一等级的weight 和height
       *
       * 根据weight 和 height 的值来确定 计算方块的长度和宽度，绑定小块的样式
       *
       *
       */
      styleItem: {
        width: "150px", //绑定的是方块的宽度
        height: "150px", //绑定的是方块的高度
        background: "#dddddd",
        padding: "2px",
        "box-sizing": "border-box",
      },
      buttonItem: {
        float: "left",
        width: "90px", //绑定的是方块的宽度
        height: "90px", //绑定的是方块的高度
        background: "#bbbbbb",
        padding: "2px",
        color: "#ffffff",
      },
      isArray: [0, 0, 0, 0, 0, 0, 0, 0, 0], //保存的isArray,变
      displayArray: [0, 0, 0, 0, 0, 0, 0, 0, 0], //保存生成的亮点与isArray做比较，变
      //保存等级1的结果
      imgGroup: [
        //初始要渲染的数组，变

        { url: require("../../../public/static/assets/black.png") },
        { url: require("../../../public/static/assets/black.png") },
        { url: require("../../../public/static/assets/black.png") },

        { url: require("../../../public/static/assets/black.png") },
        { url: require("../../../public/static/assets/black.png") },
        { url: require("../../../public/static/assets/black.png") },

        { url: require("../../../public/static/assets/black.png") },
        { url: require("../../../public/static/assets/black.png") },
        { url: require("../../../public/static/assets/black.png") },
      ],
      isShow: true,
      throttleTimer: null, //防重复点击
    };
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  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();
    },
    btn(i) {
      if (this.isShow) {
        return;
      }
      //点击的时候改变isArray的值，作为最终的结果要比较
      if (this.isArray[i] == 0) {
        this.isArray[i] = 1;
        this.imgGroup[
          i
        ].url = require("../../../public/static/assets/light.png");
        console.log("亮了");
      } else if (this.isArray[i] == 1) {
        this.isArray[i] = 0;
        this.imgGroup[
          i
        ].url = require("../../../public/static/assets/black.png");
        console.log("灭了");
      }
    },
    //生成一个随机函数，输入获取随机数的个数和最大值，产生n个不同的随机数
    randomLight(n, max) {
      var s = new Set();
      var i = 0;
      while (i < n) {
        var a = Math.floor(Math.random() * max);
        s.add(a);
        i = s.size;
      }
      return s;
    },
    randomImage() {
      this.isShow = true;
      this.set = this.randomLight(this.leval + 2, this.width * this.height); //返回产生的n个随机值
      for (let x of this.set) {
        this.displayArray[x] = 1;
        this.imgGroup[
          x
        ].url = require("../../../public/static/assets/light.png"); //点亮
      }
      // 延时2秒之后恢复
      let _this = this;
      _this.choice=true;
      setTimeout(function () {
        
        _this.choice=false;
        for (let x of _this.set) {
          _this.imgGroup[
            x
          ].url = require("../../../public/static/assets/black.png"); //熄灭
        }
        _this.isShow = false;
      }, 2000);
    },
    begin() {
      //开启定时器
      this.beginTest();
      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);
    },
    beginTest() {
      //点击开始测试
      this.ssss=true;
      this.isbegin = true;
      this.randomImage();

      //开始

      let _this = this;

      /*  setTimeout(function () {
        _this.isdisplaycomplete = true;
      }, 6000); */
    },
    check() {
      //检查成绩
     
       if (!this.ssss) {
        return;
      } 
      this.ssss=false;
      this.isShow=true;
      console.log("displayArray:" + this.displayArray);
      console.log("isArray:" + this.isArray);
      /**
       * 判断成绩是否正确，正确的保存成绩，进行下一关测试，如果不正确，要不要存储成绩？
       * 其次是要考虑如果第二次也没通过，保存的是第一次的成绩还是第二次的成绩
       * 考虑第二次如何实现
       */
      /*  
         四种情况 
         a. 两次都对的            //进入下一个等级  flag2==2
         c. 第一次错的，第二次对的 //进入下一个等级  flag1==1 flag2==1
         d. 两次都错的            //保存成绩，结束测试flag2==2
         b. 第一次对，第二次错的   //进入下一个等级  flag1==1 flag2==1
       */
      if (this.displayArray.toString() == this.isArray.toString()) {
        this.flag2++;
        this.result = 0;
        /**
         * 20210920 应客户要求，暂时注释提示信息
         */
        // this.$message({
        //   message: "正确，即将进入下一级测试",
        //   type: "info",
        // });
        this.grades1 = this.grades1 + this.leval + 2; //成绩
        console.log("成绩正确：" + this.grades1);
        //保存这次测试正确的成绩，开始判断此时的测试位于和位置
        //a.两次都正确的情况,第一次错，第二次对的情况下，要进入下一等级
        if (this.flag2 == 2 || (this.flag1 == 1 && this.flag2 == 1)) {
          if (this.flag2 == 2) {
            this.grade = this.grade + 2;
            console.log("fuck:" + this.grade);
          }
          if (this.flag1 == 1 && this.flag2 == 1) {
            this.grade = this.grade + 1;
            console.log("fuck:" + this.grade);
          }
          //构造第二关布局：
          this.leval++; //等级+1
          this.flag1 = 0;
          this.flag2 = 0;
          //先改width和height
          if (this.leval % 2 == 0) {
            this.height++;
          } else {
            this.width++;
          }
          //根据width和height对改变的数组做一系列初始化
          let arr1 = new Array(this.width * this.height);
          for (var i = 0; i < arr1.length; i++) {
            arr1[i] = 0;
          }
          //重置这两个一个用于保存点亮信息，一个用于比较的数组，一个用于比较的数组
          this.isArray = arr1;

          let arr3 = new Array(this.width * this.height);
          for (var i = 0; i < arr3.length; i++) {
            arr3[i] = 0;
          }
          //重置这两个一个用于保存点亮信息，一个用于比较的数组，一个用于比较的数组
          this.displayArray = arr3;

          //初始化布局
          var w1 = 450 / this.width;
          var h1 = 450 / this.height;
          var w2 = 270 / this.width;
          var h2 = 270 / this.height;
          this.styleItem.width = w1.toString() + "px";
          this.styleItem.height = h1.toString() + "px";
          this.buttonItem.width = w2.toString() + "px";
          this.buttonItem.height = h2.toString() + "px";
          //初始化ImgGroup
          let arr2 = new Array(this.width * this.height);
          for (var i = 0; i < arr2.length; i++) {
            arr2[i] = {
              url: require("../../../public/static/assets/black.png"),
            };
          }
          this.imgGroup = arr2;

          //开始进行第二关测试
          let _this = this;
          setTimeout(function () {
            _this.beginTest();
            // _this.isdisplaycomplete = false;
            _this.flag1 = 0; //重置flag
          }, 1000);
        } else if (this.flag1 == 0 && this.flag2 == 1) {
          //第一次正确的话，再测一次
          for (let i = 0; i < this.displayArray.length; i++) {
            this.displayArray[i] = 0;
            this.isArray[i] = 0; //归零
          }
          for (var i = 0; i < this.imgGroup.length; i++) {
            this.imgGroup[
              i
            ].url = require("../../../public/static/assets/black.png");
          }
          let _this = this;
          setTimeout(function () {
            _this.beginTest();
          }, 1000);
        }
      } else {
        //成绩不正确
        this.flag1++;
        console.log("flag1:" + this.flag1);
        let g1 = 0;
        for (let i = 0; i < this.displayArray.length; i++) {
          if (
            this.displayArray[i] == this.isArray[i] &&
            this.displayArray[i] == 1
          ) {
            g1++; //计算成绩
          }
        }
        this.grades1 = this.grades1 + g1;
        console.log("成绩：" + this.grades1);
        //第一次对了，第二次错了，进入下一关
        if (this.flag1 == 1 && this.flag2 == 1) {
          this.grade = this.grade + 1;
          console.log("fuck:" + this.grade);
          this.leval++; //等级+1
          this.flag1 = 0;
          this.flag2 = 0;
          //先改width和height
          if (this.leval % 2 == 0) {
            this.height++;
          } else {
            this.width++;
          }
          //根据width和height对改变的数组做一系列初始化
          let arr1 = new Array(this.width * this.height);
          for (var i = 0; i < arr1.length; i++) {
            arr1[i] = 0;
          }
          //重置这两个一个用于保存点亮信息，一个用于比较的数组，一个用于比较的数组
          this.isArray = arr1;

          let arr3 = new Array(this.width * this.height);
          for (var i = 0; i < arr3.length; i++) {
            arr3[i] = 0;
          }
          //重置这两个一个用于保存点亮信息，一个用于比较的数组，一个用于比较的数组
          this.displayArray = arr3;

          //初始化布局
          var w1 = 450 / this.width;
          var h1 = 450 / this.height;
          var w2 = 270 / this.width;
          var h2 = 270 / this.height;
          this.styleItem.width = w1.toString() + "px";
          this.styleItem.height = h1.toString() + "px";
          this.buttonItem.width = w2.toString() + "px";
          this.buttonItem.height = h2.toString() + "px";
          //初始化ImgGroup
          let arr2 = new Array(this.width * this.height);
          for (var i = 0; i < arr2.length; i++) {
            arr2[i] = {
              url: require("../../../public/static/assets/black.png"),
            };
          }
          this.imgGroup = arr2;

          //开始进行第二关测试
          let _this = this;
          setTimeout(function () {
            _this.beginTest();
            // _this.isdisplaycomplete = false;
            _this.flag1 = 0; //重置flag
          }, 1000);
          //如果第一次错了，再测一次
        } else if (this.flag1 == 1 && this.flag2 == 0) {
          for (let i = 0; i < this.displayArray.length; i++) {
            this.displayArray[i] = 0;
            this.isArray[i] = 0; //归零
          }
          for (var i = 0; i < this.imgGroup.length; i++) {
            this.imgGroup[
              i
            ].url = require("../../../public/static/assets/black.png");
          }
          let _this = this;
          setTimeout(function () {
            _this.beginTest();
          }, 1000);
          //如果两次都错了
        } else if (this.flag1 == 2) {
          console.log("flag1是：" + this.flag1);
          console.log("time1是" + this.time1);
          clearInterval(this.timer);
          //调用save保存成绩,清空定时器，结束测试
          var question6 = {
            questionNo: "6",
            gradea: this.grade,
            gradeb: this.leval + 1,
            mina: this.time1,
            memoryType: this.memoryType,
            correlationMemory: this.correlationMemory,
            status: this.status,
          };
          sessionStorage.setItem("question6", JSON.stringify(question6));

          //提交成绩
          if (this.memoryType == 1) {
            //提交数据，路由跳转
            this.$router.push("prospectMemory");
          }
        }
      }
    },
    throttle(){
        clearTimeout(this.throttleTimer);
        this.throttleTimer = setTimeout(()=>{
            this.check();
        },500)
    },
  },
};
</script>

<style scoped>
.bd {
  /* margin-top: 20px; */
}

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

.sTitle {
  font-size: 20px;
  color: #333333;
  text-align: left;
}

.rubik {
  width: 450px;
  height: 450px;
  margin: 20px auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#t1 {
  font-size: 20px;
  margin-top: 30px;
  margin-left: 78%;
}

.el-image {
  height: 100%;
  width: 100%;
}
.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;
}
.start-bb {
  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;
}
</style>