pbl-teacher-table/src/components/pages/testPerson/portrait/index.vue

<template>
  <div class="portrait">
    <div class="p_left">
      <div class="p_l_top">
        <div class="teachingActivity" v-loading="cardNumLoading">
					<img :src="require('../../../../assets/icon/testPerson/bg1.png')" alt="">
          <div>
            <span>教学活动</span>
            <el-tooltip
              class="item"
              effect="light"
              content="教学活动"
              placement="top"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.50562 11.9998V6.5H8.50562V11.9998H7.50562Z"
                  fill="black"
                  fill-opacity="0.4"
                />
                <path
                  d="M8.59985 4H7.3999V5.19995H8.59985V4Z"
                  fill="black"
                  fill-opacity="0.4"
                />
                <path
                  d="M1 8C1 11.866 4.13403 15 8 15C11.866 15 15 11.866 15 8C15 4.13403 11.866 1 8 1C4.13403 1 1 4.13403 1 8ZM2 8C2 4.68628 4.68628 2 8 2C11.3137 2 14 4.68628 14 8C14 11.3137 11.3137 14 8 14C4.68628 14 2 11.3137 2 8Z"
                  fill="black"
                  fill-opacity="0.4"
                />
              </svg>
            </el-tooltip>
          </div>
          <span style="color: #3681FC;">{{ teachingActivityNum }}</span>
        </div>
        <div class="teachingAndResearchActivities" v-loading="cardNumLoading">
					<img :src="require('../../../../assets/icon/testPerson/bg2.png')" alt="">
          <div>
            <span>教研活动</span>
            <el-tooltip
              class="item"
              effect="light"
              content="教研活动"
              placement="top"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.50562 11.9998V6.5H8.50562V11.9998H7.50562Z"
                  fill="black"
                  fill-opacity="0.4"
                />
                <path
                  d="M8.59985 4H7.3999V5.19995H8.59985V4Z"
                  fill="black"
                  fill-opacity="0.4"
                />
                <path
                  d="M1 8C1 11.866 4.13403 15 8 15C11.866 15 15 11.866 15 8C15 4.13403 11.866 1 8 1C4.13403 1 1 4.13403 1 8ZM2 8C2 4.68628 4.68628 2 8 2C11.3137 2 14 4.68628 14 8C14 11.3137 11.3137 14 8 14C4.68628 14 2 11.3137 2 8Z"
                  fill="black"
                  fill-opacity="0.4"
                />
              </svg>
            </el-tooltip>
          </div>
          <span style="color: #F2873B;">{{
            teachingAndResearchActivitiesNum
          }}</span>
        </div>
        <div
          class="trainingActivity"
					v-show="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'"
          v-loading="cardNumLoading"
        >
				<img :src="require('../../../../assets/icon/testPerson/bg3.png')" alt="">
          <div>
            <span>培训活动</span>
            <el-tooltip
              class="item"
              effect="light"
              content="培训活动"
              placement="top"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.50562 11.9998V6.5H8.50562V11.9998H7.50562Z"
                  fill="black"
                  fill-opacity="0.4"
                />
                <path
                  d="M8.59985 4H7.3999V5.19995H8.59985V4Z"
                  fill="black"
                  fill-opacity="0.4"
                />
                <path
                  d="M1 8C1 11.866 4.13403 15 8 15C11.866 15 15 11.866 15 8C15 4.13403 11.866 1 8 1C4.13403 1 1 4.13403 1 8ZM2 8C2 4.68628 4.68628 2 8 2C11.3137 2 14 4.68628 14 8C14 11.3137 11.3137 14 8 14C4.68628 14 2 11.3137 2 8Z"
                  fill="black"
                  fill-opacity="0.4"
                />
              </svg>
            </el-tooltip>
          </div>
          <span style="color: #31B476;">{{ teachingActivityNum }}</span>
        </div>
      </div>
      <div class="p_l_bottom">
        <div class="p_title">
          <span>教研活动</span>
        </div>
        <div class="p_eCharts" v-loading="eChartsLoading">
          <eChartView
            :data="teachingAndResearchActivitiesECharts"
            v-if="!eChartsLoading"
          />
        </div>
      </div>
    </div>
    <div
      class="p_center"
      v-if="ExamineBase.length > 0"
      v-loading="annualAssessmentLoading"
    >
      <div class="p_title">
        <span>年度考核</span>
        <div>
          <el-button-group>
            <el-button
              v-if="bArray.length"
              @click="changeAnnualAssessmentStatus(2)"
              :type="annualAssessmentStatus === 2 ? 'primary' : ''"
              >专任教师</el-button
            >
            <el-button
              v-if="aArray.length"
              @click="changeAnnualAssessmentStatus(1)"
              :type="annualAssessmentStatus === 1 ? 'primary' : ''"
              >班主任</el-button
            >
          </el-button-group>
        </div>
      </div>
      <div class="p_eCharts" v-if="!annualAssessmentLoading">
        <eChartView
          ref="annualAssessmentEChartsRef"
          :data="annualAssessmentECharts"
        />
      </div>
    </div>
		<div class="p_center" v-else>
			<img :src="require('../../../../assets/icon/testPerson/bg4.png')" alt="">
		</div>
    <div class="p_right">
      <div class="p_r_top">
        <div class="p_title">
          <span>教学活动</span>
        </div>
        <div class="p_eCharts" v-loading="eChartsLoading">
          <eChartView :data="teachingActivityECharts" v-if="!eChartsLoading" />
        </div>
      </div>
      <div class="p_r_bottom">
        <div class="p_title">
          <span>跨学科情况</span>
        </div>
        <div class="p_eCharts" v-loading="eChartsLoading">
          <chordDiagramView
            :data="interdisciplinarySituationECharts"
            v-if="!eChartsLoading"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eChartView from "./eChartView.vue";
