'翻译接口对接'

api/index.ts

@@ -7,6 +7,7 @@ import warningApi from "~~/api/Warning";
 import technicalApi from "~~/api/Technical";
 import tbspApi from "~~/api/TbSp";
 import caseApi from "~~/api/Case";
+import translateApi from "~~/api/translate";
 
 export default {
   aboutApi,
@@ -18,4 +19,5 @@ export default {
   technicalApi,
   tbspApi,
   caseApi,
+  translateApi
 }

api/translate.ts

@@ -0,0 +1,27 @@
+import Http from '~~/utils/http';
+import {PaginationVo, ResOptions} from "~~/api/types";
+
+
+export default new class translate extends Http<ResOptions<any>> {
+
+    private readonly translateList = '/translate/log'
+    private readonly translateTextUrl = '/translate/text'
+    private readonly translateOptimizeTextUrl = '/translate/optimization'
+    private readonly allLanguageList = '/translate/lang'
+    private readonly translateFileUrl = '/translate/document'
+    getTranslateList(params:any) {
+        return this.get(this.translateList, params)
+    }
+    getAllLanguage(data:any) {
+        return this.post(this.allLanguageList, data)
+    }
+    translateText(data:any) {
+        return this.post(this.translateTextUrl, this.toFormData(data))
+    }
+    translateOptimizeText(data:any) {
+        return this.post(this.translateOptimizeTextUrl, this.toFormData(data))
+    }
+    translateFile(data:any) {
+        return this.post(this.translateFileUrl, this.toFormData(data))
+    }
+}

pages/translate.vue

@@ -1,47 +1,13 @@
-<script lang="ts" setup>
-const textarea = ref('')
-const textarea2 = ref('')
-const radio1 = ref('1')
-const value = ref(1)
-const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
-
-const options = reactive([
-  {value:1,lable:'中文（简体）'},
-  {value:2,lable:'中文（繁体）'},
-  {value:3,lable:'英文'},
-])
-const value2 = ref(1)
-const options2 = reactive([
-  {value:1,lable:'中文（简体）'},
-  {value:2,lable:'中文（繁体）'},
-  {value:3,lable:'英文'},
-])
-const searchData = reactive({
-  selecttime:'',
-  name:''
-})
-
-definePageMeta({
-  name: '翻译',
-  hidden:true,
-  // headerHost: false,
-  // homeBanner:true,
-  // order: 1,
-})
-//   const props = defineProps(['title']);
-  const {prefixCls} = useDesign('mai-wrap');
-
-</script>
 <template>
   <div class="wrap">
     <el-radio-group fill="#022950" v-model="radio1">
-      <el-radio-button label="1" size="large" border>翻译文本</el-radio-button>
+      <el-radio-button :label="1" size="large" @click="reset" border>翻译文本</el-radio-button>
-      <el-radio-button label="2" size="large" border>翻译文件</el-radio-button>
+      <el-radio-button :label="2" size="large" @click="reset" border>翻译文件</el-radio-button>
-      <el-radio-button label="3" size="large" border>优先翻译</el-radio-button>
+      <el-radio-button :label="3" size="large" @click="reset" border>优化翻译</el-radio-button>
-      <el-radio-button label="4" size="large" border>OCR识别</el-radio-button>
+      <el-radio-button :label="4" size="large" @click="reset" border>OCR识别</el-radio-button>
     </el-radio-group>
-    <div class="change-wrap" v-if="radio1==1||radio1==4">
+    <div class="change-wrap" >
-      <el-select v-model="value" class="m-2" placeholder="Select" size="large">
+      <el-select v-model="value" class="m-2" popper-class="popper" @click="selectClick1"  placeholder="请选择语言" size="large">
         <el-option
           v-for="item in options"
           :key="item.value"
@@ -49,19 +15,43 @@ definePageMeta({
           :value="item.value"/>
       </el-select>
       <img src="../assets/images/zhuanhuan.png" alt="">
-      <el-select v-model="value2" class="m-2" placeholder="Select" size="large">
+      <el-select v-model="value2" class="m-2" popper-class="popper" @click="selectClick2" placeholder="请选择语言" size="large">
         <el-option
           v-for="item in options2"
           :key="item.value"
           :label="item.label"
           :value="item.value"/>
       </el-select>
-      <el-button v-if="radio1==1" >翻译</el-button>
+      <el-button v-if="radio1==1||radio1==3"  @click="translate">翻译</el-button>
-      <el-button v-if="radio1==4" >识别</el-button>
+      <el-button v-if="radio1==4||radio1==2"  @click="translate2">识别</el-button>
+      <div class="select_wrap" v-if="xiala" ref="tanchuang1">
+        <el-input placeholder="搜索语言"></el-input>
+        <div class="hr"></div>
+        <div class="language_wrap">
+          <el-scrollbar class="scrollbar">
+            <div class="language_box" v-for="(value,key,index) in language" :key="index">
+              <div class="firstWord">{{key}}</div>
+              <span class="language" v-for="(item2,index) in value" @click="selectLanguage(item2)" :key="index">{{item2.name}}</span>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+      <div class="select_wrap" v-if="xiala2" ref="tanchuang2">
+        <el-input placeholder="搜索语言"></el-input>
+        <div class="hr"></div>
+        <div class="language_wrap">
+          <el-scrollbar class="scrollbar">
+            <div class="language_box" v-for="(value,key,index) in language" :key="index">
+              <div class="firstWord">{{key}}</div>
+              <span class="language" v-for="(item2,index) in value" @click="selectLanguage2(item2)" :key="index">{{item2.name}}</span>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
     </div>
     <div class="import-wrap">
       <div class="importBox1">
-        <span class="importTitle" v-if="radio1==1||radio1==3">检测源语言</span>
+        <span class="importTitle" v-if="radio1==1||radio1==3">{{value||'检测源语言'}}</span>
         <span class="importTitle" v-if="radio1==2||radio1==4">见识别文件</span>
         <el-input
         v-if="radio1==1||radio1==3"
@@ -71,11 +61,16 @@ definePageMeta({
           placeholder="输入翻译"/>
           <el-upload
           v-if="radio1==2||radio1==4"
+          ref="upload"
             class="upload-demo"
             drag
-            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            limit="1"
-            multiple>
+            :before-upload="brforeUpload"
-            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            :on-change="uploadChange"
+            :on-success="uploadSuccess"
+            :on-error="uploadError"
+            action="/api/common/upload">
+            <img style="width:64px;height:64px;marginLeft:45px" src="../assets/images/fileIcon.png" alt="">
             <div class="el-upload__text">
               点击文件上传
             </div>
@@ -89,12 +84,12 @@ definePageMeta({
             </template> -->
           </el-upload>
       </div>
-      <div class="importBox3" v-if="radio1==2||radio1==3">
+      <!-- <div class="importBox3" v-if="radio1==2||radio1==3">
         <el-button class="button1">英语</el-button>
-        <el-button class="button2">翻译</el-button>
+        <el-button class="button2" @click="translate2">翻译</el-button>
-      </div>
+      </div> -->
       <div class="importBox2">
-        <span class="importTitle">英语（美式）</span>
+        <span class="importTitle">{{value2||'英语（美式）'}}</span>
         <el-input
           v-model="textarea2"
           :rows="2"
@@ -103,7 +98,7 @@ definePageMeta({
     </div>
     <div class="jilu-wrap">
       <div class="jilu"><img src="../assets/images/jilu.png" alt="">翻译记录</div>
-      <div class="first">优先翻译</div>
+      <div class="first" v-if="radio1==1" @click="goYouHua">优化翻译</div>
     </div>
     <div :class="`${prefixCls}-content dynamicInfo flex flex-col `">
       <el-form size="large" inline>
@@ -130,17 +125,19 @@ definePageMeta({
       <el-table v-loading="loading" size="large" border :data="content" :empty-text="'暂无数据'"
                 :header-cell-style="{background: '#f5f5f5', color:'#333333'}">
         <el-table-column show-overflow-tooltip align="center" label="时间"
-                         prop="notification_number"></el-table-column>
+                         prop="date"></el-table-column>
         <el-table-column show-overflow-tooltip align="center" label="名称"
-                         prop="notification_title">
+                         prop="name">
           <template #header>
             <span>名称</span>
           </template>
         </el-table-column>
         <el-table-column show-overflow-tooltip align="center" label="附件"
-                         prop="notifying_members"></el-table-column>
+                         prop=""></el-table-column>
         <el-table-column show-overflow-tooltip align="center" label="操作"
-                         prop="notification_time_text"></el-table-column>
+                         prop="notification_time_text">
+          <span style="color:#E60B0B"><a href="">下载</a></span>
+        </el-table-column>
       </el-table>
       <div class="mt-32">
         <Pagination
@@ -154,6 +151,201 @@ definePageMeta({
     </div>
   </div>
 </template>
+<script lang="ts" setup>
+import dayjs from "dayjs";
+import { onClickOutside } from "@vueuse/core"
+import { genFileId } from 'element-plus'
+
+const {translateApi} = useApi()
+
+const textarea = ref('')
+const textarea2 = ref('')
+const xiala = ref(false)
+const xiala2 = ref(false)
+// const textarea2 = ref('')
+const radio1 = ref(1)
+const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
+const currentTab = ref({});
+let language = reactive({})
+
+const options = reactive([
+  {value:'zh',lable:'中文（简体）'},
+  {value:"en",lable:'英文'},
+])
+const options2 = reactive([
+  {value:'zh',lable:'中文（简体）'},
+  {value:"en",lable:'英文'},
+])
+const value2 = ref('')
+const value = ref('')
+const abbreviation1 = ref('')
+const abbreviation2 = ref('en')
+const searchData = ref({
+  selecttime:'',
+  name:''
+})
+const loading = ref(true);
+const content = ref([]);
+const tanchuang1 = ref()
+const tanchuang2 = ref()
+const upload = ref()
+const fileUrl = ref('')
+
+
+definePageMeta({
+  name: '翻译',
+  hidden:true,
+  // headerHost: false,
+  // homeBanner:true,
+  // order: 1,
+})
+//   const props = defineProps(['title']);
+  const {prefixCls} = useDesign('mai-wrap');
+
+// watch(radio1, ()=>{
+//   value.value = ''
+//   value2.value = ''
+//   abbreviation1.value = ''
+//   abbreviation2.value = ''
+//   textarea.value = ''
+//   textarea2.value = ''
+  
+// })
+function brforeUpload(file:any){
+  console.log(file)
+
+}
+function uploadChange(){
+  
+}
+function uploadSuccess(response:any){
+  ElMessage.success(response.msg)
+  console.log(typeof response.data.url)
+  fileUrl.value = response.data.url
+}
+function uploadError(response:any){
+  ElMessage.error(response.msg)
+}
+// function handleExceed(files:any){
+//   upload.value!.clearFiles()
+//   const file = files[0]
+//   file.uid = genFileId()
+//   upload.value!.handleStart(file)
+// }
+function resetData(flag: boolean = true) {
+  searchData.value = {
+    selecttime:'',
+    name:''
+  }
+  flag && getList(currentTab.value)
+}
+function goYouHua(){
+  radio1.value = 3
+}
+function reset(){
+  value.value = ''
+  value2.value = ''
+  abbreviation1.value = ''
+  abbreviation2.value = ''
+  textarea.value = ''
+  textarea2.value = ''
+}
+function onChangePage(val: number) {
+  setCurrentPage(val)
+  getList(currentTab.value)
+}
+
+function selectClick1() {
+  // debugger
+  xiala.value = !xiala.value
+}
+
+function selectClick2() {
+  xiala2.value = !xiala2.value
+}
+function selectLanguage(item:any) {
+  console.log(item)
+  if(xiala.value){
+    value.value = item.name
+    abbreviation1.value = item.abbreviation
+    xiala.value = false
+  }
+}
+function selectLanguage2(item:any) {
+  console.log(item)
+  if(xiala2.value){
+    value2.value = item.name
+    abbreviation2.value = item.abbreviation
+    xiala2.value = false
+  }
+  
+  
+}
+
+async function translate() {
+  if(radio1.value==1){
+    const {data:data} = await translateApi.translateText({content:textarea.value,source:abbreviation1.value,target:abbreviation2.value})
+    textarea2.value = data
+  }
+  if(radio1.value==3){
+    const {data:data} = await translateApi.translateOptimizeText({content:textarea.value,source:abbreviation1.value,target:abbreviation2.value})
+    textarea2.value = data
+  }
+  // console.log(data)
+}
+async function translate2() {
+  const {data:data} = await translateApi.translateFile({file:fileUrl.value,source:abbreviation1.value,target:abbreviation2.value})
+  // console.log(data)
+  // textarea2.value = data
+}
+async function allLanguage() {
+  const {data:data} = await translateApi.getAllLanguage({})
+  language = data
+}
+
+async function getList(data: any) {
+  if (data) {
+    loading.value = true;
+    const searchParams = {
+      ...searchData.value,
+      start_date:'',
+      end_date: '',
+      type:0
+    }
+    if (searchData.value.selecttime) {
+      searchParams.start_date = dayjs(searchData.value.selecttime[1]).format('YYYY-DD-MM hh:mm:ss')
+      searchParams.end_date = dayjs(searchData.value.selecttime[0]).format('YYYY-DD-MM hh:mm:ss')
+      // @ts-ignore
+      delete searchParams.selecttime;
+    }
+    searchParams.type = radio1.value
+    const {data: listDatas} = await translateApi.getTranslateList({
+      ...searchParams,
+      page: current.value,
+      limit: limit,
+      category_id: data.id
+    })
+    content.value = listDatas.data;
+    loading.value = false;
+    setTotal(listDatas.total)
+  }
+}
+
+  onClickOutside(tanchuang1, ()=>{
+        xiala.value = false
+
+  })
+  onClickOutside(tanchuang2, ()=>{
+    xiala2.value = false
+  })
+  getList(currentTab.value)
+  allLanguage()
+</script>
+<style lang="scss">
+.popper{
+  display: none !important;
+}
+</style>
 <style lang="scss" scoped>
 .wrap{
   padding: 0 244px;
@@ -201,6 +393,10 @@ definePageMeta({
   display: flex;
   align-items: center;
   margin-bottom: 24px;
+  position: relative;
+  ::v-deep .el-input__wrapper{
+    font-size: 20px !important;
+  }
   .el-button{
     width: 218px;
     height: 61px;
@@ -232,7 +428,7 @@ definePageMeta({
 .import-wrap{
   display: flex;
   justify-content: center;
-  align-items: center;
+  // align-items: center;
   .importBox1{
     flex: 1;
     margin-right: 32px;
@@ -297,6 +493,7 @@ margin-left: 10px;
   }
   .first{
     color: #E60B0B;
+    cursor: pointer;
   }
 }
 .yangliu-mai-wrap-content{
@@ -387,4 +584,70 @@ display: flex;
 justify-content: center;
 align-items: center;
 }
+::v-deep .el-table__cell {
+    padding: 26px 0 !important;
+}
+.select_wrap{
+  width: 100%;
+  // width: 1436px;
+  padding-left: 32px;
+  padding-right: 40px;
+  height: 774px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 22px 7px rgba(224,224,224,0.5);
+  border-radius: 16px;
+  position: absolute;
+  top: 65px;
+  left: 0;
+  z-index: 100;
+  ::v-deep .el-input__inner {
+    text-align: left;
+    font-size: 24px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #CACACA;
+  }
+  .hr{
+    width: 100%;
+    height: 1px;
+    background: #D8D8D8;
+  }
+  .scrollbar{
+    ::v-deep .el-scrollbar__bar{
+      width: 13px !important;
+      border-radius: 6.5px !important;
+    }
+  }
+  .language_wrap{
+    height: 698px;
+    overflow-y: auto;
+    padding-bottom: 64px;
+    .language_box{
+      padding: 0 5px;
+      .firstWord{
+        font-size: 18px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        margin-top: 24px;
+      }
+      .language{
+        font-size: 20px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        margin-top: 20px;
+        display: inline-block;
+        margin-right: 24px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+::v-deep .el-input__wrapper {
+  border: none !important;
+  box-shadow: none !important;
+  // padding: 0px; //前边边距去掉
+}
+
 </style>

utils/http.ts

@@ -40,7 +40,7 @@ const fetch = $fetch.create({
       console.log('options>>>', options)
       options.headers = new Headers(options.headers);
       if (token) {
-        options.headers.set('X-Access-Token', token)
+        options.headers.set('token', token)
       }
     },
     // 响应拦截