ops-web/src/modules/admin/ocr/OcrTest.vue

<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()"
    :title="'OCR测试 - ' + curRow.name"
  >
    <div class="body">
      <div class="left" v-loading="loading" ref="dragOuter">
        <div
          class="drag-wrap"
          ref="wrapper"
          v-if="imageUrl"
          @wheel.prevent="scaleHandle($event)"
        >
          <el-upload
            class="reset"
            ref="uploadButton"
            action=""
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            accept="image/*"
            :auto-upload="false"
            :multiple="false"
            :on-change="onChange"
            :http-request="customSubmit"
          >
            <el-button type="primary" size="mini">重新上传</el-button>
          </el-upload>
          <div class="box" ref="centerBox" @mousedown="dragstart($event)">
            <img
              :src="imageUrl"
              class="avatar"
              @load="initImgSize"
              :style="{
                maxWidth: maxWidth + 'px',
                maxHeight: maxHeight + 'px',
              }"
            />
          </div>
        </div>

        <el-upload
          v-else
          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 class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="right">
        <div>
          <el-select v-model="type" :disabled="loading">
            <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 || loading"
            @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: "",
      loading: false,
      key: "",
      timer: null,
      index: 0,

      scale: 1,
      scaleNum: 0.25, // 缩放比例
      scaleMax: 10, // 最大缩放比例
      scaleMin: 0.1, // 最小缩放比例
      dragData: {
        x: 0, // 拖拽初始化时的x坐标
        y: 0, // 拖拽初始化时的y坐标
        left: 0, // 拖拽结束时的x偏移量
        top: 0, // 拖拽结束时的y偏移量
      },
      maxWidth: 0,
      maxHeight: 0,
    };
  },
  computed: {
    title() {
      return `应用nginx配置-${this.app.name}`;
    },
  },
  mounted() {},
  methods: {
    initImgSize() {
      this.maxWidth = this.$refs.dragOuter.offsetWidth - 40;
      this.maxHeight = this.$refs.dragOuter.offsetHeight - 40;
    },
    scaleDom() {
      this.$refs.centerBox.style.transform = `translate(-50%, -50%) scale(${this.scale})`;
    },
    scaleHandle(e) {
      let dy = -e.deltaY || e.wheelDeltaY;
      if (dy < 0) {
        this.scale -= this.scaleNum;
      } else {
        this.scale += this.scaleNum;
      }
      if (this.scale >= this.scaleMax) {
        this.scale = this.scaleMax;
        return;
      }
      if (this.scale <= this.scaleMin) {
        this.scale = this.scaleMin;
        return;
      }
      this.$refs.centerBox.style.transition = "none";
      this.scaleDom();
      return false;
    },
    dragstart(e) {
      this.$refs.centerBox.style.transition = "none";
      e.preventDefault();
      this.dragData.x = e.pageX - this.$refs.centerBox.offsetLeft;
      this.dragData.y = e.pageY - this.$refs.centerBox.offsetTop;

      // 给 document 添加鼠标移动事件
      document.addEventListener("mousemove", move);
      const _this = this;
      function move(event) {
        // 计算元素的位置
        _this.dragData.left = event.pageX - _this.dragData.x;
        _this.dragData.top = event.pageY - _this.dragData.y;
        // 边界判断可以在这里添加 ↓

        // 设置元素的位置
        _this.$refs.centerBox.style.left = _this.dragData.left + "px";
        _this.$refs.centerBox.style.top = _this.dragData.top + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      document.addEventListener("mouseup", function () {
        document.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      document.addEventListener("mouseout", function () {
        document.removeEventListener("mousemove", move);
      });
    },
    async visibleChange(visible) {
      this.file = null;
      this.imageUrl = "";
      this.type = "GENERAL";
      this.resultText = "";
      this.clear();
      this.key = "";
    },
    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();
      this.resultText = "";
      this.key = Math.random() + "";
      this.loading = true;
      orgTestApi({
        id: this.curRow.id,
        type: this.type,
        image: this.file,
      })
        .then((res) => {
          if (res && res.text) {
            let initText = (res.text || "").replaceAll(/\n/g, "<br />");
            this.writing(initText, this.key);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    customSubmit(option) {
      this.resultText = "";
      this.key = Math.random() + "";
      this.loading = true;
      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(initText, this.key);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onChange(file, fileList) {
      this.imageUrl = "";
      console.log("file", file);
      this.file = file.raw;
      this.$nextTick(() => {
        this.imageUrl = URL.createObjectURL(file.raw);
      });
    },
    clear() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    writing(data, key) {
      // if (index < data.length && !this.reset) {
      //   this.resultText = this.resultText + data.slice(index, index + 10);
      //   setTimeout(() => {
      //     this.writing(index + 10, data);
      //   }, 20);
      // }
      this.clear();
      this.index = 0;
      this.timer = setInterval(() => {
        if (key !== this.key) {
          this.clear();
          return;
        }
        this.resultText =
          this.resultText + data.slice(this.index, this.index + 20);
        this.index = this.index + 20;
      }, 50);
    },
  },
  beforeDestroy() {
    this.clear();
    this.key = "";
  },
};
</script>
<style lang="scss">
.ocr-test-dialog {
  .el-dialog__title {
    font-size: 16px;
  }
  .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;
          font-size: 16px;
          line-height: 1.5;
        }
      }
      .left {
        padding: 20px;

        .drag-wrap {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          &:hover {
            .reset {
              // display: block;
              opacity: 1;
            }
          }
          .reset {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 10000;
            // display: none;
            transition: all 0.3s;
            opacity: 0;
          }
          .box {
            user-select: none; /* 不可选中,为了拖拽时不让文字高亮 */
            position: absolute;
            cursor: move;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            & > img {
              // max-width: none;
              // max-height: none;
            }
          }
        }

        .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%;
            user-select: none;
            width: 100%;
            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>