1

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

@@ -16,10 +16,16 @@
           <el-checkbox v-model="checkedRightTree" @change="changeShowRightTree">权要树</el-checkbox>
         </div>
       </el-header>
-      <el-main style="overflow: hidden;">
+      <el-main style="overflow: auto;">
         <div class="height_100 claim" v-loading="loading" v-if="!checkedRightTree"  :style="setStyle()" >
-          <div class="height_100" v-html="getViewDom(this[tabItem.field], '权利要求'+tabItem.label, 'column')" :data-type="name == 2?'权利要求原文':'权利要求'+tabItem.label" ref="yuanwen"></div>
-          <div class="height_100" v-if="name == 2" v-html="getViewDom(contentOut, '权利要求译文', 'column')" :data-type="'权利要求译文'" ref="yiwen"></div>
+          <template v-if="name != 2">
+            <div  class="height_100" v-html="getViewDom(this[tabItem.field], '权利要求'+tabItem.label, 'column')" :data-type="name == 2?'权利要求原文':'权利要求'+tabItem.label" ></div>
+          </template>
+          <template v-else>
+            <div v-equal_heights="'yiwen'" class="height_100" v-html="getViewDom(this[tabItem.field], '权利要求'+tabItem.label, 'column')" :data-type="name == 2?'权利要求原文':'权利要求'+tabItem.label" ref="yuanwen"></div>
+            <div class="height_100" v-html="getViewDom(contentOut, '权利要求译文', 'column')" :data-type="'权利要求译文'" ref="yiwen"></div>
+          </template>
+          
         </div>
         
         <div v-else class="height_100">
@@ -57,6 +63,37 @@ import { patentDetails } from './mixins';
 import html2canvas from "html2canvas"
 export default {
   mixins: [patentDetails],
+  directives: {  
+    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;  
+          }  
+    
+          // 遍历当前容器和另一个容器的子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) {  
+        // 这里可能需要额外的逻辑来处理更新后的高度同步  
+      },  
+    },  
+  }, 
   data() {
     return {
       expends: [],
@@ -174,40 +211,52 @@ export default {
         },500)
         return
       }
-      
       var dom1 = this.$refs[ref]
       var scrollTop = dom1.scrollTop
-      var sectionTop = 0
-      for (let i = 0; i < dom1.children.length; i++) {  
-        sectionTop = dom1.children[i].offsetTop-dom1.offsetTop; 
-        if (scrollTop+(dom1.offsetHeight / 2) >= sectionTop) {  
-          this.activeIndex = i; 
-          var dom = 'yuanwen'
-          if(ref == 'yuanwen'){
-            dom = 'yiwen'
-          }
-          this.to(this.activeIndex,dom)
-        } else {  
-          break;  
-        }  
-      } 
+      var dom = 'yuanwen'
+      if(ref == 'yuanwen'){
+        dom = 'yiwen'
+      }
+      this.to(scrollTop,dom)
+      // var sectionTop = 0
+      // for (let i = 0; i < dom1.children.length; i++) {  
+      //   sectionTop = dom1.children[i].offsetTop-dom1.offsetTop; 
+      //   if (scrollTop+(dom1.offsetHeight / 2) >= sectionTop) {  
+      //     this.activeIndex = i; 
+      //     var dom = 'yuanwen'
+      //     if(ref == 'yuanwen'){
+      //       dom = 'yiwen'
+      //     }
+      //     this.to(this.activeIndex,dom)
+      //   } else {  
+      //     break;  
+      //   }  
+      // } 
       // this.activeIndex = activeIndex
       // this.scrollTop = scrollTop
       // console.log(activeIndex,sectionTop) 
       
     },