import chordDiagramView from "./chordDiagramView.vue";

var OpenCC = require("opencc-js");
let converter = OpenCC.Converter({
  from: "hk",
  to: "cn"
});
export default {
  components: {
    eChartView,
    chordDiagramView
  },
  props: {
    ExamineBase: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      teachingActivityNum: 0,
      teachingAndResearchActivitiesNum: 0,
      trainingActivityNum: 0,
      cardNumLoading: true,
      eChartsLoading: true,
      annualAssessmentStatus: 2, //2专任教师 1班主任
      teachingAndResearchActivitiesEChartsLoading: true,
      teachingAndResearchActivitiesECharts: {
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" }
        },
        legend: {
          data: ["我发布的", "我收到的"],
          bottom: 0,
          orient: "horizontal",
          left: "center"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["评论次数", "评课次数", "字数", "语音数"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: []
      },
      annualAssessmentLoading: true,
      annualAssessmentECharts: {
        legend: {
          data: ["自评得分率", "认定得分率", "全体教师平均得分率"],
          bottom: 0
        },
        radar: {
          // shape: 'circle',
          indicator: []
        },
        series: [
          {
            name: "",
            type: "radar",
            data: []
          }
        ]
      },
      teachingActivityECharts: {
        tooltip: {
          trigger: "item"
        },
        // legend: {
        //   orient: "vertical",
        //   right: "5%",
        //   top: "center",
        //   itemGap: 20
        // },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              formatter: "{b}: {c}"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10
            },
            data: []
          }
        ]
      },
      interdisciplinarySituationECharts: {
        title: {
          text: null
        },
        chart: {
          backgroundColor: "rgba(0,0,0,0)"
        },
        credits: {
          enabled: false //不显示LOGO
        },
        tooltip: {
          formatter: function() {
            // 自定义弹窗内容的回调函数
            var point = this.point;
            if (point.from) {
              var tooltipText =
                "<b>" +
                point.from +
                "</b> - <b>" +
                point.to +
                "</b>: " +
                point.weight;
              return tooltipText;
            } else {
              var tooltipText = "<b>" + point.name + "</b>: " + point.sum;
              return tooltipText;
            }
          }
        },
        series: [
          {
            keys: ["from", "to", "weight"],
            data: [],
            type: "dependencywheel",
            name: "",
            dataLabels: {
              color: "#333",
              textPath: {
                enabled: true,
                attributes: {
                  dy: 5
                }
              },
              distance: 10
            },
            size: "95%"
          }
        ]
      },
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      teacherName: "",
      aArray: [],
      bArray: [],
      timeSort:[],
      selectTime:"",
    };
  },
  methods: {
    // 获取页面基础ui信息
    getPageBase2(type) {
      let params = {
        typ: type,
        org: this.org,
        oid: this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectTestExamineBase", params)
        .then(res => {
          if(type == 1){
            this.aArray = res.data[0];
          }else {
            this.bArray = res.data[0];
            if(!this.bArray.length){
              this.changeAnnualAssessmentStatus(1)
            }
          }
          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);
        });
    },
    changeAnnualAssessmentStatus(status) {
      if (this.annualAssessmentLoading) return;
      this.annualAssessmentStatus = status;
      this.getAnnualAssessmentEChartsData();
    },
    getAnnualAssessmentEChartsData() {
      this.annualAssessmentLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
          type: this.annualAssessmentStatus,
          tname: this.teacherName
        }
      ];
      // console.log(params);
      this.ajax
        .post(this.$store.state.api + "selectTestExaminePersonData2", params)
        .then(res => {
          let data = res.data[0];

          if(this.selectTime){
            data = data.filter(item => item.time == this.selectTime);
          }

          console.log("👉xxx",data)

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

          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;
							console.log(i)
              let _evaScore = parseInt(
                (i.evaScore * (100 / i.score)).toFixed(0)
              );
              let _cogScore = parseInt(
                (i.cogScore * (100 / i.score)).toFixed(0)
              );

							// let _ideScore = parseInt(
							// 	(i.score * (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);
							if(e.userid == this.userid){
								zongJson[i.name].selfEvaScore = _evaScore;
								zongJson[i.name].selfCogScore = _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.annualAssessmentECharts.radar.indicator = Object.keys(
            zongJson
          ).map(item => {
            return { name: item, max: 100 };
          });

          let _eChartsData = [
            {
              value: [],
              name: "自评得分率",
              label: {
                show: true,
                formatter: `{c}`,
                fontSize: 12
              }
            },
            {
              value: [],
              name: "认定得分率",
              label: {
                show: true,
                formatter: `{c}`,
                fontSize: 12
              }
            },
            {
              value: [],
              name: "全体教师平均得分率",
              label: {
                show: true,
                formatter: `{c}`,
                fontSize: 12
              }
            }
          ];
					
          zongArray.forEach(i => {
						if(zongJson[i].selfEvaScore || zongJson[i].selfEvaScore === 0){
							_eChartsData[0].value.push(zongJson[i].selfEvaScore);
						}else{
							_eChartsData[0].value.push(0);
						}
						if(zongJson[i].selfCogScore || zongJson[i].selfCogScore === 0){
							_eChartsData[2].value.push(zongJson[i].selfCogScore);
						}else{
							_eChartsData[2].value.push(0);
						}
						if(zongJson[i].cogScore || zongJson[i].cogScore === 0){
							_eChartsData[1].value.push(zongJson[i].cogScore)
						}else{
							_eChartsData[1].value.push(0);
						}
            // _eChartsData[0].value.push(zongJson[i].selfScore);
            // _eChartsData[1].value.push(zongJson[i].evaScore);
            // _eChartsData[2].value.push(zongJson[i].cogScore);
          });
					console.log(data)
					console.log(zongJson)
						console.log(_eChartsData)
          this.annualAssessmentECharts.series[0].data = _eChartsData;
          // this.$refs.annualAssessmentEChartsRef.setChart();
          this.annualAssessmentLoading = false;
        })
        .catch(error => {
          this.annualAssessmentLoading = false;
          console.log(error);
        });
    },
    getCardData() {
      this.cardNumLoading = true;
      let params = {
        uid: this.userid,
        oid: this.oid,
        org: this.org
      };
      this.ajax
        .get(this.$store.state.api + "selectTestUserY", params)
        .then(res => {
          (this.teachingActivityNum = res.data[4].length),
            (this.teachingAndResearchActivitiesNum = res.data[5].length);
          this.trainingActivityNum = res.data[3].length;
          this.cardNumLoading = false;
        })
        .catch(err => {
          this.cardNumLoading = false;
          console.error(err);
        });
    },
    getData() {
      this.eChartsLoading = true;
      let params = {
        uid: this.userid
      };
      this.ajax
        .get(this.$store.state.api + "selectPortraitData", params)
        .then(res => {
          let array1 = res.data[0];
          let array2 = res.data[1];
          let array3 = res.data[2];
          let typeList = res.data[3];

          let countCourse1 = [];
          let wordCount1 = 0;
          let audioCount1 = 0;
          let courseArray1 = {};
          let countCourse2 = [];
          let wordCount2 = 0;
          let audioCount2 = 0;
          let courseArray2 = {};
          // 我发布的
          array1.forEach(element => {
            if (!courseArray1[element.courseId]) {
              courseArray1[element.courseId] = {
                bool: false,
                title: element.title,
                type: element.type2,
                name: element.creator,
                array: []
              };
            }
            courseArray1[element.courseId].array.push(element);
            if (countCourse1.indexOf(element.courseId) == -1) {
              countCourse1.push(element.courseId);
            }
            if (element.type == 1) {
              wordCount1 += element.content.replace(/<[^>]+>/g, "").length;
            }
            if (element.type == 2) {
              audioCount1++;
            }
          });

          //我收到的
          array2.forEach(element => {
            if (!courseArray2[element.courseId]) {
              courseArray2[element.courseId] = {
                bool: false,
                title: element.title,
                type: element.type2,
                name: element.creator,
                array: []
              };
            }
            courseArray2[element.courseId].array.push(element);
            if (countCourse2.indexOf(element.courseId) == -1) {
              countCourse2.push(element.courseId);
            }
            if (element.type == 1) {
              wordCount2 += element.content.replace(/<[^>]+>/g, "").length;
            }
            if (element.type == 2) {
              audioCount2++;
            }
          });

          //2 1 3 4
          let _eChartsData = [
            {
              name: "我发布的",
              type: "bar",
              data: [
                array1.length,
                countCourse1.length,
                wordCount1,
                audioCount1
              ],
              itemStyle: {
                color: "#5470c6"
              }
            },
            {
              name: "我收到的",
              type: "bar",
              data: [
                array2.length,
                countCourse2.length,
                wordCount2,
                audioCount2
              ],
              itemStyle: {
                color: "#91cc75"
              }
            }
          ];

          let _eChartsData2 = [];
					let _eChartsData3 = [];
          typeList.forEach(item => {
            _eChartsData2.push({ value: 0, name: item.name, id: item.id });
          });
          array3.forEach(item => {
            let type = item.type.split(",");
						type.sort((a,b)=>a-b);
            type.forEach(i => {
              let _findIndex = _eChartsData2.findIndex(j => j.id == i);
              if (_findIndex != -1) {
                _eChartsData2[_findIndex].value += 1;
              }
            });
          });

          let resultSubject = [];
          for (let i = 0; i < typeList.length - 1; i++) {
            for (let j = i + 1; j < typeList.length; j++) {
              resultSubject.push({
                id: [typeList[i].id, typeList[j].id],
                name: [typeList[i].name, typeList[j].name],
                count: 0,
              });
            }
          }

          for (var i = 0; i < array3.length; i++) {
            let array = array3[i].type.split(",");
            for (var j = 0; j < resultSubject.length; j++) {
              if (this.checkArrayInclusion(resultSubject[j].id, array)) {
                resultSubject[j].count++;
              }
            }
          }

          let resultSubject2 = [];

          for (var i = 0; i < resultSubject.length; i++) {
            let el = resultSubject[i];
            if (el.count > 0) {
              resultSubject2.push([el.name[0], el.name[1], el.count]);
            }
          }
					_eChartsData3 = resultSubject.filter(i=>i.count!==0).map(i=>([i.name[0],i.name[1],i.count]));
					console.log(_eChartsData3)
          _eChartsData2 = _eChartsData2.filter(i => i.value != 0);
          this.teachingActivityECharts.series[0].data = _eChartsData2;
          this.teachingAndResearchActivitiesECharts.series = _eChartsData;
					this.interdisciplinarySituationECharts.series[0].data = _eChartsData3;
          this.eChartsLoading = false;
        })
        .catch(err => {
          this.eChartsLoading = false;
          console.error(err);
        });
    },
		checkArrayInclusion(arr1, arr2) {
      return arr1.every((item) => arr2.includes(item));
    },
  },
  mounted() {
    this.getPageBase2(1)
    this.getPageBase2(2)
    this.getAnnualAssessmentEChartsData();
    this.getData();
    this.getCardData();
  }
};
</script>

