From 76956e0f6cc235678fce936439ad932a7b8bc344 Mon Sep 17 00:00:00 2001
From: Tcsm <1377977403@qq.com>
Date: 星期四, 24 八月 2023 21:41:31 +0800
Subject: [PATCH] 8.24提交
---
ruoyi-ui/src/views/mindMap/index.vue | 54 ++++++++++++++++++++++++++++++------------------------
1 files changed, 30 insertions(+), 24 deletions(-)
diff --git a/ruoyi-ui/src/views/mindMap/index.vue b/ruoyi-ui/src/views/mindMap/index.vue
index e8a14cf..83f0819 100644
--- a/ruoyi-ui/src/views/mindMap/index.vue
+++ b/ruoyi-ui/src/views/mindMap/index.vue
@@ -3,16 +3,12 @@
<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">
-
- <el-card class="mind-map-container ">
- <div id="mind-map">
-
- </div>
- </el-card>
-
</div>
+ <el-card class="mind-map-container">
+ <div id="mind-map">
+ </div>
+ </el-card>
</div>
</template>
@@ -20,6 +16,7 @@
import { getUserProfile } from "@/api/system/user";
import { listRootAll ,listRoot} from "@/api/root/index";
import * as d3 from 'd3';
+
export default {
name: "index",
@@ -61,15 +58,30 @@
})
},
+
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")
+ const svg = d3.select("#mind-map-container")
.append("svg")
+ .attr("class", "svg-container") // 娣诲姞 className
.attr("width", "100%")
.attr("height", "100%");
@@ -112,34 +124,28 @@
<style scoped>
.app-container{
background-color: #FEF7FC;
+ position: relative;
}
.image-container {
- position: relative;
+ position: absolute;
width: 100%;
height: 100%;
+ z-index: -1;
}
.mind-map-container{
- z-index: 3;
+ z-index: 2;
+ opacity: 0.5;
}
.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;
+ object-fit: cover;
+ position: static;
+ opacity: 0.8;
}
+
</style>
--
Gitblit v1.9.1