暂存

src/assets/scss/dataBoard/renfang/index.scss

@@ -32,6 +32,7 @@
     top: 560px;
     left: 0;
     width: 100%;
+    background-color: transparent;
     .btn {
         position: relative;
         width: 213px;

src/views/components/blackSearch.vue

@@ -568,7 +568,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .resi-container .resi-card {
   position: relative;
   overflow: visible;

src/views/components/deathSearch copy.vue

@@ -542,7 +542,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .resi-container .resi-card {
   position: relative;
   overflow: visible;

src/views/components/deathSearch.vue

@@ -522,7 +522,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scope>
+<style lang="scss" scoped>
 @import "@/assets/scss/modules/management/list-main.scss";
 
 .m-search {

src/views/components/foldText.vue

@@ -65,7 +65,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scope>
+<style lang="scss" scoped>
 // 清除容器自身浮动
 @mixin cs {
   &::after {

src/views/components/resiSearch copy.vue

@@ -725,7 +725,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scope>
+<style lang="scss" scoped>
 // .resi-container {
 //   position: relative;
 //   overflow: visible;

src/views/dataBoard/cpts/bread.vue

@@ -1,84 +1,147 @@
 <template>
-  <div>
-    <div class="m-bread">
-      <div class="g-line">
-        <div class="line-left"></div>
-        <div class="line-right"></div>
-      </div>
-      <div class="g-bread">
-        <el-breadcrumb :separator="separator">
-          <el-breadcrumb-item v-for="item in breadList"
-                              :key="item.path"
-                              :to="{ path: item.path }">
-            {{ item.meta.title }}
-          </el-breadcrumb-item>
-
-        </el-breadcrumb>
-      </div>
-      <div class="g-line">
-        <div class="line-left"></div>
-        <div class="line-right"></div>
-      </div>
-    </div>
-
-  </div>
+	<div>
+		<div class="m-bread">
+			<div class="line">
+				<div class="line-left"></div>
+				<div class="line-right"></div>
+			</div>
+			<div class="bread">
+				<el-breadcrumb :separator="separator">
+					<el-breadcrumb-item
+						v-for="item in breadList"
+						:key="item.path"
+						:to="{ path: item.path }"
+					>
+						<span @click="handleClickItem(item, index)">{{
+							item.meta.title
+						}}</span>
+					</el-breadcrumb-item>
+				</el-breadcrumb>
+			</div>
+			<div class="line">
+				<div class="line-left"></div>
+				<div class="line-right"></div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 import ScreenLoading from "./loading";
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 
 export default {
-  name: "table",
-  components: {
-    ScreenLoading,
-  },
-  props: {
-    //分隔符
-    separator: {
-      type: String,
-      default: '/'
-    },
-
-    //面包屑列表
-    breadList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-
-  },
-  data () {
-    return {
-
-      pageSize: 10,
-      pageNo: 1,
-    };
-  },
-  watch: {},
-  computed: {
-
-
-
-    ...mapGetters(['clientHeight', 'iframeHeight'])
-  },
-  mounted () { },
-
-  created () { },
-
-  methods: {
-
-  },
+	name: "table",
+	components: {
+		ScreenLoading,
+	},
+	props: {
+		//分隔符
+		separator: {
+			type: String,
+			default: "/",
+		},
+
+		//面包屑列表
+		breadList: {
+			type: Array,
+			default: () => {
+				return [];
+			},
+		},
+	},
+	data() {
+		return {
+			pageSize: 10,
+			pageNo: 1,
+		};
+	},
+	watch: {},
+	computed: {
+		...mapGetters(["clientHeight", "iframeHeight"]),
+	},
+	mounted() {},
+
+	created() {},
+
+	methods: {
+		handleClickItem(item, index) {
+			this.$emit("tap", { item, index });
+		},
+	},
 };
 </script>
 
-
-<style
-  lang="scss"
-  src="@/assets/scss/dataBoard/bread.scss"
-  scoped
-></style>
-
 <style lang="scss" scoped>
+.m-bread {
+	padding: 0 0 15px 0;
+
+	.bread {
+		margin: 4px 0;
+		padding: 8px 16px;
+		height: 40px;
+		background: rgba(26, 149, 255, 0.15);
+		width: 100%;
+
+		/deep/ .el-breadcrumb__item {
+			line-height: 25px;
+			font-size: 14px;
+		}
+
+		/deep/ .el-breadcrumb__item .el-breadcrumb__inner {
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #ffffff;
+		}
+
+		/deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner {
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: rgba(255, 255, 255, 0.65);
+		}
+
+		.router_parents {
+			line-height: 25px;
+			font-size: 14px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: rgba(255, 255, 255, 0.65);
+
+			.arrow {
+				padding: 0 5px;
+			}
+		}
+		.router_parents:hover {
+			cursor: pointer;
+		}
+
+		.router_child {
+			line-height: 25px;
+			font-size: 14px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #ffffff;
+		}
+	}
+
+	.line {
+		display: flex;
+		width: 100%;
+
+		.line-left {
+			flex-grow: 0;
+			flex-shrink: 0;
+			flex-basis: 16px;
+			height: 1px;
+			background: #1a95ff;
+		}
+		.line-right {
+			flex-grow: 1;
+			flex-shrink: 1;
+			flex-basis: 0px;
+			height: 1px;
+			background: rgba(26, 149, 255, 0.45);
+		}
+	}
+}
 </style>

src/views/dataBoard/cpts/map/popup.vue

@@ -0,0 +1,404 @@
+<template>
+	<div class="m-pop" ref="pop" @mousewheel="handleWheel" v-show="!hidden">
+		<div class="info">
+			<div v-if="type === '1'">
+				<div class="u-info-title">居民信息</div>
+				<div class="item">
+					姓名：
+					<span>{{ info.user_name || "--" }}</span>
+				</div>
+				<div class="item">
+					所属网格：
+					<span>{{ info.grid || "--" }}</span>
+				</div>
+				<div class="item">
+					所属小区：
+					<span>{{ info.house || "--" }}</span>
+				</div>
+
+				<div class="item">
+					手机号：
+					<span>{{ info.telephone || "--" }}</span>
+				</div>
+				<div class="item">
+					性别：
+					<span>{{ info.genderShow || "--" }}</span>
+				</div>
+				<div class="item">
+					身份证号：
+					<span>{{ info.idcard || "--" }}</span>
+				</div>
+
+				<div class="item">
+					工作单位：
+					<span>{{ info.workunit || "--" }}</span>
+				</div>
+				<div class="item">
+					人户状况：
+					<span>{{ info.household || "--" }}</span>
+				</div>
+				<div class="item">
+					人员类别：
+					<span>{{ info.classtype || "--" }}</span>
+				</div>
+
+				<div @click="handleClickBtn('watch-resi')" class="more-btn">
+					更多
+				</div>
+
+				<div class="operate">
+					<div
+						@click="handleClickBtn('create-demand')"
+						v-if="info.agencyId == $store.state.user.agencyId"
+						class="btn z-blue"
+					>
+						发布需求
+					</div>
+
+					<div
+						v-if="
+							info.agencyId == $store.state.user.agencyId &&
+							type === 'volunteer'
+						"
+						@click="handleClickBtn('create-service')"
+						class="btn z-yellow"
+					>
+						发起服务
+					</div>
+				</div>
+			</div>
+
+			<div v-if="type === '2'">
+				<div class="u-info-title">小区信息</div>
+				<div class="item">
+					所属组织：
+					<span>{{ info.community || "--" }}</span>
+				</div>
+				<div class="item">
+					所属网格：
+					<span>{{ info.grid || "--" }}</span>
+				</div>
+				<div class="item">
+					小区名称：
+					<span>{{ info.village_name || "--" }}</span>
+				</div>
+				<div class="item">
+					关联物业：
+					<span>{{ info.property || "--" }}</span>
+				</div>
+				<div class="item">
+					实有楼栋：
+					<span>{{ info.building || "--" }}</span>
+				</div>
+			</div>
+
+			<div v-if="type === '3'">
+				<div class="u-info-title">楼栋信息</div>
+				<div class="item">
+					所属小区：
+					<span>{{ info.village_name || "--" }}</span>
+				</div>
+				<div class="item">
+					楼栋名称：
+					<span>{{ info.village_name || "--" }}</span>
+				</div>
+				<div class="item">
+					楼栋类型：
+					<span>{{ info.building_type || "--" }}</span>
+				</div>
+				<div class="item">
+					单元数：
+					<span>{{ info.unit_count || "--" }}</span>
+				</div>
+				<div class="item">
+					层数：
+					<span>{{ info.levels_count || "--" }}</span>
+				</div>
+				<div class="item">
+					总户数：
+					<span>{{ info.households || "--" }}</span>
+				</div>
+				<div class="item">
+					人口数：
+					<span>{{ info.resident_count || "--" }}</span>
+				</div>
+				<div class="item">
+					楼长姓名：
+					<span>{{ info.hm_name || "--" }}</span>
+				</div>
+				<div class="item">
+					楼长电话：
+					<span>{{ info.hm_phone || "--" }}</span>
+				</div>
+			</div>
+
+			<div v-if="type === '4'">
+				<div class="u-info-title">房屋信息</div>
+				<div class="item">
+					房屋名称：
+					<span>{{ info.title || "--" }}</span>
+				</div>
+				<div class="item">
+					房屋类型：
+					<span>{{ info.house_type || "--" }}</span>
+				</div>
+				<div class="item">
+					房屋用途：
+					<span>{{ info.house_usage || "--" }}</span>
+				</div>
+				<div class="item">
+					房屋状态：
+					<span>{{ info.house_state || "--" }}</span>
+				</div>
+				<div class="item">
+					房主姓名：
+					<span>{{ info.holder_name || "--" }}</span>
+				</div>
+				<div class="item">
+					联系方式：
+					<span>{{ info.holder_phone || "--" }}</span>
+				</div>
+				<div class="item">
+					房主身份证：
+					<span>{{ info.holder_idcard || "--" }}</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { requestPost, requestGet } from "@/js/dai/request";
+
+export default {
+	name: "popup",
+
+	props: {
+		item: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	data() {
+		return {
+			hidden: true,
+			type: "",
+			srcItem: {},
+			info: {},
+			list: [],
+		};
+	},
+
+	computed: {},
+	watch: {},
+
+	mounted() {},
+
+	methods: {
+		handleWheel(e) {
+			if (this.$refs.pop.clientHeight >= 321) {
+				e.stopPropagation();
+			}
+		},
+
+		handleClickBtn(type) {
+			this.$emit("operate", type, {
+				type: this.type,
+				id: this.srcItem.id,
+				...this.info,
+			});
+		},
+
+		handleClickListItem(item) {
+			console.log("handleClickListItem", item);
+			this.$emit("clickListItem", item);
+		},
+
+		async show(item) {
+			console.log("-----------------show:", item);
+			const { type, latitude, longitude } = item;
+			if (!type) {
+				return false;
+			}
+			if (!latitude || !longitude) {
+				this.$message.warning("请先完善坐标位置");
+				return false;
+			}
+
+			this.type = item.type;
+			this.srcItem = item;
+			this.info = item;
+			this.hidden = false;
+			return true;
+		},
+
+		async loadResi(info) {
+			const url = "/epmetuser/icresiuser/resi-brief/" + info.id;
+			// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+
+			let params = {};
+
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				data.icUserName = data.icUserName ? data.icUserName : "--";
+				data.gridName = data.gridName ? data.gridName : "--";
+				data.villageName = data.villageName ? data.villageName : "--";
+				data.mobile = data.mobile ? data.mobile : "--";
+				data.idCard = data.idCard ? data.idCard : "--";
+				data.birthday = data.birthday ? data.birthday : "--";
+				data.contacts = data.contacts ? data.contacts : "--";
+				data.contactsMobile = data.contactsMobile
+					? data.contactsMobile
+					: "--";
+
+				data.isBdhjShow = data.isBdhj
+					? data.isBdhj === "0"
+						? "否"
+						: "是"
+					: "--";
+				data.genderShow = data.gender
+					? data.gender === "0"
+						? "女"
+						: "男"
+					: "--";
+				if (data.rhzk === "rhyz") {
+					data.rhzkShow = "人户一致";
+				} else if (data.rhzk === "rzhbz") {
+					data.rhzkShow = "人在户不在";
+				} else if (data.rhzk === "hzrbz") {
+					data.rhzkShow = "户在人不在";
+				} else {
+					data.rhzkShow = "--";
+				}
+
+				let categoriesArray = [];
+
+				for (let key in data.volunteerCategories) {
+					categoriesArray.push(data.volunteerCategories[key]);
+				}
+
+				if (categoriesArray.length > 0) {
+					data.categories = categoriesArray.join(",");
+				} else {
+					data.categories = "--";
+				}
+				this.info = JSON.parse(JSON.stringify(data));
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/c/config.scss";
+@import "@/assets/scss/c/function.scss";
+@import "@/assets/scss/modules/visual/c/common.scss";
+
+.m-pop {
+	@include scrollBar2;
+	width: 450px;
+	color: #fff;
+	font-size: 14px;
+	line-height: 20px;
+	max-height: 500px;
+	overflow-y: auto;
+
+	.info {
+		padding: 10px;
+		.u-info-title {
+			margin-bottom: 10px;
+			font-size: 24px;
+			font-weight: bold;
+			color: #69efff;
+			line-height: 40px;
+		}
+
+		.item-pics {
+			display: flex;
+			margin: 20px 0;
+			img {
+				display: block;
+				width: 32%;
+				height: 90px;
+				margin-right: 9px;
+				object-fit: cover;
+			}
+		}
+	}
+	.item {
+		@include toe;
+		font-size: 18px;
+		font-family: PingFang SC;
+		font-weight: 400;
+		color: #ffffff;
+		line-height: 34px;
+	}
+
+	.list {
+		.item {
+			display: flex;
+			align-items: center;
+			margin-bottom: 5px;
+			padding: 5px;
+			border-bottom: 1px dashed #124584;
+			&:last-child {
+				border-bottom: none;
+			}
+			.item-cnt {
+				@include toe;
+				width: 90%;
+			}
+			.i-arrow {
+				margin-left: auto;
+			}
+		}
+	}
+
+	.operate {
+		display: flex;
+		justify-content: center;
+	}
+
+	.more-btn {
+		position: absolute;
+		right: 20px;
+		top: 30px;
+		width: 60px;
+		height: 24px;
+		background: rgba(221, 141, 2, 0.57);
+		border: 1px solid #dd8d02;
+		border-radius: 2px;
+		font-size: 16px;
+		font-family: PingFang SC;
+		font-weight: 400;
+		color: #ffffff;
+		line-height: 24px;
+		text-align: center;
+		cursor: pointer;
+	}
+
+	.btn {
+		margin-top: 20px;
+		margin-right: 20px;
+		width: 110px;
+		line-height: 30px;
+		border: 1px solid #eee;
+		text-align: center;
+		font-size: 18px;
+		border-radius: 2px;
+		cursor: pointer;
+		&.z-blue {
+			background: #09a5ff;
+			border-color: #09a5ff;
+		}
+		&.z-yellow {
+			background: #fe6b53;
+			border-color: #fe6b53;
+		}
+	}
+}
+</style>

src/views/dataBoard/renfang/cpts/fwgl.vue

@@ -1,404 +1,503 @@
 <template>
-  <div>
-    <div class="fwgl-main">
-      <div class="g-pie">
-        <div class="pie-left">
-          <screen-echarts-frame class=""
-                                @myChartMethod="pieInitOk"
-                                ref="pieChart"></screen-echarts-frame>
-        </div>
-        <div class="pie-legend">
-          <div class="item">
-            <div class="item-logo logo1"></div>
-            <div class="item-name">自住房屋</div>
-          </div>
-          <div class="item">
-            <div class="item-logo logo2"></div>
-            <div class="item-name">出租房屋</div>
-          </div>
-          <div class="item">
-            <div class="item-logo logo3"></div>
-            <div class="item-name">闲置房屋</div>
-          </div>
-        </div>
-        <div class="pie-right">
-          <div class="right-row">
-            <div class="row-item">
-              <div class="item-one">
-                <img class="img"
-                     src="@/assets/images/shuju/renfang/house-logo.png"
-                     alt />
-                <div class="title">房屋总数</div>
-              </div>
-              <div class="item-two">
-                <div class="num">2818</div>
-                <div class="unit">户</div>
-              </div>
-
-            </div>
-
-            <div class="row-item marginleft10">
-              <div class="item-one">
-                <img class="img"
-                     src="@/assets/images/shuju/renfang/house-logo.png"
-                     alt />
-                <div class="title">自住房屋</div>
-              </div>
-              <div class="item-two">
-                <div class="num">2642</div>
-                <div class="unit">户</div>
-              </div>
-
-            </div>
-          </div>
-          <div class="right-row margintop18">
-            <div class="row-item">
-              <div class="item-one">
-                <img class="img"
-                     src="@/assets/images/shuju/renfang/house-logo.png"
-                     alt />
-                <div class="title">出租房屋</div>
-              </div>
-              <div class="item-two">
-                <div class="num">818</div>
-                <div class="unit">户</div>
-              </div>
-
-            </div>
-
-            <div class="row-item marginleft10">
-              <div class="item-one">
-                <img class="img"
-                     src="@/assets/images/shuju/renfang/house-logo.png"
-                     alt />
-                <div class="title">闲置房屋</div>
-              </div>
-              <div class="item-two">
-                <div class="num">316</div>
-                <div class="unit">户</div>
-              </div>
-
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="g-bar">
-        <div class="bar-title">
-
-          <img class="title_img"
-               src="@/assets/images/index/list-logo.png"
-               alt />
-          <div class="tip_title">近一年房屋状态变化趋势图</div>
-          <div class="title_line"></div>
-
-        </div>
-        <div class="bar-legend">
-          <div class="item-logo logo1"></div>
-          <div class="item-name">自住房屋</div>
-          <div class="item-logo logo2 marginleft10"></div>
-          <div class="item-name">出租房屋</div>
-          <div class="item-logo logo3 marginleft10"></div>
-          <div class="item-name">闲置房屋</div>
-        </div>
-        <div class="bar-main">
-          <screen-echarts-frame class=""
-                                @myChartMethod="barInitOk"
-                                ref="barChart"></screen-echarts-frame>
-        </div>
-
-      </div>
-
-      <!-- <screen-nodata class="nodata"
+	<div>
+		<div class="m-fwgl">
+			<div class="m-pie">
+				<div class="pie-left">
+					<screen-echarts-frame
+						class=""
+						@myChartMethod="pieInitOk"
+						ref="pieChart"
+					></screen-echarts-frame>
+				</div>
+				<div class="pie-legend">
+					<div class="item">
+						<div class="item-logo logo1"></div>
+						<div class="item-name">自住房屋</div>
+					</div>
+					<div class="item">
+						<div class="item-logo logo2"></div>
+						<div class="item-name">出租房屋</div>
+					</div>
+					<div class="item">
+						<div class="item-logo logo3"></div>
+						<div class="item-name">闲置房屋</div>
+					</div>
+				</div>
+				<div class="pie-right">
+					<div class="right-row">
+						<div class="row-item">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/house-logo.png"
+									alt
+								/>
+								<div class="title">房屋总数</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.house_count }}</div>
+								<div class="unit">户</div>
+							</div>
+						</div>
+
+						<div class="row-item marginleft10">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/house-logo.png"
+									alt
+								/>
+								<div class="title">自住房屋</div>
+							</div>
+							<div class="item-two">
+								<div class="num">
+									{{ info.self_dwelling_count }}
+								</div>
+								<div class="unit">户</div>
+							</div>
+						</div>
+					</div>
+					<div class="right-row margintop18">
+						<div class="row-item">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/house-logo.png"
+									alt
+								/>
+								<div class="title">出租房屋</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.lease_count }}</div>
+								<div class="unit">户</div>
+							</div>
+						</div>
+
+						<div class="row-item marginleft10">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/house-logo.png"
+									alt
+								/>
+								<div class="title">闲置房屋</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.unused_count }}</div>
+								<div class="unit">户</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="m-bar">
+				<div class="bar-title">
+					<img
+						class="title_img"
+						src="@/assets/images/index/list-logo.png"
+						alt
+					/>
+					<div class="tip_title">近一年房屋状态变化趋势图</div>
+					<div class="title_line"></div>
+				</div>
+				<div class="bar-legend">
+					<div class="item-logo logo1"></div>
+					<div class="item-name">自住房屋</div>
+					<div class="item-logo logo2 marginleft10"></div>
+					<div class="item-name">出租房屋</div>
+					<div class="item-logo logo3 marginleft10"></div>
+					<div class="item-name">闲置房屋</div>
+				</div>
+				<div class="bar-main">
+					<screen-echarts-frame
+						class=""
+						@myChartMethod="barInitOk"
+						ref="barChart"
+					></screen-echarts-frame>
+				</div>
+			</div>
+
+			<!-- <screen-nodata class="nodata"
                      v-if="showNoData"></screen-nodata> -->
-    </div>
-  </div>
+		</div>
+	</div>
 </template>
 
 <script>
-import { requestPost } from "@/js/dai/request";
 import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
-import { pieOption } from './fwPieOption.js'
-import { barOption } from './fwBarOption.js'
+import { pieOption } from "./fwPieOption.js";
+import { barOption } from "./fwBarOption.js";
+import { requestPostBi } from "@/js/dai/request-bipass";
 
 export default {
-  props: {
-    orgId: {
-      type: String,
-      default: "",
-    },
-  },
-  components: {
-    screenEchartsFrame
-  },
-  // mixins: [animate]
-  beforeDestroy () {
-    this.timer && clearInterval(this.timer)
-  },
-  data () {
-    return {
-      showNoData: false,
-      timer: null,
-      barChart: '',
-      pieChart: '',
-      pieOption: {},
-      barOption: {},
-      pieInitState: false,
-      barInitState: false,
-      pieData: []
-    }
-  },
-  mounted () {
-    this.getData()
-  },
-  methods: {
-    pieInitOk () {
-
-      this.pieInitState = true
-    },
-    barInitOk () {
-      this.barInitState = true
-    },
-    getData () {
-      this.getBar()
-      this.getPie()
-    },
-    getBar () {
-      if (this.barInitState) {
-        this.getBarChart()
-      } else {
-        setTimeout(() => {
-          this.getBar()
-        }, 500)
-      }
-    },
-    getPie () {
-      if (this.pieInitState) {
-        this.getPieChart()
-      } else {
-        setTimeout(() => {
-          this.getPie()
-        }, 500)
-      }
-    },
-    // 获取饼状图
-    async getPieChart () {
-
-      this.$refs.pieChart.clear()
-      // this.$refs.pieChart.showLoading()
-
-      // 获取pieChart配置
-      this.pieOption = pieOption()
-
-      // 设置三个配置值
-      this.pieOption.title.text = '73%'
-      this.pieData = [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' }
-      ]
-      this.pieOption.series[0].data = this.pieData;
-      // this.$refs.pieChart.hideLoading()
-      this.$refs.pieChart.setOption(this.pieOption)
-    },
-
-    // 获取饼状图
-    async getBarChart () {
-      this.showNoData = false
-      this.$refs.barChart.clear()
-      // this.$refs.barChart.showLoading()
-
-
-      // this.$refs.barChart.hideLoading()
-      let xaxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-      let series = [
-        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
-        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
-        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] }
-      ]
-
-      // if (res.data.xaxis && res.data.xaxis.length > 0) {
-      //   const {
-      //     xaxis,
-      //     totalIndexData,
-      //     serviceAbilityData,
-      //     partyDevAbilityData,
-      //     governAbilityData
-      //   } = res.data
-
-      //   this.barOption = barOption()
-      //   this.$refs.barChart.hideLoading()
-      //   this.$refs.barChart.setOption(this.barOption, true)
-      //   this.$refs.barChart.setOption({
-      //     xAxis: { data: xaxis },
-      //     series: [
-      //       { data: totalIndexData },
-      //       { data: partyDevAbilityData },
-      //       { data: governAbilityData },
-      //       { data: serviceAbilityData }
-      //     ]
-      //   }, true)
-      // } else {
-      //   this.showNoData = true
-      // }
-
-      this.barOption = barOption()
-      // this.$refs.barChart.hideLoading()
-      this.$refs.barChart.setOption(this.barOption, true)
-      this.$refs.barChart.setOption({
-        xAxis: { data: xaxis },
-        series: series
-      }, true)
-    }
-
-  }
+	props: {
+		orgId: {
+			type: String,
+			default: "",
+		},
+	},
+	components: {
+		screenEchartsFrame,
+	},
+
+	data() {
+		return {
+			showNoData: false,
+			barChart: "",
+			pieChart: "",
+			pieOption: {},
+			barOption: {},
+			pieInitState: false,
+			barInitState: false,
+			pieData: [],
+
+			info: {
+				house_count: "--",
+				self_dwelling_count: "--",
+				lease_count: "--",
+				unused_count: "--",
+			},
+		};
+	},
+	mounted() {
+		this.getData();
+	},
+	watch: {
+		orgId() {
+			this.getData();
+		},
+	},
+	methods: {
+		pieInitOk() {
+			this.pieInitState = true;
+		},
+		barInitOk() {
+			this.barInitState = true;
+		},
+		async getData() {
+			await this.getInfo();
+			this.getBar();
+			this.getPie();
+		},
+		getBar() {
+			if (this.barInitState) {
+				this.getBarData();
+			} else {
+				setTimeout(() => {
+					this.getBar();
+				}, 500);
+			}
+		},
+		getPie() {
+			if (this.pieInitState) {
+				this.iniPieChart();
+			} else {
+				setTimeout(() => {
+					this.getPie();
+				}, 500);
+			}
+		},
+
+		// 获取房屋总数等
+		async getInfo() {
+			const url = "house_view";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					mockId: 60007107,
+				}
+			);
+
+			if (code === 0 && data && Array.isArray(data) && data.length > 0) {
+				let info = data[0];
+				this.info = { ...this.info, ...info };
+			} else {
+				this.$message.error(msg);
+			}
+		},
+		// 获取饼状图
+		async iniPieChart() {
+			this.$refs.pieChart.clear();
+			// this.$refs.pieChart.showLoading()
+
+			// 获取pieChart配置
+			this.pieOption = pieOption();
+
+			const { info } = this;
+			// 设置三个配置值
+			this.pieOption.title.text =
+				parseInt((100 * info.self_dwelling_count) / info.house_count) +
+				"%";
+			this.pieData = [
+				{ value: info.self_dwelling_count, name: "自住房屋" },
+				{ value: info.lease_count, name: "出租房屋" },
+				{ value: info.unused_count, name: "闲置房屋" },
+			];
+			this.pieOption.series[0].data = this.pieData;
+			this.$refs.pieChart.setOption(this.pieOption);
+			// this.$refs.pieChart.hideLoading()
+
+			// 点击饼图 切换中心显示的比例
+			this.$refs.pieChart.myChart.on("selectchanged", (params) => {
+				console.log(params);
+				const {
+					fromActionPayload: { dataIndexInside },
+				} = params;
+				this.pieOption.title.text =
+					parseInt(
+						(100 *
+							[
+								info.self_dwelling_count,
+								info.lease_count,
+								info.unused_count,
+							][dataIndexInside]) /
+							info.house_count
+					) + "%";
+				this.$refs.pieChart.myChart.setOption(this.pieOption);
+			});
+		},
+
+		// 获取房屋总数等
+		async getBarData() {
+			const url = "house_trend";
+
+			this.$refs.barChart.showLoading();
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.org_id,
+					},
+				},
+				{
+					mockId: 60388110,
+				}
+			);
+
+			if (code === 0 && data && Array.isArray(data) && data.length > 0) {
+				let xaxis = [];
+				let series = [{ data: [] }, { data: [] }, { data: [] }];
+				for (const {
+					month,
+					self_dwelling_count,
+					lease_count,
+					unused_count,
+				} of data) {
+					xaxis.push(month);
+					series[0].data.push(self_dwelling_count);
+					series[1].data.push(lease_count);
+					series[2].data.push(unused_count);
+				}
+				this.iniBarChart(xaxis, series);
+				this.$refs.barChart.hideLoading();
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		// 获取饼状图
+		async iniBarChart(xaxis, series) {
+			this.showNoData = false;
+			this.$refs.barChart.clear();
+			// let xaxis = [
+			// 	"1月",
+			// 	"2月",
+			// 	"3月",
+			// 	"4月",
+			// 	"5月",
+			// 	"6月",
+			// 	"7月",
+			// 	"8月",
+			// 	"9月",
+			// 	"10月",
+			// 	"11月",
+			// 	"12月",
+			// ];
+			// let series = [
+			// 	{
+			// 		data: [
+			// 			120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
+			// 			90,
+			// 		],
+			// 	},
+			// 	{
+			// 		data: [
+			// 			120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
+			// 			90,
+			// 		],
+			// 	},
+			// 	{
+			// 		data: [
+			// 			120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
+			// 			90,
+			// 		],
+			// 	},
+			// ];
+			this.barOption = barOption();
+			this.$refs.barChart.setOption(this.barOption, true);
+			this.$refs.barChart.setOption(
+				{
+					xAxis: { data: xaxis },
+					series: series,
+				},
+				true
+			);
+		},
+	},
 };
 </script>
 
 <style lang="scss" scoped>
