pbl-teacher-table/src/components/pages/kindStudentEva/panel/index.vue

<template>
  <div class="i_body">
    <div class="i_body_title">个人总览</div>
    <div class="i_body_panel">
      <div class="i_icon"><span></span></div>
      <div class="i_detail">
        <div>
          <span>{{ count }}</span
          ><span>个</span>
        </div>
        <div>观察记录总数</div>
      </div>
    </div>
    <div class="i_body_panel" v-for="(item, index) in typeList" :key="index">
      <div class="i_icon"><span></span></div>
      <div class="i_detail">
        <div>
          <span>{{ item.count }}</span
          ><span>个</span>
        </div>
        <div>{{ item.name }}记录</div>
      </div>
    </div>
    <!-- <div class="i_body_panel">
      <div class="i_icon"><span></span></div>
      <div class="i_detail">
        <div>
          <span>{{ count2 }}</span
          ><span>个</span>
        </div>
        <div>语言记录</div>
      </div>
    </div>
    <div class="i_body_panel">
      <div class="i_icon"><span></span></div>
      <div class="i_detail">
        <div>
          <span>{{ count3 }}</span
          ><span>个</span>
        </div>
        <div>社会记录</div>
      </div>
    </div>
    <div class="i_body_panel">
      <div class="i_icon"><span></span></div>
      <div class="i_detail">
        <div>
          <span>{{ count4 }}</span
          ><span>个</span>
        </div>
        <div>科学记录</div>
      </div>
    </div>
    <div class="i_body_panel">
      <div class="i_icon"><span></span></div>
      <div class="i_detail">
        <div>
          <span>{{ count5 }}</span
          ><span>个</span>
        </div>
        <div>艺术记录</div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  props: {
    userid: {
      type: String
    },
    oid: {
      type: String
    },
    org: {
      type: String
    }
  },
  data() {
    return {
      test: [],
      work: [],
      count: 0,
      // count1: 0,
      // count2: 0,
      // count3: 0,
      // count4: 0,
      // count5: 0,
      typeList: []
    };
  },
  methods: {
    getData() {
      let params = {
        uid: this.userid,
        oid: this.oid,
        org: this.org
      };
      this.ajax
        .get(this.$store.state.api + "selectSRecordY", params)
        .then(res => {
          console.log("总学习记录数量", res);
          this.count = res.data[0].length; //总学习记录数量
          var data = res.data[0]; //总学习记录
          var ftype = res.data[1]; //公共父级分类
          var stype = res.data[2]; //公共子级分类
          var sctype = res.data[3]; //该学校子级分类
          var fctype = res.data[4]; //该学校父级分类
          var fotype = res.data[5]; //组织父级分类
          var sotype = res.data[6]; //组织子级分类
          var allfType = [];
          var allsType = [];
          if (fotype.length == 0 && sotype.length == 0) {
            if (fctype.length == 0 && sctype.length == 0) {
              for (var i = 0; i < ftype.length; i++) {
                allfType.push(ftype[i]);
              }
              for (var i = 0; i < stype.length; i++) {
                allsType.push(stype[[i]]);
              }
            } else {
              for (var i = 0; i < fctype.length; i++) {
                allfType.push(fctype[i]);
              }
              for (var i = 0; i < sctype.length; i++) {
                allsType.push(sctype[[i]]);
              }
            }
          } else {
            for (var i = 0; i < fotype.length; i++) {
              allfType.push(fotype[i]);
            }
            for (var i = 0; i < sotype.length; i++) {
              allsType.push(sctysotypepe[[i]]);
            }
          }
          var typeList = []; //记录子分类id（只有id）
          for (var i = 0; i < data.length; i++) {
            var a = data[i].type.split(",");
            if (a.length > 1) {
              for (var j = 0; j < a.length; j++) {
                typeList.push(a[j]);
              }
            } else {
              typeList.push(a[j]);
            }
          }
          var typeList1 = []; //记录子分类id（id，名字，pid）
          for (var i = 0; i < allsType.length; i++) {
            for (var j = 0; j < typeList.length; j++) {
              if (typeList[j] == allsType[i].id) {
                typeList1.push(allsType[i]);
              }
            }
          }
          // 是按照，上面总条数来循环下面的数据的条数的，只用父级循环，不能用子集，
          //不然子集的循环数据会重复，导致数据重复
          // console.log('allfType',allfType);
          // console.log('stype',stype);

          // 将每个大分类下的小分类数据提取出来，在大分类下创建一个child来存储
          allfType.forEach(e => {
            e.child = [];
            stype.forEach(i => {
              if (e.id == i.pid) {
                e.child.push(i.id);
              }
            });
          });

          // console.log("allfType1111111111", allfType);

          // 将数据所选的小分类变成数组
          data.forEach(e => {
            e.type = e.type.split(",");
          });
          // console.log("data", data);

          var ftypeList1 = [];

          allfType.forEach(e => {
            var count = 0;
            data.forEach(d => {
              let arr = [];
              arr = e.child.filter(value => d.type.includes(value));
              if (arr.length > 0) {
                count++;
              }
            });
            ftypeList1.push({
              id: e.id,
              name: e.name,
              count: count
            });
          });
          // console.log("ftypeList1", ftypeList1);

          // var ftypeList1 = [];
          // for (var i = 0; i < allfType.length; i++) {
          //   var count = 0;
          //   for (var j = 0; j < typeList1.length; j++) {
          //     if (allfType[i].id == typeList1[j].pid) {
          //       count++;
          //     }
          //   }
          //   ftypeList1.push({
          //     id: allfType[i].id,
          //     name: allfType[i].name,
          //     count: count,
          //   });
          // }
          this.typeList = ftypeList1;
          // console.log('this.typeList',this.typeList);
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped>
.i_body {
  width: 100%;
  height: 60%;
  min-height: 420px;
  background: #fff;
  border-radius: 10px;
  /* margin-bottom: 10px; */
  box-sizing: border-box;
  padding-bottom: 30px;
  overflow: auto;
  /* padding-bottom: 60px; */
}

.i_body_title {
  margin: 25px auto 15px;
  font-size: 20px;
  text-align: center;
}
.i_body_panel {
  width: 90%;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  box-sizing: border-box;
  border-radius: 5px;
  margin: 0 auto;
  border: 1px solid #dbdbdb;
  background: rgb(252, 252, 252);
}
.i_body_panel + .i_body_panel {
  margin-top: 10px;
}
.i_body_panel > .i_icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.i_body_panel:nth-child(2) > .i_icon {
  background: rgb(54, 129, 252);
}
.i_body_panel:nth-child(2) > .i_icon > span {
  display: block;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-image: url("../../../../assets/icon/studentEva/img_1.png");
}
.i_body_panel:nth-child(3) > .i_icon {
  background: rgb(23, 196, 105);
}
.i_body_panel:nth-child(3) > .i_icon > span {
  display: block;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-image: url("../../../../assets/icon/studentEva/img_2.png");
}
.i_body_panel:nth-child(4) > .i_icon {
  background: rgb(230, 127, 54);
}
.i_body_panel:nth-child(4) > .i_icon > span {
  display: block;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-image: url("../../../../assets/icon/studentEva/img_3.png");
}
.i_body_panel:nth-child(5) > .i_icon {
  background: rgb(54, 192, 230);
}
.i_body_panel:nth-child(5) > .i_icon > span {
  display: block;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-image: url("../../../../assets/icon/studentEva/img_4.png");
}
.i_body_panel:nth-child(6) > .i_icon {
  background: rgb(54, 192, 230);
}
.i_body_panel:nth-child(6) > .i_icon > span {
  display: block;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-image: url("../../../../assets/icon/studentEva/img_5.png");
}
.i_body_panel:nth-child(7) > .i_icon {
  background: rgb(54, 192, 230);
}
.i_body_panel:nth-child(7) > .i_icon > span {
  display: block;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-image: url("../../../../assets/icon/studentEva/img_1.png");
}
.i_body_panel > .i_detail {
  width: clac(100% - 50px);
}
.i_body_panel > .i_detail > div:nth-child(1) {
  font-size: 12px;
}

.i_body_panel > .i_detail > div:nth-child(1) > span:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  margin-right: 5px;
}
.i_body_panel > .i_detail > div:nth-child(2) {
  color: #a1a1a1;
  font-size: 12px;
  margin-top: 0px;
}
</style>