feat: 临时小需求

.eslintrc.js

@@ -16,10 +16,11 @@ module.exports = {
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
     "vue/multi-word-component-names": "off",
     "vue/no-mutating-props": "off",
-    "no-unused-vars": [
-      "error",
-      { vars: "all", args: "none", ignoreRestSiblings: false },
-    ],
+    // "no-unused-vars": [
+    //   "error",
+    //   { vars: "all", args: "none", ignoreRestSiblings: false },
+    // ],
+    "no-unused-vars": "off",
     "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],
     "vue/no-use-v-if-with-v-for": [
       "error",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^0.19.2",
     "core-js": "^3.8.3",
     "crypto-js": "^4.0.0",

src/main.js

@@ -14,6 +14,7 @@ import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import "./assets/styles/index.scss";
 import JsonViewr from "vue-json-viewer";
+import "animate.css";
 Vue.use(JsonViewr);
 
 Vue.use(ElementUI, { size: "small" });

src/modules/admin/api.js

@@ -285,6 +285,14 @@ export const ocrSupplierDetail = (params) => {
   return $postParam("/api/admin/ocr/supplier/detail", params);
 };
 
+export const orgTestApi = (datas) => {
+  let formData = new FormData();
+  Object.entries(datas).forEach(([key, val]) => {
+    formData.append(key, datas[key]);
+  });
+  return $post("/api/admin/ocr/supplier/test", formData);
+};
+
 export const modelSupplierListQuery = () => {
   return $postParam("/api/admin/llm/supplier/list");
 };

src/modules/admin/ocr/ModifyOcr.vue

@@ -60,6 +60,15 @@
           clearable
         ></el-input>
       </el-form-item>
+      <el-form-item prop="enable" label="状态：">
+        <el-switch
+          v-model="modalForm.enable"
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+          :active-text="modalForm.enable ? '启用' : '禁用'"
+        >
+        </el-switch>
+      </el-form-item>
     </el-form>
     <div slot="footer">
       <el-button type="danger" @click="cancel" plain>取消</el-button>
@@ -81,6 +90,7 @@ const initModalForm = {
   secret: "",
   clientClass: "",
   qps: "",
+  enable: "",
 };
 
 export default {

src/modules/admin/ocr/OcrManage.vue

@@ -20,6 +20,12 @@
         <el-table-column prop="id" label="ID"></el-table-column>
         <el-table-column prop="name" label="名称"> </el-table-column>
         <el-table-column prop="qps" label="QPS限流"> </el-table-column>
+        <el-table-column prop="enable" label="状态">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.enable" type="success">启用</el-tag>
+            <el-tag v-else type="danger">禁用</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column prop="createTime" label="创建时间">
           <span slot-scope="scope">{{
             scope.row.createTime | timestampFilter
@@ -45,6 +51,12 @@
               @click="toEdit(scope.row)"
               >编辑</el-button
             >
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toTest(scope.row)"
+              >测试</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -55,16 +67,17 @@
       @modified="getList"
       :readonly="dialogReadonly"
     ></modify-ocr>
+    <OcrTest ref="OcrTest" :curRow="curRow"></OcrTest>
   </div>
 </template>
 
 <script>
 import { ocrListQuery } from "../api";
 import ModifyOcr from "./ModifyOcr.vue";
+import OcrTest from "./OcrTest.vue";
 export default {
   name: "org-manage",
-  components: { ModifyOcr },
-
+  components: { ModifyOcr, OcrTest },
   data() {
     return {
       dataList: [],
@@ -99,6 +112,10 @@ export default {
       this.curRow = row;
       this.$refs.ModifyOcr.open();
     },
+    toTest(row) {
+      this.curRow = row;
+      this.$refs.OcrTest.open();
+    },
   },
 };
 </script>

src/modules/admin/ocr/OcrTest.vue

@@ -0,0 +1,211 @@
+<template>
+  <el-dialog
+    class="page-dialog"
+    custom-class="ocr-test-dialog"
+    :visible.sync="modalIsShow"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    fullscreen
+    @closed="visibleChange()"
+  >
+    <div slot="title">OCR测试</div>
+    <div class="body">
+      <div class="left">
+        <el-upload
+          ref="upload"
+          action=""
+          class="avatar-uploader"
+          :show-file-list="false"
+          :on-success="handleSuccess"
+          :before-upload="beforeUpload"
+          accept="image/*"
+          :auto-upload="false"
+          :multiple="false"
+          :on-change="onChange"
+          :http-request="customSubmit"
+          drag
+        >
+          <img
+            v-if="imageUrl"
+            :src="imageUrl"
+            class="avatar animate__animated animate__backInLeft"
+          />
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </div>
+      <div class="right">
+        <div>
+          <el-select v-model="type">
+            <el-option value="GENERAL" label="通用"></el-option>
+            <el-option value="HANDWRITING" label="手写"></el-option>
+          </el-select>
+          <el-button
+            type="primary"
+            style="margin-left: 10px"
+            :disabled="!file"
+            @click="submit"
+            >开始识别</el-button
+          >
+        </div>
+        <div style="height: calc(100% - 32px)">
+          <el-link
+            :underline="false"
+            type="success"
+            style="margin-top: 20px; margin-bottom: 5px"
+            >识别结果：</el-link
+          >
+          <div v-html="resultText" class="result-text"></div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { orgTestApi } from "../api";
+export default {
+  name: "ocr-test",
+  props: {
+    curRow: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      file: null,
+      imageUrl: "",
+      type: "GENERAL",
+      resultText: "",
+    };
+  },
+  computed: {
+    title() {
+      return `应用nginx配置-${this.app.name}`;
+    },
+  },
+  methods: {
+    async visibleChange(visible) {
+      this.file = null;
+      this.imageUrl = "";
+      this.type = "GENERAL";
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    handleSuccess(res, file) {
+      console.log("handleSuccess", file);
+    },
+    beforeUpload(file) {
+      const isLt20M = file.size / 1024 / 1024 < 20;
+      if (!isLt20M) {
+        this.$message.error("上传头像图片大小不能超过 20MB!");
+      }
+      return isLt20M;
+    },
+    submit() {
+      this.$refs.upload.submit();
+    },
+    customSubmit(option) {
+      this.resultText = "";
+      orgTestApi({
+        id: this.curRow.id,
+        type: this.type,
+        image: option.file,
+      }).then((res) => {
+        if (res && res.text) {
+          let initText = (res.text || "").replaceAll(/\n/g, "<br />");
+          this.writing(0, initText);
+        }
+      });
+    },
+    onChange(file, fileList) {
+      this.imageUrl = "";
+      console.log("file", file);
+      this.file = file.raw;
+      this.$nextTick(() => {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      });
+    },
+    writing(index, data) {
+      if (index < data.length) {
+        this.resultText = this.resultText + data[index];
+        setTimeout(() => {
+          this.writing(++index, data);
+        }, 20);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.ocr-test-dialog {
+  .el-dialog__body {
+    height: calc(100vh - 2px);
+    .body {
+      height: 100%;
+      display: flex;
+      .left,
+      .right {
+        width: calc(50% - 10px);
+        background-color: #fff;
+        border-radius: 8px;
+      }
+      .right {
+        margin-left: 20px;
+        padding: 20px;
+        .result-text {
+          height: calc(100% - 44px);
+          overflow: auto;
+        }
+      }
+      .left {
+        padding: 20px;
+        .avatar-uploader {
+          width: 100%;
+          height: 100%;
+        }
+        .avatar-uploader .el-upload {
+          // border: 1px dashed #d9d9d9;
+          border-radius: 6px;
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          height: 100%;
+
+          .el-upload-dragger {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          & .avatar {
+            max-width: 100%;
+            max-height: 100%;
+            display: block;
+          }
+        }
+        .avatar-uploader .el-upload:hover {
+          border-color: #409eff;
+        }
+        .avatar-uploader-icon {
+          font-size: 50px;
+          color: #8c939d;
+          width: 178px;
+          height: 178px;
+          line-height: 178px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>
+<style scoped lang="scss"></style>