From 5d3e0be26b31f7d6d29b3281adcb201ec494a1c6 Mon Sep 17 00:00:00 2001
From: Tcsm <1377977403@qq.com>
Date: 星期二, 22 八月 2023 12:51:12 +0800
Subject: [PATCH] 新增不同时显示“正在上传”
---
ruoyi-ui/src/views/mindMap/index.vue | 68 +++++++++++++++++++++++++++++++---
1 files changed, 62 insertions(+), 6 deletions(-)
diff --git a/ruoyi-ui/src/views/mindMap/index.vue b/ruoyi-ui/src/views/mindMap/index.vue
index d43ecd7..e8a14cf 100644
--- a/ruoyi-ui/src/views/mindMap/index.vue
+++ b/ruoyi-ui/src/views/mindMap/index.vue
@@ -4,13 +4,23 @@
<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">
+
+ <el-card class="mind-map-container ">
+ <div id="mind-map">
+
+ </div>
+ </el-card>
+
</div>
+
</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,15 +54,59 @@
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();
+
+ // 鍒涘缓SVG鍏冪礌锛岃缃搴﹀拰楂樺害
+ const svg = d3.select("#mind-map")
+ .append("svg")
+ .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>
@@ -66,7 +120,9 @@
height: 100%;
}
-
+.mind-map-container{
+ z-index: 3;
+}
.top-image {
width: 50%;
/*height: 100%;*/
--
Gitblit v1.9.1