TaicangPopulationApp2/pages/house/house.vue

<template>
	<navigation-general :title="title">
		<view class="row-title">
			<view class="main-title">住户信息</view>
			<u-button type="primary" :plain="true" size="mini" @click="handlerGather()">房屋信息采集</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: {
			//房屋信息采集
			handlerGather() {
				this.$u.route({
					url: 'pages/house/houseGather',
					params: {
						buildingId: this.houseInfo.buildingId,
						houseId: this.houseInfo.id,
						deptId: this.houseInfo.deptId,
					}
				})
			},
			//详情页
			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>