家谱图样式修改

Tcsm

2023-10-31 aeacfc5a95678cb4c39398138eee9f8286560e61

家谱图样式修改

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

@@ -11,12 +11,12 @@
            nodeWidth:
                {
                    type: Number,
                    default: 160
                    default: 180
                },
            nodeHeight:
                {
                    type: Number,
                    default: 40
                    default: 80
                },
            active:
                {
@@ -41,10 +41,10 @@
                                disabled: true,
                                "children":
                                    [
                                        {"label": "杭州"},
                                        {"label": "宁波"},
                                        {"label": "温州"},
                                        {"label": "绍兴"}
                                        {"label1": "杭州"},
                                        {"label1": "宁波"},
                                        {"label1": "温州"},
                                        {"label1": "绍兴"}
                                    ]
                            },
                            {
@@ -100,11 +100,11 @@
                let leafNum = leafList.length
                let TreeDeep = getDepth(data)
                // 左右内边距
                let mapPaddingLR = 10
                let mapPaddingLR = 30
                // 上下内边距
                let mapPaddingTB =10
                let mapPaddingTB =30
                let mapWidth = this.nodeWidth * TreeDeep + mapPaddingLR * 2;
                let mapHeight = (this.nodeHeight - 4) * leafNum + mapPaddingTB * 2;
                let mapHeight = (this.nodeHeight - 4) * leafNum + mapPaddingTB * 3.5;
                // 定义画布—— 外边距 10px
                let svgMap = d3.select('#' + this.id).append('svg').attr("width", mapWidth).attr("height", mapHeight).style("margin", "0px")
                // 定义树状图画布
@@ -121,12 +121,12 @@
                        // 样式一：节点间等间距
                        // return (a.parent == b.parent ? 1: 2) / a.depth;
                        // 样式二：根据节点子节点的数量，动态调整节点间的间距
                        let rate = (a.parent == b.parent ? (b.children ? b.children.length / 2 : 1) : 2) / a.depth
                        let rate = (a.parent == b.parent ? (b.children ? b.children.length / 2 : 1) : 2) / a.depth;
                        // 间距比例不能小于0.7，避免间距太小而重叠
                        if (rate < 0.7) {
                            rate = 0.7
                        }
                        return rate;
                        return rate * 1.1;
                    })(
                        // 创建层级布局，对源数据进行数据转换
                        d3.hierarchy(data).sum(function (node) {
@@ -135,13 +135,17 @@
                        })
                    )
                // 贝塞尔曲线生成器
                let Bézier_curve_generator = d3.linkHorizontal()
                    .x(function (d) {
                        return d.y;
                    })
                    .y(function (d) {
                        return d.x;
                    });
                // let Bézier_curve_generator = d3.linkHorizontal()
                //     .x(function (d) {
                //         return d.y;
                //     })
                //     .y(function (d) {
                //         return d.x;
                //     });
                let lineGenerator = d3.line()
                  .x(function(d) { return d.y; })
                  .y(function(d) { return d.x; })
                  .curve(d3.curveStep);
                //绘制边
                treeMap.selectAll("path")
                // 节点的关系 links
@@ -154,10 +158,10 @@
                            x: d.source.x,
                            // 连线起点的x坐标
                            // 第1个10为与红圆圈的间距，第2个10为link内文字与边框的间距，第3个10为标签文字与连线起点的间距
                            y: d.source.y + 10 + (d.source.data.link ? (getPXwidth(d.source.data.link) + 10) : 0) + getPXwidth(d.source.data.label) + 10
                            y: d.source.y + 10 + (d.source.data.link ? (getPXwidth(d.source.data.link) + 25) : 0) + getPXwidth(d.source.data.label) + 25
                        };
                        var end = {x: d.target.x, y: d.target.y};
                        return Bézier_curve_generator({source: start, target: end});
                        return lineGenerator([start, end]);
                    })
                    .attr("fill", "none")
                    .attr("stroke", "#EBA4AA")
