pbl-teacher-table/src/components/pages/dataBoardNew/project/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="cType7" class="selectBox" style="width: 110px">
            <el-option label="全部课程" value="全部课程"></el-option>
          </el-select>
        </div>
        <div class="dataBox">
          <div class="info_box">
            <div class="info blueBG">
              <span>项目总数</span>
              <!-- <span>{{ count }}</span> -->
              <span>{{ 15130 }}</span>
            </div>
            <div class="info blueBG">
              <span>本月新增项目环比</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{ "80%" }}</span>
            </div>
            <div class="info blueBG">
              <span>模板项目总数</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{ 18 }}</span>
            </div>
            <div class="info blueBG">
              <span>本月新增项目总数</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{ 18 }}</span>
            </div>
          </div>
          <TeaFre style="height: calc(100% - 140px)"></TeaFre>
        </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="info_box" v-if="!oType">
          <div class="info blueBG">
            <span>开展频次</span>
            <!-- <span>{{ count }}</span> -->
            <span>{{ 15130 }}</span>
          </div>
          <div class="info blueBG">
            <span>项目开展总数</span>
            <!-- <span>{{ weekCount }}</span> -->
            <span>{{ "80%" }}</span>
          </div>
          <div class="info blueBG">
            <span>项目平均开展次数</span>
            <!-- <span>{{ weekCount }}</span> -->
            <span>{{ 18 }}</span>
          </div>
        </div>
        <div class="info_box" v-if="oType">
          <div class="info blueBG">
            <span>累计时长</span>
            <!-- <span>{{ count }}</span> -->
            <span>{{ 15130 }}</span>
          </div>
          <div class="info blueBG">
            <span>开展项目总数</span>
            <!-- <span>{{ weekCount }}</span> -->
            <span>{{ "80%" }}</span>
          </div>
          <div class="info blueBG">
            <span>项目平均时长</span>
            <!-- <span>{{ weekCount }}</span> -->
            <span>{{ 18 }}</span>
          </div>
        </div>
        <div class="dataBox">
          <ToolUse style="height: calc(100% - 170px)" v-if="!oType"></ToolUse>
          <Bar style="height: calc(100% - 170px)" 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">
          <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 class="dataBox">
          <CateRank
            v-if="courseType == 0"
            style="height: calc(100%)"
          ></CateRank>
          <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
            v-if="!shType"
            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
            v-if="shType"
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
          >
            <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>
            <el-select v-model="cType3" class="selectBox" style="width: 110px">
              <el-option label="全部主题" value="全部主题"></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <CourseTime
            v-if="!shType"
            style="height: calc(100% - 30px)"
          ></CourseTime>
          <div class="info_box" v-if="shType">
            <div class="info blueBG">
              <span>项目实施总数</span>
              <!-- <span>{{ count }}</span> -->
              <span>{{ 15130 }}</span>
            </div>
            <div class="info blueBG">
              <span>平台实施项目占比</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{ "80%" }}</span>
            </div>
            <div class="info blueBG">
              <span>项目平均任务数量</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{ 18 }}</span>
            </div>
            <div class="info blueBG">
              <span>项目平均作业数量</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{ 18 }}</span>
            </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
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
          >
            <div
              class="title"
              :class="{ isClick: toolType == 0 }"
              @click="toolType = 0"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              项目占比
            </div>
            <div
              class="title"
              :class="{ isClick: toolType == 1 }"
              @click="toolType = 1"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              工具使用
            </div>
          </div>
          <el-select
            v-model="cType4"
            class="selectBox"
            style="width: 110px"
            v-if="toolType == 0"
          >
            <el-option label="按年级" value="按年级"></el-option>
            <el-option label="按学科" value="按学科"></el-option>
            <el-option label="按主题" value="按主题"></el-option>
          </el-select>
          <div
            v-if="toolType == 1"
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
          >
            <el-select v-model="cType5" class="selectBox" style="width: 110px">
              <el-option label="全部学科" value="全部学科"></el-option>
              <el-option label="语文" value="语文"></el-option>
              <el-option label="数学" value="数学"></el-option>
            </el-select>
            <el-select v-model="cType6" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
              <el-option label="一年级" value="一年级"></el-option>
              <el-option label="二年级" value="二年级"></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <CourseAna
            style="height: calc(100% - 40px)"
            v-if="toolType == 0"
          ></CourseAna>
          <ToolChart
            style="height: calc(100% - 40px)"
            v-if="toolType == 1"
          ></ToolChart>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">项目学科分布</div>
        </div>
        <div class="dataBox">
          <WorkTime style="height: calc(100% - 72px)" v-if="xtType"></WorkTime>
          <div class="otherCss">
            <div v-if="!xtType">转换为人员协同</div>
            <div v-if="xtType">转换为学科协同</div>
            <div class="otherImg" @click="xtEchart">
              <img src="../../../../assets/icon/other.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TeaFre from "./chartList/teaFre.vue";
import ToolUse from "./chartList/toolUse.vue";
import CateRank from "./chartList/cateRank.vue";
import WorkNum from "./chartList/workNum.vue";
import CourseTime from "./chartList/courseTime.vue";
import CourseAna from "./chartList/courseAna.vue";
import WorkTime from "./chartList/workTime.vue";
import Bar from "./chartList/bar.vue";
import CourseNum from "./chartList/courseNum.vue";
import ToolChart from "./chartList/toolChart.vue";
export default {
  components: {
    TeaFre,
    ToolUse,
    CateRank,
    WorkNum,
    CourseTime,
    CourseAna,
    WorkTime,
    Bar,
    CourseNum,
    ToolChart,
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      cType: "全部年级",
      cType1: "全部年级",
      cType2: "全部学科",
      cType3: "全部主题",
      cType4: "按年级",
      cType5: "全部学科",
      cType6: "全部年级",
      cType7: "全部课程",
      cType8: "全部年级",
      cType9: "全部学科",
      toolType: 0,
      tType: 0,
      skType: 0,
      courseType: 0,
      sType: 0,
      oType: false,
      shType: false,
      xtType: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    otherEchart() {
      this.oType = !this.oType;
    },
    shEchart() {
      this.shType = !this.shType;
    },
    xtEchart() {
      this.xtType = !this.xtType;
    },
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardStudentCourseNew", params)
        .then((res) => {
          this.isLoading = false;
          let _grade = res.data[0]; //赛道
          let _subject = res.data[1]; //主题

          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% / 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: 16px;
  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;
  box-sizing: border-box;
  width: 100%;
}

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

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

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

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

.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%;
  height: 100%;
}
.selectBox {
  width: 80px;
  margin-left: 10px;
}

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

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

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

.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: row;
  flex-wrap: nowrap;
  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);
}
</style>