增加权要树页面，修改批注的bug

src/views/workspace/folder/articles/ContrastIndex.vue

@@ -464,7 +464,7 @@ export default {
           } else {
             var a = response.data
           }
-          this.$store.commit('SET_PATENT_CONTRAST', a)
+          this.$store.commit('SET_PATENT_PIZHU_CONTRAST', a)
         }
       })
     },

src/views/workspace/folder/articles/components/PatentBasic.vue

@@ -7,7 +7,7 @@
           <el-col :span="24">
             <el-tabs value="0">
               <el-tab-pane label="摘要" name="0">
-                <p class="common" :data-type="'摘要'+(patent.change2?'译文':'原文')" :style="setStyle()" v-html="getViewDom2(patent, 'abstractStr','摘要')">
+                <p class="common" :data-type="'摘要'+(patent.change2?'译文':'原文')" :style="setStyle()" v-html="getViewDom2(patent, 'abstractStr','摘要'+(patent.change2?'译文':'原文'))">
                     
                 </p>
                

src/views/workspace/folder/articles/components/PatentRight.vue

@@ -1,85 +1,434 @@
 <template>
-  <div class="patent-articles-patent-right" @mouseup="mouseup" @mousemove="mousemove">
-    <el-tabs v-model="name" >
-      <el-tab-pane label="原文" name="0" :style="{height: height + 'px',overflowY: 'auto'}">
+  <div
+    class="patent-articles-patent-right"
+    @mouseup="mouseup"
+    @mousemove="mousemove"
+  >
+    <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 patent.rights" :style="setStyle()" data-type="权利要求原文">
           <span v-if="item"  v-html="getViewDom(item.content,'权利要求原文'+(index+1))"></span>
         </p> -->
-        <div v-html="getViewDom1(patent.rights,'权利要求原文','content')" :style="setStyle()" data-type="权利要求原文"></div>
+        <div
+          v-html="getViewDom1(patent.rights, '权利要求原文', 'content')"
+          :style="setStyle()"
+          data-type="权利要求原文"
+        ></div>
       </el-tab-pane>
-      <el-tab-pane label="译文" name="1" :style="{height: height + 'px',overflowY: 'auto'}" v-if="projectId">
+      <el-tab-pane
+        label="译文"
+        name="1"
+        :style="{ height: height + 'px', overflowY: 'auto' }"
+        v-if="projectId"
+      >
         <!-- <p class="common" v-for="(item, index) in patent.rights" :style="setStyle()">
           <span v-if="item" v-html="getViewDom(item.contentOut)"></span>
         </p> -->
