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.
402 lines
12 KiB
402 lines
12 KiB
<template>
|
|
<div class="g-row">
|
|
<div class="g-row-left">
|
|
<div class="m-box m-search">
|
|
<div class="wrap">
|
|
<div class="title">
|
|
<span>社区查询</span>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<div
|
|
:class="{ 'z-on': searchData.type == 'jumin' }"
|
|
@click="searchData.type = 'jumin'"
|
|
>
|
|
查居民
|
|
</div>
|
|
<div
|
|
:class="{ 'z-on': searchData.type == 'fangwu' }"
|
|
@click="searchData.type = 'fangwu'"
|
|
>
|
|
查房屋
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search">
|
|
<div class="search-input">
|
|
<div class="input">
|
|
<input
|
|
type="text"
|
|
:placeholder="typePlaceholder[searchData.type]"
|
|
v-model="searchData.searchKey"
|
|
@keyup.enter="handleClickSearchBtn"
|
|
/>
|
|
|
|
<div
|
|
class="close-btn"
|
|
v-if="searchData.searchKey != ''"
|
|
@click="searchData.searchKey = ''"
|
|
>
|
|
<img src="@/assets/img/shequ/close.png" />
|
|
</div>
|
|
</div>
|
|
<div class="btn" @click="handleClickSearchBtn">查一下</div>
|
|
</div>
|
|
<div class="btn2" @click="handleClickSearchBtn">
|
|
<img src="@/assets/images/index/i-search.png" />
|
|
智能搜索
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="m-box m-pan">
|
|
<div class="wrap">
|
|
<div class="header">
|
|
<img src="@/assets/images/index/title-icon-sqzl.png" />
|
|
<span>社区总览</span>
|
|
</div>
|
|
<div class="cnt">
|
|
<div class="cnt-left">
|
|
<div class="subtitle">
|
|
<img src="@/assets/images/index/i-sqjj.png" />
|
|
<span>社区简介</span>
|
|
</div>
|
|
<p>
|
|
{{ deptName }}，<span v-if="pandectData.gridCount"
|
|
>划分为{{ pandectData.underCount }}个{{
|
|
pandectData.underName
|
|
}}，</span
|
|
>现有居民{{ pandectData.homeCount }}户、{{
|
|
pandectData.resiCount
|
|
}}人，其中常住人口{{
|
|
pandectData.permanentResiCount
|
|
}}人，流动人口{{
|
|
pandectData.floatingResiCount
|
|
}}人，各类群体分布如下：
|
|
</p>
|
|
|
|
<div class="subtitle">
|
|
<img src="@/assets/images/index/i-fxjg.png" />
|
|
<span>分析结果</span>
|
|
</div>
|
|
|
|
<p class="hint" v-if="resiCategory.list.length > 0">
|
|
<i>*</i> 根据数据分析结果，建议重点关注
|
|
<b
|
|
>{{ resiCategory.list[0].name }}、{{
|
|
resiCategory.list[1].name
|
|
}}、{{ resiCategory.list[2].name }}</b
|
|
>
|
|
三类群体，开展相关的社区服务和活动。
|
|
</p>
|
|
</div>
|
|
<div class="cnt-right">
|
|
<div class="list">
|
|
<div
|
|
class="item"
|
|
:key="item.code"
|
|
v-for="(item, index) in resiCategory.list"
|
|
>
|
|
<div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
|
|
<div class="item-name">{{ item.name }}</div>
|
|
<div class="item-div"></div>
|
|
<div class="item-count">{{ item.count }}人</div>
|
|
<div class="item-progress">
|
|
<b :style="{ width: item.per + '%' }"></b>
|
|
</div>
|
|
<div class="item-per">{{ item.per }} %</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="g-row-right">
|
|
<div class="m-box m-tx">
|
|
<div class="wrap">
|
|
<div class="header">
|
|
<img src="@/assets/images/index/title-icon-zntx.png" />
|
|
<span>智能提醒</span>
|
|
</div>
|
|
<div class="more" @click="toNoticePage">更多></div>
|
|
<div class="cnt">
|
|
<div class="item">
|
|
<div class="item-date">2022-09-12 10:25</div>
|
|
<div class="item-title">
|
|
鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-date">2022-09-12 10:25</div>
|
|
<div class="item-title">
|
|
鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-date">2022-09-12 10:25</div>
|
|
<div class="item-title">
|
|
鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-date">2022-09-12 10:25</div>
|
|
<div class="item-title">
|
|
鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-date">2022-09-12 10:25</div>
|
|
<div class="item-title">
|
|
鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-date">2022-09-12 10:25</div>
|
|
<div class="item-title">
|
|
鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="m-box m-tb">
|
|
<div class="wrap">
|
|
<div class="header">
|
|
<img src="@/assets/images/index/i-zntb.png" />
|
|
<span>智能填报</span>
|
|
</div>
|
|
</div>
|
|
<div class="more">更多></div>
|
|
<div class="cnt">
|
|
<div class="item">
|
|
<img class="item-tag" src="@/assets/images/index/i-zntb.png" />
|
|
<div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
|
|
<div class="item-btns">
|
|
<div class="item-btn">
|
|
<img src="@/assets/images/index/i-tx.png" />
|
|
<span>填写</span>
|
|
</div>
|
|
<div class="item-btn">
|
|
<img src="@/assets/images/index/i-xz.png" />
|
|
<span>下载</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img class="item-tag" src="@/assets/images/index/i-zntb.png" />
|
|
<div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
|
|
<div class="item-btns">
|
|
<div class="item-btn">
|
|
<img src="@/assets/images/index/i-tx.png" />
|
|
<span>填写</span>
|
|
</div>
|
|
<div class="item-btn">
|
|
<img src="@/assets/images/index/i-xz.png" />
|
|
<span>下载</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img class="item-tag" src="@/assets/images/index/i-zntb.png" />
|
|
<div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
|
|
<div class="item-btns">
|
|
<div class="item-btn">
|
|
<img src="@/assets/images/index/i-tx.png" />
|
|
<span>填写</span>
|
|
</div>
|
|
<div class="item-btn">
|
|
<img src="@/assets/images/index/i-xz.png" />
|
|
<span>下载</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img class="item-tag" src="@/assets/images/index/i-zntb.png" />
|
|
<div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
|
|
<div class="item-btns">
|
|
<div class="item-btn">
|
|
<img src="@/assets/images/index/i-tx.png" />
|
|
<span>填写</span>
|
|
</div>
|
|
<div class="item-btn">
|
|
<img src="@/assets/images/index/i-xz.png" />
|
|
<span>下载</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost, requestGet } from "@/js/dai/request";
|
|
import resiCategoryMap from "@/views/business/resi-category-map";
|
|
import { mapGetters } from "vuex";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
|
|
export default {
|
|
components: {},
|
|
|
|
data() {
|
|
return {
|
|
searchStatus: "ini", //ing over
|
|
searchData: {
|
|
type: "jumin",
|
|
searchKey: "",
|
|
},
|
|
|
|
typePlaceholder: {
|
|
jumin: "请输入姓名或电话或身份证号",
|
|
fangwu: "请输入“小区名称，楼号”，如：亿联小区，1号楼",
|
|
xuqiu: "请输入需求人或需求内容或服务方",
|
|
},
|
|
|
|
resiCategory: {
|
|
loading: false,
|
|
total: "",
|
|
list: [],
|
|
},
|
|
|
|
orgData: {
|
|
id: "",
|
|
level: "agency",
|
|
},
|
|
|
|
pandectData: {
|
|
communityName: "",
|
|
streetName: "",
|
|
gridCount: "",
|
|
resiCount: "",
|
|
homeCount: "",
|
|
floatingResiCount: "",
|
|
permanentResiCount: "",
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
maxTableHeight() {
|
|
// return this.clientHeight - 450;
|
|
return 420;
|
|
},
|
|
...mapGetters(["clientHeight"]),
|
|
},
|
|
watch: {
|
|
"searchData.searchKey": function (val) {
|
|
if (val == "") {
|
|
this.searchStatus = "ini";
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getApiData();
|
|
console.log(
|
|
"dynamicMenuRoutes----------------------------",
|
|
this.$store.state.sidebarMenuList
|
|
);
|
|
},
|
|
methods: {
|
|
toNoticePage() {
|
|
this.$router.push({
|
|
path: "/main/home-notice",
|
|
});
|
|
},
|
|
|
|
toSearchPage(type, searchKey) {
|
|
this.$router.push({
|
|
path: "/main/shequ-chaxun",
|
|
query: {
|
|
type,
|
|
searchKey,
|
|
},
|
|
});
|
|
},
|
|
|
|
handleClickSearchBtn() {
|
|
const {
|
|
searchData: { type, searchKey },
|
|
} = this;
|
|
if (!searchKey) return this.$message.error("请输入搜索条件");
|
|
this.toSearchPage(type, searchKey);
|
|
},
|
|
|
|
async getApiData() {
|
|
await this.getOrgData();
|
|
this.getWarningList();
|
|
this.getPandectData();
|
|
},
|
|
|
|
//加载组织数据
|
|
async getOrgData() {
|
|
const url = "/gov/org/agency/maporg";
|
|
let params = {
|
|
orgId: "",
|
|
level: "",
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
this.orgData = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getPandectData() {
|
|
const url = "/actual/base/residentHouseMerge/communityOverview";
|
|
let params = {
|
|
// orgId: "",
|
|
// level: "",
|
|
};
|
|
|
|
const { data, code, msg } = await requestGet(url, params);
|
|
|
|
if (code === 0) {
|
|
if (data) {
|
|
this.pandectData = data;
|
|
}
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getWarningList() {
|
|
const url = "/actual/base/resiCategory/categoryCountList";
|
|
let params = {
|
|
// id: this.orgData.id,
|
|
// level: "agency",
|
|
};
|
|
|
|
this.resiCategory.loading = true;
|
|
const { data, code, msg } = await requestGet(url, params);
|
|
this.resiCategory.loading = false;
|
|
|
|
if (code === 0) {
|
|
if (data) {
|
|
this.resiCategory.count = data.resiCount;
|
|
this.resiCategory.list = data.categoryList.map((item) => {
|
|
return {
|
|
code: item.categoryName,
|
|
name: resiCategoryMap[item.categoryName] || "",
|
|
count: item.categoryCount,
|
|
per: parseInt((100 * item.categoryCount) / data.resiCount),
|
|
const: "const",
|
|
};
|
|
});
|
|
}
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" src="@/assets/scss/modules/index.scss" scoped></style>
|
|
|