epmet-work-pc-chengyang/src/views/modules/home/index.vue

<template>
	<div>
		<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>
									{{ pandectData.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"
								>
									根据数据分析结果，建议重点关注
									<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"
										@click="handleClickCategory(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" v-if="noticeData.length > 0">
							<div
								@click="handleClickNotice(item)"
								class="item"
								:key="'notice' + item.targetId + index"
								v-for="(item, index) in noticeData"
							>
								<div class="item-date">
									{{ item.createdTime }}
								</div>
								<div class="item-title">
									{{ item.content }}
								</div>
							</div>
						</div>

						<div class="cnt" v-else>
							<div class="empty">
								<img
									src="~@/assets/images/shuju/renfang/index/empty.png"
								/>
								<span>暂无提醒～</span>
							</div>
						</div>
					</div>
				</div>
				<div class="m-box m-tb">
					<div class="wrap">
						<div class="header">
							<img
								src="@/assets/images/index/title-icon-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>
		<fastcall ref="fastcall" />
	</div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";
import resiCategoryMap from "@/views/business/resi-category-map.js";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import fastcall from "@/views/modules/cpts/fastcall";

export default {
	components: { fastcall },

	data() {
		return {
			searchStatus: "ini", //ing over
			searchData: {
				type: "jumin",
				searchKey: "",
			},

			typePlaceholder: {
				jumin: "请输入姓名或联系电话或证件号",
				fangwu: "请输入小区名称或楼栋名称",
				xuqiu: "请输入需求人或需求内容或服务方",
			},

			resiCategory: {
				loading: false,
				total: "",
				list: [],
			},

			orgData: {
				id: "",
				level: "agency",
			},

			pandectData: {
				communityName: "",
				streetName: "",
				gridCount: "",
				resiCount: "",
				homeCount: "",
				floatingResiCount: "",
				permanentResiCount: "",
			},

			noticeData: [],
		};
	},
	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: {
		handleClickCategory(item) {
			this.$router.push({
				path: "/main/base-resi",
				query: {
					category: item.code,
				},
			});
		},

		handleClickNotice(item) {
			const { msgType, targetId } = item;
			if (msgType == "community_house") {
				this.$refs.fastcall.showHouseInfo(targetId);
			} else if (msgType == "resident_base_info") {
				this.$refs.fastcall.showResiInfo(targetId);
			}
		},

		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();
			this.getNoticeData();
		},

		//加载组织数据
		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 getNoticeData() {
			const url = "/message/intelligentMessage/list";
			let params = {
				last: "6",
			};

			const { data, code, msg } = await requestGet(url, params);

			if (code === 0) {
				if (data) {
					this.noticeData = 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>