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