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) {
				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 = [];
			data.forEach((item, index) => {
				pieData0.push(item.category);
				pieData1.push(item.user_service_num);
				pieData2.push(item.service_complete_num);
				pieData3.push(item.service_complete_ratio);
			});

			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>