pbl-teacher-table/src/components/pages/kindStudentEva/test/report.vue

<template>
  <div class="report">
    <div
      style="background-color: #fff;width: 100%;height: 100%;box-sizing: border-box; padding: 15px;"
    >
      <div class="top">
        <div style="width: 348px;height: 40px;flex-shrink: 0;">
          <el-select
            v-model="year"
            @change="getData"
            style="width: 100%;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in termList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>

        <!-- <div class="topBtnS">
          <div class="btn">生成pdf</div>
          <div class="btn">分享报告</div>
        </div> -->
      </div>
      <div style="margin: 20px 10px;">学期综合表现</div>
      <div
        style="font-size: 20px;width: 100%;height: 200px;display: flex;justify-content: center;"
        v-if="isShow"
      >
        暂无数据
      </div>

      <div class="content" v-if="!isShow">
        <!-- <div class="conTitle" >
          <div>综合评价:</div>
          <div class="txt">表现优异，再接再厉!</div>
        </div> -->
        <div style="display: flex;width: 100%;justify-content: space-between;">
          <div class="radarCss">
            <radar
              ref="radar"
              :chartData="chartData"
              :categories="categories"
              :key="chartData.toString()"
            ></radar>
          </div>
          <div class="radarCss">
            <croColumnar
              ref="cro"
              :chartData="croColumnarData"
              :categories="categories"
              :key="croColumnarData.toString()"
            ></croColumnar>
          </div>
        </div>
      </div>
      <div></div>
    </div>


    <div v-if="!isShow">
      <div v-for="(i, index) in VeidooList" :key="i.id">
        <fieldMap
          :tid="i.id"
          :tit="i.name"
          :userid="userid"
          :year="year"
          :radarData="radarData"
          :key="radarData.toString()"
        ></fieldMap>
      </div>
    </div>
  </div>
</template>

<script>
import radar from "./component/radar.vue";

