Merge branch 'liuqiang' into v3

package.json

@@ -21,6 +21,7 @@
     "@vueup/vue-quill": "1.1.0",
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
+    "clipboard": "^2.0.11",
     "echarts": "5.4.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",

src/api/common/common.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+export function ocrRemark(data) {
+    return request({
+        url: `/api/ocr/${data}`,
+        method: "get",
+    })
+}
+export function preview(data) {
+    return request({
+        url: `/api/access/${data}`,
+        method: "get",
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        responseType: 'blob' //这个最重要，一定不要忘记
+    })
+}

src/api/search/search.js

@@ -1,16 +1,23 @@
 import request from '@/utils/request'
 
 export function search(query) {
-    return request({
-      url: '/es/query',
-      method: 'get',
-      params: query
-    })
-  }
-  export function flieSearch(query) {
-    return request({
-      url: '/biz/info/search',
-      method: 'get',
-      params: query
-    })
-  }
+  return request({
+    url: '/es/query',
+    method: 'get',
+    params: query
+  })
+}
+export function flieSearch(query) {
+  return request({
+    url: '/biz/info/search',
+    method: 'get',
+    params: query
+  })
+}
+export function picTree(query) {
+  return request({
+    url: '/biz/dir/pic-tree',
+    method: 'get',
+    params: query
+  })
+}

src/components/IdentifyFont/IdentifyFont.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
-    <el-dialog v-model="show" title="重命名" width="70%">
+    <el-dialog v-model="isOpen" title="文字识别" width="55%">
       <div class="container">
-        <div v-if="!showImg" class="up_box">
+        <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"
@@ -17,6 +18,9 @@
                 <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
@@ -33,6 +37,7 @@
           <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"
@@ -42,34 +47,146 @@
                 <span>点击按钮上传图片</span>
               </el-upload>
             </div>
-            <div class="sunmit_btn">添加文库图片</div>
+            <div class="sunmit_btn" @click="addlibraryImg">添加文库图片</div>
           </div>
         </div>
-        <div v-else>
-          <img :src="toRaw(showImg)" class="avatar" />
+        <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>
+          </div>
         </div>
       </div>
     </el-dialog>
+    <PicTree
+      :openFile="openFile"
+      @close="openFile = false"
+      :fileUserTreeData="treeData"
+      @fileChangeMsg="fileChangeMsg"
+    ></PicTree>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, toRaw } 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"; //选择文件发送的列表
+import { picTree } from "@/api/search/search.js";
+import { ocrRemark, preview } from "@/api/common/common.js";
 const textData = ref(""); //解析出来的文字
 const showImg = ref(); //上传的图片
-const show = ref(true);
+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);
+  // console.log("re", msg);
   const flieData = toRaw(file);
-  console.log("file", flieData);
-  showImg.value = URL.createObjectURL(flieData.raw);
+  // 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 = () => {
-  console.log(2);
+//文件上传前的钩子
+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>
 
@@ -88,6 +205,18 @@ const beforeUp = () => {
     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;
@@ -134,6 +263,58 @@ const beforeUp = () => {
       font-weight: 400;
       text-align: center;
     }
+    .text_box {
+      font-size: 14px;
+      font-weight: 500;
+      color: #000000;
+      line-height: 22px;
+    }
+  }
+  .load-box {
+    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;
   }
 }
 :deep(.el-dialog__header) {

src/components/PicTree/PicTree.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-dialog v-model="isOpen" append-to-body width="700">
+    <template #header>
+      <div class="my-header">
+        <div class="title">选择图片</div>
+      </div>
+    </template>
+    <div class="main-cont">
+      <div class="main-cont-left">
+        <el-tree-v2
+          ref="treeRef"
+          :data="treeData.data"
+          :show-checkbox="false"
+          :height="280"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+        >
+          <template #default="{ node }">
+            <span style="display: flex;align-items: center;">
+              <!-- <img :src="fileImg" alt="" style="width: 20px;height: 20px;margin-right: 5px;"/> -->
+              <!-- 放置图片 -->
+              <span>{{ node.label }}</span>
+              <!-- 显示节点标签 -->
+            </span>
+          </template>
+        </el-tree-v2>
+      </div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="isOpen = false" class="cancel-button"
+          >取消</el-button
+        >
+        <el-button type="primary" @click="confirm" class="sure-button">
+          确认
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+  <script setup>
+import { reactive, ref, toRaw, toRefs, watch } from "vue";
+import { ElMessage } from "element-plus";
+import useUserStore from "@/store/modules/user";
+import { defineEmits } from "vue";
+const opent = ref(true);
+const props = defineProps({
+  openFile: {
+    type: Boolean,
+    default: false,
+  },
+  fileUserTreeData: {
+    type: Object,
+    default: () => {},
+  },
+});
+const defaultProps = {
+  children: "children",
+  label: "label",
+  value: "id",
+};
+const isOpen = ref(props.openFile);
+watch(
+  () => props.openFile,
+  (newValue) => {
+    // console.log(111);
+    isOpen.value = newValue;
+  }
+);
+const treeData = reactive({ data: [] });
+watchEffect(() => {
+  treeData.data[0]=props.fileUserTreeData
+  toRaw(treeData.data);
+  console.log('toRaw(treeData.data);', toRaw(treeData.data))
+});
+
+//树
+const clickData = ref({});
+const handleNodeClick = (data) => {
+  clickData.value = data;
+};
+//确定按钮
+  const emit = defineEmits(["fileChangeMsg"]);
+const confirm = () => {
+  const {disabled,label}=toRefs(clickData.value)
+  if(disabled.value){
+    return ElMessage({ message: '当前选中为目录,请重新选择文件', type: 'error' })
+  }
+    emit("fileChangeMsg", clickData.value);
+    isOpen.value  = false
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/tree-common.scss";
+</style>

src/views/highSearch/HighSearch.vue

@@ -76,7 +76,7 @@
         <span>没有关于“{{ noFound }}”的结果 </span>
       </div>
     </div>
-    <IdentifyFont :showIdentify="showIdentify"></IdentifyFont>
+    <IdentifyFont :openFile="openFile"></IdentifyFont>
   </div>
 
 </template>
@@ -101,7 +101,7 @@ const selectOptions = [
 ];
 
 // ----------------------------
-const showIdentify = ref(true)
+const openFile = ref(true)
 // ----------------------------
 
 onMounted(async () => {});