|
|
@@ -0,0 +1,458 @@
|
|
|
+<template>
|
|
|
+ <!-- <el-dialog v-model="isOpen" title="文字识别" width="55%"> -->
|
|
|
+ <div class="container">
|
|
|
+ <div v-if="thisStep === 'start'" class="up_box">
|
|
|
+ <div class="left_box">
|
|
|
+ <div class="upimg_box boder_box">
|
|
|
+ <el-upload
|
|
|
+ v-if="!showImg"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :drag="true"
|
|
|
+ :action="actionUrl"
|
|
|
+ :headers="headersObj"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeUp"
|
|
|
+ >
|
|
|
+ <img src="@/assets/images/Frame427319159.png" class="avatar" />
|
|
|
+ <span>将文件拖入框内/点击按钮上传文件</span>
|
|
|
+ </el-upload>
|
|
|
+ <div v-else class="img_show">
|
|
|
+ <img :src="toRaw(showImg)" class="avatar" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sunmit_btn">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="actionUrl"
|
|
|
+ :headers="headersObj"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeUp"
|
|
|
+ >
|
|
|
+ <span>选择本地文件</span>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right_box">
|
|
|
+ <div class="upimg_box boder_box">
|
|
|
+ <el-upload
|
|
|
+ disabled
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="actionUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ >
|
|
|
+ <img src="@/assets/images/FrameYun.png" class="avatar" />
|
|
|
+ <span>点击按钮上传文件</span>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div class="sunmit_btn" @click="addlibraryImg">添加文库文件</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="thisStep === 'loading'" class="load-box">
|
|
|
+ <div class="light_box">
|
|
|
+ <img :src="toRaw(showImg)" class="avatar" />
|
|
|
+ <div class="light"></div>
|
|
|
+ </div>
|
|
|
+ <div class="text_box">
|
|
|
+ <span>请耐心等待扫描完成</span>
|
|
|
+ <Loading :small="true"></Loading>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="thisStep === 'end'" class="end_box">
|
|
|
+ <div class="left_box">
|
|
|
+ <div class="boder_box">
|
|
|
+ <div class="title">原始图片</div>
|
|
|
+ <div class="upimg_box">
|
|
|
+ <div class="img_show">
|
|
|
+ <img :src="toRaw(showImg)" class="avatar" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sunmit_btn">
|
|
|
+ <!-- <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="http://192.168.1.28:8080/api/upload"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeUp"
|
|
|
+ > -->
|
|
|
+ <span @click="reClick">重新选择</span>
|
|
|
+ <!-- </el-upload> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right_box">
|
|
|
+ <div class="boder_box">
|
|
|
+ <div class="title">识别结果</div>
|
|
|
+ <div class="upimg_box">
|
|
|
+ <el-scrollbar>
|
|
|
+ <div class="text_box">
|
|
|
+ {{ textData }}
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sunmit_btn copy-qb" @click="copyQbUrl()">复制结果</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- </el-dialog> -->
|
|
|
+ <PicTree
|
|
|
+ :openFile="openFile"
|
|
|
+ @close="openFile = false"
|
|
|
+ :fileUserTreeData="treeData"
|
|
|
+ @fileChangeMsg="fileChangeMsg"
|
|
|
+ ></PicTree>
|
|
|
+ <div
|
|
|
+ v-loading.fullscreen="loadingPreview"
|
|
|
+ v-if="loadingPreview"
|
|
|
+ class="lodingBox"
|
|
|
+ ></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script setup>
|
|
|
+import { onMounted, ref, toRaw, watch, inject } from "vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import Clipboard from "clipboard";
|
|
|
+import Loading from "@/components/Loading/Loading.vue";
|
|
|
+import PicTree from "@/components/PicTree/PicTree.vue"; //选择文件发送的列表
|
|
|
+import { picTree } from "@/api/search/search.js";
|
|
|
+import { ocrRemark, preview } from "@/api/common/common.js";
|
|
|
+import Cookies from "js-cookie";
|
|
|
+const textData = ref(""); //解析出来的文字
|
|
|
+const showImg = ref(); //上传的图片
|
|
|
+const isOpen = ref(props.openFile);
|
|
|
+const thisStep = ref("start"); //解析进度 start,loading,end,
|
|
|
+const openFile = ref(false); //控制tree显示
|
|
|
+const treeData = ref(); //树节点数据
|
|
|
+const actionUrl = ref(
|
|
|
+ `${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/api/upload`
|
|
|
+);
|
|
|
+const headersObj = ref({
|
|
|
+ Authorization:Cookies.get("Admin-Token")
|
|
|
+})
|
|
|
+// const actionUrl = ref(`${window.location.origin}/upload`);
|
|
|
+const loadingPreview = ref(false);
|
|
|
+const addFolderAdd = inject("addFolderAdd");
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ openFile: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+});
|
|
|
+watch(
|
|
|
+ () => props.openFile,
|
|
|
+ (newValue) => {
|
|
|
+ // console.log(111);
|
|
|
+ isOpen.value = newValue;
|
|
|
+ }
|
|
|
+);
|
|
|
+onMounted(async () => {
|
|
|
+
|
|
|
+});
|
|
|
+const handleAvatarSuccess = (msg, file) => {
|
|
|
+ // console.log("re", msg);
|
|
|
+ const flieData = toRaw(file);
|
|
|
+ // console.log("file", flieData);
|
|
|
+ // showImg.value = URL.createObjectURL(flieData.raw);
|
|
|
+ if (msg.code === 200) {
|
|
|
+ textData.value = msg.msg;
|
|
|
+ thisStep.value = "end";
|
|
|
+ } else {
|
|
|
+ thisStep.value = "start";
|
|
|
+ textData.value = null;
|
|
|
+ showImg.value = null;
|
|
|
+ ElMessage({ message: "识别失败", type: "error" });
|
|
|
+ }
|
|
|
+ console.log("textData", textData.value);
|
|
|
+};
|
|
|
+//文件上传前的钩子
|
|
|
+const beforeUp = (raw) => {
|
|
|
+ // console.log('raw',raw);
|
|
|
+ showImg.value = URL.createObjectURL(raw);
|
|
|
+ thisStep.value = "loading";
|
|
|
+};
|
|
|
+// 复制功能调用的方法
|
|
|
+const copyQbUrl = () => {
|
|
|
+ let clipboard = new Clipboard(".copy-qb", {
|
|
|
+ text: () => {
|
|
|
+ return textData.value;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ clipboard.on("success", () => {
|
|
|
+ // console.log('success');
|
|
|
+ ElMessage({ message: "复制成功", type: "success" });
|
|
|
+ clipboard.destroy();
|
|
|
+ });
|
|
|
+ clipboard.on("error", () => {
|
|
|
+ // console.log('err');
|
|
|
+ clipboard.destroy();
|
|
|
+ });
|
|
|
+};
|
|
|
+// 选取文库图片
|
|
|
+const addlibraryImg = async () => {
|
|
|
+ const res = await picTree();
|
|
|
+ console.log("res", res);
|
|
|
+ treeData.value = res;
|
|
|
+ openFile.value = true;
|
|
|
+};
|
|
|
+//确定选中图片
|
|
|
+const fileChangeMsg = async (val) => {
|
|
|
+ console.log("val", toRaw(val));
|
|
|
+ const data = toRaw(val);
|
|
|
+ const imgRes = await preview(data.id);
|
|
|
+ thisStep.value = "loading";
|
|
|
+ showImg.value = URL.createObjectURL(imgRes);
|
|
|
+ const res = await ocrRemark(data.remark);
|
|
|
+ thisStep.value = "end";
|
|
|
+ textData.value = res.msg;
|
|
|
+ // console.log("res", res);
|
|
|
+ // console.log("imgRes", imgRes);
|
|
|
+};
|
|
|
+const reClick = () => {
|
|
|
+ thisStep.value = "start";
|
|
|
+ textData.value = null;
|
|
|
+ showImg.value = null;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+ <style lang="scss" scoped>
|
|
|
+.lodingBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vh;
|
|
|
+ height: 100vh;
|
|
|
+ z-index: 10000000;
|
|
|
+}
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ height: 87vh;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .up_box {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .left_box {
|
|
|
+ width: 45%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 48px;
|
|
|
+ .boder_box {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #c1cce3;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ background: #ebeff6;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .img_show {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ // opacity: 0;
|
|
|
+ // object-fit:cover; // 保持原比例缩小
|
|
|
+ object-fit: contain; // 保持原比例缩小
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .upimg_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .sunmit_btn {
|
|
|
+ margin-top: 24px;
|
|
|
+ width: 120px;
|
|
|
+ height: 32px;
|
|
|
+ background: #2e6bc8;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right_box {
|
|
|
+ width: 45%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .boder_box {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #c1cce3;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ background: #ebeff6;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .upimg_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ // border: 1px solid #c1cce3;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .sunmit_btn {
|
|
|
+ margin-top: 24px;
|
|
|
+ width: 120px;
|
|
|
+ height: 32px;
|
|
|
+ background: #2e6bc8;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .text_box {
|
|
|
+ padding: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .load-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .text_box {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #06286c;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .light_box {
|
|
|
+ width: 500px;
|
|
|
+ height: 500px;
|
|
|
+ background-image: url("@/assets/images/light_boder.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 15px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain; // 保持原比例缩小
|
|
|
+ }
|
|
|
+ .light {
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ height: 1px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 15px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 255, 255, 0.7);
|
|
|
+ box-shadow: 0px 2px 10px 5px rgba(0, 255, 255, 0.3);
|
|
|
+ animation: move 2s infinite linear;
|
|
|
+ }
|
|
|
+ @keyframes move {
|
|
|
+ from {
|
|
|
+ top: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*网格移动到显示区域的外面*/
|
|
|
+ to {
|
|
|
+ top: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .end_box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.el-dialog__header) {
|
|
|
+ background-color: #eceff7;
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+}
|
|
|
+::v-deep .avatar-uploader .el-upload {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ img {
|
|
|
+ width: 220;
|
|
|
+ height: 220px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #06286c;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .sunmit_btn .avatar-uploader .el-upload {
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .avatar-uploader .el-upload .el-upload-dragger {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|