epmet-work-pc/src/views/dataBoard/renfang/index.vue

<template>
	<div>
		<cpt-bread v-if="true" @tap="clickBreadItem" :bread-list="breadList" />
		<div class="g-row">
			<div class="g-left">
				<div class="m-box">
					<div class="box-title">
						<img
							src="~@/assets/images/shuju/main/card-title-bg-480.png"
							class="box-title-bg"
						/>
						<div class="box-title-txt">房屋概览</div>
					</div>

					<div class="m-subbox">
						<fwgl :orgId="orgData.id"></fwgl>
					</div>
				</div>

				<div class="m-box">
					<div class="box-title">
						<img
							src="~@/assets/images/shuju/main/card-title-bg-480.png"
							class="box-title-bg"
						/>
						<div class="box-title-txt">居民概览</div>
					</div>

					<div class="m-subbox">
						<jmgl :orgId="orgData.id"></jmgl>
					</div>
				</div>
			</div>

			<div class="g-center">
				<div class="m-map">
					<div class="m-per">
						<div class="item">
							<div class="item-info">
								<div>
									<img
										src="~@/assets/images/shuju/renfang/index/per/lnr.png"
									/>老年人
								</div>
								<div>
									<b>{{ perInfo.aged_ratio }}</b>
									%
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item-info">
								<div>
									<img
										src="~@/assets/images/shuju/renfang/index/per/qsn.png"
									/>青少年
								</div>
								<div>
									<b>{{ perInfo.teenagers_ratio }}</b>
									%
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item-info">
								<div>
									<img
										src="~@/assets/images/shuju/renfang/index/per/zyz.png"
									/>志愿者
								</div>
								<div>
									<b>{{ perInfo.volunteer_ratio }}</b>
									%
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item-info">
								<div>
									<img
										src="~@/assets/images/shuju/renfang/index/per/dy.png"
									/>党员
								</div>
								<div>
									<b>{{ perInfo.crowd_ratio }}</b>
									%
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item-info">
								<div>
									<img
										src="~@/assets/images/shuju/renfang/index/per/syry.png"
									/>失业人员
								</div>
								<div>
									<b>{{ perInfo.unemployed_ratio }}</b>
									%
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item-info">
								<div>
									<img
										src="~@/assets/images/shuju/renfang/index/per/ygxl.png"
									/>
									月更新率
								</div>
								<div>
									<b>{{ perInfo.month_update_ratio }}</b>
									%
								</div>
							</div>
						</div>
					</div>

					<grid-map
						ref="map"
						v-if="orgData.id"
						@clickAgency="clickAgencyItem"
						:srcGridData="orgData"
					/>
				</div>

				<div class="m-search">
					<div class="btn" @click="searchModule.displayedCard = true">
						<img
							src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
							class="btn-bg"
						/>
						<img
							src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
							class="btn-bg-hover"
						/>
						<span>点击搜索</span>
					</div>

					<div class="card" v-show="searchModule.displayedCard">
						<div class="card-input">
							<div class="card-btn" @click="handleSearch">
								<img
									src="~@/assets/images/shuju/renfang/index/search/search.png"
								/>
							</div>

							<input
								type="text"
								placeholder="输入关键词搜索"
								@keyup.enter="handleSearch"
								v-model="searchModule.keyword"
							/>

							<div class="i-div"></div>

							<div
								class="card-btn"
								@click="searchModule.displayedCard = false"
							>
								<img
									src="~@/assets/images/shuju/renfang/index/search/close.png"
								/>
							</div>
						</div>
						<div class="card-show">
							<div class="card-tabs">
								<div
									:class="{
										'z-on': searchModule.resultTab == '0',
									}"
									@click="searchModule.resultTab = '0'"
								>
									全部
								</div>
								<div
									:class="{
										'z-on': searchModule.resultTab == '1',
									}"
									@click="searchModule.resultTab = '1'"
								>
									居民
								</div>
								<div
									:class="{
										'z-on': searchModule.resultTab == '2',
									}"
									@click="searchModule.resultTab = '2'"
								>
									小区
								</div>
								<div
									:class="{
										'z-on': searchModule.resultTab == '3',
									}"
									@click="searchModule.resultTab = '3'"
								>
									楼栋
								</div>
								<div
									:class="{
										'z-on': searchModule.resultTab == '4',
									}"
									@click="searchModule.resultTab = '4'"
								>
									房屋
								</div>
							</div>

							<div
								class="card-list"
								v-if="searchModule.result.length > 0"
							>
								<div
									class="card-item"
									:key="item.title + index"
									@click="handleClickSearchItem(item)"
									v-for="(item, index) in searchModule.result"
								>
									<span>{{ item.title }}</span>
									<img
										src="~@/assets/images/shuju/renfang/index/search/arrow.png"
										class="i-arrow"
									/>
									<img
										src="~@/assets/images/shuju/renfang/index/search/arrow-on.png"
										class="i-arrow z-on"
									/>
								</div>
							</div>

							<div class="card-empty" v-else>
								<img
									src="~@/assets/images/shuju/renfang/index/empty.png"
								/>
								<span>没有找到搜索结果～</span>
							</div>
						</div>
					</div>
				</div>

				<div class="m-box m-cate">
					<div class="box-title">
						<img
							src="~@/assets/images/shuju/main/card-title-bg-800.png"
							class="box-title-bg"
						/>
						<div class="box-title-txt">居民分类分析</div>

						<div class="box-title-btn">
							<img
								src="~@/assets/images/shuju/renfang/index/znyc.png"
							/>
							<span>智能预测</span>
							<img
								src="~@/assets/images/shuju/renfang/index/i-hint.png"
							/>
						</div>
					</div>

					<div class="list">
						<div
							class="item"
							:key="item.code + index"
							v-for="(item, index) in resiCategoryData"
						>
							<div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
							<div class="item-name">{{ item.name }}</div>
							<div class="item-count">
								<b>{{ item.count }}</b> 人
							</div>
							<div class="item-progress">
								<b :style="{ width: item.ratio + '%' }"></b>
							</div>
							<div class="item-per">
								<span>较上月</span>
								<img
									v-if="item.growth >= 0"
									src="~@/assets/images/shuju/renfang/index/up.png"
								/>
								<img
									v-else
									src="~@/assets/images/shuju/renfang/index/down.png"
								/>
								<b>{{ item.growthAbs }}</b>
								<span>人</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="g-right">
				<div class="m-box">
					<div class="box-title">
						<img
							src="~@/assets/images/shuju/main/card-title-bg-480.png"
							class="box-title-bg"
						/>
						<div class="box-title-txt">数字社区</div>
					</div>

					<div class="m-subbox m-szsq">
						<szsq :orgId="orgData.id"></szsq>
					</div>
				</div>

				<div class="m-box">
					<div class="box-title">
						<img
							src="~@/assets/images/shuju/main/card-title-bg-480.png"
							class="box-title-bg"
						/>
						<div class="box-title-txt">人口预警</div>
					</div>

					<div class="m-subbox m-rkyj">
						<rkyj :orgId="orgData.id"></rkyj>
					</div>
				</div>
				<div class="m-box">
					<div class="box-title">
						<img
							src="~@/assets/images/shuju/main/card-title-bg-480.png"
							class="box-title-bg"
						/>
						<div class="box-title-txt">人口分析</div>
					</div>

					<div class="m-subbox">
						<rkfx :orgId="orgData.id"></rkfx>
					</div>
				</div>
			</div>

			<cpt-loading v-show="false" />
		</div>
	</div>
