161 lines
2.9 KiB
Vue
161 lines
2.9 KiB
Vue
<script setup>
|
|
import { computed, onMounted, ref, watch } from "vue";
|
|
import * as echarts from "echarts";
|
|
import getOptions from "./rateOption";
|
|
|
|
const props = defineProps({
|
|
isOnlyChild: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
rawData: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
targetProduction: 0,
|
|
nowProduction: 0,
|
|
targetYield: 0,
|
|
nowYield: 0,
|
|
};
|
|
},
|
|
},
|
|
displayPlaceholder: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
watch(
|
|
() => props.isOnlyChild,
|
|
(newVal) => {
|
|
reInitChart();
|
|
}
|
|
);
|
|
|
|
const rate = computed(() => {
|
|
if (!props.rawData.nowYield || props.rawData.nowYield == 0) return [0, 0];
|
|
// const _rate = ((props.rawData.nowYield / props.rawData.targetYield) * 100)
|
|
// .toFixed(2)
|
|
// .toString();
|
|
// return [parseInt(_rate), _rate.split(".")[1]];
|
|
return [
|
|
parseInt(props.rawData.nowYield),
|
|
(props.rawData.nowYield + "").split(".")[1],
|
|
];
|
|
});
|
|
|
|
const chart = ref(null);
|
|
const rateChartRef = ref(null);
|
|
|
|
function reInitChart() {
|
|
if (chart.value) chart.value.dispose();
|
|
const _chart = echarts.init(rateChartRef.value);
|
|
_chart.setOption(getOptions(props.rawData));
|
|
chart.value = _chart;
|
|
}
|
|
|
|
onMounted(() => {
|
|
reInitChart();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="chart rate-chart">
|
|
<div ref="rateChartRef" class="chart-container"></div>
|
|
|
|
<div
|
|
v-if="!displayPlaceholder"
|
|
:class="['fake-chart-title', isOnlyChild ? 'is-only-child' : '']"
|
|
>
|
|
<span class="integer-part">{{ rate[0] }}.</span>
|
|
<span class="decimal-part">{{ rate[1] }}%</span>
|
|
</div>
|
|
|
|
<div class="text-intro">
|
|
<div class="text-intro__item">
|
|
<span class="legend-box green"></span>
|
|
<span>当前成品率: {{ props.rawData?.nowYield ?? 0 }}%</span>
|
|
</div>
|
|
<div class="text-intro__item">
|
|
<span class="legend-box blue"></span>
|
|
<span>目标成品率: {{ props.rawData?.targetYield ?? 0 }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rate-chart {
|
|
height: 240px;
|
|
flex-grow: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.chart-placeholder,
|
|
.chart-container {
|
|
margin: auto;
|
|
width: 320px;
|
|
height: 100%;
|
|
background: "#0f01";
|
|
position: relative;
|
|
}
|
|
|
|
.fake-chart-title {
|
|
user-select: none;
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 32%;
|
|
}
|
|
|
|
.fake-chart-title.is-only-child {
|
|
left: 42%;
|
|
}
|
|
|
|
.fake-chart-title > .integer-part {
|
|
font-size: 48px;
|
|
color: #fff;
|
|
}
|
|
|
|
.fake-chart-title > .decimal-part {
|
|
font-size: 32px;
|
|
color: #fff;
|
|
}
|
|
|
|
.text-intro {
|
|
position: absolute;
|
|
height: auto;
|
|
width: 240px;
|
|
bottom: 18px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
align-items: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.text-intro__item {
|
|
font-size: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.legend-box {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.green {
|
|
background: #4cf0e8;
|
|
}
|
|
|
|
.blue {
|
|
background: #1065ff;
|
|
}
|
|
</style>
|