14 changed files with 1396 additions and 0 deletions
			
			
		| 
		 After Width: | Height: | Size: 8.9 KiB  | 
| 
		 After Width: | Height: | Size: 5.7 KiB  | 
| 
		 After Width: | Height: | Size: 6.4 KiB  | 
| 
		 After Width: | Height: | Size: 10 KiB  | 
| 
		 After Width: | Height: | Size: 5.3 KiB  | 
| 
		 After Width: | Height: | Size: 6.2 KiB  | 
@ -0,0 +1,16 @@ | 
				
			|||
import * as echarts from "echarts"; | 
				
			|||
export function pieOption() { | 
				
			|||
	return { | 
				
			|||
		xAxis: { | 
				
			|||
			type: 'category', | 
				
			|||
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | 
				
			|||
		}, | 
				
			|||
		yAxis: { | 
				
			|||
			type: 'value' | 
				
			|||
		}, | 
				
			|||
		series: [{ | 
				
			|||
			data: [120, 200, 150, 80, 70, 110, 130], | 
				
			|||
			type: 'bar' | 
				
			|||
		}] | 
				
			|||
	}; | 
				
			|||
} | 
				
			|||
@ -0,0 +1,607 @@ | 
				
			|||
<template> | 
				
			|||
	<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 | 
				
			|||
								v-model="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 style="margin-left:30px" size="small" class="diy-button--search" @click="handleSearch">查询</el-button> | 
				
			|||
					</div> | 
				
			|||
				</el-form> | 
				
			|||
			</div> | 
				
			|||
			<el-row :gutter="20"> | 
				
			|||
				<el-col :span="12"> | 
				
			|||
					<div class="div_table"> | 
				
			|||
						<div class="div_table_title">社区活跃情况</div> | 
				
			|||
						<div class="census_searchcensus2"> | 
				
			|||
							<div class="census_searchcensus_box"> | 
				
			|||
								<img src="../../../assets/img/census/活跃.png" /> | 
				
			|||
								<div> | 
				
			|||
									<h2>125</h2> | 
				
			|||
									<h3>社区活跃数量</h3> | 
				
			|||
								</div> | 
				
			|||
							</div> | 
				
			|||
							<el-button size="small" class="diy-button--output" @click="output">导出</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="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
							<el-table-column prop="streetName" label="登录次数" min-width="140" 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="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="[20, 50, 100, 200]" | 
				
			|||
							:page-size="parseInt(pageSize)" | 
				
			|||
							layout="sizes, prev, pager, next, total" | 
				
			|||
							:total="total" | 
				
			|||
						></el-pagination> | 
				
			|||
					</div> | 
				
			|||
				</el-col> | 
				
			|||
				<el-col :span="12"> | 
				
			|||
					<div class="div_table"> | 
				
			|||
						<div class="div_table_title">社区不活跃情况</div> | 
				
			|||
						<div class="census_searchcensus2"> | 
				
			|||
							<div class="census_searchcensus_box"> | 
				
			|||
								<img src="../../../assets/img/census/不活跃.png" /> | 
				
			|||
								<div> | 
				
			|||
									<h2>125</h2> | 
				
			|||
									<h3>社区不活跃数量</h3> | 
				
			|||
								</div> | 
				
			|||
							</div> | 
				
			|||
							<el-button size="small" class="diy-button--output" @click="output">导出</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="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
						</el-table> | 
				
			|||
						<el-pagination | 
				
			|||
							@size-change="handleSizeChange" | 
				
			|||
							@current-change="handleCurrentChange" | 
				
			|||
							:current-page.sync="pageNo" | 
				
			|||
							:page-sizes="[20, 50, 100, 200]" | 
				
			|||
							:page-size="parseInt(pageSize)" | 
				
			|||
							layout="sizes, prev, pager, next, total" | 
				
			|||
							:total="total" | 
				
			|||
						></el-pagination> | 
				
			|||
					</div> | 
				
			|||
				</el-col> | 
				
			|||
			</el-row> | 
				
			|||
		</div> | 
				
			|||
	</div> | 
				
			|||
</template> | 
				
			|||
 | 
				
			|||
<script> | 
				
			|||
import { requestPost } from '@/js/dai/request'; | 
				
			|||
import nextTick from 'dai-js/tools/nextTick'; | 
				
			|||
import { mapGetters } from 'vuex'; | 
				
			|||
 | 
				
			|||
import axios from 'axios'; | 
				
			|||
 | 
				
			|||
