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

<template>
  <div class="body1" v-loading="isLoading">
    <!-- 综合数据 -->
    <div class="left">
      <div class="top">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">基础概况</div>
          <el-select v-model="cType" class="selectBox" style="width: 110px">
            <el-option label="全部" value="全部"></el-option>
          </el-select>
        </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="cType1" 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>1513</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;
            "
          >
            <el-select
              v-model="cType3"
              class="selectBox"
              style="width: 110px"
              v-if="courseType == 1"
            >
              <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>
        <div class="dataBox">
          <teacherInfo
            v-if="courseType == 0"
            style="height: calc(100%)"
          ></teacherInfo>
          <courseNum
            v-if="courseType == 1"
            style="height: calc(100%)"
          ></courseNum>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">平台使用概况</div>
          <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="dataBox">
          <div
            class="depth_box"
            v-if="!shType"
            style="height: calc(100% - 30px)"
          >
            <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 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 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 class="teafre" v-if="shType">
            <div class="teaLeft">
              <div>平台实施课程总数</div>
              <div>18</div>
            </div>
            <div class="teaLeft">
              <div>平台实施课程占比</div>
              <div>80%</div>
            </div>
            <div class="teaLeft">
              <div>课程平均任务数量</div>
              <div>18</div>
            </div>
            <div class="teaLeft teaRigth">
              <div>课程平均作业数量</div>
              <div>18</div>
            </div>
          </div>
          <workNum v-if="shType"></workNum>
          <div class="otherCss">
            <div v-if="!shType">切换为散点图</div>
            <div v-if="shType">切换为进度条</div>
            <div class="otherImg" @click="shEchart">
              <img src="../../../../assets/icon/other.png" alt="" />
            </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="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>
        <div class="dataBox">
          <courseInfo
            style="height: calc(100% - 40px)"
          ></courseInfo>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">跨学科教学情况</div>
          <el-select
              v-model="cType6"
              class="selectBox"
              style="width: 110px"
            >
              <el-option label="全部" value="全部"></el-option>
            </el-select>
        </div>
        <div class="dataBox">
          <cateRank style="height: calc(100% - 72px)"></cateRank>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginCount from "./loginCount";
import teacherInfo from "./teacherInfo";
import courseInfo from "./courseInfo";
import cateRank from "./cateRank";
import toolUser from "./toolUser";
import bar from "./bar";
import courseNum from "./courseNum";
import workNum from "./workNum";
export default {
  components: {
    loginCount,
    teacherInfo,
    courseInfo,
    cateRank,
    toolUser,
    bar,
    courseNum,
    workNum,
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  data() {
    return {
      isLoading:false,
      cType: "全部",
      cType1: "全部年级",
      cType2: "全部活动",
      cType3: "按年级",
      cType4: "全部",
      cType5: "总量占比",
      cType6: "全部",
      skType: 0,
      tType: 0,
      courseType: 0,
      oType: false,
      shType: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    otherEchart() {
      this.oType = !this.oType;
    },
    shEchart() {
      this.shType = !this.shType;
    },
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardSchoolNew", params)
        .then((res) => {
          this.isLoading = false;
          let _grade = res.data[0] //年级
          let _subject = res.data[1]  //学科
          let _course = res.data[2] //课程

          this.$forceUpdate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
  },
};
</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.8 - 20px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

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

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

.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;
}

.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%;
}
</style>