epmet-work-pc-chengyang/src/views/dataBoard/sida/index.vue

<template>
	<div>
		<cpt-bread @tap="clickBreadItem" v-if="breadList.length > 1" :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">
						<xqqd :orgId="orgData.org_id"></xqqd>
					</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">
						<wtqd :orgId="orgData.org_id"></wtqd>
					</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" @clickAgency="clickAgencyItem" :srcGridData="orgData"
						@clickDotBtn="handleClickDotBtn" />
				</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 ">
					<div class="box-title">
						<img src="~@/assets/images/shuju/main/card-title-bg-800.png" class="box-title-bg" />
						<div class="box-title-txt" v-if="!displayedForecast"> 社区评价 </div>
					</div>
					<div class="m-subbox  ">
						<sqpj :orgId="orgData.org_id"></sqpj>
						
					</div>
				</div>
			</div>
			<div class="g-right">
				<div class="m-box" v-if="orgLevel == 'district' ||orgLevel == 'street' ||orgLevel == 'city'">
					<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 ">
						<szsq :orgId="orgData.org_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 " :class="{
							'z-shrink':
								orgLevel == 'district' ||
								orgLevel == 'street' ||
								orgLevel == 'city',
						}">
						<fwqd :orgId="orgData.org_id"></fwqd>
					</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">
						<zyqd :orgId="orgData.org_id"></zyqd>
					</div>
				</div>
			</div>
			<cpt-loading v-show="false" />
		</div>
		<resi-details @close="displayedResiId = ''" :resi-id="displayedResiId" v-if="displayedResiId" />
		<house-details @close="displayedHouseId = ''" :house-id="displayedHouseId" v-if="displayedHouseId" />
	</div>