@@ -200,29 +204,38 @@
                        }
                    })
                    .attr("stroke", "#EBA4AA")
                    .attr("stroke-width", 1);
                    .attr("stroke-width", 2);
                // 添加头像
                groups.append("image")
                  .attr("xlink:href", function (d) {
                    return d.data.url; // 头像图片的路径
                  })
                  .attr("x", 12) // 头像相对于节点的水平位置
                  .attr("y", -28) // 头像相对于节点的垂直位置
                  .attr("width", 24) // 头像的宽度
                  .attr("height", 24); // 头像的高度
                //绘制标注(节点前的矩形)
                groups.append("rect")
                    .attr("x", 8)
                    .attr("y", -10)
                    .attr("x", 37)
                    .attr("y", -28)
                    .attr("width",
                        function (d) {
                            return d.data.link ? (getPXwidth(d.data.link) + 10) : 0
                            return d.data.link ? (getPXwidth(d.data.link) + 30) : 0
                        }
                    )
                    .attr("height", 22)
                    .attr("height", 26)
                    .attr("fill", "#FFFFFF")
                    // 添加圆角
                    .attr("rx", 4)
                //绘制链接方式
                groups.append("text")
                    .attr("x", 12)
                    .attr("y", -5)
                    .attr("x", 42)
                    .attr("y", -22)
                    .attr("dy", 10)
                    .attr("fill", '#F6739F')
                    .attr("font-size", 14)
                    .attr("font-size", 16)
                    .text(function (d) {
                        return d.data.link;
                        return d.depth+1 + ' ' +d.data.link;
                    })
                    .on("click",function (event, node) {
                             let data = node.data
@@ -237,6 +250,28 @@
                                  return 'pointer'
                              }
                          })
              // 添加头像
                groups.append("image")
                  .attr("xlink:href", function (d) {
                    return d.data.url; // 头像图片的路径
                  })
                  .attr("x", 12) // 头像相对于节点的水平位置
                  .attr("y", 3) // 头像相对于节点的垂直位置
                  .attr("width", 24) // 头像的宽度
                  .attr("height", 24); // 头像的高度
                //绘制标注(节点前的矩形)
                groups.append("rect")
                  .attr("x", 37)
                  .attr("y", 3)
                  .attr("width",
                    function (d) {
                      return d.data.link ? (getPXwidth(d.data.link) + 30) : 0
                    }
                  )
                  .attr("height", 26)
                  .attr("fill", "#FFFFFF")
                  // 添加圆角
                  .attr("rx", 4)
                //绘制文字
                groups.append("text")
                    .on("click", function (event, node) {
@@ -263,7 +298,7 @@
                        }
                    })
                    .attr("x", function (d) {
                        return 12 + (d.data.link ? (getPXwidth(d.data.link) + 10) : 0)
                        return 5+ (d.data.link ? (getPXwidth(d.data.link) + 15) : 0);
                    })
                    .attr("fill",
                        function (d) {
@@ -280,7 +315,7 @@
                                return 'bold'
                            }
                        })
                    .attr("font-size", 14)
                    .attr("font-size", 16)
                    .attr("cursor",
                        function (d) {
                            if (d.data.disabled) {
@@ -289,13 +324,13 @@
                                return 'pointer'
                            }
                        })
                    .attr("y", -5)
                    .attr("y", 10)
                    .attr("dy", 10)
                    .attr("slot", function (d) {
                        return d.data.prop;
                    })
                    .text(function (d) {
                        return d.data.label;
                        return ' ' + d.data.label;
                    })
            },
        },

 ruoyi-ui/src/views/mindMap/index.vue

@@ -1,11 +1,13 @@
<template>
  <div class="app-container">
    <div class="text" >
      <h1 style="font-size: 21px;margin-left: 0">{{ greeting +'，' + user.userName }}</h1></div>
    <div class="image-container">
    <div class="text" style="background-color: #FEF7FC;" >
      <h1 style="font-size: 21px;">{{ greeting +'，' + user.userName }}</h1></div>
    <div class="image-container" style="background-color: #FEF7FC;">
      <img class="top-image" src="../../assets/images/zhang.png" alt="Top Image">
    </div>
    <superMindmap  v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container "/>
    <superMindmap  v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container ">

    </superMindmap>

  </div>
</template>
@@ -93,7 +95,7 @@
      var data = {
        "label": mpdata['spouse'] != null ? eval(mpdata['spouse']).nickName : '',
        "prop": mpdata['nickName'],
        "url": '12',
        "url": 'https://192.168.1.163:80/',
        "id": mpdata['userId'],
        "link": mpdata['nickName'],
        "children": []
@@ -104,7 +106,7 @@
          var dt = {
            "label": mpdata['childList'][i]['spouse'] != null ? eval(mpdata['childList'][i]['spouse']).nickName : '',
            "prop": mpdata['childList'][i]['nickName'],
            "url": '12',
            "url": 'https://47.93.189.255:8085/',
             "id": mpdata['childList'][i]['userId'],
            "link": mpdata['childList'][i]['nickName'],
            "children": []
@@ -127,32 +129,34 @@
<style scoped>
.app-container{
  position: relative;
  /*background-color: transparent;*/
  /*padding-left: -20px;*/
  background-color: transparent;
  /*padding-left: -30px;*/
  margin-top:-30px;
  margin-left: -20px;
}
.text{
  opacity: 0.75;
  margin-top: -20px;
  padding: 20px;

  padding: 10px;
}
.image-container {
  /*position: absolute;*/
  position: fixed;
  top: 70px;
  left: 50px;
  width: 100%;
  position: absolute;
  /*position: fixed;*/
  top: 50px;
  /*left:-20px;*/
  width: 110%;
  height: 100%;
  z-index: -1;
}

.mind-map-container{
  position: fixed;
  z-index: 2;
  opacity: 0.8;
  margin-top: 50px;
  margin-left: 50px;
  background-color: transparent;
  /*position: fixed;*/

  overflow: auto;
  z-index: 1;
  opacity: 1;
  margin-top: 5%;
  margin-left: 12%;
  /*background-color: transparent;*/
}
.top-image {
  width: 100%;
@@ -160,5 +164,6 @@
  object-fit: cover;
  position: static;
  opacity: 0.8;
  overflow: auto;
}
</style>

 ruoyi-ui/src/views/search/index.vue

@@ -274,7 +274,7 @@
      }else if(row.by5=="/family/zfDoctor"){//家庭小医生
        path ="/familymodel/Doctor/doctorInfo/"

      }else if(row.by5=="/family/zfClea"){ // 保洁收纳  -----------有问题
      }else if(row.by5=="/family/zfClean"){ // 保洁收纳  -----------有问题----已解决
        path = "/familymodel/clean/cleanInfo/"

      }else if(row.by5=="/family/zfContact"){  //通讯录