提交 网考代码

src/modules/oe/component/examSummaryLine.vue

@@ -0,0 +1,155 @@
+<template>
+  <div><v-chart :options="options" /></div>
+</template>
+<script>
+import ECharts from "vue-echarts/components/ECharts";
+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 {
+  props: ["examId"],
+  components: {
+    "v-chart": ECharts
+  },
+  data() {
+    return { options: {} };
+  },
+  methods: {
+    getData() {
+      if (!this.examId) {
+        return;
+      }
+      this.$http
+        .get(
+          "/api/ecs_oe_admin/exam/student/courseProgress/list?examId=" +
+            this.examId
+        )
+        .then(response => {
+          var resp = response.data;
+          resp.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 (resp.length >= campusCount) {
+            courseProgressDataList = resp.slice(0, campusCount);
+          } else {
+            courseProgressDataList = resp;
+          }
+          var xAxisData = [];
+          var seriesBar = {
+            name: "计划数",
+            type: "bar",
+            data: []
+          };
+          var seriesLine1 = {
+            name: "完成数",
+            type: "line",
+            data: []
+          };
+          var seriesLine2 = {
+            name: "完成比(%)",
+            type: "line",
+            data: []
+          };
+          var yAxis = { maxScale1: 0, maxScale2: 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
+            );
+            yAxis.maxScale1 = courseProgressDataList[0].allNum;
+            yAxis.maxScale2 = courseProgressDataList[0].completedProportion;
+          }
+          var optionData = {
+            legendData: ["计划数", "完成数", "完成比(%)"],
+            xAxis: { data: xAxisData },
+            series: [seriesBar, seriesLine1, seriesLine2],
+            yAxis
+          };
+          this.buildOptions(optionData);
+        });
+    },
+    buildOptions(optionData) {
+      var colors = ["#FE8463", "#66CCFF", "#675bba"];
+      this.options = {
+        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: 50,
+            axisLabel: {
+              formatter: "{value} "
+            }
+          },
+          {
+            type: "value",
+            name: "完成比例",
+            min: 0,
+            max: optionData.yAxis.maxScale2,
+            interval: 20,
+            axisLabel: {
+              formatter: "{value} %"
+            }
+          }
+        ],
+        series: optionData.series
+      };
+    }
+  },
+  watch: {
+    examId: function(newData) {
+      if (newData) {
+        this.getData();
+      }
+    }
+  },
+  created() {}
+};
+</script>
+<style></style>

src/modules/oe/component/examSummaryPie.vue

@@ -0,0 +1,95 @@
+<template>
+  <div><v-chart :options="options" /></div>
+</template>
+<script>
+import ECharts from "vue-echarts/components/ECharts";
+import "echarts/lib/chart/pie";
+import "echarts/lib/component/polar";
+import "echarts/lib/component/tooltip";
+import "echarts/lib/component/title";
+import "echarts/lib/component/legend";
+import "echarts/lib/component/legendScroll";
+export default {
+  props: ["examId"],
+  components: {
+    "v-chart": ECharts
+  },
+  data() {
+    return { options: {} };
+  },
+  methods: {
+    getData() {
+      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.buildOptions(optionData);
+        });
+    },
+    buildOptions(data) {
+      var colors = ["#7CB5EC", "#FE8463"];
+      this.options = {
+        color: colors,
+        title: {
+          text: data.title,
+          subtext: "",
+          x: "left"
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}人次<br/>占比:{d}%"
+        },
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          right: 150,
+          bottom: 100,
+          data: data.legendData
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: "50%",
+            center: ["32%", "50%"],
+            data: data.seriesData,
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      };
+    }
+  },
+  watch: {
+    examId: function(newData) {
+      if (newData) {
+        this.getData();
+      }
+    }
+  },
+  created() {}
+};
+</script>
+<style></style>

src/modules/oe/routes/routes.js

@@ -1,3 +1,4 @@
+import Home from "../../portal/views/home/Home.vue";
 import absent from "../views/absent.vue";
 import awaitingAudit from "../views/awaitingAudit.vue";
 import alreadyAudited from "../views/alreadyAudited.vue";
@@ -8,55 +9,68 @@ import examDetail from "../views/examDetail.vue";
 import examScheduling from "../views/examScheduling.vue";
 import captureDetail from "../views/captureDetail.vue";
 import examPaperDetail from "../views/examPaperDetail.vue";
