巡考数据统计新增导出

src/api/invigilation.js

@@ -107,6 +107,17 @@ export function patrolReportList(datas) {
   );
 }
 
+export function exportPatrolReportList(datas) {
+  const data = pickBy(datas, paramFilter);
+  return httpApp.post(
+    "/api/admin/report/patrol/export?" + object2QueryString(data),
+    {},
+    {
+      responseType: "blob",
+    }
+  );
+}
+
 // 强制/手动交卷接口
 export function invigilateFinish(datas) {
   // type: MANUAL:手动,AUTO:自动,BREACH:违纪交卷,INTERRUPT:监考强制交卷

src/constant/datePickerOptions.js

@@ -0,0 +1,31 @@
+export default {
+  shortcuts: [
+    {
+      text: "最近一周",
+      onClick(picker) {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        picker.$emit("pick", [start, end]);
+      },
+    },
+    {
+      text: "最近一个月",
+      onClick(picker) {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        picker.$emit("pick", [start, end]);
+      },
+    },
+    {
+      text: "最近三个月",
+      onClick(picker) {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        picker.$emit("pick", [start, end]);
+      },
+    },
+  ],
+};

src/features/invigilation/OnlinePatrol/ExportSetDialog.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    width="540px"
+    title="选择时间段"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    append-to-body
+  >
+    <el-date-picker
+      v-model="createTime"
+      type="datetimerange"
+      :picker-options="pickerOptions"
+      range-separator="至"
+      start-placeholder="开始时间"
+      end-placeholder="结束时间"
+      value-format="timestamp"
+      align="right"
+      unlink-panels
+    >
+    </el-date-picker>
+
+    <div slot="footer">
+      <el-button @click="cancel" plain>取消</el-button>
+      <el-button type="primary" @click="confirm" :disabled="isSubmit"
+        >确认</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import pickerOptions from "@/constant/datePickerOptions";
+
+export default {
+  name: "ExportSetDialog",
+  data() {
+    return {
+      pickerOptions,
+      createTime: [],
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    cancel() {
+      this.dialogVisible = false;
+    },
+    open() {
+      this.dialogVisible = true;
+    },
+    confirm() {
+      if (!this.createTime || !this.createTime.length) {
+        this.$message.error("请选择时间段");
+        return;
+      }
+      this.$emit("confirm", this.createTime);
+    },
+  },
+};
+</script>

src/features/invigilation/OnlinePatrol/OnlinePatrol.vue

@@ -215,7 +215,12 @@
     </div>
 
     <div class="patrol-analysis part-box">
-      <div class="patrol-analysis-legend" v-if="statData.length">
+      <div v-if="statData.length" class="patrol-analysis-action">
+        <el-button type="text" icon="el-icon-download" @click="toExport"
+          >导出</el-button
+        >
+      </div>
+      <div v-if="statData.length" class="patrol-analysis-legend">
         <div
           class="legend-item"
           v-for="item in statInfo"
@@ -235,6 +240,9 @@
         :chart-click="barGroupClick"
       ></echart-render>
     </div>
+    <!-- 导出时间段 -->
+    <export-set-dialog ref="ExportSetDialog" @confirm="exportData">
+    </export-set-dialog>
   </div>
 </template>
 
@@ -244,6 +252,7 @@ import {
   patrolReportList,
   examBatchList,
   examActivityRoomList,
+  exportPatrolReportList,
 } from "@/api/invigilation";
 import {
   BOOLEAN_TYPE,
@@ -253,11 +262,13 @@ import {
 import EchartRender from "../common/EchartRender";
 import SummaryLine from "../common/SummaryLine";
 import RightOrWrong from "../common/RightOrWrong";
+import ExportSetDialog from "./ExportSetDialog.vue";
 import { mapState, mapMutations, mapActions } from "vuex";
+import { downloadBlob } from "@/utils/utils";
 
 export default {
   name: "OnlinePatrol",
-  components: { EchartRender, SummaryLine, RightOrWrong },
+  components: { EchartRender, SummaryLine, RightOrWrong, ExportSetDialog },
   data() {
     return {
       filter: {
@@ -424,6 +435,25 @@ export default {
         },
       });
     },
+    toExport() {
+      this.$refs.ExportSetDialog.open();
+    },
+    async exportData(times) {
+      console.log(times);
+      const res = await downloadBlob(() => {
+        return exportPatrolReportList({
+          ...this.filter,
+          startTime: times[0],
+          endTime: times[1],
+        });
+      }).catch(() => {});
+
+      if (res) {
+        this.$message.success("导出成功！");
+      } else {
+        this.$message.error("导出失败，请重新尝试！");
+      }
+    },
   },
   beforeRouteEnter(to, from, next) {
     if (from.name === "PatrolExamDetail") {
@@ -501,4 +531,10 @@ export default {
     }
   }
 }
+.patrol-analysis-action {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 99;
+}
 </style>