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

<template>
	<div class="m-zyqd">
		<el-row :gutter="16">
			<el-col :span="6">
				<div class="kuangkuang">
					<h3>个性服务数量</h3>
					<h2>{{info.user_service_total}}</h2>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="kuangkuang">
					<h3>完成服务数量</h3>
					<h2>{{info.service_complete_total}}</h2>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="kuangkuang">
					<h3>服务完成率</h3>
					<h2>{{info.service_complete_ratio_total}}</h2>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="kuangkuang">
					<h3>服务满意度</h3>
					<h2>{{info.service_score_tatal}}</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 './fwBarOption04.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 = 'user_demand_count';
				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: 69450870,
				});
				this.$refs.pieChart.hideLoading();
				if (code === 0) {
					let data1 = data.slice(0, 10)
					if (data1 && Array.isArray(data1) && data1.length > 0) {
						let info = data1[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 = [];
				console.log("data22",data)
				data.forEach((item, index) => {
					if(index<10)
					{
						pieData0.push(item.category);
						pieData1.push(item.service_complete_ratio);
						pieData2.push(item.user_service_num);
						pieData3.push(item.service_complete_num);}
					
				});
				this.pieData = [pieData0, pieData1, pieData2, pieData3];
				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>