<style scoped>
.portrait {
  width: 100%;
  height: calc(100% - 20px);
  margin: 10px 0;
  display: flex;
  overflow: auto;
}

.portrait > div {
  margin: 0 10px;
  /* background-color: #fff; */
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.p_left {
  width: 28.5%;
  display: flex;
  flex-direction: column;
  background-color: none;

}

.p_l_top {
  flex: 1;
  display: flex;
  flex-direction: column;
	position: relative;
}



.p_l_top > div {
  flex: 1;
  border-radius: 5px;
  /* margin: 10px 0; */
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 30px;
  position: relative;
	overflow: hidden;
}

.p_l_top >div> img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	object-fit: fill;
}

.p_l_top > div > div {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
	z-index: 2;
}

.p_l_top > div > div > span {
  font-size: 22px;
  /* font-weight: bold; */
}

.p_l_top > div > div > svg {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  cursor: pointer;
}

.p_l_top > div > span {
  font-size: 2.6em;
  font-weight: bold;
	z-index: 2;
}

.p_l_top > div:not(:first-child):not(:last-child) {
  margin: 20px 0;
}

.teachingActivity {
  background: linear-gradient(
    290deg,
    rgba(231, 238, 254, 0.1) 0%,
    #e7eefe 100%
  );
}

.teachingAndResearchActivities {
  background: linear-gradient(
    290deg,
    rgba(243, 254, 231, 0.1) 0%,
    #fef2e7 100%
  );
}

.trainingActivity {
  background: linear-gradient(
    290deg,
    rgba(231, 254, 251, 0.1) 0%,
    #e7feef 100%
  );
}

.p_l_bottom {
  flex: 1;
  margin-top: 20px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.p_center {
  width: calc(100% - 57%);
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.p_center>img{
	width: 100%;
	height: auto;
	margin: auto;
	transform: scaleX(-1);
}

.p_right {
  width: 28.5%;
  display: flex;
  flex-direction: column;
}

.p_r_top {
  flex: 1;
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.p_r_bottom {
  flex: 1;
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.p_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p_title > span {
  font-size: 28px;
}

.p_eCharts {
  width: 100%;
  flex: 1;
  margin-top: 10px;
}
</style>