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

<template>
  <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-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>
        <div>
          <el-checkbox v-model="checkedRightTree" @change="changeShowRightTree">权要树</el-checkbox>
        </div>
      </el-header>
      <el-main style="overflow: hidden;">
        <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>
        </div>
        
        <div v-else class="height_100">
          <my-view>
            <div slot="left">
              <myTree :list="patent.patentRightTree" style="height: 100%" :props="{
                name:'content',
                children:'children'
              }" nodeKey="sort" :expends="expends">
                <template v-slot:default="data">
                  <div>{{ data.data[tabItem.field] }}</div>
                  <div v-if="tabItem.name == 2" style="background:#f3f4f8;">
                    {{ data.data.contentOut }}
                  </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">
                <div v-for="(item,index) in this.patent.patentRightTree" :key="index" :id="'chart'+index" style="width:500px;margin:0 auto;"></div>
              </div>
              <div style="position:absolute;top:10px;right:20px;">
                <el-link type="primary" @click="imageDownLoad">下载为图片</el-link>
              </div>
            </div>
          </my-view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { patentDetails } from './mixins';
import html2canvas from "html2canvas"
export default {
  mixins: [patentDetails],
  data() {
    return {
      expends: [],
      show:false,
      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:'content'
        },
      ],
      tabItem:{
          label:'原文',
          name:'0',
          field:'content'
        },
        checkedRightTree:false,
        rightData:[],
        content:'',
        contentOut:'',
        activeIndex:0,
        isClick:false
    };
  },
  watch: {
    // fullHeight() {
    //   this.refresh();
    // },
    patentNo() {
        this.showTabs()
        this.initData();
        if(this.checkedRightTree){
          this.show = false
          this.expends = []
          this.isClickId  = ''
          this.$nextTick(()=>{
            this.handleClick()
          })
        }
    },
    name(){
      if(!this.checkedRightTree){
        this.show = false
      }
    },
    // activeIndex(){
    //   this.to(this.activeIndex,this.scrollTop)
    // }
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  mounted() {
    this.showTabs()
    this.handleResize();
    this.initData();
  },
  methods: {
    showTabs(){
      if(!this.haveTranslatedText(this.patent,'claim') || this.outside){
        this.tabs = [
          {
            label:'原文',
            name:'0',
            field:'content',
            icon:'el-icon-refresh',
            value:'3'
          },
        ]
      }else{
        this.tabs = [
          {
            label:'原文',
            name:'0',
            field:'content',
            icon:'el-icon-refresh',
            value:'3'
          },
          {
            label:'译文',
            name:'1',
            field:'contentOut'
          },
          {
            label:'双语',
            name:'2',
            field:'content'
          },
        ]
      }
    },
    scrollDom(e,ref='yuanwen'){
      if(this.isClick){
        setTimeout(()=>{
          this.isClick = false
        },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;  
        }  
      } 
      // this.activeIndex = activeIndex
      // this.scrollTop = scrollTop
      // console.log(activeIndex,sectionTop) 
      
    },
    to(activeIndex,ref='yiwen'){
      var dom2 = this.$refs[ref]
      //方案三
      dom2.children[activeIndex].scrollIntoView(
        {
          behavior: "smooth",
          block:'center'
          // block:'nearest'
        }
      )
      
       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('highlight');  
            dom2.children[i].classList.add('highlight');  
          } else {  
            // 清除之前的高亮  
            dom1.children[i].classList.remove('highlight');  
            dom2.children[i].classList.remove('highlight');  
          }  
        }
        
    },
    extractNumbers(str) {  
      // 匹配一个或多个数字  
      const regex = /\d+/g;  
      let matches;  
      const numbers = [];  
    
      // 使用exec()方法迭代所有匹配项  
      while ((matches = regex.exec(str)) !== null) {  
          // matches[0]是完整的匹配项  
          numbers.push(Number(matches[0]));  
      }  
    
      return numbers;  
    } , 

    clickDom(e){
      this.isClick = true
      var dom = e.target.id
      var arr = this.extractNumbers(dom)
      var ref = 'yiwen'
      if(dom.indexOf('claimContentOut')!=-1){
        ref = 'yuanwen'
      }
      if(arr && arr.length>0){
        this.to(arr[0],ref) 
      }
      // var refDom = this.$refs.yuanwen
      // var activeIndex = 0
      // for (let i = 0; i < refDom.children.length; i++) {  
      //     if (refDom.children[i].id == dom) {  
      //       activeIndex = i
      //       break
      //     } 
      //   } 
      //   this.to(activeIndex) 
    },
    handleClick(tab, event) {
      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')
          // })
        })
        
      }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)
        }
      }
      
    },
    changeShowRightTree(){
      this.show = true
      if (this.checkedRightTree && !this.patent.patentRightTree) {
        var data = [
    {
        "sort": 0,
        "parentSorts": [
            -1
        ],
        "content": "1. Apparatus for supporting data storage elements and supplying stored data, said apparatus comprising: \r\na support unit having a plurality of connectors for connecting to a plurality of data storage elements; \r\na cable having a first end connected to said support unit and a second end connected to a main part; \r\na main part defining a first space containing a portion of said cable, and a second space for containing said support unit, such that said support unit is movable between (i) a first position providing access to said data storage elements and (ii) a second position in which said data storage elements are located within said second space; and \r\nguide means configured to cause said cable to develop at least two loops within said first space while said support unit is moved to said second position. \r\n",
        "contentOut":'1.一种用于支持数据存储元件和提供存储数据的装置,所述装置 包括: 支撑单元,具有用于连接多个数据存储元件的多个连接器; 电缆具有连接到所述支撑单元的第一端和连接到主要部分的第二端; 主要部分限定了包含所述电缆的一部分的第一空间和用于容纳所述支撑单元的第二空间,使得所述支撑单元能够在(i)提供对所述数据存储元件的访问的第一位置和(ii)之间移动 所述数据存储元件位于所述第二空间内的第二位置; 和 引导装置被配置为在所述支撑单元移动到所述第二位置时使所述电缆在所述第一空间内形成至少两个环',
        "children": [
            {
                "sort": 1,
                "parentSorts": [
                    0
                ],
                "content": "2. Apparatus according to claim 1, wherein said apparatus further comprises a plurality of data storage elements, each said data storage element being connected to one of said connectors. \r\n",
                "contentOut":'2.根据权利要求1所述的设备, 其中 所述设备还包括多个数据存储元件,每个所述数据存储元件连接到所述连接器之一。',
                "children": [
                    {
                        "sort": 3,
                        "parentSorts": [
                            1
                        ],
                        "content": "4. Apparatus according to claim 2 or claim 3, wherein said guide means comprises a retractable guide member configured to extend along a \r\nportion of said cable as said support unit is moved between said second position and said first position. \r\n",
                        "contentOut":'4.根据权利要求2或3所述的设备, 其中 所述引导装置包括可伸缩的引导构件,该引导构件构造成沿一 当所述支撑单元在所述第二位置和所述第一位置之间移动时,所述电缆的一部分。',
                        "children": [
                            {
                                "sort": 5,
                                "parentSorts": [
                                    3
                                ],
                                "content": "6. Apparatus according to claim 4 or claim 5, wherein said second space is defined by a box having a second floor, and said cable is arranged to extend between said second floor and a portion of said guide member when said guide member extends through said second space. \r\n",
                                "contentOut":'6.根据权利要求4或5所述的设备, 其中 所述第二空间由具有第二层的箱体限定,并且当所述引导构件延伸穿过所述第二空间时,所述电缆布置成在所述第二层和所述引导构件的一部分之间延伸。',
                                "children": []
                            },
                        
                        ]
                    }
                ]
            },
            {
                "sort": 2,
                "parentSorts": [
                    0
                ],
                "content": "3. Apparatus according to claim 1 or claim 2, wherein said first space is defined by a box having a floor, and said cable is arranged to extend between said floor and said guide means. \r\n",
                "contentOut":'3.根据权利要求1或2所述的设备, 其中 所述第一空间由具有地板的盒子限定,并且所述电缆布置成在所述地板和所述引导装置之间延伸。',
                "children": []
            }
        ]
    },
    {
        "sort": 4,
        "parentSorts": [
            -1
        ],
        "content": "5. Apparatus according to any of claims 2 to 4, wherein said guide means comprises a retractable guide member movable between a first configuration in which a portion of said guide member extends through said second space to a second configuration in which at least a part of said portion is retracted into said first space. \r\n",
        contentOut:'5.根据权利要求2至4中任一项所述的设备, 其中 所述引导装置包括可缩回的引导构件,所述引导构件可在所述引导构件的一部分延伸穿过所述第二空间的第一构造与所述部分的至少一部分缩回所述第一空间的第二构造之间移动。',
        "children": []
    },
    {
        "sort": 6,
        "parentSorts": [
            -1
        ],
        "content": "7. Apparatus according to any of claims 4 to 6, wherein one end of said guide member is retained within said second space. \r\n",
        contentOut:'7.根据权利要求4至6中任一项所述的设备, 其中 所述导向件的一端保持在所述第二空间内。',
        "children": []
    },
    {
        "sort": 7,
        "parentSorts": [
            -1
        ],
        "content": "8. Apparatus according to any of claims 4 to 7, wherein said guide member is configured to roll up while said support unit is moved between said first position and said second position. \r\n",
        contentOut:'8.根据权利要求4至7中任一项所述的设备, 其中 所述引导构件构造成在所述支撑单元在所述第一位置和所述第二位置之间移动时卷起。',
        "children": []
    },
    {
        "sort": 8,
        "parentSorts": [
            -1
        ],
        "content": "9. Apparatus according to any of claims 4 to 8, wherein said guide member is an elongate shape configured to bend easily in one direction and less easily in an opposite direction, so that said guide member bends in a first direction when rolling up, and resists bending in the opposite direction when guiding said cable. \r\n",
        contentOut:'9.根据权利要求4至8中任一项所述的设备, 其中 所述引导件为细长形状,被配置为在一个方向上容易弯曲而在相反方向上不易弯曲,使得所述引导件在卷起时沿第一方向弯曲,并且在引导所述电缆时抵抗相反方向上的弯曲。',
        "children": []
    },
    {
        "sort": 9,
        "parentSorts": [
            -1
        ],
        "content": "10. Apparatus according to any of claims 4 to 9, wherein said guide means comprises a spring, such that force generated by the spring urges said guide member to a retracted configuration. \r\n",
        contentOut:'10.根据权利要求4至9中任一项所述的设备, 其中 所述引导装置包括弹簧,使得由弹簧产生的力将所述引导构件推到缩回构造。',
        "children": []
    },
    {
        "sort": 10,
        "parentSorts": [
            -1
        ],
        "content": "11. Apparatus according to any of claims 4 to 10, wherein said guide member comprises a constant force spring, such that force generated by the constant force spring urges said guide member into a retracted configuration. \r\n",
        contentOut:'11.根据权利要求4至10中任一项所述的设备, 其中 所述引导构件包括恒力弹簧,使得由所述恒力弹簧产生的力将所述引导构件推入缩回配置。',
        "children": []
    },

 
]
      this.$set(this.patent, "patentRightTree", data);
              this.$nextTick(()=>{
                this.getEchart();
              })
        // let params = {
        //   patentNo: this.patent.patentNo,
        //   appNo: this.patent.rowApplicationNo,
        // }
        // this.$api
        //   .getPatentRightTree(params)
        //   .then((response) => {
        //     if (response.code == 200) {
        //       this.$set(this.patent, "patentRightTree", response.data.data);
        //       this.$nextTick(()=>{
        //         this.getEchart();
        //       })
             
        //     }
        //   });
      } else if(this.checkedRightTree && this.patent.patentRightTree) {
        this.$nextTick(()=>{
          this.getEchart();
        })
      }
    },
    imageDownLoad(){
      var dom = document.getElementById('charts')
      html2canvas(dom).then(canvas => {
        // 转成图片，生成图片地址
         var imgUrl = canvas.toDataURL("image/png");
         var blob = this.base64ToBlob(imgUrl)
         var eleLink = document.createElement("a");
          eleLink.href = URL.createObjectURL(blob); // 转换后的图片地址
          eleLink.download = "权要树";
          document.body.appendChild(eleLink);
          // 触发点击
          eleLink.click();
          // 然后移除
          document.body.removeChild(eleLink);
        
        // const link = document.createElement('a')
        // let url = URL.createObjectURL(blob)
        // link.href = url
        // link.download = item.url.substring(0,item.url.indexOf('?'))
        // link.click()
    });
    },
    base64ToBlob(data){
      var dataUrl = data.replace('data:image/png;base64,','')
      let bstr = window.atob(dataUrl)
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: "image/png" });
    },
    getData(data) {
      data.forEach((item) => {
        item.name = Number(item.sort) + 1;
        if (item.children && item.children.length > 0) {
          this.getData(item.children);
        }
      });
    },
    getEchart() {
      var data = JSON.parse(JSON.stringify(this.patent.patentRightTree));
      this.getData(data);
      var that = this
      data.forEach((item,index) => {
        var option = {
        // height: "100%",
        backgroundColor: "#fbfbfb",
        series: [
          {
          itemStyle: {
            normal: {
              color: "#06c",
              borderColor: "#06c",
            },
            emphasis: {
              borderColor: "#06c",
              color: "#06c",
            },
          },
          lineStyle: {
            color: "#2979ff",
          },
          type: "tree",
          data: [item],
          // top: "1%",
          left: "100px",
          // bottom: "1%",
          right: "100px",
          symbolSize: 0,
          symbol: "emptyCircle",
          label: {
            position: "left",
            verticalAlign: "middle",
            align: "right",
            color: "#293c55",
            margin: [2, 4],
            borderWidth: 1,
            borderColor: "#aaa",
            backgroundColor: "white",
            borderRadius: 2,
            padding: [5, 4],
            rich: {
              keywords: {
                color: "red",
                fontSize: "12",
              },
              index: {
                fontSize: 12,
                color: "#2979ff",
                position: "10%",
              },
            },
            formatter: function(data, data1) {
              // rgb(178, 215, 255)
              if(data.data.sort+'' == that.isClickId){
                data.data.label = {
                  fontSize: 12,
                  padding: [5, 4],
                  backgroundColor: 'rgb(178, 215, 255)',
                  borderColor: '#aaa',
                  color: '#293c55',
                }
              // }else{
                // data.data.label = {
                //   fontSize: 12,
                //   padding: [5, 4],
                //   backgroundColor: 'white',
                //   borderColor: '#aaa',
                //   color: '#293c55',
                // }
              }
            },
          },
          leaves: {
            label: {
              position: "right",
              verticalAlign: "middle",
              align: "left",
            },
          },

          expandAndCollapse: false,
          animationDuration: 550,
          animationDurationUpdate: 750,
        }
        ],
      };
      this.sendingChart(option,index);
      });
      
    },
    sendingChart(option,index) {
      var myChart = this.$echarts.init(document.getElementById("chart"+index));
      myChart.clear();
      var option = option;
      option && myChart.setOption(option);
      myChart.on("click", (param) => {
        this.showRightPosition(param.data.sort);
        var dom = document.getElementById("chart")
        if(!this.isClick){
          this.scrollTop = dom.scrollTop
        }
        this.isClick = true
       this.show = false
        this.$nextTick(()=>{
          this.show = true
          this.$nextTick(()=>{
            this.getEchart()
            this.isClick = false
            document.getElementById("chart").scrollTop = this.scrollTop
          })
          
        })
      });
      const eleArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls))
        const itemHeight = 50
        const currentHeight = itemHeight * (eleArr.length-1) || itemHeight
        const newHeight = Math.max(currentHeight,itemHeight)
        myChart.resize({
          height:newHeight+50
        })

    },
    showRightPosition(id) {
      var index = this.expends.indexOf(id);
      if (index == -1) {
        this.expends.push(id);
      }else{
        this.expends.splice(1,index)
        this.expends.push(id);
      }
      if (this.isClickId + "") {
        var dom1 = document.getElementById("right" + this.isClickId);
        dom1.style.background = "";
      }
      this.isClickId = id;
      var dom = document.getElementById("right" + id);
      dom.style.background = "rgb(178, 215, 255)";
      this.$nextTick(()=>{
        this.tiaozhuan(id)
      })
      
    },
    tiaozhuan(id) {
      const href = `#right${id}`
      const anchor = document.createElement('a');
        anchor.href = href;
        anchor.style.display = "none";
        document.body.appendChild(anchor);
        setTimeout(function () {
          anchor.click();
          document.body.removeChild(anchor);
        }, 66);
        return true;
    },
    initData() {
        if (this.outside) {
          var params = {
            // patentCell: 1,
            appNo: this.patent.rowApplicationNo,
            // pageNum: 1,
            // pageSize:10,
            // appNo: this.patent.applicationNo,
          };
          this.loading = true
          this.$api.queryExternalClaim(params).then((response) => {
            if (response.code == 200) {
              this.$set(this.patent, "claim", response.data.claimContent);
              this.loading = false
            }
          }).catch(error=>{
            this.loading = false
          })
        }else{
          this.rightData = [
            {
              content:'1. Apparatus for supporting data storage elements and supplying stored data, said apparatus comprising: a support unit having a plurality of connectors for connecting to a plurality of data storage elements; a cable having a first end connected to said support unit and a second end connected to a main part; a main part defining a first space containing a portion of said cable, and a second space for containing said support unit, such that said support unit is movable between (i) a first position providing access to said data storage elements and (ii) a second position in which said data storage elements are located within said second space; and guide means configured to cause said cable to develop at least two loops within said first space while said support unit is moved to said second position.',
              contentOut:'1.一种用于支持数据存储元件和提供存储数据的装置,所述装置 包括: 支撑单元,具有用于连接多个数据存储元件的多个连接器; 电缆具有连接到所述支撑单元的第一端和连接到主要部分的第二端; 主要部分限定了包含所述电缆的一部分的第一空间和用于容纳所述支撑单元的第二空间,使得所述支撑单元能够在(i)提供对所述数据存储元件的访问的第一位置和(ii)之间移动 所述数据存储元件位于所述第二空间内的第二位置; 和 引导装置被配置为在所述支撑单元移动到所述第二位置时使所述电缆在所述第一空间内形成至少两个环。'
            },
            {
              content:'2. Apparatus according to claim 1, wherein said apparatus further comprises a plurality of data storage elements, each said data storage element being connected to one of said connectors.',
              contentOut:'2.根据权利要求1所述的设备, 其中 所述设备还包括多个数据存储元件,每个所述数据存储元件连接到所述连接器之一。'
            },
            {
              content:'3. Apparatus according to claim 1 or claim 2, wherein said first space is defined by a box having a floor, and said cable is arranged to extend between said floor and said guide means.',
              contentOut:'3.根据权利要求1或2所述的设备, 其中 所述第一空间由具有地板的盒子限定,并且所述电缆布置成在所述地板和所述引导装置之间延伸。'
            },
            {
              content:'4. Apparatus according to claim 2 or claim 3, wherein said guide means comprises a retractable guide member configured to extend along a portion of said cable as said support unit is moved between said second position and said first position.',
              contentOut:'4.根据权利要求2或3所述的设备, 其中 所述引导装置包括可伸缩的引导构件,该引导构件构造成沿一 当所述支撑单元在所述第二位置和所述第一位置之间移动时,所述电缆的一部分。'
            },
            {
              "content": "5. Apparatus according to any of claims 2 to 4, wherein said guide means comprises a retractable guide member movable between a first configuration in which a portion of said guide member extends through said second space to a second configuration in which at least a part of said portion is retracted into said first space. \r\n",
              contentOut:'5.根据权利要求2至4中任一项所述的设备, 其中 所述引导装置包括可缩回的引导构件,所述引导构件可在所述引导构件的一部分延伸穿过所述第二空间的第一构造与所述部分的至少一部分缩回所述第一空间的第二构造之间移动。',
            },
            {
              "content": "6. Apparatus according to claim 4 or claim 5, wherein said second space is defined by a box having a second floor, and said cable is arranged to extend between said second floor and a portion of said guide member when said guide member extends through said second space. \r\n",
              "contentOut":'6. 根据权利要求4或5所述的设备, 其中 所述第二空间由具有第二层的箱体限定,并且当所述引导构件延伸穿过所述第二空间时,所述电缆布置成在所述第二层和所述引导构件的一部分之间延伸。',
                                
            },
            {
              "content": "7. Apparatus according to any of claims 4 to 6, wherein one end of said guide member is retained within said second space. \r\n",
              contentOut:'7.根据权利要求4至6中任一项所述的设备, 其中 所述导向件的一端保持在所述第二空间内。',
            },
            {
              "content": "8. Apparatus according to any of claims 4 to 7, wherein said guide member is configured to roll up while said support unit is moved between said first position and said second position. \r\n",
              contentOut:'8.根据权利要求4至7中任一项所述的设备, 其中 所述引导构件构造成在所述支撑单元在所述第一位置和所述第二位置之间移动时卷起。',
            },
            {
              "content": "9. Apparatus according to any of claims 4 to 8, wherein said guide member is an elongate shape configured to bend easily in one direction and less easily in an opposite direction, so that said guide member bends in a first direction when rolling up, and resists bending in the opposite direction when guiding said cable. \r\n",
              contentOut:'9.根据权利要求4至8中任一项所述的设备, 其中 所述引导件为细长形状,被配置为在一个方向上容易弯曲而在相反方向上不易弯曲,使得所述引导件在卷起时沿第一方向弯曲,并且在引导所述电缆时抵抗相反方向上的弯曲。',
            },
            {
              "content": "10. Apparatus according to any of claims 4 to 9, wherein said guide means comprises a spring, such that force generated by the spring urges said guide member to a retracted configuration. \r\n",
              contentOut:'10.根据权利要求4至9中任一项所述的设备, 其中 所述引导装置包括弹簧,使得由弹簧产生的力将所述引导构件推到缩回构造。',
            },
            {
              "content": "11. Apparatus according to any of claims 4 to 10, wherein said guide member comprises a constant force spring, such that force generated by the constant force spring urges said guide member into a retracted configuration. \r\n",
              contentOut:'11.根据权利要求4至10中任一项所述的设备, 其中 所述引导构件包括恒力弹簧,使得由所述恒力弹簧产生的力将所述引导构件推入缩回配置。',
            }
          ]
          var content = ''
          var contentOut = ''
          this.rightData.forEach((item,index)=>{
            content += '<div id="claimContent'+ index +'" >'
            content += item.content
            content += '</div>'
            contentOut += '<div id="claimContentOut'+ index +'">'
            contentOut += item.contentOut
            contentOut += '</div>'
          })
          this.content = content
          this.contentOut = contentOut
        }
    },
    handleResize(event) {
      this.fullHeight = document.documentElement.clientHeight;
      this.height = this.fullHeight - 350;
    },
  },
};
</script>

<style lang="scss">
.patent-articles-patent-right {
  // margin-bottom: 20px;
  .common {
    // font-size: 14px;
    margin-top: 0;
    padding-right: 5px;
    word-break: break-all;
  }
  .title {
    font-weight: bold;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 5px;
    margin-top: 0;
  }
}
.highlight{
  background: #c7ebaa;
}
</style>
<style lang="scss" scoped>

.claim{
  display: flex;
  &>div{
    width: 100%;
    overflow: auto;
    padding: 0 5px;
  }
}

</style>