家根网页面

Tcsm

2023-05-08 d6aec1c7bfed72bb3dbb3cde615099f705511e44

家根网页面

 ruoyi-ui/src/api/root/index.js

New file
@@ -0,0 +1,37 @@
import request from '@/utils/request'

// 获取家根网
export function listRoot(query) {
  return request({
    url: '/self/user/root',
    method: 'get',
    params: query
  })
}

// 查询本人信息及配偶信息
export function getRoot(id) {
  return request({
    url: '/self/user/listMyself/' + id,
    method: 'get',

  })
}

//设置父子关系
export function setParent(data) {
  return request({
    url: '/self/user/setParent',
    method: 'put',
    data: data
  })
}

// 获取家根网
export function listUserAll(query) {
  return request({
    url: '/self/user/all',
    method: 'get',
    params: query
  })
}

 ruoyi-ui/src/assets/images/Group 407.png

 ruoyi-ui/src/assets/images/Group 443.png

 ruoyi-ui/src/assets/images/Group 444.png

 ruoyi-ui/src/assets/images/Group 445.png

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

New file
@@ -0,0 +1,15 @@
<template>
  <div>
    <h1>你好</h1>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>

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

@@ -1,6 +1,6 @@
<template>
  <div class="app-container">
    <div>
    <div class="container">
      <h1 style="font-size:21px;padding-top:30px">早上好！
      <el-dropdown style="float:right">
        <span class="el-dropdown-link">
@@ -9,52 +9,147 @@
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item v-for="item in dropdownList" :key="item.src" @click.native="getInfo(item.src)">{{ item.name }}
          </el-dropdown-item>
<!--         <el-dropdown-item >只显示第一代</el-dropdown-item>
             <el-dropdown-item >显示至第二代</el-dropdown-item>
             <el-dropdown-item >显示至第三代</el-dropdown-item>
             <el-dropdown-item >显示全部</el-dropdown-item>-->
        </el-dropdown-menu>
      </el-dropdown>

      </h1>
      <div  >
        <img v-if="imageSrc" :src="imageSrc" alt="" class="background"/>
<!--        <img v-for="item in list" v-if="item.id==index" :src="item.path">
        <img
          src="src/assets/images/Group 407.png"
          alt=""
          class="background"
        />
        <img

          src="../../assets/images/Group 404.png"
          alt=""
          class="background"
       />-->
      <div v-loading="loading" :data="rootList" >
        <!-- 背景大图-->
        <img v-if="imageSrc" :src="imageSrc" alt="" class="background"/>
        <!-- 用户头像-->
        <div v-model="rootList.url" prop="url">
          <el-avatar shape="circle" class="avater_1_1">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_1_2">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_2_1" v-if="isShow_2">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_2_2" v-if="isShow_2">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_2_3" v-if="isShow_2">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_2_4" v-if="isShow_2">
          <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
          ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_2_5" v-if="isShow_2">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_2_6" v-if="isShow_2">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_2_7" v-if="isShow_2">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_2_8" v-if="isShow_2">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>


      </div>
      </div>

    </div>
  </div>
</template>

<script>

import {listRoot} from "@/api/root";

export default {
  name: "index",
  data(){
    return{
      imageSrc: require('../../assets/images/Group 404.png') ,
      imageSrc: require('../../assets/images/Group 407.png') ,
      dropdownList: [
        { name: '只显示第一代', src: 'Group 404.png' },
        { name: '显示至第二代', src: 'Group 405.png' },
        { name: '显示至第三代', src: 'Group 406.png' },
        { name: '只显示第一代', src: 'Group 443.png' },
        { name: '显示至第二代', src: 'Group 444.png' },
        { name: '显示至第三代', src: 'Group 445.png' },
        { name: '显示全部', src: 'Group 407.png' }
      ]
      ],
      rootList:[],
      loading: true,
      formData:[],
      isShow_2:true,
      isShow_3:true,
      isShow_4:true,
      formDat:{
        userId: undefined,
        nickName: undefined,
        oldName: undefined,
        sex: undefined,
        nationality: undefined,
        nation: undefined,
        maritalStatus: undefined,
        politicalOutlook: undefined,
        phoneNumber:undefined,
        idNum: undefined,
        locationAddress: undefined,
        alwaysAddress:undefined,
        locationPolice: undefined,
        alwaysPolice: undefined,
        unit: undefined,
        position:undefined,
        outStatus:undefined,
        idNo: undefined,
        img: undefined,
        spouseId: undefined,
        fatherId: undefined,
        momId: undefined,
        birth: undefined,
        url:undefined,
        familyId:undefined,
        secondFamilyId: undefined,
        childList:undefined
    }

    }

  },
  created() {
    this.getList();
    // this.getCateInfor()
    // for (let i = 0; i < this.contactList.length; i++) {
    //   this.formDat[i] = this.contactList[i];
    // }
  },
  methods:{
    getInfo(src)
    {
      this.imageSrc = require('../../assets/images/'+src)
    },
    getList() {
      this.loading = true;
      // console.log(this.queryParams)
      //  listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      listRoot(this.queryParams).then(response => {
          //  alert(123)
          //   console.log(response.data)
          this.rootList = response.data.data;

          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    handleEdit_1(){

    }
  }
}
@@ -73,4 +168,107 @@
  max-width: 100%;
  max-height: 100%;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.avater_1_1 {
  position: absolute;
  top: 94%;
  left: 51%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  opacity: 1;
  border-radius: 133px  133px  133px  133px ;
}
.avater_1_2{
  position: absolute;
  top: 84%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  opacity: 1;
}
.avater_2_1{
  position: absolute;
  top: 72%;
  left: 44%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  opacity: 1;
}
.avater_2_2{
  position: absolute;
  top: 65%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_2_3{
  position: absolute;
  top: 64%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_2_4{
  position: absolute;
  top: 73%;
  left: 59%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 37px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_2_5{
  position: absolute;
  top: 70%;
  left: 39%;
  transform: translate(-50%, -50%);
  width: 37px;
  height: 39px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_2_6{
  position: absolute;
  top: 58%;
  left: 44%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 35px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_2_7{
  position: absolute;
  top: 58%;
  left: 59%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 37px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_2_8{
  position: absolute;
  top: 70%;
  left: 64%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
</style>