|
|
<template>
|
|
|
<transition>
|
|
|
<div class="house-container" :style="{ width: handlerWidth }" v-show="show">
|
|
|
<div class="house-header">
|
|
|
<div class="houser-data">
|
|
|
<div class="house-main-row">
|
|
|
<div class="house-name">
|
|
|
<span class="number-font">{{ houseItem.name }}</span>
|
|
|
室（共<span class="number-font"> {{ total }} </span>人）
|
|
|
</div>
|
|
|
<div class="house-type">{{ houseItem.typename }}</div>
|
|
|
<ColorCell :item="houseItem"
|
|
|
><span class="house-color">
|
|
|
{{ houseItem.color }}</span
|
|
|
></ColorCell
|
|
|
>
|
|
|
<div
|
|
|
class="house-is"
|
|
|
style="border: 1px solid #81204e; color: #e73388"
|
|
|
v-show="houseItem.isD == 1"
|
|
|
>
|
|
|
中共党员
|
|
|
</div>
|
|
|
<div
|
|
|
class="house-is"
|
|
|
style="border: 1px solid #734700; color: #e09100"
|
|
|
v-show="houseItem.isK == 1"
|
|
|
>
|
|
|
帮扶对象
|
|
|
</div>
|
|
|
<div
|
|
|
class="house-is"
|
|
|
style="border: 1px solid #00694c; color: #00c185"
|
|
|
v-show="houseItem.isX == 1"
|
|
|
>
|
|
|
重点人群
|
|
|
</div>
|
|
|
<div
|
|
|
class="house-is"
|
|
|
style="border: 1px solid #006382; color: #02b4e7"
|
|
|
v-show="houseItem.isJ == 1"
|
|
|
>
|
|
|
退伍军人
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="btn-group">
|
|
|
<div class="btn-gather" v-show="houseItem.color == 'NO'">
|
|
|
确认空关
|
|
|
</div>
|
|
|
<div class="btn-gather">房屋信息采集</div>
|
|
|
<div class="btn-add">添加居民</div>
|
|
|
<div class="btn-close" @click="handleClose()">关闭</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="house-address">公安地址：{{ houseItem.address }}</div>
|
|
|
</div>
|
|
|
<div class="house-list" v-if="total > 0">
|
|
|
<div class="list-item" v-for="item in list" :key="item.id">
|
|
|
<div class="person-icon">
|
|
|
<img :src="filterIcon(item.credentialNo)" alt="" />
|
|
|
<div class="person-name">{{ item.name }}</div>
|
|
|
</div>
|
|
|
<div class="person-data">
|
|
|
<div class="data-row">
|
|
|
<div class="row-item">
|
|
|
<div class="row-item-lable">
|
|
|
性別：{{ getGender(item.credentialNo) }}
|
|
|
</div>
|
|
|
<div class="row-item-value"></div>
|
|
|
</div>
|
|
|
<div class="row-item">
|
|
|
<div class="row-item-lable">身份证号：</div>
|
|
|
<div class="row-item-value">{{ item.credentialNo }}</div>
|
|
|
</div>
|
|
|
<div class="row-item">
|
|
|
<div class="row-item-lable">户籍：</div>
|
|
|
<div
|
|
|
class="row-item-value"
|
|
|
:style="{ color: item.type == 1 ? '#00C185' : '#E73388' }"
|
|
|
>
|
|
|
{{ item.typename }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row">
|
|
|
<div class="row-item">
|
|
|
<div class="row-item-lable">年龄：</div>
|
|
|
<div class="row-item-value">
|
|
|
{{ calculateAge(item.credentialNo) }}岁
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row-item">
|
|
|
<div class="row-item-lable">手机号：</div>
|
|
|
<div class="row-item-value">{{ item.phone }}</div>
|
|
|
</div>
|
|
|
<div class="row-item">
|
|
|
<div class="row-item-lable">分色：</div>
|
|
|
<div class="row-item-value">
|
|
|
<ColorCell :item="item" size="small"
|
|
|
><span class="house-color">
|
|
|
{{ item.color }}</span
|
|
|
></ColorCell
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row">
|
|
|
<div class="row-item">
|
|
|
<div class="row-item-lable">出生年月：</div>
|
|
|
<div class="row-item-value">
|
|
|
{{ extractBirthMonth(item.credentialNo) }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row-item">
|
|
|
<div class="row-item-lable">数据更新时间：</div>
|
|
|
<div class="row-item-value" style="color: #ffb82f">
|
|
|
{{ item.updateTime }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row-item">
|
|
|
<div class="row-item-lable">更新人员：</div>
|
|
|
<div class="row-item-value" style="color: #ffb82f">
|
|
|
{{ item.updateBy }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-row last-row">
|
|
|
<div class="is-list">
|
|
|
<div
|
|
|
class="house-is"
|
|
|
style="border: 1px solid #81204e; color: #e73388"
|
|
|
v-show="item.isD == 1"
|
|
|
>
|
|
|
中共党员
|
|
|
</div>
|
|
|
<div
|
|
|
class="house-is"
|
|
|
style="border: 1px solid #734700; color: #e09100"
|
|
|
v-show="item.isK == 1"
|
|
|
>
|
|
|
帮扶对象
|
|
|
</div>
|
|
|
<div
|
|
|
class="house-is"
|
|
|
style="border: 1px solid #00694c; color: #00c185"
|
|
|
v-show="item.isX == 1"
|
|
|
>
|
|
|
重点人群
|
|
|
</div>
|
|
|
<div
|
|
|
class="house-is"
|
|
|
style="border: 1px solid #006382; color: #02b4e7"
|
|
|
v-show="item.isJ == 1"
|
|
|
>
|
|
|
退伍军人
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row-btn">
|
|
|
<div>删除</div>
|
|
|
|
|
|
<div>修改</div>
|
|
|
<div>设为户主</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item-key" v-show="houseItem.holderId == item.id">
|
|
|
<span>户主</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="no-data">
|
|
|
<el-empty
|
|
|
:image="require('@/assets/images/ui/noData.png')"
|
|
|
description="暂无居民"
|
|
|
></el-empty>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters } from "vuex";
|
|
|
import { getHouse } from "@/api/taicangpop/house.js";
|
|
|
import { listPerson } from "@/api/taicangpop/person.js";
|
|
|
import { pxToVw, handleColor } from "@/utils/myFuntion.js";
|
|
|
import ColorCell from "@/components/ColorCell";
|
|
|
export default {
|
|
|
components: { ColorCell },
|
|
|
data() {
|
|
|
return {
|
|
|
show: false,
|
|
|
total: 0,
|
|
|
list: [],
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
houseItem: {
|
|
|
handler(val) {
|
|
|
if (!val.id) return;
|
|
|
this.getPersonList();
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
...mapGetters(["houseItem", "queryParamsXiaoqu"]),
|
|
|
handlerWidth() {
|
|
|
return pxToVw(this.houseItem.buildingWidth);
|
|
|
},
|
|
|
},
|
|
|
created() {},
|
|
|
methods: {
|
|
|
filterIcon(credentialNo) {
|
|
|
let sex = this.getGender(credentialNo);
|
|
|
if (sex == "男") {
|
|
|
return require("@/assets/images/ui/img_man@2x.png");
|
|
|
} else {
|
|
|
return require("@/assets/images/ui/img_woman@2x.png");
|
|
|
}
|
|
|
},
|
|
|
|
|
|
handleClose() {
|
|
|
this.show = false;
|
|
|
this.$store.commit("SET_BUILDING_WIDTH", {});
|
|
|
},
|
|
|
async getPersonList() {
|
|
|
let result = await getHouse(this.houseItem.id);
|
|
|
this.houseItem.holderId = result.data.holderId; //户主
|
|
|
this.houseItem.address = result.data.address;
|
|
|
let res = await listPerson({
|
|
|
buildingId: this.houseItem.buildingId,
|
|
|
houseId: this.houseItem.id,
|
|
|
deptId: this.houseItem.deptId,
|
|
|
});
|
|
|
|
|
|
this.list = handleColor(res.rows);
|
|
|
this.total = res.total;
|
|
|
this.show = true;
|
|
|
},
|
|
|
isValidID(id) {
|
|
|
// 校验长度和基本格式
|
|
|
if (!/^\d{15}|\d{18}$/.test(id)) return false;
|
|
|
|
|
|
// 将15位升级为18位
|
|
|
if (id.length === 15) {
|
|
|
id =
|
|
|
id.substr(0, 6) + "19" + id.substr(6) + this.calculateCheckDigit(id);
|
|
|
}
|
|
|
|
|
|
// 验证18位身份证的校验位
|
|
|
return this.validateID18(id);
|
|
|
},
|
|
|
|
|
|
validateID18(id) {
|
|
|
if (!/^\d{17}[\dXx]$/.test(id)) return false;
|
|
|
|
|
|
// 校验码计算
|
|
|
const checkDigits = "10X98765432";
|
|
|
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
|
|
let sum = 0;
|
|
|
|
|
|
for (let i = 0; i < 17; i++) {
|
|
|
sum += id[i] * weights[i];
|
|
|
}
|
|
|
|
|
|
const checkDigit = checkDigits[sum % 11];
|
|
|
return checkDigit.toUpperCase() === id[17].toUpperCase();
|
|
|
},
|
|
|
|
|
|
calculateCheckDigit(id) {
|
|
|
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
|
|
const checkDigits = "10X98765432";
|
|
|
let sum = 0;
|
|
|
|
|
|
for (let i = 0; i < id.length; i++) {
|
|
|
sum += id[i] * weights[i];
|
|
|
}
|
|
|
|
|
|
return checkDigits[sum % 11];
|
|
|
},
|
|
|
|
|
|
calculateAge(id) {
|
|
|
if (!this.isValidID(id)) return "Invalid ID";
|
|
|
|
|
|
let birthDate;
|
|
|
if (id.length === 18) {
|
|
|
// 从18位身份证中提取出生日期
|
|
|
birthDate = id.substr(6, 8);
|
|
|
} else if (id.length === 15) {
|
|
|
// 从15位身份证中提取出生日期
|
|
|
birthDate = "19" + id.substr(6, 6);
|
|
|
} else {
|
|
|
return "Invalid ID length";
|
|
|
}
|
|
|
|
|
|
// 格式化出生日期
|
|
|
birthDate = birthDate.replace(/(.{4})(.{2})/, "$1-$2-");
|
|
|
const birth = new Date(birthDate);
|
|
|
const today = new Date();
|
|
|
let age = today.getFullYear() - birth.getFullYear();
|
|
|
|
|
|
// 计算是否已过生日
|
|
|
if (
|
|
|
today.getMonth() + 1 < birth.getMonth() + 1 ||
|
|
|
(today.getMonth() + 1 === birth.getMonth() + 1 &&
|
|
|
today.getDate() < birth.getDate())
|
|
|
) {
|
|
|
age--;
|
|
|
}
|
|
|
|
|
|
return age;
|
|
|
},
|
|
|
|
|
|
extractBirthMonth(id) {
|
|
|
if (!this.isValidID(id)) return "Invalid ID";
|
|
|
|
|
|
let birthDate;
|
|
|
if (id.length === 18) {
|
|
|
// 从18位身份证中提取出生日期
|
|
|
birthDate = id.substr(6, 8);
|
|
|
} else if (id.length === 15) {
|
|
|
// 从15位身份证中提取出生日期
|
|
|
birthDate = "19" + id.substr(6, 6);
|
|
|
} else {
|
|
|
return "Invalid ID length";
|
|
|
}
|
|
|
|
|
|
// 格式化出生日期为 YYYY-MM
|
|
|
birthDate = birthDate.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2");
|
|
|
return birthDate;
|
|
|
},
|
|
|
|
|
|
getGender(id) {
|
|
|
if (!this.isValidID(id)) return "Invalid ID";
|
|
|
|
|
|
// 在18位身份证中，第17位为性别标识
|
|
|
return parseInt(id[16]) % 2 === 0 ? "女" : "男";
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
div {
|
|
|
font-family: "Alibaba-PuHuiTi-Regular.otf";
|
|
|
}
|
|
|
.house-container {
|
|
|
position: absolute;
|
|
|
z-index: 100;
|
|
|
top: 75px;
|
|
|
left: 0;
|
|
|
height: calc(100% - 75px);
|
|
|
display: flex;
|
|
|
overflow-y: auto;
|
|
|
background: #113666;
|
|
|
border: 1px solid #2d6cad;
|
|
|
border-right: 0px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
box-sizing: border-box;
|
|
|
padding: 15px;
|
|
|
.house-header {
|
|
|
.houser-data {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
& > div {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.house-list {
|
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
|
|
|
.list-item {
|
|
|
position: relative;
|
|
|
height: calc((100% / 4) - 15px);
|
|
|
border: 1px solid #2468c1;
|
|
|
margin-bottom: 15px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
overflow: hidden;
|
|
|
.item-key {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
height: 66px;
|
|
|
width: 66px;
|
|
|
background: url("~@/assets/images/ui/img_tag_hz@2x.png");
|
|
|
background-size: 100% 100%;
|
|
|
font-size: 18px;
|
|
|
line-height: 40px;
|
|
|
color: #ffffff;
|
|
|
text-shadow: 0px 2px 0px rgba(7, 58, 123, 0.5);
|
|
|
font-family: "BY";
|
|
|
text-align: right;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
transform: rotate(45deg);
|
|
|
}
|
|
|
}
|
|
|
.person-icon {
|
|
|
width: 170px;
|
|
|
height: 100%;
|
|
|
background: linear-gradient(0deg, #00234e, #003980);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
img {
|
|
|
display: block;
|
|
|
height: 74px;
|
|
|
width: 74px;
|
|
|
}
|
|
|
.person-name {
|
|
|
margin-top: 10px;
|
|
|
font-size: 16px;
|
|
|
color: #ffffff;
|
|
|
background: url("~@/assets/images/ui/img_name_bg@2x.png");
|
|
|
background-size: 100% 100%;
|
|
|
padding: 3px 20px;
|
|
|
}
|
|
|
}
|
|
|
.person-data {
|
|
|
flex: 1;
|
|
|
height: 100%;
|
|
|
padding: 0 10px;
|
|
|
background: #004994;
|
|
|
.data-row,
|
|
|
.row-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.data-row {
|
|
|
height: calc(100% / 4);
|
|
|
font-size: 14px;
|
|
|
color: #9acfff;
|
|
|
font-weight: 400;
|
|
|
// padding: 10px 0;
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
.row-item-value {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
.data-row > div {
|
|
|
flex: 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.house-main-row > div {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.house-name {
|
|
|
font-size: 18px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
.number-font {
|
|
|
font-size: 20px;
|
|
|
color: #ffffff;
|
|
|
font-style: italic;
|
|
|
font-family: "DIN-Medium-2.otf";
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.last-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
border: 0px !important;
|
|
|
.is-list,
|
|
|
.row-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.is-list > div {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.row-btn {
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
|
& > div {
|
|
|
cursor: pointer;
|
|
|
color: #fff;
|
|
|
margin: 0 0 0 10px;
|
|
|
font-size: 14px;
|
|
|
|
|
|
background: url("~@/assets/images/ui/btn_1@2x.png");
|
|
|
background-size: 100% 100%;
|
|
|
padding: 3px 15px;
|
|
|
}
|
|
|
& > div:last-child {
|
|
|
background: url("~@/assets/images/ui/tab1.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.house-is {
|
|
|
font-size: 14px;
|
|
|
background: rgba(3, 24, 47, 0.8);
|
|
|
padding: 0 6px;
|
|
|
}
|
|
|
.house-type {
|
|
|
font-size: 14px;
|
|
|
color: #00c185;
|
|
|
}
|
|
|
.house-color {
|
|
|
display: inline-block;
|
|
|
margin-left: 3px;
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.btn-group > div {
|
|
|
cursor: pointer;
|
|
|
margin-left: 5px;
|
|
|
font-size: 14px;
|
|
|
color: #cdfbff;
|
|
|
font-weight: 400;
|
|
|
padding: 7px 12px 10px 12px;
|
|
|
background: url("~@/assets/images/ui/btn_bg.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
.btn-group > div:last-child {
|
|
|
background: transparent;
|
|
|
}
|
|
|
.house-address {
|
|
|
font-size: 18px;
|
|
|
color: #ffffff;
|
|
|
font-family: "Alibaba-PuHuiTi-Regular.otf";
|
|
|
margin: 3px 0 6px 0;
|
|
|
}
|
|
|
.no-data {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 下面我们会解释这些 class 是做什么的 */
|
|
|
.v-enter-active,
|
|
|
.v-leave-active {
|
|
|
transition: opacity 0.5s ease;
|
|
|
}
|
|
|
|
|
|
.v-enter-from,
|
|
|
.v-leave-to {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
width: 3px;
|
|
|
height: 3px;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
border-radius: 10px;
|
|
|
height: 10px;
|
|
|
width: 1px;
|
|
|
background: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
::-webkit-scrollbar-track {
|
|
|
background: transparent;
|
|
|
}
|
|
|
</style>
|