export default { | 
				
			|||
	components: {}, | 
				
			|||
 | 
				
			|||
	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, | 
				
			|||
			pageType: 'list', // 列表list 新增add  处理dispose 详情info | 
				
			|||
			user: {}, | 
				
			|||
			agencyId: '', | 
				
			|||
			gridList: [], //所属网格list--场所区域 | 
				
			|||
			agencyIdArray: [], | 
				
			|||
			orgOptions: [], | 
				
			|||
			orgOptionProps: { | 
				
			|||
				multiple: false, | 
				
			|||
				value: 'agencyId', | 
				
			|||
				label: 'agencyName', | 
				
			|||
				children: 'subAgencyList', | 
				
			|||
				checkStrictly: true | 
				
			|||
			}, | 
				
			|||
			tableData: [], | 
				
			|||
 | 
				
			|||
			formData: { | 
				
			|||
				gridId: '', | 
				
			|||
				agencyId: '', | 
				
			|||
				sourceType: '', | 
				
			|||
				eventContent: '', | 
				
			|||
				name: '', | 
				
			|||
				mobile: '', | 
				
			|||
				startTime: '', | 
				
			|||
				endTime: '', | 
				
			|||
				status: '', | 
				
			|||
				firstIdList: [], | 
				
			|||
				secondIdList: [] | 
				
			|||
			}, | 
				
			|||
			cateOptions: [], | 
				
			|||
			eventTypeCheck: [], | 
				
			|||
			pageNo: 1, | 
				
			|||
			pageSize: window.localStorage.getItem('pageSize') || 20, | 
				
			|||
			total: 1, | 
				
			|||
			endPickerOptions: { | 
				
			|||
				disabledDate: endDisabledDate | 
				
			|||
			}, | 
				
			|||
			startPickerOptions: { | 
				
			|||
				disabledDate: startDisabledDate | 
				
			|||
			}, | 
				
			|||
			eventId: '', | 
				
			|||
 | 
				
			|||
			eventDetailData: {}, | 
				
			|||
 | 
				
			|||
			showVoice: false, | 
				
			|||
			selVoiceUrl: '', | 
				
			|||
 | 
				
			|||
			multipleSelection: [] | 
				
			|||
		}; | 
				
			|||
	}, | 
				
			|||
	computed: { | 
				
			|||
		maxTableHeight() { | 
				
			|||
			return this.$store.state.inIframe ? this.clientHeight - 440 + this.iframeHeigh : this.clientHeight - 440; | 
				
			|||
		}, | 
				
			|||
		satisfactionNameM() { | 
				
			|||
			return function(row) { | 
				
			|||
				let text = '--'; | 
				
			|||
				if (row.satisfactionName) { | 
				
			|||
					text = row.satisfactionName; | 
				
			|||
				} else if (row.satisfaction == 1) { | 
				
			|||
					text = '不满意'; | 
				
			|||
				} else if (row.satisfaction == 5) { | 
				
			|||
					text = '非常满意'; | 
				
			|||
				} else if (row.satisfaction < 5 && row.satisfaction > 1) { | 
				
			|||
					text = '基本满意'; | 
				
			|||
				} else { | 
				
			|||
					text = '--'; | 
				
			|||
				} | 
				
			|||
				return text; | 
				
			|||
			}; | 
				
			|||
		}, | 
				
			|||
		...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.getCateOptions(); | 
				
			|||
	}, | 
				
			|||
	methods: { | 
				
			|||
		handleChangeAgency(val) { | 
				
			|||
			let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; | 
				
			|||
			if (obj) { | 
				
			|||
				if (obj.level === 'grid') { | 
				
			|||
					this.formData.gridId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''; | 
				
			|||
					this.formData.agencyId = ''; | 
				
			|||
				} else { | 
				
			|||
					this.formData.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''; | 
				
			|||
					this.formData.gridId = ''; | 
				
			|||
				} | 
				
			|||
			} else { | 
				
			|||
				this.formData.agencyId = ''; | 
				
			|||
				this.formData.gridId = ''; | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		handleEventType(val) { | 
				
			|||
			// console.log('val-----eee', val) | 
				
			|||
			console.log('nodes---', this.$refs.cascaderEvent.getCheckedNodes()); | 
				
			|||
			const nodes = this.$refs.cascaderEvent.getCheckedNodes(); | 
				
			|||
			this.formData.firstIdList = []; | 
				
			|||
			this.formData.secondIdList = []; | 
				
			|||
			let level1 = nodes.filter(item => item.level === 1); | 
				
			|||
			let level2 = nodes.filter(item => item.level === 2); | 
				
			|||
			console.log('level2----1', level2); | 
				
			|||
			level1.forEach(item => { | 
				
			|||
				console.log('level2----2', level2); | 
				
			|||
				if (item.hasChildren) { | 
				
			|||
					for (let i = level2.length - 1; i >= 0; i--) { | 
				
			|||
						if (level2[i].parent.value === item.value) level2.splice(i, 1); | 
				
			|||
					} | 
				
			|||
				} | 
				
			|||
			}); | 
				
			|||
			this.formData.firstIdList = level1.map(item => item.value); | 
				
			|||
			this.formData.secondIdList = level2.map(item => item.value); | 
				
			|||
		}, | 
				
			|||
		handleSelectionChange(val) { | 
				
			|||
			this.multipleSelection = []; | 
				
			|||
			val.forEach(element => { | 
				
			|||
				this.multipleSelection.push(element.icEventId); | 
				
			|||
			}); | 
				
			|||
			console.log(this.multipleSelection); | 
				
			|||
		}, | 
				
			|||
		async handleMarkDiffcult() { | 
				
			|||
			const url = '/gov/project/icEvent/difficultpointevent'; | 
				
			|||
 | 
				
			|||
			let params = { | 
				
			|||
				icEventIdList: this.multipleSelection, | 
				
			|||
				type: '1' | 
				
			|||
			}; | 
				
			|||
 | 
				
			|||
			const { data, code, msg } = await requestPost(url, params); | 
				
			|||
 | 
				
			|||
			if (code === 0) { | 
				
			|||
				this.$message.success('标记成功'); | 
				
			|||
				this.getTableData(); | 
				
			|||
			} else { | 
				
			|||
				this.$message.error(msg); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
		async handleCancalDiffcult() { | 
				
			|||
			const url = '/gov/project/icEvent/difficultpointevent'; | 
				
			|||
 | 
				
			|||
			let params = { | 
				
			|||
				icEventIdList: this.multipleSelection, | 
				
			|||
				type: '0' | 
				
			|||
			}; | 
				
			|||
 | 
				
			|||
			const { data, code, msg } = await requestPost(url, params); | 
				
			|||
 | 
				
			|||
			if (code === 0) { | 
				
			|||
				this.$message.success('取消标记成功'); | 
				
			|||
				this.getTableData(); | 
				
			|||
			} else { | 
				
			|||
				this.$message.error(msg); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		handleSearch(val) { | 
				
			|||
			console.log(this.formData); | 
				
			|||
			this.pageNo = 1; | 
				
			|||
			this.getTableData(); | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		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); | 
				
			|||
						this.orgOptions = []; | 
				
			|||
						this.orgOptions.push(res.data); | 
				
			|||
					} | 
				
			|||
				}) | 
				
			|||
				.catch(() => { | 
				
			|||
					return this.$message.error('网络错误'); | 
				
			|||
				}); | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		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('网络错误'); | 
				
			|||
				}); | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		async handleAdd() { | 
				
			|||
			this.pageType = 'add'; | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		async handleWatch(row) { | 
				
			|||
			this.eventId = row.icEventId; | 
				
			|||
			const url = '/gov/project/icEvent/detail'; | 
				
			|||
			// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/detail"; | 
				
			|||
 | 
				
			|||
			const { data, code, msg } = await requestPost(url, { | 
				
			|||
				icEventId: this.eventId | 
				
			|||
			}); | 
				
			|||
 | 
				
			|||
			if (code === 0) { | 
				
			|||
				this.eventDetailData = { ...data }; | 
				
			|||
				this.pageType = 'info'; | 
				
			|||
			} else { | 
				
			|||
				this.$message.error(msg); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		//加载组织数据 | 
				
			|||
		async handleDispose(row) { | 
				
			|||
			this.eventId = row.icEventId; | 
				
			|||
			const url = '/gov/project/icEvent/detail'; | 
				
			|||
			// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/detail"; | 
				
			|||
 | 
				
			|||
			const { data, code, msg } = await requestPost(url, { | 
				
			|||
				icEventId: this.eventId | 
				
			|||
			}); | 
				
			|||
 | 
				
			|||
			if (code === 0) { | 
				
			|||
				this.eventDetailData = { ...data }; | 
				
			|||
				this.pageType = 'dispose'; | 
				
			|||
			} else { | 
				
			|||
				this.$message.error(msg); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		//显示语音窗口 | 
				
			|||
		handleShowVoice(url) { | 
				
			|||
			this.selVoiceUrl = url; | 
				
			|||
			this.showVoice = true; | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		handleClose() { | 
				
			|||
			this.pageType = 'list'; | 
				
			|||
			this.eventId = ''; | 
				
			|||
			this.getTableData(); | 
				
			|||
		}, | 
				
			|||
		handleOk() { | 
				
			|||
			this.pageType = 'list'; | 
				
			|||
			this.eventId = ''; | 
				
			|||
			this.pageNo = 1; | 
				
			|||
			this.getTableData(); | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		handleEditSuccess() { | 
				
			|||
			this.handleClose(); | 
				
			|||
			this.getTableData(); | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		async handleDel(rowData) { | 
				
			|||
			let message = '确认删除?'; | 
				
			|||
 | 
				
			|||
			this.$confirm(message, '提示', { | 
				
			|||
				confirmButtonText: '确定', | 
				
			|||
				cancelButtonText: '取消', | 
				
			|||
				type: 'warning' | 
				
			|||
			}) | 
				
			|||
				.then(() => { | 
				
			|||
					this.delEvent(rowData.icEventId); | 
				
			|||
				}) | 
				
			|||
				.catch(err => {}); | 
				
			|||
		}, | 
				
			|||
		async delEvent(eventId) { | 
				
			|||
			const url = '/gov/project/icEvent/delete'; | 
				
			|||
			let idsArr = [eventId]; | 
				
			|||
 | 
				
			|||
			const { data, code, msg } = await requestPost(url, idsArr); | 
				
			|||
 | 
				
			|||
			if (code === 0) { | 
				
			|||
				this.$message.success('删除成功!'); | 
				
			|||
				this.getTableData(); | 
				
			|||
			} else { | 
				
			|||
				this.$message.error('操作失败!'); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
		async getCountLevel() { | 
				
			|||
			// const url = '/gov/org/staffLoginLog/count-level'; | 
				
			|||
			const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/count-level'; | 
				
			|||
			let param = {}; | 
				
			|||
		}, | 
				
			|||
		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(); | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		resetSearch() { | 
				
			|||
			this.agencyIdArray = []; | 
				
			|||
			this.formData = { | 
				
			|||
				agencyId: '', | 
				
			|||
				gridId: '', | 
				
			|||
				sourceType: '', | 
				
			|||
				eventContent: '', | 
				
			|||
				name: '', | 
				
			|||
				mobile: '', | 
				
			|||
				startTime: '', | 
				
			|||
				endTime: '', | 
				
			|||
				status: '', | 
				
			|||
				firstIdList: [], | 
				
			|||
				secondIdList: [] | 
				
			|||
			}; | 
				
			|||
			this.eventTypeCheck = []; | 
				
			|||
 | 
				
			|||
			this.pageNo = 1; | 
				
			|||
			this.getTableData(); | 
				
			|||
			// this.loadTable() | 
				
			|||
		}, | 
				
			|||
		deepTree(arr, child) { | 
				
			|||
			if (Array.isArray(arr) && arr.length > 0) { | 
				
			|||
				return arr.map(item => { | 
				
			|||
					// if (child === 'subAgencyList') item.value = item.orgType + '-' + item.orgId | 
				
			|||
					return { | 
				
			|||
						...item, | 
				
			|||
						[child]: (item[child] && item[child].length > 0 && this.deepTree(item[child], child)) || 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'; | 
				
			|||
.div_search { | 
				
			|||
	.item_width_2 { | 
				
			|||
		width: 200px; | 
				
			|||
	} | 
				
			|||
} | 
				
			|||
// /这里是不一样的,居左,从下对齐 | 
				
			|||
.census_searchcensus2 { | 
				
			|||
	text-align: center; | 
				
			|||
	margin: 0 auto; | 
				
			|||
	display: flex; | 
				
			|||
	align-items: bottom; | 
				
			|||
	justify-content:space-between; | 
				
			|||
	margin-bottom:20px; | 
				
			|||
	margin-top: 20px; | 
				
			|||
	.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; | 
				
			|||
	background: #feb349; | 
				
			|||
	// box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31); | 
				
			|||
	border-radius: 6px; | 
				
			|||
	color: #fff; | 
				
			|||
} | 
				
			|||
</style> | 
				
			|||
@ -0,0 +1,562 @@ | 
				
			|||
<template> | 
				
			|||
	<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 | 
				
			|||
								v-model="formData.orgId" | 
				
			|||
								:options="orgOptions" | 
				
			|||
								:props="orgOptionProps" | 
				
			|||
								:show-all-levels="false" | 
				
			|||
								@change="handleChangeAgency" | 
				
			|||
							></el-cascader> | 
				
			|||
						</el-form-item> | 
				
			|||
						<el-form-item label="上报时间" prop="startDate"> | 
				
			|||
							<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="开始时间" | 
				
			|||
								@change="getTableData()" | 
				
			|||
							></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="结束时间" | 
				
			|||
								@change="getTableData()" | 
				
			|||
							></el-date-picker> | 
				
			|||
						</el-form-item> | 
				
			|||
					</div> | 
				
			|||
				</el-form> | 
				
			|||
				<div class="flex"> | 
				
			|||
					<div class="census_searchcensus" v-if="censusData.cityCount > -1"> | 
				
			|||
						<div class="census_searchcensus_box"> | 
				
			|||
							<img src="../../../assets/img/census/市级.png" /> | 
				
			|||
							<div> | 
				
			|||
								<h2>{{ censusData.cityCount }}</h2> | 
				
			|||
								<h3>市级账号登录总次数</h3> | 
				
			|||
							</div> | 
				
			|||
						</div> | 
				
			|||
					</div> | 
				
			|||
 | 
				
			|||
					<div class="census_searchcensus" v-if="censusData.districtCount > -1" @click="show(1)"> | 
				
			|||
						<div class="census_searchcensus_box"> | 
				
			|||
							<img src="../../../assets/img/census/区级.png" /> | 
				
			|||
							<div> | 
				
			|||
								<h2>{{ censusData.districtCount }}</h2> | 
				
			|||
								<h3>区级账号登录总次数</h3> | 
				
			|||
							</div> | 
				
			|||
						</div> | 
				
			|||
					</div> | 
				
			|||
 | 
				
			|||
					<div class="census_searchcensus" v-if="censusData.streetCount > -1" @click="show(2)"> | 
				
			|||
						<div class="census_searchcensus_box"> | 
				
			|||
							<img src="../../../assets/img/census/镇街.png" /> | 
				
			|||
							<div> | 
				
			|||
								<h2>{{ censusData.streetCount }}</h2> | 
				
			|||
								<h3>镇街账号登录总次数</h3> | 
				
			|||
							</div> | 
				
			|||
						</div> | 
				
			|||
					</div> | 
				
			|||
 | 
				
			|||
					<div class="census_searchcensus" v-if="censusData.communityCount > -1" @click="show(3)"> | 
				
			|||
						<div class="census_searchcensus_box"> | 
				
			|||
							<img src="../../../assets/img/census/社区.png" /> | 
				
			|||
							<div> | 
				
			|||
								<h2>{{ censusData.communityCount }}</h2> | 
				
			|||
								<h3>社区账号登录总次数</h3> | 
				
			|||
							</div> | 
				
			|||
						</div> | 
				
			|||
					</div> | 
				
			|||
				</div> | 
				
			|||
			</div> | 
				
			|||
			<el-row :gutter="20"> | 
				
			|||
				<el-col :span="12"> | 
				
			|||
					<div class="div_table"> | 
				
			|||
						<div class="div_table_title">下级社区账号登录次数排名</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="agencyName" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
							<el-table-column prop="streetName" label="所属街道" min-width="140" 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="count" align="center" width="110" label="登录次数" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
						</el-table> | 
				
			|||
					</div> | 
				
			|||
				</el-col> | 
				
			|||
				<el-col :span="12"> | 
				
			|||
					<div class="div_table"> | 
				
			|||
						<div class="div_table_title">下级组织账号登录次数汇总</div> | 
				
			|||
						<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> | 
				
			|||
					</div> | 
				
			|||
				</el-col> | 
				
			|||
			</el-row> | 
				
			|||
		</div> | 
				
			|||
		<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> | 
				
			|||
			<el-table :data="tableDataView" border v-loading="tableLoading2" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="table" style="width: 100%"> | 
				
			|||
				<template v-if="orgType == 'district'"> | 
				
			|||
					<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> | 
				
			|||
					<el-table-column prop="agencyName" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
					<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="count" align="center" width="110" label="登录次数" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
				</template> | 
				
			|||
				<template v-if="orgType == 'street'"> | 
				
			|||
					<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="count" align="center" width="110" label="登录次数" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
				</template> | 
				
			|||
				<template v-if="orgType == 'community'"> | 
				
			|||
					<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> | 
				
			|||
					<el-table-column prop="districtName" label="区县名称" align="center" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
					<el-table-column prop="count" align="center" width="110" label="登录次数" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
				</template> | 
				
			|||
				<template v-if="orgType == 'sub'"> | 
				
			|||
					<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> | 
				
			|||
					<el-table-column prop="districtName" label="区县名称" align="center" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
					<el-table-column prop="count" align="center" width="110" label="登录次数" :show-overflow-tooltip="true"></el-table-column> | 
				
			|||
				</template> | 
				
			|||
			</el-table> | 
				
			|||
 | 
				
			|||
			<el-pagination | 
				
			|||
				@size-change="handleSizeChange" | 
				
			|||
				@current-change="handleCurrentChange" | 
				
			|||
				:current-page.sync="pageNo" | 
				
			|||
				:page-sizes="[20, 50, 100, 200]" | 
				
			|||
				:page-size="parseInt(pageSize)" | 
				
			|||
				layout="sizes, prev, pager, next, total" | 
				
			|||
				:total="total" | 
				
			|||
			></el-pagination> | 
				
			|||
		</el-dialog> | 
				
			|||
	</div> | 
				
			|||
</template> | 
				
			|||
 | 
				
			|||
<script> | 
				
			|||
import screenEchartsFrame from './chart'; | 
				
			|||
import { pieOption } from './Option.js'; | 
				
			|||
import { requestPost } from '@/js/dai/request'; | 
				
			|||
import nextTick from 'dai-js/tools/nextTick'; | 
				
			|||
import { mapGetters } from 'vuex'; | 
				
			|||
 | 
				
			|||
import axios from 'axios'; | 
				
			|||
 | 
				
			|||
export default { | 
				
			|||
	components: {}, | 
				
			|||
 | 
				
			|||
	data() { | 
				
			|||
		let endDisabledDate = time => { | 
				
			|||
			//这个关键属性我们一定要写在data的里面并且return的外面,这是动态改变区间的关键 | 
				
			|||
			let nowData = Date.now(); | 
				
			|||
			if (this.formData.startDate) { | 
				
			|||
				let startDate = new Date(this.formData.startDate); | 
				
			|||
				return time.getTime() > nowData || time.getTime() < startDate || time.getTime() === startDate; | 
				
			|||
			} else { | 
				
			|||
				return time.getTime() > nowData; | 
				
			|||
			} | 
				
			|||
		}; | 
				
			|||
		let startDisabledDate = time => { | 
				
			|||
			//这个关键属性我们一定要写在data的里面并且return的外面,这是动态改变区间的关键 | 
				
			|||
			let nowData = Date.now(); | 
				
			|||
			return time.getTime() > nowData; | 
				
			|||
		}; | 
				
			|||
		return { | 
				
			|||
			pieChart: '', | 
				
			|||
			pieOption: {}, | 
				
			|||
			pieInitState: false, | 
				
			|||
			pieData: [], | 
				
			|||
			title: '', | 
				
			|||
			dialogVisible: false, | 
				
			|||
			tableLoading: false, | 
				
			|||
			tableLoading2: false, | 
				
			|||
			pageType: 'list', // 列表list 新增add  处理dispose 详情info | 
				
			|||
			user: {}, | 
				
			|||
			agencyId: '', | 
				
			|||
			gridList: [], //所属网格list--场所区域 | 
				
			|||
			agencyIdArray: [], | 
				
			|||
			orgOptions: [], | 
				
			|||
			orgOptionProps: { | 
				
			|||
				multiple: false, | 
				
			|||
				value: 'agencyId', | 
				
			|||
				label: 'agencyName', | 
				
			|||
				children: 'subAgencyList', | 
				
			|||
				checkStrictly: true | 
				
			|||
			}, | 
				
			|||
			tableData: [], | 
				
			|||
			tableDataView: [], | 
				
			|||
			censusData: {}, | 
				
			|||
			formData: { | 
				
			|||
				orgId: '', | 
				
			|||
				level: '', | 
				
			|||
				startDate: '', | 
				
			|||
				endDate: '' | 
				
			|||
			}, | 
				
			|||
			cateOptions: [], | 
				
			|||
			eventTypeCheck: [], | 
				
			|||
			pageNo: 1, | 
				
			|||
			pageSize: window.localStorage.getItem('pageSize') || 10, | 
				
			|||
			total: 1, | 
				
			|||
			endPickerOptions: { | 
				
			|||
				disabledDate: endDisabledDate | 
				
			|||
			}, | 
				
			|||
			startPickerOptions: { | 
				
			|||
				disabledDate: startDisabledDate | 
				
			|||
			}, | 
				
			|||
			eventId: '', | 
				
			|||
			orgType: '', | 
				
			|||
			eventDetailData: {}, | 
				
			|||
 | 
				
			|||
			showVoice: false, | 
				
			|||
			selVoiceUrl: '', | 
				
			|||
 | 
				
			|||
			multipleSelection: [], | 
				
			|||
			TableHeight: '' | 
				
			|||
		}; | 
				
			|||
	}, | 
				
			|||
	components: { | 
				
			|||
		screenEchartsFrame | 
				
			|||
	}, | 
				
			|||
	computed: { | 
				
			|||
		maxTableHeight() { | 
				
			|||
			this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 460 + this.iframeHeigh : this.clientHeight - 460; | 
				
			|||
			return this.TableHeight; | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		...mapGetters(['clientHeight', 'iframeHeight']) | 
				
			|||
	}, | 
				
			|||
	watch: { | 
				
			|||
		'formData.endDate': function(val) { | 
				
			|||
			if (val && val != '') { | 
				
			|||
				let arrayTemp = val.split(' '); | 
				
			|||
				this.formData.endDate = 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.getCountLevel(); | 
				
			|||
		this.getPie(); | 
				
			|||
	}, | 
				
			|||
	methods: { | 
				
			|||
		show(type) { | 
				
			|||
			switch (type) { | 
				
			|||
				case 1: | 
				
			|||
					this.orgType = 'district'; | 
				
			|||
					break; | 
				
			|||
				case 2: | 
				
			|||
					this.orgType = 'street'; | 
				
			|||
					break; | 
				
			|||
				case 3: | 
				
			|||
					this.orgType = 'community'; | 
				
			|||
					break; | 
				
			|||
				case 4: | 
				
			|||
					this.orgType = 'sub'; | 
				
			|||
					break; | 
				
			|||
			} | 
				
			|||
 | 
				
			|||
			this.pageNo = 1; | 
				
			|||
			this.showNext(); | 
				
			|||
			this.dialogVisible = true; | 
				
			|||
		}, | 
				
			|||
		handleClose() { | 
				
			|||
			this.dialogVisible = false; | 
				
			|||
		}, | 
				
			|||
		async showNext() { | 
				
			|||
			let url = ''; | 
				
			|||
			let param = {}; | 
				
			|||
			// district street community | 
				
			|||
			// 1 是区县 2是镇街 3是社区  4是下级 | 
				
			|||
			switch (this.orgType) { | 
				
			|||
				case 'district': | 
				
			|||
					url = '/gov/org/staffLoginLog/district-count'; | 
				
			|||
					break; | 
				
			|||
				case 'street': | 
				
			|||
					url = '/gov/org/staffLoginLog/street-count'; | 
				
			|||
					break; | 
				
			|||
				case 'community': | 
				
			|||
					url = '/gov/org/staffLoginLog/community-count'; | 
				
			|||
					break; | 
				
			|||
				case 'sub': | 
				
			|||
					url = '/gov/org/staffLoginLog/sub-count'; | 
				
			|||
					break; | 
				
			|||
			} | 
				
			|||
			param = { | 
				
			|||
				orgId: this.formData.orgId, | 
				
			|||
				level: this.orgType, | 
				
			|||
				startDate: this.formData.startDate, | 
				
			|||
				endDate: this.formData.endDate, | 
				
			|||
				isPage: true, | 
				
			|||
				pageNo: this.pageNo, | 
				
			|||
				pageSize: this.pageSize | 
				
			|||
			}; | 
				
			|||
 | 
				
			|||
			this.tableLoading2 = true; | 
				
			|||
 | 
				
			|||
			const { data, code, msg } = await requestPost(url, param); | 
				
			|||
 | 
				
			|||
			this.tableLoading2 = false; | 
				
			|||
			if (code === 0) { | 
				
			|||
				this.total = data.total || 0; | 
				
			|||
				this.tableDataView = data.list | 
				
			|||
					? data.list.map(item => { | 
				
			|||
							return item; | 
				
			|||
					  }) | 
				
			|||
					: []; | 
				
			|||
			} else { | 
				
			|||
				this.$message.error(msg); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		handleChangeAgency(val) { | 
				
			|||
			let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; | 
				
			|||
			console.log(obj); | 
				
			|||
			this.formData.orgId = obj.agencyId; | 
				
			|||
			this.formData.level = obj.level; | 
				
			|||
			this.getTableData(); | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		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); | 
				
			|||
						this.orgOptions = []; | 
				
			|||
						this.orgOptions.push(res.data); | 
				
			|||
					} | 
				
			|||
				}) | 
				
			|||
				.catch(() => { | 
				
			|||
					return this.$message.error('网络错误'); | 
				
			|||
				}); | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		//加载组织数据 | 
				
			|||
		async handleDispose(row) { | 
				
			|||
			this.eventId = row.icEventId; | 
				
			|||
			const url = '/gov/project/icEvent/detail'; | 
				
			|||
			// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/detail"; | 
				
			|||
 | 
				
			|||
			const { data, code, msg } = await requestPost(url, { | 
				
			|||
				icEventId: this.eventId | 
				
			|||
			}); | 
				
			|||
 | 
				
			|||
			if (code === 0) { | 
				
			|||
				this.eventDetailData = { ...data }; | 
				
			|||
				this.pageType = 'dispose'; | 
				
			|||
			} else { | 
				
			|||
				this.$message.error(msg); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		async getCountLevel() { | 
				
			|||
			const url = '/gov/org/staffLoginLog/count-level'; | 
				
			|||
			// const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/count-level'; | 
				
			|||
			let param = { ...this.formData }; | 
				
			|||
			const { data, code, msg } = await requestPost(url, param); | 
				
			|||
			console.log('getCountLeveldata', data); | 
				
			|||
			if (code === 0) { | 
				
			|||
				this.censusData = data; | 
				
			|||
			} else { | 
				
			|||
				this.$message.error(msg); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
		async getTableData() { | 
				
			|||
			this.tableLoading = true; | 
				
			|||
			this.$refs.pieChart.showLoading(); | 
				
			|||
			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, | 
				
			|||
				isPage: true, | 
				
			|||
				...formData | 
				
			|||
			}); | 
				
			|||
			this.$refs.pieChart.hideLoading(); | 
				
			|||
			this.tableLoading = false; | 
				
			|||
			if (code === 0) { | 
				
			|||
				this.total = data.total || 0; | 
				
			|||
 | 
				
			|||
				this.tableData = data.list | 
				
			|||
					? data.list.map(item => { | 
				
			|||
							return item; | 
				
			|||
					  }) | 
				
			|||
					: []; | 
				
			|||
					console.log("this.tableData ",this.tableData ) | 
				
			|||
				this.getPie(); | 
				
			|||
			} else { | 
				
			|||
				this.$message.error(msg); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
 | 
				
			|||
		handleSizeChange(val) { | 
				
			|||
			this.pageSize = val; | 
				
			|||
			window.localStorage.setItem('pageSize', val); | 
				
			|||
			this.getTableData(); | 
				
			|||
		}, | 
				
			|||
		handleCurrentChange(val) { | 
				
			|||
			this.pageNo = val; | 
				
			|||
			this.getTableData(); | 
				
			|||
		}, | 
				
			|||
		deepTree(arr, child) { | 
				
			|||
			if (Array.isArray(arr) && arr.length > 0) { | 
				
			|||
				return arr.map(item => { | 
				
			|||
					// if (child === 'subAgencyList') item.value = item.orgType + '-' + item.orgId | 
				
			|||
					return { | 
				
			|||
						...item, | 
				
			|||
						[child]: (item[child] && item[child].length > 0 && this.deepTree(item[child], child)) || null | 
				
			|||
					}; | 
				
			|||
				}); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
		pieInitOk() { | 
				
			|||
			this.pieInitState = true; | 
				
			|||
		}, | 
				
			|||
		getPie() { | 
				
			|||
			if (this.pieInitState) { | 
				
			|||
				this.setPieData(); | 
				
			|||
			} else { | 
				
			|||
				setTimeout(() => { | 
				
			|||
					this.getPie(); | 
				
			|||
				}, 500); | 
				
			|||
			} | 
				
			|||
		}, | 
				
			|||
		setPieData() { | 
				
			|||
			let data=[...this.tableData] | 
				
			|||
			let PieData={}; | 
				
			|||
			PieData.name=data.map((item) => item.agencyName); | 
				
			|||
			PieData.data=data.map((item) => item.count); | 
				
			|||
			console.log( PieData) | 
				
			|||
			this.iniPieChart(PieData); | 
				
			|||
		}, | 
				
			|||
		// 获取饼状图 | 
				
			|||
		async iniPieChart(PieData) { | 
				
			|||
		 | 
				
			|||
			this.$refs.pieChart.clear(); | 
				
			|||
			// 获取pieChart配置 | 
				
			|||
			this.pieOption = { | 
				
			|||
				xAxis: { | 
				
			|||
					type: 'category', | 
				
			|||
					data: PieData.name | 
				
			|||
				}, | 
				
			|||
				yAxis: { | 
				
			|||
					type: 'value' | 
				
			|||
				}, | 
				
			|||
				series: [ | 
				
			|||
					{ | 
				
			|||
						data: PieData.data, | 
				
			|||
						type: 'bar', | 
				
			|||
						itemStyle: { | 
				
			|||
							color: 'rgb(33, 149, 254)' | 
				
			|||
						} | 
				
			|||
					} | 
				
			|||
				] | 
				
			|||
			}; | 
				
			|||
 | 
				
			|||
			this.pieOption.series[0].data = this.pieData; | 
				
			|||
			this.$refs.pieChart.setOption(this.pieOption); | 
				
			|||
		}, | 
				
			|||
		handelClickMyPei(param) { | 
				
			|||
			console.log(param); | 
				
			|||
		} | 
				
			|||
	} | 
				
			|||
}; | 
				
			|||
</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'; | 
				
			|||
.div_search { | 
				
			|||
	.item_width_2 { | 
				
			|||
		width: 200px; | 
				
			|||
	} | 
				
			|||
} | 
				
			|||
.flex { | 
				
			|||
	display: flex; | 
				
			|||
} | 
				
			|||
.census_searchcensus { | 
				
			|||
	text-align: center; | 
				
			|||
	margin: 0 auto; | 
				
			|||
	display: flex; | 
				
			|||
	align-items: center; | 
				
			|||
	justify-content: center; | 
				
			|||
	margin-bottom: 40px; | 
				
			|||
	margin-top: 40px; | 
				
			|||
	.census_searchcensus_box { | 
				
			|||
		cursor: pointer; | 
				
			|||
		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; | 
				
			|||
} | 
				
			|||
.cur { | 
				
			|||
	cursor: pointer; | 
				
			|||
} | 
				
			|||
</style> | 
				
			|||
@ -0,0 +1,12 @@ | 
				
			|||
<template> | 
				
			|||
	<!-- 	census-orgStatusList | 
				
			|||
	census-accountList | 
				
			|||
	census-accountActiveList | 
				
			|||
	census-houseList | 
				
			|||
	census-residentList | 
				
			|||
	census-nineList --> | 
				
			|||
</template> | 
				
			|||
 | 
				
			|||
<script></script> | 
				
			|||
 | 
				
			|||
<style></style> | 
				
			|||
@ -0,0 +1,12 @@ | 
				
			|||
<template> | 
				
			|||
	<!-- 	census-orgStatusList | 
				
			|||
	census-accountList | 
				
			|||
	census-accountActiveList | 
				
			|||
	census-houseList | 
				
			|||
	census-residentList | 
				
			|||
	census-nineList --> | 
				
			|||
</template> | 
				
			|||
 | 
				
			|||
<script></script> | 
				
			|||
 | 
				
			|||
<style></style> | 
				
			|||
@ -0,0 +1,12 @@ | 
				
			|||
<template> | 
				
			|||
	<!-- 	census-orgStatusList | 
				
			|||
	census-accountList | 
				
			|||
	census-accountActiveList | 
				
			|||
	census-houseList | 
				
			|||
	census-residentList | 
				
			|||
	census-nineList --> | 
				
			|||
</template> | 
				
			|||
 | 
				
			|||
<script></script> | 
				
			|||
 | 
				
			|||
<style></style> | 
				
			|||
@ -0,0 +1,12 @@ | 
				
			|||
<template> | 
				
			|||
	<!-- 	census-orgStatusList | 
				
			|||
	census-accountList | 
				
			|||
	census-accountActiveList | 
				
			|||
	census-houseList | 
				
			|||
	census-residentList | 
				
			|||
	census-nineList --> | 
				
			|||
</template> | 
				
			|||
 | 
				
			|||
<script></script> | 
				
			|||
 | 
				
			|||
<style></style> | 
				
			|||
@ -0,0 +1,163 @@ | 
				
			|||
<template> | 
				
			|||
  <div class="screenEchartsFrame" | 
				
			|||
       ref="screenEchartsFrame"></div> | 
				
			|||
</template> | 
				
			|||
 | 
				
			|||
<script> | 
				
			|||
import * as echarts from 'echarts'; | 
				
			|||
export default { | 
				
			|||
  name: 'screen-echarts-frame', | 
				
			|||
  data () { | 
				
			|||
    return { | 
				
			|||
      myChart: '' | 
				
			|||
    } | 
				
			|||
  }, | 
				
			|||
  props: { | 
				
			|||
    chartMethod: { | 
				
			|||
      type: Function | 
				
			|||
    } | 
				
			|||
  }, | 
				
			|||
  mounted () { | 
				
			|||
    this.initChart() | 
				
			|||
    window.onresize = () => { | 
				
			|||
      this.myChart.resize() | 
				
			|||
    } | 
				
			|||
  }, | 
				
			|||
  beforeDestroy () { | 
				
			|||
    // 销毁echarts实例对象 | 
				
			|||
    if (this.myChart) this.myChart.dispose() | 
				
			|||
  }, | 
				
			|||
  watch: {}, | 
				
			|||
  methods: { | 
				
			|||
    initChart () { | 
				
			|||
      this.$nextTick(() => { | 
				
			|||
        const dom = this.$refs.screenEchartsFrame | 
				
			|||
        this.myChart = echarts.init(dom) | 
				
			|||
        // this.myChart.setOption(this.chartMethod()) | 
				
			|||
        this.$emit('myChartMethod', this.myChart) | 
				
			|||
      }) | 
				
			|||
    }, | 
				
			|||
    // 配置option | 
				
			|||
    setOption (option) { | 
				
			|||
      this.myChart.setOption(option) | 
				
			|||
     let than = this | 
				
			|||
      this.myChart.on('click',function(param){ | 
				
			|||
        than.$emit('handelClickMyPei',param) | 
				
			|||
				}) | 
				
			|||
    }, | 
				
			|||
    // 获取option | 
				
			|||
    getOption () { | 
				
			|||
      if (this.myChart) { | 
				
			|||
        return this.myChart.getOption() | 
				
			|||
      } else { | 
				
			|||
        return null | 
				
			|||
      } | 
				
			|||
    }, | 
				
			|||
    // | 
				
			|||
    resize () { | 
				
			|||
      if (this.myChart) { | 
				
			|||
        this.myChart.resize() | 
				
			|||
      } | 
				
			|||
    }, | 
				
			|||
    clear () { | 
				
			|||
      if (this.myChart) { | 
				
			|||
        this.myChart.clear() | 
				
			|||
      } | 
				
			|||
    }, | 
				
			|||
    showLoading () { | 
				
			|||
      if (this.myChart) { | 
				
			|||
        this.$nextTick(() => { | 
				
			|||
          this.myChart.showLoading({ | 
				
			|||
            text: '', | 
				
			|||
            color: '#29cdff', | 
				
			|||
            textColor: '#29cdff', | 
				
			|||
            maskColor: 'rgba(255, 255, 255, 0)', | 
				
			|||
            zlevel: 0 | 
				
			|||
          }) | 
				
			|||
        }) | 
				
			|||
      } | 
				
			|||
    }, | 
				
			|||
    hideLoading () { | 
				
			|||
      if (this.myChart) { | 
				
			|||
        this.myChart.hideLoading() | 
				
			|||
      } | 
				
			|||
    }, | 
				
			|||
    // 启动动画时使用 | 
				
			|||
    tooltipAnimate (chart, length) { | 
				
			|||
      // 清除上一次动画 | 
				
			|||
      this.timeTicket && clearInterval(this.timeTicket) | 
				
			|||
      const count = 0 | 
				
			|||
      // 启动动画 | 
				
			|||
      this._action(chart, count, length) | 
				
			|||
      chart && // 移除动画 | 
				
			|||
        chart.on('mouseover', params => { | 
				
			|||
          this._cleanAction(chart, params) | 
				
			|||
        }) | 
				
			|||
      // 重写启动动画 | 
				
			|||
      chart && | 
				
			|||
        chart.on('mouseout', () => { | 
				
			|||
          this._action(chart, count, length) | 
				
			|||
        }) | 
				
			|||
    }, | 
				
			|||
    // tooltip动画action | 
				
			|||
    _action (chart, count, length) { | 
				
			|||
      this.timeTicket && clearInterval(this.timeTicket) | 
				
			|||
      this.timeTicket = setInterval(() => { | 
				
			|||
        if (!chart) { | 
				
			|||
          clearInterval(this.timeTicket) | 
				
			|||
          return | 
				
			|||
        } | 
				
			|||
        chart && | 
				
			|||
          chart.dispatchAction({ | 
				
			|||
            type: 'downplay', | 
				
			|||
            seriesIndex: 0 | 
				
			|||
          }) | 
				
			|||
        chart && | 
				
			|||
          chart.dispatchAction({ | 
				
			|||
            type: 'highlight', | 
				
			|||
            seriesIndex: 0, | 
				
			|||
            dataIndex: count % length | 
				
			|||
          }) | 
				
			|||
        chart && | 
				
			|||
          chart.dispatchAction({ | 
				
			|||
            type: 'showTip', | 
				
			|||
            seriesIndex: 0, | 
				
			|||
            dataIndex: count % length | 
				
			|||
          }) | 
				
			|||
        count++ | 
				
			|||
      }, 1000 * 3) | 
				
			|||
    }, | 
				
			|||
    _cleanAction (chart, params) { | 
				
			|||
      this.timeTicket && clearInterval(this.timeTicket) | 
				
			|||
      if (!chart) { | 
				
			|||
        clearInterval(this.timeTicket) | 
				
			|||
        return | 
				
			|||
      } | 
				
			|||
      chart && | 
				
			|||
        chart.dispatchAction({ | 
				
			|||
          type: 'downplay', | 
				
			|||
          seriesIndex: 0 | 
				
			|||
        }) | 
				
			|||
      chart && | 
				
			|||
        chart.dispatchAction({ | 
				
			|||
          type: 'highlight', | 
				
			|||
          seriesIndex: 0, | 
				
			|||
          dataIndex: params.dataIndex | 
				
			|||
        }) | 
				
			|||
      chart && | 
				
			|||
        chart.dispatchAction({ | 
				
			|||
          type: 'showTip', | 
				
			|||
          seriesIndex: 0, | 
				
			|||
          dataIndex: params.dataIndex | 
				
			|||
        }) | 
				
			|||
    } | 
				
			|||
  } | 
				
			|||
} | 
				
			|||
</script> | 
				
			|||
 | 
				
			|||
<style lang="scss" scoped> | 
				
			|||
.screenEchartsFrame { | 
				
			|||
  width: 100%; | 
				
			|||
  height: 100%; | 
				
			|||
} | 
				
			|||
</style> | 
				
			|||
					Loading…
					
					
				
		Reference in new issue