</template>

<script>
import gridMap from "@/views/dataBoard/cpts/map/index";
import fwgl from "@/views/dataBoard/renfang/cpts/fwgl";
import jmgl from "@/views/dataBoard/renfang/cpts/jmgl";
import rkfx from "@/views/dataBoard/renfang/cpts/rkfx";
import rkyj from "@/views/dataBoard/renfang/cpts/rkyj";
import szsq from "@/views/dataBoard/renfang/cpts/szsq";
import cptLoading from "@/views/dataBoard/cpts/loading";
import cptBread from "@/views/dataBoard/cpts/bread";
import { requestPostBi } from "@/js/dai/request-bipass";
import { requestPost } from "@/js/dai/request";
import getQueryPara from "dai-js/modules/getQueryPara";

export default {
	components: { gridMap, fwgl, jmgl, rkfx, rkyj, szsq, cptLoading, cptBread },

	data() {
		return {
			loading: false,

			orgData: {}, //当前组织对象
			orgId: "",
			orgLevel: "",

			breadList: [
				{
					orgId: "",
					orgLevel: "",
					meta: { title: "人防总览" },
				},
			],

			resiCategoryData: [],

			searchModule: {
				displayedCard: false,
				keyword: "",
				resultTab: "0", // 0所有 1，居民；2，小区；3，楼栋；4，房屋
				result: [
					// {
					// 	id: 1,
					// 	title: "四季景园",
					// },
				],
			},

			perInfo: {
				unemployed_ratio: "--",
				crowd_ratio: "--",
				volunteer_ratio: "--",
				month_update_ratio: "--",
				aged_ratio: "--",
				teenagers_ratio: "--",
			},
		};
	},

	mounted() {
		this.init();
	},

	watch: {
		$route() {
			this.init();
		},
	},

	methods: {
		async init() {
			const queryOrgId = getQueryPara("orgId");
			const queryOrgLevel = getQueryPara("orgLevel");
			console.log("orgId", queryOrgId);
			if (queryOrgId) {
				this.orgId = queryOrgId;
				this.orgLevel = queryOrgLevel || "agency";
			} else {
				this.orgId = this.$store.state.user.agencyId;
				this.orgLevel = "agency";
			}

			//加载组织数据
			this.loading = false;
			await this.loadOrgData();
			this.getResiCategoryData();
			this.getPerInfo();

			this.loading = true;
		},

		clickBreadItem(item, index) {
			console.log(item);
			const { breadList } = this;
			if (index + 1 == breadList.length) return;
			breadList = breadList.slice(0, index);
			this.breadList = breadList;
		},

		clickAgencyItem(item) {
			console.log(item);
			this.$router.push({
				path: "/dataBoard/renfang/index",
				query: { orgId: item.id, orgLevel: item.level },
			});
			// this.init();
		},

		// 点击搜索结果条目，在地图上显示点和详情弹窗
		handleClickSearchItem(item) {
			console.log("handleClickSearchItem", item);
			if (!item.longitude) {
				return this.$message.error("请先设置坐标");
			}
			this.$refs.map.setDotMarker(item, [
				parseFloat(item.longitude),
				parseFloat(item.latitude),
			]);
		},

		// 根据类别搜索
		async handleSearch() {
			this.searchModule.result = [];
			console.log(this.searchModule);
			const { searchModule } = this;

			const url = [
				"search_all",
				"search_resident",
				"search_village",
				"search_building",
				"search_house",
			][searchModule.resultTab];

			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgData.id,
						name: this.searchModule.keyword,
					},
				},
				{
					mockId: 60048078,
				}
			);

			if (code === 0) {
				this.searchModule.result = data.map((item) => {
					let type = item.type || searchModule.resultTab;
					let title = "";
					if (type == "1") {
						title = item.user_name;
					} else if (type == "2") {
						title = item.village_name;
					} else if (type == "3") {
						title = item.village_name + "-" + item.building_name;
					} else if (type == "4") {
						title =
							item.building + "-" + item.unit + "-" + item.door;
					}
					return {
						title,
						type,
						...item,
					};
				});
			} else {
				this.$message.error(msg);
			}
		},

		//地图上居民分类百分比数据 ps:感觉有点重复显示
		async getPerInfo() {
			console.log("=========================getPerInfo");
			const url = "house_view";

			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgData.id,
					},
				},
				{
					mockId: 61167746,
				}
			);

			if (code === 0) {
				this.perInfo = data[0];
			} else {
				this.$message.error(msg);
			}
		},

		//居民分类分析数据
		async getResiCategoryData() {
			console.log("=========================getResiCategoryData");
			const url = "resident_class_statics";

			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgData.id,
					},
				},
				{
					mockId: 60031937,
				}
			);

			if (code === 0) {
				this.resiCategoryData = data.map((item) => {
					return {
						code: item.label,
						name: item.label,
						count: item.count,
						ratio: item.ratio,
						growth: item.growth,
						growthAbs: Math.abs(item.growth),
					};
				});
			} else {
				this.$message.error(msg);
			}
		},

		//获取地图上显示的组织数据
		async getMapData() {
			console.log("=========================getMapData");
			const url = "org_map";

			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgData.id,
					},
				},
				{
					mockId: 60810589,
				}
			);

			if (code === 0) {
				let info = data[0];
				this.orgData = info;
			} else {
				this.$message.error(msg);
			}
		},

		//加载组织数据
		async loadOrgData() {
			const url = "/gov/org/agency/maporg";
			let params = {
				orgId: this.orgId,
				level: this.orgLevel,
			};

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

			if (code === 0) {
				this.orgData = data;
				this.orgId = this.orgData.id;
				this.orgLevel = this.orgData.level;
			} else {
				this.$message.error(msg);
			}
		},
	},
};
</script>

<style
	lang="scss"
	src="@/assets/scss/dataBoard/renfang/index.scss"
	scoped
></style>