-        <div v-html="getViewDom1(patent.rights,'权利要求译文','contentOut')" :style="setStyle()" data-type="权利要求译文"></div>
+        <div
+          v-html="getViewDom1(patent.rights, '权利要求译文', 'contentOut')"
+          :style="setStyle()"
+          data-type="权利要求译文"
+        ></div>
+      </el-tab-pane>
+      <el-tab-pane
+        label="权要树"
+        name="2"
+        :style="{ height: height + 'px', overflowY: 'auto' }"
+        v-if="projectId"
+      >
+        <div class="box" ref="box" v-dragControllerDiv :style="setStyle()" style="height:calc(100% - 20px)">
+          <div
+            class="left tree"
+            style="width: 70%;padding-top: 10px;"
+            :style="{ height: height + 'px', overflowY: 'auto' }"
+          >
+            <!--左侧div内容-->
+            <!-- <el-tree
+              style="height: 100%"
+              :data="patent.patentRightTree"
+              node-key="sort"
+              :default-expanded-keys="expends"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+            >
+              <div
+                class="custom-tree-node"
+                slot-scope="{ node, data }"
+                style="height: 100%"
+              >
+                <div :id="'right' + data.sort">
+                  <span
+                    style="
+                      word-break: break-word;
+                      white-space: normal;
+                      height: 100%;
+                    "
+                    >{{ data.content }}</span
+                  >
+                </div>
+              </div>
+            </el-tree> -->
+            <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;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>
+        </div>
+
+        <!-- <div style="display:flex"  >
+          <div style="width:70%" class="tree" :style="{height: height + 'px',overflowY: 'auto'}">
+            
+          </div>
+          <div style="width:30%" ></div>
+        </div> -->
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-import { commonMixins,addContrast } from "./mixins"
-import { patentKeywordsHighlight,changeTranslation } from "@/views/workspace/folder/components/mixins";
+import { commonMixins, addContrast } from "./mixins";
+import {
+  patentKeywordsHighlight,
+  changeTranslation,
+} from "@/views/workspace/folder/components/mixins";
+import html2canvas from "html2canvas"
 export default {
-  mixins: [commonMixins,patentKeywordsHighlight,changeTranslation,addContrast],
+  mixins: [
+    commonMixins,
+    patentKeywordsHighlight,
+    changeTranslation,
+    addContrast,
+  ],
   data() {
     return {
+      expends: [],
+      show:false,
+      isClickId: "",
       height: null,
       fullHeight: document.documentElement.clientHeight,
       records: {
         original: [],
-        translation: []
-      }
-    }
+        translation: [],
+      },
+      scrollTop:0,
+      isClick:false,
+    };
   },
   watch: {
-    fullHeight() {
-      this.refresh()
-    },
+    // fullHeight() {
+    //   this.refresh();
+    // },
     patentId() {
-      this.initData()
+      this.initData();
+      if(this.name == 2){
+        this.show = false
+        this.expends = []
+        this.isClickId  = ''
+        this.$nextTick(()=>{
+           this.handleClick()
+        })
+      }
     },
-    patentNo(){
-      if(!this.patentId){
-         this.initData()
+    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)
+    window.addEventListener("resize", this.handleResize);
   },
   mounted() {
-    this.handleResize()
-    this.initData()
+    this.handleResize();
+    this.initData();
   },
   methods: {
-    initData() {
-      if(this.patent.rights){
-        this.records.original = this.patent.rights.map(item => item.content)
-        this.records.translation = this.patent.rights.map(item => item.contentOut)
+    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{
-        if(!this.projectId){
+        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);
+        this.records.translation = this.patent.rights.map(
+          (item) => item.contentOut
+        );
+      } else {
+        if (!this.projectId) {
           var params = {
-            patentCell:1,
-            patentNo:this.patent.publicNo,
-            appNo:this.patent.applicationNo,
-          }
-          this.$api.getPatentPart(params).then(response=>{
-            if(response.code == 200){
-              this.$set(this.patent,'rights',response.data.rights)
+            patentCell: 1,
+            patentNo: this.patent.publicNo,
+            appNo: this.patent.applicationNo,
+          };
+          this.$api.getPatentPart(params).then((response) => {
+            if (response.code == 200) {
+              this.$set(this.patent, "rights", response.data.rights);
             }
-          })
+          });
         }
       }
-      
     },
     handleResize(event) {
-      this.fullHeight = document.documentElement.clientHeight
-      this.height = this.fullHeight - 300
+      this.fullHeight = document.documentElement.clientHeight;
+      this.height = this.fullHeight - 350;
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss">
@@ -98,4 +447,18 @@ export default {
     margin-top: 0;
   }
 }
+</style>
+<style lang="scss" scoped>
+// .tree {
+//   ::v-deep .el-tree-node{
+//     white-space: normal; //关键代码!!!!!!!!!
+//     .el-tree-node__content {
+//       height: 100%;
+//       align-items: start;
+//     }
+//   }
+
+// }
+ 
+
 </style>

src/views/workspace/folder/articles/index.vue

@@ -587,7 +587,7 @@ export default {
           } else {
             var a = response.data
           }
-          this.$store.commit('SET_PATENT_CONTRAST', a)
+          this.$store.commit('SET_PATENT_PIZHU_CONTRAST', a)
         }
       })
     },