pbl-teacher-table/src/components/pages/dataBoardSies/school/index.vue

<template>
  <div class="body1" v-loading="isLoading">
    <!-- 综合数据 -->
    <div class="left">
      <div class="top">
        <div class="titleBox">
          <div class="title">综合成绩配置</div>
        </div>
        <div class="dataBox">
          <cateRank :monthArray="loginCountMonthArray"></cateRank>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">整体表现</div>
          <div>
            <el-select v-model="cType" @change="typeChange" class="selectBox" @focus="setMinWidth" style="width: 100px;">
              <el-option label="三年级" value=""></el-option>
            </el-select>
            <el-select v-model="cType" @change="typeChange" class="selectBox" @focus="setMinWidth" style="width: 180px;">
              <el-option label="2022-2023第二学期" value=""></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <div class="info_box">
            <div class="info blueBG">
              <span>实有人数</span>
              <!-- <span>{{ loginTime.toFixed(0) }}小时</span> -->
              <span>{{ 323 }}</span>
            </div>
            <div class="info blueBG">
              <span>考试人数</span>
              <!-- <span>{{ (loginTime / count).toFixed(0) }}小时</span> -->
              <span>{{ 320 }}</span>
            </div>
          </div>
          <div class="depth_box" style="height: calc(100% - 70px)">
            <div class="depth">
              <span>优秀率</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="80" :stroke-width="5" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>合格率</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="80" :stroke-width="5" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <div class="titleBox">
          <div class="title">班级表现</div>
          <div>
            <el-select v-model="cType" @change="typeChange" class="selectBox" @focus="setMinWidth" style="width: 100px;">
              <el-option label="三年级" value=""></el-option>
            </el-select>
            <el-select v-model="cType" @change="typeChange" class="selectBox" @focus="setMinWidth" style="width: 180px;">
              <el-option label="2022-2023第二学期" value=""></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <teacherInfo style="height: calc(100%)" :courseArray="courseArray" @openCourse="openCourse"></teacherInfo>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">成绩分布</div>
          <div>
            <el-select v-model="cType" @change="typeChange" class="selectBox" @focus="setMinWidth" style="width: 100px;">
              <el-option label="三年级" value=""></el-option>
            </el-select>
            <el-select v-model="cType" @change="typeChange" class="selectBox" @focus="setMinWidth" style="width: 180px;">
              <el-option label="2022-2023第二学期" value=""></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <studentInfo2 :evCourseArray="evCourseArray" :eva="eva"></studentInfo2>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="titleBox">
          <div class="title">公开课情况</div>
          <div>
            <el-select v-model="cType" @change="typeChange" class="selectBox" @focus="setMinWidth" style="width: 180px;">
              <el-option label="2022-2023第二学期" value=""></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <courseInfo :courseNumberArray="courseNumberArray" @openCourse="openCourse2"></courseInfo>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">教学成果统计</div>
        </div>
        <div class="dataBox">
          <!-- <studentInfo :evCourseArray="evCourseArray" :eva="eva"></studentInfo> -->
          <loginTime :yearArray="loginCountYearArray"></loginTime>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginCount from "./loginCount";
import loginTime from "./loginTime";
import teacherInfo from "./teacherInfo";
import courseInfo from "./courseInfo";
import studentInfo from "./studentInfo";
import studentInfo2 from "./studentInfo2";
import cateRank from "./cateRank";
export default {
  components: {
    loginCount,
    loginTime,
    teacherInfo,
    courseInfo,
    studentInfo,
    studentInfo2,
    cateRank,
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      count: 0,
      loginCount: 0,
      loginTime: 0,
      courseCount: 0,
      teacherCount: 0,
      loginCountMonthArray: [],
      weekCount: 0,
      loginCountYearArray: [],
      gradeCourse: 0,
      subjectCourse: 0,
      courseArray: [],
      cType: '',
      gradeArray: [],
      subjectArray: [],
      themeArray: [],
      allArray: [],
      courseNumberArray: [],
      typeCount: 0,
      typeCourseCount: 0,
      lightJson: {
        users: 0,
        teachers: 0,
        students: 0,
        upCourseTeachers: 0,
        gCourseTeachers: 0,
        upCourseUsers: 0,
        gCourseUsers: 0,
        toolUsers: 0,
        rateUser: 0,
        upgCourseTeachers: 0,
        commentUsers: 0,
      },
      evArray: [],
      eva: '',
      evCourseArray: [],
      minWidth: 0
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    setMinWidth(val) {
      this.minWidth = val.srcElement.clientWidth
    },
    openCourse(classIndex, subIndex) {

    },
    openCourse2(index) {

    },
    getData() {

    },
    typeChange() {

    },
    typeChange2() {

    },
    format(percentage) {
      return percentage + '%';
    },
  },
};
</script>


