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

<template>
	<div>
		<div class="g-row">
			<div class="m-box m-search">
				<div class="wrap">
					<div class="title">
						<span>社区查询</span>
					</div>

					<div class="tabs">
						<div :class="{ 'z-on': searchData.type == 'jumin' }" @click="searchDataTab('jumin')">
							查居民
						</div>
						<div :class="{ 'z-on': searchData.type == 'fangwu' }" @click="searchDataTab('fangwu')">
							查房屋
						</div>
					</div>

					<div class="search">
						<div class="search-input">
							<div class="input">
								<input type="text" :placeholder="typePlaceholder[searchData.type]
									" v-model="searchData.searchKey" @keyup.enter="handleClickSearchBtn" />

								<div class="close-btn" v-if="searchData.searchKey != ''" @click="searchData.searchKey = ''">
									<img src="@/assets/img/shequ/close.png" />
								</div>
							</div>
							<div class="btn" @click="handleClickSearchBtn">
								查一下
							</div>
						</div>
					</div>
				</div>
			</div>
			<section>
				<div class="g-row-left">
					<div class="m-box m-tx">
						<div class="wrap">
							<div class="header">
								<span>智能提醒</span>
							</div>
							<div class="more" @click="toNoticePage">更多></div>
							<div class="cnt" v-if="noticeData.length > 0">
								<div @click="handleClickNotice(item)" class="item" :key="'notice' + item.targetId + index"
									v-for="(item, index) in noticeData">
									<div class="item_left">
										<i class="i-tag" v-if="item.readFlag == 1">已读</i>
									<i class="i-tag" v-else>未读</i>
									</div>
									<div class="item_right">
										<div class="item-date">
											{{ item.createdTime }}
										</div>
										<div class="item-title">
											{{ item.content }}
										</div>
									</div>
								</div>
							</div>

							<div class="cnt" v-else>
								<div class="empty">
									<img src="~@/assets/images/shuju/renfang/index/empty.png" />
									<span>暂无提醒～</span>
								</div>
							</div>
						</div>
					</div>
					<div class="m-box m-tb">
						<div class="wrap">
							<div class="header">
								<span>不满意事项月度趋势分析</span>
							</div>
						</div>
						<div class="cnt">
							<!-- 图表 -->
							<div id="my_chart" style="width: 500px;height: 200px; position: relative;top:-10px"></div>
						</div>
					</div>
				</div>
				<div class="g-row-right">
					<!--  -->
					<div class="m-box m-pan">
						<div class="header">
							<span>当前组织名称概览</span>
						</div>
						<p>{{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为{{ pandectData.underCount }}个{{
							pandectData.underName
						}}，</span>现有房屋{{ pandectData.homeCount }}间、自住房屋{{ pandectData.selfStay }}间、
						出租房屋{{ pandectData.rentOut }}间、
						闲置房屋{{ pandectData.vacantHouse }}间、现有居民{{
							pandectData.resiCount
						}}户、{{
							pandectData.totalResidents
						}}人、其中常住人口{{
							pandectData.permanentResiCount
						}}人，流动人口{{
							pandectData.floatingResiCount
						}}人，各类群体分布如下：
						</p>
						<div>
							<el-button-group class="btn_group">
								<el-button type="primary" :plain="btnSelectA"
									@click="handleClickResiCategory">居民分类统计</el-button>
								<el-button type="primary" :plain="btnSelectB"
									@click="handleClickIntelligentPrediction">智能预测</el-button>
							</el-button-group>
						</div>
						<div class="cnt">	
							<div class="cnt-right">
								<div class="list">
									<div class="item" @click="handleClickCategory(item)" :key="item.code" v-for="(
												item, index
											) in resiCategory.list">
										<div>
											{{
												("0" + (index + 1)).substr(-2)
											}}.
										</div>
										<div class="item-name">
											{{ item.name }}
										</div>
										<div class="item-div"></div>
										<div class="item-count">
											{{ item.count }}人
										</div>
										<div class="item-progress">
											<b :style="{
												width: item.per + '%',
											}"></b>
										</div>
										<div class="item-per">
											{{ item.per }} %
										</div>
									</div>
								</div>
							</div>
						</div>
						<p class="hint" v-if="resiCategory.list.length > 0">
										根据数据分析结果，建议重点关注
										<b>{{ resiCategory.list[0].name }}、{{
												resiCategory.list[1].name
											}}、{{ resiCategory.list[2].name }}</b
										>
										三类群体，开展相关的社区服务和活动。
						</p>
					</div>
				</div>
			</section>
		</div>
		<fastcall ref="fastcall" />
	</div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import resiCategoryMap from "@/views/business/resi-category-map.js";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import fastcall from "@/views/modules/cpts/fastcall";
