Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou
This commit is contained in:
commit
e44b2b5f5b
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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,
|
||||||
|
@ -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)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user