在线人数

src/modules/reports/routes/routes.js

@@ -4,7 +4,8 @@ import Project from "../views/Project.vue";
 import Overview from "../views/Overview.vue";
 import ComputeJobList from "../views/ComputeJobList.vue";
 import ReportView from "../views/ReportView.vue";
-
+import ExamStudentOnline from "../views/ExamStudentOnline.vue";
+import ExamStudentOnlineDetail from "../views/ExamStudentOnlineDetail.vue";
 export default [
   {
     path: "/reports",
@@ -24,6 +25,11 @@ export default [
         meta: { privilegeCodes: "index_overview" },
         component: Overview
       },
+      {
+        path: "exam-student-online",
+        meta: { privilegeCodes: "reports_exam_student_online" },
+        component: ExamStudentOnline
+      },
       {
         path: "compute-job-list/:projectId",
         component: ComputeJobList
@@ -31,6 +37,10 @@ export default [
       {
         path: "report-view/:projectId",
         component: ReportView
+      },
+      {
+        path: "online-detail",
+        component: ExamStudentOnlineDetail
       }
     ]
   }

src/modules/reports/views/ExamStudentOnline.vue

@@ -0,0 +1,288 @@
+<template>
+  <section class="content">
+    <div class="box box-info">
+      <div
+        class="box-body"
+        v-loading.body="loading"
+        v-loading.fullscreen="loading"
+        element-loading-text="请稍后..."
+      >
+        <div class="left-div">
+          <div class="row-div">
+            <div class="total-div">
+              <span style="width: 85px;height: 85px;display:block;">
+                <img
+                  src="../assets/img/u316.png"
+                  style="height: 50px;width: 50px;"
+                /> </span
+              ><span style="display:block;margin-left: 10px;">
+                <span style="display:block;font-weight:bold;font-size:40px">{{
+                  totalStudent
+                }}</span>
+                <span style="display:block;">注册学生</span>
+              </span>
+            </div>
+            <div class="online-div">
+              <span style="width: 85px;height: 85px;display:block;">
+                <img
+                  src="../assets/img/u326.png"
+                  style="height: 50px;width: 50px;"
+                /> </span
+              ><span style="display:block;margin-left: 10px;">
+                <span style="display:block;font-weight:bold;font-size:40px">{{
+                  totalOnlineStudent
+                }}</span>
+                <span style="display:block;">在线学生</span>
+              </span>
+            </div>
+          </div>
+          <div class="tb-div">
+            <div class="row-div">
+              <span style="float:left;"> 学校在线学生</span
+              ><span style="float:right;"
+                ><el-button size="small" type="primary" @click="toInfoPage">
+                  详情
+                </el-button></span
+              >
+              <span style="float:right;margin-right: 10px;"
+                ><el-button size="small" type="primary" @click="refresh">
+                  刷新
+                </el-button></span
+              >
+            </div>
+            <div class="row-div">
+              <el-table
+                :data="tableData"
+                border
+                resizable
+                stripe
+                style="width: 100%;"
+              >
+                <el-table-column prop="rootOrgName" label="学校">
+                </el-table-column>
+                <el-table-column width="100" prop="totalCount" label="注册学生">
+                </el-table-column>
+                <el-table-column
+                  width="100"
+                  prop="onlineCount"
+                  label="在线学生"
+                >
+                </el-table-column>
+                <el-table-column
+                  width="100"
+                  prop="onExamCount"
+                  label="在考学生"
+                >
+                </el-table-column>
+              </el-table>
+              <div class="page pull-right">
+                <el-pagination
+                  v-if="paginationShow"
+                  @current-change="handleCurrentChange"
+                  :current-page="currentPage"
+                  :page-size="pageSize"
+                  :page-sizes="[10, 20, 50, 100, 200, 300]"
+                  @size-change="handleSizeChange"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="total"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right-div">
+          <div class="row-div">近5日在线学生</div>
+          <div class="row-div">
+            <v-charts :options="lastNdayData"></v-charts>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import { REPORTS_API } from "@/constants/constants.js";
+import { mapState } from "vuex";
+import ECharts from "vue-echarts/components/ECharts";
+import "echarts/lib/chart/bar";
+export default {
+  components: {
+    "v-charts": ECharts
+  },
+  name: "ExamStudentOnline",
+  data() {
+    return {
+      lastNdayData: {
+        tooltip: {
+          trigger: "axis"
+        },
+        xAxis: {
+          type: "category",
+          data: []
+        },
+        yAxis: {
+          type: "value"
+        },
+        series: [
+          {
+            data: [],
+            type: "line"
+          }
+        ]
+      },
+      totalStudent: 0,
+      totalOnlineStudent: 0,
+      loading: false,
+      paginationShow: false,
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 10
+    };
+  },
+  computed: {
+    ...mapState({ user: state => state.user }),
+    isSuperAdmin() {
+      return this.user.roleList.some(role => role.roleCode == "SUPER_ADMIN");
+    }
+  },
+  methods: {
+    toInfoPage() {
+      this.$router.push({
+        path: "/reports/online-detail"
+      });
+    },
+    refresh() {
+      this.searchTotalStudent();
+      this.searchLastNDayData();
+      this.searchTotalOnlineStudent();
+      this.searchForm();
+    },
+    handleSearchBtn() {
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.searchForm();
+    },
+    //查询
+    async searchForm() {
+      this.loading = true;
+      var url =
+        REPORTS_API +
+        "/studentTotalCount/page/" +
+        this.currentPage +
+        "/" +
+        this.pageSize;
+      this.$httpWithMsg
+        .get(url)
+        .then(response => {
+          this.tableData = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+
+          this.$nextTick(function() {
+            this.paginationShow = true;
+          });
+        })
+        .finally(() => (this.loading = false));
+    },
+    async searchTotalStudent() {
+      var url = REPORTS_API + "/studentTotalCount/getSumTotalCount";
+      this.$httpWithMsg.get(url).then(response => {
+        this.totalStudent = response.data;
+      });
+    },
+    async searchTotalOnlineStudent() {
+      var url = REPORTS_API + "/studentCount/getSumOnlineCount";
+      this.$httpWithMsg.get(url).then(response => {
+        this.totalOnlineStudent = response.data;
+      });
+    },
+    async searchLastNDayData() {
+      var url =
+        REPORTS_API + "/studentCumulativeCount/getLastNdayOnlineCount?nday=5";
+      this.$httpWithMsg.get(url).then(response => {
+        let xdata = [];
+        response.data.forEach(e => {
+          xdata.push(e.reportDay);
+        });
+        this.lastNdayData.xAxis.data = xdata;
+        let ydata = [];
+        response.data.forEach(e => {
+          ydata.push(e.totalCount);
+        });
+        this.lastNdayData.series = [
+          {
+            data: ydata,
+            type: "line"
+          }
+        ];
+      });
+    },
+    init() {
+      this.searchTotalStudent();
+      this.searchLastNDayData();
+      this.searchTotalOnlineStudent();
+      this.searchForm();
+    }
+  },
+  //初始化查询
+  created() {
+    this.init();
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  margin-top: 10px;
+}
+.pull-length {
+  width: 300px;
+}
+.pull-center {
+  margin-top: 20px;
+}
+.editForm .el-form-item {
+  margin-bottom: 12px;
+}
+.left-div {
+  width: 49%;
+  float: left;
+}
+.right-div {
+  width: 49%;
+  float: right;
+  border: 1px solid #ddd;
+}
+.row-div {
+  width: 100%;
+  display: inline-block;
+}
+.total-div {
+  display: flex;
+  float: left;
+  border: 1px solid #ddd;
+  padding: 5px;
+  width: 49%;
+}
+.online-div {
+  display: flex;
+  float: right;
+  border: 1px solid #ddd;
+  padding: 5px;
+  width: 49%;
+}
+.tb-div {
+  width: 100%;
+  border: 1px solid #ddd;
+  padding: 5px;
+}
+</style>

src/modules/reports/views/ExamStudentOnlineDetail.vue

@@ -0,0 +1,191 @@
+<template>
+  <section class="content">
+    <div class="box box-info">
+      <div
+        class="box-body"
+        v-loading.body="loading"
+        v-loading.fullscreen="loading"
+        element-loading-text="请稍后..."
+      >
+        <!-- 表单 -->
+        <el-form inline :model="formSearch">
+          <el-form-item label="学校">
+            <el-select
+              v-model="formSearch.rootOrgId"
+              placeholder="请选择"
+              style="width: 180px"
+            >
+              <el-option
+                v-for="item in rootOrgList"
+                :label="item.name"
+                :value="item.id"
+                :key="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-search"
+              @click="handleSearchBtn"
+            >
+              查询
+            </el-button>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-arrow-left"
+              @click="back"
+            >
+              返回
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+        <div class="block-seperator"></div>
+        <!-- 页面列表 -->
+        <el-table
+          :data="tableData"
+          border
+          resizable
+          stripe
+          style="width: 100%;"
+        >
+          <el-table-column prop="examName" label="考试批次"> </el-table-column>
+          <el-table-column width="100" prop="examType" label="考试类型">
+          </el-table-column>
+          <el-table-column
+            width="180"
+            prop="examStartDate"
+            label="考试开始时间"
+          >
+          </el-table-column>
+          <el-table-column width="180" prop="examEndDate" label="考试结束时间">
+          </el-table-column>
+          <el-table-column width="100" prop="onlineCount" label="在线人数">
+          </el-table-column>
+          <el-table-column width="100" prop="totalCount" label="计划人数">
+          </el-table-column>
+          <el-table-column width="100" prop="completeCount" label="完成人数">
+          </el-table-column>
+          <el-table-column width="100" prop="completeRatio" label="完成率">
+          </el-table-column>
+        </el-table>
+        <div class="page pull-right">
+          <el-pagination
+            v-if="paginationShow"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :page-sizes="[10, 20, 50, 100, 200, 300]"
+            @size-change="handleSizeChange"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import { REPORTS_API, CORE_API } from "@/constants/constants.js";
+import { mapState } from "vuex";
+
+export default {
+  name: "Project",
+  data() {
+    return {
+      loading: false,
+      rootOrgList: [],
+      paginationShow: false,
+      formSearch: {
+        rootOrgId: null
+      },
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 10
+    };
+  },
+  computed: {
+    ...mapState({ user: state => state.user }),
+    isSuperAdmin() {
+      return this.user.roleList.some(role => role.roleCode == "SUPER_ADMIN");
+    }
+  },
+  methods: {
+    back() {
+      this.$router.push({
+        path: "/reports/exam-student-online"
+      });
+    },
+    handleSearchBtn() {
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.searchForm();
+    },
+    //查询
+    searchForm() {
+      if (this.formSearch.rootOrgId == null) {
+        this.$notify({
+          type: "warning",
+          message: "请选择学校"
+        });
+        return;
+      }
+      this.loading = true;
+      var url =
+        REPORTS_API +
+        "/examStudentCount/page/" +
+        this.currentPage +
+        "/" +
+        this.pageSize;
+      this.$httpWithMsg
+        .get(url, { params: this.formSearch })
+        .then(response => {
+          this.tableData = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+
+          this.$nextTick(function() {
+            this.paginationShow = true;
+          });
+        })
+        .finally(() => (this.loading = false));
+    },
+    init() {
+      this.$httpWithMsg.get(CORE_API + "/org/getRootOrgList").then(response => {
+        this.rootOrgList = response.data;
+      });
+    }
+  },
+  //初始化查询
+  created() {
+    this.init();
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  margin-top: 10px;
+}
+.pull-length {
+  width: 300px;
+}
+.pull-center {
+  margin-top: 20px;
+}
+.editForm .el-form-item {
+  margin-bottom: 12px;
+}
+</style>