修改行高

Tcsm

2023-10-31 2586579503a70d613dc870083d0bcca7c2d88563

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

@@ -1,14 +1,14 @@
<template>
  <div class="app-container">
    <h1 style="font-size: 21px;">{{ greeting +'，' + user.userName }}</h1>
    <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>
    <el-card class="mind-map-container">
      <div id="mind-map">
    <superMindmap  v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container ">

      </div>
    </el-card>
    </superMindmap>

  </div>
</template>

@@ -16,12 +16,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 +37,28 @@
  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,90 +80,83 @@
      });
      listRoot(4).then(response =>{
        this.rootList =response.data;
        console.log(this.rootList);
        this.drawMindMap();

        const mindMapData = this.rootList[0];
        // console.log(mindMapData)
        // console.log(this.drawData(mindMapData))
        this.mapData = this.drawData(mindMapData)
        this.showMindMap = true
      })

    },
    drawData(mpdata) {
      if (mpdata == null)
        return null;
      var data = {
        "label": mpdata['spouse'] != null ? eval(mpdata['spouse']).nickName : '',
        "prop": mpdata['nickName'],
        "url": 'https://www.bendudu.com/',
        "id": mpdata['userId'],
        "link": mpdata['nickName'],
        "children": []
      };

    drawMindMap() {
      const mindMapData = this.rootList[0]; // 从rootList中获取数据
      if (mpdata['childList'] != null) {
        for (var i = 0; i < mpdata['childList'].length; i++) {
          var dt = {
            "label": mpdata['childList'][i]['spouse'] != null ? eval(mpdata['childList'][i]['spouse']).nickName : '',
            "prop": mpdata['childList'][i]['nickName'],
            "url": 'https://47.93.189.255:8085/'+mpdata['childList'][i]['url'],
             "id": mpdata['childList'][i]['userId'],
            "link": mpdata['childList'][i]['nickName'],
            "children": []
          };
          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;
    },

      // 清除现有的SVG元素
      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";

      // 将思维导图容器插入到 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%");

      // 创建根节点
      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;
        });

      // 创建节点
      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("text")
        .attr("dx", 12)
        .attr("dy", 5)
        .text(d => d.data.nickName);
    }
  }
};
</script>

<style scoped>
.app-container{
  background-color: #FEF7FC;
  position: relative;
  background-color: transparent;
  /*padding-left: -30px;*/
  margin-top:-30px;
  margin-left: -20px;
}

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

.mind-map-container{
  z-index: 2;
  opacity: 0.5;
  /*position: fixed;*/

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



</style>