10 changed files with 347 additions and 63 deletions
@ -0,0 +1,217 @@ |
|||||
|
<template> |
||||
|
<div class="event-list-modal" v-show="gridInfoDialog" @click="set_gridInfoDialog(false)"> |
||||
|
<div class="grid-info-dialog"> |
||||
|
<div class="title-container"> |
||||
|
<div class="title-icon"> |
||||
|
<img src="@/assets/images/grid-icon.png" alt="" /> |
||||
|
</div> |
||||
|
<div class="title">网格详情</div> |
||||
|
</div> |
||||
|
<div class="detail-content"> |
||||
|
<div class="content-item"> |
||||
|
<div class="label">网格名称</div> |
||||
|
<div class="content">{{ gridInfo.name || '--' }}</div> |
||||
|
</div> |
||||
|
<div class="content-item"> |
||||
|
<div class="label">网格长</div> |
||||
|
<div class="content">{{ gridInfo.leader || '--' }}</div> |
||||
|
</div> |
||||
|
<div class="content-item"> |
||||
|
<div class="label">性别</div> |
||||
|
<div class="content">{{ gridInfo.sex || '--' }}</div> |
||||
|
</div> |
||||
|
<div class="content-item"> |
||||
|
<div class="label">联系电话</div> |
||||
|
<div class="content">{{ gridInfo.mobile || '--' }}</div> |
||||
|
</div> |
||||
|
<div class="content-item"> |
||||
|
<div class="label">家庭住址</div> |
||||
|
<div class="content">{{ gridInfo.address || '--' }}</div> |
||||
|
</div> |
||||
|
<div class="content-item"> |
||||
|
<div class="label">房屋信息</div> |
||||
|
<div class="content"> |
||||
|
<span class="look-detail" @click="lookDetail" v-show="productId">点击查看</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div class="trigger"></div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Bus from 'utils/eventBus' |
||||
|
import { getGridDetailS, getGridGeoPolygon } from 'api/screen-content-center' |
||||
|
import { mapGetters, mapActions } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
name: 'grid-info-dialog', |
||||
|
data() { |
||||
|
return { |
||||
|
gridInfo: { name: null, leader: null, sex: null, mobile: null, address: null }, |
||||
|
gridId: '', |
||||
|
productId:'' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
Bus.$off('emitgridInfoDialogData', this.emitgridInfoDialogData.bind(this)) |
||||
|
Bus.$on('emitgridInfoDialogData', this.emitgridInfoDialogData.bind(this)) |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters(['gridInfoDialog']) |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapActions({ |
||||
|
set_gridInfoDialog: "SET_GRIDINFODIALOG", |
||||
|
}), |
||||
|
getGridGeoPolygon() { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
getGridGeoPolygon().then(data => { |
||||
|
resolve(data) |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取网格详情 |
||||
|
async emitgridInfoDialogData({ gridId }) { |
||||
|
this.gridId = gridId || '' |
||||
|
const params = { |
||||
|
deptId: gridId |
||||
|
} |
||||
|
|
||||
|
let { data } = await getGridDetailS(params) |
||||
|
if (data) { |
||||
|
console.log(data.id); |
||||
|
this.gridInfo = data |
||||
|
let {features} = await this.getGridGeoPolygon() |
||||
|
console.log(features); |
||||
|
this.productId = features.filter(item => item.properties.gridId == data.id)[0].properties.productId || '' |
||||
|
} else { |
||||
|
console.log('获取网格详情失败'); |
||||
|
} |
||||
|
// getGridDetailS(params).then(({ data: res }) => { |
||||
|
// if (res) { |
||||
|
// this.gridInfo = res |
||||
|
|
||||
|
// } |
||||
|
// }).catch(err => { |
||||
|
// console.error('获取网格详情', err) |
||||
|
// }) |
||||
|
}, |
||||
|
// 查看房屋信息 |
||||
|
lookDetail() { |
||||
|
Bus.$emit('showHourseInfoDialog', { gridId: this.productId }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.event-list-modal { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
z-index: 150; |
||||
|
|
||||
|
.grid-info-dialog { |
||||
|
width: 408px; |
||||
|
height: 288px; |
||||
|
background: url("~@/assets/images/grid-dialog-bg.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
.title-container { |
||||
|
width: 100%; |
||||
|
height: 48px; |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
box-sizing: border-box; |
||||
|
padding: 18px 0 0 26px; |
||||
|
|
||||
|
.title-icon { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 18px; |
||||
|
font-weight: 900; |
||||
|
background: linear-gradient(0deg, #85e3f9 0%, #ffffff 60%, #ffffff 100%); |
||||
|
background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
color: transparent; |
||||
|
margin-left: 3px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail-content { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 30px - 18px - 30px); |
||||
|
box-sizing: border-box; |
||||
|
padding: 15px 30px 0 50px; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.content-item { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
|
||||
|
.label { |
||||
|
width: 80px; |
||||
|
font-size: 16px; |
||||
|
font-family: "PingFang Regular"; |
||||
|
font-weight: 900; |
||||
|
color: #b5d9ff; |
||||
|
line-height: 32px; |
||||
|
opacity: 0.76; |
||||
|
display: inline-block; |
||||
|
text-align: justify; |
||||
|
text-justify: distribute-all-lines; |
||||
|
text-align-last: justify; |
||||
|
position: relative; |
||||
|
margin-right: 20px; |
||||
|
|
||||
|
&::after { |
||||
|
content: ":"; |
||||
|
color: #b5d9ff; |
||||
|
position: absolute; |
||||
|
top: -1px; |
||||
|
right: -6px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: calc(100% - 100px); |
||||
|
font-size: 16px; |
||||
|
font-family: "PingFang Regular"; |
||||
|
font-weight: 900; |
||||
|
color: #fff; |
||||
|
line-height: 26px; |
||||
|
padding: 3px 0; |
||||
|
|
||||
|
.look-detail { |
||||
|
color: #ffd314; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.trigger { |
||||
|
width: 0px; |
||||
|
height: 0px; |
||||
|
border: 10px solid transparent; |
||||
|
border-top: 10px solid #0885f1; |
||||
|
position: absolute; |
||||
|
bottom: -11px; |
||||
|
left: 30px; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue