Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou

This commit is contained in:
gtz 2024-03-19 16:47:46 +08:00
commit e44b2b5f5b
5 changed files with 37 additions and 24 deletions

View File

@ -19,6 +19,10 @@ const props = defineProps({
}; };
}, },
}, },
displayPlaceholder: {
type: Boolean,
default: false,
},
}); });
watch( watch(
@ -54,7 +58,10 @@ onMounted(() => {
<div class="chart rate-chart"> <div class="chart rate-chart">
<div ref="rateChartRef" class="chart-container"></div> <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="integer-part">{{ rate[0] }}.</span>
<span class="decimal-part">{{ rate[1] }}%</span> <span class="decimal-part">{{ rate[1] }}%</span>
</div> </div>
@ -62,11 +69,11 @@ onMounted(() => {
<div class="text-intro"> <div class="text-intro">
<div class="text-intro__item"> <div class="text-intro__item">
<span class="legend-box green"></span> <span class="legend-box green"></span>
<span>当前成品率: {{ props.rawData.nowYield }}%</span> <span>当前成品率: {{ props.rawData?.nowYield ?? 0 }}%</span>
</div> </div>
<div class="text-intro__item"> <div class="text-intro__item">
<span class="legend-box blue"></span> <span class="legend-box blue"></span>
<span>目标成品率: {{ props.rawData.targetYield }}%</span> <span>目标成品率: {{ props.rawData?.targetYield ?? 0 }}%</span>
</div> </div>
</div> </div>
</div> </div>
@ -79,6 +86,7 @@ onMounted(() => {
position: relative; position: relative;
} }
.chart-placeholder,
.chart-container { .chart-container {
margin: auto; margin: auto;
width: 320px; width: 320px;

View File

@ -15,12 +15,17 @@ const props = defineProps({
}; };
}, },
}, },
displayPlaceholder: {
type: Boolean,
default: false,
},
}); });
const chart = ref(null); const chart = ref(null);
const yieldChartRef = ref(null); const yieldChartRef = ref(null);
function reInitChart() { function reInitChart() {
if (props.displayPlaceholder) return;
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
const _chart = echarts.init(yieldChartRef.value); const _chart = echarts.init(yieldChartRef.value);
_chart.setOption(getOptions(props.rawData)); _chart.setOption(getOptions(props.rawData));
@ -34,14 +39,15 @@ onMounted(() => {
<template> <template>
<div class="chart yield-chart"> <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">
<div class="text-intro__item"> <div class="text-intro__item">
<span class="legend-box green"></span> <span class="legend-box green"></span>
<span>当前产量: {{ rawData.nowProduction }}</span> <span>当前产量: {{ rawData?.nowProduction ?? 0 }}</span>
</div> </div>
<div class="text-intro__item"> <div v-if="!displayPlaceholder" class="text-intro__item">
<span>目标产量: {{ rawData.targetProduction }}</span> <span>目标产量: {{ rawData?.targetProduction ?? 0 }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -54,6 +60,7 @@ onMounted(() => {
position: relative; position: relative;
} }
.chart-placeholder,
.chart-container { .chart-container {
margin: auto; margin: auto;
width: 320px; width: 320px;

View File

@ -128,10 +128,11 @@ const targetSerie = {
}; };
export default (data) => { export default (data) => {
dataSerie.data[0].value = data.nowYield; title.subtext = data?.nowYield == null ? "" : "当前成品率\u2002";
dataSerie.data[1].value = 100 - data.nowYield; dataSerie.data[0].value = data?.nowYield ?? 0;
targetSerie.data[0].value = data.targetYield; dataSerie.data[1].value = 100 - (data?.nowYield ?? 0);
targetSerie.data[1].value = 100 - data.targetYield; targetSerie.data[0].value = data?.targetYield ?? 0;
targetSerie.data[1].value = 100 - (data?.targetYield ?? 0);
return { return {
tooltip, tooltip,
title, title,

View File

@ -25,15 +25,9 @@ store.$subscribe((mutation, state) => {
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
return; return;
} }
hourData.value = (state.data2?.lineHourList ?? [ hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
// { 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) => ({
id: `${item.lineName}_${index}`, id: `${item.lineName}_${index}`,
hour: item.hour || '__', hour: item.hour || "__",
data: item.num || 0, data: item.num || 0,
})); }));
setupChart(); setupChart();
@ -46,7 +40,7 @@ function setupChart() {
chartSetup( chartSetup(
chart.value, chart.value,
hourData.value.map((item) => item.hour), 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> ></div>
<p v-show="!show" class="empty-data-hint">暂无数据</p> --> <p v-show="!show" class="empty-data-hint">暂无数据</p> -->
<div class="container-body__h-full"> <div class="container-body__h-full">
<yield-chart v-if="displayProductionChart" :raw-data="websocketData" /> <yield-chart
:display-placeholder="!displayProductionChart"
:raw-data="websocketData"
/>
<rate-chart <rate-chart
v-if="displayRateChart" :display-placeholder="!displayRateChart"
:raw-data="websocketData" :raw-data="websocketData"
:isOnlyChild="!displayProductionChart" :isOnlyChild="!displayProductionChart"
/> />
<p <!-- <p
v-if="!displayProductionChart && !displayRateChart" v-if="!displayProductionChart && !displayRateChart"
style=" style="
height: 100%; height: 100%;
@ -121,7 +124,7 @@ function loadData(dailyTarget) {
" "
> >
暂无数据 暂无数据
</p> </p> -->
</div> </div>
</Container> </Container>
</template> </template>