文字识别解决冲突

src/components/IdentifyFont/IdentifyFont.vue

@@ -1,27 +1,5 @@
 <template>
-<<<<<<< HEAD
   <!-- TODO 从我的文件过来默认进入第二形态loading,传参实现 -->
-    <!-- <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">
-            <!-- TODO 拖拽设置不生效问题 ,但是测试那里可以实现拖拽，离大谱-->
-            <el-upload
-              v-if="!showImg"
-              class="avatar-uploader"
-              :drag="true"
-              action="http://192.168.1.28:8080/api/upload"
-              :show-file-list="false"
-              :on-success="handleAvatarSuccess"
-              :before-upload="beforeUp"
-            >
-              <img src="@/assets/images/add.png" class="avatar" />
-              <span>将图片拖入框内/点击按钮上传图片</span>
-            </el-upload>
-            <div v-else class="img_show">
-              <img :src="toRaw(showImg)" class="avatar" />
-=======
   <!-- <el-dialog v-model="isOpen" title="文字识别" width="55%"> -->
   <div class="container">
     <div v-if="thisStep === 'start'" class="up_box">
@@ -87,12 +65,12 @@
         </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"
-              > -->
+                  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>
@@ -102,166 +80,12 @@
           <el-scrollbar>
             <div class="text_box">
               {{ textData }}
->>>>>>> liuqiang
-            </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>选择本地图片</span>
-            </el-upload>
-          </div>
-        </div>
-        <div class="right_box">
-          <div class="upimg_box">
-            <el-upload
-              disabled
-              class="avatar-uploader"
-              action="http://192.168.1.28:8080/api/upload"
-              :show-file-list="false"
-              :on-success="handleAvatarSuccess"
-            >
-              <img src="@/assets/images/add.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>
-      <div v-if="thisStep === 'end'" class="end_box">
-        <div class="left_box">
-          <div class="upimg_box">
-            <div class="img_show">
-              <img :src="toRaw(showImg)" class="avatar" />
             </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="upimg_box">
-            <el-scrollbar>
-              <div class="text_box">
-                {{ textData }}
-              </div>
-            </el-scrollbar>
-          </div>
-          <div class="sunmit_btn copy-qb" @click="copyQbUrl()">全部复制</div>
+          </el-scrollbar>
         </div>
+        <div class="sunmit_btn copy-qb" @click="copyQbUrl()">全部复制</div>
       </div>
     </div>
-<<<<<<< HEAD
-    <!-- </el-dialog> -->
-    <PicTree
-      :openFile="openFile"
-      @close="openFile = false"
-      :fileUserTreeData="treeData"
-      @fileChangeMsg="fileChangeMsg"
-    ></PicTree>
-  </template>
-  
-  <script setup>
-  import { onMounted, ref, toRaw, watch } from "vue";
-  import { ElMessage } from "element-plus";
-  import Clipboard from "clipboard";
-  import PicTree from "@/components/PicTree/PicTree.vue"; //选择文件发送的列表
-  import { picTree } from "@/api/search/search.js";
-  import { ocrRemark, preview } from "@/api/common/common.js";
-  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 props = defineProps({
-    openFile: {
-      type: Boolean,
-      default: false,
-    },
-  });
-  watch(
-    () => props.openFile,
-    (newValue) => {
-      // console.log(111);
-      isOpen.value = newValue;
-    }
-  );
-  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.remark);
-    thisStep.value = "loading";
-    showImg.value = URL.createObjectURL(imgRes);
-    const res = await ocrRemark(data.remark);
-=======
   </div>
   <!-- </el-dialog> -->
   <PicTree
@@ -271,15 +95,14 @@
     @fileChangeMsg="fileChangeMsg"
   ></PicTree>
 </template>
-
-<script setup>
+  
+  <script setup>
 import { onMounted, ref, toRaw, watch } from "vue";
 import { ElMessage } from "element-plus";
 import Clipboard from "clipboard";
 import PicTree from "@/components/PicTree/PicTree.vue"; //选择文件发送的列表
 import { picTree } from "@/api/search/search.js";
 import { ocrRemark, preview } from "@/api/common/common.js";
