feige
2023-08-26 de279dec1d03ad1c5603871bd4beeebc236a64eb
增加了家谱图
2个文件已修改
177 ■■■■ 已修改文件
ruoyi-ui/package.json 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
ruoyi-ui/src/views/mindMap/index.vue 176 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
ruoyi-ui/package.json
@@ -40,6 +40,7 @@
    "axios": "0.24.0",
    "clipboard": "2.0.8",
    "core-js": "3.25.3",
    "d3": "^7.8.5",
    "echarts": "5.4.0",
    "element-ui": "2.15.12",
    "file-saver": "2.0.5",
ruoyi-ui/src/views/mindMap/index.vue
@@ -4,11 +4,10 @@
    <div class="image-container">
      <img class="top-image" src="../../assets/images/zhang.png" alt="Top Image">
    </div>
    <el-card class="mind-map-container">
      <div id="mind-map">
      </div>
    </el-card>
            <superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange"/>
  </div>
</template>
@@ -16,12 +15,19 @@
import { getUserProfile } from "@/api/system/user";
import { listRootAll ,listRoot} from "@/api/root/index";
import * as d3 from 'd3';
  // 导入思维导图数据
    import MapData from '../components/MapData.js'
    // 导入思维导图组件
    import superMindmap from '../components/superMindmap.vue'
export default {
   components:{superMindmap},
  name: "index",
  data() {
    return {
      active: '',
      mapData: null,
      showMindMap: false,
      user: {},
      greeting: "",
      rootList:[]
@@ -30,8 +36,32 @@
  mounted() {
    this.setGreeting();
    this.getUser();
  //  this.mapData = MapData.webMap
   // console.log(this.mapData)
   // console.log('sssssssssssssssssss')
  },
  methods: {
     // 点击思维导图节点后,触发变量更新
                activeChange(newLabel) {
                    this.active = newLabel
                    this.reloadMindMap()
                },
                // 重载思维导图
                reloadMindMap() {
                    this.showMindMap = false
                    this.$nextTick(
                        () => {
                            this.showMindMap = true
                        }
                    )
                },
    setGreeting() {
      const currentTime = new Date();
      const currentHour = currentTime.getHours();
@@ -53,69 +83,109 @@
      });
      listRoot(4).then(response =>{
        this.rootList =response.data;
        console.log(this.rootList);
        this.drawMindMap();
        const mindMapData = this.rootList[0];
       // console.log(this.drawData(mindMapData))
        this.mapData = this.drawData(mindMapData)
        this.showMindMap = true
      })
    },
    drawData(mpdata)
    {
      if(mpdata==null)
        return null
      var data = {
        "label": mpdata['nickName'],
        "prop": mpdata['nickName'],
        "url": '',
        "link": '',
        "children":[]
      }
      if(eval(mpdata['spouse'])!=null)
        data['link'] = eval(mpdata['spouse']).nickName
      if(mpdata['childList']!=null){
      for(var i = 0; i < mpdata['childList'].length; i++)
      {
        var dt = {
          "label": mpdata['childList'][i]['nickName'],
          "prop": mpdata['childList'][i]['nickName'],
          "url": '',
          "link": "",
          "children":[]
        }
        if(eval(mpdata['childList'][i]['spouse'])!=null)
          dt['link'] = eval(mpdata['childList'][i]['spouse']).nickName
        if(mpdata['childList'][i]['childList']!=null)
        {
          for(var j = 0; j < mpdata['childList'][i]['childList'].length;j++)
          dt['children'].push(this.drawData(mpdata['childList'][i]['childList'][j]))
        }
        data['children'].push(dt)
      }
      }
      return data;
    },
    drawMindMap() {
      const mindMapData = this.rootList[0]; // 从rootList中获取数据
      console.log(mindMapData)
      // 清除现有的SVG元素
      d3.select("#mind-map svg").remove();
      // d3.select("#mind-map svg").remove();
      // 创建一个新的 div 元素作为包裹思维导图的容器
      const mindMapContainer = document.createElement("div");
      mindMapContainer.setAttribute("id", "mind-map-container");
      mindMapContainer.style.position = "absolute";
      mindMapContainer.style.top = "0";
      mindMapContainer.style.left = "0";
      mindMapContainer.style.width = "100%";
      mindMapContainer.style.height = "100%";
      mindMapContainer.style.zIndex = "1";
      // // 创建一个新的 div 元素作为包裹思维导图的容器
      // const mindMapContainer = document.createElement("div");
      // mindMapContainer.setAttribute("id", "mind-map-container");
      // mindMapContainer.style.position = "absolute";
      // mindMapContainer.style.top = "0";
      // mindMapContainer.style.left = "0";
      // mindMapContainer.style.width = "100%";
      // mindMapContainer.style.height = "100%";
      // mindMapContainer.style.zIndex = "1";
      // 将思维导图容器插入到 image-container 中
      document.querySelector(".image-container").appendChild(mindMapContainer);
      // // 将思维导图容器插入到 image-container 中
      // document.querySelector(".image-container").appendChild(mindMapContainer);
      // 创建SVG元素,设置宽度和高度
      const svg = d3.select("#mind-map-container")
        .append("svg")
        .attr("class", "svg-container") // 添加 className
        .attr("width", "100%")
        .attr("height", "100%");
      // // 创建SVG元素,设置宽度和高度
      // const svg = d3.select("#mind-map-container")
      //   .append("svg")
      //   .attr("class", "svg-container") // 添加 className
      //   .attr("width", "100%")
      //   .attr("height", "100%");
      // 创建根节点
      const root = d3.hierarchy(mindMapData);
      const treeLayout = d3.tree().size([500, 400]); // 设置树状布局的尺寸
      treeLayout(root);
      // // 创建根节点
      // const root = d3.hierarchy(mindMapData);
      // const treeLayout = d3.tree().size([500, 400]); // 设置树状布局的尺寸
      // treeLayout(root);
      // 创建链接线
      svg.selectAll(".link")
        .data(root.descendants().slice(1))
        .enter()
        .append("path")
        .attr("class", "link")
        .attr("d", d => {
          return "M" + d.x + "," + d.y + "C" + (d.x + d.parent.x) / 2 + "," + d.y + " " +
            (d.x + d.parent.x) / 2 + "," + d.parent.y + " " + d.parent.x + "," + d.parent.y;
        });
      // // 创建链接线
      // svg.selectAll(".link")
      //   .data(root.descendants().slice(1))
      //   .enter()
      //   .append("path")
      //   .attr("class", "link")
      //   .attr("d", d => {
      //     return "M" + d.x + "," + d.y + "C" + (d.x + d.parent.x) / 2 + "," + d.y + " " +
      //       (d.x + d.parent.x) / 2 + "," + d.parent.y + " " + d.parent.x + "," + d.parent.y;
      //   });
      // 创建节点
      const nodes = svg.selectAll(".node")
        .data(root.descendants())
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", d => "translate(" + d.x + "," + d.y + ")");
      // // 创建节点
      // const nodes = svg.selectAll(".node")
      //   .data(root.descendants())
      //   .enter()
      //   .append("g")
      //   .attr("class", "node")
      //   .attr("transform", d => "translate(" + d.x + "," + d.y + ")");
      nodes.append("circle")
        .attr("r", 10);
      // nodes.append("circle")
      //   .attr("r", 10);
      nodes.append("text")
        .attr("dx", 12)
        .attr("dy", 5)
        .text(d => d.data.nickName);
      // nodes.append("text")
      //   .attr("dx", 12)
      //   .attr("dy", 5)
      //   .text(d => d.data.nickName);
    }
  }
};