exam/exam-06173-vue/src/views/dashboard/index.vue

<template>
  <div>
    <div class="fnBox statisticsBox">
      <h3>统计</h3>
      <el-card class="statisticsItem" @click.native="jump('SysUser')">
        <div class="l">
          <img src="@/assets/dash/xyzs.png" />
        </div>
        <div class="r">
          <span class="statisticsTitle">学员总数</span>
          <span class="statisticsNum">{{ usernum }}</span>
        </div>
      </el-card>
      <el-card class="statisticsItem" @click.native="jump('ExamTmpl')">
        <div class="l">
          <img src="@/assets/dash/sjzs.png" />
        </div>
        <div class="r">
          <span class="statisticsTitle">试卷总数</span>
          <span class="statisticsNum">{{ tmplnum }}</span>
        </div>
      </el-card>
      <el-card class="statisticsItem" @click.native="jump('QuList')">
        <div class="l">
          <img src="@/assets/dash/stzs.png" />
        </div>
        <div class="r">
          <span class="statisticsTitle">试题总数</span>
          <span class="statisticsNum">{{ titlenum }}</span>
        </div>
      </el-card>
      <el-card class="statisticsItem" @click.native="jump('ListCourse')">
        <div class="l">
          <img src="@/assets/dash/stzs.png" />
        </div>
        <div class="r">
          <span class="statisticsTitle">课程总数</span>
          <span class="statisticsNum">{{ coursenum }}</span>
        </div>
      </el-card>
    </div>
    <div class="fnBox contentBox">
      <div class="contentItem">
        <h3>快捷入口</h3>
        <div class="quickBox">
          <el-scrollbar style="width: 100%; height: 100%">
            <el-card
              class="quickItem"
              @click.native="jump('AddExam', { tmplId: '0' })"
            >
              <div class="l">
                <img src="@/assets/dash/a1.png" />
              </div>
              <div class="r">
                <span class="quickItemTitle">创建考试</span>
                <span class="quickItemDesc"
                  >快速创建一场考试，支持多种选题方式</span
                >
              </div>
            </el-card>
            <el-card class="quickItem" @click.native="jump('AddCourse')">
              <div class="l">
                <img src="@/assets/dash/a2.png" />
              </div>
              <div class="r">
                <span class="quickItemTitle">添加课程</span>
                <span class="quickItemDesc"
                  >添加课程课件，支持Office/PDF/视频</span
                >
              </div>
            </el-card>
            <el-card class="quickItem" @click.native="jump('ListRepo')">
              <div class="l">
                <img src="@/assets/dash/a3.png" />
              </div>
              <div class="r">
                <span class="quickItemTitle">题库管理</span>
                <span class="quickItemDesc"
                  >批量导入导出、设定章节、题目难易程度</span
                >
              </div>
            </el-card>
            <el-card class="quickItem" @click.native="jump('SysNotice')">
              <div class="l">
                <img src="@/assets/dash/a4.png" />
              </div>
              <div class="r">
                <span class="quickItemTitle">公告管理</span>
                <span class="quickItemDesc">发布日常公告、新闻及提醒事项</span>
              </div>
            </el-card>
          </el-scrollbar>
        </div>
      </div>
      <div class="contentItem">
        <h3>当前考试({{ ksList.length }})</h3>
        <div class="evaluateBox">
          <el-scrollbar style="width: 100%; height: 100%">
            <el-card
              v-for="item in ksList"
              :key="item.id"
              class="evaluateItem"
              @click.native="jump('ExamTmplPreview', { id: item.tmplId })"
            >
              <div slot="header" class="evaluateItemHeader">
                <div>{{ item.title }}</div>
              </div>
              <el-form label-width="90px">
                <el-form-item label="考试时间：">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="`${item.startTime} - ${item.endTime}`"
                    placement="top"
                  >
                    <span class="ovf"
                      >{{ item.startTime }} - {{ item.endTime }}</span
                    >
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="考试时长：">
                  <span>{{ item.totalTime }}</span>
                </el-form-item>
                <el-form-item label="考试总分：">
                  <span>{{ item.totalScore }}</span>
                </el-form-item>
              </el-form>
            </el-card>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div class="fnBox chartBox">
      <div class="radioBox">
        <el-radio-group v-model="radioValue" size="mini" @change="initChart">
          <el-radio-button label="1">本周</el-radio-button>
          <el-radio-button label="2">本月</el-radio-button>
          <el-radio-button label="3">本年</el-radio-button>
        </el-radio-group>
      </div>

      <el-tabs v-model="tabActive" @tab-click="reLayoutTable">
        <el-tab-pane class="chartItem" label="部门" name="bm">
          <div id="bmPxChartDom" style="width: 48%; height: 280px"></div>
          <div id="bmKsChartDom" style="width: 48%; height: 280px"></div>
        </el-tab-pane>
        <el-tab-pane class="chartItem" label="职工" name="zg">
          <div id="zgPxChartDom" style="width: 48%; height: 280px"></div>
          <div id="zgKsChartDom" style="width: 48%; height: 280px"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  getCttTotal,
  getCurrentExam,
  getDepartRank,
  getPassedRate,
  getUserRank,
  getUserRate,
} from "@/api/dashboard/index";
export default {
  components: {},
  data() {
    return {
      usernum: 0,
      tmplnum: 0,
      titlenum: 0,
      coursenum: 0,
      tabActive: "bm",
      radioValue: "2",
      ksList: [],
      getDepartRank,
      getPassedRate,
      getUserRank,
      getUserRate,
    };
  },
  mounted() {
    this.initChart();
    this.getCttTotal();
    this.getCurrentExam();
  },
  methods: {
    // 获取统计数值
    getCttTotal() {
      getCttTotal().then(({ data }) => {
        this.usernum = data.usernum;
        this.tmplnum = data.tmplnum;
        this.titlenum = data.titlenum;
        this.coursenum = data.coursenum;
      });
    },
    // 页面跳转
    jump(name, params = {}) {
      this.$router.push({ name, params });
    },

    // 重置表格布局
    reLayoutTable() {
      this.$nextTick(() => {
        this.initChart();
      });
    },

    // 初始化图表
    initChart() {
      this.$nextTick(() => {
        this.tabActive === "bm"
          ? this.callFn("getDepartRank", "getPassedRate")
          : this.callFn("getUserRank", "getUserRate");
      });
    },

    // 调用函数
    callFn(fn1, fn2) {
      const tabActive = this.tabActive;
      const day =
        this.radioValue === "1" ? 7 : this.radioValue === "2" ? 30 : 360;

      let pxChartDom = document.getElementById(`${tabActive}PxChartDom`);
      let ksChartDom = document.getElementById(`${tabActive}KsChartDom`);

      pxChartDom && pxChartDom.removeAttribute("_echarts_instance_");
      ksChartDom && ksChartDom.removeAttribute("_echarts_instance_");

      this[fn1]({
        statDateL: new Date(new Date() - 3600 * 1000 * 24 * day).formatDate(
          "yyyy-MM-dd hh:mm:ss"
        ),
        statDateR: new Date().formatDate("yyyy-MM-dd hh:mm:ss"),
      }).then((res) => {
        let myChart = echarts.init(pxChartDom);

        let option;

        let xAxisData = [];
        let pxSeriesData = [];

        res.data.forEach((ele) => {
          xAxisData.push(tabActive === "bm" ? ele.deptName : ele.realName);
          pxSeriesData.push(ele.total);
        });

        option = {
          title: {
            showTitle: true,
            text: `${
              tabActive === "bm" ? "部门培训课时排行" : "职工培训课时排行top20"
            }`,
            subtext: "可滚轮缩放、左右拖动查看",
            x: "center",
            y: "top",
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisLabel: {
              rotate: -40,
            },
          },
          yAxis: {
            type: "value",
          },
          tooltip: {
            show: true,
            trigger: "axis",
            formatter(data) {
              let str = "";
              data.forEach((ele) => {
                let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${ele.color}"></span>`;
                str += circle + `${ele.name}: ${ele.value}分钟 <br />`;
              });
              return str;
            },
          },
          dataZoom: [
            {
              id: "dataZoomX",
              type: "inside",
              xAxisIndex: [0],
              filterMode: "none",
              start: 0,
              end: tabActive === "bm" ? 50 : 20,
            },
          ],
          series: [
            {
              data: pxSeriesData,
              type: "line",
              smooth: true,
              itemStyle: {
                color: "#1890ff",
              },
            },
          ],
        };

        option && myChart.setOption(option);
      });

      this[fn2]({
        statDateL: new Date(new Date() - 3600 * 1000 * 24 * day).formatDate(
          "yyyy-MM-dd hh:mm:ss"
        ),
        statDateR: new Date().formatDate("yyyy-MM-dd hh:mm:ss"),
      }).then((res) => {
        let myChart = echarts.init(ksChartDom);

        let option;

        let xAxisData = [];
        let pxSeriesData = [];

        res.data.forEach((ele) => {
          xAxisData.push(tabActive === "bm" ? ele.deptName : ele.realName);
          pxSeriesData.push(ele.total);
        });

        option = {
          title: {
            showTitle: true,
            text: `${
              tabActive === "bm"
                ? "部门考试及格率排行"
                : "职工考试及格率排行top20"
            }`,
            subtext: "可滚轮缩放、左右拖动查看",
            x: "center",
            y: "top",
          },
          xAxis: {
            type: "category",
            data: xAxisData,
          },
          yAxis: {
            type: "value",
          },
          tooltip: {
            show: true,
            trigger: "axis",
            formatter(data) {
              let str = "";
              data.forEach((ele) => {
                let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${ele.color}"></span>`;
                str += circle + `${ele.name}: ${ele.value}% <br />`;
              });
              return str;
            },
          },
          dataZoom: [
            {
              id: "dataZoomX",
              type: "inside",
              xAxisIndex: [0],
              filterMode: "none",
              start: 0,
              end: tabActive === "bm" ? 50 : 20,
            },
          ],
          series: [
            {
              data: pxSeriesData,
              type: "line",
              smooth: true,
              itemStyle: {
                color: "#1890ff",
              },
            },
          ],
        };

        option && myChart.setOption(option);
      });
    },

    // 获取当前考试
    getCurrentExam() {
      getCurrentExam().then((res) => {
        this.ksList = res.data || [];
      });
    },
  },
};
</script>

