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

<template>
	<div class="m-zyqd">

		<el-row :gutter="16">
			<el-col :span="8">
				<div class="kuangkuang">
					<h3>发布政策数</h3>
					<h2>{{info.pub_policy_total}}</h2>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="kuangkuang">
					<h3>指派服务数</h3>
					<h2>{{info.assign_service_total}}</h2>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="kuangkuang">
					<h3>政策找人数</h3>
					<h2>{{info.policy_search_person_total}}</h2>
				</div>
			</el-col>

		</el-row>
		<div class="pieMain pieMain2">
			<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 './fwBarOption05.js';
	import {
		requestPostBi
	} from '@/js/dai/request-bipass';
	export default {
		props: {
			orgId: {
				type: String,
				default: ''
			},
			searchDate: Array
		},
		data() {
			return {
				showNoData: false,
				timer: null,
				pieChart: '',
				pieOption: {},
				pieInitState: false,
				pieData: [],

				info: {}
			};
		},
		components: {
			screenEchartsFrame
		},
		mounted() {
			this.init();
		},

		methods: {
			async init() {
				await this.getInfo();
				this.getPie();
			},

			// 公共服务数据统计
			async getInfo() {
				let url = 'policy_search_person';
				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: 69463163,
					}
				);
				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() {
				let data = [...this.info.child];
				let pieData0 = [];
				let pieData1 = [];
				let pieData2 = [];
				let pieData3 = [];

				let i = 0;
				data.forEach((item, index) => {
					if ((item.assign_service_num > 0 || item.pub_policy_num > 0) && i < 10) {
						pieData0.push(item.common_service_type_name);
						pieData1.push(item.assign_service_num);
						pieData2.push(item.pub_policy_num);
						i++;
					}
				});

				this.pieData = [pieData0, pieData1, pieData2];
				this.iniPieChart();
			},
			// 获取饼状图
			async iniPieChart() {
				this.$refs.pieChart.clear();
				// 获取pieChart配置
				this.pieOption = pieOption();
				this.pieOption.xAxis[0].data = this.pieData[0];
				this.pieOption.series[0].data = this.pieData[1];
				this.pieOption.series[1].data = this.pieData[2];
				// this.pieOption.series[2].data = this.pieData[3];
				this.$refs.pieChart.setOption(this.pieOption);
			}
		}
	};
</script>

<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>
<style scoped>
	.pieMain2 {
		margin-left: 0px !important
	}
</style>