From 70139efd3e593f18bef2bcb9b1de5942e5fe13ea Mon Sep 17 00:00:00 2001
From: tianq <tianq>
Date: Mon, 10 Apr 2023 16:16:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B9=9D=E5=B0=8F=E5=9C=BA=E6=89=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/census/census-houseList.vue |  12 +-
 src/views/modules/census/census-nineList.vue  | 622 ++++++++++++++-
 .../modules/census/census-residentList.vue    | 743 +++++++++++++++++-
 3 files changed, 1358 insertions(+), 19 deletions(-)

diff --git a/src/views/modules/census/census-houseList.vue b/src/views/modules/census/census-houseList.vue
index aa1c0d227..2fb5edebe 100644
--- a/src/views/modules/census/census-houseList.vue
+++ b/src/views/modules/census/census-houseList.vue
@@ -107,14 +107,19 @@
 							</el-col>
 						</el-row>
 					</el-col>
+
 					<el-col :span="24">
+						<div class="census_searchcensus2">
+							<div class="census_searchcensus_box"></div>
+							<el-button size="small" class="diy-button--output" @click="handleExport(1)">导出</el-button>
+						</div>
 						<el-table
 							:data="tableData"
 							border
 							v-loading="tableLoading"
 							:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
 							class="table"
-							style="width: 100%;margin-top: 50px;"
+							style="width: 100%;"
 							:height="maxTableHeight"
 						>
 							<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
