update chart
This commit is contained in:
parent
f66b3a8a7a
commit
43a6f59afe
@ -19,6 +19,10 @@ const props = defineProps({
|
||||
};
|
||||
},
|
||||
},
|
||||
displayPlaceholder: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
@ -54,7 +58,10 @@ onMounted(() => {
|
||||
<div class="chart rate-chart">
|
||||
<div ref="rateChartRef" class="chart-container"></div>
|
||||
|
||||
<div :class="['fake-chart-title', isOnlyChild ? 'is-only-child' : '']">
|
||||
<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>
|
||||
@ -62,11 +69,11 @@ onMounted(() => {
|
||||
<div class="text-intro">
|
||||
<div class="text-intro__item">
|
||||
<span class="legend-box green"></span>
|
||||
<span>当前成品率: {{ props.rawData.nowYield }}%</span>
|
||||
<span>当前成品率: {{ props.rawData?.nowYield ?? 0 }}%</span>
|
||||
</div>
|
||||
<div class="text-intro__item">
|
||||
<span class="legend-box blue"></span>
|
||||
<span>目标成品率: {{ props.rawData.targetYield }}%</span>
|
||||
<span>目标成品率: {{ props.rawData?.targetYield ?? 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -79,6 +86,7 @@ onMounted(() => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-placeholder,
|
||||
.chart-container {
|
||||
margin: auto;
|
||||
width: 320px;
|
||||
|
@ -15,12 +15,17 @@ const props = defineProps({
|
||||
};
|
||||
},
|
||||
},
|
||||
displayPlaceholder: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const chart = ref(null);
|
||||
const yieldChartRef = ref(null);
|
||||
|
||||
function reInitChart() {
|
||||
if (props.displayPlaceholder) return;
|
||||
if (chart.value) chart.value.dispose();
|
||||
const _chart = echarts.init(yieldChartRef.value);
|
||||
_chart.setOption(getOptions(props.rawData));
|
||||
@ -34,14 +39,15 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="chart yield-chart">
|
||||
<div ref="yieldChartRef" class="chart-container"></div>
|
||||
<div v-if="displayPlaceholder" class="chart-placeholder"></div>
|
||||
<div v-else ref="yieldChartRef" class="chart-container"></div>
|
||||
<div class="text-intro">
|
||||
<div class="text-intro__item">
|
||||
<span class="legend-box green"></span>
|
||||
<span>当前产量: {{ rawData.nowProduction }}片</span>
|
||||
<span>当前产量: {{ rawData?.nowProduction ?? 0 }}片</span>
|
||||
</div>
|
||||
<div class="text-intro__item">
|
||||
<span>目标产量: {{ rawData.targetProduction }}片</span>
|
||||
<div v-if="!displayPlaceholder" class="text-intro__item">
|
||||
<span>目标产量: {{ rawData?.targetProduction ?? 0 }}片</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -54,6 +60,7 @@ onMounted(() => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-placeholder,
|
||||
.chart-container {
|
||||
margin: auto;
|
||||
width: 320px;
|
||||
|
@ -128,10 +128,11 @@ const targetSerie = {
|
||||
};
|
||||
|
||||
export default (data) => {
|
||||
dataSerie.data[0].value = data.nowYield;
|
||||
dataSerie.data[1].value = 100 - data.nowYield;
|
||||
targetSerie.data[0].value = data.targetYield;
|
||||
targetSerie.data[1].value = 100 - data.targetYield;
|
||||
title.subtext = data?.nowYield == null ? "" : "当前成品率\u2002";
|
||||
dataSerie.data[0].value = data?.nowYield ?? 0;
|
||||
dataSerie.data[1].value = 100 - (data?.nowYield ?? 0);
|
||||
targetSerie.data[0].value = data?.targetYield ?? 0;
|
||||
targetSerie.data[1].value = 100 - (data?.targetYield ?? 0);
|
||||
return {
|
||||
tooltip,
|
||||
title,
|
||||
|
@ -25,15 +25,9 @@ store.$subscribe((mutation, state) => {
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
hourData.value = (state.data2?.lineHourList ?? [
|
||||
// { lineName: '001', hour: '00:00', num: 10 },
|
||||
// { lineName: '002', hour: '00:20', num: 20 },
|
||||
// { lineName: '003', hour: '00:30', num: 30 },
|
||||
// { lineName: '004', hour: '00:40', num: 14 },
|
||||
// { lineName: '005', hour: '00:50', num: 50 },
|
||||
]).map((item, index) => ({
|
||||
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
|
||||
id: `${item.lineName}_${index}`,
|
||||
hour: item.hour || '__',
|
||||
hour: item.hour || "__",
|
||||
data: item.num || 0,
|
||||
}));
|
||||
setupChart();
|
||||
@ -46,7 +40,7 @@ function setupChart() {
|
||||
chartSetup(
|
||||
chart.value,
|
||||
hourData.value.map((item) => item.hour),
|
||||
hourData.value.map((item) => item.num)
|
||||
hourData.value.map((item) => item.data)
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -102,13 +102,16 @@ function loadData(dailyTarget) {
|
||||
></div>
|
||||
<p v-show="!show" class="empty-data-hint">暂无数据</p> -->
|
||||
<div class="container-body__h-full">
|
||||
<yield-chart v-if="displayProductionChart" :raw-data="websocketData" />
|
||||
<yield-chart
|
||||
:display-placeholder="!displayProductionChart"
|
||||
:raw-data="websocketData"
|
||||
/>
|
||||
<rate-chart
|
||||
v-if="displayRateChart"
|
||||
:display-placeholder="!displayRateChart"
|
||||
:raw-data="websocketData"
|
||||
:isOnlyChild="!displayProductionChart"
|
||||
/>
|
||||
<p
|
||||
<!-- <p
|
||||
v-if="!displayProductionChart && !displayRateChart"
|
||||
style="
|
||||
height: 100%;
|
||||
@ -121,7 +124,7 @@ function loadData(dailyTarget) {
|
||||
"
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
</p> -->
|
||||
</div>
|
||||
</Container>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user