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"></el-tab-pane>
        </el-tabs>
      </el-header>
      <el-main>
        <div class="height_100" v-if="name != 2" v-html="getViewDom(patent.claim, '权利要求'+tabItem.label, 'column')" :style="setStyle()" :data-type="'权利要求'+tabItem.label"></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"></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:'contentOut'
        },
      ],
      tabItem:{
          label:'原文',
          name:'0',
        },
    };
  },
  watch: {
    // fullHeight() {
    //   this.refresh();
    // },
    patentId() {
      this.initData();
      if(this.name == 2){
        this.show = false
        this.expends = []
        this.isClickId  = ''
        this.$nextTick(()=>{
           this.handleClick()
        })
      }
    },
    patentNo() {
      if (!this.patentId) {
        this.initData();
        if(this.name == 2){
          this.show = false
          this.expends = []
          this.isClickId  = ''
          this.$nextTick(()=>{
            this.handleClick()
          })
        }
      }
    },
    name(){
      if(this.name!=2){
        this.show = false
      }
    },
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  mounted() {
    this.handleResize();
    this.initData();
  },
  methods: {
    handleClick(tab, event) {
      this.tabItem  = this.tabs.find(item=>{
        return item.name == this.name
      })
      this.show = true
      if (this.name == 2 && !this.patent.patentRightTree) {
        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.name == 2 && 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.$api.queryExternalClaim(params).then((response) => {
            if (response.code == 200) {
              this.$set(this.patent, "claim", response.data.claimContent);
            }
          });
        }
    },
    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;
  }
}
</style>
<style lang="scss" scoped>


</style>