修改了对应文件

feige

2025-05-06 850618a035d9999cf60d77dafd6da8a09f36a1fe

 ruoyi-ui/src/views/index.vue

@@ -1,81 +1,184 @@
<template>
  <div class="app-container">
    <div class="image-container">
      <img class="bottom-image" src="../assets/images/shouye.png" alt="Bottom Image">
      <el-input
        class="text-box1"
        type="textarea" :rows="6" resize="none"
        placeholder="    参天大树必有其根，万里江河亦有其源。
      普天之下炎黄子孙，脉脉相传，不乏有识之士，栋梁之才。吾等不可忘其先人，亦不可不知我之本源。
      建谱之大事，上可告慰祖先在天之灵，下可使子孙后代有寻根之本。叶脉之于草木、子孙之于前根，血管之于人体，依托技术输送事件，供给经验，谱写根根相传一路走来的非凡。"
      ></el-input>
      <el-input
        class="text-box2"
        type="textarea" :rows="18" resize="none"
        placeholder="    家，是我们生命的驿站、漂泊的归所。
      众所周知，自从有了赖以生存的小家庭，家庭成员就有了成长的轨迹、学习的轨迹、工作的轨迹、生活的轨迹。家庭中每一人每一物都谱写着家庭的辉煌轨迹。让我们用 “本都都” 来收藏每个家族、每个家庭、每个人甜蜜昨天，记录幸福今天，拥抱美好明天。让我们真正感受生命诞生的欢声笑语，人生奋斗的酸甜苦辣，膝下弄儿的幸福温馨。
      活在当下，步履匆匆。当您在外地漂泊而急需某些必须的证明材料时；当您在使用某件物品需要帮助时；当您身心疲倦时；当您急于为自己整理健康日记时；当您在某个瞬间又回忆起亲人的笑貌时.......您不妨打开身边的 “本都都” ，细细地品味“本都都”记录的每一轨迹答案：原来可以在 “本都都” 收获材料证明；播放的那已经泛黄的照片、证书，唤起了往日旧时相知、如今已漂泊天涯的挚友；一本邮票、一沓标本，记录的是您那别样的童趣；手拿着孩子的出生证明，更是禁不住泪水打湿眼眶，如今事业有成的子女们似乎又变回那个天真烂漫的孩子；您的房产证、土地证、结婚证、健康报告、百年心愿...，或许在将来某个时间“本都都”能成为您维护权益的保障，抑或是留给子女的一份财富。
      希望 “本都都” 能成为助推您事业成功、家庭幸福、人生美满的好帮手！"
      ></el-input>
<!--    <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/awd.png"  alt="Top Image">
    </div>
    <superMindmap  v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container ">

    </superMindmap>

  </div>
</template>

<script>

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 {
  name: "App",
  dicts: ['sys_normal_disable'],
  data(){
   components:{superMindmap},
  name: "index",
  data() {
    return {

      active: '',
      mapData: null,
      showMindMap: false,
      user: {},
      greeting: "",
      rootList:[]
    };
  }
  },
  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();

      if (currentHour < 12) {
        this.greeting = "早上好";
      } else if (currentHour < 14) {
        this.greeting = "中午好";
      } else if (currentHour < 18) {
        this.greeting = "下午好";
      } else {
        this.greeting = "晚上好";
      }
    },

    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
      });
	  
     let clanId = this.$store.state.user.clanId
     if(clanId==null)
     {
      //alert(clanId)
      return}
      listRoot(10,clanId).then(response =>{
        this.rootList =response.data;

        const mindMapData = this.rootList[0];
         console.log(mindMapData)
   //   for(let i = 0; i < )
       console.log('9999')
        // console.log(this.drawData(mindMapData))
        this.mapData = this.drawData(mindMapData)
        this.showMindMap = true
      })

    },
    drawData(mpdata) {
     let tp = "https://www.bendudu.com:8080/profile/upload/2023/03/19/test7_20230319222030A007.jpg"
      if (mpdata == null)
        return null;
      var data = {
        "label": mpdata['spouse'] != null ? eval(mpdata['spouse']).oldName : '',
        "prop": mpdata['oldName'],
        "url": mpdata['url']!=null?'https://www.bendudu.com:8080/'+mpdata['url']:tp,
        "purl": mpdata['spouse'] != null ? (mpdata['spouse'].url!=null? 'https://www.bendudu.com:8080/'+mpdata['spouse'].url:tp):tp,
        "id": mpdata['userId'],
      "spid": mpdata['spouseId'] != null ? mpdata['spouseId'] : '',
		
        "link": mpdata['oldName'],
        "children": []
      };

      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']).oldName : "",
            "prop": mpdata['childList'][i]['oldName'],
            "url": mpdata['childList'][i]['url']!=null?'https://www.bendudu.com:8080/'+mpdata['childList'][i]['url']:tp,
             "id": mpdata['childList'][i]['userId'],
          "spid": mpdata['childList'][i]['spouseId'] != null ? mpdata['childList'][i]['spouseId'] : '',
			 
          "purl": (mpdata['childList'][i]['spouse'] != null ) ?( mpdata['childList'][i]['spouse'].url!= null?'https://www.bendudu.com:8080/'+mpdata['childList'][i]['spouse'].url:tp):tp,
            "link": mpdata['childList'][i]['oldName'],
            "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;
    },

  }
};
</script>

<style scoped>
.app-container{
  background-color: #FEF7FC;
  position: relative;
  background-color: transparent;
  /*padding-left: -30px;*/
  margin-top:-30px;
  margin-left: -20px;
}
.text{
  opacity: 0.75;
  padding: 10px;
}
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.bottom-image {
  z-index: -1; /* 设置底层图片的层级为1 */
  width: 100%;
  height: 100%;
  /*position: absolute;*/
  top: 0;
}
.text-box1 {
  position: absolute;
  top: 17.5%;
  left: 47.5%;
  transform: translate(-50%, -50%);
  width: 320px;
  /*position: fixed;*/
  top: 50px;
  /*left:-20px;*/
  width: 110%;
  height: 100%;
  z-index: -1;
}

.mind-map-container{
  /*position: fixed;*/

  overflow: auto;
  z-index: 1;
  opacity: 1;
  margin-top: 5%;
  margin-left: 12%;
  /*background-color: transparent;*/
}
.text-box1 ::placeholder{
  color:#000000;
  font-size: 15px;
  font-family: Microsoft YaHei UI-Light, Microsoft YaHei UI;
}
.text-box2 {
  position: absolute;
  top: 51%;
  left: 80%;
  transform: translate(-50%, -50%);
  width: 345px;
}
.text-box2 ::placeholder{
  color:#000000;
  font-size: 15px;
  font-family: Microsoft YaHei UI-Light, Microsoft YaHei UI;
.top-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: static;
  opacity: 0.8;
  overflow: auto;
}
</style>