语言搜索，检测语言，翻译文档，orc识别

api/translate.ts

@@ -11,6 +11,7 @@ export default new class translate extends Http<ResOptions<any>> {
     private readonly translateFileUrl = '/translate/document'
     private readonly identifyLanguageUrl = '/translate/identifyLanguage'
     private readonly getUserTranslateDocInfoUrl = '/translate/getUserTranslateDocInfo'
+    private readonly ocrTranslateUrl = '/translate/ocr'
     getTranslateList(params:any) {
         return this.get(this.translateList, params)
     }
@@ -29,6 +30,9 @@ export default new class translate extends Http<ResOptions<any>> {
     identifyLanguage(data:any) {
         return this.post(this.identifyLanguageUrl, this.toFormData(data))
     }
+    ocrTranslate(data:any) {
+        return this.post(this.ocrTranslateUrl, this.toFormData(data))
+    }
     getUserTranslateDocInfo(params:any) {
         return this.get(this.getUserTranslateDocInfoUrl, params)
     }

pages/translate.vue

@@ -25,7 +25,8 @@
           :value="item.value"/>
       </el-select>
       <el-button v-if="radio1==1||radio1==3" @click="translate">翻译</el-button>
-      <el-button v-if="radio1==4||radio1==2" @click="translate2">识别</el-button>
+      <el-button v-if="radio1==2" @click="translate2">识别</el-button>
+      <el-button v-if="radio1==4" @click="translate3">识别</el-button>
       <div class="select_wrap" v-if="currentLangModalStatus" ref="tanchuang1">
         <el-input placeholder="搜索语言" v-model="searchLanguage"
                   @keyup.enter="inputChange"></el-input>
@@ -41,7 +42,8 @@
         </div>
       </div>
       <div class="select_wrap" v-if="targetLangModalStatus" ref="tanchuang2">
-        <el-input placeholder="搜索语言"></el-input>
+        <el-input placeholder="搜索语言" v-model="searchLanguage2"
+                  @keyup.enter="inputChange2"></el-input>
         <div class="hr"></div>
         <div class="language_wrap">
           <el-scrollbar class="scrollbar">
@@ -97,11 +99,11 @@
       </div> -->
       <div class="importBox2">
         <span class="importTitle">{{ value2 || '英语（美式）' }}</span>
-        <el-input
+        <!-- <el-input
           v-model="textarea2"
           :rows="2"
-          type="textarea"/>
-        <!-- <HtmlPreview :content="content"/> -->
+          type="textarea"/> -->
+        <HtmlPreview class="HtmlPreview" :content="textarea2"/>
 
       </div>
     </div>
@@ -183,6 +185,7 @@ const route = useRoute()
 const {translateApi} = useApi()
 
 const searchLanguage = ref('')
+const searchLanguage2 = ref('')
 const textarea = ref('')
 const textarea2 = ref('')
 const currentLangModalStatus = ref(false)
@@ -219,7 +222,12 @@ const fileUrl = ref('')
 const uid = ref('')
 const socket = ref(null)
 
-
+watch(currentLangModalStatus,(val)=>{
+    allLanguage()
+})
+watch(targetLangModalStatus,(val)=>{
+    allLanguage()
+})
 watchEffect(() => {
   radio1.value = route.query?.type ?? 1;
 
@@ -277,6 +285,10 @@ async function inputChange() {
   const {data: data} = await translateApi.getAllLanguage({keyword: searchLanguage.value})
   language.value = data
 }
+async function inputChange2() {
+  const {data: data} = await translateApi.getAllLanguage({keyword: searchLanguage2.value})
+  language2.value = data
+}
 
 function changeTranslate(val: any) {
   router.replace({
@@ -385,6 +397,15 @@ async function translate() {
     textarea2.value = data
   }
 }
+async function translate3() {
+    const {data: data} = await translateApi.ocrTranslate({
+      file: fileUrl.value,
+      source: abbreviation1.value,
+      target: abbreviation2.value
+    })
+    textarea2.value = data
+  
+}
 
 async function translate2() {
   translateApi.translateFile({
@@ -399,6 +420,7 @@ async function translate2() {
       console.log("收到消息：" + msg);
       // 调接口
       translateApi.getUserTranslateDocInfo({id: msg}).then((data) => {
+        textarea2.value = data.data.after_content
 
       })
     });
@@ -805,5 +827,10 @@ allLanguage()
   box-shadow: none !important;
   // padding: 0px; //前边边距去掉
 }
-
+.HtmlPreview{
+  height: 239px !important;
+  margin: 17px;
+  border-radius: 16px;
+  background-color: #fff;
+}
 </style>