mt-fe-group/chenzhou
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
Melete
2024-03-18 19:58:42 +08:00
parent 476b936660
commit f66b3a8a7a
4 changed files with 133 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Chart/RateChart.vue
View File

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

4
src/components/Chart/rateOption.js
View File

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

124
src/components/datapage/LineMonth.vue
View File

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

76
src/components/datapage/LineToday.vue
View File

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