examcloud-admin-web/src/modules/oe/views/examSummary.vue

<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="24">
          <el-form>
            <el-form-item label="考试批次">
              <el-select
                v-model="examId"
                filterable
                remote
                :remote-method="getExams"
                clearable
                @clear="getExams"
                @change="changeExam"
                placeholder="请选择考试批次"
              >
                <el-option
                  v-for="item in examList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="2">
        <el-col :span="10" class="chart-border">
          <div class="chart-header">考试进度情况</div>
          <div><v-chart :options="pieOptions" /></div>
        </el-col>
        <el-col :span="14" class="chart-border">
          <div class="chart-header">课程完成进度TOP5</div>
          <div><v-chart :options="lineOptions" /></div>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-col :span="24">
          <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="学习中心完成进度" name="first">
              <el-row style="margin-top:20px;">
                <el-col :span="24">
                  <el-form>
                    <el-form-item label="学习中心">
                      <el-select
                        v-model="orgId"
                        filterable
                        remote
                        :remote-method="getOrgs"
                        clearable
                        @clear="getOrgs"
                        @change="getOrgExamInfos"
                        placeholder="请选择学习中心"
                      >
                        <el-option
                          v-for="item in orgList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="24">
                  <el-table
                    element-loading-text="数据加载中"
                    :data="orgExamInfos"
                    border
                  >
                    <el-table-column
                      sortable
                      label="学习中心代码"
                      prop="orgCode"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      label="学习中心名称"
                      prop="orgName"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      label="报考人数"
                      prop="totalCount"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      label="实考人数"
                      prop="finishedCount"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      label="完成比率"
                      prop="finishedPercent"
                    >
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="课程完成进度" name="two">
              <el-row style="margin-top:20px;">
                <el-col :span="24">
                  <el-form>
                    <el-form-item label="课程">
                      <el-select
                        v-model="courseId"
                        filterable
                        remote
                        :remote-method="getCourses"
                        clearable
                        @clear="getCourses"
                        @change="getCourseProgress"
                        placeholder="请选择课程"
                      >
                        <el-option
                          v-for="item in courseList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="24">
                  <el-table
                    element-loading-text="数据加载中"
                    :data="courseProgressList"
                    border
                  >
                    <el-table-column
                      sortable
                      label="课程名称"
                      prop="courseName"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      label="课程代码"
                      prop="courseCode"
                    >
                    </el-table-column>
                    <el-table-column sortable label="报考人数" prop="allNum">
                    </el-table-column>
                    <el-table-column
                      sortable
                      label="实考人数"
                      prop="completedNum"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      label="完成比率"
                      prop="completedProportion"
                    >
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
import { mapState } from "vuex";
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/component/legend";
import "echarts/lib/component/legendScroll";
import "echarts/lib/chart/pie";
import "echarts/lib/component/polar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
export default {
  components: { "v-chart": ECharts },
  data() {
    return {
      examList: [],
      orgList: [],
      courseList: [],
      examId: "",
      orgId: "",
      courseId: "",
      activeName: "first",
      orgExamInfos: [],
      courseProgressList: [],
      lineOptions: {},
      pieOptions: {}
    };
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  methods: {
    getExams(examName) {
      if (!examName) {
        examName = "";
      }
      this.$http
        .get("/api/ecs_exam_work/exam/queryByNameLike", {
          params: { name: examName, examTypes: "ONLINE#OFFLINE" }
        })
        .then(response => {
          this.examList = response.data;
        });
    },
    getOrgs(orgName) {
      if (!orgName) {
        orgName = "";
      }
      var rootOrgId = this.user.rootOrgId;
      this.$http
        .get("/api/ecs_core/org/query", {
          params: {
            name: orgName,
            rootOrgId: rootOrgId,
            enable: true
          }
        })
        .then(response => {
          this.orgList = response.data;
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getOrgExamInfos() {
      this.$http
        .post(
          "/api/ecs_oe_admin/exam/student/statistic/by/org?examId=" +
            this.examId +
            "&orgId=" +
            this.orgId
        )
        .then(response => {
          if (response.data && response.data.length > 0) {
            this.orgExamInfos = response.data;
          } else {
            this.orgExamInfos = [];
          }
        });
    },
    getCourseProgress() {
      this.$http
        .get("/api/ecs_oe_admin/exam/student/courseProgress/list", {
          params: {
            examId: this.examId,
            courseId: this.courseId
          }
        })
        .then(response => {
          if (response.data && response.data.length > 0) {
            this.courseProgressList = response.data;
            this.buildLine(response.data);
          } else {
            this.courseProgressList = [];
          }
        });
    },
    getCourses() {
      if (!this.examId) {
        return false;
      }
      this.$http
        .get("/api/ecs_oe_admin/exam/student/findCoursesByExamIdAndOrgId", {
          params: {
            examId: this.examId,
            orgId: this.orgId
          }
        })
        .then(response => {
          if (response.data && response.data.length > 0) {
            this.courseList = response.data;
          } else {
            this.courseList = [];
          }
        });
    },
    changeExam() {
      this.getPieData();
      this.getCourses();
      this.getOrgExamInfos();
      this.getCourseProgress();
    },
    getPieData() {
      if (!this.examId) {
        return;
      }
      this.$http
        .post(
          "/api/ecs_oe_admin/exam/student/statistic/by/finished?examId=" +
            this.examId
        )
        .then(response => {
          var resp = response.data;
          var optionData = {
            title: "考试人次:" + (resp.finished + resp.unFinished),
            legendData: [
              "未完成:" + resp.unFinished,
              "已完成:" + resp.finished
            ],
            seriesData: [
              { name: "未完成:" + resp.unFinished, value: resp.unFinished },
              { name: "已完成:" + resp.finished, value: resp.finished }
            ]
          };
          this.buildPieOptions(optionData);
        });
    },
    buildPieOptions(data) {
      var colors = ["#7CB5EC", "#FE8463"];
      this.pieOptions = {
        color: colors,
        title: {
          text: data.title,
          subtext: "",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}人次<br/>占比:{d}%"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 200,
          top: 30,
          data: data.legendData
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            center: ["30%", "60%"],
            data: data.seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    },
    buildLine(courseProgressList) {
      courseProgressList.sort(function(a, b) {
        if (b["completedProportion"] != a["completedProportion"]) {
          return b["completedProportion"] - a["completedProportion"];
        } else if (b["allNum"] != a["allNum"]) {
          return b["allNum"] - a["allNum"];
        } else {
          return b["completedNum"] - a["completedNum"];
        }
      });

      var campusCount = 5;
      var courseProgressDataList = [];
      //找出5个完成比例最高的
      if (courseProgressList.length >= campusCount) {
        courseProgressDataList = courseProgressList.slice(0, campusCount);
      } else {
        courseProgressDataList = courseProgressList;
      }
      var xAxisData = [];
      var seriesBar = {
        name: "计划数",
        type: "bar",
        data: []
      };
      var seriesLine1 = {
        name: "完成数",
        type: "line",
        data: []
      };
      var seriesLine2 = {
        name: "完成比(%)",
        type: "line",
        data: []
      };
      var yAxis_maxScale1 = 0;
      for (var i = 0; i < courseProgressDataList.length; i++) {
        xAxisData.push(courseProgressDataList[i].courseName);
        seriesBar.data.push(courseProgressDataList[i].allNum);
        seriesLine1.data.push(courseProgressDataList[i].completedNum);
        seriesLine2.data.push(courseProgressDataList[i].completedProportion);
        if (courseProgressDataList[i].allNum > yAxis_maxScale1) {
          yAxis_maxScale1 = courseProgressDataList[i].allNum;
        }
      }
      var optionData = {
        legendData: ["计划数", "完成数", "完成比(%)"],
        xAxis: { data: xAxisData },
        series: [seriesBar, seriesLine1, seriesLine2],
        yAxis_maxScale1
      };
      this.buildLineOptions(optionData);
    },
    buildLineOptions(optionData) {
      var colors = ["#FE8463", "#66CCFF", "#675bba"];
      this.lineOptions = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: optionData.legendData
        },
        xAxis: [
          {
            type: "category",
            data: optionData.xAxis.data,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "人次",
            min: 0,
            max: optionData.yAxis_maxScale1,
            interval: 10000,
            axisLabel: {
              formatter: "{value} "
            }
          },
          {
            type: "value",
            name: "完成比例",
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: optionData.series
      };
    }
  },
  created() {
    this.getExams();
    this.getOrgs();
  }
};
</script>
<style>
.chart-border {
  border: 1px solid #ddd;
}
.chart-header {
  color: #333;
  font-size: 14px;
  background-color: #f5f5f5;
  border-color: #ddd;
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
</style>