pbl-teacher-table/src/components/pages/dataBoardNew/student/index.vue

<template>
  <div class="body1">
    <!-- 学生数据 -->
    <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>310</div>
            </div>
            <div class="teaLeft teaRigth">
              <div>本月登录学生用户环比</div>
              <div>0.9%</div>
            </div>
          </div>
          <div class="teafre">
            <div class="teaLeft">
              <div>本月登录学生用户总数</div>
              <div>138</div>
            </div>
            <div class="teaLeft teaRigth">
              <div>本月新增登录学生用户</div>
              <div>18</div>
            </div>
          </div>
          <loginCount style="height: calc(100% - 140px)"></loginCount>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div
            class="title"
            :class="{ isClick: skType == 0 }"
            @click="skType = 0"
            style="cursor: pointer; padding: 0 0 5px 0"
          >
            在线时长
          </div>
          <div
            class="title"
            :class="{ isClick: skType == 1 }"
            @click="skType = 1"
            style="cursor: pointer; padding: 0 0 5px 0"
          >
            登录频次
          </div>
          <el-select v-model="cType" class="selectBox" style="width: 110px">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="一年级" value="一年级"></el-option>
            <el-option label="二年级" value="二年级"></el-option>
            <el-option label="三年级" value="三年级"></el-option>
          </el-select>
          <div class="timeDiv">
            <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
            <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
            <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
          </div>
        </div>
        <div class="teafre" v-if="!oType">
          <div class="teaLeft">
            <div>开展频次</div>
            <div>153</div>
          </div>
          <div class="teaLeft teaRigth">
            <div>人均频次</div>
            <div>4</div>
          </div>
        </div>
        <div class="teafre" v-if="oType">
          <div class="teaLeft">
            <div>累计时长</div>
            <div>15310</div>
          </div>
          <div class="teaLeft teaRigth">
            <div>人均在线时长</div>
            <div>4</div>
          </div>
        </div>
        <div class="dataBox">
          <toolUser style="height: calc(100% - 120px)" v-if="!oType"></toolUser>
          <bar style="height: calc(100% - 120px)" v-if="oType"></bar>
          <div class="otherCss">
            <div v-if="!oType">切换为柱状图</div>
            <div v-if="oType">切换为热力图</div>
            <div class="otherImg" @click="otherEchart">
              <img src="../../../../assets/icon/other.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <div class="titleBox" style="justify-content: space-between">
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
          >
            <div
              class="title"
              :class="{ isClick: courseType == 0 }"
              @click="courseType = 0"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              学生行为分布
            </div>
            <div
              class="title"
              :class="{ isClick: courseType == 1 }"
              @click="courseType = 1"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              学生协同情况
            </div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
            v-if="courseType == 0"
          >
            <el-select v-model="cType1" class="selectBox" style="width: 110px">
              <el-option label="全部" value="全部"></el-option>
            </el-select>
            <el-select v-model="cType2" class="selectBox" style="width: 110px">
              <el-option label="在线时长" value="在线时长"></el-option>
            </el-select>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
            v-if="courseType == 1"
          >
            <el-select v-model="cType3" class="selectBox" style="width: 110px">
              <el-option label="全部" value="全部"></el-option>
            </el-select>
            <el-select v-model="cType4" class="selectBox" style="width: 110px">
              <el-option label="师生" value="师生"></el-option>
            </el-select>
            <el-select v-model="cType5" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
            </el-select>
          </div>
          <div class="timeDiv">
            <div @click="tType1 = 0" :class="{ isClick: tType1 == 0 }">周</div>
            <div @click="tType1 = 1" :class="{ isClick: tType1 == 1 }">月</div>
            <div @click="tType1 = 2" :class="{ isClick: tType1 == 2 }">
              学期
            </div>
          </div>
        </div>
        <div class="dataBox">
          <studentInfo
            v-if="courseType == 0"
            style="height: calc(100%)"
          ></studentInfo>
          <courseNum
            v-if="courseType == 1"
            style="height: calc(100%)"
          ></courseNum>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox" style="justify-content: space-between">
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
          >
            <div
              class="title"
              :class="{ isClick: bType == 0 }"
              @click="bType = 0"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              课程参与情况
            </div>
            <div
              class="title"
              :class="{ isClick: bType == 1 }"
              @click="bType = 1"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              项目参与情况
            </div>
          </div>
          <div class="timeDiv">
            <div @click="sType = 0" :class="{ isClick: sType == 0 }">周</div>
            <div @click="sType = 1" :class="{ isClick: sType == 1 }">月</div>
            <div @click="sType = 2" :class="{ isClick: sType == 2 }">学期</div>
          </div>
        </div>
        <div class="dataBox">
          <div class="allBox" style="height: calc(100% - 30px)">
            <div class="allBox_left">
              <stuAct></stuAct>
            </div>
            <div class="allBox_right">
              <div class="depth">
                <span>参与项目</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="80"
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>使用工具</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="80"
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>协同合作</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="80"
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
              <div class="depth">
                <span>互动交流</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="80"
                    :stroke-width="15"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top" style="border-radius: 5px">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">整体分布</div>
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
          >
            <el-select v-model="cType6" class="selectBox" style="width: 110px">
              <el-option label="全部" value="全部"></el-option>
            </el-select>
            <el-select v-model="cType7" class="selectBox" style="width: 110px">
              <el-option label="在线时长" value="在线时长"></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <studentInfo2 style="height: calc(100% - 40px)"></studentInfo2>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">活动参与</div>
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
          >
            <el-select v-model="cType8" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
            </el-select>
            <el-select v-model="cType9" class="selectBox" style="width: 110px">
              <el-option label="全部班级" value="全部班级"></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <div class="teafre">
            <div class="teaLeft">
              <div>人均参与课程数</div>
              <div>18</div>
            </div>
            <div class="teaLeft teaRigth">
              <div>人均参与项目数</div>
              <div>18</div>
            </div>
          </div>
          <loginTime style="height: calc(100% - 72px)"></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";
