paper-library-client/src/modules/client/views/Scan.vue

<template>
  <div class="task-manage">
    <div class="part-box part-box-filter">
      <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
        <el-form-item>
          <h3 class="filter-title">选择考试</h3>
        </el-form-item>
        <el-form-item>
          <sec-select
            v-model="filter"
            default-select-course
            @course-default="search"
          ></sec-select>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-button type="primary" :disabled="!searchEnable" @click="search"
            >查询</el-button
          >
          <el-button type="success" @click="toSetOrcArea"
            >设置条码识别区</el-button
          >
          <el-button type="success" :disabled="setDisabled" @click="toSetScan"
            >设置扫描仪</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-row class="task-parts" :gutter="16" type="flex">
      <el-col :span="16">
        <div class="part-box part-box-pad">
          <div class="task-part-head">
            <h3>试卷扫描</h3>
          </div>
          <div class="task-part-body box-justify">
            <div class="task-chart">
              <el-progress
                type="circle"
                :percentage="percentage"
                :width="140"
                :stroke-width="20"
                color="#165dff"
              ></el-progress>
            </div>
            <div class="task-infos">
              <div class="task-info-item">
                <div class="task-info-title">
                  <i class="icon icon-person-grid"></i>
                  <span>考生总数</span>
                </div>
                <div class="task-info-cont">
                  {{ task.studentCount || "0" }}
                </div>
              </div>
              <div class="task-info-item">
                <div class="task-info-title">
                  <i class="icon icon-right-grid"></i>
                  <span>已扫人数<span class="mlr-1">/</span>张数</span>
                </div>
                <div class="task-info-cont">
                  <span>{{ task.scanStudentCount || "0" }}</span>
                  <span class="mlr-1">/</span>
                  <span>{{ task.scanCount || "0" }}</span>
                </div>
              </div>
              <div class="task-info-item">
                <div class="task-info-title">
                  <i class="icon icon-close-grid"></i>
                  <span>未扫人数</span>
                </div>
                <div class="task-info-cont">{{ unScanStudentCount }}</div>
              </div>
            </div>
          </div>
          <div class="task-part-foot box-justify">
            <div class="tips-info tips-error">待上传：{{ unuploadNo }}</div>
            <div class="task-btn" @click="toScan(true)">
              <span>开始扫描</span>
              <i class="icon icon-narrow-right"></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="part-box part-box-pad">
          <div class="task-part-head">
            <h3>其他文件扫描</h3>
          </div>
          <div class="task-part-body"></div>
          <div class="task-part-foot box-justify">
            <div></div>
            <div class="task-btn" @click="toScan(false)">
              <span>开始扫描</span>
              <i class="icon icon-narrow-right"></i>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- OcrAreaSetDialog -->
    <ocr-area-set-dialog ref="OcrAreaSetDialog" @modified="getOcrArea">
    </ocr-area-set-dialog>
  </div>
</template>

<script>
import db from "../../../plugins/db";
import { taskInfos } from "../api";
import SecSelect from "@/components/SecSelect.vue";
import OcrAreaSetDialog from "../components/OcrAreaSetDialog.vue";
import { setScanner } from "../../../plugins/scanner";

export default {
  name: "scan",
  components: { OcrAreaSetDialog, SecSelect },
  data() {
    return {
      filter: {
        semesterId: "",
        examId: "",
        courseCode: "",
      },
      searchFilter: {},
      task: {},
      ocrArea: null,
      setDisabled: false,
    };
  },
  computed: {
    unScanStudentCount() {
      return (this.task.studentCount || 0) - (this.task.scanStudentCount || 0);
    },
    searchEnable() {
      return (
        this.filter.semesterId && this.filter.examId && this.filter.courseCode
      );
    },
    percentage() {
      const studentCount = this.task.studentCount || 0;
      const scanStudentCount = this.task.scanStudentCount || 0;
      if (!studentCount) return 0;
      return ((scanStudentCount * 100) / studentCount).toFixed(2) * 1;
    },
    unuploadNo() {
      return this.$store.state.client.unuploadNo;
    },
  },
  activated() {
    if (this.task.examId) {
      this.search();
    }
  },
  mounted() {
    this.$store.commit("setBreadcrumbs", [{ url: "Scan", name: "扫描" }]);
    this.getOcrArea();
  },
  methods: {
    async search() {
      this.task = {};
      const res = await taskInfos(this.filter);
      this.task = { ...res, semesterId: this.filter.semesterId };
      this.searchFilter = { ...this.filter };
    },
    async getOcrArea() {
      const ocrArea = await db.getDict("ocrArea", "").catch(() => {});
      this.ocrArea = ocrArea || null;
      this.$store.commit(
        "client/setOcrArea",
        ocrArea ? JSON.parse(ocrArea) : {}
      );
    },
    toScan(isFormal) {
      if (!this.searchEnable) {
        this.$message.error("请选择课程！");
        return;
      }

      if (!this.task.id) {
        this.$message.error("请先查询任务！");
        return;
      }

      if (isFormal && !this.ocrArea) {
        this.$message.error("请先设置条形码识别区！");
        return;
      }

      const scanName = isFormal ? "ScanPaper" : "ScanOther";
      this.$ls.set("task", this.task);
      this.$router.push({ name: scanName });
    },
    toSetOrcArea() {
      this.$refs.OcrAreaSetDialog.open();
    },
    async toSetScan() {
      if (this.setDisabled) return;
      this.setDisabled = true;
      await setScanner().catch((error) => {
        console.dir(error);
        this.$message.error("连接扫描仪异常");
      });

      setTimeout(() => {
        this.setDisabled = false;
      }, 5000);
    },
  },
};
</script>