pbl-teacher-table/src/components/pages/dataBoard/student/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="info_box">
            <div class="info blueBG">
              <span>学生总数</span>
              <span>{{ count }}</span>
            </div>
            <div class="info greenBG">
              <span>周使用频次</span>
              <span>{{weekCount}}</span>
            </div>
            <div class="info blueBG">
              <span>登录频次</span>
              <span>{{ loginCount }}</span>
            </div>
            <div class="info greenBG">
              <span>人均使用频次</span>
              <span>{{ (loginCount / count).toFixed(0) }}</span>
            </div>
          </div>
          <loginCount :monthArray="loginCountMonthArray" style="height: calc(100% - 140px)"></loginCount>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">学生行为数据</div>
        </div>
        <div class="dataBox">
          <stuAct style="height: calc(100% - 20px)"></stuAct>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <div class="titleBox">
          <div class="title">学生综合评价</div>
        </div>
        <div class="dataBox">
          <div class="info_box" style="width: 95%; justify-content: flex-start">
            <div class="info2 blueBG">
              <span>学生总数</span>
              <span>{{ count }}</span>
            </div>
            <div class="info2 greenBG">
              <span>班级总数</span>
              <span>15620</span>
            </div>
            <div class="info2 blueBG">
              <span>平均得分</span>
              <span>15620</span>
            </div>
          </div>
          <studentInfo style="height: calc(100% - 70px)"></studentInfo>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">平台使用深度</div>
        </div>
        <div class="dataBox">
          <div class="depth_box">
            <div class="depth">
              <span>参与课程</span>
              <div>
                <el-progress
                  :width="90"
                  type="circle"
                  :percentage="36"
                  :stroke-width="15"
                  :format="format"
                  color="#106BFF"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>参与项目</span>
              <div>
                <el-progress
                  :width="90"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                  color="#106BFF"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>使用工具</span>
              <div>
                <el-progress
                  :width="90"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                  color="#106BFF"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>协同合作</span>
              <div>
                <el-progress
                  :width="90"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                  color="#106BFF"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>互动交流</span>
              <div>
                <el-progress
                  :width="90"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                  color="#106BFF"
                ></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="titleBox">
          <div class="title">学生综合评价</div>
        </div>
        <div class="dataBox">
          <studentInfo2></studentInfo2>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">在线时长</div>
        </div>
        <div class="dataBox">
          <div class="info_box">
            <div class="info blueBG">
              <span>累计在线时长</span>
              <span>{{ loginTime.toFixed(0) }}小时</span>
            </div>
            <div class="info greenBG">
              <span>学生在线平均时长</span>
              <span>{{ (loginTime / count).toFixed(0) }}小时</span>
            </div>
          </div>
          <loginTime style="height: calc(100% - 70px)"></loginTime>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginCount from "./loginCount";
import studentInfo from "./studentInfo";
import studentInfo2 from "./studentInfo2";
import loginTime from "./loginTime";
import stuAct from "./stuAct";
export default {
  props: {
    oid: {
      type: String,
    },
  },
  components: {
    loginCount,
    studentInfo,
    studentInfo2,
    loginTime,
    stuAct,
  },
  data() {
    return {
      isLoading: false,
      count: 0,
      loginCount: 0,
      loginTime: 0,
      loginCountMonthArray:[],
      weekCount:0
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardStudent", 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;



          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,
                student: 0,
              })
            } else {
              loginCountMonthArray.push({
                Month: i,
                Year: Year,
                student: 0,
              })
            }
          }

          loginCountMonthArray = loginCountMonthArray.reverse()
          let studentLoginCountYear = res.data[3] // 学生半年登录次数统计

          for (var i = 0; i < studentLoginCountYear.length; i++) {
            let _date = new Date(studentLoginCountYear[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].student++
                break;
              }
            }
          }
          this.loginCountMonthArray = loginCountMonthArray;
          console.log(loginCountMonthArray);

          this.weekCount = res.data[4][0].count
        })
        .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%;
}

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

.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;
  flex-direction: column;
  height: 60px;
  justify-content: 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;
  margin-right: 10px;
}

.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: 12px;
  /* margin: 0 0 5px 0; */
  color: #565e6a;
}

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

.blueBG {
  background: linear-gradient(
    180deg,
    rgba(224, 234, 251, 0.2) 0%,
    rgba(54, 130, 252, 0.3) 100%
  );
}

.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% / 5 - 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>