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

282 lines
5.9 KiB
Vue
Raw Normal View History

2023-09-06 15:09:48 +08:00
<!--
filename: pieChart.vue
author: liubin
date: 2023-09-06 15:02:49
description: 饼图
-->
<template>
2023-10-10 15:30:37 +08:00
<div class="chart-grid-item" style="overflow: inherit">
2023-09-21 10:37:47 +08:00
<div
class="pie-chart"
ref="pieChart"
2023-10-10 15:30:37 +08:00
style="overflow: inherit;"
2023-09-21 10:37:47 +08:00
: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>
2023-09-06 15:09:48 +08:00
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'pieChart',
components: {},
props: ['value'],
data() {
return {
chart: null,
2023-09-21 10:37:47 +08:00
textData: {
workTime: '',
downTime: '',
stopTime: '',
peEfficiency: '',
},
2023-09-06 15:09:48 +08:00
config: {
2023-09-21 10:37:47 +08:00
title: {
text: '产线1', //<=========
top: '35%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 18,
},
subtext: '设备', //<=========
subtextStyle: {
fontSize: 14,
},
},
color: ['#3da8fd', '#8ef0ab', '#6b5cfd', '#FFC72A', 'transparent'],
2023-09-06 15:09:48 +08:00
grid: {
top: 0,
left: 0,
right: 0,
bottom: 0,
},
tooltip: {
trigger: 'item',
},
legend: {
2023-09-21 10:37:47 +08:00
show: false,
2023-09-06 15:09:48 +08:00
top: '0%',
left: 'center',
textStyle: {
fontSize: 10,
},
itemWidth: 10,
itemHeight: 10,
},
series: [
2023-09-21 10:37:47 +08:00
// 嵌套环形图
2023-09-06 15:09:48 +08:00
{
2023-09-21 10:37:47 +08:00
// 外环
name: '',
2023-09-06 15:09:48 +08:00
type: 'pie',
2023-09-21 10:37:47 +08:00
radius: ['75%', '90%'],
2023-10-10 15:30:37 +08:00
center: ['50%', '48%'],
2023-09-06 15:09:48 +08:00
label: {
show: false,
},
2023-09-21 10:37:47 +08:00
data: [
//<=========
{ name: '工作时长', value: 1048 },
{ name: '停机时长', value: 735 },
{ name: '故障时长', value: 580 },
],
2023-09-06 15:09:48 +08:00
},
2023-09-21 10:37:47 +08:00
{
// 内环
name: '',
type: 'pie',
2023-10-10 15:30:37 +08:00
center: ['50%', '48%'],
2023-09-21 10:37:47 +08:00
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' },
// // ],
// },
2023-09-06 15:09:48 +08:00
],
},
};
},
mounted() {
2023-09-21 10:37:47 +08:00
console.log('value', this.value);
2023-09-06 15:09:48 +08:00
if (!this.chart) {
2023-09-21 10:37:47 +08:00
this.chart = echarts.init(this.$refs.pieChart);
2023-09-06 15:09:48 +08:00
this.$nextTick(() => {
this.chart.setOption(this.config);
});
}
},
beforeDestroy() {
if (this.chart) this.chart.dispose();
},
2023-09-21 10:37:47 +08:00
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 },
2023-11-27 14:40:11 +08:00
{ name: '', value: 100 },
// { name: '速度开动率', value: peEfficiency },
// { name: '', value: Math.ceil(peEfficiency) - peEfficiency },
2023-09-21 10:37:47 +08:00
];
//
this.textData = {
workTime: +workTime.toFixed(2),
stopTime: +stopTime.toFixed(2),
downTime: +downTime.toFixed(2),
peEfficiency: +peEfficiency.toFixed(2),
};
},
},
2023-09-06 15:09:48 +08:00
};
</script>
<style scoped lang="scss">
2023-09-21 10:37:47 +08:00
.chart-grid-item {
padding: 12px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
2023-09-06 15:09:48 +08:00
.pie-chart {
2023-09-21 10:37:47 +08:00
height: 1px;
width: 100%;
flex: 1;
2023-09-06 15:09:48 +08:00
padding: 12px;
position: relative;
}
2023-09-21 10:37:47 +08:00
.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 {
2023-09-06 15:09:48 +08:00
font-size: 16px;
2023-09-21 10:37:47 +08:00
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;
2023-09-06 15:09:48 +08:00
}
</style>