扫描记录展示

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-library-client",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "paper-library client",
   "scripts": {
     "start": "npm run e:serve",

src/mixins/setGroupTimeMixins.js

@@ -0,0 +1,32 @@
+export default {
+  data() {
+    return {
+      setTs: {}
+    };
+  },
+  methods: {
+    addSetTime(type, action, time = 1 * 1000) {
+      if (this.setTs[type]) {
+        this.setTs[type] = []
+      }
+      this.setTs[type].push(setTimeout(action, time));
+    },
+    clearSetTs(type = '') {
+      if (type) {
+        this.clearTypeSetTs(type)
+      } else {
+        Object.keys(this.setTs).forEach(type => {
+          this.clearTypeSetTs(type)
+        })
+      }
+    },
+    clearTypeSetTs(type = '') {
+      if (!type) return;
+      if (!this.setTs[type].length) return;
+
+      this.setTs[type].forEach(t => clearTimeout(t));
+      delete this.setTs[type];
+    },
+
+  }
+};

src/modules/client/components/ScanTaskProcessDialog.vue

@@ -1,70 +1,87 @@
 <template>
-  <el-dialog
-    class="scan-task-dialog"
-    :visible.sync="modalIsShow"
-    top="10vh"
-    width="550px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    :show-close="false"
-    append-to-body
-    @open="visibleChange"
-  >
-    <div class="scan-head" slot="title">
-      <h3>扫描</h3>
-      <div
-        v-if="scanStatus !== 'START'"
-        class="scan-head-btn cont-link"
-        @click="closeDialog"
-      >
-        <i class="el-icon-close"></i>
-      </div>
-    </div>
-    <el-form
-      ref="modalFormComp"
-      :model="modalForm"
-      :rules="rules"
-      label-width="100px"
+  <div>
+    <el-dialog
+      class="scan-task-dialog"
+      :visible.sync="modalIsShow"
+      fullscreen
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      append-to-body
+      @open="dialogOpen"
+      @closed="dialogClosed"
     >
-      <el-form-item label="课程名称：">
-        {{ task.courseName }}
-      </el-form-item>
-      <el-form-item prop="preScanCount" label="预扫张数：">
-        <el-input-number
-          v-model="modalForm.preScanCount"
-          :min="0"
-          :max="1000000"
-          :step="1"
-          step-strictly
-          :controls="false"
-        ></el-input-number>
-      </el-form-item>
-      <el-form-item label="实扫张数：">
-        <span class="color-danger">
-          {{ realScanCount }}
-        </span>
-        <i v-if="scanStatus === 'START'" class="el-icon-loading"></i>
-      </el-form-item>
-    </el-form>
-    <div slot="footer">
-      <el-button v-if="scanStatus === 'INIT'" type="primary" @click="startTask"
-        >开始扫描</el-button
-      >
-      <el-button
-        v-if="scanStatus === 'PAUSE'"
-        type="primary"
-        :loading="submiting"
-        @click="confirm"
-        >确认</el-button
-      >
-      <el-button
-        v-if="scanStatus === 'PAUSE'"
-        :loading="submiting"
-        @click="cancel"
-        >取消</el-button
-      >
-    </div>
-  </el-dialog>
+      <div class="scan-head" slot="title">
+        <h3>扫描</h3>
+        <div
+          v-if="scanStatus !== 'START'"
+          class="scan-head-btn cont-link"
+          @click="closeDialog"
+        >
+          <i class="el-icon-close"></i>
+        </div>
+      </div>
+      <div class="scan-image-list">
+        <div v-for="item in scanHistoryList" :key="item" class="scan-image-item" @click="toViewPaper(item)">
+          <img :src="item">
+        </div>
+      </div>
+      <div slot="footer">
+        <el-form
+          ref="modalFormComp"
+          :model="modalForm"
+          :rules="rules"
+          label-width="100px"
+        >
+          <el-form-item label="课程名称：">
+            {{ task.courseName }}
+          </el-form-item>
+          <el-form-item prop="preScanCount" label="预扫张数：">
+            <el-input-number
+              v-model="modalForm.preScanCount"
+              :min="0"
+              :max="1000000"
+              :step="1"
+              step-strictly
+              :controls="false"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="实扫张数：">
+            <span class="color-danger">
+              {{ realScanCount }}
+            </span>
+            <i v-if="scanStatus === 'START'" class="el-icon-loading"></i>
+          </el-form-item>
+        </el-form>
+        <div>
+          <el-button v-if="scanStatus === 'INIT'" type="primary" @click="startTask"
+            >开始扫描</el-button
+          >
+          <el-button
+            v-if="scanStatus === 'PAUSE'"
+            type="primary"
+            :loading="submiting"
+            @click="confirm"
+            >确认</el-button
+          >
+          <el-button
+            v-if="scanStatus === 'PAUSE'"
+            :loading="submiting"
+            @click="cancel"
+            >取消</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- image-preview -->
+    <simple-image-preview
+      :cur-image="curPaper"
+      @on-prev="toPrevPaper"
+      @on-next="toNextPaper"
+      ref="SimpleImagePreview"
+    ></simple-image-preview>
+  </div>
 </template>
 
 <script>
@@ -76,16 +93,21 @@ import {
   saveOutputImage,
   renamePreUploadJsonFile,
   clearDir,
-  decodeImageCode
+  decodeImageCode,
+  getScanHistoryFiles
 } from "../../../plugins/imageOcr";
-import setTimeMixins from "../../../mixins/setTimeMixins";
+import setGroupTimeMixins from "../../../mixins/setGroupTimeMixins";
 import db from "../../../plugins/db";
 import { evokeScanner } from "../../../plugins/scanner";
+import SimpleImagePreview from "@/components/SimpleImagePreview.vue";
 import log4js from "@/plugins/logger";
 const logger = log4js.getLogger("scan");
 
 export default {
   name: "scan-task-dialog",
+  components:{
+    SimpleImagePreview
+  },
   props: {
     task: {
       type: Object,
@@ -94,7 +116,7 @@ export default {
       }
     }
   },
-  mixins: [setTimeMixins],
+  mixins: [setGroupTimeMixins],
   data() {
     return {
       modalIsShow: false,
@@ -116,7 +138,9 @@ export default {
       },
       scaningImageList: [],
       realScanCount: 0,
-      taskScanUserId: ""
+      taskScanUserId: "",
+      scanHistoryList: [],
+      curPaper:{}
     };
   },
   computed: {
@@ -139,11 +163,14 @@ export default {
       this.scanStatus = "INIT";
       this.realScanCount = 0;
     },
-    visibleChange() {
+    dialogOpen() {
       logger.info(`00进入扫描`);
       this.taskScanUserId = this.task.scanUserId;
       this.initData();
     },
+    dialogClosed() {    
+      this.clearSetTs();
+    },
     close() {
       this.modalIsShow = false;
       this.$emit("on-close");
@@ -180,6 +207,7 @@ export default {
       this.scaningImageList = [];
       this.scanStatus = "START";
       this.getInitFile();
+      this.getScanHistory();
 
       this.evokeScanExe();
     },
@@ -263,14 +291,21 @@ export default {
     },
     // scan relate
     getInitFile() {
-      this.clearSetTs();
+      this.clearSetTs('scan');
       if (this.scanStatus !== "START") return;
 
       this.realScanCount = getPreUploadFileCount(this.GLOBAL.input);
-      this.addSetTime(() => {
+      this.addSetTime('scan',() => {
         this.getInitFile();
       }, 500);
     },
+    getScanHistory() {
+      this.clearSetTs('history');
+      this.scanHistoryList = getScanHistoryFiles(this.GLOBAL.input);
+      this.addSetTime('history',() => {
+        this.getScanHistory();
+      }, 1000);
+    },
     async saveScanImage() {
       for (let i = 0, len = this.scaningImageList.length; i < len; i++) {
         const files = this.scaningImageList[i];
@@ -316,8 +351,28 @@ export default {
     },
     clearScanList() {
       this.scaningImageList = [];
+      this.scanHistoryList = [];
       clearDir(this.GLOBAL.input);
-    }
+    },
+    // image-preview
+    toViewPaper(imgUrl) {
+      this.curPaper = { url: imgUrl };
+      this.$refs.SimpleImagePreview.open();
+    },
+    toPrevPaper() {
+      const curPaperIndex = this.scanHistoryList.findIndex(
+        item => item === this.curPaper.url
+      );
+      if (curPaperIndex <= 0) return;
+      this.curPaper = this.scanHistoryList[curPaperIndex - 1];
+    },
+    toNextPaper() {
+      const curPaperIndex = this.scanHistoryList.findIndex(
+        item => item === this.curPaper.url
+      );
+      if (curPaperIndex >= this.scanHistoryList.length - 1) return;
+      this.curPaper = this.scanHistoryList[curPaperIndex + 1];
+    },
   }
 };
 </script>

src/plugins/imageOcr.js

@@ -96,6 +96,16 @@ export function getPreUploadFileCount(dir) {
   return Math.ceil(files.length / 2);
 }
 
+export function getScanHistoryFiles(dir) {
+  const ddir = dir || getInputDir();
+  const files = fs
+    .readdirSync(ddir)
+    .filter(fileName => fileName.toLowerCase().match(/\.(jpg|png|jpeg)/))
+    .map(file => path.join(dir, file));
+
+  return files;
+}
+
 export function clearDir(dir) {
   fs.readdirSync(dir).forEach(file => {
     fs.unlinkSync(path.join(dir, file));

src/views/Layout.vue

@@ -54,7 +54,7 @@ export default {
   data() {
     return {
       isDev: process.env.NODE_ENV === "development",
-      version: "1.0.1"
+      version: "1.0.2"
     };
   },
   computed: {