@@ -685,8 +690,8 @@ export default {
 
 	justify-content: space-between;
 	align-items: flex-end;
-	margin-bottom: 20px;
-	margin-top: 20px;
+	margin-bottom:0px;
+	margin-top: 0px;
 	.census_searchcensus_box {
 		align-items: flex-end;
 		display: flex;
@@ -725,6 +730,7 @@ export default {
 .diy-button--output {
 	width: 100px;
 	height: 38px;
+
 	background: #feb349;
 	box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31);
 	border-radius: 6px;
diff --git a/src/views/modules/census/census-nineList.vue b/src/views/modules/census/census-nineList.vue
index 3763ac739..9969c056f 100644
--- a/src/views/modules/census/census-nineList.vue
+++ b/src/views/modules/census/census-nineList.vue
@@ -1,12 +1,618 @@
 <template>
-	<!-- 	census-orgStatusList
-	census-accountList
-	census-accountActiveList
-	census-houseList
-	census-residentList
-	census-nineList -->
+	<div class="div_main">
+		<div>
+			<div class="div_search">
+				<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'">
+					<div>
+						<el-form-item label="所属组织" prop="gridId">
+							<el-cascader
+								class="customer_cascader"
+								ref="myCascader"
+								filterable
+								clearable
+								v-model="formData.orgId"
+								:options="orgOptions"
+								:props="orgOptionProps"
+								:show-all-levels="false"
+								@change="handleChangeAgency"
+							></el-cascader>
+						</el-form-item>
+						<!-- <el-form-item label="上报时间" prop="startTime">
+							<el-date-picker
+								v-model="formData.startDate"
+								:picker-options="startPickerOptions"
+								class="item_width_2"
+								size="small"
+								type="date"
+								value-format="yyyy-MM-dd HH:mm:ss"
+								value="yyyy-MM-dd"
+								placeholder="开始时间"
+							></el-date-picker>
+							<span class="data-tag">至</span>
+							<el-date-picker
+								v-model="formData.endDate"
+								:picker-options="endPickerOptions"
+								class="item_width_2 data-tag"
+								size="small"
+								type="date"
+								value-format="yyyy-MM-dd HH:mm:ss"
+								value="yyyy-MM-dd"
+								placeholder="结束时间"
+							></el-date-picker>
+						</el-form-item> -->
+						<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button>
+					</div>
+				</el-form>
+			</div>
+			<div class="div_table">
+				<el-row :gutter="20">
+					<el-col :span="24">
+						<div class="div_table_title">九小场所分析</div>
+						<el-row>
+							<el-col :span="12">
+								<div style="height:220px;margin-top:20px">
+									<screen-echarts-frame
+										@handelClickMyPei="handelClickMyPei"
+										:style="{ width: '100%', height: '100%' }"
+										@myChartMethod="pieInitOk"
+										ref="pieChart"
+									></screen-echarts-frame>
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div style="height:220px;margin-top:20px;display:flex;align-items: center;">
+									<div class="legend">
+										<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
+											<div class="kuai" :style="{ backgroundColor: color[index] }"></div>
+											<div class="content">
+												<div class="name">{{ item.name }}</div>
+												<div class="num">{{ item.value }}</div>
+												<div class="unit" :style="{ color: color[index] }">{{ item.value / 100 }}%</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</el-col>
+						</el-row>
+					</el-col>
+
+					<el-col :span="24">
+						<div class="census_searchcensus2">
+							<div class="census_searchcensus_box"></div>
+							<el-button size="small" class="diy-button--output" @click="handleExport(1)">导出</el-button>
+						</div>
+						<el-table
+							:data="tableData"
+							border
+							v-loading="tableLoading"
+							:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
+							class="table"
+							style="width: 100%;"
+							:height="maxTableHeight"
+						>
+							<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
+
+							<el-table-column prop="placeOrgName" align="center" label="场所名称" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="scaleName" align="center" label="规模" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="personInCharge" align="center" label="负责人" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="mobile" align="center" label="联系方式" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true">
+								<el-button size="small" type="text" @click="">查看</el-button>
+							</el-table-column>
+						</el-table>
+
+						<el-pagination
+							@size-change="handleSizeChange"
+							@current-change="handleCurrentChange"
+							:current-page.sync="pageNo"
+							:page-sizes="[10, 20, 50, 100, 200]"
+							:page-size="parseInt(pageSize)"
+							layout="sizes, prev, pager, next, total"
+							:total="total"
+						></el-pagination>
+					</el-col>
+				</el-row>
+			</div>
+		</div>
+	</div>
 </template>
 
-<script></script>
+<script>
+import screenEchartsFrame from './chart';
+import screenEchartsFrame2 from './chart';
+import { requestPost } from '@/js/dai/request';
+import nextTick from 'dai-js/tools/nextTick';
+import { mapGetters } from 'vuex';
+
+import axios from 'axios';
+
+export default {
+	components: { screenEchartsFrame, screenEchartsFrame2 },
+	data() {
+		let endDisabledDate = time => {
+			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
+			let nowData = Date.now();
+			if (this.formData.startTime) {
+				let startTime = new Date(this.formData.startTime);
+				return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime;
+			} else {
+				return time.getTime() > nowData;
+			}
+		};
+		let startDisabledDate = time => {
+			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
+			let nowData = Date.now();
+			return time.getTime() > nowData;
+		};
+		return {
+			tableLoading: false,
+			user: {},
+			gridList: [], //所属网格list--场所区域
+			tableData: [],
+			formData: {},
+			pageNo: 1,
+			pageSize: window.localStorage.getItem('pageSize') || 20,
+			total: 1,
+			endPickerOptions: {
+				//时间
+				disabledDate: endDisabledDate
+			},
+			startPickerOptions: {
+				//时间
+				disabledDate: startDisabledDate
+			},
+			agencyId: '', //组织
+			agencyIdArray: [], //组织
+			orgOptions: [], //组织
+			orgOptionProps: {
+				//组织
+				multiple: false,
+				value: 'agencyId',
+				label: 'agencyName',
+				children: 'subAgencyList',
+				checkStrictly: true
+			},
+			TableHeight: '',
+			pieInitState: false,
+			pieInitState2: false,
+			pieOption: [],
+			pieOption2: [],
+			color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'],
+			chartData: {},
+			placeType: '',
+			pieData: []
+		};
+	},
+	computed: {
+		maxTableHeight() {
+			this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 630 + this.iframeHeigh : this.clientHeight - 630;
+			return this.TableHeight;
+		},
+		...mapGetters(['clientHeight', 'iframeHeight'])
+	},
+	watch: {
+		'formData.endTime': function(val) {
+			if (val && val != '') {
+				let arrayTemp = val.split(' ');
+				this.formData.endTime = arrayTemp[0] + ' 23:59:59';
+			}
+		}
+	},
+	mounted() {
+		console.log(this.$store.state);
+		this.user = this.$store.state.user;
+		this.agencyId = this.user.agencyId;
+		this.getOrgTreeList();
+		this.getTableData();
+		this.getsubData();
+		this.getPie();
+	},
+	methods: {
+		handleSearch(val) {
+			console.log(this.formData);
+			this.pageNo = 1;
+			this.placeType="";
+			this.getTableData();
+			this.getsubData();
+			this.getPie();
+		},
+		async getTableData() {
+			this.tableLoading = true;
+			const url = '/gov/org/enterprise/list';
+			// const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/community-count';
+
+			const { pageSize, pageNo, formData } = this;
+			const { data, code, msg } = await requestPost(url, {
+				pageSize,
+				pageNo,
+				orgId: this.formData.orgId,
+				orgType: this.orgType,
+				placeType: this.placeType
+			});
+
+			this.tableLoading = false;
+			if (code === 0) {
+				this.total = data.total || 0;
+				this.tableData = data.list
+					? data.list.map(item => {
+							return item;
+					  })
+					: [];
+			} else {
+				this.$message.error(msg);
+			}
+		},
+		handleSizeChange(val) {
+			this.pageSize = val;
+			window.localStorage.setItem('pageSize', val);
+			this.getTableData();
+		},
+		handleCurrentChange(val) {
+			this.pageNo = val;
+			this.getTableData();
+		},
+		async getsubData() {
+			this.$refs.pieChart.showLoading();
+			let url = '/gov/org/enterprise/count-type';
+			let param = {
+				orgId: this.formData.orgId,
+				orgType: this.orgType
+
+				// startDate: this.formData.startDate,
+				// endDate: this.formData.endDate
+			};
+			const { data, code, msg } = await requestPost(url, param);
+			this.$refs.pieChart.hideLoading();
+
+			if (code === 0) {
+				this.pieData = data;
+				console.log('this.pieData ', this.pieData);
+				this.getPie();
+			} else {
+				this.$message.error(msg);
+			}
+		},
+		pieInitOk() {
+			this.pieInitState = true;
+		},
+
+		getPie() {
+			if (this.pieInitState) {
+				this.setPieData();
+			} else {
+				setTimeout(() => {
+					this.getPie();
+				}, 500);
+			}
+		},
+
+		setPieData() {
+			let data = [...this.pieData.list];
+			this.chartData.name = data.map(item => item.placeTypeName);
+			this.chartData.data = data.map(item => {
+				return { value: item.total, id: item.agencyId, placeType: item.placeType, name: item.placeTypeName };
+			});
+
+			console.log('chartData', this.chartData);
+			this.iniPieChart(this.chartData);
+		},
+
+		// 获取饼状图
+		async iniPieChart(chartData) {
+			this.$refs.pieChart.clear();
+			// 获取pieChart配置
+			this.pieOption = {
+				color: this.color,
+				title: {
+					text: this.pieData.total,
+					subtext: '总数',
+					x: 'center',
+					y: 'center',
+					textStyle: {
+						fontSize: 26,
+						color: '#333333',
+						fontWeight: 'bold'
+					},
+					subtextStyle: {
+						fontSize: 14,
+						color: '#333333'
+					}
+				},
+
+				series: [
+					{
+						type: 'pie',
+						radius: ['65%', '80%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center'
+						},
+						tooltip: {
+							show: true
+						},
+
+						data: chartData.data
+					},
+					{
+						type: 'pie',
+						radius: ['60%', '65%'],
+						center: ['50%', '50%'],
+						selectedMode: false,
+						hoverAnimation: false,
+						data: [{ value: 1, name: '' }],
+						itemStyle: {
+							color: '#f7f7f7'
+						},
+						label: {
+							show: false
+						},
+						labelLine: {
+							show: false
+						},
+						tooltip: {
+							show: false
+						},
+						animation: false,
+						cursor: 'auto',
+						emphasis: {
+							itemStyle: {
+								color: '#f7f7f7'
+							}
+						}
+					},
+					{
+						type: 'pie',
+						radius: ['80%', '85%'],
+						center: ['50%', '50%'],
+						selectedMode: false,
+						hoverAnimation: false,
+						data: [{ value: 1, name: '' }],
+						itemStyle: {
+							color: '#f7f7f7'
+						},
+						label: {
+							show: false
+						},
+						labelLine: {
+							show: false
+						},
+						tooltip: {
+							show: false
+						},
+						animation: false,
+						cursor: 'auto',
+						emphasis: {
+							itemStyle: {
+								color: '#f7f7f7'
+							}
+						}
+					}
+				]
+			};
+			this.$refs.pieChart.setOption(this.pieOption);
+		},
+
+		handelClickMyPei(param) {
+			this.placeType = param.data.placeType;
+			this.getTableData();
+		},
+
+		async handleExport() {
+			const url = '/gov/org/enterprise/export';
+			const { pageSize, pageNo, formData } = this;
+			axios({
+				url: window.SITE_CONFIG['apiURL'] + url,
+				method: 'post',
+				data: {
+					pageSize,
+					pageNo,
+					...formData
+				},
+				responseType: 'blob'
+			})
+				.then(res => {
+					let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
+					console.log('filename', fileName);
+					let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
+					var url = window.URL.createObjectURL(blob);
+					var aLink = document.createElement('a');
+					aLink.style.display = 'none';
+					aLink.href = url;
+					aLink.setAttribute('download', fileName);
+					document.body.appendChild(aLink);
+					aLink.click();
+					document.body.removeChild(aLink); //下载完成移除元素
+					window.URL.revokeObjectURL(url); //释放掉blob对象
+				})
+				.catch(err => {
+					console.log('获取导出情失败', err);
+					return this.$message.error('网络错误');
+				});
+		},
+		getOrgTreeList() {
+			const { user } = this.$store.state;
+			this.$http
+				.post('/gov/org/customeragency/agencygridtree', {})
+				.then(({ data: res }) => {
+					if (res.code !== 0) {
+						return this.$message.error(res.msg);
+					} else {
+						// console.log('获取组织树成功', res.data);
+						// let { agencyList, subAgencyList } = res.data;
+						// const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }];
+						// this.orgOptions = this.deepTree(_arr);
+						this.orgOptions = [];
+						this.orgOptions.push(res.data);
+					}
+				})
+				.catch(() => {
+					return this.$message.error('网络错误');
+				});
+		},
+		handleChangeAgency(val) {
+			let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
+			console.log(obj);
+			this.formData.orgId = obj.agencyId;
+			if (obj.level == 'grid') {
+				this.orgType = 'grid';
+			} else {
+				this.orgType = obj.agency;
+			}
+		},
+		deepTree(arr) {
+			if (Array.isArray(arr)) {
+				return arr.map(item => {
+					return {
+						...item,
+						subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null
+					};
+				});
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/buttonstyle.scss';
+@import '@/assets/scss/modules/management/list-main.scss';
+@import '@/assets/scss/modules/shequzhili/event-info.scss';
+.legend {
+	display: flex;
+	flex-flow: row wrap;
+	.legend-row {
+		min-width: 100px;
+		display: flex;
+		margin-bottom: 30px;
+		margin-right: 25px;
+		.kuai {
+			width: 12px;
+			height: 12px;
+			margin-right: 10px;
+			border-radius: 4px;
+		}
+		.content {
+			.name {
+				font-size: 14px;
+				color: #999;
+				margin-bottom: 10px;
+			}
+			.num {
+				font-size: 16px;
+				font-weight: bold;
+				display: inline-block;
+			}
+			.unit {
+				font-size: 16px;
+				display: inline-block;
+				margin-left: 7px;
+			}
+		}
+	}
+}
+.legend2 {
+	// display: flex;
+	// flex-flow: row wrap;
+
+	.legend-row {
+		width: 100%;
+		display: flex;
+		margin-bottom: 16px;
+		.kuai {
+			margin-right: 10px;
+			border-radius: 4px;
+			img {
+				width: 40px;
+				height: 40px;
+			}
+		}
+		.content {
+			display: flex;
+			align-items: center;
+			.name {
+				font-size: 14px;
+				color: #999;
+				width: 60px;
+			}
+			.num {
+				font-size: 16px;
+				font-weight: bold;
+				display: inline-block;
+			}
+			.unit {
+				font-size: 16px;
+				display: inline-block;
+				margin-left: 7px;
+			}
+		}
+	}
+}
+.btnSearch {
+	width: 100px;
+	height: 36px;
+	background: #2195fe;
+	box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31);
+	border-radius: 6px;
+	color: #fff;
+}
+.div_search {
+	.item_width_2 {
+		width: 200px;
+	}
+}
+// /这里是不一样的,居左，从下对齐
+.census_searchcensus2 {
+	text-align: center;
+	margin: 0 auto;
+	display: flex;
+
+	justify-content: space-between;
+	align-items: flex-end;
+	margin-bottom: 0px;
+	margin-top: 0px;
+	.census_searchcensus_box {
+		align-items: flex-end;
+		display: flex;
+		img {
+			width: 64px;
+			height: 64px;
+			margin-right: 20px;
+		}
+		h2 {
+			font-size: 28px;
+			color: #333333;
+
+			text-align: left;
+			line-height: 40px;
+			margin: 0px;
+		}
+		h3 {
+			font-size: 14px;
+			color: #333333;
+
+			text-align: left;
+
+			margin: 0px;
+			font-weight: normal;
+		}
+	}
+}
+.div_table_title {
+	margin-top: 20px;
+	line-height: 30px;
+	font-size: 20px;
+
+	font-weight: bold;
+	color: #333333;
+}
+.diy-button--output {
+	width: 100px;
+	height: 38px;
 
-<style></style>
+	background: #feb349;
+	box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31);
+	border-radius: 6px;
+	color: #fff;
+}
+</style>
diff --git a/src/views/modules/census/census-residentList.vue b/src/views/modules/census/census-residentList.vue
index 3763ac739..2fb5edebe 100644
--- a/src/views/modules/census/census-residentList.vue
+++ b/src/views/modules/census/census-residentList.vue
@@ -1,12 +1,739 @@
 <template>
-	<!-- 	census-orgStatusList
-	census-accountList
-	census-accountActiveList
-	census-houseList
-	census-residentList
-	census-nineList -->
+	<div class="div_main">
+		<div>
+			<div class="div_search">
+				<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'">
+					<div>
+						<el-form-item label="所属组织" prop="gridId">
+							<el-cascader
+								class="customer_cascader"
+								ref="myCascader"
+								filterable
+								clearable
+								v-model="formData.orgId"
+								:options="orgOptions"
+								:props="orgOptionProps"
+								:show-all-levels="false"
+								@change="handleChangeAgency"
+							></el-cascader>
+						</el-form-item>
+						<el-form-item label="上报时间" prop="startTime">
+							<el-date-picker
+								v-model="formData.startDate"
+								:picker-options="startPickerOptions"
+								class="item_width_2"
+								size="small"
+								type="date"
+								value-format="yyyy-MM-dd HH:mm:ss"
+								value="yyyy-MM-dd"
+								placeholder="开始时间"
+							></el-date-picker>
+							<span class="data-tag">至</span>
+							<el-date-picker
+								v-model="formData.endDate"
+								:picker-options="endPickerOptions"
+								class="item_width_2 data-tag"
+								size="small"
+								type="date"
+								value-format="yyyy-MM-dd HH:mm:ss"
+								value="yyyy-MM-dd"
+								placeholder="结束时间"
+							></el-date-picker>
+						</el-form-item>
+						<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button>
+					</div>
+				</el-form>
+			</div>
+			<div class="div_table">
+				<el-row :gutter="20">
+					<el-col :span="12">
+						<div class="div_table_title">房屋用途统计</div>
+						<el-row>
+							<el-col :span="12">
+								<div :style="'height:' + TableHeight + 'px;margin-top:20px'">
+									<screen-echarts-frame
+										@handelClickMyPei="handelClickMyPei"
+										:style="{ width: '100%', height: '100%' }"
+										@myChartMethod="pieInitOk"
+										ref="pieChart"
+									></screen-echarts-frame>
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'">
+									<div class="legend">
+										<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
+											<div class="kuai" :style="{ backgroundColor: color[index] }"></div>
+											<div class="content">
+												<div class="name">{{ item.name }}</div>
+												<div class="num">{{ item.value }}</div>
+												<div class="unit" :style="{ color: color[index] }">{{ item.value / 100 }}%</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</el-col>
+						</el-row>
+					</el-col>
+					<el-col :span="12">
+						<div class="div_table_title">房屋状态统计</div>
+						<el-row>
+							<el-col :span="12">
+								<div :style="'height:' + TableHeight + 'px;margin-top:20px'">
+									<screen-echarts-frame2
+										@handelClickMyPei="handelClickMyPei2"
+										:style="{ width: '100%', height: '100%' }"
+										@myChartMethod="pieInitOk2"
+										ref="pieChart2"
+									></screen-echarts-frame2>
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'">
+									<div class="legend2">
+										<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem(item)">
+											<div class="kuai" v-if="item.name == '自住'"><img src="../../../assets/img/census/自住.png" /></div>
+											<div class="kuai" v-if="item.name == '出租'"><img src="../../../assets/img/census/出租.png" /></div>
+											<div class="kuai" v-if="item.name == '闲置'"><img src="../../../assets/img/census/闲置.png" /></div>
+											<div class="kuai" v-if="item.name == '未售出'"><img src="../../../assets/img/census/未售出.png" /></div>
+											<div class="content">
+												<div class="name">{{ item.name }}</div>
+												<div class="num">{{ item.value }}</div>
+												<div class="unit" :style="{ color: color[index] }">{{ item.value / 100 }}%</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</el-col>
+						</el-row>
+					</el-col>
+
+					<el-col :span="24">
+						<div class="census_searchcensus2">
+							<div class="census_searchcensus_box"></div>
+							<el-button size="small" class="diy-button--output" @click="handleExport(1)">导出</el-button>
+						</div>
+						<el-table
+							:data="tableData"
+							border
+							v-loading="tableLoading"
+							:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
+							class="table"
+							style="width: 100%;"
+							:height="maxTableHeight"
+						>
+							<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
+							<el-table-column prop="streetName" label="镇街" align="center" :show-overflow-tooltip="true" />
+							<el-table-column prop="districtName" label="区县" align="center" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="agencyName" align="center" label="社区" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="agencyName" align="center" label="网格" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="agencyName" align="center" label="房屋名称" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="agencyName" align="center" label="房屋用途" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="agencyName" align="center" label="房屋状态" :show-overflow-tooltip="true"></el-table-column>
+							<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"></el-table-column>
+						</el-table>
+
+						<el-pagination
+							@size-change="handleSizeChange"
+							@current-change="handleCurrentChange"
+							:current-page.sync="pageNo"
+							:page-sizes="[10, 20, 50, 100, 200]"
+							:page-size="parseInt(pageSize)"
+							layout="sizes, prev, pager, next, total"
+							:total="total"
+						></el-pagination>
+					</el-col>
+				</el-row>
+			</div>
+		</div>
+	</div>
 </template>
 
-<script></script>
+<script>
+import screenEchartsFrame from './chart';
+import screenEchartsFrame2 from './chart';
+import { requestPost } from '@/js/dai/request';
+import nextTick from 'dai-js/tools/nextTick';
+import { mapGetters } from 'vuex';
+
+import axios from 'axios';
+
+export default {
+	components: { screenEchartsFrame, screenEchartsFrame2 },
+	data() {
+		let endDisabledDate = time => {
+			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
+			let nowData = Date.now();
+			if (this.formData.startTime) {
+				let startTime = new Date(this.formData.startTime);
+				return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime;
+			} else {
+				return time.getTime() > nowData;
+			}
+		};
+		let startDisabledDate = time => {
+			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
+			let nowData = Date.now();
+			return time.getTime() > nowData;
+		};
+		return {
+			tableLoading: false,
+			user: {},
+			gridList: [], //所属网格list--场所区域
+			tableData: [],
+			formData: {},
+			pageNo: 1,
+			pageSize: window.localStorage.getItem('pageSize') || 20,
+			total: 1,
+			endPickerOptions: {
+				//时间
+				disabledDate: endDisabledDate
+			},
+			startPickerOptions: {
+				//时间
+				disabledDate: startDisabledDate
+			},
+			agencyId: '', //组织
+			agencyIdArray: [], //组织
+			orgOptions: [], //组织
+			orgOptionProps: {
+				//组织
+				multiple: false,
+				value: 'agencyId',
+				label: 'agencyName',
+				children: 'subAgencyList',
+				checkStrictly: true
+			},
+			TableHeight: '',
+			pieInitState: false,
+			pieInitState2: false,
+			pieOption: [],
+			pieOption2: [],
+			color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'],
+			chartData: [],
+			chartData2: [],
+			pieData: []
+		};
+	},
+	computed: {
+		maxTableHeight() {
+			this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 700 + this.iframeHeigh : this.clientHeight - 700;
+			return this.TableHeight;
+		},
+		...mapGetters(['clientHeight', 'iframeHeight'])
+	},
+	watch: {
+		'formData.endTime': function(val) {
+			if (val && val != '') {
+				let arrayTemp = val.split(' ');
+				this.formData.endTime = arrayTemp[0] + ' 23:59:59';
+			}
+		}
+	},
+	mounted() {
+		console.log(this.$store.state);
+		this.user = this.$store.state.user;
+		this.agencyId = this.user.agencyId;
+		this.getOrgTreeList();
+		this.getTableData();
+		this.getPie();
+		this.getPie2();
+	},
+	methods: {
+		handleSearch(val) {
+			console.log(this.formData);
+			this.pageNo = 1;
+			this.getTableData();
+		},
+		async getTableData() {
+			this.tableLoading = true;
+			// const url = '/gov/org/staffLoginLog/community-count';
+			const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/community-count';
+
+			const { pageSize, pageNo, formData } = this;
+			const { data, code, msg } = await requestPost(url, {
+				pageSize,
+				pageNo,
+				...formData
+			});
+
+			this.tableLoading = false;
+			if (code === 0) {
+				this.total = data.total || 0;
+				this.tableData = data.list
+					? data.list.map(item => {
+							return item;
+					  })
+					: [];
+			} else {
+				this.$message.error(msg);
+			}
+		},
+		handleSizeChange(val) {
+			this.pageSize = val;
+			window.localStorage.setItem('pageSize', val);
+			this.getTableData();
+		},
+		handleCurrentChange(val) {
+			this.pageNo = val;
+			this.getTableData();
+		},
+		async getsubData() {
+			this.$refs.pieChart.showLoading();
+			let url = '/gov/org/staffLoginLog/sub-count';
+			let param = {
+				orgId: this.formData.orgId,
+				level: this.formData.level,
+				startDate: this.formData.startDate,
+				endDate: this.formData.endDate
+			};
+			const { data, code, msg } = await requestPost(url, param);
+			this.$refs.pieChart.hideLoading();
+
+			if (code === 0) {
+				this.pieData = data.list;
+				console.log('this.pieData ', this.pieData);
+				this.getPie();
+				this.getPie2();
+			} else {
+				this.$message.error(msg);
+			}
+		},
+		pieInitOk() {
+			this.pieInitState = true;
+		},
+		pieInitOk2() {
+			console.log('2333erwewrwe33333', this.pieInitState2);
+			this.pieInitState2 = true;
+			console.log('2333erwewrwe333335476754765', this.pieInitState2);
+		},
+		getPie() {
+			if (this.pieInitState) {
+				this.setPieData();
+			} else {
+				setTimeout(() => {
+					this.getPie();
+				}, 500);
+			}
+		},
+		getPie2() {
+			if (this.pieInitState2) {
+				console.log('233333333');
+				this.setPieData2();
+			} else {
+				setTimeout(() => {
+					this.getPie2();
+				}, 500);
+			}
+		},
+		setPieData() {
+			// let data = [...this.pieData];
+			// console.log('data', data);
+			let chartData = {
+				name: ['反骨', '反骨2', '反骨3', '反骨4'],
+				data: [{ value: 62, name: '反骨' }, { value: 44, name: '反骨2' }, { value: 123, name: '反骨3' }, { value: 232, name: '反骨4' }]
+			};
+			this.chartData = chartData;
+			// chartData.name = data.map(item => item.agencyName);
+			// chartData.data = data.map(item => {
+			// 	return { value: item.count, id: item.agencyId, level: item.agencyLevel, name: item.agencyName };
+			// });
+			console.log('chartData', chartData);
+			this.iniPieChart(chartData);
+		},
+		setPieData2() {
+			console.log('dddddddddddd');
+			// let data = [...this.pieData];
+			// console.log('data', data);
+			let chartData = {
+				name: ['自住', '出租', '闲置', '未售出'],
+				data: [{ value: 62, name: '自住' }, { value: 243, name: '出租' }, { value: 243, name: '闲置' }, { value: 243, name: '未售出' }]
+			};
+			this.chartData2 = chartData;
+			// chartData.name = data.map(item => item.agencyName);
+			// chartData.data = data.map(item => {
+			// 	return { value: item.count, id: item.agencyId, level: item.agencyLevel, name: item.agencyName };
+			// });
+			console.log('chartData', chartData);
+			this.iniPieChart2(chartData);
+		},
+		// 获取饼状图
+		async iniPieChart(chartData) {
+			this.$refs.pieChart.clear();
+			// 获取pieChart配置
+			this.pieOption = {
+				color: this.color,
+				title: {
+					text: '12345',
+					subtext: '房屋总数(分)',
+					x: 'center',
+					y: 'center',
+					textStyle: {
+						fontSize: 26,
+						color: '#333333',
+						fontWeight: 'bold'
+					},
+					subtextStyle: {
+						fontSize: 14,
+						color: '#333333'
+					}
+				},
+
+				series: [
+					{
+						type: 'pie',
+						radius: ['60%', '85%'],
+						center: ['50%', '50%'],
+						selectedMode: false,
+						hoverAnimation: false,
+						data: [{ value: 1, name: '' }],
+						itemStyle: {
+							color: '#f7f7f7'
+						},
+						label: {
+							show: false
+						},
+						labelLine: {
+							show: false
+						},
+						tooltip: {
+							show: false
+						},
+						animation: false,
+						cursor: 'auto',
+						emphasis: {
+							itemStyle: {
+								color: '#f7f7f7'
+							}
+						}
+					},
+
+					{
+						type: 'pie',
+						radius: ['65%', '80%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center'
+						},
+						tooltip: {
+							show: true
+						},
+						data: chartData.data
+					}
+				]
+			};
+			this.$refs.pieChart.setOption(this.pieOption);
+		},
+		async iniPieChart2(chartData) {
+			this.$refs.pieChart2.clear();
+			// 获取pieChart配置
+
+			this.pieOption2 = {
+				color: this.color,
+				title: {
+					text: '12345',
+					subtext: '房屋总数(分)',
+					x: 'center',
+					y: 'center',
+					textStyle: {
+						fontSize: 26,
+						color: '#333333',
+						fontWeight: 'bold'
+					},
+					subtextStyle: {
+						fontSize: 14,
+						color: '#333333'
+					}
+				},
+
+				series: [
+					{
+						type: 'pie',
+						radius: ['65%', '80%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center'
+						},
+						tooltip: {
+							show: true
+						},
+						z: 9999,
+						data: chartData.data
+					},
+					{
+						type: 'pie',
+						radius: ['60%', '85%'],
+						center: ['50%', '50%'],
+						selectedMode: false,
+						hoverAnimation: false,
+						data: [{ value: 1, name: '' }],
+						itemStyle: {
+							color: '#f7f7f7'
+						},
+						label: {
+							show: false
+						},
+						labelLine: {
+							show: false
+						},
+						tooltip: {
+							show: false
+						},
+						animation: false,
+						cursor: 'auto',
+						emphasis: {
+							itemStyle: {
+								color: '#f7f7f7'
+							}
+						}
+					}
+				]
+			};
+			this.$refs.pieChart2.setOption(this.pieOption2);
+		},
+		handelClickMyPei(param) {
+			if (param.data.level != 'community') {
+				if (param.data.level == 'district') {
+					this.orgType = 'street';
+				}
+				if (param.data.level == 'street') {
+					this.orgType = 'community';
+				}
+
+				this.orgId = param.data.id;
+				this.orgName = param.data.name;
+				this.pageNo = 1;
+				this.showNext();
+				this.dialogVisible = true;
+			}
+		},
+		handelClickMyPei2(param) {
+			if (param.data.level != 'community') {
+				if (param.data.level == 'district') {
+					this.orgType = 'street';
+				}
+				if (param.data.level == 'street') {
+					this.orgType = 'community';
+				}
+
+				this.orgId = param.data.id;
+				this.orgName = param.data.name;
+				this.pageNo = 1;
+				this.showNext();
+				this.dialogVisible = true;
+			}
+		},
+		async handleExport() {
+			const url = '/gov/project/icEvent/export';
+			const { pageSize, pageNo, formData } = this;
+			axios({
+				url: window.SITE_CONFIG['apiURL'] + url,
+				method: 'post',
+				data: {
+					pageSize,
+					pageNo,
+					...formData
+				},
+				responseType: 'blob'
+			})
+				.then(res => {
+					let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
+					console.log('filename', fileName);
+					let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
+					var url = window.URL.createObjectURL(blob);
+					var aLink = document.createElement('a');
+					aLink.style.display = 'none';
+					aLink.href = url;
+					aLink.setAttribute('download', fileName);
+					document.body.appendChild(aLink);
+					aLink.click();
+					document.body.removeChild(aLink); //下载完成移除元素
+					window.URL.revokeObjectURL(url); //释放掉blob对象
+				})
+				.catch(err => {
+					console.log('获取导出情失败', err);
+					return this.$message.error('网络错误');
+				});
+		},
+		getOrgTreeList() {
+			const { user } = this.$store.state;
+			this.$http
+				.post('gov/org/customeragency/staffinagencylist', {})
+				.then(({ data: res }) => {
+					if (res.code !== 0) {
+						return this.$message.error(res.msg);
+					} else {
+						console.log('获取组织树成功', res.data);
+						let { agencyList, subAgencyList } = res.data;
+						const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }];
+						this.orgOptions = this.deepTree(_arr);
+					}
+				})
+				.catch(() => {
+					return this.$message.error('网络错误');
+				});
+		},
+		handleChangeAgency(val) {
+			let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
+			console.log(obj);
+			this.formData.orgId = obj.agencyId;
+			this.formData.level = obj.level;
+		},
+		deepTree(arr) {
+			if (Array.isArray(arr)) {
+				return arr.map(item => {
+					return {
+						...item,
+						subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null
+					};
+				});
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/buttonstyle.scss';
+@import '@/assets/scss/modules/management/list-main.scss';
+@import '@/assets/scss/modules/shequzhili/event-info.scss';
+.legend {
+	display: flex;
+	flex-flow: row wrap;
+	.legend-row {
+		min-width: 100px;
+		display: flex;
+		margin-bottom: 30px;
+		margin-right: 25px;
+		.kuai {
+			width: 12px;
+			height: 12px;
+			margin-right: 10px;
+			border-radius: 4px;
+		}
+		.content {
+			.name {
+				font-size: 14px;
+				color: #999;
+				margin-bottom: 10px;
+			}
+			.num {
+				font-size: 16px;
+				font-weight: bold;
+				display: inline-block;
+			}
+			.unit {
+				font-size: 16px;
+				display: inline-block;
+				margin-left: 7px;
+			}
+		}
+	}
+}
+.legend2 {
+	// display: flex;
+	// flex-flow: row wrap;
+
+	.legend-row {
+		width: 100%;
+		display: flex;
+		margin-bottom: 16px;
+		.kuai {
+			margin-right: 10px;
+			border-radius: 4px;
+			img {
+				width: 40px;
+				height: 40px;
+			}
+		}
+		.content {
+			display: flex;
+			align-items: center;
+			.name {
+				font-size: 14px;
+				color: #999;
+				width: 60px;
+			}
+			.num {
+				font-size: 16px;
+				font-weight: bold;
+				display: inline-block;
+			}
+			.unit {
+				font-size: 16px;
+				display: inline-block;
+				margin-left: 7px;
+			}
+		}
+	}
+}
+.btnSearch {
+	width: 100px;
+	height: 36px;
+	background: #2195fe;
+	box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31);
+	border-radius: 6px;
+	color: #fff;
+}
+.div_search {
+	.item_width_2 {
+		width: 200px;
+	}
+}
+// /这里是不一样的,居左，从下对齐
+.census_searchcensus2 {
+	text-align: center;
+	margin: 0 auto;
+	display: flex;
+
+	justify-content: space-between;
+	align-items: flex-end;
+	margin-bottom:0px;
+	margin-top: 0px;
+	.census_searchcensus_box {
+		align-items: flex-end;
+		display: flex;
+		img {
+			width: 64px;
+			height: 64px;
+			margin-right: 20px;
+		}
+		h2 {
+			font-size: 28px;
+			color: #333333;
+
+			text-align: left;
+			line-height: 40px;
+			margin: 0px;
+		}
+		h3 {
+			font-size: 14px;
+			color: #333333;
+
+			text-align: left;
+
+			margin: 0px;
+			font-weight: normal;
+		}
+	}
+}
+.div_table_title {
+	margin-top: 20px;
+	line-height: 30px;
+	font-size: 20px;
+
+	font-weight: bold;
+	color: #333333;
+}
+.diy-button--output {
+	width: 100px;
+	height: 38px;
 
-<style></style>
+	background: #feb349;
+	box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31);
+	border-radius: 6px;
+	color: #fff;
+}
+</style>