yudao-dev/src/views/equipment/analysis/efficiency/components/pieChart.vue

<!-- 
    filename: pieChart.vue
    author: liubin
    date: 2023-09-06 15:02:49
    description: 饼图
-->

<template>
	<div class="chart-grid-item" style="overflow: inherit">
		<div
			class="pie-chart"
			ref="pieChart"
			style="overflow: inherit;"
			:data-eqname="value.equipmentName || 'Default'"></div>
		<div class="data-view">
			<div class="data-view__item">
				<!-- <div class="data-view__item__value">111</div> -->
				<div class="data-view__item__value">{{ textData.workTime }}</div>
				<div class="data-view__item__title blue">工作时长</div>
			</div>
			<div class="data-view__item">
				<!-- <div class="data-view__item__value">22</div> -->
				<div class="data-view__item__value">{{ textData.stopTime }}</div>
				<div class="data-view__item__title green">停机时长</div>
			</div>
			<div class="data-view__item">
				<!-- <div class="data-view__item__value">10</div> -->
				<div class="data-view__item__value">{{ textData.downTime }}</div>
				<div class="data-view__item__title purple">故障时长</div>
			</div>
			<div class="data-view__item">
				<!-- <div class="data-view__item__value">100%</div> -->
				<div class="data-view__item__value">{{ textData.peEfficiency }}</div>
				<div class="data-view__item__title yellow">速度开动率</div>
			</div>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: 'pieChart',
	components: {},
	props: ['value'],
	data() {
		return {
			chart: null,
			textData: {
				workTime: '',
				downTime: '',
				stopTime: '',
				peEfficiency: '',
			},
			config: {
				title: {
					text: '产线1', //<=========
					top: '35%',
					left: '49%',
					textAlign: 'center',
					textStyle: {
						fontSize: 18,
					},
					subtext: '设备', //<=========
					subtextStyle: {
						fontSize: 14,
					},
				},
				color: ['#3da8fd', '#8ef0ab', '#6b5cfd', '#FFC72A', 'transparent'],
				grid: {
					top: 0,
					left: 0,
					right: 0,
					bottom: 0,
				},
				tooltip: {
					trigger: 'item',
				},
				legend: {
					show: false,
					top: '0%',
					left: 'center',
					textStyle: {
						fontSize: 10,
					},
					itemWidth: 10,
					itemHeight: 10,
				},
				series: [
					// 嵌套环形图
					{
						// 外环
						name: '',
						type: 'pie',
						radius: ['75%', '90%'],
						center: ['50%', '48%'],
						label: {
							show: false,
						},
						data: [
							//<=========
							{ name: '工作时长', value: 1048 },
							{ name: '停机时长', value: 735 },
							{ name: '故障时长', value: 580 },
						],
					},
					{
						// 内环
						name: '',
						type: 'pie',
						center: ['50%', '48%'],
						radius: ['60%', '75%'],
						itemStyle: {
							borderRadius: 10,
						},
						label: {
							show: false,
						},
						data: [
							//<=========
							{ name: '总', value: 3000 },
							{ name: '', value: 1400 },
						],
					},
					// {
					// 	name: this.value.equipmentName || 'Default',
					// 	type: 'pie',
					// 	radius: ['40%', '75%'],
					// 	avoidLabelOverlap: false,
					// 	label: {
					// 		show: false,
					// 		position: 'center',
					// 	},
					// 	data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({
					// 		name: ['工作时长', '停机时长', '故障时长'][index],
					// 		value: this.value[v],
					// 	})),
					// 	// data: [
					// 	// 	{ value: 1048, name: 'Search Engine' },
					// 	// 	{ value: 735, name: 'Direct' },
					// 	// 	{ value: 580, name: 'Email' },
					// 	// 	{ value: 484, name: 'Union Ads' },
					// 	// 	{ value: 300, name: 'Video Ads' },
					// 	// ],
					// },
				],
			},
		};
	},
	mounted() {
		console.log('value', this.value);
		if (!this.chart) {
			this.chart = echarts.init(this.$refs.pieChart);
			this.$nextTick(() => {
				this.chart.setOption(this.config);
			});
		}
	},
	beforeDestroy() {
		if (this.chart) this.chart.dispose();
	},
	watch: {
		value: {
			handler(val) {
				this.updateConfig(val);
				if (this.chart) this.chart.setOption(this.config);
			},
			deep: true,
			immediate: true,
		},
	},
	methods: {
		updateConfig(item) {
			const {
				lineName, // 产线
				equipmentName, // 设备
				downTime, // 故障时长(h)
				stopTime, // 停机时长(h)
				workTime, // 工作时长(h)
				peEfficiency, // 速度开动率
				timeEfficiency, // 时间开动率
				//===============//
				sectionName,
				workRate,
				stopRate,
				downRate,
				realProcSpeed,
				designProcSpeed,
				oee,
				teep,
				downCount,
				mtbf,
				mttr,
			} = item;
			this.config.title.text = lineName;
			this.config.title.subtext = equipmentName;
			this.config.series[0].data = [
				{ name: '工作时长', value: workTime },
				{ name: '停机时长', value: stopTime },
				{ name: '故障时长', value: downTime },
			];
			this.config.series[1].data = [
				{ name: '速度开动率', value: peEfficiency },
				{ name: '', value: 100 },
				// { name: '速度开动率', value: peEfficiency },
				// { name: '', value: Math.ceil(peEfficiency) - peEfficiency },
			];
			//
			this.textData = {
				workTime: +workTime.toFixed(2),
				stopTime: +stopTime.toFixed(2),
				downTime: +downTime.toFixed(2),
				peEfficiency: +peEfficiency.toFixed(2),
			};
		},
	},
};
</script>

<style scoped lang="scss">
.chart-grid-item {
	padding: 12px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pie-chart {
	height: 1px;
	width: 100%;
	flex: 1;
	padding: 12px;
	position: relative;
}

.data-view {
	display: flex;
	justify-content: center;
}

.data-view__item {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	user-select: none;
	padding: 0 6px;
}

.data-view__item:not(:last-child) {
	border-right: 1px solid #f1f1f1;
}

.data-view__item__value {
	font-size: 16px;
	line-height: 24px;
}

.data-view__item__title {
	font-size: 8px;
	line-height: 14px;
}

.blue {
	color: #3da8fd;
}

.green {
	color: #8ef0ab;
}

.purple {
	color: #6b5cfd;
}

.yellow {
	color: #ffc72a;
}
</style>