</template> <div class="content"> <div class="items"> <div class="label">资源类型：</div> <div class="value">{{ typeList[type] }}</div> </div> <template v-if="type === 2"> <div class="items"> <div class="label">单位名称：</div> <div class="value">{{ detail.unitName }}</div> </div> <div class="items"> <div class="label">分类：</div> <div class="value">{{ detail.typeName }}</div> </div> <div class="items"> <div class="label">服务事项：</div> <div class="value">{{ detail.serviceMatterNameList ? detail.serviceMatterNameList.join('、') : '' }}</div> </div> <div class="items"> <div class="label">联系人：</div> <div class="value">{{ detail.contact }}</div> </div> <div class="items"> <div class="label">联系电话：</div> <div class="value">{{ $sensitive( detail.contactMobile, 3, 7) }}</div> <CallPhone icon="el-icon-phone"/> </div> <div class="items"> <div class="label">地理位置：</div> <div class="value">{{ detail.address }}</div> </div> </template> <template v-if="type === 3"> <div class="items"> <div class="label">组织名称：</div> <div class="value">{{ detail.organizationName }}</div> </div> <div class="items"> <div class="label">分类：</div> <div class="value">{{ detail.categoryName }}</div> </div> <div class="items"> <div class="label">服务事项：</div> <div class="value">{{ detail.serviceItem }}</div> </div> <div class="items"> <div class="label">联系人：</div> <div class="value">{{ detail.principalName }}</div> </div> <div class="items"> <div class="label">联系电话：</div> <div class="value">{{ detail.principalPhone }}</div> <CallPhone icon="el-icon-phone"/> </div> <div class="items"> <div class="label">地理位置：</div> <div class="value">{{ detail.address }}</div> </div> </template> <template v-if="type === 4 || type === 5 || type === 1"> <div class="items"> <div class="label">姓名：</div> <div class="value">{{ detail.name }}</div> </div> <div class="items"> <div class="label">联系电话：</div> <div class="value">{{ detail.mobile }}</div> <CallPhone icon="el-icon-phone"/> </div> <div class="items"> <div class="label">年龄：</div> <div class="value">{{ detail.birthday?getAgeByDateOfBirth(detail.birthday):'未知' }}</div> </div> <div class="items"> <div class="label">学历：</div> <div class="value">{{ education?education.cultureLevelName:'' }}</div> </div>  <div class="items"> <div class="label">所在位置：</div> <div class="value">{{ detail.houseInfo? detail.houseInfo.homeName: '' }}</div> </div> <div class="items"> <div class="label">兴趣爱好：</div> <div class="value">{{ hobby?hobby.hobbyRemark:'' }}</div> </div> </template> <div class="btn-group"> <el-button class="sure" plain round type="warning" @click="handleSure">查看更多</el-button> </div> </div> </el-dialog> </div> <MapResourceInfoMore ref="MapResourceInfoMore" :currentLevelData="currentLevelData"/> </div> </template> <script> import Title from "@/views/dataBoard/satisfactionEval/components/Title"; import CallPhone from "@/views/dataBoard/cpts/CallPhone"; import MapResourceInfoMore from "@/views/dataBoard/overview/components/MapResourceInfoMore"; export default { name: "MapResourceInfo", components: {Title, CallPhone, MapResourceInfoMore}, props: { currentLevelData: { type: Object, default: () => {} } }, data() { return { dialogVisible: false, explain: "", id: '', detail: '', type: '', typeList: { 1: '志愿者', 2: '联建单位', 3: '社区自组织', 4: '网格员', 5: '公益岗' }, education: '', hobby: '', } }, mounted() { }, methods: { getAgeByDateOfBirth(dateOfBirth) { let birthDate = this.$moment(dateOfBirth); let age = this.$moment().diff(birthDate, 'years'); return age; }, handleClose(done) { this.dialogVisible = false; }, open(id, type) { console.log(id, type) //type 1志愿者、2联建单位、3社区自组织、4网格员、5公益岗 this.dialogVisible = true; this.id = id this.type = type this.getData(type) }, handleSure() { this.$refs.MapResourceInfoMore.open({ detail: this.detail, type: this.type, education: this.education, hobby: this.hobby, id: this.id }) }, getData(type) { if (type === 1) { this.getVolunteer() } if (type === 2) { this.getCompany() } if (type === 3) { this.getCommunity() } if (type === 4) { this.getGridOperator() } if (type === 5) { this.getVolunteer() } }, // 联建单位详情使用：/actual/base/icpartyunit/detail // 社区自组织详情使用：/actual/base/iccommunityselforganization/community-self-org-detail/{id} // 志愿者详情：即居民详情 /actual/base/residentBaseInfo/detail/{resi-id} + // 教育信息/actual/base/residentEduInfo/detail/{resi-id} + // 兴趣爱好信息/actual/base/residentHobbyInfo/detail/{resi-id} // 网格员详情：即工作人员详情：/data/aggregator/org/staffdetailv2 见apifox // 公益岗详情：同志愿者详情，也是查居民 getVolunteer() { this.$http.post('/actual/base/residentBaseInfo/detail/' + this.id).then(({data: {data}}) => { this.detail = data || {}; }) this.$http.get('/actual/base/residentEduInfo/detail/' + this.id).then(({data: {data}}) => { this.education = data || {}; }) this.$http.get('/actual/base/residentHobbyInfo/detail/' + this.id).then(({data: {data}}) => { this.hobby = data || {}; }) }, getCompany() { this.$http.post('/actual/base/icpartyunit/detail?id=' + this.id, {id: this.id}).then(({data: {data}}) => { this.detail = data || {}; }) }, getCommunity() { this.$http.post('/actual/base/iccommunityselforganization/community-self-org-detail/' + this.id).then(({data: {data}}) => { this.detail = data || {}; }) }, getGridOperator() { this.$http.post('/data/aggregator/org/staffdetailv2?staffId=' + this.id,{staffId: this.id}).then(({data: {data}}) => { this.detail = data || {}; }) }, } } </script> <style lang="scss" scoped src="@/assets/scss/dataBoard/dialog-small.scss"></style> <style lang="scss" scoped> .content { padding: 0 25px; .items { font-size: 14px; position: relative; display: flex; align-items: center; margin-bottom: 17px; .label { color: #9CB4D3; white-space: nowrap; } .value { color: #FFFFFF; } } } .btn-group { display: flex; align-items: center; justify-content: center; margin-top: 20px; .el-button { width: 136px; height: 36px; margin: 0 20px; } .sure { color: #8ED3FF; border: 1px solid #006CFF; background: rgba(0, 108, 255, 0.5); } .cancel { color: #B6D2FF; border: 1px solid #6496E8; background: rgba(116, 146, 194, 0.6); } } </style>