import croColumnar from "./component/croColumnar";
// import verColumnar from "./component/verColumnar";
import popTable from "./component/popTable";
import fieldMap from "./component/fieldMap";
export default {
  components: {
    radar,
    croColumnar,
    // verColumnar,
    popTable,
    fieldMap
  },
  props: {
    userid: {
      type: String
    },
    oid: {
      type: String
    },
    org: {
      type: String
    }
  },
  data() {
    return {
      year: "",
      // 学期数组
      termList: [],
      // dialogVisible: false,
      // 平均分柱状图数据
      croColumnarData: [1],

      // 雷达图数据
      chartData: [], //数据
      categories: ["1"], //标签    雷达图与平均分共用

      value: "",

      VeidooList: [], //大分类
      VeidooJsonList: [], //小分类

     
      // 后端获取的数据
      radarData: {},

      // 判断无数据的显示
      isShow: false
      
    };
  },
  methods: {
    //获取分类
    getVeidooType() {
      let params = {
        org: this.org,
        oid: this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectSTEType", params)
        .then(res => {
          var ftype = res.data[0]; //公共父级分类
          var stype = res.data[1]; //公共子级分类
          var sctype = res.data[2]; //该学校子级分类
          var fctype = res.data[3]; //该学校父级分类
          var fotype = res.data[4]; //组织父级分类
          var sotype = res.data[5]; //组织子级分类
          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 VeidooJson = {};
          for (var i = 0; i < allfType.length; i++) {
            this.ftypeId = allfType[0].id;
            if (!VeidooJson[allfType[i].id]) {
              VeidooJson[allfType[i].id] = [];
            }
            for (var j = 0; j < allsType.length; j++) {
              if (allfType[i].id == allsType[j].pid) {
                VeidooJson[allfType[i].id].push(allsType[j]); // 去除公共分类
              }
            }
          }

          this.VeidooList = allfType;
          this.VeidooJsonList = VeidooJson;

          console.log("  allfType", allfType);
          // console.log("  allsType", allsType);
          // this.$forceUpdate();

          let aaa = [];
          // 大分类标签
          allfType.forEach(e => {
            // console.log(e.name);
            aaa.push(e.name);
          });
          // 数据分类底部标签
          this.categories = aaa;

          // 雷达图数据
          this.countRadar();

          // 柱状图
          this.countCro();

          // 健康横向柱状图
          // this.healthCro();

          // 健康纵向柱状图
          // this.healthVer(allfType);
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
    },
    // 获取学期
    getYear() {
      this.isLoading = true;
      this.ajax
        .get(this.$store.state.api + "selectTerm")
        .then(res => {
          this.isLoading = false;
          var yearJuri = res.data[0];
          for (var i = 0; i < yearJuri.length; i++) {
            if (yearJuri[i].defaultC == 1) {
              this.year = yearJuri[i].id;
            }
          }
          this.termList = yearJuri;
          this.getData();

          this.getEvidence();
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
    },
    // 获取关键证据数据
    getEvidence() {
      // this.isLoading = true;
      let params = {
        uid: this.userid,
        year: this.year,
        txt: "c0f39c82-b34b-11ee-b534-005056b86db5",
        page: 1
      };

      this.ajax
        .get(this.$store.state.api + "selectHealthRecord", params)
        .then(res => {
          // console.log("获取关键证据数据", res);
          this.healthEvidence = res.data[0];
        }); //
    },
    // 获取打分数据
    getData() {
      // this.isLoading = true;

      let params = {
        uid: this.userid,
        year: this.year
      };
      // console.log("params", params);
      this.ajax
        .get(this.$store.state.api + "selectMapStuScore", params)
        .then(res => {
          // console.log("获取打分数据", res);

          this.isLoading = false;
          if (!res.data[0].length) {
            // this.clearRadarData();
            this.isShow = true;
            return;
          }

          this.isShow = false;
          let data = res.data[0][0];
          // console.log(JSON.parse(data.json));
          this.radarData = JSON.parse(data.json);

          console.log("this.radarData", this.radarData);
          this.getVeidooType();
          // this.getEvidence();

          // console.log(JSON.s);
          // this.$emit("selectData");
        });
    },
    // // 查询不到数据，清除内容
    // clearRadarData() {
    //   this.isShow = true;
    //   // 平均分柱状图数据
    //   this.croColumnarData = [];

    //   // 雷达图数据
    //   this.chartData = []; //数据
    //   this.categories = []; //标签    雷达图与平均分共用
    //   // categories: ["Series"],
    //   // chartTitle: "My Radar Chart",

    //   this.VeidooList = []; //大分类
    //   this.VeidooJsonList = []; //小分类

    //   // 健康横向柱状图数据
    //   this.healthCroData = [];
    //   this.healthCategories = [];

    //   // 关键证据数据
    //   this.healthEvidence = [];
    //   // 后端获取的数据
    //   this.radarData = {};
    // },

    // 雷达图数据
    countRadar() {
      // console.log("数据？", this.radarData);
      let raData = this.radarData;

      // 将数据复制在大分类里面用child来存储
      this.VeidooList.forEach(e => {
        // console.log(e);
        let fid = e.id;
        e.child = raData[fid];
        // console.log( raData[fid]);
      });

      // 将每个大分类下的小分类数据提取出来，在大分类下创建一个child2来存储
      this.VeidooList.forEach((e, k) => {
        e.child2 = [];
        e.child.forEach((i, index) => {
          e.child2.push(i[i.id]);
        });
      });

      // 第三次提取，将每个小分类的数据进行相加再除以小分类的长度得到平均值，再将平均值存储在大分类的num中
      let a = 0;
      let b = 0;
      let c = 0;
      this.VeidooList.forEach((e, k) => {
        e.num = [];
        e.child2.forEach((i, index) => {
          a = a + i[0];
          b = b + i[1];
          c = c + i[2];
        });
        a = (a / e.child2.length).toFixed(1);
        b = (b / e.child2.length).toFixed(1);
        c = (c / e.child2.length).toFixed(1);

        // 综合的柱状图，使用的是雷达图的数据再加工的数据。
        //toFixed会把数字转换成字符串，所以要转换成数字，不然柱状没法用
        e.num.push(a * 1, b * 1, c * 1);
        a = 0;
        b = 0;
        c = 0;
      });

      // 雷达图数据---- 最后把每个大分类下的num按照，第一次第二次第三次，存储到raDataCopy中，为
      let raDataCopy = [[], [], []];
      this.VeidooList.forEach((e, k) => {
        raDataCopy[0].push(e.num[0]);
        raDataCopy[1].push(e.num[1]);
        raDataCopy[2].push(e.num[2]);
      });
      // console.log("旧raDataCopy", raDataCopy);
      this.chartData = raDataCopy;
    },
    // 柱状图
    countCro() {
      // 平均分数柱状图数据----------
      let croMapData = [];
      this.chartData.forEach(e => {
        console.log(e);
        croMapData = this.addArrays(croMapData, e);
      });

      this.croColumnarData = croMapData.map(function(item) {
        return (item / 3).toFixed(1);
      });
    },

    // 数据相同下标相加组成一个新数组
    combineArrays(arrays) {
      const result = [];

      // 获取数组中的最大长度
      const maxLength = Math.max(...arrays.map(arr => arr.length));

      // 遍历每个下标
      for (let i = 0; i < maxLength; i++) {
        const combinedItem = [];

        // 遍历每个数组
        for (let j = 0; j < arrays.length; j++) {
          const array = arrays[j];

          // 检查当前下标是否存在于数组中
          if (i < array.length) {
            const item = array[i];

            // 将当前下标的字段添加到组合数组中
            combinedItem.push(item);
          }
        }

        // 将组合数组添加到结果数组中
        result.push(combinedItem);
      }

      return result;
    },

    // 数组相加
    addArrays(array1, array2) {
      const result = [];

      for (let i = 0; i < array2.length; i++) {
        const sum = (array1[i] || 0) + array2[i];
        result.push(sum);
      }

      return result;
    }
  },
  mounted() {},
  created() {
    this.getYear();
  }
};
</script>

<style scoped>
/deep/ .el-dialog {
  width: 1000px;
}
/deep/ .el-dialog__title {
  color: rgba(0, 0, 0, 0.9);
  text-align: center;
  font-family: "Microsoft YaHei";
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  line-height: 22px; /* 137.5% */
}
.report {
  box-sizing: border-box;
  padding: 15px;
  height: 100%;
  overflow-y: scroll;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-bottom: 10px;
}
.topBtnS {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-bottom: 10px;
}
.btn {
  border-radius: 8px;
  border: 1px solid #3681fc;
  color: rgba(54, 129, 252, 1);
  display: inline-flex;
  padding: 5px 16px;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  gap: 10px;
}
.content {
  width: 100%;
  height: 553px;
  flex-shrink: 0;
  border-radius: 16px;
  border: 1px solid var(--bg3, #e7e7e7);
  background: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.conTitle {
  width: 70%;
  margin: 20px auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.txt {
  flex: 1;
  width: 712px;
  height: 40px;
  line-height: 40px;
  flex-shrink: 0;
  border-radius: 4px;
  background: #f0f2f5;
  margin-left: 5px;
  box-sizing: border-box;
  padding: 0 15px;
}
.radarCss {
  width: 45%;
  height: 400px;
}
.proofCss {
  color: rgba(0, 0, 0, 0.9);
  font-family: "Microsoft YaHei";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.7px;
  margin-right: 20px;
}
.proofCss2 {
  width: 200px;
  text-align: left;
  box-sizing: border-box;
  padding: 4px 20px;
  color: rgba(0, 0, 0, 0.9);
  background-color: #f0f2f5;
  font-family: "Microsoft YaHei";
  border-radius: 3px;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.7px;
  margin-right: 20px;
}
.proofCells {
  width: 600px;
  /* background-color: aqua; */
  display: flex;
  flex-wrap: wrap;
}
.proofCells > .proofCell {
  width: 45%;
  margin-right: 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 8px;
  background: var(--bg, #f0f2f5);
}
</style>