From 228302bc93feabc7b51a965db4374781844cc033 Mon Sep 17 00:00:00 2001 From: linwenling <3256558519@qq.com> Date: 星期一, 24 七月 2023 23:20:30 +0800 Subject: [PATCH] 修改 --- ruoyi-ui/src/views/homeRoot/index.vue | 791 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 766 insertions(+), 25 deletions(-) diff --git a/ruoyi-ui/src/views/homeRoot/index.vue b/ruoyi-ui/src/views/homeRoot/index.vue index 01217b4..2d294c1 100644 --- a/ruoyi-ui/src/views/homeRoot/index.vue +++ b/ruoyi-ui/src/views/homeRoot/index.vue @@ -1,57 +1,428 @@ <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"> <img src="../../assets/images/Frame.png"> </span> <el-dropdown-menu slot="dropdown" > - <el-dropdown-item v-for="item in dropdownList" :key="item.src" @click="imageSrc=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-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"> + <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)"> + </el-avatar> + <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)"> + </el-avatar> + <el-avatar shape="circle" class="avater_2_1" v-if="isShow_2"> + <img :src="'http://47.93.189.255:8080/'+ rootSecList[0][0].url" + @click="getPersonInfo(rootSecList[0][0].userId)"> + </el-avatar> + <el-avatar shape="circle" class="avater_2_2" v-if="isShow_2"> + <img :src="'http://47.93.189.255:8080/'+ rootSecList[0][1].url" + @click="getPersonInfo(rootSecList[0][1].userId)"> + </el-avatar> + <el-avatar shape="circle" class="avater_2_3" v-if="isShow_2"> + <img :src="'http://47.93.189.255:8080/'+ rootSecList[1][0].url" + @click="getPersonInfo(rootSecList[1][0].userId)"> + </el-avatar> + <el-avatar shape="circle" class="avater_2_4" v-if="isShow_2"> + <img :src="'http://47.93.189.255:8080/'+ rootSecList[1][1].url" + @click="getPersonInfo(rootSecList[1][1].userId)"> + </el-avatar> + <el-avatar shape="circle" class="avater_2_5" v-if="isShow_2"> + <img :src="'http://47.93.189.255:8080/'+ rootSecList[2][0].url" + @click="getPersonInfo(rootSecList[2][0].userId)"> + </el-avatar> + <el-avatar shape="circle" class="avater_2_6" v-if="isShow_2"> + <img :src="'http://47.93.189.255:8080/'+ rootSecList[2][1].url" + @click="getPersonInfo(rootSecList[2][1].userId)"> + </el-avatar> + <el-avatar shape="circle" class="avater_2_7" v-if="isShow_2"> + <img :src="'http://47.93.189.255:8080/'+ rootSecList[3][0].url" + @click="getPersonInfo(rootSecList[3][0].userId)"> + </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)"> + </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)"> + </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> + </div> </div> </template> <script> + +import {listRoot} from "@/api/root/index"; + export default { name: "index", data(){ return{ - imageSrc: '', + imageSrc: require('../../assets/images/Group 407.png') , dropdownList: [ - { name: '鍙樉绀虹涓�浠�', src: require('../../assets/images/Group 404.png') }, - { name: '鏄剧ず鑷崇浜屼唬', src: require('../../assets/images/Group 405.png') }, - { name: '鏄剧ず鑷崇涓変唬', src: require('../../assets/images/Group 406.png') }, - { name: '鏄剧ず鍏ㄩ儴', src: require('../../assets/images/Group 407.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_1:false, + isShow_2:false, + isShow_3:false, + isShow_4:false, + 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:[{ + 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.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) + }, + 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(){ + + + // 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; + } + ); + }, } } @@ -70,4 +441,374 @@ max-width: 100%; max-height: 100%; } +.container { + position: relative; + width: 100%; + height: 100%; +} +.avater_1_1 { + position: absolute; + top: 95%; + left: 51%; + transform: translate(-50%, -50%); + width: 54px; + height: 54px; + opacity: 1; + border-radius: 133px 133px 133px 133px ; +} +.avater_1_2{ + position: absolute; + top: 85%; + left: 48%; + transform: translate(-50%, -50%); + width: 45px; + height: 45px; + opacity: 1; +} +.avater_2_1{ + position: absolute; + top: 75%; + left: 43%; + transform: translate(-50%, -50%); + width: 44px; + height: 44px; + opacity: 1; +} +.avater_2_2{ + position: absolute; + top: 67%; + left: 47%; + transform: translate(-50%, -50%); + width: 44px; + height: 44px; + border-radius: 133px 133px 133px 133px; + opacity: 1; +} +.avater_2_3{ + position: absolute; + top: 67%; + left: 55%; + transform: translate(-50%, -50%); + width: 44px; + height: 44px; + border-radius: 133px 133px 133px 133px; + opacity: 1; +} +.avater_2_4{ + position: absolute; + top: 76%; + left: 59%; + transform: translate(-50%, -50%); + width: 36px; + height: 37px; + border-radius: 133px 133px 133px 133px; + opacity: 1; +} +.avater_2_5{ + position: absolute; + top: 73%; + left: 38%; + transform: translate(-50%, -50%); + width: 37px; + height: 39px; + border-radius: 133px 133px 133px 133px; + opacity: 1; +} +.avater_2_6{ + position: absolute; + top: 62%; + left: 43%; + transform: translate(-50%, -50%); + width: 34px; + height: 35px; + border-radius: 133px 133px 133px 133px; + opacity: 1; +} +.avater_2_7{ + position: absolute; + top: 62%; + left: 59%; + transform: translate(-50%, -50%); + width: 35px; + height: 37px; + border-radius: 133px 133px 133px 133px; + opacity: 1; +} +.avater_2_8{ + position: absolute; + top: 73%; + left: 64%; + transform: translate(-50%, -50%); + width: 45px; + height: 45px; + 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> -- Gitblit v1.9.1