pbl-teacher-table/src/components/pages/sassPlatform/view/databoard.vue

<template>
  <div
    class="pb_content"
    style="height: auto; width: calc(100%); margin: 0 auto;background: unset;"
  >
    <div class="bbox_serch">
      <el-select
        v-model="selectTime"
        placeholder="请选择"
        size="small"
        style="margin:0 10px 0 10px;"
        v-if="timeSort.length > 1"
        @change="changeTimeSort"
      >
        <el-option
          v-for="item in timeSort"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <Cascader
        :options="typeInfo"
        v-if="typeInfo.length"
        @setTeacher="setTeacher"
      ></Cascader>
    </div>
    <div class="bbox" v-loading="tabLoading">
      <div class="bbox_nav">
        <div class="teaLis">
          <div
            class="teal"
            @click="cutPage(2)"
            :class="[pType == 2 ? 'Tbor' : '']"
            v-if="bArray.length"
          >
            专任教师
          </div>
          <div
            class="teal"
            @click="cutPage(1)"
            :class="[pType == 1 ? 'Tbor' : '']"
            v-if="aArray.length"
          >
            班主任
          </div>
        </div>
        <el-select
          v-model="checkSet"
          @change="setArray"
          style="margin-left: auto"
        >
          <el-option label="综合排序" value=""> </el-option>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="randarZong">
        <radarZong
          :evCourseArray="zongJson"
          :evCourseArray2="zongJson2"
          v-if="checkSet"
        ></radarZong>
        <radarZong
          :evCourseArray="zongJson2"
          :evCourseArray2="{}"
          v-else
        ></radarZong>
      </div>
      <div class="randarBox">
        <div class="title">教师详情</div>
        <div
          class="randarTeacher"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="randarTitle">
            <span>{{ item.username }}</span>
            <span>{{ item.score }}</span>
          </div>
          <div class="randar">
            <radarTeacher
              :evCourseArray="zongJson2"
              :evCourseArray2="item.json"
            ></radarTeacher>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var OpenCC = require("opencc-js");
let converter = OpenCC.Converter({
  from: "hk",
  to: "cn"
});

import radarZong from "./dataCom/radarZong.vue";
import radarTeacher from "./dataCom/radarTeacher.vue";

import Cascader from "./dataCom/cascader.vue";

