You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
288 lines
6.9 KiB
288 lines
6.9 KiB
<template>
|
|
<navigation-general :title="title">
|
|
<view class="row-title">
|
|
<view class="main-title">住户信息</view>
|
|
<u-button type="primary" :plain="true" size="mini">房屋信息采集</u-button>
|
|
</view>
|
|
|
|
<u-cell-group>
|
|
<u-cell-item title="人数" :arrow="false" :value="personTotal + '人'"></u-cell-item>
|
|
<u-cell-item title="户籍类型" :arrow="false">
|
|
<view :style="{color:houseInfo.type !== 1 ? ' rgb(0, 140, 94)' : '#d13b69' }">{{houseInfo.typename}}
|
|
</view>
|
|
</u-cell-item>
|
|
<u-cell-item title="房屋类型" :arrow="false"
|
|
v-show="houseInfo.isD>0 || houseInfo.isJ>0 || houseInfo.isK>0 || houseInfo.isX>0">
|
|
<div class="is-type">
|
|
<view style="color:#e73388 ;border-color: #81204e;" v-show="houseInfo.isD>0">中共党员</view>
|
|
<view style="color:#734700 ;border-color: #e09100;" v-show="houseInfo.isK>0">帮扶对象</view>
|
|
<view style="color:#00694c ;border-color: #00c185;" v-show="houseInfo.isX>0">重点人群</view>
|
|
<view style="color:#006382 ;border-color: #02b4e7;" v-show="houseInfo.isJ>0">退伍军人</view>
|
|
</div>
|
|
|
|
</u-cell-item>
|
|
<u-cell-item title="分色" :arrow="false">
|
|
<color-item :item="houseInfo"></color-item>
|
|
</u-cell-item>
|
|
<u-cell-item title="更新时间" :arrow="false" :value="houseInfo.updateTime"></u-cell-item>
|
|
<u-cell-item title="公安地址" :arrow="false"
|
|
:value="publicAddress[houseInfo.xiaoquId] + houseInfo.deptname + houseInfo.buildingname"></u-cell-item>
|
|
</u-cell-group>
|
|
|
|
<view class="row-title">
|
|
<view class="main-title">居民信息</view>
|
|
<u-button type="primary" :plain="true" size="mini" @click="addPerson()">新增居民</u-button>
|
|
</view>
|
|
<view class="person-list">
|
|
<view class="person-item" v-for="item in personList" :key="item.id" @click="handlerInfo(item.id)">
|
|
<text>{{item.name}}</text>
|
|
<text>{{ filterCarId(item.credentialNo, "性别") }}</text>
|
|
<text>{{ filterCarId(item.credentialNo, "年龄") }} 岁</text>
|
|
<text>{{ filterCarId(item.credentialNo, "出生年月") }}</text>
|
|
<text
|
|
:style="{color:item.color !== 'NL' ? ' rgb(0, 140, 94)' : '#d13b69' }">{{personType[item.color]}}</text>
|
|
<color-item :item="item" :showColorName="false"></color-item>
|
|
|
|
<view class="circle-point">
|
|
<view class="point-item" v-show="filterPoint(item.updateTime)" style="background: green;">
|
|
</view>
|
|
<view class="point-item" v-show="!filterPoint(item.updateTime)" style="background: red;">
|
|
</view>
|
|
</view>
|
|
|
|
<view class="color-is-type">
|
|
<image src="../../static/images/isd.png" mode="" v-show="item.isD"></image>
|
|
<image src="../../static/images/isj.png" mode="" v-show="item.isJ"></image>
|
|
<image src="../../static/images/isx.png" mode="" v-show="item.isX"></image>
|
|
<image src="../../static/images/isk.png" mode="" v-show="item.isK"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="status" :load-text="loadText" />
|
|
</navigation-general>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
handleColor,
|
|
validateAndParseIDCard
|
|
} from '@/utils/handlerColor.js'
|
|
import {
|
|
getHouse
|
|
} from '@/api/taicangpop/house.js'
|
|
import {
|
|
listPerson
|
|
} from '@/api/taicangpop/person.js'
|
|
import moment from 'moment'
|
|
export default {
|
|
data() {
|
|
return {
|
|
status: 'loadmore',
|
|
loadText: {
|
|
loadmore: '轻轻上拉',
|
|
loading: '努力加载中',
|
|
nomore: '没有更多了~'
|
|
},
|
|
title: '',
|
|
queryParams: {},
|
|
houseInfo: {},
|
|
personList: [],
|
|
personTotal: 0,
|
|
publicAddress: {
|
|
202: "滨河路大庆锦绣新城",
|
|
215: "常胜路景瑞荣御蓝湾",
|
|
242: "东仓路星雨华府",
|
|
235: "兰州路华盛六园",
|
|
267: "太平北路森茂汽车城",
|
|
},
|
|
personType: {
|
|
HZ: '自住',
|
|
HO: '自住',
|
|
NZ: '自住',
|
|
NL: '租客',
|
|
}
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.title = option.houseName
|
|
this.queryParams = option
|
|
|
|
|
|
},
|
|
onShow() {
|
|
|
|
this.getHouseInfo()
|
|
this.getPersonList()
|
|
},
|
|
methods: {
|
|
//详情页
|
|
handlerInfo(id) {
|
|
this.$u.route({
|
|
url: 'pages/house/personInfo',
|
|
params: {
|
|
personId: id,
|
|
}
|
|
})
|
|
},
|
|
|
|
//添加居民
|
|
addPerson() {
|
|
this.$u.route({
|
|
url: 'pages/house/addAndEdit',
|
|
params: {
|
|
buildingId: this.houseInfo.buildingId,
|
|
houseId: this.houseInfo.id,
|
|
deptId: this.houseInfo.deptId,
|
|
}
|
|
})
|
|
},
|
|
|
|
//获取房屋信息
|
|
async getHouseInfo() {
|
|
const res = await getHouse(this.queryParams.houseId)
|
|
res.data.updateTime = moment(res.data.updateTime).format(
|
|
"YYYY-MM-DD"
|
|
);
|
|
this.houseInfo = handleColor([res.data])[0]
|
|
},
|
|
//获取house居民
|
|
async getPersonList() {
|
|
this.status = 'loading';
|
|
const res = await listPerson({
|
|
buildingId: this.queryParams.buildingId,
|
|
houseId: this.queryParams.houseId,
|
|
|
|
})
|
|
this.personList = handleColor(res.rows)
|
|
this.personTotal = res.total
|
|
this.status = 'nomore';
|
|
},
|
|
// 身份证过滤
|
|
filterCarId(carId, type) {
|
|
return validateAndParseIDCard(carId, type);
|
|
},
|
|
//人员预警
|
|
filterPoint(updateTime) {
|
|
if (!updateTime) return false
|
|
let update_m = moment(updateTime).format('MM')
|
|
let curent_m = moment().format('MM')
|
|
if (update_m == curent_m) {
|
|
return true
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.row-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 15rpx;
|
|
|
|
.main-title {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.person-list {
|
|
box-sizing: border-box;
|
|
|
|
display: grid;
|
|
/* 启用 Grid 布局 */
|
|
grid-template-columns: repeat(3, 1fr);
|
|
/* 创建三列，列宽相等 */
|
|
gap: 25rpx;
|
|
|
|
.person-item {
|
|
position: relative;
|
|
/* 背景色，方便查看 */
|
|
padding: 20rpx;
|
|
/* 内边距 */
|
|
text-align: center;
|
|
/* 文本居中 */
|
|
background-color: #fff;
|
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.circle-point {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 10rpx;
|
|
|
|
.point-item {
|
|
height: 15rpx;
|
|
width: 15rpx;
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.color-is-type {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: 0;
|
|
|
|
&>image {
|
|
height: 25rpx;
|
|
width: 25rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.is-type {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&>view {
|
|
margin-left: 6rpx;
|
|
border: 1px solid;
|
|
box-sizing: border-box;
|
|
padding: 0 6rpx;
|
|
height: 40rpx;
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
/deep/ .u-cell-box {
|
|
margin-bottom: 15rpx;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/deep/ .u-cell {
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
/deep/.u-cell__value {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
|
|
.color-item {
|
|
margin-right: 40rpx;
|
|
}
|
|
}
|
|
|
|
/deep/ .u-load-more-wrap {
|
|
margin-top: 10rpx !important;
|
|
}
|
|
</style> |