1022 修正图片可查看

linwenling

2023-10-22 dbca8bf9dde4fe0c7eb89a0c30b095eb823142a5

 ruoyi-ui/src/views/components/superMindmap.vue

@@ -3,7 +3,8 @@
</template>
<script>
    import * as d3 from 'd3';
 
import { useRoute,useRouter } from 'vue-router'

    export default {
        props: {
            data: Object,
@@ -79,6 +80,7 @@
        methods: {
            drawMap() {
                let that = this
                //alert(that.$router)
                // 源数据
                let data = {}
                // 判断data是否为空对象
@@ -100,7 +102,7 @@
                // 左右内边距
                let mapPaddingLR = 10
                // 上下内边距
                let mapPaddingTB = 0
                let mapPaddingTB =10
                let mapWidth = this.nodeWidth * TreeDeep + mapPaddingLR * 2;
                let mapHeight = (this.nodeHeight - 4) * leafNum + mapPaddingTB * 2;
                // 定义画布—— 外边距 10px
@@ -158,7 +160,7 @@
                        return Bézier_curve_generator({source: start, target: end});
                    })
                    .attr("fill", "none")
                    .attr("stroke", "#c3c3c3")
                    .attr("stroke", "#EBA4AA")
                    // 虚线
                    // .attr("stroke-dasharray", "8")
                    .attr("stroke-width", 1);
@@ -192,12 +194,12 @@
                    .attr("r", 4)
                    .attr("fill", function (d) {
                        if (d.data.childrenTemp) {
                            return 'red'
                            return '#EBA4AA'
                        } else {
                            return 'white'
                        }
                    })
                    .attr("stroke", "red")
                    .attr("stroke", "#EBA4AA")
                    .attr("stroke-width", 1);
                //绘制标注(节点前的矩形)
                groups.append("rect")
@@ -209,7 +211,7 @@
                        }
                    )
                    .attr("height", 22)
                    .attr("fill", "grey")
                    .attr("fill", "#FFFFFF")
                    // 添加圆角
                    .attr("rx", 4)
                //绘制链接方式
@@ -217,11 +219,24 @@
                    .attr("x", 12)
                    .attr("y", -5)
                    .attr("dy", 10)
                    .attr("fill", 'white')
                    .attr("font-size", 12)
                    .attr("fill", '#F6739F')
                    .attr("font-size", 14)
                    .text(function (d) {
                        return d.data.link;
                    })
                    .on("click",function (event, node) {
                             let data = node.data
                      that.$router.push("/familymodel/jiagenwang/personInfo/" + data.id);

                      })
                      .attr("cursor",
                          function (d) {
                              if (d.data.disabled) {
                                  return 'not-allowed'
                              } else {
                                  return 'pointer'
                              }
                          })
                //绘制文字
                groups.append("text")
                    .on("click", function (event, node) {
@@ -231,10 +246,12 @@
                            return
                        }
                        // 有外链的节点，打开新窗口后恢复到思维导图页面
                        if (data.url) {
                            window.open(data.url)
                            that.$emit('activeChange', 'map')
                            return
                        if (data.id) {
                           // window.open(data.url)

                            that.$router.push("/familymodel/jiagenwang/personInfo/" + data.id);
                            //that.$emit('activeChange', 'map')
                           // return
                        }
                        // 标准节点—— 传出 prop
                        if (data.dicType) {
@@ -252,6 +269,8 @@
                        function (d) {
                            if (d.data.prop === that.active) {
                                return '#409EFF'
                            }else{
                              return '#8296C5'
                            }
                        }
                    )
@@ -281,7 +300,7 @@
            },
        },
    }
 

    // 获取树的深度
    function getDepth(json) {
        var arr = [];
@@ -306,7 +325,7 @@
        }
        return depth;
    }
 

    // 提取树的子节点，最终所有树的子节点都会存入传入的leafList数组中
    function getTreeLeaf(treeData, leafList) {
        // 判断是否为数组
@@ -326,13 +345,13 @@
            }
        }
    }
 

    // 获取包含汉字的字符串的长度
    function getStringSizeLength(string) {
        //先把中文替换成两个字节的英文，再计算长度
        return string.replace(/[\u0391-\uFFE5]/g, "aa").length;
    }
 

    // 生成随机的字符串
    function randomString(strLength) {
        strLength = strLength || 32;
@@ -343,7 +362,7 @@
        }
        return n
    }
 

    // 获取字符串的像素宽度
    function getPXwidth(str, fontSize = "12px", fontFamily = "Microsoft YaHei") {
        var span = document.createElement("span");
@@ -365,4 +384,4 @@
        // result.height = parseFloat(window.getComputedStyle(span).height) - result.height;
        return result.width;
    }
</script>
</script>