md

src/modules/manage/views/ImageCheck.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="image-check part-box">
+    <div class="part-head">
+      <h2>图片检查</h2>
+    </div>
+    <div class="export-filter">
+      <Form ref="scoreForm" :label-width="140">
+        <FormItem prop="inputFile" label="导入文件：">
+          <Input
+            v-model="inputFile"
+            readonly
+            placeholder="请选择导入文件"
+            style="width: 500px; margin-right: 15px"
+          ></Input>
+          <Button
+            class="export-paper-btn"
+            type="primary"
+            :disabled="taskRunning"
+            @click="seleteInputpath"
+            >选择</Button
+          >
+        </FormItem>
+        <FormItem label="任务执行进度：">
+          <Progress :percent="progress" />
+        </FormItem>
+
+        <FormItem>
+          <Button
+            class="export-paper-btn"
+            type="primary"
+            :loading="taskRunning"
+            @click="confirm"
+            >开始</Button
+          >
+        </FormItem>
+      </Form>
+    </div>
+
+    <scan-area-dialog
+      :cur-image="curImage"
+      :cur-collect-config="curCollectConfig"
+      @confirm="configChange"
+      ref="ScanAreaDialog"
+    ></scan-area-dialog>
+  </div>
+</template>
+
+<script>
+const remote = require("electron").remote;
+const fs = require("fs");
+const path = require("path");
+const nodeXlsx = require("node-xlsx");
+import ScanAreaDialog from "../../client/components/ScanAreaDialog.vue";
+import { decodeImageCode } from "../../../plugins/imageOcr";
+
+function getValidSaveFilePath(filepath) {
+  let dirname = path.dirname(filepath);
+  let extname = path.extname(filepath);
+  let basename = path.basename(filepath, extname);
+  let index = 0;
+  let validFilepath = path.join(dirname, `${basename}-识别结果${extname}`);
+
+  while (fs.existsSync(validFilepath)) {
+    validFilepath = path.join(
+      dirname,
+      `${basename}-识别结果(${++index})${extname}`
+    );
+  }
+
+  return validFilepath;
+}
+
+export default {
+  name: "image-check",
+  components: { ScanAreaDialog },
+  data() {
+    return {
+      inputFile: "",
+      taskRunning: false,
+      tasks: [],
+      curImage: {},
+      curCollectConfig: {},
+      finishedTaskCount: 0
+    };
+  },
+  computed: {
+    progress() {
+      const taskTotalCount = this.tasks.length;
+      return taskTotalCount
+        ? Math.floor((this.finishedTaskCount * 100) / taskTotalCount)
+        : 0;
+    }
+  },
+  methods: {
+    seleteInputpath() {
+      remote.dialog.showOpenDialog(
+        {
+          title: "选择文件",
+          filters: [{ name: "excel", extensions: ["xls", "xlsx"] }],
+          properties: ["openFile"]
+        },
+        folderPaths => {
+          if (folderPaths && folderPaths[0]) {
+            this.inputFile = folderPaths[0];
+          }
+        }
+      );
+    },
+    confirm() {
+      if (!fs.existsSync(this.inputFile)) {
+        this.$Message.error("导入文件不存在！");
+        return;
+      }
+
+      const data = nodeXlsx.parse(this.inputFile);
+      const validColumns = data[0].data
+        .slice(1)
+        .filter(item => item.some(elem => elem));
+
+      if (!validColumns.length) {
+        this.$Message.error("没有可操作数据，请重新选择导入文件！");
+        return;
+      }
+
+      this.tasks = validColumns.map(item => {
+        return {
+          url: item[0],
+          oldval: item[1],
+          newVal: ""
+        };
+      });
+      this.curImage = this.tasks[0];
+      this.$refs.ScanAreaDialog.open();
+    },
+    async configChange(setting) {
+      this.curCollectConfig = setting;
+      this.taskRunning = true;
+      try {
+        await this.runTask();
+      } catch (error) {
+        this.taskRunning = false;
+        this.$Notice.error({
+          title: "错误提示",
+          desc: "任务执行失败，请重新尝试！",
+          duration: 5
+        });
+      }
+    },
+    async runTask() {
+      this.finishedTaskCount = 0;
+      const { codeArea } = this.curCollectConfig;
+
+      for (let i = 0, len = this.tasks.length; i < len; i++) {
+        const task = this.tasks[i];
+        const newVal = await decodeImageCode(this.task.url, codeArea).catch(
+          error => {
+            const content = `图像：${this.task.url}，解析错误，错误信息：${error}`;
+            this.$Notice.error({
+              title: "错误提示",
+              desc: content,
+              duration: 5
+            });
+          }
+        );
+        this.finishedTaskCount = i + 1;
+        if (newVal) {
+          task.newVal = newVal;
+        }
+      }
+
+      // 构建结果文件
+      const outputFilepath = getValidSaveFilePath(this.inputFile);
+      const headerName = ["文件地址", "条码信息", "新识别结果", "是否一致"];
+      const dataBody = this.tasks.map(item => {
+        return [
+          item.url,
+          item.oldval,
+          item.newVal,
+          item.oldval === item.newVal ? "是" : "否"
+        ];
+      });
+      const datas = [
+        {
+          name: "检查结果",
+          data: [headerName, ...dataBody]
+        }
+      ];
+      fs.writeFileSync(outputFilepath, nodeXlsx.build(datas));
+      this.$Notice.success({
+        title: "检查成功",
+        desc: `结果文件：${outputFilepath}`,
+        duration: 5
+      });
+    }
+  }
+};
+</script>

src/router.js

@@ -4,6 +4,8 @@ import Router from "vue-router";
 import Home from "./views/Home";
 import Layout from "./views/Layout";
 import Login from "./views/Login";
+import ImageCheck from "./modules/manage/views/ImageCheck";
+
 // modules
 import client from "./modules/client/router";
 import manage from "./modules/manage/router";
@@ -22,7 +24,12 @@ export default new Router({
     {
       path: "/",
       name: "Index",
-      redirect: { name: "Login" }
+      redirect: { name: "ImageCheck" }
+    },
+    {
+      path: "/image-check",
+      name: "ImageCheck",
+      component: ImageCheck
     },
     {
       path: "/login",