Tcsm
2023-08-31 d7822563b65873c59ad2363db9852782b8d5e609
ruoyi-ui/src/views/mindMap/index.vue
@@ -3,18 +3,29 @@
    <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">
    </div>
  <superMindmap  v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container"/>
  </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';
// 导入思维导图数据
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:[]
@@ -23,8 +34,31 @@
  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();
@@ -44,46 +78,84 @@
      getUserProfile().then(response => {
        this.user = response.data;
      });
      listRootAll().then(response =>{
      listRoot(4).then(response =>{
        this.rootList =response.data;
        console.log(this.rootList)
        const mindMapData = this.rootList[0];
       // console.log(this.drawData(mindMapData))
        this.mapData = this.drawData(mindMapData)
        this.showMindMap = true
      })
    }
  }
    },
    drawData(mpdata)
    {
      if(mpdata==null)
        return null
      var data = {
        "label": mpdata['nickName'],
        "prop": mpdata['nickName'],
        "url": '',
        "link": '',
        "children":[]
      }
      if(eval(mpdata['spouse'])!=null)
        data['link'] = eval(mpdata['spouse']).nickName
      if(mpdata['childList']!=null){
      for(var i = 0; i < mpdata['childList'].length; i++)
      {
        var dt = {
          "label": mpdata['childList'][i]['nickName'],
          "prop": mpdata['childList'][i]['nickName'],
          "url": '',
          "link": "",
          "children":[]
        }
        if(eval(mpdata['childList'][i]['spouse'])!=null)
          dt['link'] = eval(mpdata['childList'][i]['spouse']).nickName
        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;
}
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.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;
  position: fixed;
  margin-left: -10px;
  width: 90%;
  height: 90%;
  z-index: -1;
}
.mind-map-container{
  z-index: 2;
  opacity: 0.8;
  /*margin-top: 200px;*/
  background-color: transparent;
}
.top-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: static;
  opacity: 0.8;
}
</style>