完成家根网详情页面样式

Tcsm

2023-05-29 ebe31a83ee1c76bfc6546e8b60ae5cf90c554346

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

@@ -7,7 +7,9 @@
          <img src="../../assets/images/Frame.png">
        </span>
        <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 v-for="item in dropdownList" :key="item.src" @click.native="getInfo(item.src)" >
<!--            {{ item.name }}-->
            <span v-on:click="getFunc(item.name)">{{ item.name }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
@@ -18,48 +20,156 @@
        <!-- 背景大图-->
        <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>

        <div  v-model="rootList.url">
          <el-avatar shape="circle" class="avater_1_1" v-if="isShow_1">
            <img :src="'http://47.93.189.255:8080/'+ rootList[0].url"
            @click="getPersonInfo(rootList[0].userId)"></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 shape="circle" class="avater_1_2" v-if="isShow_1">
            <img :src="'http://47.93.189.255:8080/'+ rootList[1].url"
            @click="getPersonInfo(rootList[1].userId)"></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>
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[0][0].url"
            @click="getPersonInfo(rootSecList[0][0].userId)"></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>
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[0][1].url"
            @click="getPersonInfo(rootSecList[0][1].userId)"></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>
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[1][0].url"
             @click="getPersonInfo(rootSecList[1][0].userId)"></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>
          <img :src="'http://47.93.189.255:8080/'+ rootSecList[1][1].url"
            @click="getPersonInfo(rootSecList[1][1].userId)"></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>
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[2][0].url"
                @click="getPersonInfo(rootSecList[2][0].userId)"></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>
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[2][1].url"
                 @click="getPersonInfo(rootSecList[2][1].userId)"></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>
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[3][0].url"
                 @click="getPersonInfo(rootSecList[3][0].userId)"></img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_2_8" v-if="isShow_2">
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[3][1].url"
                 @click="getPersonInfo(rootSecList[3][1].userId)"></img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_1" v-if="isShow_3">
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[0][0].url"
                 @click="getPersonInfo(rootSecList[0][0].userId)"></img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_2" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>

          <el-avatar shape="circle" class="avater_3_3" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_4" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_5" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_6" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_7" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_8" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_9" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_10" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_11" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_12" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_13" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_14" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_15" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_16" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_17" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_18" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_19" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_20" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_21" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_1" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_2" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_3" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_4" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_5" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_6" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>

        </div>
      </div>
@@ -70,7 +180,7 @@

<script>

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

export default {
  name: "index",
@@ -78,17 +188,19 @@
    return{
      imageSrc: require('../../assets/images/Group 407.png') ,
      dropdownList: [
        { name: '只显示第一代', src: 'Group 443.png' },
        { name: '显示至第二代', src: 'Group 444.png' },
        { name: '只显示第一代', src: 'Group 407.png' },
        { name: '显示至第二代', src: 'Group 407.png' },
        { name: '显示至第三代', src: 'Group 445.png' },
        { name: '显示全部', src: 'Group 407.png' }
      ],
      rootList:[],
      rootSecList:[],
      loading: true,
      formData:[],
      isShow_2:true,
      isShow_3:true,
      isShow_4:true,
      isShow_1:false,
      isShow_2:false,
      isShow_3:false,
      isShow_4:false,
      formDat:{
        userId: undefined,
        nickName: undefined,
@@ -116,41 +228,195 @@
        url:undefined,
        familyId:undefined,
        secondFamilyId: undefined,
        childList:undefined
        childList:[{
          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,
          identity:undefined,
          childList:[{
            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,
            identity:undefined,
            childList:undefined
          }]
        }]
      }

    }

  },
  created() {
    this.getList();

    // this.getCateInfor()
    // for (let i = 0; i < this.contactList.length; i++) {
    //   this.formDat[i] = this.contactList[i];
    // }
  },
  mounted() {
     this.getList(1);
  },
  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;
    getFunc(name){
      switch (name) {
        case '显示至第二代':
          this.generation_2()
          break
        case '显示至第三代':
          this.generation_3()
          break
        case '显示全部':
          this.generation_4()
          break
        default:
          this.generation_1()
          break
      }
    },
    generation_1(){

          this.total = response.data.total;

    //  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
            })
    },
    getPersonInfo(id)
    {
            this.$router.push("/familymodel/jiagenwang/personInfo/" + id);
      //alert(id)
    },
    generation_2(){

     // alert(2356)
      //this.getList(2);
      let st = new Map()
      this.rootSecList = []
       listRoot(2).then(response => {
         this.rootList = response.data
     // console.log(this.rootList[0].childList)
     // alert(this.rootList[0].childList.length)
      for(let i = 0; i < this.rootList[0].childList.length; i++)
      {
       // alert(343)
        if(st.has(this.rootList[0].childList[i].userId)!=true)
        {
         // alert(35)
          st.set(this.rootList[0].childList[i].userId, 1);
          st.set(this.rootList[0].childList[i].spouseId,1)
          let spid = this.rootList[0].childList[i].spouseId
          let gen = []

          gen.push(this.rootList[0].childList[i])
          for(let j = 0; j < this.rootList[0].childList.length; j++)
           {
             if(this.rootList[0].childList[j].userId==spid)
             {
               gen.push(this.rootList[0].childList[j])
               break
             }
           }
           this.rootSecList.push(gen)
        }

        this.isShow_2=true
        this.isShow_1=true
        this.isShow_3=false
        this.isShow_4=false
        }
      //  console.log(this.rootSecList)
      })


    },
    generation_3(){
      this.getList(3);
      this.isShow_2=true
      this.isShow_3=true
      this.isShow_4=false
    },
    generation_4(){
      this.getList(4);
      this.isShow_2=true
      this.isShow_3=true
      this.isShow_4=true
    },
    getList(depth) {
      this.loading = true;
     // alert(23)
   //   alert(45)
      // console.log(this.queryParams)

      //  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)
       //   this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    handleEdit_1(){

    }
  }
}
</script>
@@ -175,7 +441,7 @@
}
.avater_1_1 {
  position: absolute;
  top: 94%;
  top: 95%;
  left: 51%;
  transform: translate(-50%, -50%);
  width: 54px;
@@ -185,7 +451,7 @@
}
.avater_1_2{
  position: absolute;
  top: 84%;
  top: 85%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: 45px;
@@ -194,8 +460,8 @@
}
.avater_2_1{
  position: absolute;
  top: 72%;
  left: 44%;
  top: 75%;
  left: 43%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
@@ -203,8 +469,8 @@
}
.avater_2_2{
  position: absolute;
  top: 65%;
  left: 48%;
  top: 67%;
  left: 47%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
@@ -213,7 +479,7 @@
}
.avater_2_3{
  position: absolute;
  top: 64%;
  top: 67%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 44px;
@@ -223,7 +489,7 @@
}
.avater_2_4{
  position: absolute;
  top: 73%;
  top: 76%;
  left: 59%;
  transform: translate(-50%, -50%);
  width: 36px;
@@ -233,8 +499,8 @@
}
.avater_2_5{
  position: absolute;
  top: 70%;
  left: 39%;
  top: 73%;
  left: 38%;
  transform: translate(-50%, -50%);
  width: 37px;
  height: 39px;
@@ -243,8 +509,8 @@
}
.avater_2_6{
  position: absolute;
  top: 58%;
  left: 44%;
  top: 62%;
  left: 43%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 35px;
@@ -253,7 +519,7 @@
}
.avater_2_7{
  position: absolute;
  top: 58%;
  top: 62%;
  left: 59%;
  transform: translate(-50%, -50%);
  width: 35px;
@@ -263,7 +529,7 @@
}
.avater_2_8{
  position: absolute;
  top: 70%;
  top: 73%;
  left: 64%;
  transform: translate(-50%, -50%);
  width: 45px;
@@ -271,4 +537,271 @@
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_1{
  position: absolute;
  top: 82%;
  left: 36%;
  transform: translate(-50%, -50%);
  width: 47px;
  height: 47px;
  opacity: 1;
}
.avater_3_2{
  position: absolute;
  top: 80%;
  left: 24%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 41px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_3{
  position: absolute;
  top: 65%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 53px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_4{
  position: absolute;
  top: 62%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 37px;
  height: 38px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_5{
  position: absolute;
  top: 48%;
  left: 29%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 43px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_6{
  position: absolute;
  top: 31%;
  left: 23%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 47px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_7{
  position: absolute;
  top: 37%;
  left: 31%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 47px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_8{
  position: absolute;
  top: 22%;
  left: 34%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 58px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_9{
  position: absolute;
  top: 39%;
  left: 38%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  opacity: 1;
}
.avater_3_10{
  position: absolute;
  top: 42%;
  left: 43%;
  transform: translate(-50%, -50%);
  width: 41px;
  height: 42px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_11{
  position: absolute;
  top: 28%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 33px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_12{
  position: absolute;
  top: 18%;
  left: 51%;
  transform: translate(-50%, -50%);
  width: 49px;
  height: 50px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_13{
  position: absolute;
  top: 37%;
  left: 51%;
  transform: translate(-50%, -50%);
  width: 41px;
  height: 42px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_14{
  position: absolute;
  top: 33%;
  left: 57%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_15{
  position: absolute;
  top: 35%;
  left: 64%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 39px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_16{
  position: absolute;
  top: 18%;
  left: 69%;
  transform: translate(-50%, -50%);
  width: 49px;
  height: 51px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_17{
  position: absolute;
  top: 56%;
  left: 71%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 33px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_18{
  position: absolute;
  top: 46%;
  left: 76%;
  transform: translate(-50%, -50%);
  width: 43px;
  height: 43px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_19{
  position: absolute;
  top:62%;
  left: 79%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 39px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_20{
  position: absolute;
  top: 73%;
  left: 74%;
  transform: translate(-50%, -50%);
  width: 33px;
  height: 33px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_21{
  position: absolute;
  top: 81%;
  left: 65%;
  transform: translate(-50%, -50%);
  width: 37px;
  height: 38px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_1{
  position: absolute;
  top: 50%;
  left: 21%;
  transform: translate(-50%, -50%);
  width: 51px;
  height: 52px;
  opacity: 1;
}
.avater_4_2{
  position: absolute;
  top: 23%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_3{
  position: absolute;
  top: 11%;
  left: 46%;
  transform: translate(-50%, -50%);
  width: 47px;
  height: 47px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_4{
  position: absolute;
  top: 17%;
  left: 57%;
  transform: translate(-50%, -50%);
  width: 39px;
  height: 39px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_5{
  position: absolute;
  top: 23%;
  left: 61%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_6{
  position: absolute;
  top: 32%;
  left: 73%;
  transform: translate(-50%, -50%);
  width: 41px;
  height: 43px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
</style>