From bd40473c9c634005bc7e62e7fc901bcd8b598fa0 Mon Sep 17 00:00:00 2001
From: feige <feige@qq.com>
Date: 星期五, 02 二月 2024 15:20:26 +0800
Subject: [PATCH] 提交了修改
---
ruoyi-ui/src/views/mindMap/index.vue | 177 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 101 insertions(+), 76 deletions(-)
diff --git a/ruoyi-ui/src/views/mindMap/index.vue b/ruoyi-ui/src/views/mindMap/index.vue
index e8a14cf..2cba0b6 100644
--- a/ruoyi-ui/src/views/mindMap/index.vue
+++ b/ruoyi-ui/src/views/mindMap/index.vue
@@ -1,17 +1,13 @@
<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">
- <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>
+ <superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container ">
+
+ </superMindmap>
</div>
</template>
@@ -20,11 +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:[]
@@ -33,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();
@@ -54,92 +78,93 @@
getUserProfile().then(response => {
this.user = response.data;
});
- listRoot(4).then(response =>{
+ listRoot(5).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
})
},
- drawMindMap() {
- const mindMapData = this.rootList[0]; // 浠巖ootList涓幏鍙栨暟鎹�
+ 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:8080/'+mpdata['url'],
+ // "purl": 'https://www.bendudu.com:8080/'+mpdata['spouse'],
+ "id": mpdata['userId'],
+ "link": mpdata['nickName'],
+ "children": []
+ };
- // 娓呴櫎鐜版湁鐨凷VG鍏冪礌
- d3.select("#mind-map svg").remove();
+ 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://www.bendudu.com:8080/'+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鍏冪礌锛岃缃搴﹀拰楂樺害
- 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>
.app-container{
- background-color: #FEF7FC;
-}
-
-.image-container {
position: relative;
- width: 100%;
+ background-color: transparent;
+ /*padding-left: -30px;*/
+ margin-top:-30px;
+ margin-left: -20px;
+}
+.text{
+ opacity: 0.75;
+ padding: 10px;
+}
+.image-container {
+ position: absolute;
+ /*position: fixed;*/
+ top: 50px;
+ /*left:-20px;*/
+ width: 110%;
height: 100%;
+ z-index: -1;
}
.mind-map-container{
- z-index: 3;
+ /*position: fixed;*/
+
+ overflow: auto;
+ z-index: 1;
+ opacity: 1;
+ margin-top: 5%;
+ margin-left: 12%;
+ /*background-color: transparent;*/
}
.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;
+ overflow: auto;
}
-
-
</style>
--
Gitblit v1.9.1