148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<script setup>
|
|
import { ref, onMounted, nextTick } from "vue";
|
|
import Container from "../Base/Container.vue";
|
|
import { useWsStore } from "../../store";
|
|
import YieldChart from "../Chart/YieldChart.vue";
|
|
import RateChart from "../Chart/RateChart.vue";
|
|
|
|
const displayProductionChart = ref(false);
|
|
const displayRateChart = ref(false);
|
|
const websocketData = ref(null);
|
|
const refreshToken = ref(1);
|
|
const store = useWsStore();
|
|
|
|
onMounted(() => {
|
|
// websocketData.value = loadData([
|
|
// {
|
|
// targetProduction: 120,
|
|
// nowProduction: 10,
|
|
// targetYield: 10.34,
|
|
// nowYield: 3.11,
|
|
// },
|
|
// ]);
|
|
websocketData.value = loadData(store.data2.dailyTarget);
|
|
if (!websocketData.value) {
|
|
displayProductionChart.value = false;
|
|
displayRateChart.value = false;
|
|
} else {
|
|
/** 阻止 targetProduction == 0 */
|
|
if (!websocketData.value.targetProduction) {
|
|
displayProductionChart.value = false;
|
|
} else {
|
|
displayProductionChart.value = true;
|
|
}
|
|
/** 阻止 targetYield == 0 */
|
|
if (!websocketData.value.targetYield) {
|
|
displayRateChart.value = false;
|
|
} else {
|
|
displayRateChart.value = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
// 订阅
|
|
store.$subscribe((mutation, state) => {
|
|
// const d = loadData([
|
|
// {
|
|
// targetProduction: 100,
|
|
// nowProduction: 66,
|
|
// targetYield: 13,
|
|
// nowYield: 3,
|
|
// },
|
|
// ]);
|
|
websocketData.value = loadData(state.data2.dailyTarget);
|
|
if (!websocketData.value) {
|
|
displayProductionChart.value = false;
|
|
displayRateChart.value = false;
|
|
} else {
|
|
/** 阻止 targetProduction == 0 */
|
|
if (!websocketData.value.targetProduction) {
|
|
displayProductionChart.value = false;
|
|
} else {
|
|
if (refreshToken.value > 100000) refreshToken.value = 0;
|
|
refreshToken.value += 1;
|
|
displayProductionChart.value = true;
|
|
}
|
|
/** 阻止 targetYield == 0 */
|
|
if (!websocketData.value.targetYield) {
|
|
displayRateChart.value = false;
|
|
} else {
|
|
if (refreshToken.value > 100000) refreshToken.value = 0;
|
|
refreshToken.value += 1;
|
|
displayRateChart.value = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
// utils
|
|
function loadData(dailyTarget) {
|
|
if (dailyTarget == undefined || !dailyTarget[0]) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
// 目标产量
|
|
targetProduction: dailyTarget[0].targetProduction,
|
|
// 当前产量
|
|
nowProduction: dailyTarget[0].nowProduction,
|
|
// 目标成品率
|
|
targetYield: dailyTarget[0].targetYield,
|
|
// 当前成品率
|
|
nowYield: dailyTarget[0].nowYield,
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Container class="chart" title="本日生产线情况" icon="cube">
|
|
<!-- <div
|
|
ref="chartContainer"
|
|
class="chart-chart"
|
|
:style="{ opacity: show ? 1 : 0 }"
|
|
></div>
|
|
<p v-show="!show" class="empty-data-hint">暂无数据</p> -->
|
|
<div class="container-body__h-full">
|
|
<yield-chart
|
|
:display-placeholder="!displayProductionChart"
|
|
:raw-data="websocketData"
|
|
/>
|
|
<rate-chart
|
|
:display-placeholder="!displayRateChart"
|
|
:raw-data="websocketData"
|
|
:isOnlyChild="!displayProductionChart"
|
|
/>
|
|
<!-- <p
|
|
v-if="!displayProductionChart && !displayRateChart"
|
|
style="
|
|
height: 100%;
|
|
line-height: 350px;
|
|
user-select: none;
|
|
flex: 1;
|
|
color: #fffc;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
"
|
|
>
|
|
暂无数据
|
|
</p> -->
|
|
</div>
|
|
</Container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
/* height: 300px; */
|
|
height: auto;
|
|
}
|
|
|
|
.chart-chart {
|
|
height: 100%;
|
|
}
|
|
|
|
.container-body__h-full {
|
|
height: 100%;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
</style>
|