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

<template>
	<div class="m-fwqd">
		<div class="tablist">
			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" @click="handleClick(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" aria-controls="" 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: ''
		},
		searchDate: Array
	},
	data() {
		return {
			data: {},
			showNoData: false,
			timer: null,
			pieChart: '',
			pieOption: {},
			pieInitState: false,
			pieData: [],
			tabList: [
				'公共服务',
				'个性服务'
				// "下级人口分布",
			],
			currentTab: '公共服务'
		};
	},
	components: {
		screenEchartsFrame
	},
	mounted() {
		// this.init();
	},
	watch: {
		orgId() {
			this.init();
		},
		searchDate() {
			this.init();
		}
	},
	methods: {
		handleClick(item) {
			this.currentTab = item;
			this.getInfo();
		},
		async init() {
			if (this.orgId) {
				await this.getInfo();
				this.getPie();
			}
		},
		
		handleClickItem(item) {
			let typeArr = { "全部": "all", 
			"志愿者": "volunteer", 
			"社区自组织": "community_org", 
			"联建单位": "party_unit",
			"安全应急设备":"safety_emergency_equipment",
			"公共服务设备":"common_service_equipment",
			"安全生产场所":"enterprise",
			"应急场所":"emergency_sites",
			"城市管理":"city_management" };
			// 场所资源
			let path = '';
			if (this.currentTab == '个性服务列表') {
				path = 'gexingList';
			} else if (this.currentTab == '公共服务列表') {
				path = 'gonggongList';
			} 
			this.getInfo();
			console.log("item.name",item.name)
			this.$router.push({
				path: `/dataBoard/sida/fw/${path}`,
				query: {
					org_id: this.orgId,
					type: this.currentTab,
					type2: typeArr[item.name],
					start_date: this.searchDate[0],
					end_date: this.searchDate[1]
				}
			});
		},
		// 获取房屋总数等
		async getInfo() {
			let url = '';
			let mockId = 0;
			if (this.currentTab == '公共服务') {
				url = 'common_service_view';
				mockId = 66900331;
			} else {
				url = 'self_service_view';
				mockId = 66902813;
			}

			this.$refs.pieChart.showLoading();
			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgId,
						start_date: this.searchDate[0],
						end_date: this.searchDate[1]
					}
				},
				{
					// mockId: mockId,
				}
			);
			this.$refs.pieChart.hideLoading();
			if (code === 0) {
				if (data && Array.isArray(data) && data.length > 0) {
					let info = data[0].slice(0, 10);
					this.info = {
						...this.info,
						...info
					};
				}
				
				this.data = data.sort((a, b) => {
					return b.count - a.count;
				});
				this.setPieData();
			} else {
				this.$message.error(msg);
			}
		},

		pieInitOk() {
			this.pieInitState = true;
		},
		getPie() {
			if (this.pieInitState) {
				this.setPieData();
			} else {
				setTimeout(() => {
					this.getPie();
				}, 500);
			}
		},
		setPieData() {
			let { data } = this;

			data = JSON.parse(JSON.stringify(data).replace(/count/g, 'value'));

			this.pieData = data;

			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);
		},
		handelClickMyPei(item) {
			this.handleClickItem(item);
		}
	}
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>
<style lang="scss" scoped>
.pieMain .legend{margin-top:0px;}
</style>