export default {
  name: "testDataBoard",
  components: { radarZong, radarTeacher, Cascader },
  data() {
    return {
      userid: this.$route.query.userid, //用户id
      oid: this.$route.query.oid, //学校id
      org: this.$route.query.org, //组织id
      pType: 2,
      teacherName: "",
      tabLoading: false,
      tableData: [],
      zongJson: {},
      zongJson2: {},
      checkSet: "",
      options: [],
      data: [],
      typeInfo: [],
      teacherArray: [],
      aArray: [],
      bArray: [],
      timeSort: [],
      selectTime: ""
    };
  },
  computed: {
    getScore() {
      return item => {
        let score = 0;
        for (var i = 0; i < item.length; i++) {
          score += item[i].cogScore;
        }
        score = (score / item.length).toFixed(0);
        return score;
      };
    }
  },
  methods: {
    getPageBase2(type) {
      let params = {
        typ: type,
        org: this.org,
        oid: this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectTestExamineBase", params)
        .then(res => {
          console.log("1111111111111111111111", res.data);

          if (type == 1) {
            this.aArray = res.data[0];
          } else {
            this.bArray = res.data[0];
            if (!this.bArray.length) {
              this.cutPage(2);
            }
          }
          this.timeSort = res.data[0].map(item => {
            return {
              label: item.timeName,
              id: item.time,
              time: item.timeName.split("~")[0]
            };
          });
          if (this.timeSort.length > 0) {
            this.selectTime = this.timeSort[0].id;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    goTo(path) {
      this.$router.push(path);
    },
    cutPage(type) {
      this.checkSet = "";
      this.pType = type;
      this.getData();
    },
    scoreChildren(children) {
      let score = 0;
      children.forEach(item => {
        if (item.sco2 && parseFloat(item.sco2) > 0) {
          score += parseFloat(item.sco2);
        }
      });
      return score;
    },
    getData() {
      this.tabLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
          type: this.pType,
          tname: this.teacherName
        }
      ];
      // console.log(params);
      this.ajax
        .post(this.$store.state.api + "selectTestExaminePersonData2", params)
        .then(res => {
          let data = res.data[0];

          data.forEach(e => {
            e.json = JSON.parse(e.json);
          });

          if (this.selectTime && this.timeSort.length > 1) {
            data = data.filter(item => item.time == this.selectTime);
          }

          data.forEach(e => {
            e.evaSca = 0;
            e.cogSco = 0;
            e.step = 0;
            e.allStep = 0;

            e.json.forEach(i => {
              i.evaScore = 0; // 自评
              i.cogScore = 0; //考核
              i.score = 0; //考核
              i.children.forEach(k => {
                e.evaSca = e.evaSca + k.sco1 * 1;
                e.cogSco = e.cogSco + k.sco2 * 1;
                i.evaScore = i.evaScore + k.sco1 * 1;
                i.cogScore = i.cogScore + k.sco2 * 1;
                i.score = i.score + k.score * 1;
                e.allStep++;
                if (!!k.sco2 * 1) {
                  e.step++;
                }
              });
            });
          });

          data.forEach(e => {
            if (e.step == e.allStep) {
              e.state = "已完成";
            } else {
              e.state = "未完成";
            }
            if (!e.tea) {
              e.tea = "";
            }
            e.evaSca = e.evaSca.toFixed(0);
            e.cogSco = e.cogSco.toFixed(0);
          });
          let _data = [];
          let zongJson = {};
          // zongJson.count = data.length
          data.forEach((e, index) => {
            _data[index] = {};
            _data[index].username = e.username;
            _data[index].evaSca = e.evaSca;
            _data[index].cogSco = e.cogSco;
            _data[index].json = [];

            e.json.forEach((i, iindex) => {
              if (
                converter(i.name) == converter("科组评价") ||
                converter(i.name) == converter("行政巡查")
              ) {
                return;
              }
              _data[index].json[iindex] = {};
              _data[index].json[iindex].name = i.name;
              let _evaScore = parseInt(
                (i.evaScore * (100 / i.score)).toFixed(0)
              );
              let _cogScore = parseInt(
                (i.cogScore * (100 / i.score)).toFixed(0)
              );
              _data[index].json[iindex].evaScore = _evaScore; // 自评
              _data[index].json[iindex].cogScore = _cogScore; // 考核
              zongJson[i.name] ? "" : (zongJson[i.name] = {});
              zongJson[i.name].evaScore
                ? (zongJson[i.name].evaScore += _evaScore)
                : (zongJson[i.name].evaScore = _evaScore);
              zongJson[i.name].cogScore
                ? (zongJson[i.name].cogScore += _cogScore)
                : (zongJson[i.name].cogScore = _cogScore);
            });
          });
          let zongArray = Object.keys(zongJson);
          for (var i = 0; i < zongArray.length; i++) {
            zongJson[zongArray[i]].evaScore = (
              zongJson[zongArray[i]].evaScore / data.length
            ).toFixed(0);
            zongJson[zongArray[i]].cogScore = (
              zongJson[zongArray[i]].cogScore / data.length
            ).toFixed(0);
          }

          this.tableData = _data
            .filter(e => {
              e.score = this.getScore(e.json);
              return e;
            })
            .sort((a, b) => b.score - a.score);
          console.log(this.tableData);
          this.zongJson = zongJson;
          this.zongJson2 = zongJson;
          console.log(zongJson);
          this.options = Object.keys(zongJson).map(item => {
            return { label: item, value: item };
          });
          this.data = data;
          console.log(data);

          this.tabLoading = false;
        })
        .catch(error => {
          this.tabLoading = false;
          console.log(error);
        });
    },
    setTeacher(array) {
      this.teacherArray = array;
      this.setArray();
    },
    setArray() {
      let checkSet = this.checkSet;
      let _data = [];
      let zongJson = {};
      let data = JSON.parse(JSON.stringify(this.data));
      if (this.teacherArray.length) {
        data = data.filter(e => {
          return this.teacherArray.includes(e.userid);
        });
      }
      data.forEach((e, index) => {
        _data[index] = {};
        _data[index].username = e.username;
        if (checkSet == "") {
          _data[index].evaSca = e.evaSca;
          _data[index].cogSco = e.cogSco;
          _data[index].json = [];
        }

        e.json.forEach((i, iindex) => {
          if (
            converter(i.name) == converter("科组评价") ||
            converter(i.name) == converter("行政巡查")
          ) {
            return;
          }
          if (checkSet == i.name) {
            _data[index].evaSca = i.evaScore;
            _data[index].cogSco = i.cogScore;
            _data[index].json = [];
            i.children.forEach((ic, icindex) => {
              _data[index].json[icindex] = {};
              _data[index].json[icindex].name = ic.name;
              let _evaScore = parseInt(
                (ic.sco1 * 1 * (100 / ic.score)).toFixed(0)
              );
              let _cogScore = parseInt(
                (ic.sco2 * 1 * (100 / ic.score)).toFixed(0)
              );
              _data[index].json[icindex].evaScore = _evaScore; // 自评
              _data[index].json[icindex].cogScore = _cogScore; // 考核
              zongJson[ic.name] ? "" : (zongJson[ic.name] = {});
              zongJson[ic.name].evaScore
                ? (zongJson[ic.name].evaScore += _evaScore)
                : (zongJson[ic.name].evaScore = _evaScore);
              zongJson[ic.name].cogScore
                ? (zongJson[ic.name].cogScore += _cogScore)
                : (zongJson[ic.name].cogScore = _cogScore);
            });
          } else if (checkSet == "") {
            _data[index].json[iindex] = {};
            _data[index].json[iindex].name = i.name;
            let _evaScore = parseInt((i.evaScore * (100 / i.score)).toFixed(0));
            let _cogScore = parseInt((i.cogScore * (100 / i.score)).toFixed(0));
            _data[index].json[iindex].evaScore = _evaScore; // 自评
            _data[index].json[iindex].cogScore = _cogScore; // 考核
            zongJson[i.name] ? "" : (zongJson[i.name] = {});
            zongJson[i.name].evaScore
              ? (zongJson[i.name].evaScore += _evaScore)
              : (zongJson[i.name].evaScore = _evaScore);
            zongJson[i.name].cogScore
              ? (zongJson[i.name].cogScore += _cogScore)
              : (zongJson[i.name].cogScore = _cogScore);
          }
        });
      });
      let zongArray = Object.keys(zongJson);
      for (var i = 0; i < zongArray.length; i++) {
        zongJson[zongArray[i]].evaScore = (
          zongJson[zongArray[i]].evaScore / data.length
        ).toFixed(0);
        zongJson[zongArray[i]].cogScore = (
          zongJson[zongArray[i]].cogScore / data.length
        ).toFixed(0);
      }
      this.tableData = _data
        .filter(e => {
          e.score = this.getScore(e.json);
          return e;
        })
        .sort((a, b) => b.score - a.score);
      console.log(this.tableData);
      this.zongJson2 = zongJson;
      console.log(zongJson);
    },
    //获取分类类名
    getTypeInfo() {
      this.tabLoading = true;
      let params = {
        oid: this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectPerInfoAllTea", params)
        .then(res => {
          this.typeInfo = res.data[0];
          let typeInfo = res.data[1];
          this.typeInfo.forEach(e => {
            e.child = [];
            e.value = "";
            typeInfo.forEach(i => {
              if (e.id == i.parentid) {
                e.child.push({ id: i.id, name: i.name });
              }
            });
          });
          this.getData();
        })
        .catch(err => {
          this.tabLoading = false;
          console.error(err);
        });
    },
    changeTimeSort() {
      this.cutPage(2);
    }
  },
  mounted() {
    this.getPageBase2(1);
    this.getPageBase2(2);
    this.getTypeInfo();
  }
};
</script>

<style scoped>
.bbox_serch {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  background-color: #e6eaf0;
}

.top {
  display: flex;
  justify-content: space-between;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0px auto;
  padding: 10px 0;
  height: 54px;
}

.subClick {
  font-size: 16px;
  cursor: pointer;
  margin-left: 10px;
  /* color: #ab582f; */
  color: #409eff;
}

.sub_head {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  padding: 0 15px;
}

.sub_head::after {
  content: "";
  width: 100%;
  background: #3681fc;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -8px;
}

.subClick {
  /* font-size: 16px; */
  font-size: 20px;
  cursor: pointer;
  /* margin-left: 17.5px; */
  /* color: #ab582f; */
  /* color: #409eff; */
  color: #999;
  padding: 0 15px;
}

.subClick:hover {
  color: #000;
}

.sub_head + .subClick,
.subClick + .subClick,
.subClick + .sub_head {
  margin-left: 17.5px;
}

.bbox {
  background: #fff;
  border-radius: 0 5px 5px 5px;
  padding: 15px 0;
  box-sizing: border-box;
  min-height: 900px;
}

.bbox_nav {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  align-items: center;
}

.teaLis {
  display: flex;
}

.teal {
  padding: 10px 20px;
  cursor: pointer;
}

.Tbor {
  border-bottom: 2px rgba(54, 129, 252, 1) solid;
  font-weight: 600;
}

.randarZong {
  max-width: 100%;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

.randarBox {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.randarBox .title {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

.randarTeacher {
  width: calc(100% / 4 - 20px);
  margin-right: 20px;
  margin-bottom: 20px;
}

.randarTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.randarTitle > span:nth-child(1) {
}

.randarTitle > span:nth-child(2) {
}

.randar {
  width: calc(100%);
  height: 350px;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
}

@media screen and (max-width: 1280px) {
  .randarTeacher {
    width: calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 800px) {
  .randarTeacher {
    width: calc(100%);
    margin-right: 0;
  }
}
</style>