pbl-teacher-table/src/components/pages/dataBoard/teacher/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">
          <div class="teafre">
            <div class="teaLeft">
              <div>教师总数</div>
              <div>{{ count }}</div>
            </div>
            <div class="teaLeft teaRigth">
              <div>周使用频次</div>
              <div>{{ weekCount }}</div>
            </div>
          </div>
          <div class="teafre" style="margin: 10px auto">
            <div class="teaLeft">
              <div>登录频次</div>
              <div>{{ loginCount }}</div>
            </div>
            <div class="teaLeft teaRigth">
              <div>人均使用频次</div>
              <div>{{ (loginCount / count).toFixed(0) }}</div>
            </div>
          </div>
          <TeaFre
            style="height: calc(100% - 150px)"
            :monthArray="loginCountMonthArray"
          ></TeaFre>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">教师活跃度</div>
        </div>
        <div class="dataBox">
          <TeaAct
            style="height: calc(100% - 20px)"
            :cWorkSum="cWorkSum"
          ></TeaAct>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <div class="titleBox">
          <div class="title">教师行为数据</div>
        </div>
        <div class="dataBox">
          <div class="teafre" style="justify-content: flex-start">
            <div
              class="teaLeft"
              style="align-items: flex-end; width: calc(100% / 4 - 10px)"
            >
              <div>上传课程总数</div>
              <div>{{ courseCount }}</div>
            </div>
            <div
              class="teaLeft teaRigth"
              style="align-items: flex-end; width: calc(100% / 4 - 10px)"
            >
              <div>各年级课程上传平均数</div>
              <div>{{ gradeCourse.toFixed(0) }}</div>
            </div>
            <div
              class="teaLeft"
              style="align-items: flex-end; width: calc(100% / 4 - 10px)"
            >
              <div>各学科课程上传平均数</div>
              <div>{{ subjectCourse.toFixed(0) }}</div>
            </div>
          </div>
          <TeaData
            style="height: calc(100% - 62px)"
            :courseArray="courseArray"
            @openCourse="openCourse2"
          ></TeaData>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">平台使用深度</div>
        </div>
        <div class="dataBox">
          <div class="allBox">
            <div class="allBox_left">
              <FunPlot :pusaDep="pusaDep"></FunPlot>
            </div>
            <div class="allBox_right">
              <div class="depth">
                <span>上传课程</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      lightJson.upCourseTeachers
                        ? (
                            (lightJson.upCourseTeachers / lightJson.teachers) *
                            100
                          ).toFixed(0)
                        : 0
                    "
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>创设项目</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      lightJson.upCourseUsers
                        ? (
                            (lightJson.upCourseUsers / lightJson.teachers) *
                            100
                          ).toFixed(0)
                        : 0
                    "
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>协同合作</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      lightJson.upgCourseTeachers
                        ? (
                            (lightJson.upgCourseTeachers / lightJson.teachers) *
                            100
                          ).toFixed(0)
                        : 0
                    "
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>互动交流</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      lightJson.commentUsers
                        ? (
                            (lightJson.commentUsers / lightJson.teachers) *
                            100
                          ).toFixed(0)
                        : 0
                    "
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>添加目标</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      lightJson.evaTeachers
                        ? (
                            (lightJson.evaTeachers / lightJson.teachers) *
                            100
                          ).toFixed(0)
                        : 0
                    "
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>使用工具</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      lightJson.toolUsers
                        ? (
                            (lightJson.toolUsers / lightJson.teachers) *
                            100
                          ).toFixed(0)
                        : 0
                    "
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>设置评价</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      lightJson.tevaTeachers
                        ? (
                            (lightJson.tevaTeachers / lightJson.teachers) *
                            100
                          ).toFixed(0)
                        : 0
                    "
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>学生评价</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      lightJson.sevaTeachers
                        ? (
                            (lightJson.sevaTeachers / lightJson.teachers) *
                            100
                          ).toFixed(0)
                        : 0
                    "
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="titleBox">
          <div class="title">教学活动</div>
        </div>
        <div class="dataBox">
          <WorkNum
            :workNumList="workNumList"
            @openCourse="openCourse"
          ></WorkNum>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">在线时长</div>
        </div>
        <div class="dataBox">
          <div class="teafre">
            <div class="teaLeft">
              <div>累计在线时长</div>
              <div>{{ loginTime.toFixed(0) }}小时</div>
            </div>
            <div class="teaLeft teaRigth">
              <div>师均时长</div>
              <div>{{ loginTime ? (loginTime / count).toFixed(0) : loginTime }}小时</div>
            </div>
          </div>
          <WorkTime
            style="height: calc(100% - 62px)"
            :workTime="workTime"
          ></WorkTime>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TeaFre from "./chartList/teaFre.vue";
