Merge branch 'claim2' into product

src/api/index.js

@@ -38,6 +38,7 @@ import importAndExport from './newApi/importAndExport'
 import patent from './newApi/patent'
 import custom from "./newApi/custom";
 import otherPatentInformation from "./newApi/otherPatentInformation";
+import translate from "./newApi/translate";
 
 export default {
   // ...report,
@@ -75,5 +76,6 @@ export default {
   ...importAndExport,
   ...patent,
   ...custom,
-  ...otherPatentInformation
+  ...otherPatentInformation,
+  ...translate
 }

src/api/newApi/translate.js

@@ -0,0 +1,27 @@
+import axios from "@/utils/axios";
+export default {
+    /**
+     * 根据标题和摘要获取翻译内容接口
+     */
+    getTranslateByTIAndAb(data) {
+        return axios.post("/xiaoshi/translate/getTranslateByTIAndAb", data);
+    },
+    /**
+     * 根据权利要求或说明书获取翻译内容接口
+     */
+    getTranslate(data) {
+        return axios.post("/xiaoshi/translate/getTranslate", data);
+    },
+    /**
+     * 翻译权利要求/说明书段落接口
+     */
+    getTranslateOrder(data) {
+        return axios.post("/xiaoshi/translate/getTranslateOrder", data);
+    },
+    /**
+     * 根据文本获取翻译内容接口
+     */
+    getTranslateByText(data) {
+        return axios.post("/xiaoshi/translate/getTranslateByText", data);
+    },
+}

src/store/modules/contextMenu.js

@@ -16,6 +16,10 @@ export default {
         {
             name: "批注",
             method: "mark",
+        },
+        {
+            name: "翻译",
+            method: "translate",
         }
     ], // 右键菜单内容
     defaultMark:{
@@ -52,6 +56,10 @@ export default {
         {
             name: "批注",
             method: "mark",
+        },
+        {
+            name: "翻译",
+            method: "translate",
         }
     ]
       if(payload.menuContent && payload.menuContent.length>0){

src/utils/direct/index.js

@@ -65,13 +65,88 @@ const DivHeight={
     }
 }
 
+//等高
+const equal_heights = {
+    inserted(el, binding,vnode) {  
+        var that = vnode.context
+        // 获取另一个容器的引用  
+        const otherContainerSelector = binding.value;  
+       
+         that.$nextTick(()=>{
+          const otherContainer = that.$refs[otherContainerSelector]; 
+          if (!otherContainer) {  
+            console.error('Unable to find the other container');  
+            return;  
+          }  
+         
+          window.addEventListener("resize",that.$commonJS.debounce(()=>{
+            const children = el.children;  
+            const otherChildren = otherContainer.children; 
+            for (let i = 0; i < children.length && i < otherChildren.length; i++) {  
+              children[i].style.height = 'auto';  
+              otherChildren[i].style.height = 'auto'; 
+              const maxHeight = Math.max(children[i].offsetHeight, otherChildren[i].offsetHeight);  
+              children[i].style.height = maxHeight + 'px';  
+              otherChildren[i].style.height = maxHeight + 'px';  
+              otherChildren[i].style.background = '#f3f4f8';  
+            } 
+          },500))
+          // 遍历当前容器和另一个容器的子div，并设置对应索引的高度  
+          const children = el.children;  
+          const otherChildren = otherContainer.children; 
+          for (let i = 0; i < children.length && i < otherChildren.length; i++) {  
+            const maxHeight = Math.max(children[i].offsetHeight, otherChildren[i].offsetHeight);  
+            children[i].style.height = maxHeight + 'px';  
+            otherChildren[i].style.height = maxHeight + 'px';  
+            otherChildren[i].style.background = '#f3f4f8';  
+          } 
+        }) 
+      },  
+      // 如果需要，可以在更新时再次执行逻辑  
+      componentUpdated(el, binding,vnode) {  
+        // 这里可能需要额外的逻辑来处理更新后的高度同步  
+        var that = vnode.context
+        // 获取另一个容器的引用  
+        const otherContainerSelector = binding.value;  
+       
+         that.$nextTick(()=>{
+          const otherContainer = that.$refs[otherContainerSelector]; 
+          if (!otherContainer) {  
+            console.error('Unable to find the other container');  
+            return;  
+          }  
+          // 遍历当前容器和另一个容器的子div，并设置对应索引的高度  
+          const children = el.children;  
+          const otherChildren = otherContainer.children; 
+          for (let i = 0; i < children.length && i < otherChildren.length; i++) {  
+            const maxHeight = Math.max(children[i].offsetHeight, otherChildren[i].offsetHeight);  
+            children[i].style.height = maxHeight + 'px';  
+            otherChildren[i].style.height = maxHeight + 'px';  
+            otherChildren[i].style.background = '#f3f4f8';  
+          } 
+        }) 
+      },  
+      unbind(el) {
+        var eventListener = window.eventListeners_
+        if(!eventListener){
+          return false
+        }
+        const listeners = eventListener.resize
+        if(listeners){
+          window.removeEventListener("resize");
+        }
+        
+      },
+}
+
 
 
 const directives = {
     draggable,
     SelectLazyLoading,
     disabled,
-    DivHeight,
+    DivHeight, 
+    equal_heights
 };
 // 这种写法可以批量注册指令
 export default {

src/utils/model/tree/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-      <ul class="all-list" v-if='show'>
+      <ul class="all-list" v-if='show && list'>
         <li v-for="(item) in list" :key="item[nodeKey]">
           <div class="tree-item expend">
             <!-- 使用vuex保存选中状态，勾选父组件，自动选中其全部子组件 -->

src/views/components/dialog/menuDialog/translate.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <el-dialog title="翻译" v-draggable :visible.sync="visible" width="600px" custom-class="checkFile"
+      :before-close="cancel" :modal="false" :close-on-click-modal="false" :modal-append-to-body="false">
+      <div class="content">
+        <div class="left">
+            <div class="title">原文</div>
+            <div v-html="content" class="left_content"></div>
+        </div>
+        <div class="right">
+            <div class="title">译文</div>
+            <div v-html="contentOut" class="right_content"></div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+            <el-button @click="cancel">关 闭</el-button>
+        </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+        visible:false,
+        content:'',
+        contentOut:''
+    };
+  },
+  watch: {},
+  computed: {
+    ...mapGetters([ 'contextMenu']),
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    open(){
+        let mark = this.contextMenu.mark
+        var content = mark.id ? mark.markSelectText : mark.text
+        if(this.content.trim() != content.trim()){
+            this.content = content
+            this.contentOut = ''
+            this.getTranslateByText()
+        }
+        this.visible = true
+    },
+    cancel(){
+        this.visible = false
+    },
+    //翻译
+    getTranslateByText(){
+        var params = {
+            content:this.content
+        }
+        this.$api.getTranslateByText(params).then(res=>{
+            if(res.code == 200){
+                this.contentOut = res.data.translationContent
+            }
+        })
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.content{
+    display: flex;
+    align-items: stretch;
+    height:calc(100vh - 320px);
+}
+.left,.right{
+    width:100%;
+    height: 100%;
+    
+}
+.right_content,.left_content{
+    padding: 10px;
+    height: calc(100% - 40px);
+    overflow: auto;
+}
+.right{
+    background: #f8f8fb;
+}
+.title{
+    border-bottom: 1px solid #e8e9f4;
+    font-weight: bold;
+    padding: 10px 5px;
+}
+</style>

src/views/layout/components/contextMenu.vue

@@ -5,6 +5,7 @@
     <!-- 批注 -->
     <annotation ref="annotation"></annotation>
     <my-ImageViewer v-if="showImg" :on-close="closeViewer" :url-list="[imgSrc]"></my-ImageViewer>
+    <translate ref="translate"></translate>
   </div>
 </template>
 
@@ -12,11 +13,13 @@
 import { mapGetters } from 'vuex'
 import contrast from '@/views/components/dialog/menuDialog/contrast.vue'
 import annotation from '@/views/components/dialog/menuDialog/annotation.vue'
+import translate from '@/views/components/dialog/menuDialog/translate.vue'
 export default {
   name: 'myCommonUse',
   components: {
     contrast,
     annotation,
+    translate
   },
   props: {},
   data() {
@@ -80,6 +83,10 @@ export default {
         this[type]()
       }
     },
+    //翻译
+    translate(){
+      this.$refs.translate.open()
+    },
     //波浪线
     wave() {
       this.$refs.annotation.submit2(2)
@@ -103,7 +110,6 @@ export default {
     },
     //对比
     contrast() {
-      console.log('对比')
       this.$refs.contrast.open()
     },
     //删除批注

src/views/project/patentCollection/components/mixins/index.js

@@ -123,67 +123,72 @@ export const handleData = {
       }
       return ''
     },
+    //获取标题以及摘要译文
+    async getTranslateByTIAndAb(row,key){
+      var patentField = {
+        "title":1,
+        "abstractStr":2
+      }
+      var params = {
+        patentNo:row.patentNo,
+        patentField:patentField[key]
+      }
+      this.$api.getTranslateByTIAndAb(params).then(response=> {
+        if(response.code == 200){
+          var obj = response.data
+          row[key].push(
+            {
+              if_origin:false,
+              language:'CN',
+              text_content:obj.translationContent
+            }
+          )
+        }
+      })
+    },
+    //摘要以及原文的数据战术
+    getTranslate(row,key){
+      var arr = row[key]
+      if (!arr) {
+        return ''
+      }
+      var change = row.change
+      if(key == 'abstractStr'){
+        change = row.change2
+      }
+      var text = ''
+      if (!change) {
+        var obj = arr.find(item => {
+          return item.if_origin
+        })
+        text = ''
+        if (obj) {
+          text = obj.text_content
+        }
+      } else {
+        var obj = arr.find(item => {
+          return !item.if_origin && item.language == 'CN'
+        })
+        text = ''
+        if (obj) {
+          text = obj.text_content
+        }
+        else{
+           this.getTranslateByTIAndAb(row,key) 
+        }
+      }
+      return this.getViewDom(text)
+    },
     getView(row, key, type, prop, data) {
       var obj = {
         type: type ? type : 'String',
         value: key
       }
       if (row) {
-        const change2 = row.change2
-        const change = row.change
+        if(key == 'title' || key == 'abstractStr'){
+          return this.getTranslate(row,key,type)
+        }
         switch (key) {
-          case "title":
-            // prop = !change ? "content" : "contentOut"
-            // obj.type = 'Object'
-            var arr = row.title
-            if (!arr) {
-              text = ''
-              break
-            }
-            if (!change) {
-              var obj = arr.find(item => {
-                return item.if_origin
-              })
-              var text = ''
-              if (obj) {
-                text = obj.text_content
-              }
-            } else {
-              var obj = arr.find(item => {
-                return !item.if_origin && item.language == 'CN'
-              })
-              var text = ''
-              if (obj) {
-                text = obj.text_content
-              }
-            }
-            break
-          case "abstractStr":
-            // prop = !change2 ? "content" : "contentOut"
-            // obj.type = 'Object'
-            var arr = row.abstractStr
-            if (!arr) {
-              text = ''
-              break
-            }
-            if (!change2) {
-              var obj = arr.find(item => {
-                return item.if_origin
-              })
-              var text = ''
-              if (obj) {
-                text = obj.text_content
-              }
-            } else {
-              var obj = arr.find(item => {
-                return !item.if_origin && item.language == 'CN'
-              })
-              var text = ''
-              if (obj) {
-                text = obj.text_content
-              }
-            }
-            break;
           case "mipc"://ipc
           case 'inventor'://发明人
           case 'applicant'://申请人
@@ -218,28 +223,28 @@ export const handleData = {
       }
       var obj = null
       switch (field) {
-        case '权利要求原文':
-          obj = text.find(item => {
-            return item.if_origin
-          })
-          if(obj){
-            var currentText = obj.text_content
-            text = currentText.replace(/(\t)+/g,'<br/>')
-          }else{
-            text = ''
-          }
-          break;
-        case '权利要求译文':
-          obj = text.find(item => {
-            return item.if_origin == false
-          })
-          if(obj){
-            var currentText = obj.text_content
-            text = currentText.replace(/(\t)+/g,'<br/>')
-          }else{
-            text = ''
-          }
-          break;
+        // case '权利要求原文':
+        //   obj = text.find(item => {
+        //     return item.if_origin
+        //   })
+        //   if(obj){
+        //     var currentText = obj.text_content
+        //     text = currentText.replace(/(\t)+/g,'<br/>')
+        //   }else{
+        //     text = ''
+        //   }
+        //   break;
+        // case '权利要求译文':
+        //   obj = text.find(item => {
+        //     return item.if_origin == false
+        //   })
+        //   if(obj){
+        //     var currentText = obj.text_content
+        //     text = currentText.replace(/(\t)+/g,'<br/>')
+        //   }else{
+        //     text = ''
+        //   }
+        //   break;
         case '说明书文本原文':
           obj = text.find(item => {
             return item.if_origin
@@ -359,22 +364,50 @@ export const handleData = {
           // row.change2 = !row.change2
           break
       }
+      this.$nextTick(()=>{
+        if(this.$refs.table){
+          this.$refs.table.doLayout();
+        }
+        
+      })
     },
 
     //判断是否有译文
     haveTranslatedText(row,key){
-      var arr = row[key]
-      if (!arr) {
-        return ''
-      }
-      var obj = arr.find(item => {
-        return !item.if_origin && item.language == 'CN'
-      })
-      var text = ''
-      if (obj) {
-        text = obj.text_content
-      }
-      return text
+      if(row.appCountry == 'CN' || this.outside){
+        return false
+      }
+      // var arr = row[key]
+      // if (!arr) {
+      //   return false
+      // }
+      // if(arr.constructor != Array){
+      //   return false
+      // }
+      // var obj = arr.find(item => {
+      //   return item.if_origin
+      // })
+      // if(obj){
+      //   var text = obj.text_content
+      //   // if(language && language == 'CN'){
+      //   //   return false
+      //   // }
+      //   var len = text.length / 2
+      //   const reg = /[\u4e00-\u9fa5]/g
+      //   var arr = text.match(reg) || []
+      //   if(arr.length > 0 && arr.length>=len){
+      //     return false
+      //   }
+      // }
+      return true
+      // var obj = arr.find(item => {
+      //   return !item.if_origin && item.language == 'CN'
+      // })
+      // var text = ''
+      // if (obj) {
+      //   text = obj.text_content
+      // }
+      // return text
     },
   },
 }

src/views/project/patentCollection/components/views/Table.vue

@@ -26,8 +26,8 @@
         :sortable="item.ifSort?'custom':false" align="center">
         <template slot-scope="scope">
           <div v-if="['patentNo'].includes(item.value)">
-            <el-popover placement="right-start" width="500" trigger="hover">
-              <table class="patent-popover-table">
+            <el-popover placement="right-start" width="500" @show="showPopover(scope.row)" trigger="hover">
+              <table class="patent-popover-table" v-if="scope.row.showPopover">
                 <tr>
                   <td>
                     <div class="patent-abstract-image text-align_center">
@@ -124,7 +124,9 @@ export default {
     // console.log(this.columnList);
   },
   methods: {
-
+    showPopover(row){
+      this.$set(row,'showPopover',true)
+    },
     // 排序
     sortChange({ column, prop, order }) {
       this.$emit('on-sort', { column, prop, order })

src/views/project/patentDetails/components/patentMessage/PatentInstruction.vue

@@ -13,9 +13,20 @@
           </el-tab-pane>
         </el-tabs>
       </el-header>
-      <el-main v-loading="loading" ref="content">
-        <div v-html="getViewDom(patent.publicFullText, '说明书文本' + tabItem.label, tabItem.field)" :style="setStyle()"
-          :data-type="'说明书文本' + tabItem.label"></div>
+      <el-main style="overflow: auto;" ref="content">
+        <div class="height_100" v-loading="loading"  :style="setStyle()" >
+          <template v-if="name != 2">
+            <div  class="height_100" v-html="getContentOrContentOut(this.patent.pdfTranslate, tabItem.field)" :data-type="name == 2?'说明书原文':'说明书'+tabItem.label" ></div>
+          </template>
+          <template v-else>
+            <div class="height_100 claim">
+              <div v-equal_heights="'yiwen'" class="height_100" v-html="getContentOrContentOut(this.patent.pdfTranslate,  tabItem.field)" :data-type="name == 2?'说明书原文':'说明书'+tabItem.label" ref="yuanwen"></div>
+              <div class="height_100" v-html="getContentOrContentOut(this.patent.pdfTranslate,  'contentOut')" :data-type="'说明书译文'" ref="yiwen"></div> 
+            </div>
+            
+          </template>
+          
+        </div>
       </el-main>
     </el-container>
   </div>
@@ -23,30 +34,14 @@
 
 <script>
 import { patentDetails } from './mixins';
+import {translate} from './mixins/translate'
 export default {
-  mixins: [patentDetails],
+  mixins: [patentDetails,translate],
   data() {
     return {
       height: null,
       fullHeight: document.documentElement.clientHeight,
-      tabs: [
-        {
-          label: '原文',
-          name: '0',
-          field: 'manual'
-        },
-        {
-          label: '译文',
-          name: '1',
-          field: 'manualOut'
-        },
-      ],
-      tabItem: {
-        label: '原文',
-        name: '0',
-        field: 'manual'
-      },
-      loading:false
+      patentField:4
     }
   },
   watch: {
@@ -55,22 +50,16 @@ export default {
     // },
     patentNo() {
       this.showTabs()
-      if (this.outside) {
-        this.getData()
-      }else{
-        this.scrollToTop()
-      }
+      this.initData()
+      this.scrollToTop()
     }
   },
   created() {
     window.addEventListener('resize', this.handleResize)
   },
   mounted() {
-    this.showTabs()
     this.handleResize()
-    if (this.outside) {
-      this.getData()
-    }
+    this.initData()
   },
   methods: {
     scrollToTop(){
@@ -83,41 +72,36 @@ export default {
       })
       
     },
-    showTabs(){
-      if(!this.haveTranslatedText(this.patent,'publicFullText') || this.outside){
-        this.tabs = [
-          {
-            label:'原文',
-            name:'0',
-            field:'manual',
-            icon:'el-icon-refresh',
-            value:'2'
-          },
-        ]
-      }else{
-        this.tabs = [
-          {
-            label:'原文',
-            name:'0',
-            field:'manual',
-            icon:'el-icon-refresh',
-            value:'2'
-          },
-          {
-            label:'译文',
-            name:'1',
-            field:'manualOut'
-          },
-        ]
+    initData(){
+      if (this.outside) {
+        this.getData()
+        return
       }
+      if(!this.patent.pdfTranslate){
+            var params = {
+              patentNo:this.patent.patentNo,
+              patentField:this.patentField
+            }
+            this.loading = true
+            this.$api.getTranslate(params).then(res=>{
+              if(res.code == 200){
+                this.loading = false
+                this.getDataSign = true
+                var data = res.data
+                this.$set(this.patent, "pdfTranslate", { 
+                  data :data
+                });
+              }
+            }).catch(error=>{
+              this.loading = false
+            })
+          }
     },
-    handleClick() {
-      this.tabItem = this.tabs.find(item => {
-        return item.name == this.name
-      })
-    },
-    getData() {
-      if(this.patent.publicFullText && this.patent.publicFullText.length>0){
+    getData(sign) {
+      if(sign){
+        this.patent.pdfTranslate = null
+      }
+      if(this.patent.pdfTranslate){
         return false
       }
       var params = {
@@ -128,7 +112,17 @@ export default {
       this.loading = true
       this.$api.getCnFullText(params).then(response => {
         if (response.code == 200) {
-          this.$set(this.patent, 'publicFullText', response.data)
+          // this.$set(this.patent, 'publicFullText', response.data)
+          var data = []
+              response.data.forEach(item=>{
+                var obj = {
+                  originalContent:item.text_content.replace(/(\r\n)+/g,'<br/>').replace(/(\t)+/g,'<br/>')
+                }    
+                data.push(obj)
+              })
+              this.$set(this.patent, "pdfTranslate", {
+                data:data
+              });
           this.loading = false
         }
       }).catch(error=>{
@@ -156,4 +150,21 @@ export default {
     word-break: break-all;
   }
 }
+.highlightText{
+  background: #c7ebaa !important;
+}
+</style>
+<style lang="scss" scoped>
+
+.claim{
+  display: flex;
+  &>div{
+    width: 100%;
+    // overflow: auto;
+    padding: 0 5px;
+  }
+  
+}
+
+
 </style>

src/views/project/patentDetails/components/patentMessage/PatentInstruction1.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="patent-instruction height_100" @mouseup="mouseup">
+    <el-container>
+      <el-header class="basic_header">
+        <el-tabs v-model="name" @tab-click="handleClick" style="width:100%">
+          <el-tab-pane v-for="item in tabs" :key="item.label" :label="item.label" :name="item.name">
+            <span slot="label">
+              <span>{{ item.label }}</span>
+              <span v-if="item.icon && !outside" class="margin-left_10">
+                <i :class="item.icon" @click.stop="exportData(item.value)"></i>
+              </span>
+            </span>
+          </el-tab-pane>
+        </el-tabs>
+      </el-header>
+      <el-main>
+        <div v-html="getViewDom(patent.publicFullText, '说明书文本' + tabItem.label, tabItem.field)" :style="setStyle()"
+          :data-type="'说明书文本' + tabItem.label"></div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import { patentDetails } from './mixins';
+export default {
+  mixins: [patentDetails],
+  data() {
+    return {
+      height: null,
+      fullHeight: document.documentElement.clientHeight,
+      tabs: [
+        {
+          label: '原文',
+          name: '0',
+          field: 'manual'
+        },
+        {
+          label: '译文',
+          name: '1',
+          field: 'manualOut'
+        },
+      ],
+      tabItem: {
+        label: '原文',
+        name: '0',
+        field: 'manual'
+      },
+    }
+  },
+  watch: {
+    // fullHeight() {
+    //   this.refresh()
+    // },
+    patentNo() {
+      this.showTabs()
+      if (this.outside) {
+        this.getData()
+      }
+    }
+  },
+  created() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  mounted() {
+    this.showTabs()
+    this.handleResize()
+    if (this.outside) {
+      this.getData()
+    }
+  },
+  methods: {
+    showTabs(){
+      if(!this.haveTranslatedText(this.patent,'publicFullText') || this.outside){
+        this.tabs = [
+          {
+            label:'原文',
+            name:'0',
+            field:'manual',
+            icon:'el-icon-refresh',
+            value:'2'
+          },
+        ]
+      }else{
+        this.tabs = [
+          {
+            label:'原文',
+            name:'0',
+            field:'manual',
+            icon:'el-icon-refresh',
+            value:'2'
+          },
+          {
+            label:'译文',
+            name:'1',
+            field:'manualOut'
+          },
+        ]
+      }
+    },
+    handleClick() {
+      this.tabItem = this.tabs.find(item => {
+        return item.name == this.name
+      })
+    },
+    getData() {
+      if(this.patent.publicFullText && this.patent.publicFullText.length>0){
+        return false
+      }
+      var params = {
+        patentCell: 2,
+        patentNo: this.patent.publicNo,
+        appNo: this.patent.rowApplicationNo,
+      }
+      this.loading = true
+      this.$api.getCnFullText(params).then(response => {
+        if (response.code == 200) {
+          this.$set(this.patent, 'publicFullText', response.data)
+          this.loading = false
+        }
+      }).catch(error=>{
+        this.loading = false
+      })
+    },
+    handleResize(event) {
+      this.fullHeight = document.documentElement.clientHeight
+      this.height = this.fullHeight - 300
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.patent-instruction {
+  margin-bottom: 20px;
+
+  .common {
+    overflow-y: auto;
+    white-space: pre-line;
+    font-size: 14px;
+    margin-top: 0;
+    padding-right: 5px;
+    word-break: break-all;
+  }
+}
+</style>

src/views/project/patentDetails/components/patentMessage/PatentRight.vue

@@ -2,7 +2,7 @@
   <div class="patent-articles-patent-right height_100" @mouseup="mouseup">
     <el-container>
       <el-header class="basic_header">
-        <el-tabs v-model="name" @tab-click="handleClick" style="width:100%">
+        <el-tabs v-model="name" @tab-click="handleClick"  style="width:100%;">
           <el-tab-pane v-for="item in tabs" :key="item.label" :label="item.label"  :name="item.name">
             <span slot="label">
               <span>{{ item.label }}</span>
@@ -12,9 +12,24 @@
             </span>
           </el-tab-pane>
         </el-tabs>
+        <div v-if="!outside">
+          <el-checkbox v-model="checkedRightTree" @change="changeShowRightTree">权要树</el-checkbox>
+        </div>
       </el-header>
-      <el-main ref="content">
-        <div class="height_100" v-loading="loading" v-if="name != 2" v-html="getViewDom(patent.claim, '权利要求'+tabItem.label, 'column')" :style="setStyle()" :data-type="'权利要求'+tabItem.label"></div>
+      <el-main style="overflow: auto;" ref="content">
+        <div class="height_100" v-loading="loading" v-if="!checkedRightTree"  :style="setStyle()" >
+          <template v-if="name != 2">
+            <div  class="height_100" v-html="getContentOrContentOut(this.patent.claimTranslate, tabItem.field)" :data-type="name == 2?'权利要求原文':'权利要求'+tabItem.label" ></div>
+          </template>
+          <template v-else>
+            <div class="height_100 claim">
+              <div v-equal_heights="'yiwen'" class="height_100" v-html="getContentOrContentOut(this.patent.claimTranslate,  tabItem.field)" :data-type="name == 2?'权利要求原文':'权利要求'+tabItem.label" ref="yuanwen"></div>
+              <div class="height_100" v-html="getContentOrContentOut(this.patent.claimTranslate,  'contentOut')" :data-type="'权利要求译文'" ref="yiwen"></div> 
+            </div>
+            
+          </template>
+          
+        </div>
         
         <div v-else class="height_100">
           <my-view>
@@ -22,7 +37,15 @@
               <myTree :list="patent.patentRightTree" style="height: 100%" :props="{
                 name:'content',
                 children:'children'
-              }" nodeKey="sort" :expends="expends"></myTree>
+              }" nodeKey="sort" :expends="expends">
+                <template v-slot:default="data">
+                  <div v-if="tabItem.name == 0 || tabItem.name == 2">{{ data.data.content }}</div>
+                  <div v-if="tabItem.name == 1">{{ data.data.translateContent }}</div>
+                  <div v-if="tabItem.name == 2" style="background:#f3f4f8;user-select:none;">
+                    {{ data.data.translateContent }}
+                  </div>
+                </template>
+              </myTree>
             </div>
             <div slot="right" style="position: relative;">
               <div id="charts" style="max-width: 100%; min-width: 300px;position:relative;padding-top: 10px;"  v-if="show">
@@ -41,9 +64,10 @@
 
 <script>
 import { patentDetails } from './mixins';
+import {translate} from './mixins/translate'
 import html2canvas from "html2canvas"
 export default {
-  mixins: [patentDetails],
+  mixins: [patentDetails,translate],
   data() {
     return {
       expends: [],
@@ -51,33 +75,10 @@ export default {
       isClickId: "",
       height: null,
       fullHeight: document.documentElement.clientHeight,
-      records: {
-        original: [],
-        translation: [],
-      },
       scrollTop:0,
       isClick:false,
-      tabs:[
-        {
-          label:'原文',
-          name:'0',
-          field:'content'
-        },
-        {
-          label:'译文',
-          name:'1',
-          field:'contentOut'
-        },
-        {
-          label:'权要树',
-          name:'2',
-          field:'contentOut'
-        },
-      ],
-      tabItem:{
-          label:'原文',
-          name:'0',
-        },
+      checkedRightTree:false,
+      patentField:3
     };
   },
   watch: {
@@ -87,7 +88,7 @@ export default {
     patentNo() {
         this.showTabs()
         this.initData();
-        if(this.name == 2){
+        if(this.checkedRightTree){
           this.show = false
           this.expends = []
           this.isClickId  = ''
@@ -98,7 +99,7 @@ export default {
         this.scrollToTop()
     },
     name(){
-      if(this.name!=2){
+      if(!this.checkedRightTree){
         this.show = false
       }
     },
@@ -107,7 +108,6 @@ export default {
     window.addEventListener("resize", this.handleResize);
   },
   mounted() {
-    this.showTabs()
     this.handleResize();
     this.initData();
   },
@@ -122,50 +122,13 @@ export default {
       })
       
     },
-    showTabs(){
-      if(!this.haveTranslatedText(this.patent,'claim') || this.outside){
-        this.tabs = [
-          {
-            label:'原文',
-            name:'0',
-            field:'content',
-            icon:'el-icon-refresh',
-            value:'3'
-          },
-          {
-            label:'权要树',
-            name:'2',
-            field:'contentOut'
-          },
-        ]
-      }else{
-        this.tabs = [
-          {
-            label:'原文',
-            name:'0',
-            field:'content',
-            icon:'el-icon-refresh',
-            value:'3'
-          },
-          {
-            label:'译文',
-            name:'1',
-            field:'contentOut'
-          },
-          {
-            label:'权要树',
-            name:'2',
-            field:'contentOut'
-          },
-        ]
-      }
-    },
-    handleClick(tab, event) {
-      this.tabItem  = this.tabs.find(item=>{
-        return item.name == this.name
-      })
+    changeShowRightTree(){
       this.show = true
-      if (this.name == 2 && !this.patent.patentRightTree) {
+      if(!this.checkedRightTree){
+        this.handleClick()
+        return
+      }
+      if (this.checkedRightTree && !this.patent.patentRightTree) {
         let params = {
           patentNo: this.patent.patentNo,
           appNo: this.patent.rowApplicationNo,
@@ -181,7 +144,7 @@ export default {
              
             }
           });
-      } else if(this.name == 2 && this.patent.patentRightTree) {
+      } else if(this.checkedRightTree && this.patent.patentRightTree) {
         this.$nextTick(()=>{
           this.getEchart();
         })
@@ -383,7 +346,13 @@ export default {
         }, 66);
         return true;
     },
-    initData() {
+    initData(sign=false) {
+      if(sign){
+        this.patent.claimTranslate = null
+      }
+        if(this.patent.claimTranslate){
+          return false
+        }
         if (this.outside) {
           var params = {
             // patentCell: 1,
@@ -395,14 +364,46 @@ export default {
           this.loading = true
           this.$api.queryExternalClaim(params).then((response) => {
             if (response.code == 200) {
-              this.$set(this.patent, "claim", response.data.claimContent);
+              var data = []
+              response.data.claimContent.forEach(item=>{
+                var obj = {
+                  originalContent:item.text_content.replace(/(\r\n)+/g,'<br/>').replace(/(\t)+/g,'<br/>')
+                }    
+                data.push(obj)
+              })
+              this.$set(this.patent, "claimTranslate", {
+                data:data
+              });
+              // this.$set(this.patent, "claim", response.data.claimContent);
               this.loading = false
             }
           }).catch(error=>{
             this.loading = false
           })
+        }else{
+          if(!this.patent.claimTranslate){
+            var params = {
+              patentNo:this.patent.patentNo,
+              patentField:this.patentField
+            }
+            this.loading = true
+            this.$api.getTranslate(params).then(res=>{
+              if(res.code == 200){
+                this.loading = false
+                this.getDataSign = true
+                var data = res.data
+                this.$set(this.patent, "claimTranslate", { 
+                  data :data
+                });
+              }
+            }).catch(error=>{
+              this.loading = false
+            })
+          }
+          
         }
     },
+    
     handleResize(event) {
       this.fullHeight = document.documentElement.clientHeight;
       this.height = this.fullHeight - 350;
@@ -427,8 +428,21 @@ export default {
     margin-top: 0;
   }
 }
+.highlightText{
+  background: #c7ebaa !important;
+}
 </style>
 <style lang="scss" scoped>
 
+.claim{
+  display: flex;
+  &>div{
+    width: 100%;
+    // overflow: auto;
+    padding: 0 5px;
+  }
+  
+}
+
 
 </style>

src/views/project/patentDetails/components/patentMessage/mixins/index.js

@@ -75,7 +75,11 @@ export const patentDetails = {
             // this.loading = false
             if(value == 5){
               this.refreshData()
-            }else{
+            }
+            else if(value == 2 || value == 3){
+              this.initData(true)
+            }
+            else{
               this.getPatent(value)
             }
             

src/views/project/patentDetails/components/patentMessage/mixins/translate.js

@@ -0,0 +1,234 @@
+export const translate = {
+    data() {
+        return {
+            tabs:[
+                {
+                  label:'原文',
+                  name:'0',
+                  field:'content'
+                },
+                {
+                  label:'译文',
+                  name:'1',
+                  field:'contentOut'
+                },
+                {
+                  label:'双语',
+                  name:'2',
+                  field:'content'
+                },
+            ],
+            tabItem:{
+                label:'原文',
+                name:'0',
+                field:'content'
+            },
+            getDataSign:true
+        }
+    },
+    mounted() {
+        this.showTabs()
+    },
+    methods: {
+        showTabs(){
+            if(this.outside || this.patent.appCountry == 'CN'){
+              this.tabs = [
+                {
+                  label:'原文',
+                  name:'0',
+                  field:'content',
+                  icon:'el-icon-refresh',
+                  value:'3'
+                },
+              ]
+              this.$set(this,'name','0')
+              this.tabItem={
+                label:'原文',
+                name:'0',
+                field:'content'
+                }
+            }
+            else{
+              this.tabs = [
+                {
+                  label:'原文',
+                  name:'0',
+                  field:'content',
+                  icon:'el-icon-refresh',
+                  value:'3'
+                },
+                {
+                  label:'译文',
+                  name:'1',
+                  field:'contentOut'
+                },
+                {
+                  label:'双语',
+                  name:'2',
+                  field:'content'
+                },
+              ]
+            }
+          },
+        to(scrollTop,ref='yiwen',activeIndex){
+            var dom2 = this.$refs[ref]
+            dom2.scrollTo(
+              {
+                behavior: "smooth",
+                top:scrollTop
+              }
+            )
+            //方案三
+            // dom2.children[activeIndex].scrollIntoView(
+            //   {
+            //     behavior: "smooth",
+            //     block:'center'
+            //     // block:'nearest'
+            //   }
+            // )
+            if(activeIndex || activeIndex == 0){
+              this.heightLight(activeIndex)
+            }
+             
+          },
+          heightLight(activeIndex){
+            var dom2 = this.$refs.yiwen
+            var dom1 = this.$refs.yuanwen
+            for (let i = 0; i < dom1.children.length; i++) {  
+                if (i == activeIndex) {  
+                  dom1.children[i].classList.add('highlightText');  
+                  dom2.children[i].classList.add('highlightText');  
+                } else {  
+                  // 清除之前的高亮  
+                  dom1.children[i].classList.remove('highlightText');  
+                  dom2.children[i].classList.remove('highlightText');  
+                }  
+              }
+              
+          },
+          clickDom(e,ref){
+            var index = e.target.dataset.index
+            // var ref1 = 'yiwen'
+            // if(ref=='yiwen'){
+            //   ref1 = 'yuanwen'
+            // }
+            // var scrollTop = this.$refs[ref].scrollTop
+            // this.to(scrollTop,ref1,index) 
+            this.heightLight(index)
+          },
+          handleClick(tab, event) {
+            this.tabItem  = this.tabs.find(item=>{
+              return item.name == this.name
+            })
+            
+            if(this.name == 2 ){
+                if((this.patentField == 3 && !this.checkedRightTree) || this.patentField == 4){
+                    this.$nextTick(()=>{
+                        var dom1 = this.$refs.yuanwen
+                        var dom2 = this.$refs.yiwen
+                        dom1.addEventListener('click',(e)=>this.clickDom(e,'yuanwen'))
+                        dom2.addEventListener('click',(e)=>this.clickDom(e,'yiwen'))
+                    })
+                }
+            }else{
+              var dom1 = this.$refs.yuanwen
+              var dom2 = this.$refs.yiwen
+              if(dom2){
+                dom2.removeEventListener('click',(e)=>this.clickDom(e,'yiwen'))
+              }
+              if(dom1){
+                dom1.removeEventListener('click',(e)=>this.clickDom(e,'yuanwen'))
+              }
+            }
+          },
+          //获取内容
+          getContentOrContentOut(data,field){
+            if(data){
+                if(data[field]){
+                    return this.getViewDom(data[field])
+                }else{
+                    if(field == 'content'){
+                        var {text,sign} = this.dataToDom(data.data,field)
+                        if(sign){
+                            this.$set(data,'content',text)
+                            return this.getViewDom(text)  
+                        }
+                        return text
+                    }
+                    if(field == 'contentOut'){
+                        var contentData = data.data
+                        if(contentData && contentData.length>0){
+                            // var obj = contentData[0]
+                            // if(obj.language && obj.language == 'CN'){
+                            //     return this.getContentOrContentOut(data,'content')
+                            // }
+                            var {text,sign} = this.dataToDom(data.data,field)
+                            if(sign){
+                                this.$set(data,'contentOut',text)
+                                return this.getViewDom(text)  
+                            }
+                            return text
+                        }
+                    }
+                }
+            }
+          },
+        //装载DOM
+        dataToDom(data,field){
+            var fieldKey = {
+                content:'originalContent',
+                contentOut:'translationContent'
+            }
+            field = fieldKey[field]
+            var content = ''
+            var sign = true
+            var noTranslateData = []
+            data.forEach((item,index)=>{
+                content += `<div id="${field}${item.order}" data-index=${index}>`
+                if(item[field]){
+                    content += item[field]
+                }else{
+                    content += '加载中...'
+                    noTranslateData.push(
+                        {
+                            order:item.order,
+                            index:index
+                        }
+                    )
+                    
+                }
+                content += '</div>'
+            })
+            if(noTranslateData.length>0){
+                sign = false
+                if(this.getDataSign){
+                    this.getDataSign = false
+                    noTranslateData.forEach(item=>{
+                        this.getTranslateOrder(item.order,item.index,data)
+                    })
+                }
+            }
+            return {text:content,sign:sign}
+        },
+        //获取译文
+        getTranslateOrder(order,index,data){
+            var params = {
+                patentNo:this.patent.patentNo,
+                patentField:this.patentField,
+                order:order
+            }
+            this.$api.getTranslateOrder(params).then(res=>{
+                if(res.code == 200){
+                    var translate = res.data
+                    var obj = {
+                        translationContent:'无译文'
+                    }
+                    if(translate.length>0){
+                        var obj = translate[0]
+                    }
+                    this.$set(data[index],'translationContent',obj.translationContent)
+                }
+            })
+        },
+    },
+}