import * as echarts from 'echarts';
export default {
	components: { fastcall },

	data() {
		return {
			searchStatus: "ini", //ing over
			searchData: {
				type: "jumin",
				searchKey: "",
			},
			btnSelectA: false,
			btnSelectB: true,
			typePlaceholder: {
				jumin: "请输入姓名或联系电话或证件号",
				fangwu: "请输入小区名称或楼栋名称",
				xuqiu: "请输入需求人或需求内容或服务方",
			},

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

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

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

			noticeData: [],

			option : {
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['12345不满意数', '省满意调查不满意数', '社区自评不满意数']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '8%',
					containLabel: true
				},
				toolbox: {
					feature: {
					saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
					name: '12345不满意数',
					type: 'line',
					stack: 'Total',
					data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
					name: '省满意调查不满意数',
					type: 'line',
					stack: 'Total',
					data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
					name: '社区自评不满意数',
					type: 'line',
					stack: 'Total',
					data: [150, 232, 201, 154, 190, 330, 410]
					}
				]
},
		};
	},
	computed: {
		maxTableHeight() {
			// return this.clientHeight - 450;
			return 420;
		},
		...mapGetters(["clientHeight"]),
	},
	watch: {
		"searchData.searchKey": function (val) {
			if (val == "") {
				this.searchStatus = "ini";
			}
		},
		$route: {
			handler: function (newVal, oldVal) {
				if (newVal.name == "home") {
					this.getApiData();
				}
			},
			deep: true,
			immediate: true,
		},
	},
	mounted() {
		this.getApiData();
		this.$nextTick(()=>{
			this.initChart()
		})
		console.log(
			"dynamicMenuRoutes----------------------------",
			this.$store.state.sidebarMenuList
		);
	},
	methods: {
		initChart(){
			var myChart = echarts.init(document.getElementById('my_chart'));
			myChart.setOption(this.option)
		},
		handleClickResiCategory() {
			this.btnSelectA = false
			this.btnSelectB = true
		},
		handleClickIntelligentPrediction() {
			this.btnSelectA = true
			this.btnSelectB = false
		},
		searchDataTab(str) {
			this.searchData.type = str;
		},
		handleClickCategory(item) {
			this.$router.push({
				name: "base-resi",
				params: {
					category: item.code
				}
			});

		},

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

		toNoticePage() {
			this.$router.push({
				path: "/main/home-notice",
			});
		},

		toSearchPage(type, searchKey) {
			this.$router.push({
				path: "/main/shequ-chaxun"
			});
			localStorage.setItem('homeSearchType', type)
			localStorage.setItem('homeSearchKey', searchKey)
		},

		handleClickSearchBtn(str) {
			const {
				searchData: { type, searchKey },
			} = this;
			if (str) {
				this.toSearchPage(type, searchKey);
				return
			}
			if (!searchKey) return this.$message.error("请输入搜索条件");
			this.toSearchPage(type, searchKey);
		},

		async getApiData() {
			await this.getOrgData();
			this.getWarningList();
			this.getPandectData();
			this.getNoticeData();
		},

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

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

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

		//加载组织数据
		async getPandectData() {
			const url = "/actual/base/residentHouseMerge/communityOverview";
			let params = {
				// orgId: "",
				// level: "",
			};

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

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

		//加载组织数据
		async getNoticeData() {
			const url = "/message/intelligentMessage/list";
			let params = {
				last: "4",
			};

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

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

		//加载组织数据
		async getWarningList() {
			const url = "/actual/base/resiCategory/categoryCountList";
			let params = {
				// id: this.orgData.id,
				// level: "agency",
			};

			this.resiCategory.loading = true;
			const { data, code, msg } = await requestGet(url, params);
			this.resiCategory.loading = false;

			if (code === 0) {
				if (data) {
					this.resiCategory.count = data.resiCount;
					this.resiCategory.list = data.categoryList.map((item) => {
						return {
							code: item.categoryName,
							name: resiCategoryMap[item.categoryName] || "",
							count: item.categoryCount,
							per: parseInt(
								(100 * item.categoryCount) / data.resiCount
							),
							const: "const",
						};
					});
				}
			} else {
				this.$message.error(msg);
			}
		},
	},
};
</script>

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