From 4bb9f72e6caf2a1a5d54d62cca3bcba2ad2de825 Mon Sep 17 00:00:00 2001
From: linwenling <3256558519@qq.com>
Date: 星期四, 24 八月 2023 22:37:59 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
ruoyi-ui/src/views/mindMap/index.vue | 112 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 87 insertions(+), 25 deletions(-)
diff --git a/ruoyi-ui/src/views/mindMap/index.vue b/ruoyi-ui/src/views/mindMap/index.vue
index d43ecd7..83f0819 100644
--- a/ruoyi-ui/src/views/mindMap/index.vue
+++ b/ruoyi-ui/src/views/mindMap/index.vue
@@ -3,14 +3,21 @@
<h1 style="font-size: 21px;">{{ greeting +'锛�' + user.userName }}</h1>
<div class="image-container">
<img class="top-image" src="../../assets/images/zhang.png" alt="Top Image">
- <img class="bottom-image" src="../../assets/images/bkg.png" alt="Bottom Image">
</div>
+ <el-card class="mind-map-container">
+ <div id="mind-map">
+
+ </div>
+ </el-card>
</div>
</template>
<script>
import { getUserProfile } from "@/api/system/user";
-import { listRootAll } from "@/api/root/index";
+import { listRootAll ,listRoot} from "@/api/root/index";
+import * as d3 from 'd3';
+
+
export default {
name: "index",
data() {
@@ -44,46 +51,101 @@
getUserProfile().then(response => {
this.user = response.data;
});
- listRootAll().then(response =>{
+ listRoot(4).then(response =>{
this.rootList =response.data;
- console.log(this.rootList)
+ console.log(this.rootList);
+ this.drawMindMap();
})
+ },
+
+ drawMindMap() {
+ const mindMapData = this.rootList[0]; // 浠巖ootList涓幏鍙栨暟鎹�
+
+ // 娓呴櫎鐜版湁鐨凷VG鍏冪礌
+ 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;
}
.image-container {
- position: relative;
- width: 100%;
- height: 100%;
-}
-
-
-.top-image {
- width: 50%;
- /*height: 100%;*/
- object-fit: cover;
position: absolute;
- top: 0;
- right: 0;
- opacity: 1;
-}
-
-.bottom-image {
- z-index: 1; /* 璁剧疆搴曞眰鍥剧墖鐨勫眰绾т负1 */
width: 100%;
height: 100%;
- /*position: absolute;*/
- top: 0;
+ z-index: -1;
}
+.mind-map-container{
+ z-index: 2;
+ opacity: 0.5;
+}
+.top-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: static;
+ opacity: 0.8;
+}
+
+
</style>
--
Gitblit v1.9.1