<style lang="scss" >
.fnBox {
  width: 100%;
  h3 {
    width: 100%;
  }
}

.statisticsBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;

  .statisticsItem {
    margin-left: 20px;
    background: #1890ff;
    padding: 5px;
    cursor: pointer;

    .el-card__body {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      user-select: none;

      .l {
        width: 50px;
        height: 50px;
        margin-right: 40px;

        img {
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
        }
      }

      .r {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        font-weight: 700;
        color: #fff;

        .statisticsTitle {
          font-size: 16px;
          margin-bottom: 10px;
        }

        .statisticsNum {
          font-size: 18px;
        }
      }
    }

    &:nth-child(2) {
      margin-left: 0;
    }
  }
}

.contentBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .contentItem {
    width: 48%;
    height: 225px;

    .quickBox {
      width: 100%;
      height: 100%;

      .el-scrollbar__view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }

      .quickItem {
        width: 48%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        user-select: none;
        cursor: pointer;
        margin-bottom: 18px;

        .el-card__body {
          display: flex;
          justify-content: space-between;
          align-items: center;
          user-select: none;

          .l {
            width: 50px;
            height: 50px;
            margin-right: 20px;

            img {
              width: 100%;
              height: 100%;
              background-size: 100% 100%;
            }
          }

          .r {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            font-weight: 700;
            color: #000;

            .quickItemTitle {
              font-size: 16px;
              margin-bottom: 10px;
            }

            .quickItemDesc {
              font-size: 12px;
              color: #666;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }

    .evaluateBox {
      width: 100%;
      height: 100%;

      .el-scrollbar__view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }

      .evaluateItem {
        width: 48%;
        margin-bottom: 18px;
        cursor: pointer;

        .evaluateItemHeader {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .iconBox {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            i {
              margin-left: 8px;
              cursor: pointer;
            }
          }
        }
      }

      .el-card__body {
        padding: 20px;
      }

      .el-form-item {
        margin-bottom: 0;
        height: 36px;

        .ovf {
          display: inline-block;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.chartBox {
  width: 100%;
  margin-top: 50px;
  position: relative;

  .radioBox {
    position: absolute;
    right: 0;
    top: 45px;
    z-index: 100;
  }

  .chartItem {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>