</template>
<script>
	import gridMap from "@/views/dataBoard/cpts/map/index";
	import xqqd from "@/views/dataBoard/sida/cpts/xqqd";
	import wtqd from "@/views/dataBoard/sida/cpts/wtqd";
	import zyqd from "@/views/dataBoard/sida/cpts/zyqd";
	import fwqd from "@/views/dataBoard/sida/cpts/fwqd";
	import szsq from "@/views/dataBoard/sida/cpts/szsq";
	import sqpj from "@/views/dataBoard/sida/cpts/sqpj";
	
	import cptBread from "@/views/dataBoard/sida/cpts/bread";
	import cptLoading from "@/views/dataBoard/cpts/loading";
	import houseDetails from "@/views/dataBoard/cpts/house-details";
	import resiDetails from "@/views/dataBoard/cpts/resi-details";
	import {
		requestPostBi
	} from "@/js/dai/request-bipass";
	import {
		requestPost
	} from "@/js/dai/request";
	import getQueryPara from "dai-js/modules/getQueryPara";

	function iniGetPerInfo() {
		return {
			unemployed_ratio: "--",
			crowd_ratio: "--",
			volunteer_ratio: "--",
			month_update_ratio: "--",
			aged_ratio: "--",
			teenagers_ratio: "--",
		};
	}
	export default {
		name: "renfang",
		components: {
			gridMap,
			xqqd,
			wtqd,
			zyqd,
			fwqd,
			szsq,
			sqpj,
			cptLoading,
			cptBread,
			houseDetails,
			resiDetails,
		},
		data() {
			return {
				loading: false,
				orgData: {
					children: [],
				}, //当前组织对象
				orgId: "",
				orgLevel: "",
				breadList: [{
					orgId: "",
					orgLevel: "",
					meta: {
						title: "人房总览"
					},
				}, ],
				resiCategoryData: [], // 居民分类分析
				resiCategoryForecastData: [], // 居民分类预测
				displayedForecast: false, //显示居民分类分析 还是居民分类预测
				searchModule: {
					displayedCard: false,
					keyword: "",
					resultTab: "0", // 0所有 1，居民；2，小区；3，楼栋；4，房屋
					result: [
						// {
						// 	id: 1,
						// 	title: "四季景园",
						// },
					],
				},
				perInfo: iniGetPerInfo(),
				displayedResiId: "",
				displayedHouseId: "",
			};
		},
		mounted() {
			const queryOrgId = getQueryPara("orgId");
			const queryOrgLevel = getQueryPara("orgLevel");
			this.init(queryOrgId, queryOrgLevel);
		},
		watch: {},
		methods: {
			async init(queryOrgId, queryOrgLevel) {
				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();
				await this.getMapData();
				await this.getSubMapData();
			
				this.getResiCategoryForecastData();
				this.getPerInfo();
				this.loading = true;
			},
			toResiClassPage(type_id = "", type_name) {
				this.$router.push({
					path: "/dataBoard/renfang/resi-class",
					query: {
						org_id: this.orgId,
						type_id,
						type_name,
					},
				});
			},
			handleClickDotBtn(type, info) {
				console.log("handleClickDotBtn", type, info);
				if (type == "watch-resi") {
					this.displayedResiId = info.user_id;
				} else if (type == "watch-house") {
					this.displayedHouseId = info.house_id;
				}
			},
			clickBreadItem({
				item
			}) {
				this.toBread(item);
			},
			clickAgencyItem(item) {
				console.log(item);
				this.toBread({
					orgId: item.id,
					orgLevel: item.level,
					meta: {
						title: item.name
					},
				});
			},
			toBread(item) {
				const {
					orgId
				} = item;
				const {
					breadList
				} = this;
				let index = breadList.findIndex((val) => val.orgId === orgId);
				// return console.log(item, breadList, index);
				if (index >= 0) {
					this.breadList = breadList.slice(0, index + 1);
				} else {
					breadList.push(item);
					this.breadList = breadList;
				}
				this.init(item.orgId, item.orgLevel);
			},
			// 点击搜索结果条目，在地图上显示点和详情弹窗
			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.orgId,
						name: this.searchModule.keyword,
					},
				}, {
					// mockId: 60044224,
					// mockId: 60048067,
				});
				if (code === 0) {
					this.searchModule.result = data.map((item) => {
						let type = item.type || searchModule.resultTab;
						let title = "";
						let detailJson = {};
						if (searchModule.resultTab == 0) {
							title = item.name;
							if (typeof item.detail_json == "string") {
								try {
									detailJson = JSON.parse(item.detail_json);
								} catch (e) {
									console.log(e);
								}
							}
						} else 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,
							...detailJson,
							...item,
						};
					});
				} else {
					this.$message.error(msg);
				}
			},
			//地图上居民分类百分比数据 ps:感觉有点重复显示
			async getPerInfo() {
				console.log("=========================getPerInfo");
				const url = "resident_ratio";
				const {
					data,
					code,
					msg
				} = await requestPostBi(url, {
					queryParam: {
						org_id: this.orgId,
					},
				}, {
					// mockId: 61167746,
				});
				if (code === 0) {
					this.perInfo = {
						...iniGetPerInfo(),
						...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.orgId,
					},
				}, {
					// mockId: 60031937,
				});
				if (code === 0) {
					this.resiCategoryData = data.map((item) => {
						return {
							code: item.label_id,
							name: item.label,
							count: item.count,
							ratio: item.ratio,
							growth: item.growth,
							growthAbs: Math.abs(item.growth),
						};
					});
				} else {
					this.$message.error(msg);
				}
			},
			//居民分类预测数据
			async getResiCategoryForecastData() {
				console.log("=========================getResiCategoryForecastData");
				const url = "resident_class_predict";
				const {
					data,
					code,
					msg
				} = await requestPostBi(url, {
					queryParam: {
						org_id: this.orgId,
					},
				}, {
					// mockId: 60064667,
				});
				if (code === 0) {
					this.resiCategoryForecastData = data.map((item) => {
						return {
							code: item.resident_type,
							name: item.resident_type_name,
							count: item.resident_count,
							ratio: item.resident_ratio,
							growth: item.change_count,
							growthAbs: Math.abs(item.change_count),
						};
					});
				} 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.orgId,
					},
				}, {
					// mockId: 60810589,
				});
				if (code === 0) {
					let info = data[0];
					this.orgData = {
						...info,
						id: info.org_id,
						name: info.org_name,
						latitude: parseFloat(info.latitude),
						longitude: parseFloat(info.longitude),
						coordinates: info.coordinates || "",
						children: [],
					};
					this.orgId = this.orgData.org_id;
					this.orgLevel = this.orgData.level;
				} else {
					this.$message.error(msg);
				}
			},
			//获取地图上显示的组织数据
			async getSubMapData() {
				console.log("=========================getSubMapData");
				const url = "sub_org_map";
				const {
					data,
					code,
					msg
				} = await requestPostBi(url, {
					queryParam: {
						org_id: this.orgId,
					},
				}, {
					// mockId: 61831860,
				});
				if (code === 0) {
					const {
						orgData
					} = this;
					orgData.children = data.map((item) => {
						return {
							...item,
							id: item.org_id,
							name: item.org_name,
							latitude: parseFloat(item.latitude),
							longitude: parseFloat(item.longitude),
							coordinates: item.coordinates || "",
						};
					});
					this.orgData = {
						...orgData
					};
					console.log("==========================getSubMapData:result", this.orgData);
				} 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.orgId;
					this.orgLevel = this.orgData.level;
				} else {
					this.$message.error(msg);
				}
			},
		},
	};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>