文字识别单独作为页面

src/components/IdentifyFont/IdentifyFont.vue

@@ -1,104 +1,103 @@
 <template>
-  <div>
-    <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" />
-              </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>
+<!-- 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" />
           </div>
         </div>
-        <div v-if="thisStep === 'loading'" class="load-box">
-          <div class="light_box">
+        <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 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
+        <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>
+          <span @click="reClick">重新选择</span>
+          <!-- </el-upload> -->
+        </div>
+      </div>
+      <div class="right_box">
+        <div class="upimg_box">
+          <el-scrollbar>
+            <div class="text_box">
+              {{ textData }}
             </div>
-            <div class="sunmit_btn copy-qb" @click="copyQbUrl()">全部复制</div>
-          </div>
+          </el-scrollbar>
         </div>
+        <div class="sunmit_btn copy-qb" @click="copyQbUrl()">全部复制</div>
       </div>
-    </el-dialog>
-    <PicTree
-      :openFile="openFile"
-      @close="openFile = false"
-      :fileUserTreeData="treeData"
-      @fileChangeMsg="fileChangeMsg"
-    ></PicTree>
+    </div>
   </div>
+  <!-- </el-dialog> -->
+  <PicTree
+    :openFile="openFile"
+    @close="openFile = false"
+    :fileUserTreeData="treeData"
+    @fileChangeMsg="fileChangeMsg"
+  ></PicTree>
 </template>
 
 <script setup>
-import { onMounted, ref, toRaw ,watch} from "vue";
+import { onMounted, ref, toRaw, watch } from "vue";
 import { ElMessage } from "element-plus";
 import Clipboard from "clipboard";
 import PicTree from "@/components/PicTree/PicTree.vue"; //选择文件发送的列表
@@ -136,7 +135,7 @@ const handleAvatarSuccess = (msg, file) => {
     thisStep.value = "start";
     textData.value = null;
     showImg.value = null;
-    ElMessage({ message: '识别失败', type: 'error' })
+    ElMessage({ message: "识别失败", type: "error" });
   }
   console.log("textData", textData.value);
 };
@@ -155,7 +154,7 @@ const copyQbUrl = () => {
   });
   clipboard.on("success", () => {
     // console.log('success');
-    ElMessage({ message: '复制成功', type: 'success' })
+    ElMessage({ message: "复制成功", type: "success" });
     clipboard.destroy();
   });
   clipboard.on("error", () => {
@@ -194,6 +193,9 @@ const reClick = () => {
 .container {
   height: 100%;
   background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .up_box {
     display: flex;

src/router/index.js

@@ -154,6 +154,14 @@ export const constantRoutes = [{
 					icon: "department"
 				}
 			},{
+				path: "/identifyFont",
+				component: () => import("@/components/IdentifyFont/IdentifyFont.vue"),
+				name: "iodentifyFont",
+				meta: {
+					title: "图文识别",
+					icon: "department"
+				}
+			},{
 				path: "/allback",
 				component: () => import("@/views/highSearch/SupplierAllBack.vue"),
 				name: "allback",

src/views/highSearch/HighSearch.vue

@@ -76,14 +76,14 @@
         <span>没有关于“{{ noFound }}”的结果 </span>
       </div>
     </div>
-    <IdentifyFont :openFile="openFile"></IdentifyFont>
+    <!-- <IdentifyFont :openFile="openFile"></IdentifyFont> -->
   </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
 import { search } from "@/api/search/search.js";
-import IdentifyFont from "@/components/IdentifyFont/IdentifyFont.vue";
+// import IdentifyFont from "@/components/IdentifyFont/IdentifyFont.vue";
 const searchText = ref(""); //搜索ipt的值
 const selectValue = ref(1); //文档空间类型
 const page = ref(1); //页数

src/views/myfile/MyFile.vue

@@ -447,6 +447,7 @@ import squre from '../../assets/images/squre.png'
 import { ElMessage } from 'element-plus'
 import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
 import { preview } from "@/api/common/common.js";
+import { useRouter, useRoute } from "vue-router";
 export default {
     setup() {
         let editOnline = ref(true)
@@ -649,6 +650,7 @@ export default {
         ])
         const showPreview = ref(false)//控制图片预览组件显示
         const previewData = ref()//需要预览的文件的数据
+        const router = useRouter(); //注册路由
         // 获取所有文件
         function getAll() {
             myfile.getAllFileMenu({ dirId: folderId.value }).then(res => {
@@ -833,6 +835,11 @@ export default {
                 editOnline.value = false
                 cliCC.value = false
             }
+            if (row.name === '文字识别') {
+                router.push({
+                    path:'/identifyFont'
+                }) 
+            }
             if (row.name === '预览') {
                 // console.log('row=', toRaw(row));
                 // console.log('copyFileId',copyFileId.value);//文件id
@@ -1280,6 +1287,7 @@ export default {
             showPreview,//控制图片预览
             closeImgPreview,//关闭预览事件
             previewData,//预览文件数据
+            router,
         }
     },
     created() {