|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="patent-articles-patent-right" @mouseup="mouseup" @mousemove="mousemove">
|
|
|
- <el-tabs v-model="name">
|
|
|
+ <el-tabs v-model="name" @tab-click="handleClick">
|
|
|
<el-tab-pane label="原文" name="0" :style="{height: height + 'px',overflowY: 'auto'}">
|
|
|
<!-- <p class="common" v-for="(item, index) in records.original">
|
|
|
<span v-if="item" :data-type="'权利要求原文'+(index+1)" v-html="getViewDom(item,'权利要求原文'+(index+1))"></span>
|
|
@@ -16,6 +16,37 @@
|
|
|
<el-tab-pane v-if="(signPatentNo == patent.patentNo) && type1!=7" label="权利特征" name="2" :style="{height: height + 'px',overflowY: 'auto'}">
|
|
|
<Features :patentNo="signPatentNo" :reportId="reportId"></Features>
|
|
|
</el-tab-pane>
|
|
|
+ <el-tab-pane
|
|
|
+ label="权要树"
|
|
|
+ name="2"
|
|
|
+ :style="{ height: height + 'px', overflowY: 'auto' }"
|
|
|
+ >
|
|
|
+ <div class="box" ref="box" v-dragControllerDiv :style="setStyle()" style="height:calc(100% - 20px)">
|
|
|
+ <div
|
|
|
+ class="left tree"
|
|
|
+ style="width: 70%"
|
|
|
+ :style="{ height: height + 'px', overflowY: 'auto' }"
|
|
|
+ >
|
|
|
+ <myTree :list="patent.patentRightTree" style="height: 100%" :props="{
|
|
|
+ name:'content',
|
|
|
+ children:'children'
|
|
|
+ }" nodeKey="sort" :expends="expends"></myTree>
|
|
|
+ </div>
|
|
|
+ <div class="resize" title="收缩侧边栏" style="width: 10px">⋮</div>
|
|
|
+ <div class="mid" id="chart" style="width: calc(100% - 30% - 10px);overflow:auto">
|
|
|
+ <!--右侧div内容-->
|
|
|
+ <div
|
|
|
+ id="charts"
|
|
|
+ style="max-width: 100%; min-width: 300px;position:relative"
|
|
|
+ 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>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -25,7 +56,7 @@ import { addContrast } from './mixins'
|
|
|
import { commonMixins } from "./mixins"
|
|
|
import Features from './features.vue'
|
|
|
import { patentKeywordsHighlight,changeTranslation } from "@/views/components/common/mixins";
|
|
|
-
|
|
|
+import html2canvas from "html2canvas"
|
|
|
export default {
|
|
|
components:{
|
|
|
Features
|
|
@@ -34,6 +65,11 @@ export default {
|
|
|
mixins: [commonMixins,addContrast,patentKeywordsHighlight,changeTranslation],
|
|
|
data() {
|
|
|
return {
|
|
|
+ expends: [],
|
|
|
+ show:false,
|
|
|
+ isClickId: "",
|
|
|
+ scrollTop:0,
|
|
|
+ isClick:false,
|
|
|
height: 0,
|
|
|
fullHeight: document.documentElement.clientHeight,
|
|
|
records: {
|
|
@@ -43,9 +79,9 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- fullHeight() {
|
|
|
- this.refresh()
|
|
|
- },
|
|
|
+ // fullHeight() {
|
|
|
+ // this.refresh()
|
|
|
+ // },
|
|
|
patentId() {
|
|
|
this.initData()
|
|
|
},
|
|
@@ -54,7 +90,12 @@ export default {
|
|
|
this.initData()
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
+ },
|
|
|
+ name(){
|
|
|
+ if(this.name!=2){
|
|
|
+ this.show = false
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
window.addEventListener('resize', this.handleResize)
|
|
@@ -64,6 +105,234 @@ export default {
|
|
|
this.initData()
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleClick(tab, event) {
|
|
|
+ this.show = true
|
|
|
+ if (this.name == 2 && !this.patent.patentRightTree) {
|
|
|
+ this.$api
|
|
|
+ .queryPatentRightTree({ patentNo: this.patent.patentNo })
|
|
|
+ .then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ this.$set(this.patent, "patentRightTree", response.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")
|
|
|
+ // param.data.label = {
|
|
|
+ // fontSize: 12,
|
|
|
+ // padding: [5, 4],
|
|
|
+ // backgroundColor: 'rgb(178, 215, 255)',
|
|
|
+ // borderColor: '#aaa',
|
|
|
+ // color: '#293c55',
|
|
|
+ // }
|
|
|
+ // dom.style.display='none'
|
|
|
+ // this.$nextTick(()=>{
|
|
|
+ // dom.style.display='block'
|
|
|
+ // myChart.resize()
|
|
|
+ // })
|
|
|
+ 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.patent.rights){
|
|
|
this.records.original = this.patent.rights.map(item => item.content)
|