-.fwgl-main {
-  height: 100%;
-  width: 100%;
-
-  .g-pie {
-    margin-top: 24px;
-    display: flex;
-    justify-content: space-around;
-
-    .pie-left {
-      height: 120px;
-      flex: 0 0 120px;
-    }
-
-    .pie-legend {
-      .item {
-        display: flex;
-        margin-bottom: 12px;
-      }
-    }
-    .pie-right {
-      .right-row {
-        display: flex;
-        // justify-content: space-between;
-
-        .row-item {
-          flex: 0 0 100px;
-          .item-one {
-            display: flex;
-            .img {
-              width: 15px;
-              height: 15px;
-            }
-            .title {
-              margin-left: 9px;
-              font-size: 14px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: rgba(255, 255, 255, 0.65);
-            }
-          }
-
-          .item-two {
-            margin-top: 8px;
-            display: flex;
-            align-items: flex-end;
-            margin-left: 23px;
-
-            .num {
-              font-size: 24px;
-              font-family: PingFangSC-Medium, PingFang SC;
-              font-weight: 500;
-              color: #ffffff;
-            }
-
-            .unit {
-              margin-left: 9px;
-              font-size: 14px;
-              font-family: PingFangSC-Medium, PingFang SC;
-              font-weight: 500;
-              color: #ffffff;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .g-bar {
-    position: relative;
-    margin-top: 14px;
-
-    .bar-title {
-      display: flex;
-      align-items: center;
-      // margin-left: 24px;
-
-      .title_img {
-        width: 17px;
-        height: 17px;
-      }
-      .tip_title {
-        margin-left: 8px;
-        font-size: 16px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #ffffff;
-        line-height: 22px;
-      }
-
-      .title_line {
-        margin-left: 8px;
-        width: 244px;
-        height: 1px;
-        background: linear-gradient(
-          270deg,
-          rgba(55, 198, 255, 0.1) 0%,
-          #1995ff 100%
-        );
-      }
-    }
-
-    .bar-legend {
-      position: absolute;
-      top: 37px;
-      right: 20px;
-      display: flex;
-    }
-
-    .bar-main {
-      margin-top: 10px;
-      height: 225px;
-    }
-  }
+.m-fwgl {
+	height: 100%;
+	width: 100%;
+
+	.m-pie {
+		margin-top: 24px;
+		display: flex;
+		justify-content: space-around;
+
+		.pie-left {
+			height: 120px;
+			flex: 0 0 120px;
+		}
+
+		.pie-legend {
+			.item {
+				display: flex;
+				margin-bottom: 12px;
+			}
+		}
+		.pie-right {
+			.right-row {
+				display: flex;
+				// justify-content: space-between;
+
+				.row-item {
+					flex: 0 0 100px;
+					.item-one {
+						display: flex;
+						.img {
+							width: 15px;
+							height: 15px;
+						}
+						.title {
+							margin-left: 9px;
+							font-size: 14px;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: rgba(255, 255, 255, 0.65);
+						}
+					}
+
+					.item-two {
+						margin-top: 8px;
+						display: flex;
+						align-items: flex-end;
+						margin-left: 23px;
+
+						.num {
+							font-size: 24px;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #ffffff;
+						}
+
+						.unit {
+							margin-left: 9px;
+							font-size: 14px;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #ffffff;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.m-bar {
+		position: relative;
+		margin-top: 14px;
+
+		.bar-title {
+			display: flex;
+			align-items: center;
+			// margin-left: 24px;
+
+			.title_img {
+				width: 17px;
+				height: 17px;
+			}
+			.tip_title {
+				margin-left: 8px;
+				font-size: 16px;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #ffffff;
+				line-height: 22px;
+			}
+
+			.title_line {
+				margin-left: 8px;
+				width: 244px;
+				height: 1px;
+				background: linear-gradient(
+					270deg,
+					rgba(55, 198, 255, 0.1) 0%,
+					#1995ff 100%
+				);
+			}
+		}
+
+		.bar-legend {
+			position: absolute;
+			top: 37px;
+			right: 20px;
+			display: flex;
+		}
+
+		.bar-main {
+			margin-top: 10px;
+			height: 225px;
+		}
+	}
 }
 
 .item-name {
-  margin-left: 8px;
-  font-size: 12px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #8c8c8c;
+	margin-left: 8px;
+	font-size: 12px;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #8c8c8c;
 }
 
 .item-logo {
-  margin-top: 2px;
-  width: 8px;
-  height: 8px;
+	margin-top: 2px;
+	width: 8px;
+	height: 8px;
 }
 
 .logo1 {
-  background: #6fdeff;
+	background: #6fdeff;
 }
 .logo2 {
-  background: #ffaa00;
+	background: #ffaa00;
 }
 .logo3 {
-  background: #1a95ff;
+	background: #1a95ff;
 }
 .marginleft10 {
-  margin-left: 10px;
+	margin-left: 10px;
 }
 
 .margintop18 {
-  margin-top: 18px;
+	margin-top: 18px;
 }
 </style>

src/views/dataBoard/renfang/cpts/jmgl.vue

@@ -1,387 +1,447 @@
 <template>
-  <div>
-    <div class="jmgl-main">
-      <div class="g-pie">
-        <div class="pie-left">
-          <screen-echarts-frame class=""
-                                @myChartMethod="pieInitOk"
-                                ref="pieChart"></screen-echarts-frame>
-        </div>
-        <div class="pie-legend">
-          <div class="item">
-            <div class="item-logo logo1"></div>
-            <div class="item-name">常住人口</div>
-          </div>
-          <div class="item">
-            <div class="item-logo logo2"></div>
-            <div class="item-name">流动人口</div>
-          </div>
-
-        </div>
-        <div class="pie-right">
-          <div class="right-row">
-            <div class="row-item">
-              <div class="item-one">
-                <img class="img"
-                     src="@/assets/images/shuju/renfang/jm-logo.png"
-                     alt />
-                <div class="title">居民总数</div>
-              </div>
-              <div class="item-two">
-                <div class="num">2818</div>
-                <div class="unit">人</div>
-              </div>
-
-            </div>
-
-            <div class="row-item marginleft10">
-              <div class="item-one">
-                <img class="img"
-                     src="@/assets/images/shuju/renfang/jm-logo.png"
-                     alt />
-                <div class="title">常住人口</div>
-              </div>
-              <div class="item-two">
-                <div class="num">2642</div>
-                <div class="unit">人</div>
-              </div>
-
-            </div>
-          </div>
-          <div class="right-row margintop18">
-            <div class="row-item">
-              <div class="item-one">
-                <img class="img"
-                     src="@/assets/images/shuju/renfang/jm-logo.png"
-                     alt />
-                <div class="title">流动人口</div>
-              </div>
-              <div class="item-two">
-                <div class="num">818</div>
-                <div class="unit">人</div>
-              </div>
-
-            </div>
-
-          </div>
-        </div>
-      </div>
-      <div class="g-bar">
-        <div class="bar-title">
-
-          <img class="title_img"
-               src="@/assets/images/index/list-logo.png"
-               alt />
-          <div class="tip_title">近一年人口流动变化趋势图</div>
-          <div class="title_line"></div>
-
-        </div>
-        <div class="bar-legend">
-          <div class="item-logo logo1"></div>
-          <div class="item-name">常住人口</div>
-          <div class="item-logo logo2 marginleft10"></div>
-          <div class="item-name">流动人口</div>
-
-        </div>
-        <div class="bar-main">
-          <screen-echarts-frame class=""
-                                @myChartMethod="barInitOk"
-                                ref="barChart"></screen-echarts-frame>
-        </div>
-
-      </div>
-
-      <!-- <screen-nodata class="nodata"
+	<div>
+		<div class="m-jmgl">
+			<div class="m-pie">
+				<div class="pie-left">
+					<screen-echarts-frame
+						class=""
+						@myChartMethod="pieInitOk"
+						ref="pieChart"
+					></screen-echarts-frame>
+				</div>
+				<div class="pie-legend">
+					<div class="item">
+						<div class="item-logo logo1"></div>
+						<div class="item-name">常住人口</div>
+					</div>
+					<div class="item">
+						<div class="item-logo logo2"></div>
+						<div class="item-name">流动人口</div>
+					</div>
+				</div>
+				<div class="pie-right">
+					<div class="right-row">
+						<div class="row-item">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/jm-logo.png"
+									alt
+								/>
+								<div class="title">居民总数</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.resident_count }}</div>
+								<div class="unit">人</div>
+							</div>
+						</div>
+
+						<div class="row-item marginleft10">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/jm-logo.png"
+									alt
+								/>
+								<div class="title">常住人口</div>
+							</div>
+							<div class="item-two">
+								<div class="num">
+									{{ info.inhabitant_count }}
+								</div>
+								<div class="unit">人</div>
+							</div>
+						</div>
+					</div>
+					<div class="right-row margintop18">
+						<div class="row-item">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/jm-logo.png"
+									alt
+								/>
+								<div class="title">流动人口</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.floating_count }}</div>
+								<div class="unit">人</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="m-bar">
+				<div class="bar-title">
+					<img
+						class="title_img"
+						src="@/assets/images/index/list-logo.png"
+						alt
+					/>
+					<div class="tip_title">近一年人口流动变化趋势图</div>
+					<div class="title_line"></div>
+				</div>
+				<div class="bar-legend">
+					<div class="item-logo logo1"></div>
+					<div class="item-name">常住人口</div>
+					<div class="item-logo logo2 marginleft10"></div>
+					<div class="item-name">流动人口</div>
+				</div>
+				<div class="bar-main">
+					<screen-echarts-frame
+						class=""
+						@myChartMethod="barInitOk"
+						ref="barChart"
+					></screen-echarts-frame>
+				</div>
+			</div>
+
+			<!-- <screen-nodata class="nodata"
                      v-if="showNoData"></screen-nodata> -->
-    </div>
-  </div>
+		</div>
+	</div>
 </template>
 
 <script>
-import { requestPost } from "@/js/dai/request";
 import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
-import { pieOption } from './jmPieOption.js'
-import { barOption } from './jmBarOption.js'
+import { pieOption } from "./jmPieOption.js";
+import { barOption } from "./jmBarOption.js";
+import { requestPostBi } from "@/js/dai/request-bipass";
 
 export default {
-  props: {
-    orgId: {
-      type: String,
-      default: "",
-    },
-  },
-  components: {
-    screenEchartsFrame
-  },
-  // mixins: [animate]
-  beforeDestroy () {
-    this.timer && clearInterval(this.timer)
-  },
-  data () {
-    return {
-      showNoData: false,
-      timer: null,
-      barChart: '',
-      pieChart: '',
-      pieOption: {},
-      barOption: {},
-      pieInitState: false,
-      barInitState: false,
-      pieData: []
-    }
-  },
-  mounted () {
-    this.getData()
-  },
-  methods: {
-    pieInitOk () {
-
-      this.pieInitState = true
-    },
-    barInitOk () {
-      this.barInitState = true
-    },
-    getData () {
-      this.getBar()
-      this.getPie()
-    },
-    getBar () {
-      if (this.barInitState) {
-        this.getBarChart()
-      } else {
-        setTimeout(() => {
-          this.getBar()
-        }, 500)
-      }
-    },
-    getPie () {
-      if (this.pieInitState) {
-        this.getPieChart()
-      } else {
-        setTimeout(() => {
-          this.getPie()
-        }, 500)
-      }
-    },
-    // 获取饼状图
-    async getPieChart () {
-
-      this.$refs.pieChart.clear()
-      // this.$refs.pieChart.showLoading()
-
-      // 获取pieChart配置
-      this.pieOption = pieOption()
-
-      // 设置三个配置值
-      this.pieOption.title.text = '73%'
-      this.pieData = [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-
-      ]
-      this.pieOption.series[0].data = this.pieData;
-      // this.$refs.pieChart.hideLoading()
-      this.$refs.pieChart.setOption(this.pieOption)
-    },
-
-    // 获取饼状图
-    async getBarChart () {
-      this.showNoData = false
-      this.$refs.barChart.clear()
-      // this.$refs.barChart.showLoading()
-
-
-      // this.$refs.barChart.hideLoading()
-      let xaxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-      let series = [
-        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
-        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
-
-      ]
-
-      // if (res.data.xaxis && res.data.xaxis.length > 0) {
-      //   const {
-      //     xaxis,
-      //     totalIndexData,
-      //     serviceAbilityData,
-      //     partyDevAbilityData,
-      //     governAbilityData
-      //   } = res.data
-
-      //   this.barOption = barOption()
-      //   this.$refs.barChart.hideLoading()
-      //   this.$refs.barChart.setOption(this.barOption, true)
-      //   this.$refs.barChart.setOption({
-      //     xAxis: { data: xaxis },
-      //     series: [
-      //       { data: totalIndexData },
-      //       { data: partyDevAbilityData },
-      //       { data: governAbilityData },
-      //       { data: serviceAbilityData }
-      //     ]
-      //   }, true)
-      // } else {
-      //   this.showNoData = true
-      // }
-
-      this.barOption = barOption()
-      // this.$refs.barChart.hideLoading()
-      this.$refs.barChart.setOption(this.barOption, true)
-      this.$refs.barChart.setOption({
-        xAxis: { data: xaxis },
-        series: series
-      }, true)
-    }
-
-  }
+	props: {
+		orgId: {
+			type: String,
+			default: "",
+		},
+	},
+	components: {
+		screenEchartsFrame,
+	},
+	// mixins: [animate]
+	beforeDestroy() {
+		this.timer && clearInterval(this.timer);
+	},
+	data() {
+		return {
+			showNoData: false,
+			timer: null,
+			barChart: "",
+			pieChart: "",
+			pieOption: {},
+			barOption: {},
+			pieInitState: false,
+			barInitState: false,
+			pieData: [],
+
+			info: {
+				resident_count: "--",
+				inhabitant_count: "--",
+				floating_count: "--",
+			},
+		};
+	},
+	watch: {
+		orgId() {
+			this.getData();
+		},
+	},
+	mounted() {
+		this.getData();
+	},
+	methods: {
+		pieInitOk() {
+			this.pieInitState = true;
+		},
+		barInitOk() {
+			this.barInitState = true;
+		},
+		async getData() {
+			await this.getInfo();
+			this.getBar();
+			this.getPie();
+		},
+		getBar() {
+			if (this.barInitState) {
+				this.getBarData();
+			} else {
+				setTimeout(() => {
+					this.getBar();
+				}, 500);
+			}
+		},
+		getPie() {
+			if (this.pieInitState) {
+				this.iniPieChart();
+			} else {
+				setTimeout(() => {
+					this.getPie();
+				}, 500);
+			}
+		},
+
+		// 获取房屋总数等
+		async getInfo() {
+			const url = "resident_view";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					mockId: 60029804,
+				}
+			);
+
+			if (code === 0 && data && Array.isArray(data) && data.length > 0) {
+				let info = data[0];
+				this.info = { ...this.info, ...info };
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		// 获取饼状图
+		async iniPieChart() {
+			this.$refs.pieChart.clear();
+			// this.$refs.pieChart.showLoading()
+
+			// 获取pieChart配置
+			this.pieOption = pieOption();
+
+			const { info } = this;
+			// 设置三个配置值
+			this.pieOption.title.text =
+				parseInt((100 * info.inhabitant_count) / info.resident_count) +
+				"%";
+			this.pieData = [
+				{ value: info.inhabitant_count, name: "常住人口" },
+				{ value: info.floating_count, name: "流动人口" },
+			];
+			this.pieOption.series[0].data = this.pieData;
+			this.$refs.pieChart.setOption(this.pieOption);
+			// this.$refs.pieChart.hideLoading()
+
+			// 点击饼图 切换中心显示的比例
+			this.$refs.pieChart.myChart.on("selectchanged", (params) => {
+				console.log(params);
+				const {
+					fromActionPayload: { dataIndexInside },
+				} = params;
+				this.pieOption.title.text =
+					parseInt(
+						(100 *
+							[info.inhabitant_count, info.floating_count][
+								dataIndexInside
+							]) /
+							info.resident_count
+					) + "%";
+				this.$refs.pieChart.myChart.setOption(this.pieOption);
+			});
+		},
+
+		// 获取房屋总数等
+		async getBarData() {
+			const url = "resident_trend";
+
+			this.$refs.barChart.showLoading();
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.org_id,
+					},
+				},
+				{
+					mockId: 60389779,
+				}
+			);
+
+			if (code === 0 && data && Array.isArray(data) && data.length > 0) {
+				let xaxis = [];
+				let series = [{ data: [] }, { data: [] }];
+				for (const {
+					month,
+					inhabitant_count,
+					floating_count,
+				} of data) {
+					xaxis.push(month);
+					series[0].data.push(inhabitant_count);
+					series[1].data.push(floating_count);
+				}
+				this.iniBarChart(xaxis, series);
+				this.$refs.barChart.hideLoading();
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		// 获取饼状图
+		async iniBarChart(xaxis, series) {
+			this.showNoData = false;
+			this.$refs.barChart.clear();
+			this.barOption = barOption();
+			this.$refs.barChart.setOption(this.barOption, true);
+			this.$refs.barChart.setOption(
+				{
+					xAxis: { data: xaxis },
+					series,
+				},
+				true
+			);
+		},
+	},
 };
 </script>
 
 <style lang="scss" scoped>
-.jmgl-main {
-  height: 100%;
-  width: 100%;
-
-  .g-pie {
-    margin-top: 24px;
-    display: flex;
-    justify-content: space-around;
-
-    .pie-left {
-      height: 120px;
-      flex: 0 0 120px;
-    }
-
-    .pie-legend {
-      .item {
-        display: flex;
-        margin-bottom: 12px;
-      }
-    }
-    .pie-right {
-      .right-row {
-        display: flex;
-        // justify-content: space-between;
-
-        .row-item {
-          flex: 0 0 100px;
-          .item-one {
-            display: flex;
-            .img {
-              width: 15px;
-              height: 15px;
-            }
-            .title {
-              margin-left: 9px;
-              font-size: 14px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: rgba(255, 255, 255, 0.65);
-            }
-          }
-
-          .item-two {
-            margin-top: 8px;
-            display: flex;
-            align-items: flex-end;
-            margin-left: 23px;
-
-            .num {
-              font-size: 24px;
-              font-family: PingFangSC-Medium, PingFang SC;
-              font-weight: 500;
-              color: #ffffff;
-            }
-
-            .unit {
-              margin-left: 9px;
-              font-size: 14px;
-              font-family: PingFangSC-Medium, PingFang SC;
-              font-weight: 500;
-              color: #ffffff;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .g-bar {
-    position: relative;
-    margin-top: 14px;
-
-    .bar-title {
-      display: flex;
-      align-items: center;
-      // margin-left: 24px;
-
-      .title_img {
-        width: 17px;
-        height: 17px;
-      }
-      .tip_title {
-        margin-left: 8px;
-        font-size: 16px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #ffffff;
-        line-height: 22px;
-      }
-
-      .title_line {
-        margin-left: 8px;
-        width: 244px;
-        height: 1px;
-        background: linear-gradient(
-          270deg,
-          rgba(55, 198, 255, 0.1) 0%,
-          #1995ff 100%
-        );
-      }
-    }
-
-    .bar-legend {
-      position: absolute;
-      top: 37px;
-      right: 20px;
-      display: flex;
-    }
-
-    .bar-main {
-      margin-top: 10px;
-      height: 225px;
-    }
-  }
+.m-jmgl {
+	height: 100%;
+	width: 100%;
+
+	.m-pie {
+		margin-top: 24px;
+		display: flex;
+		justify-content: space-around;
+
+		.pie-left {
+			height: 120px;
+			flex: 0 0 120px;
+		}
+
+		.pie-legend {
+			.item {
+				display: flex;
+				margin-bottom: 12px;
+			}
+		}
+		.pie-right {
+			.right-row {
+				display: flex;
+				// justify-content: space-between;
+
+				.row-item {
+					flex: 0 0 100px;
+					.item-one {
+						display: flex;
+						.img {
+							width: 15px;
+							height: 15px;
+						}
+						.title {
+							margin-left: 9px;
+							font-size: 14px;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: rgba(255, 255, 255, 0.65);
+						}
+					}
+
+					.item-two {
+						margin-top: 8px;
+						display: flex;
+						align-items: flex-end;
+						margin-left: 23px;
+
+						.num {
+							font-size: 24px;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #ffffff;
+						}
+
+						.unit {
+							margin-left: 9px;
+							font-size: 14px;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #ffffff;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.m-bar {
+		position: relative;
+		margin-top: 14px;
+
+		.bar-title {
+			display: flex;
+			align-items: center;
+			// margin-left: 24px;
+
+			.title_img {
+				width: 17px;
+				height: 17px;
+			}
+			.tip_title {
+				margin-left: 8px;
+				font-size: 16px;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #ffffff;
+				line-height: 22px;
+			}
+
+			.title_line {
+				margin-left: 8px;
+				width: 244px;
+				height: 1px;
+				background: linear-gradient(
+					270deg,
+					rgba(55, 198, 255, 0.1) 0%,
+					#1995ff 100%
+				);
+			}
+		}
+
+		.bar-legend {
+			position: absolute;
+			top: 37px;
+			right: 20px;
+			display: flex;
+		}
+
+		.bar-main {
+			margin-top: 10px;
+			height: 225px;
+		}
+	}
 }
 
 .item-name {
-  margin-left: 8px;
-  font-size: 12px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #8c8c8c;
+	margin-left: 8px;
+	font-size: 12px;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #8c8c8c;
 }
 
 .item-logo {
-  margin-top: 2px;
-  width: 8px;
-  height: 8px;
+	margin-top: 2px;
+	width: 8px;
+	height: 8px;
 }
 
 .logo1 {
-  background: #6fdeff;
+	background: #6fdeff;
 }
 .logo2 {
-  background: #ffaa00;
+	background: #ffaa00;
 }
 .logo3 {
-  background: #1a95ff;
+	background: #1a95ff;
 }
 .marginleft10 {
-  margin-left: 10px;
+	margin-left: 10px;
 }
 
 .margintop18 {
-  margin-top: 18px;
+	margin-top: 18px;
 }
 </style>

src/views/dataBoard/renfang/cpts/rkfx.vue

@@ -1,263 +1,366 @@
 <template>
-  <div class="rkyj-main">
-    <div class="list">
-      <div v-for="(dataitem,index) in listData"
-           :key="index"
-           :class="['item',{'item-sel':dataitem.sel}]"
-           @click="selItem(dataitem,index)">
-        {{dataitem.name}}
-
-      </div>
-
-    </div>
-    <div class="pie-main">
-      <div class="legend">
-        <div class="legend-row">
-
-          <div class="sexblue">男性</div>
-          <div class="content">
-            <div class="num">15632</div>
-            <div class="unit">人</div>
-          </div>
-        </div>
-        <div class="legend-row">
-
-          <div class="sexyellow">女性</div>
-          <div class="content">
-            <div class="num">142632</div>
-            <div class="unit">人</div>
-          </div>
-        </div>
-      </div>
-      <div class="pie">
-        <screen-echarts-frame @myChartMethod="pieInitOk"
-                              ref="pieChart"></screen-echarts-frame>
-      </div>
-    </div>
-
-  </div>
+	<div class="m-rkyj">
+		<div class="list">
+			<div
+				v-for="item in tabList"
+				:key="item"
+				:class="['item', { 'item-sel': currentTab == item }]"
+				@click="currentTab = item"
+			>
+				{{ item }}
+			</div>
+		</div>
+
+		<div class="pie-main">
+			<div class="legend">
+				<div
+					class="legend-row"
+					:key="'pie' + item.name"
+					v-for="item in pieData"
+				>
+					<div class="name">{{ item.name }}</div>
+					<div class="content">
+						<div class="num">{{ item.value }}</div>
+						<div class="unit">人</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="pie">
+				<screen-echarts-frame
+					@myChartMethod="pieInitOk"
+					ref="pieChart"
+				></screen-echarts-frame>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import { requestPost } from "@/js/dai/request";
 import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
-import { pieOption } from './rkfxPieOption.js'
+import { pieOption } from "./rkfxPieOption.js";
+import { requestPostBi } from "@/js/dai/request-bipass";
 
 export default {
-  props: {
-    orgId: {
-      type: String,
-      default: "",
-    },
-  },
-  data () {
-    return {
-      showNoData: false,
-      timer: null,
-      pieChart: '',
-      pieOption: {},
-      pieInitState: false,
-      pieData: [],
-      listData: [
-        {
-          name: '性别',
-          sel: true
-        },
-        {
-          name: '户籍',
-          sel: false
-        },
-        {
-          name: '入户状况',
-          sel: false
-        },
-        {
-          name: '年龄',
-          sel: false
-        },
-        {
-          name: '志愿者类别',
-          sel: false
-        },
-        {
-          name: '党员文化程度',
-          sel: false
-        },
-        {
-          name: '下级人口分布',
-          sel: false
-        },
-
-      ]
-    }
-  },
-  components: {
-    screenEchartsFrame
-  },
-  mounted () {
-    this.getPie()
-  },
-  methods: {
-    selItem (selItem, selIndex) {
-      this.listData.forEach((element, index) => {
-        if (index === selIndex) {
-          element.sel = true
-        } else {
-          element.sel = false
-        }
-
-      });
-    },
-
-    pieInitOk () {
-      this.pieInitState = true
-    },
-    getPie () {
-      if (this.pieInitState) {
-        this.getPieChart()
-      } else {
-        setTimeout(() => {
-          this.getPie()
-        }, 500)
-      }
-    },
-    // 获取饼状图
-    async getPieChart () {
-
-      this.$refs.pieChart.clear()
-      // this.$refs.pieChart.showLoading()
-
-      // 获取pieChart配置
-      this.pieOption = pieOption()
-
-      // 设置三个配置值
-
-      this.pieData = [
-        { value: 40, name: 'rose 1' },
-        { value: 38, name: 'rose 2' },
-      ]
-      this.pieOption.series[0].data = this.pieData;
-      // this.$refs.pieChart.hideLoading()
-      this.$refs.pieChart.setOption(this.pieOption)
-    },
-
-  },
+	props: {
+		orgId: {
+			type: String,
+			default: "",
+		},
+	},
+	data() {
+		return {
+			showNoData: false,
+			timer: null,
+			pieChart: "",
+			pieOption: {},
+			pieInitState: false,
+			pieData: [],
+
+			tabList: [
+				"性别",
+				"户籍",
+				"人户状况",
+				"年龄",
+				"志愿者类别",
+				"党员文化程度",
+				// "下级人口分布",
+			],
+			currentTab: "性别",
+
+			info: {
+				male_count: 0,
+				female_count: 0,
+				resi_y_house_y_count: 0,
+				resi_y_house_n_count: 0,
+				resi_n_house_y_count: 0,
+				primary_count: 0,
+				junior_high_count: 0,
+				second_speci_count: 0,
+				high_school_count: 0,
+				junior_college_count: 0,
+				undergrad_count: 0,
+				master_count: 0,
+				doctor_count: 0,
+				local_count: 0,
+				field_count: 0,
+				age50_count: 0,
+				age5059_count: 0,
+				age6069_count: 0,
+				age7079_count: 0,
+				age80_count: 0,
+				culture_count: 0,
+				committee_count: 0,
+				capable_count: 0,
+				friend_count: 0,
+				agent_count: 0,
+				mediator_count: 0,
+				collector_count: 0,
+				security_count: 0,
+				party_mem_count: 0,
+			},
+		};
+	},
+	components: {
+		screenEchartsFrame,
+	},
+	mounted() {
+		this.init();
+	},
+	watch: {
+		currentTab() {
+			this.setPieData();
+		},
+		orgId() {
+			this.init();
+		},
+	},
+	methods: {
+		async init() {
+			await this.getInfo();
+
+			this.getPie();
+		},
+
+		// 获取房屋总数等
+		async getInfo() {
+			const url = "resident_analyze";
+
+			this.$refs.pieChart.showLoading();
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					mockId: 60041615,
+				}
+			);
+			this.$refs.pieChart.hideLoading();
+
+			if (code === 0 && data && Array.isArray(data) && data.length > 0) {
+				let info = data[0];
+				this.info = { ...this.info, ...info };
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		selItem(selItem, selIndex) {
+			this.tabList.forEach((element, index) => {
+				if (index === selIndex) {
+					element.sel = true;
+				} else {
+					element.sel = false;
+				}
+			});
+		},
+
+		pieInitOk() {
+			this.pieInitState = true;
+		},
+
+		getPie() {
+			if (this.pieInitState) {
+				this.setPieData();
+			} else {
+				setTimeout(() => {
+					this.getPie();
+				}, 500);
+			}
+		},
+
+		setPieData() {
+			const { currentTab, info } = this;
+			if (currentTab == "性别") {
+				this.pieData = [
+					{ value: info.male_count, name: "男" },
+					{ value: info.female_count, name: "女" },
+				];
+			} else if (currentTab == "户籍") {
+				this.pieData = [
+					{ value: info.local_count, name: "本地户籍" },
+					{ value: info.field_count, name: "外地户籍" },
+				];
+			} else if (currentTab == "人户状况") {
+				this.pieData = [
+					{ value: info.resi_y_house_y_count, name: "人户一致" },
+					{ value: info.resi_y_house_n_count, name: "人在户不在" },
+					{ value: info.resi_n_house_y_count, name: "户在人不在" },
+				];
+			} else if (currentTab == "年龄") {
+				this.pieData = [
+					{ value: info.age50_count, name: "50岁以下" },
+					{ value: info.age5059_count, name: "50-59岁" },
+					{ value: info.age6069_count, name: "60-69岁" },
+					{ value: info.age7079_count, name: "70-79岁" },
+					{ value: info.age80_count, name: "80岁以上" },
+				];
+			} else if (currentTab == "志愿者类别") {
+				this.pieData = [
+					{ value: info.culture_count, name: "文化队伍" },
+					{ value: info.committee_count, name: "楼委会" },
+					{ value: info.capable_count, name: "能人达人" },
+					{ value: info.friend_count, name: "老友俱乐部" },
+					{ value: info.agent_count, name: "代办员" },
+					{ value: info.mediator_count, name: "调解员" },
+					{ value: info.collector_count, name: "采集员" },
+					{ value: info.security_count, name: "治安巡逻员" },
+					{ value: info.party_mem_count, name: "党员中心户" },
+				];
+			} else if (currentTab == "党员文化程度") {
+				this.pieData = [
+					{ value: info.primary_count, name: "小学及文盲" },
+					{ value: info.junior_high_count, name: "初中" },
+					{ value: info.second_speci_count, name: "中专" },
+					{ value: info.high_school_count, name: "高中" },
+					{ value: info.junior_college_count, name: "大专" },
+					{ value: info.undergrad_count, name: "本科" },
+					{ value: info.master_count, name: "硕士" },
+					{ value: info.doctor_count, name: "博士" },
+				];
+			} else if (currentTab == "下级人口分布") {
+				this.pieData = [];
+			}
+			this.iniPieChart();
+		},
+
+		// 获取饼状图
+		async iniPieChart() {
+			this.$refs.pieChart.clear();
+			// 获取pieChart配置
+			this.pieOption = pieOption();
+			this.pieOption.series[0].name = this.currentTab;
+			this.pieOption.series[0].data = this.pieData;
+			this.$refs.pieChart.setOption(this.pieOption);
+		},
+	},
 };
 </script>
 
 <style lang="scss" scoped>
-.rkyj-main {
-  .list {
-    margin-top: 8px;
-    display: flex;
-    flex-wrap: wrap;
-
-    .item {
-      margin-top: 8px;
-      background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png);
-      background-size: cover;
-      flex: 0 0 117px;
-
-      height: 32px;
-      margin-right: 2px;
-      text-align: center;
-      align-items: center;
-      font-size: 14px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #ffffff;
-      line-height: 32px;
-      cursor: pointer;
-    }
-
-    .item-sel {
-      background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png);
-      background-size: cover;
-    }
-  }
-
-  .pie-main {
-    display: flex;
-    justify-content: space-between;
-    margin-left: 25px;
-
-    .legend {
-      // flex: 0 0 140px;
-      margin-top: 40px;
-
-      .legend-row {
-        margin-top: 15px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .sexblue {
-          position: relative;
-
-          margin-left: 5px;
-          font-size: 12px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: rgba(255, 255, 255, 0.65);
-          line-height: 17px;
-
-          &::before {
-            content: "";
-            position: absolute;
-            top: 4px;
-            left: -15px;
-            width: 8px;
-            height: 8px;
-            background: #1a95ff;
-          }
-        }
-        .sexyellow {
-          position: relative;
-
-          margin-left: 5px;
-          font-size: 12px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: rgba(255, 255, 255, 0.65);
-          line-height: 17px;
-
-          &::before {
-            content: "";
-            position: absolute;
-            top: 4px;
-            left: -15px;
-            width: 8px;
-            height: 8px;
-            background: #ff6138;
-          }
-        }
-
-        .content {
-          margin-left: 24px;
-          display: flex;
-          align-items: flex-end;
-
-          font-family: PingFangSC-Medium, PingFang SC;
-          font-weight: 500;
-          color: #ffffff;
-        }
-
-        .num {
-          font-size: 20px;
-        }
-
-        .unit {
-          margin-left: 5px;
-          font-size: 14px;
-        }
-      }
-    }
-
-    .pie {
-      margin-top: 32px;
-      flex: 0 0 280px;
-      height: 270px;
-    }
-  }
+.m-rkyj {
+	.list {
+		margin-top: 8px;
+		display: flex;
+		flex-wrap: wrap;
+
+		.item {
+			margin-top: 8px;
+			background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png);
+			background-size: cover;
+			flex: 0 0 117px;
+
+			height: 32px;
+			margin-right: 2px;
+			text-align: center;
+			align-items: center;
+			font-size: 14px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #ffffff;
+			line-height: 32px;
+			cursor: pointer;
+		}
+
+		.item-sel {
+			background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png);
+			background-size: cover;
+		}
+	}
+
+	.pie-main {
+		display: flex;
+		justify-content: space-between;
+		margin-left: 25px;
+
+		.legend {
+			// flex: 0 0 140px;
+			margin-top: 40px;
+
+			.legend-row {
+				margin-top: 15px;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				&:nth-child(1) .name::before {
+					background: #1a95ff;
+				}
+				&:nth-child(2) .name::before {
+					background: #ff6138;
+				}
+				&:nth-child(3) .name::before {
+					background: #2adcea;
+				}
+				&:nth-child(4) .name::before {
+					background: #2cc4ad;
+				}
+				&:nth-child(5) .name::before {
+					background: #7377f5;
+				}
+				&:nth-child(6) .name::before {
+					background: #32de66;
+				}
+				&:nth-child(7) .name::before {
+					background: #8155d4;
+				}
+				&:nth-child(8) .name::before {
+					background: #c7ea48;
+				}
+				&:nth-child(9) .name::before {
+					background: #ef47c2;
+				}
+				&:nth-child(10) .name::before {
+					background: #d43349;
+				}
+				.name {
+					position: relative;
+					margin-left: 5px;
+					font-size: 12px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: rgba(255, 255, 255, 0.65);
+					line-height: 17px;
+
+					&::before {
+						content: "";
+						position: absolute;
+						top: 4px;
+						left: -15px;
+						width: 8px;
+						height: 8px;
+					}
+				}
+
+				.content {
+					margin-left: 24px;
+					display: flex;
+					align-items: flex-end;
+
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #ffffff;
+				}
+
+				.num {
+					font-size: 20px;
+				}
+
+				.unit {
+					margin-left: 5px;
+					font-size: 14px;
+				}
+			}
+		}
+
+		.pie {
+			margin-top: 32px;
+			flex: 0 0 280px;
+			height: 270px;
+		}
+	}
 }
 </style>

src/views/dataBoard/renfang/cpts/rkfxPieOption.js

@@ -1,32 +1,54 @@
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 export function pieOption() {
-  const center = ["50%", "170px"];
-  return {
-    color:  ['#1A95FF', '#FF6138'],
-    series: [
-      {
-        name: 'Nightingale Chart',
-        type: 'pie',
-        radius: [40, 130],
-        center: ['50%', '50%'],
-        roseType: 'area',
-        itemStyle: {
-          borderRadius: 1
-        },
-        label:{
-          normal:{
-            position:'inner',
-            show:true,
-            formatter:'{d}%',
-            fontSize:24,
-            color: "#FFFFFF",
-          }
-        },
-        data: [
-        
-        
-        ]
-      }
-    ]
-  };
+	const center = ["50%", "170px"];
+	return {
+		color: [
+			"#1A95FF",
+			"#FF6138",
+			"#2adcea",
+			"#2cc4ad",
+			"#7377f5",
+			"#32de66",
+			"#8155d4",
+			"#c7ea48",
+			"#ef47c2",
+			"d43349",
+		],
+		tooltip: {
+			trigger: "item",
+		},
+		series: [
+			{
+				name: "",
+				type: "pie",
+				radius: [40, 130],
+				center: ["50%", "50%"],
+				roseType: "area",
+				itemStyle: {
+					borderRadius: 1,
+				},
+				avoidLabelOverlap: false,
+				labelLine: {
+					show: false,
+				},
+				label: {
+					normal: {
+						position: "inner",
+						show: true,
+						formatter: "{d}%",
+						fontSize: 24,
+						color: "#FFFFFF",
+					},
+				},
+				emphasis: {
+					label: {
+						show: true,
+						fontSize: 36,
+						fontWeight: "bold",
+					},
+				},
+				data: [],
+			},
+		],
+	};
 }

src/views/dataBoard/renfang/cpts/szsq.vue

@@ -1,115 +1,195 @@
 <template>
-  <div class="szsq-main">
-    <div class="item">
-      <img class="img"
-           src="@/assets/images/shuju/renfang/szsq-logo.png"
-           alt />
-      <div class="content">
-        <div class="row1">
-          <div class="title">数字社区</div>
-          <div class="line"></div>
-        </div>
-        <div class="row2">
-          <span class="num">521</span>
-          <span class="unit">个</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="item">
-      <img class="img"
-           src="@/assets/images/shuju/renfang/szsq-logo.png"
-           alt />
-      <div class="content">
-        <div class="row1">
-          <div class="title">开通数量</div>
-          <div class="line"></div>
-        </div>
-        <div class="row2">
-          <span class="num">123</span>
-          <span class="unit">个</span>
-        </div>
-      </div>
-    </div>
-
-  </div>
+	<div class="szsq-main">
+		<div class="item">
+			<img
+				class="img"
+				src="@/assets/images/shuju/renfang/szsq-logo.png"
+				alt
+			/>
+			<div class="content">
+				<div class="row1">
+					<div class="title">社区开通占比</div>
+					<div class="line"></div>
+				</div>
+				<div class="row2">
+					<span class="num">{{ info.per }}</span>
+					<span class="unit">%</span>
+				</div>
+			</div>
+		</div>
+
+		<div class="item">
+			<img
+				class="img"
+				src="@/assets/images/shuju/renfang/szsq-logo.png"
+				alt
+			/>
+			<div class="content">
+				<div class="row1">
+					<div class="title">社区总数</div>
+					<div class="line"></div>
+				</div>
+				<div class="row2">
+					<span class="num">{{ info.community_count }}</span>
+					<span class="unit">个</span>
+				</div>
+			</div>
+		</div>
+
+		<div class="item">
+			<img
+				class="img"
+				src="@/assets/images/shuju/renfang/szsq-logo.png"
+				alt
+			/>
+			<div class="content">
+				<div class="row1">
+					<div class="title">开通数量</div>
+					<div class="line"></div>
+				</div>
+				<div class="row2">
+					<span class="num">{{ info.account_count }}</span>
+					<span class="unit">个</span>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import { requestPost } from "@/js/dai/request";
+import { requestPostBi } from "@/js/dai/request-bipass";
 
 export default {
-  props: {
-    orgId: {
-      type: String,
-      default: "",
-    },
-  },
-  data () { },
-  mounted () { },
-  methods: {},
+	props: {
+		orgId: {
+			type: String,
+			default: "",
+		},
+	},
+	data() {
+		return {
+			info: {
+				per: "--",
+				community_count: "--",
+				account_count: "--",
+			},
+		};
+	},
+	mounted() {
+		this.getInfo();
+	},
+
+	watch: {
+		orgId() {
+			this.getInfo();
+		},
+	},
+	methods: {
+		// 社区开通占比
+		async getInfo() {
+			const url = "account_view";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					mockId: 61305622,
+				}
+			);
+
+			if (code === 0 && data && Array.isArray(data) && data.length > 0) {
+				let info = data[0];
+				this.info.community_count = info.community_count;
+				this.info.account_count = info.account_count;
+				this.info.per = parseInt(
+					(100 * info.account_count) / info.community_count
+				);
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
 };
 </script>
 
 <style lang="scss" scoped>
 .szsq-main {
-  margin-top: 22px;
-  display: flex;
-  justify-content: space-around;
-
-  .item {
-    display: flex;
-
-    .img {
-      height: 64px;
-      width: 64px;
-    }
-
-    .content {
-      margin-left: 19px;
-
-      .row1 {
-        .title {
-          font-size: 14px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: rgba(255, 255, 255, 0.65);
-          padding-left: 8px;
-        }
-
-        .line {
-          margin-top: -6px;
-          width: 88px;
-          height: 8px;
-          background: linear-gradient(
-            270deg,
-            rgba(168, 241, 255, 0) 0%,
-            #6fdeff 100%
-          );
-          opacity: 0.25;
-        }
-      }
-
-      .row2 {
-        margin-top: 4px;
-
-        .num {
-          font-size: 24px;
-          font-family: PingFangSC-Medium, PingFang SC;
-          font-weight: 500;
-          color: #ffffff;
-          line-height: 33px;
-        }
-
-        .unit {
-          margin-left: 9px;
-          font-size: 14px;
-          font-family: PingFangSC-Medium, PingFang SC;
-          font-weight: 500;
-          color: #ffffff;
-        }
-      }
-    }
-  }
+	margin-top: 22px;
+	display: flex;
+	justify-content: space-around;
+
+	.item {
+		display: flex;
+
+		.img {
+			width: 24px;
+			height: 24px;
+		}
+
+		&:first-child {
+			.img {
+				margin-top: -5px;
+				width: 64px;
+				height: 64px;
+			}
+
+			.content {
+				margin-top: 5px;
+				margin-left: 15px;
+			}
+		}
+
+		.content {
+			margin-top: 5px;
+			margin-left: 5px;
+
+			.row1 {
+				.title {
+					font-size: 14px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: rgba(255, 255, 255, 0.65);
+					padding-left: 8px;
+				}
+
+				.line {
+					margin-top: -6px;
+					width: 88px;
+					height: 8px;
+					background: linear-gradient(
+						270deg,
+						rgba(168, 241, 255, 0) 0%,
+						#6fdeff 100%
+					);
+					opacity: 0.25;
+				}
+			}
+
+			.row2 {
+				margin-top: 4px;
+				padding-left: 8px;
+
+				.num {
+					font-size: 24px;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #ffffff;
+					line-height: 33px;
+				}
+
+				.unit {
+					margin-left: 9px;
+					font-size: 14px;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #ffffff;
+				}
+			}
+		}
+	}
 }
 </style>

src/views/dataBoard/renfang/index.vue

@@ -1,332 +1,339 @@
 <template>
-	<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>
+		<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 class="m-subbox">
+						<fwgl :orgId="orgData.id"></fwgl>
+					</div>
 				</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-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 class="m-subbox">
+						<jmgl :orgId="orgData.id"></jmgl>
+					</div>
 				</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>10.22</b>
-								%
+			<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>
-					<div class="item">
-						<div class="item-info">
-							<div>
-								<img
-									src="~@/assets/images/shuju/renfang/index/per/qsn.png"
-								/>青少年
-							</div>
-							<div>
-								<b>10.22</b>
-								%
+						<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>
-					<div class="item">
-						<div class="item-info">
-							<div>
-								<img
-									src="~@/assets/images/shuju/renfang/index/per/zyz.png"
-								/>志愿者
-							</div>
-							<div>
-								<b>10.22</b>
-								%
+						<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>
-					<div class="item">
-						<div class="item-info">
-							<div>
-								<img
-									src="~@/assets/images/shuju/renfang/index/per/dy.png"
-								/>党员
-							</div>
-							<div>
-								<b>10.22</b>
-								%
+						<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>
-					<div class="item">
-						<div class="item-info">
-							<div>
-								<img
-									src="~@/assets/images/shuju/renfang/index/per/syry.png"
-								/>失业人员
-							</div>
-							<div>
-								<b>10.22</b>
-								%
+						<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>
-					<div class="item">
-						<div class="item-info">
-							<div>
-								<img
-									src="~@/assets/images/shuju/renfang/index/per/ygxl.png"
-								/>
-								月更新率
-							</div>
-							<div>
-								<b>10.22</b>
-								%
+						<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>
-				</div>
 
-				<grid-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"
+					<grid-map
+						ref="map"
+						v-if="orgData.id"
+						@clickAgency="clickAgencyItem"
+						:srcGridData="orgData"
 					/>
-					<span>点击搜索</span>
 				</div>
 
-				<div class="card" v-show="searchModule.displayedCard">
-					<div class="card-input">
-						<div class="card-btn">
-							<img
-								src="~@/assets/images/shuju/renfang/index/search/search.png"
-							/>
-						</div>
-
-						<input
-							type="text"
-							placeholder="输入关键词搜索"
-							@key.enter="handleSearch"
-							v-model="searchModule.keyword"
+				<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="i-div"></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>
 
-						<div
-							class="card-btn"
-							@click="searchModule.displayedCard = false"
-						>
-							<img
-								src="~@/assets/images/shuju/renfang/index/search/close.png"
+							<input
+								type="text"
+								placeholder="输入关键词搜索"
+								@keyup.enter="handleSearch"
+								v-model="searchModule.keyword"
 							/>
-						</div>
-					</div>
-					<div class="card-show">
-						<div class="card-tabs">
-							<div
-								:class="{
-									'z-on': searchModule.resultTab == 'all',
-								}"
-								@click="searchModule.resultTab = 'all'"
-							>
-								全部
-							</div>
-							<div
-								:class="{
-									'z-on': searchModule.resultTab == 'resi',
-								}"
-								@click="searchModule.resultTab = 'resi'"
-							>
-								居民
-							</div>
+
+							<div class="i-div"></div>
+
 							<div
-								:class="{
-									'z-on': searchModule.resultTab == 'all',
-								}"
-								@click="searchModule.resultTab = 'all'"
+								class="card-btn"
+								@click="searchModule.displayedCard = false"
 							>
-								小区
+								<img
+									src="~@/assets/images/shuju/renfang/index/search/close.png"
+								/>
 							</div>
-							<div
-								:class="{
-									'z-on': searchModule.resultTab == 'all',
-								}"
-								@click="searchModule.resultTab = 'all'"
-							>
-								楼栋
+						</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="{
-									'z-on': searchModule.resultTab == 'all',
-								}"
-								@click="searchModule.resultTab = 'all'"
+								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>
 
-						<div
-							class="card-list"
-							v-if="searchModule.result.length > 0"
-						>
-							<div
-								class="card-item"
-								:key="item.id"
-								v-for="item in searchModule.result"
-							>
-								<span>{{ item.title }}</span>
+							<div class="card-empty" v-else>
 								<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"
+									src="~@/assets/images/shuju/renfang/index/empty.png"
 								/>
+								<span>没有找到搜索结果～</span>
 							</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>
+				<div class="m-box m-cate">
+					<div class="box-title">
 						<img
-							src="~@/assets/images/shuju/renfang/index/i-hint.png"
+							src="~@/assets/images/shuju/main/card-title-bg-800.png"
+							class="box-title-bg"
 						/>
-					</div>
-				</div>
+						<div class="box-title-txt">居民分类分析</div>
 
-				<div class="list">
-					<div
-						class="item"
-						:key="item.code"
-						v-for="(item, index) in warningData"
-					>
-						<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.count + '%' }"></b>
-						</div>
-						<div class="item-per">
-							<span>较上月</span>
+						<div class="box-title-btn">
 							<img
-								v-if="false"
-								src="~@/assets/images/shuju/renfang/index/up.png"
+								src="~@/assets/images/shuju/renfang/index/znyc.png"
 							/>
+							<span>智能预测</span>
 							<img
-								v-else
-								src="~@/assets/images/shuju/renfang/index/down.png"
+								src="~@/assets/images/shuju/renfang/index/i-hint.png"
 							/>
-							<b>{{ item.count }}</b>
-							<span>人</span>
+						</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>
 
-		<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="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 class="m-subbox m-szsq">
+						<szsq :orgId="orgData.id"></szsq>
+					</div>
 				</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-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 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 class="m-subbox">
+						<rkfx :orgId="orgData.id"></rkfx>
+					</div>
 				</div>
 			</div>
+
+			<cpt-loading v-show="false" />
 		</div>
 	</div>
 </template>
@@ -338,94 +345,172 @@ 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 },
+	components: { gridMap, fwgl, jmgl, rkfx, rkyj, szsq, cptLoading, cptBread },
 
 	data() {
 		return {
+			loading: false,
+
 			orgData: {}, //当前组织对象
 			orgId: "",
 			orgLevel: "",
-			subAgencyArray: [],
 
-			warningData: [],
+			breadList: [
+				{
+					orgId: "",
+					orgLevel: "",
+					meta: { title: "人防总览" },
+				},
+			],
+
+			resiCategoryData: [],
 
 			searchModule: {
 				displayedCard: false,
 				keyword: "",
-				resultTab: "all", // all resi
+				resultTab: "0", // 0所有 1，居民；2，小区；3，楼栋；4，房屋
 				result: [
-					{
-						id: 1,
-						title: "四季景园",
-					},
-					{
-						id: 11,
-						title: "四季景园-四号楼",
-					},
-					{
-						id: 1111,
-						title: "四季景园-四号楼-1单元",
-					},
-					{
-						id: 111111,
-						title: "四季景园-四号楼-1单元-101",
-					},
-					{
-						id: 12342,
-						title: "四季景园-2单元",
-					},
-					{
-						id: 133,
-						title: "四季景园-2单元-2号楼-201",
-					},
-					{
-						id: 122,
-						title: "四季景园2",
-					},
-					{
-						id: 1312,
-						title: "四季景园4",
-					},
+					// {
+					// 	id: 1,
+					// 	title: "四季景园",
+					// },
 				],
 			},
 
 			perInfo: {
-				unused_count: 10,
-				lease_count: 10,
-				house_count: 100,
-				org_id: "10001",
-				self_dwelling_count: 10,
+				unemployed_ratio: "--",
+				crowd_ratio: "--",
+				volunteer_ratio: "--",
+				month_update_ratio: "--",
+				aged_ratio: "--",
+				teenagers_ratio: "--",
 			},
 		};
 	},
-	async mounted() {
-		const queryOrgId = getQueryPara("orgId");
-		const queryOrgLevel = getQueryPara("orgLevel");
-		console.log("orgId", queryOrgId);
-		if (queryOrgId) {
-			this.orgId = queryOrgId;
-			this.orgLevel = queryOrgLevel || "agency";
-		}
 
-		//加载组织数据
-		await this.loadOrgData();
-		this.getWarningList();
-		this.getPerInfo();
+	mounted() {
+		this.init();
+	},
+
+	watch: {
+		$route() {
+			this.init();
+		},
 	},
+
 	methods: {
-		clickAgencyItem() {},
+		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;
+		},
 
-		handleSearch() {
+		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')
+			console.log("=========================getPerInfo");
 			const url = "house_view";
 
 			const { data, code, msg } = await requestPostBi(
@@ -436,7 +521,7 @@ export default {
 					},
 				},
 				{
-					mockId: 60810589,
+					mockId: 61167746,
 				}
 			);
 
@@ -447,23 +532,32 @@ export default {
 			}
 		},
 
-		//加载组织数据
-		async getWarningList() {
-			const url = "/epmetuser/statsresiwarn/list";
-			let params = {
-				id: this.orgData.id,
-				level: "agency",
-			};
+		//居民分类分析数据
+		async getResiCategoryData() {
+			console.log("=========================getResiCategoryData");
+			const url = "resident_class_statics";
 
-			const { data, code, msg } = await requestPost(url, params);
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgData.id,
+					},
+				},
+				{
+					mockId: 60031937,
+				}
+			);
 
 			if (code === 0) {
-				this.warningData = data.map((item) => {
+				this.resiCategoryData = data.map((item) => {
 					return {
-						code: item.columnName,
+						code: item.label,
 						name: item.label,
 						count: item.count,
-						const: "const",
+						ratio: item.ratio,
+						growth: item.growth,
+						growthAbs: Math.abs(item.growth),
 					};
 				});
 			} else {
@@ -471,6 +565,31 @@ export default {
 			}
 		},
 
+		//获取地图上显示的组织数据
+		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";
@@ -485,11 +604,6 @@ export default {
 				this.orgData = data;
 				this.orgId = this.orgData.id;
 				this.orgLevel = this.orgData.level;
-				if (data.children && data.children.length > 0) {
-					this.subAgencyArray = data.children;
-				} else {
-					this.subAgencyArray = [];
-				}
 			} else {
 				this.$message.error(msg);
 			}

src/views/modules/customer/feedback/DetailForm.vue

@@ -520,7 +520,7 @@ export default {
 }
 </script>
 
-<style scope>
+<style scoped>
 .div_total {
   margin: 0 10px;
 }

src/views/modules/productConfig/autoTest/autoTestList copy.vue

@@ -897,7 +897,7 @@ export default {
 }
 </script>
 
-<style scope>
+<style scoped>
 .div_btn {
   z-index: 10;
   position: absolute;

src/views/modules/productConfig/subscribe/TempDetail.vue

@@ -225,7 +225,7 @@ export default {
 }
 </script>
 
-<style scope>
+<style scoped>
 .el-row {
   margin-bottom: 0 20px 20px 20px;
 }

src/views/modules/productConfig/subscribe/TempEdit.vue

@@ -316,7 +316,7 @@ export default {
 }
 </script>
 
-<style scope>
+<style scoped>
 .el-row {
   margin-bottom: 20px;
 }