import toolUser from "./toolUser";
import bar from "./bar";
import courseNum from "./courseNum";
export default {
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  components: {
    loginCount,
    studentInfo,
    studentInfo2,
    loginTime,
    stuAct,
    toolUser,
    bar,
    courseNum,
  },
  data() {
    return {
      skType: 0,
      tType: 0,
      courseType: 0,
      tType1: 0,
      sType: 0,
      bType: 0,
      cType: "全部",
      cType1: "全部",
      cType2: "在线时长",
      cType3: "全部",
      cType4: "师生",
      cType5: "全部年级",
      cType6: "全部",
      cType7: "在线时长",
      cType8: "全部年级",
      cType9: "全部班级",
      oType: false,
    };
  },
  mounted() {},
  methods: {
    otherEchart() {
      this.oType = !this.oType;
    },
  },
};
</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% / 6 * 4 - 10px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.center > .bottom {
  width: 100%;
  height: calc(100% / 6 * 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;
}

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

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

.title {
  color: #060e17;
  margin-right: 10px;
}

.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) {
}

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

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

.selectBox >>> .el-input__icon {
  line-height: 30px;
}
.teafre {
  margin: 5px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  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: 0 10px;
}
.teaMiddle {
  width: calc(100% / 3 - 10px);
}
.teaLeft {
  width: 95%;
  background: #f3f8fd;
}
.teaRigth {
  background: #f3f8fd;
}
.timeDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 0 0 15px;
}

.timeDiv > div {
  margin-right: 10px;
  cursor: pointer;
}

.isClick {
  color: #1684fc;
  border-bottom: 2px solid #1684fc;
  box-sizing: border-box;
}
.otherCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
.otherImg {
  width: 20px;
  height: 20px;
  margin: 0 10px;
  cursor: pointer;
}
.otherImg > img {
  width: 100%;
  height: 100%;
}
.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>