update
This commit is contained in:
parent
476b936660
commit
f66b3a8a7a
@ -1,7 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { computed, onMounted, ref, watch } from "vue";
|
import { computed, onMounted, ref, watch } from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import option from "./rateOption";
|
import getOptions from "./rateOption";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
isOnlyChild: {
|
isOnlyChild: {
|
||||||
@ -41,7 +41,7 @@ const rateChartRef = ref(null);
|
|||||||
function reInitChart() {
|
function reInitChart() {
|
||||||
if (chart.value) chart.value.dispose();
|
if (chart.value) chart.value.dispose();
|
||||||
const _chart = echarts.init(rateChartRef.value);
|
const _chart = echarts.init(rateChartRef.value);
|
||||||
_chart.setOption(option);
|
_chart.setOption(getOptions(props.rawData));
|
||||||
chart.value = _chart;
|
chart.value = _chart;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,11 +62,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>当前成品率: 32.73%</span>
|
<span>当前成品率: {{ props.rawData.nowYield }}%</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>目标成品率: 90.72%</span>
|
<span>目标成品率: {{ props.rawData.targetYield }}%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -129,7 +129,9 @@ const targetSerie = {
|
|||||||
|
|
||||||
export default (data) => {
|
export default (data) => {
|
||||||
dataSerie.data[0].value = data.nowYield;
|
dataSerie.data[0].value = data.nowYield;
|
||||||
dataSerie.data[1].value = data.targetYield - data.nowYield;
|
dataSerie.data[1].value = 100 - data.nowYield;
|
||||||
|
targetSerie.data[0].value = data.targetYield;
|
||||||
|
targetSerie.data[1].value = 100 - data.targetYield;
|
||||||
return {
|
return {
|
||||||
tooltip,
|
tooltip,
|
||||||
title,
|
title,
|
||||||
|
@ -1,43 +1,47 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, nextTick } from "vue";
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
import * as echarts from "echarts";
|
|
||||||
import Container from "../Base/Container.vue";
|
import Container from "../Base/Container.vue";
|
||||||
import { useWsStore } from "../../store";
|
import { useWsStore } from "../../store";
|
||||||
import setupFn from "./LineMonthOptions";
|
import YieldChart from "../Chart/YieldChart.vue";
|
||||||
|
import RateChart from "../Chart/RateChart.vue";
|
||||||
|
|
||||||
const show = ref(false);
|
const displayProductionChart = ref(false);
|
||||||
const chartContainer = ref(null);
|
const displayRateChart = ref(false);
|
||||||
const chartInstance = ref(null);
|
const websocketData = ref(null);
|
||||||
|
const refreshToken = ref(1);
|
||||||
const store = useWsStore();
|
const store = useWsStore();
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
chartContainer.value.classList.add("h-full");
|
// websocketData.value = loadData([
|
||||||
const d = loadData(store.data2.monthlyTarget);
|
|
||||||
// const d = loadData([
|
|
||||||
// {
|
// {
|
||||||
// targetProduction: 100,
|
// targetProduction: 0,
|
||||||
// nowProduction: 66,
|
// nowProduction: 10,
|
||||||
// targetYield: 13,
|
// targetYield: 10.34,
|
||||||
// nowYield: 3,
|
// nowYield: 3.11,
|
||||||
// },
|
// },
|
||||||
// ]);
|
// ]);
|
||||||
if (!d) {
|
websocketData.value = loadData(store.data2.monthlyTarget);
|
||||||
show.value = false;
|
if (!websocketData.value) {
|
||||||
if (chartInstance.value) {
|
displayProductionChart.value = false;
|
||||||
chartInstance.value.dispose();
|
displayRateChart.value = false;
|
||||||
chartInstance.value = null;
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
if (!chartInstance.value)
|
/** 阻止 targetProduction == 0 */
|
||||||
chartInstance.value = echarts.init(chartContainer.value);
|
if (!websocketData.value.targetProduction) {
|
||||||
setupFn(chartInstance.value, d);
|
displayProductionChart.value = false;
|
||||||
show.value = true;
|
} else {
|
||||||
|
displayProductionChart.value = true;
|
||||||
|
}
|
||||||
|
/** 阻止 targetYield == 0 */
|
||||||
|
if (!websocketData.value.targetYield) {
|
||||||
|
displayRateChart.value = false;
|
||||||
|
} else {
|
||||||
|
displayRateChart.value = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 订阅
|
// 订阅
|
||||||
store.$subscribe((mutation, state) => {
|
store.$subscribe((mutation, state) => {
|
||||||
const d = loadData(state.data2.monthlyTarget);
|
|
||||||
// const d = loadData([
|
// const d = loadData([
|
||||||
// {
|
// {
|
||||||
// targetProduction: 100,
|
// targetProduction: 100,
|
||||||
@ -46,30 +50,35 @@ store.$subscribe((mutation, state) => {
|
|||||||
// nowYield: 3,
|
// nowYield: 3,
|
||||||
// },
|
// },
|
||||||
// ]);
|
// ]);
|
||||||
if (!d) {
|
websocketData.value = loadData(state.data2.monthlyTarget);
|
||||||
show.value = false;
|
if (!websocketData.value) {
|
||||||
if (chartInstance.value) {
|
displayProductionChart.value = false;
|
||||||
chartInstance.value.dispose();
|
displayRateChart.value = false;
|
||||||
chartInstance.value = null;
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
if (!chartInstance.value)
|
/** 阻止 targetProduction == 0 */
|
||||||
chartInstance.value = echarts.init(chartContainer.value);
|
if (!websocketData.value.targetProduction) {
|
||||||
setupFn(chartInstance.value, d);
|
displayProductionChart.value = false;
|
||||||
show.value = true;
|
} 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
|
// utils
|
||||||
function loadData(monthlyTarget) {
|
function loadData(monthlyTarget) {
|
||||||
if (
|
if (monthlyTarget == undefined || !monthlyTarget[0]) {
|
||||||
monthlyTarget == undefined ||
|
|
||||||
// monthlyTarget?.length == 0 ||
|
|
||||||
!monthlyTarget[0]
|
|
||||||
) {
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
targetProduction: monthlyTarget[0].targetProduction,
|
targetProduction: monthlyTarget[0].targetProduction,
|
||||||
nowProduction: monthlyTarget[0].nowProduction,
|
nowProduction: monthlyTarget[0].nowProduction,
|
||||||
@ -81,12 +90,39 @@ function loadData(monthlyTarget) {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container class="chart" title="本月生产线情况" icon="cube">
|
<Container class="chart" title="本月生产线情况" icon="cube">
|
||||||
<div
|
<!-- <div
|
||||||
ref="chartContainer"
|
ref="chartContainer"
|
||||||
class="chart-chart"
|
class="chart-chart"
|
||||||
:style="{ opacity: show ? 1 : 0 }"
|
:style="{ opacity: show ? 1 : 0 }"
|
||||||
></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">
|
||||||
|
<yield-chart
|
||||||
|
v-if="displayProductionChart"
|
||||||
|
:key="refreshToken + '_yield_chart'"
|
||||||
|
:raw-data="websocketData"
|
||||||
|
/>
|
||||||
|
<rate-chart
|
||||||
|
v-if="displayRateChart"
|
||||||
|
:key="refreshToken + '_rate_chart'"
|
||||||
|
: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>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -99,4 +135,10 @@ function loadData(monthlyTarget) {
|
|||||||
.chart-chart {
|
.chart-chart {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-body__h-full {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -8,19 +8,19 @@ import RateChart from "../Chart/RateChart.vue";
|
|||||||
const displayProductionChart = ref(false);
|
const displayProductionChart = ref(false);
|
||||||
const displayRateChart = ref(false);
|
const displayRateChart = ref(false);
|
||||||
const websocketData = ref(null);
|
const websocketData = ref(null);
|
||||||
|
const refreshToken = ref(1);
|
||||||
const store = useWsStore();
|
const store = useWsStore();
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
websocketData.value = loadData([
|
// websocketData.value = loadData([
|
||||||
{
|
// {
|
||||||
targetProduction: 120,
|
// targetProduction: 120,
|
||||||
nowProduction: 10,
|
// nowProduction: 10,
|
||||||
targetYield: 13,
|
// targetYield: 10.34,
|
||||||
nowYield: 3,
|
// nowYield: 3.11,
|
||||||
},
|
// },
|
||||||
]);
|
// ]);
|
||||||
// const d = loadData(state.data2.dailyTarget);
|
websocketData.value = loadData(store.data2.dailyTarget);
|
||||||
// console.log("websocketData==>", websocketData);
|
|
||||||
if (!websocketData.value) {
|
if (!websocketData.value) {
|
||||||
displayProductionChart.value = false;
|
displayProductionChart.value = false;
|
||||||
displayRateChart.value = false;
|
displayRateChart.value = false;
|
||||||
@ -41,28 +41,38 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 订阅
|
// 订阅
|
||||||
// store.$subscribe((mutation, state) => {
|
store.$subscribe((mutation, state) => {
|
||||||
// // const d = loadData([
|
// const d = loadData([
|
||||||
// // {
|
// {
|
||||||
// // targetProduction: 100,
|
// targetProduction: 100,
|
||||||
// // nowProduction: 66,
|
// nowProduction: 66,
|
||||||
// // targetYield: 13,
|
// targetYield: 13,
|
||||||
// // nowYield: 3,
|
// nowYield: 3,
|
||||||
// // },
|
// },
|
||||||
// // ]);
|
// ]);
|
||||||
// const d = loadData(state.data2.dailyTarget);
|
websocketData.value = loadData(state.data2.dailyTarget);
|
||||||
// if (!d) {
|
if (!websocketData.value) {
|
||||||
// displayProductionChart.value = false;
|
displayProductionChart.value = false;
|
||||||
// displayRateChart.value = false;
|
displayRateChart.value = false;
|
||||||
// } else {
|
} else {
|
||||||
// displayRateChart.value = false;
|
/** 阻止 targetProduction == 0 */
|
||||||
// if (!d.targetProduction) {
|
if (!websocketData.value.targetProduction) {
|
||||||
// displayProductionChart.value = false;
|
displayProductionChart.value = false;
|
||||||
// } else {
|
} else {
|
||||||
// displayProductionChart.value = true;
|
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
|
// utils
|
||||||
function loadData(dailyTarget) {
|
function loadData(dailyTarget) {
|
||||||
@ -110,7 +120,7 @@ function loadData(dailyTarget) {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
- 暂无数据 -
|
暂无数据
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
Loading…
Reference in New Issue
Block a user