8.24提交

Tcsm

2023-08-24 76956e0f6cc235678fce936439ad932a7b8bc344

8.24提交

 ruoyi-ui/src/assets/images/zhang.png

 ruoyi-ui/src/views/homeRoot/index.vue

@@ -198,8 +198,8 @@
      greeting: "",
      imageSrc: require('../../assets/images/Group 407.png') ,
      dropdownList: [
        { name: '只显示第一代', src: 'Group 407.png' },
        { name: '显示至第二代', src: 'Group 407.png' },
        { name: '只显示第一代', src: 'Group 443.png' },
        { name: '显示至第二代', src: 'Group 444.png' },
        { name: '显示至第三代', src: 'Group 445.png' },
        { name: '显示全部', src: 'Group 407.png' }
      ],
@@ -302,13 +302,10 @@
    }

  },
  created() {

  created(){
    this.setGreeting();
    this.getUser();
  },
  mounted() {
     this.getList(1);
  },
  methods:{
    getInfo(src)
@@ -334,17 +331,17 @@
    generation_1(){
    //  alert(127)
      // this.getList(1)
            listRoot(1).then(response => {
                this.rootList = response.data
                this.isShow_1=true
                this.isShow_2=false
                this.isShow_3=false
                this.isShow_4=false
            })
      listRoot(1).then(response => {
          this.rootList = response.data
          this.isShow_1=true
          this.isShow_2=false
          this.isShow_3=false
          this.isShow_4=false
      })
    },
    getPersonInfo(id)
    {
            this.$router.push("/familymodel/jiagenwang/personInfo/" + id);
      this.$router.push("/familymodel/jiagenwang/personInfo/" + id);
      //alert(id)
    },
    generation_2(){
@@ -385,7 +382,7 @@
        this.isShow_3=false
        this.isShow_4=false
        }
      //  console.log(this.rootSecList)
       // console.log(this.rootSecList)
      })


@@ -410,15 +407,12 @@

      //  listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      listRoot(depth).then(response => {
          //  alert(123)
        //  alert(123)
          //   console.log(response.data)
        //  alert(90)
          this.rootList = response.data;
          this.isShow_1=true
        //  alert(this.rootList[0].url)
         // alert(this.rootList[0].url)
       //   this.total = response.data.total;
          this.loading = false;
          console.log(this.rootList)
        }
      );
    },
@@ -442,8 +436,9 @@
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;

        this.getList(1);
      });

    }
  }
}

 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]; // 从rootList中获取数据

      // 清除现有的SVG元素
      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>