<style scoped>
.body1 {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.left {
  width: calc(100% / 4 * 1);
  height: 100%;
}

.left>.top {
  width: 100%;
  height: calc(100% / 5 * 2.8 - 20px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.left>.bottom {
  width: 100%;
  height: calc(100% / 5 * 2.2);
  background: #fff;
  border-radius: 5px;
}

.center {
  width: calc(100% / 4 * 2 - 40px);
  height: 100%;
  margin: 0 20px;
}

.center>.top {
  width: 100%;
  height: calc(100% / 5 * 2.5 - 20px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.center>.bottom {
  width: 100%;
  height: calc(100% / 5 * 2.5);
  background: #fff;
  border-radius: 5px;
}

.right {
  width: calc(100% / 4 * 1);
  height: 100%;
}

.right>.top {
  width: 100%;
  height: calc(100% / 5 * 2.8 - 20px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.right>.bottom {
  width: 100%;
  height: calc(100% / 5 * 2.2);
  background: #fff;
  border-radius: 5px;
}

.titleBox {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
}

.titleBox>.title {
  font-weight: 700;
}

.dataBox {
  height: calc(100% - 40px);
  width: 100%;
}

.info_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.info_box>.info2,
.info_box>.info3,
.info_box>.info {
  width: calc(50% - 10px);
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 5px;
}

.info_box>.info2 {
  width: calc(100% / 4 - 10px);
  /* align-items: flex-end; */
}

.info_box>.info3 {
  width: 100%;
  margin-bottom: 5px;
}

.info_box>.info2>span:nth-child(1),
.info_box>.info3>span:nth-child(1),
.info_box>.info>span:nth-child(1) {
  font-size: 14px;
  /* margin: 0 0 0 20px; */
  color: #565e6a;
  width: 60px;
  white-space: pre-wrap;
  word-break: break-all;
}

.info_box>.info2>span:nth-child(2),
.info_box>.info3>span:nth-child(2),
.info_box>.info>span:nth-child(2) {
  font-size: 24px;
  /* font-weight: 700; */
}

.blueBG {
  background: rgb(243, 248, 253);
  border: 2px solid rgb(234, 246, 255);
}

.greenBG {
  background: linear-gradient(180deg,
      rgb(211, 246, 228, 0.2) 0%,
      rgb(23, 196, 105, 0.3) 100%);
}

.depth_box {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  justify-content: space-between;
}

.depth {
  width: calc(100% / 2 - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.depth>span:nth-child(1) {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
}

.depth>div:nth-child(1) {}

.course_box {
  display: flex;
  height: 50%;
  width: 95%;
  margin: 0 auto;
}

.course_box .info_box {
  height: 100%;
  width: 100px;
  flex-direction: column;
  margin: 0;
  flex-wrap: nowrap;
}

.course_box_p {
  width: calc(100% - 100px);
}

.selectBox {
  width: 80px;
  margin-left: 10px;
}

.selectBox>>>.el-input__inner {
  height: 30px;
  line-height: 30px;
}

.selectBox>>>.el-input__icon {
  line-height: 30px;
}


.pe_box {
  display: flex;
  width: 100%;
  height: 100px;
  background: rgb(221, 240, 234);
  padding: 0 20px;
  justify-content: space-between;
  box-sizing: border-box;
}

.orange_pe {
  background: rgb(254, 119, 1);
}

.red_pe {
  background: rgb(216, 35, 254);

}

.purple_pe {
  background: rgb(255, 13, 11);

}

.pe_child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  height: 100%;
  box-sizing: border-box;
}

.pe_f {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.blue_pe {
  background: rgb(78, 241, 238);

}

.pe_img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pe_img>img {
  width: 60%;
}

.pe_s {
  font-weight: 700;
  color: #5a5a5a;
}
</style>