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

<template>
  <div>
    <!--     <div style="width: 650px; margin: 20px auto; line-height: 2" v-if="!endFlag">
        <h2 style="margin-left:41%;margin-top:2%;">测试方法描述</h2>
        <p
            style="text-align: left; text-indent: 2em"
        >
          圆点数目16个，跟踪物体数目为4或5，初始为红色，其余点为绿色。运动速度等级为两个，运动时长5秒或10秒,实验共有8个等级，每个等级测{{ tnumber }}次。
          点击开始运动，所有点开始运动，运动结束后，点击选择你认为正确的点，选中状态的点为黄色，再次击即可取消选择，选择结束后，
          保存，然后重复上述过程，直至测试结束。
        </p>


        <el-button type="primary" style="margin-left:47%;" @click="Init(parameters[0])">开始</el-button>
      </div> -->
    <!--     <div class="desc_wrap" v-if="!endFlag">
        <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: left">
              <p>圆点数目16个，跟踪物体数目为4或5，初始为红色，其余点为绿色。运动速度等级为两个，运动时长5秒或10秒,实验共有8个等级，每个等级测{{ tnumber }}次。
          点击开始运动，所有点开始运动，运动结束后，点击选择你认为正确的点，选中状态的点为黄色，再次击即可取消选择，选择结束后，
          保存，然后重复上述过程，直至测试结束。</p>
              <p>{{subjectInfo.description}}</p>
            </div>
          </div>
          <div
            class="right_part"
            :style="{
              background:
                'url(' + require('../../assets/page27.png') + ')',
              'background-size': '100% 100%',
            }"
          >
            <div id="title">
              <span>目标追踪</span>
            </div>
            <div style="position: absolute; bottom: 30px; right: 42%">
              <el-button type="primary" class="start" @click="Init(parameters[0])">开始</el-button>
            </div>
          </div>
        </div>
      </div> -->

    <div
      v-if="testFlag"
      :class="{ testMainDiv: !testFlag, activeTask: testFlag }"
    >
      <div>
        <div
          style="width: 50%; margin-left: 15%; margin-top: 10px; float: left"
        >
          <el-progress
            class="main_progress"
            :text-inside="true"
            :format="format"
            :stroke-width="36"
            :percentage="(trainTime / 20) * 100"
          ></el-progress>
        </div>
        <div style="float: right; padding: 20px" @click.stop="screen()">
          <img src="../../assets/small-big.png" alt="" />
        </div>
      </div>
      <div id="main"></div>
      <el-button
        class="start"
        v-if="noclick"
        style="margin-left: 47%"
        @click="beginTest()"
        >开始运动</el-button
      >
      <el-button
        class="start"
        v-if="onsave"
        style="margin-left: 47%"
        @click="save()"
        >保存</el-button
      >
      <el-button
        class="start"
        style="margin-left: 47%"
        @click="submit()"
        >结束训练</el-button
      >
      <!--   <el-button @click="result()">跳转</el-button>  -->
    </div>

    <div v-if="endFlag">
      <h2 style="margin-left: 45%; margin-top: 2%">测试结果</h2>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{
          background: '#57acbb',
          color: '#ffffff',
          bordercolor: '#57acbb',
        }"
        style="width: 40%; margin-left: 30%; margin-top: 2%"
      >
        <el-table-column prop="level" label="难度等级" align="center">
        </el-table-column>
        <el-table-column prop="accary" align="center" label="正确率">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

  <script>
  import ecStat from "echarts-stat";
  import * as echarts from "echarts";
  import screenfull from "screenfull";

  export default {
    data() {
      return {
        sum: 0,
        tnumber: 1, //设置每个等级做几次
        endFlag: false,
        tableData: [],
        layer: 0,
        screen_flag: 0,
        a: 6,
        p: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21],
        data: [],
        data_item: [],
        sumdata: [],
        myChart: "",
        option: "",
        info: [],
        flag1: 0,
        flag2: 0,
        flag3: 0,
        id_true: "",
        result1: new Set(),
        noclick: true,
        count: "",
        speed: "",
        end: false,
        number: "",
        userId: "",
        testFlag: false,
        onsave: false,
        pam: [
          [1, 0.0008, 1],
          [2, 0.0008, 1],
          [2, 0.001, 1],
          [1, 0.0008, 2],
          [2, 0.0008, 2],
          [2, 0.001, 2],
          [1, 0.0008, 3],
          [2, 0.0008, 3],
          [2, 0.001, 3],
          [1, 0.0008, 4],
          [2, 0.0008, 4],
          [2, 0.001, 4],
          [1, 0.0008, 5],
          [2, 0.0008, 5],
          [2, 0.001, 5],
        ],
        parameters: [],
        grade: [],
        RandomArray: [
          [0.1, -0.1],
          [0.2, -0.2],
        ],
        angle: [Math.PI / 2, Math.PI, (Math.PI * 3) / 2],
        raid: [1, 3, 5],
        angle_speed: [0.05, 0.07],
        continuation: 0,
        trainTime: 0,
        currentLevel: 0,
        userRecords: [],
        startTime: 0,
      };
    },
    mounted() {
      this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f");
      console.log(this.userId);
      for (let i = 0; i < 15; i++) {
        for (let j = 1; j <= this.tnumber; j++) {
          this.parameters.push(this.pam[i]);
        }
      }
      console.log(this.parameters);
      this.Init(this.parameters[0]);
    },
    methods: {
      result() {
        this.$router.push({
          name: "TestResult",
          params: {
            result: [
              { name: "1", value: "25%" },
              { name: "2", value: "25%" },
            ],
          },
        });
      },
      screen() {
        // 如果不允许进入全屏，发出不允许提示
        // if (!screenfull.isEnabled) {
        //   this.$message("您的浏览器不能全屏");
        //   return false;
        // }
        screenfull.toggle();
      },
      format(percentage) {
        return percentage === 100 ? "任务进度" : "任务进度";
      },
      //生成随机点
      Init(array) {
        if (this.screen_flag == 0) {
          this.screen();
          this.screen_flag++;
        }
        this.testFlag = true;
        this.speed = array[1];
        if (array[0] == 1) {
          this.count = 25;
        } else if (array[0] == 2) {
          this.count = 50;
        }
        this.number = array[2];
        this.drawponit();
        this.sumdata.push(this.data);
        this.creatLine(array);
        this.drawline();
      },
      drawponit() {
        for (var i = 0; i < 16; i++) {
          if (i >= 0 && i <= 12) {
            let obj = {};
            let a = [];
            var j = parseInt(Math.random() * 11);
            var s = Math.random() * 6;
            var f = Math.floor(Math.random() * 16) / 10;
            a.push(this.a * Math.sin(this.p[j] * s));
            a.push(this.a * Math.sin((this.p[j] + 1) * s + f));
            this.data.push(a);
            obj.p = j;
            obj.s = s;
            obj.f = f;
            this.info.push(obj);
          } else if (i >= 13 && i <= 15) {
            let a = [];
            let r = this.raid[i - 13];
            a.push(r * Math.sin(this.angle[i - 13]));
            a.push(r * Math.cos(this.angle[i - 13]));
            console.log(a);
            this.data.push(a);
          }
        }
        console.log(this.data);
        this.checkPoint();
      },
      //检查随机点的位置距离是否过近，若是过近，重新生成相关随机点
      checkPoint() {
        for (var i = 0; i < 16; i++) {
          for (var j = i + 1; j < 16; j++) {
            if (
              Math.pow(Math.abs(this.data[i][0]) - Math.abs(this.data[j][0]), 2) +
                Math.pow(
                  Math.abs(this.data[i][1]) - Math.abs(this.data[j][1]),
                  2
                ) <
              0.5
            ) {
              console.log("笑了" + i + "  " + j);
              this.info = [];
              this.data = [];
              this.drawponit();
              return;
            }
          }
        }
      },
      //生成运动点轨迹
      creatLine(array) {
        let flag;
        if (array[1] == 0.0008) {
          flag = 0;
        } else if ((array[1] = 0.001)) {
          flag = 1;
        }
        //初始化this.speed
        let array_speed = [];
        if (array[1] == 0.0008) {
          for (let n = 0; n <= 9; n++) {
            array_speed.push(0.0008);
          }
        } else if ((array[1] = 0.001)) {
          for (let n = 0; n <= 9; n++) {
            array_speed.push(0.001);
          }
        }
        console.log(array_speed);

        let b = [];
        for (var q = 1; q < 70; q++) {
          this.data_item = [];
          this.flag1++;
          this.flag2++;
          for (let u = 0; u < 3; u++) {
            this.angle[u] += this.angle_speed[flag];
          }
          for (var j = 0; j < 16; j++) {
            if (j <= 9) {
              b = [];

              let x =
                this.a *
                Math.sin(
                  this.p[this.info[j].p] *
                    (this.info[j].s + array_speed[j] * this.flag1)
                );
              let y =
                this.a *
                Math.sin(
                  (this.p[this.info[j].p] + 1) *
                    (this.info[j].s + array_speed[j] * this.flag2) +
                    this.info[j].f
                );
              //判断此时生成的x 和y 与上次生成的x 和y 的关系,若是太小，则改变速度
              let x1 = this.sumdata[this.sumdata.length - 1][j][0];
              let y1 = this.sumdata[this.sumdata.length - 1][j][1];

              if (
                Math.abs(Math.abs(x) - Math.abs(x1)) +
                  Math.abs(Math.abs(y) - Math.abs(y1)) <
                0.08
              ) {
                console.log(j);
                array_speed[j] += 0.0003;
                console.log("x1:" + x + "  y1:" + y);
                x =
                  this.a *
                  Math.sin(
                    this.p[this.info[j].p] *
                      (this.info[j].s + array_speed[j] * this.flag1)
                  );
                y =
                  this.a *
                  Math.sin(
                    (this.p[this.info[j].p] + 1) *
                      (this.info[j].s + array_speed[j] * this.flag2) +
                      this.info[j].f
                  );
                console.log("x2:" + x + "  y2:" + y);
              }

              //x
              b.push(x);
              //y
              b.push(y);
              this.data_item.push(b);
            } else if (j >= 10 && j <= 12) {
              let x = [];
              x.push(
                this.sumdata[q - 1][j][0] +
                  this.RandomArray[flag][parseInt(Math.random() * 2)]
              );
              x.push(
                this.sumdata[q - 1][j][1] +
                  this.RandomArray[flag][parseInt(Math.random() * 2)]
              );
              this.data_item.push(x);
            } else if (j >= 13 && j <= 15) {
              b = [];
              let r = this.raid[j - 13];
              b.push(r * Math.sin(this.angle[j - 13]));
              b.push(r * Math.cos(this.angle[j - 13]));
              this.data_item.push(b);
            }
          }
          this.sumdata.push(this.data_item);
        }
        console.log(this.sumdata);
        this.checkLine();
      },
      checkLine() {
        for (let i = 0; i < 16; i++) {
          for (let j = i + 1; j < 16; j++) {
            if (
              Math.abs(
                this.sumdata[this.count][i][0] - this.sumdata[this.count][j][0]
              ) +
                Math.abs(
                  this.sumdata[this.count][i][1] - this.sumdata[this.count][j][1]
                ) <
              0.35
            ) {
              console.log(this.sumdata[this.count][i]);
              console.log(this.sumdata[this.count][j]);
              let sum =
                Math.abs(
                  this.sumdata[this.count][i][0] - this.sumdata[this.count][j][0]
                ) +
                Math.abs(
                  this.sumdata[this.count][i][1] - this.sumdata[this.count][j][1]
                );
              console.log(sum);
              this.count++;
              this.checkLine();
              return;
            }
          }
        }
      },
      drawline() {
        console.log(this.info);
        this.$nextTick(() => {
          this.myChart = echarts.init(document.getElementById("main"));
          echarts.registerTransform(ecStat.transform.clustering);
          const data = this.data;
          var CLUSTER_COUNT = 2;
          var DIENSIION_CLUSTER_INDEX = 2;
          var that = this;
          this.option = {
            backgroundColor: "transparent",
            dataset: [
              {
                source: data,
              },
              {
                transform: {
                  type: "ecStat:clustering",
                  config: {
                    clusterCount: CLUSTER_COUNT,
                    outputType: "single",
                    outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX,
                  },
                },
              },
            ],
            tooltip: {
              show: false,
            },
            grid: {
              left: 60,
            },
            xAxis: {
              type: "value", // 坐标轴类型
              name: "", // 名称
              min: -7, // 最小值
              max: 7, // 最大值
              axisLine: {
                //y轴
                show: false,
              },
              axisTick: {
                //y轴刻度线
                show: false,
              },
              splitLine: {
                //网格线
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },
            yAxis: {
              type: "value", // 坐标轴类型
              name: "", // 名称
              min: -7, // 最小值
              max: 7, // 最大值
              axisLine: {
                //y轴
                show: false,
              },
              axisTick: {
                //y轴刻度线
                show: false,
              },
              splitLine: {
                //网格线
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },
            series: {
              type: "scatter",
              encode: { tooltip: [0, 1] },
              symbol: "circle",
              symbolSize: 30,
              itemStyle: {
                color: function (params) {
                  if (that.end == false && that.result1.size != 0) {
                    for (let x of that.result1) {
                      if (
                        params.data[0] == that.sumdata[that.count][x - 1][0] &&
                        params.data[1] == that.sumdata[that.count][x - 1][1]
                      )
                        return "red";
                    }
                    return "#3F919F";
                  } else {
                    if (that.flag3 == 0) {
                      if (that.number == 5) {
                      if (params.data[0] == that.sumdata[0][0][0] && params.data[1] == that.sumdata[0][0][1]) {
                        return '#EF6262';
                      } else if (params.data[0] == that.sumdata[0][1][0] && params.data[1] == that.sumdata[0][1][1])
                        return '#EF6262';
                      else if (params.data[0] == that.sumdata[0][2][0] && params.data[1] == that.sumdata[0][2][1])
                        return '#EF6262';
                      else if (params.data[0] == that.sumdata[0][3][0] && params.data[1] == that.sumdata[0][3][1])
                        return '#EF6262';
                      else if (params.data[0] == that.sumdata[0][4][0] && params.data[1] == that.sumdata[0][4][1])
                        return '#EF6262';
                      else
                        return '#3F919F';
                    } else if (that.number == 4) {
                        if (
                          params.data[0] == that.sumdata[0][0][0] &&
                          params.data[1] == that.sumdata[0][0][1]
                        ) {
                          return "#EF6262";
                        } else if (
                          params.data[0] == that.sumdata[0][1][0] &&
                          params.data[1] == that.sumdata[0][1][1]
                        )
                          return "#EF6262";
                        else if (
                          params.data[0] == that.sumdata[0][2][0] &&
                          params.data[1] == that.sumdata[0][2][1]
                        )
                          return "#EF6262";
                        else if (
                          params.data[0] == that.sumdata[0][3][0] &&
                          params.data[1] == that.sumdata[0][3][1]
                        )
                          return "#EF6262";
                        else return "#3F919F";
                      } else if (that.number == 3) {
                        if (
                          params.data[0] == that.sumdata[0][0][0] &&
                          params.data[1] == that.sumdata[0][0][1]
                        ) {
                          return "#EF6262";
                        } else if (
                          params.data[0] == that.sumdata[0][1][0] &&
                          params.data[1] == that.sumdata[0][1][1]
                        )
                          return "#EF6262";
                        else if (
                          params.data[0] == that.sumdata[0][2][0] &&
                          params.data[1] == that.sumdata[0][2][1]
                        )
                          return "#EF6262";
                        else return "#3F919F";
                      } else if (that.number == 2) {
                        if (
                          params.data[0] == that.sumdata[0][0][0] &&
                          params.data[1] == that.sumdata[0][0][1]
                        ) {
                          return "#EF6262";
                        } else if (
                          params.data[0] == that.sumdata[0][1][0] &&
                          params.data[1] == that.sumdata[0][1][1]
                        )
                          return "#EF6262";
                        else return "#3F919F";
                      } else if (that.number == 1) {
                        if (
                          params.data[0] == that.sumdata[0][0][0] &&
                          params.data[1] == that.sumdata[0][0][1]
                        ) {
                          return "#EF6262";
                        }
                        else return "#3F919F";
                      }
                    } else if (that.flag3 == 1) {
                      if (that.end == false) return "#3F919F";
                      else {
                        if (that.number == 5) {
                        if (params.data[0] == that.sumdata[that.count][0][0] && params.data[1] == that.sumdata[that.count][0][1]) {
                          return '#EF6262';
                        } else if (params.data[0] == that.sumdata[that.count][1][0] && params.data[1] == that.sumdata[that.count][1][1])
                          return '#EF6262';
                        else if (params.data[0] == that.sumdata[that.count][2][0] && params.data[1] == that.sumdata[that.count][2][1])
                          return '#EF6262';
                        else if (params.data[0] == that.sumdata[that.count][3][0] && params.data[1] == that.sumdata[that.count][3][1])
                          return '#EF6262';
                        else if (params.data[0] == that.sumdata[that.count][4][0] && params.data[1] == that.sumdata[that.count][4][1])
                          return '#EF6262';
                        else
                          return '#3F919F';
                      } else if (that.number == 4) {
                          if (
                            params.data[0] == that.sumdata[that.count][0][0] &&
                            params.data[1] == that.sumdata[that.count][0][1]
                          ) {
                            return "#EF6262";
                          } else if (
                            params.data[0] == that.sumdata[that.count][1][0] &&
                            params.data[1] == that.sumdata[that.count][1][1]
                          )
                            return "#EF6262";
                          else if (
                            params.data[0] == that.sumdata[that.count][2][0] &&
                            params.data[1] == that.sumdata[that.count][2][1]
                          )
                            return "#EF6262";
                          else if (
                            params.data[0] == that.sumdata[that.count][3][0] &&
                            params.data[1] == that.sumdata[that.count][3][1]
                          )
                            return "#EF6262";
                          else return "#3F919F";
                        } else if (that.number == 3) {
                          if (
                            params.data[0] == that.sumdata[that.count][0][0] &&
                            params.data[1] == that.sumdata[that.count][0][1]
                          ) {
                            return "#EF6262";
                          } else if (
                            params.data[0] == that.sumdata[that.count][1][0] &&
                            params.data[1] == that.sumdata[that.count][1][1]
                          )
                            return "#EF6262";
                          else if (
                            params.data[0] == that.sumdata[that.count][2][0] &&
                            params.data[1] == that.sumdata[that.count][2][1]
                          )
                            return "#EF6262";
                          else return "#3F919F";
                        } else if (that.number == 2) {
                          if (
                            params.data[0] == that.sumdata[that.count][0][0] &&
                            params.data[1] == that.sumdata[that.count][0][1]
                          ) {
                            return "#EF6262";
                          } else if (
                            params.data[0] == that.sumdata[that.count][1][0] &&
                            params.data[1] == that.sumdata[that.count][1][1]
                          )
                            return "#EF6262";
                          else return "#3F919F";
                        } else if (that.number == 1) {
                          if (
                            params.data[0] == that.sumdata[that.count][0][0] &&
                            params.data[1] == that.sumdata[that.count][0][1]
                          ) {
                            return "#EF6262";
                          }
                          else return "#3F919F";
                        }
                      }
                    }
                  }
                },
              },
              datasetIndex: 1,
            },
          };

          this.option && this.myChart.setOption(this.option);
        });
      },
      beginTest() {
        this.startTime = new Date().getTime();
        this.sum++;
        var that = this;
        var flag = -1;
        this.flag3 = 1;
        this.noclick = false;
        this.option && this.myChart.setOption(this.option);
        setTimeout(function () {
          var id = setInterval(function () {
            flag++;
            console.log("flag:" + flag);
            if (flag > that.count) {
              clearInterval(id);
              that.myChart.on("click", function (params) {
                //点击事件
                that.scatterClick(params);
              });
              console.log(that.data);
            } else {
              for (var i = 0; i < 16; i++) {
                that.data[i][0] = that.sumdata[flag][i][0];
                that.data[i][1] = that.sumdata[flag][i][1];
              }
              that.myChart.setOption(that.option, true);
            }
          }, 300);
        }, 2000);
      },
      clearArray() {
        this.result1 = [];
      },
      scatterClick(params) {
        this.onsave = true;
        if (this.result1.size < this.number) {
          for (var i = 0; i < 16; i++) {
            if (
              this.sumdata[this.count][i][0] == params.data[0] &&
              this.sumdata[this.count][i][1] == params.data[1]
            ) {
              this.id_true = i + 1;
            }
          }
          //判断是否在set 数组中，如果在的话，移除，更新加载
          console.log("set集合：");
          console.log(this.result1);
          console.log("当前点击元素：" + this.id_true);
          if (this.result1.has(this.id_true)) {
            console.log("移除元素" + this.id_true);
            this.result1.delete(this.id_true);
            this.myChart.setOption(this.option, true);
          } else {
            console.log("加入元素：" + this.id_true);
            this.result1.add(this.id_true);
            this.myChart.setOption(this.option, true);
          }
        } else if (this.result1.size == this.number) {
          for (var i = 0; i < 16; i++) {
            if (
              this.sumdata[this.count][i][0] == params.data[0] &&
              this.sumdata[this.count][i][1] == params.data[1]
            ) {
              this.id_true = i + 1;
            }
          }
          if (this.result1.has(this.id_true)) {
            this.result1.delete(this.id_true);
            this.myChart.setOption(this.option, true);
          }
        }
      },
      save() {
        //正确率
        var count = 0;
        for (var x of this.result1) {
          if (x >= 1 && x <= this.number) {
            count++;
          }
        }
        var accary = count / this.number;
        this.grade.push(accary);
        this.userRecords.push({
            index: this.layer + 1,
            diff: this.pam[this.layer][2],
            velocity: this.pam[this.layer][1],
            duration: this.pam[this.layer][0] == 1 ? "5秒" : "10秒",
            targetNum: this.pam[this.layer][2],
            raghtRate: accary,
            responseTime: new Date().getTime() - this.startTime
        })
        // 计数连续正确次数
        if(accary >= 1) {
          this.continuation ++
        } else {
          this.continuation = 0
        }
        // 练习次数累计
        this.trainTime ++;
        //重置函数
        this.data = [];
        this.data_item = [];
        this.sumdata = [];
        this.myChart.dispose();
        this.option = "";
        this.info = [];
        this.flag1 = 0;
        this.flag2 = 0;
        this.flag3 = 0;
        this.id_true = "";
        this.result1.clear();
        console.log("mychart:" + this.myChart);
        console.log(this.result1);
        this.noclick = true;
        this.count = "";
        this.speed = "";
        this.end = false;
        this.number = "";
        if (this.layer >= 14) {
          this.testFlag = true;
        } else {
          this.testFlag = false;
        }
        this.onsave = false;
        this.RandomArray = [
          [0.1, -0.1],
          [0.2, -0.2],
        ];
        this.angle = [Math.PI / 2, Math.PI, (Math.PI * 3) / 2];
        this.raid = [1, 3, 5];
        this.angle_speed = [0.05, 0.07];
        if (this.layer >= 14 || this.trainTime >= 20) {
          this.submit();
        } else {
          // 开启下一级测试
          if(this.continuation == 3) {
            this.currentLevel ++;
            this.continuation = 0;
            this.layer = this.currentLevel * 3;
          } else {
            this.layer++;
            if(this.layer % 3 == 0) {
              this.layer = this.layer - 3;
            }
          }
          this.Init(this.parameters[this.layer]);
        }
      },
      submit() {
        // 退出全屏
        screenfull.exit();
        // 数据处理
        let indexList = [];
        let targetList = [];
        for(let i = 0; i < 5; i++) {
          targetList.push({
            targetCount: 0,
            rightRateCount: 0,
            responseTimeCount: 0
          })
        }
        this.userRecords.forEach((item, index) => {
          if(item.diff == 1) {
            targetList[0].targetCount += 1;
            targetList[0].rightRateCount += item.raghtRate;
            targetList[0].responseTimeCount += item.responseTime;
          }

          if(item.diff == 2) {
            targetList[1].targetCount += 1;
            targetList[1].rightRateCount += item.raghtRate;
            targetList[1].responseTimeCount += item.responseTime;
          }

          if(item.diff == 3) {
            targetList[2].targetCount += 1;
            targetList[2].rightRateCount += item.raghtRate;
            targetList[2].responseTimeCount += item.responseTime;
          }

          if(item.diff == 4) {
            targetList[3].targetCount += 1;
            targetList[3].rightRateCount += item.raghtRate;
            targetList[3].responseTimeCount += item.responseTime;
          }

          if(item.diff == 5) {
            targetList[4].targetCount += 1;
            targetList[4].rightRateCount += item.raghtRate;
            targetList[4].responseTimeCount += item.responseTime;
          }
        })

        for(let i = 0; i < 5; i++) {
          let temp = targetList[i]
          if(temp.targetCount != 0) {
            indexList.push({
              diff: i + 1,
              raghtRate: (temp.rightRateCount / temp.targetCount * 100).toFixed(2) + "%",
              averageTime: (temp.responseTimeCount / temp.targetCount).toFixed(2) + "ms",
            })
          }
        }

        this.$http.post(
          "cognize/MTT", //后台接口地址
          {
            userId: this.userId,
            userRecords: this.userRecords,
            indexList: indexList,
            testPlanId: this.$route.query.testPlanId || "",
          },
          (res) => {
            this.goTestResult(res.data);

            console.log(this.tableData);
          }
        );
      }
    },
  };
  </script>

  <style scoped>
.el-button.start /deep/ {
  border: 2px solid rgb(255, 255, 255);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 39px;
}
.testMainDiv {
  margin: 0 auto;
  margin-top: 10px;
  background: gray;
  background-size: cover;
  /* text-align:center; */

  /* object-fit:fill; */
}
.activeTask {
  background: url(../../assets/congnitiveAblitity/target_bg.png) no-repeat
    center;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#main {
  width: 53%;
  height: 600px;
  margin-left: 23%;
  margin-top: 10vh;
  margin-bottom: 10px;
  border-radius: 12px;
  /*   background: url(../../assets/5629.png) no-repeat;
    opacity: 0.8; */
  background: rgba(255, 255, 255, 0.41);
}
</style>