-import { useRoute } from "vue-router";
 const textData = ref(""); //解析出来的文字
 const showImg = ref(); //上传的图片
 const isOpen = ref(props.openFile);
@@ -322,199 +145,245 @@ const handleAvatarSuccess = (msg, file) => {
   // showImg.value = URL.createObjectURL(flieData.raw);
   if (msg.code === 200) {
     textData.value = msg.msg;
->>>>>>> liuqiang
     thisStep.value = "end";
-    textData.value = res.msg;
-    // console.log("res", res);
-    // console.log("imgRes", imgRes);
-  };
-  const reClick = () => {
+  } else {
     thisStep.value = "start";
     textData.value = null;
     showImg.value = null;
-  };
-  </script>
+    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.remark);
+  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>
-  .container {
-    height: 100%;
-    background-color: #fff;
+.container {
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .up_box {
     display: flex;
-    align-items: center;
     justify-content: center;
-  
-    .up_box {
-      display: flex;
-      justify-content: center;
-    }
-    .left_box {
-      width: 300px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-right: 48px;
-      .img_show {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        img {
-          width: 100%;
-          // max-height: 100%;
-          // object-fit:cover; // 保持原比例缩小
-        }
-      }
-      .upimg_box {
-        width: 100%;
-        height: 300px;
-        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;
-      }
-    }
-    .right_box {
-      width: 300px;
+  }
+  .left_box {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 48px;
+    .img_show {
+      width: 100%;
+      height: 100%;
       display: flex;
-      flex-direction: column;
       align-items: center;
-      .upimg_box {
+      justify-content: center;
+      img {
         width: 100%;
-        height: 300px;
-        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 {
-        font-size: 14px;
-        font-weight: 500;
-        color: #000000;
-        line-height: 22px;
+        // max-height: 100%;
+        // object-fit:cover; // 保持原比例缩小
       }
     }
-    .load-box {
+    .upimg_box {
+      width: 100%;
+      height: 300px;
+      border: 1px solid #c1cce3;
       display: flex;
       align-items: center;
       justify-content: center;
-      .light_box {
-        width: 320px;
-        height: 320px;
-        background-image: url("@/assets/images/light.png");
-        background-repeat: no-repeat;
-        background-size: contain;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        img {
-          width: 100%;
-          // height: 100%;
-        }
-        .light {
-          width: 100%;
-          height: 1px;
-          position: absolute;
-          top: 0;
-          left: 0;
-          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;
+    .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;
     }
   }
-  :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 {
+  .right_box {
+    width: 300px;
     display: flex;
     flex-direction: column;
-    img {
-      width: 40px;
-      height: 40px;
-      margin-bottom: 16px;
+    align-items: center;
+    .upimg_box {
+      width: 100%;
+      height: 300px;
+      border: 1px solid #c1cce3;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-    span {
-      font-size: 12px;
+    .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;
-      color: #06286c;
+      text-align: center;
     }
-  }
-  ::v-deep .sunmit_btn .avatar-uploader .el-upload {
-    span {
+    .text_box {
       font-size: 14px;
-      font-weight: 400;
-      color: #fff;
+      font-weight: 500;
+      color: #000000;
+      line-height: 22px;
     }
   }
-  ::v-deep .avatar-uploader .el-upload .el-upload-dragger {
+  .load-box {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    border: none;
+    justify-content: center;
+    .light_box {
+      width: 320px;
+      height: 320px;
+      background-image: url("@/assets/images/light.png");
+      background-repeat: no-repeat;
+      background-size: contain;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img {
+        width: 100%;
+        // height: 100%;
+      }
+      .light {
+        width: 100%;
+        height: 1px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        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%;
+        }
+      }
+    }
   }
-  
-  .avatar-uploader .el-upload:hover {
-    border-color: var(--el-color-primary);
+  .end_box {
+    display: flex;
+    justify-content: center;
   }
-  
-  .el-icon.avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    text-align: center;
+}
+: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: 40px;
+    height: 40px;
+    margin-bottom: 16px;
+  }
+  span {
+    font-size: 12px;
+    font-weight: 400;
+    color: #06286c;
   }
-  </style>
+}
+::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>