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 | 650 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 595 insertions(+), 55 deletions(-) diff --git a/ruoyi-ui/src/views/homeRoot/index.vue b/ruoyi-ui/src/views/homeRoot/index.vue index 4f19834..2d294c1 100644 --- a/ruoyi-ui/src/views/homeRoot/index.vue +++ b/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,163 @@ <!-- 鑳屾櫙澶у浘--> <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)"> </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)"> </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)"> </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)"> </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)"> </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)"> </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)"> </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)"> </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)"> </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> @@ -70,7 +187,7 @@ <script> -import {listRoot} from "@/api/root"; +import {listRoot} from "@/api/root/index"; export default { name: "index", @@ -78,17 +195,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 +235,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 +448,7 @@ } .avater_1_1 { position: absolute; - top: 94%; + top: 95%; left: 51%; transform: translate(-50%, -50%); width: 54px; @@ -185,7 +458,7 @@ } .avater_1_2{ position: absolute; - top: 84%; + top: 85%; left: 48%; transform: translate(-50%, -50%); width: 45px; @@ -194,8 +467,8 @@ } .avater_2_1{ position: absolute; - top: 72%; - left: 44%; + top: 75%; + left: 43%; transform: translate(-50%, -50%); width: 44px; height: 44px; @@ -203,8 +476,8 @@ } .avater_2_2{ position: absolute; - top: 65%; - left: 48%; + top: 67%; + left: 47%; transform: translate(-50%, -50%); width: 44px; height: 44px; @@ -213,7 +486,7 @@ } .avater_2_3{ position: absolute; - top: 64%; + top: 67%; left: 55%; transform: translate(-50%, -50%); width: 44px; @@ -223,7 +496,7 @@ } .avater_2_4{ position: absolute; - top: 73%; + top: 76%; left: 59%; transform: translate(-50%, -50%); width: 36px; @@ -233,8 +506,8 @@ } .avater_2_5{ position: absolute; - top: 70%; - left: 39%; + top: 73%; + left: 38%; transform: translate(-50%, -50%); width: 37px; height: 39px; @@ -243,8 +516,8 @@ } .avater_2_6{ position: absolute; - top: 58%; - left: 44%; + top: 62%; + left: 43%; transform: translate(-50%, -50%); width: 34px; height: 35px; @@ -253,7 +526,7 @@ } .avater_2_7{ position: absolute; - top: 58%; + top: 62%; left: 59%; transform: translate(-50%, -50%); width: 35px; @@ -263,7 +536,7 @@ } .avater_2_8{ position: absolute; - top: 70%; + top: 73%; left: 64%; transform: translate(-50%, -50%); width: 45px; @@ -271,4 +544,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> -- Gitblit v1.9.1