+import examSummary from "../views/examSummary.vue";
 export default [
   {
-    path: "/oe/absent",
-    name: "absent",
-    component: absent //缺考登记
-  },
-  {
-    path: "/oe/awaitingAudit",
-    name: "awaitingAudit",
-    component: awaitingAudit //监考待审
-  },
-  {
-    path: "/oe/alreadyAudited",
-    name: "alreadyAudited",
-    component: alreadyAudited //监考已审
-  },
-  {
-    path: "/oe/reexamine",
-    name: "reexamine",
-    component: reexamine //重考列表
-  },
-  {
-    path: "/oe/illegalityNameList",
-    name: "illegalityNameList",
-    component: illegalityNameList //违纪名单
-  },
-  {
-    path: "/oe/scoreStatistics",
-    name: "scoreStatistics",
-    component: scoreStatistics //成绩统计
-  },
-  {
-    path: "/oe/examDetail",
-    name: "examDetail",
-    component: examDetail //考试详情
-  },
-  {
-    path: "/oe/examScheduling",
-    name: "examScheduling",
-    component: examScheduling //考试进度详情
-  },
-  {
-    path: "/oe/captureDetail/:examRecordDataId",
-    name: "captureDetail",
-    component: captureDetail //抓拍详情
-  },
-  {
-    path: "/oe/examPaperDetail/:courseId/:examRecordDataId",
-    name: "examPaperDetail",
-    component: examPaperDetail //考卷详情
+    path: "/questions", //首页
+    meta: { auth: false },
+    component: Home,
+    children: [
+      {
+        path: "/oe/absent",
+        name: "absent",
+        component: absent //缺考登记
+      },
+      {
+        path: "/oe/awaitingAudit",
+        name: "awaitingAudit",
+        component: awaitingAudit //监考待审
+      },
+      {
+        path: "/oe/alreadyAudited",
+        name: "alreadyAudited",
+        component: alreadyAudited //监考已审
+      },
+      {
+        path: "/oe/reexamine",
+        name: "reexamine",
+        component: reexamine //重考列表
+      },
+      {
+        path: "/oe/illegalityNameList",
+        name: "illegalityNameList",
+        component: illegalityNameList //违纪名单
+      },
+      {
+        path: "/oe/scoreStatistics",
+        name: "scoreStatistics",
+        component: scoreStatistics //成绩统计
+      },
+      {
+        path: "/oe/examDetail",
+        name: "examDetail",
+        component: examDetail //考试详情
+      },
+      {
+        path: "/oe/examScheduling",
+        name: "examScheduling",
+        component: examScheduling //考试进度详情
+      },
+      {
+        path: "/oe/captureDetail/:examRecordDataId",
+        name: "captureDetail",
+        component: captureDetail //抓拍详情
+      },
+      {
+        path: "/oe/examPaperDetail/:courseId/:examRecordDataId",
+        name: "examPaperDetail",
+        component: examPaperDetail //考卷详情
+      },
+      {
+        path: "/oe/examSummary",
+        name: "examSummary",
+        component: examSummary //考试概览
+      }
+    ]
   }
 ];

src/modules/oe/views/examScheduling.vue

@@ -6,8 +6,8 @@
         <el-col :span="8">
           <el-form-item label="完成状态">
             <el-select v-model="form.finished" clearable placeholder="全部">
-              <el-option value="false" label="已完成"></el-option>
-              <el-option value="true" label="未完成"></el-option>
+              <el-option value="true" label="已完成"></el-option>
+              <el-option value="false" label="未完成"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
@@ -88,7 +88,7 @@
               <template slot-scope="scope">
                 <el-button
                   size="mini"
-                  ng-show="scope.row.examType=='OFFLINE'"
+                  v-show="scope.row.examType == 'OFFLINE'"
                   type="success"
                   icon="el-icon-success"
                   @click="previewPaper(scope.row.examStudentId);"
@@ -96,7 +96,7 @@
                 >
                 <el-button
                   size="mini"
-                  ng-show="scope.row.examType=='OFFLINE'"
+                  v-show="scope.row.examType == 'OFFLINE'"
                   type="success"
                   icon="el-icon-success"
                   @click="exportPaper(scope.row.examStudentId);"
@@ -104,7 +104,7 @@
                 >
                 <el-button
                   size="mini"
-                  ng-show="scope.row.examType=='OFFLINE'"
+                  v-show="scope.row.examType == 'OFFLINE'"
                   type="success"
                   icon="el-icon-success"
                   @click="openUploadAnswerDialog(scope.row.examStudentId);"

src/modules/oe/views/examSummary.vue

@@ -0,0 +1,311 @@
+<template>
+  <el-container>
+    <el-header> <div class="header-title">考试概览</div> </el-header>
+    <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>
+        <el-col :span="10" class="chart-border">
+          <div class="chart-header">考试进度情况</div>
+          <examSummaryPie :examId="examId"></examSummaryPie>
+        </el-col>
+        <el-col :span="1">&nbsp;</el-col>
+        <el-col :span="13" class="chart-border">
+          <div class="chart-header">课程完成进度TOP5</div>
+          <examSummaryLine :examId="examId"></examSummaryLine>
+        </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 examSummaryPie from "../component/examSummaryPie.vue";
+import examSummaryLine from "../component/examSummaryLine.vue";
+export default {
+  components: { examSummaryPie, examSummaryLine },
+  data() {
+    return {
+      examList: [],
+      orgList: [],
+      courseList: [],
+      examId: "",
+      orgId: "",
+      courseId: "",
+      activeName: "first",
+      orgExamInfos: [],
+      courseProgressList: []
+    };
+  },
+  computed: {
+    ...mapState({ user: state => state.user })
+  },
+  methods: {
+    getExams(examName) {
+      if (!examName) {
+        examName = "";
+      }
+      this.$http
+        .get("/api/ecs_exam_work/exam/queryByNameLike", {
+          params: { name: examName }
+        })
+        .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;
+          } 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.getCourses();
+      this.getOrgExamInfos();
+      this.getCourseProgress();
+    }
+  },
+  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>