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

<template>
	<div class="m-wtqd">
		<div class="tablist">
			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" @click="currentTab = item">{{ item }}</div>
		</div>
		<div class="pieMain">
			<div class="legend">
				<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)">
					<div class="name">{{ item.name }}</div>
					<div class="content">
						<div class="num">{{ item.value }}</div>
						<div class="unit">人</div>
					</div>
				</div>
			</div>
			<div class="pie"><screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame></div>
		</div>
	</div>
</template>
<script>
import screenEchartsFrame from '@/views/dataBoard/cpts/screen-echarts-frame/index';
import { pieOption } from './fwqdPieOption.js';
import { requestPostBi } from '@/js/dai/request-bipass';
export default {
	props: {
		orgId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			showNoData: false,
			timer: null,
			pieChart: '',
			pieOption: {},
			pieInitState: false,
			pieData: [],
			tabList: [
				'公共服务',
				'个性服务'
				// "下级人口分布",
			],
			currentTab: '公共服务',
			info: {
				male_count: 0,
				female_count: 0,
				resi_y_house_y_count: 0,
				resi_y_house_n_count: 0,
				resi_n_house_y_count: 0,
				primary_count: 0,
				junior_high_count: 0,
				second_speci_count: 0,
				high_school_count: 0,
				junior_college_count: 0,
				undergrad_count: 0,
				master_count: 0,
				doctor_count: 0,
				local_count: 0,
				field_count: 0,
				age50_count: 0,
				age5059_count: 0,
				age6069_count: 0,
				age7079_count: 0,
				age80_count: 0,
				culture_count: 0,
				committee_count: 0,
				capable_count: 0,
				friend_count: 0,
				agent_count: 0,
				mediator_count: 0,
				collector_count: 0,
				security_count: 0,
				party_mem_count: 0
			}
		};
	},
	components: {
		screenEchartsFrame
	},
	mounted() {
		this.init();
	},
	watch: {
		currentTab() {
			this.setPieData();
		},
		orgId() {
			this.init();
		}
	},
	methods: {
		async init() {
			await this.getInfo();
			this.getPie();
		},
		handleClickItem(item) {
			const { type, name } = item;
			this.$router.push({
				path: '/dataBoard/renfang/resi-analyze',
				query: {
					org_id: this.orgId,
					type,
					type_category: this.currentTab,
					type_name: name
				}
			});
		},
		// 获取房屋总数等
		async getInfo() {
			const url = 'resident_analyze';
			this.$refs.pieChart.showLoading();
			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgId
					}
				},
				{
					// mockId: 60041615,
				}
			);
			this.$refs.pieChart.hideLoading();
			if (code === 0) {
				if (data && Array.isArray(data) && data.length > 0) {
					let info = data[0];
					this.info = {
						...this.info,
						...info
					};
				}
			} else {
				this.$message.error(msg);
			}
		},
		selItem(selItem, selIndex) {
			this.tabList.forEach((element, index) => {
				if (index === selIndex) {
					element.sel = true;
				} else {
					element.sel = false;
				}
			});
		},
		pieInitOk() {
			this.pieInitState = true;
		},
		getPie() {
			if (this.pieInitState) {
				this.setPieData();
			} else {
				setTimeout(() => {
					this.getPie();
				}, 500);
			}
		},
		setPieData() {
			const { currentTab, info } = this;
			if (currentTab == '性别') {
				this.pieData = [
					{
						value: info.male_count || 0,
						type: 'male_count',
						name: '男性'
					},
					{
						value: info.female_count || 0,
						type: 'female_count',
						name: '女性'
					}
				];
			} else if (currentTab == '户籍') {
				this.pieData = [
					{
						value: info.local_count || 0,
						type: 'local_count',
						name: '本地户籍'
					},
					{
						value: info.field_count || 0,
						type: 'field_count',
						name: '外地户籍'
					}
				];
			} else if (currentTab == '人户状况') {
				this.pieData = [
					{
						value: info.resi_y_house_y_count || 0,
						type: 'resi_y_house_y_count',
						name: '人户一致'
					},
					{
						value: info.resi_y_house_n_count || 0,
						type: 'resi_y_house_n_count',
						name: '人在户不在'
					},
					{
						value: info.resi_n_house_y_count || 0,
						type: 'resi_n_house_y_count',
						name: '户在人不在'
					}
				];
			} else if (currentTab == '年龄') {
				this.pieData = [
					{
						value: info.age50_count || 0,
						type: 'age50_count',
						name: '50岁以下'
					},
					{
						value: info.age5059_count || 0,
						type: 'age5059_count',
						name: '50-59岁'
					},
					{
						value: info.age6069_count || 0,
						type: 'age6069_count',
						name: '60-69岁'
					},
					{
						value: info.age7079_count || 0,
						type: 'age7079_count',
						name: '70-79岁'
					},
					{
						value: info.age80_count || 0,
						type: 'age80_count',
						name: '80岁以上'
					}
				];
			} else if (currentTab == '志愿者类别') {
				this.pieData = [
					{
						value: info.culture_count || 0,
						type: 'culture_count',
						name: '文化队伍'
					},
					{
						value: info.committee_count || 0,
						type: 'committee_count',
						name: '楼委会'
					},
					{
						value: info.capable_count || 0,
						type: 'capable_count',
						name: '能人达人'
					},
					{
						value: info.friend_count || 0,
						type: 'friend_count',
						name: '老友俱乐部'
					},
					{
						value: info.agent_count || 0,
						type: 'agent_count',
						name: '代办员'
					},
					{
						value: info.mediator_count || 0,
						type: 'mediator_count',
						name: '调解员'
					},
					{
						value: info.collector_count || 0,
						type: 'collector_count',
						name: '采集员'
					},
					{
						value: info.security_count || 0,
						type: 'security_count',
						name: '治安巡逻员'
					},
					{
						value: info.party_mem_count || 0,
						type: 'party_mem_count',
						name: '党员中心户'
					}
				];
			} else if (currentTab == '党员文化程度') {
				this.pieData = [
					{
						value: info.primary_count || 0,
						type: 'primary_count',
						name: '小学及文盲'
					},
					{
						value: info.junior_high_count || 0,
						type: 'junior_high_count',
						name: '初中'
					},
					{
						value: info.second_speci_count || 0,
						type: 'second_speci_count',
						name: '中专'
					},
					{
						value: info.high_school_count || 0,
						type: 'high_school_count',
						name: '高中'
					},
					{
						value: info.junior_college_count || 0,
						type: 'junior_college_count',
						name: '大专'
					},
					{
						value: info.undergrad_count || 0,
						type: 'undergrad_count',
						name: '本科'
					},
					{
						value: info.master_count || 0,
						type: 'master_count',
						name: '硕士'
					},
					{
						value: info.doctor_count || 0,
						type: 'doctor_count',
						name: '博士'
					}
				];
			} else if (currentTab == '下级人口分布') {
				this.pieData = [];
			}
			this.iniPieChart();
		},
		// 获取饼状图
		async iniPieChart() {
			this.$refs.pieChart.clear();
			// 获取pieChart配置
			this.pieOption = pieOption();
			this.pieOption.series[0].name = this.currentTab;
			this.pieOption.series[0].data = this.pieData;
			this.$refs.pieChart.setOption(this.pieOption);
		}
	}
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>