import TeaAct from "./chartList/teaAct.vue";
import TeaData from "./chartList/teaData.vue";
import FunPlot from "./chartList/funPlot.vue";
import WorkNum from "./chartList/workNum.vue";
import WorkTime from "./chartList/workTime.vue";
export default {
  components: {
    TeaFre,
    TeaAct,
    TeaData,
    FunPlot,
    WorkNum,
    WorkTime,
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      count: 0,
      loginCount: 0,
      loginTime: 0,
      courseCount: 0,
      loginCountMonthArray: [],
      weekCount: 0,
      gradeCourse: 0,
      subjectCourse: 0,
      courseArray: [],
      workNumList: [],
      grade: [],
      subject: [],
      theme: [],
      lightJson: {
        users: 0,
        teachers: 0,
        students: 0,
        upCourseTeachers: 0,
        upCourseUsers: 0,
        toolUsers: 0,
        upgCourseTeachers: 0,
        commentUsers: 0,
        evaTeachers: 0,
        tevaTeachers: 0,
        sevaTeachers: 0,
      },
      pusaDep: [
        { value: 0, name: "登录" },
        { value: 0, name: "创建" },
        { value: 0, name: "授课" },
        { value: 0, name: "评价" },
      ],
      cWorkSum: [],
      workTime: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    openCourse2(classIndex, subIndex) {
      console.log(classIndex, subIndex);
      // console.log(this.courseArray);
      // console.log(this.courseArray[classIndex].id,this.courseArray[classIndex].subject[subIndex].id || '');
      window.parent.postMessage(
        {
          tools: "openCourse",
          typea: this.courseArray[classIndex].id,
          typed: this.courseArray[classIndex].subject[subIndex].id || "",
        },
        "*"
      );
    },
    openCourse(cid) {
      window.parent.postMessage({ cid: cid, screenType: "3" }, "*");
    },
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardTeacher", params)
        .then((res) => {
          this.isLoading = false;
          this.count = res.data[0][0].count;
          this.loginCount = res.data[1][0].loginCount;
          this.loginTime = parseInt(res.data[2][0].time) / 60 / 60;
          this.courseCount = res.data[5][0].courseCount;

          let loginCountMonthArray = [];
          const date = new Date();
          var Month = date.getMonth() + 1;
          var Year = date.getFullYear();
          for (var i = Month; i > Month - 6; i--) {
            if (i <= 0) {
              loginCountMonthArray.push({
                Year: Year - 1,
                Month: 12 + i,
                teacher: 0,
              });
            } else {
              loginCountMonthArray.push({
                Month: i,
                Year: Year,
                teacher: 0,
              });
            }
          }

          loginCountMonthArray = loginCountMonthArray.reverse();
          let teacherLoginCountYear = res.data[3]; // 教师半年登录次数统计

          for (var i = 0; i < teacherLoginCountYear.length; i++) {
            let _date = new Date(teacherLoginCountYear[i].create_at);
            var _month = _date.getMonth() + 1;
            var _year = _date.getFullYear();
            for (var j = 0; j < loginCountMonthArray.length; j++) {
              if (
                _month == loginCountMonthArray[j].Month &&
                _year == loginCountMonthArray[j].Year
              ) {
                loginCountMonthArray[j].teacher++;
                break;
              }
            }
          }

          this.loginCountMonthArray = loginCountMonthArray;
          this.weekCount = res.data[4][0].count;

          let _grade = res.data[6]; //年级
          let _subject = res.data[7]; //学科
          let _course = res.data[8]; //课程
          let _gradeCourse = 0; //各年级上传课程
          let _subjectCourse = 0; //各学科上传课程
          let _courseArray = [];
          _subject.push({ name: "其他" });

          for (var i = 0; i < _grade.length; i++) {
            _courseArray.push({
              name: _grade[i].name,
              id: _grade[i].id,
              courseid: [],
              subject: [],
            });
            for (var z = 0; z < _course.length; z++) {
              if (_course[z].typeid == _grade[i].id) {
                _gradeCourse++;
                if (
                  _courseArray[i].courseid.indexOf(_course[z].courseid) === -1
                ) {
                  _courseArray[i].courseid.push(_course[z].courseid);
                }
              }
            }
            for (var j = 0; j < _subject.length; j++) {
              _courseArray[i].subject.push({
                name: _subject[j].name,
                id: _subject[j].id,
                course: 0,
              });
              for (var z = 0; z < _course.length; z++) {
                if (
                  _course[z].typeid == _subject[j].id &&
                  _courseArray[i].courseid.indexOf(_course[z].courseid) !== -1
                ) {
                  _courseArray[i].subject[j].course++;
                }
              }
            }
            let sum = 0;
            for (var j = 0; j < _courseArray[i].subject.length - 1; j++) {
              sum += _courseArray[i].subject[j].course;
            }
            _courseArray[i].subject[_courseArray[i].subject.length - 1].course =
              _courseArray[i].courseid.length - sum < 0
                ? 0
                : _courseArray[i].courseid.length - sum;
          }
          for (var j = 0; j < _subject.length; j++) {
            for (var z = 0; z < _course.length; z++) {
              if (_course[z].typeid == _subject[j].id) {
                _subjectCourse++;
              }
            }
          }
          this.gradeCourse = _gradeCourse / _grade.length;
          this.subjectCourse = _subjectCourse / _subject.length;
          this.courseArray = _courseArray;

          this.grade = _grade;
          this.subject = _subject;
          this.theme = res.data[9]; //主题
          var _workCourse = res.data[10]; //带作业的课程
          var wList = [];
          for (var i = 0; i < _workCourse.length; i++) {
            if (!wList[_workCourse[i].courseId]) {
              wList[_workCourse[i].courseId] = {
                cid: _workCourse[i].courseId,
                title: _workCourse[i].title,
                task: 0,
                work: 0,
              };
              let chapters = JSON.parse(_workCourse[i].chapters);
              for (var j = 0; j < chapters.length; j++) {
                if (wList[_workCourse[i].courseId].task == 0) {
                  wList[_workCourse[i].courseId].task =
                    chapters[j].chapterInfo[0].taskJson.length;
                } else {
                  wList[_workCourse[i].courseId].task +=
                    chapters[j].chapterInfo[0].taskJson.length;
                }
              }
            }
          }
          for (var i = 0; i < _workCourse.length; i++) {
            let a = Object.keys(wList);
            for (var j = 0; j < Object.keys(wList).length; j++) {
              if (_workCourse[i].courseId == wList[a[j]].cid) {
                wList[a[j]].work++;
              }
            }
          }
          var workNumList = Object.values(wList).map((item) => [
            item.task,
            item.work,
            item.title,
            item.cid,
          ]);
          this.workNumList = workNumList;

          let _teachers = res.data[11][0].count; //老师数量
          let _students = res.data[12][0].count; //学生数量
          let _upCourseTeachers = res.data[13][0].count; //上传课程老师的数量
          let _upCourseUsers = res.data[14][0].count; //上传项目的用户
          let _toolUsers = res.data[15][0].count; //使用工具的用户
          let _upgCourseTeachers = res.data[16][0].count; //参与协同课程的老师
          let _commentUsers = res.data[17][0].count; //参与互动交流的用户
          let _evaTeachers = res.data[18][0].count; //查询添加目标的老师
          let _tevaTeachers = res.data[19][0].count; //查询创建课程有添加目标的老师
          let _sevaTeachers = res.data[20][0].count; //查询对作业评价的老师

          this.lightJson = {
            users: this.count,
            teachers: _teachers,
            students: _students,
            upCourseTeachers: _upCourseTeachers,
            upCourseUsers: _upCourseUsers,
            toolUsers: _toolUsers,
            upgCourseTeachers: _upgCourseTeachers,
            commentUsers: _commentUsers,
            evaTeachers: _evaTeachers,
            tevaTeachers: _tevaTeachers,
            sevaTeachers: _sevaTeachers,
          };

          let _loginCount = res.data[21][0].count; //漏斗图查询登录
          let _workTeaCount = res.data[22][0].count; //漏斗图查询有交作业的课程老师数量
          // let allCount = _loginCount + _upCourseTeachers + _workTeaCount + _sevaTeachers;
          for (var i = 0; i < this.pusaDep.length; i++) {
            if (this.pusaDep[i].name == "登录") {
              this.pusaDep[i].value = ((_loginCount / _teachers) * 100).toFixed(
                0
              );
            } else if (this.pusaDep[i].name == "创建") {
              this.pusaDep[i].value = (
                (_upCourseTeachers / _teachers) *
                100
              ).toFixed(0);
            } else if (this.pusaDep[i].name == "授课") {
              this.pusaDep[i].value = (
                (_workTeaCount / _teachers) *
                100
              ).toFixed(0);
            } else if (this.pusaDep[i].name == "评价") {
              this.pusaDep[i].value = (
                (_sevaTeachers / _teachers) *
                100
              ).toFixed(0);
            }
          }

          let _cWorkSum = res.data[23]; //查询课程名称和作业数量
          this.cWorkSum = _cWorkSum;

          let _workTime = res.data[24]; //查询教研室在线时长
          var mergedArray = [];
          _workTime.forEach((obj) => {
            var foundItem = mergedArray.find((item) => item.name === obj.name);
            if (foundItem) {
              foundItem.text = String(
                Number(foundItem.text) + Number(obj.text)
              );
            } else {
              mergedArray.push({ name: obj.name, text: obj.text });
            }
          });
          mergedArray.forEach((obj) => {
            obj.text = (Number(obj.text) / 3600).toFixed(2); // 秒转小时，并保留两位小数
          });
          this.workTime = mergedArray;
          this.$forceUpdate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    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% / 2 - 10px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.left > .bottom {
  width: 100%;
  height: calc(100% / 2 - 10px);
  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 * 3 - 10px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

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

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

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

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

.titleBox {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  width: 100%;
}

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

.middleBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.title {
  font-weight: bold;
  color: #060e17;
  font-size: 18px;
}

.teafre {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 95%;
  margin: 0 auto;
  justify-content: space-evenly;
}

.teaLeft,
.teaMiddle {
  width: calc(100% / 2 - 10px);
  height: 60px;
  border-radius: 8px;
  /* border: 1px solid #e0eafb; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 10px;
  margin-right: 10px;
}
.teaMiddle {
  width: calc(100% / 3 - 10px);
}
.teaLeft {
  width: 95%;
  background: linear-gradient(
    180deg,
    rgba(224, 234, 251, 0.2) 0%,
    rgba(54, 130, 252, 0.3) 100%
  );
}
.teaRigth {
  background: linear-gradient(
    180deg,
    rgb(211, 246, 228, 0.2) 0%,
    rgb(23, 196, 105, 0.3) 100%
  ) !important;
}

.cNum {
  background: linear-gradient(
    180deg,
    rgb(125, 227, 174, 0.2) 0%,
    rgb(23, 196, 105, 0.3) 100%
  ) !important;
}

.tNum {
  background: linear-gradient(
    180deg,
    rgb(174, 204, 254, 0.2) 0%,
    rgb(54, 129, 252, 0.3) 100%
  ) !important;
}

.tSum {
  background: linear-gradient(
    180deg,
    rgb(125, 227, 174, 0.2) 0%,
    rgb(23, 196, 105, 0.3) 100%
  ) !important;
}

.teaLeft > div:first-child,
.teaMiddle > div:first-child {
  font-size: 12px;
  font-weight: 400;
  color: #565e6a;
}

.teaLeft > div:last-child,
.teaMiddle > div:last-child {
  font-size: 22px;
  font-weight: bold;
  color: #060e17;
}

.halfBox {
  width: 50%;
}
.allBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.allBox_left {
  width: 30%;
  height: 100%;
}
.allBox_right {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
  justify-content: space-between;
}

.depth {
  width: calc(100% / 4 - 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) {
}
</style>