Merge remote-tracking branch 'origin/master'

linwenling

2023-08-29 b8670cd94a61846ac63573f724fcf91d8dd7be88

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

@@ -4,9 +4,7 @@
    <div class="image-container">
      <img class="top-image" src="../../assets/images/zhang.png" alt="Top Image">
    </div>


            <superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange"/>
  <superMindmap  v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container"/>

  </div>
</template>
@@ -60,7 +58,6 @@
                        }
                    )
                },


    setGreeting() {
      const currentTime = new Date();
@@ -129,64 +126,6 @@
      return data;
    },

    drawMindMap() {
      const mindMapData = this.rootList[0]; // 从rootList中获取数据
      console.log(mindMapData)
      // 清除现有的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>
@@ -198,15 +137,19 @@
}

.image-container {
  position: absolute;
  width: 100%;
  height: 100%;
  /*position: absolute;*/
  position: fixed;
  margin-left: -10px;
  width: 90%;
  height: 90%;
  z-index: -1;
}

.mind-map-container{
  z-index: 2;
  opacity: 0.5;
  opacity: 0.8;
  /*margin-top: 200px;*/
  background-color: transparent;
}
.top-image {
  width: 100%;
@@ -215,7 +158,4 @@
  position: static;
  opacity: 0.8;
}



</style>