update chart

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-03-19 16:43:08 +08:00
parent f66b3a8a7a
commit 43a6f59afe
5 changed files with 37 additions and 24 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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,

View File

@ -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)
);
});

View File

@ -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>