-    to(activeIndex,ref='yiwen'){
+    to(scrollTop,ref='yiwen',activeIndex){
       var dom2 = this.$refs[ref]
-      //方案三
-      dom2.children[activeIndex].scrollIntoView(
+      dom2.scrollTo(
         {
           behavior: "smooth",
-          block:'center'
-          // block:'nearest'
+          top:scrollTop
         }
       )
-      
-       this.heightLight(activeIndex)
+      //方案三
+      // dom2.children[activeIndex].scrollIntoView(
+      //   {
+      //     behavior: "smooth",
+      //     block:'center'
+      //     // block:'nearest'
+      //   }
+      // )
+      if(activeIndex || activeIndex == 0){
+        this.heightLight(activeIndex)
+      }
+       
     },
     heightLight(activeIndex){
       var dom2 = this.$refs.yiwen
@@ -239,16 +288,17 @@ export default {
       return numbers;  
     } , 
 
-    clickDom(e){
+    clickDom(e,ref){
       this.isClick = true
       var dom = e.target.id
       var arr = this.extractNumbers(dom)
-      var ref = 'yiwen'
-      if(dom.indexOf('claimContentOut')!=-1){
-        ref = 'yuanwen'
+      var ref1 = 'yiwen'
+      if(ref=='yiwen'){
+        ref1 = 'yuanwen'
       }
       if(arr && arr.length>0){
-        this.to(arr[0],ref) 
+        var scrollTop = this.$refs[ref].scrollTop
+        this.to(scrollTop,ref1,arr[0]) 
       }
       // var refDom = this.$refs.yuanwen
       // var activeIndex = 0
@@ -264,30 +314,30 @@ export default {
       this.tabItem  = this.tabs.find(item=>{
         return item.name == this.name
       })
-      if(this.name == 2 && !this.checkedRightTree){
-        this.$nextTick(()=>{
-          var dom1 = this.$refs.yuanwen
-          var dom2 = this.$refs.yiwen
-          dom1.addEventListener('scroll',this.scrollDom)
-          dom1.addEventListener('click',this.clickDom)
-          dom2.addEventListener('click',this.clickDom)
-          // dom2.addEventListener('scroll',(e)=>{
-          //   this.scrollDom(e,'yiwen')
-          // })
-        })
+      // if(this.name == 2 && !this.checkedRightTree){
+      //   this.$nextTick(()=>{
+      //     var dom1 = this.$refs.yuanwen
+      //     var dom2 = this.$refs.yiwen
+      //     dom1.addEventListener('scroll',(e)=>this.scrollDom(e,'yuanwen'))
+      //     dom1.addEventListener('click',(e)=>this.clickDom(e,'yuanwen'))
+      //     dom2.addEventListener('click',(e)=>this.clickDom(e,'yiwen'))
+      //     // dom2.addEventListener('scroll',(e)=>{
+      //     //   this.scrollDom(e,'yiwen')
+      //     // })
+      //   })
         
-      }else{
-        var dom1 = this.$refs.yuanwen
-        var dom2 = this.$refs.yiwen
-        if(dom2){
-          dom2.removeEventListener('click',this.clickDom)
-          // dom2.removeEventListener('scroll',this.scrollDom)
-        }
-        if(dom1){
-          dom1.removeEventListener('scroll',this.scrollDom)
-          dom1.removeEventListener('click',this.clickDom)
-        }
-      }
+      // }else{
+      //   var dom1 = this.$refs.yuanwen
+      //   var dom2 = this.$refs.yiwen
+      //   if(dom2){
+      //     dom2.removeEventListener('click',(e)=>this.clickDom(e,'yiwen'))
+      //     // dom2.removeEventListener('scroll',this.scrollDom)
+      //   }
+      //   if(dom1){
+      //     dom1.removeEventListener('scroll',(e)=>this.scrollDom(e,'yuanwen'))
+      //     dom1.removeEventListener('click',(e)=>this.clickDom(e,'yuanwen'))
+      //   }
+      // }
       
     },
     changeShowRightTree(){
@@ -739,7 +789,7 @@ export default {
   display: flex;
   &>div{
     width: 100%;
-    overflow: auto;
+    // overflow: auto;
     padding: 0 5px;
   }
 }