done 本月生产线情况

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-31 11:04:52 +08:00
parent 7eab7ddebb
commit 62d3566f29
3 changed files with 80 additions and 48 deletions

View File

@ -5,68 +5,100 @@ import Container from "../Base/Container.vue";
import { useWsStore } from "../../store"; import { useWsStore } from "../../store";
import setupFn from "./LineMonthOptions"; import setupFn from "./LineMonthOptions";
const show = ref(false);
const chartContainer = ref(null);
const chartInstance = ref(null);
const store = useWsStore(); const store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
const monthData = ref(null);
store.$subscribe((mutation, state) => {
console.log("[ChartMonth] ===> state: ", state.data2.monthlyTarget);
if (
state.data2.monthlyTarget == undefined ||
state.data2.monthlyTarget?.length == 0
) {
console.log("[ChartMonth] ===> 清除状态");
monthData.value = null;
if (chart.value) chart.value.dispose();
return;
}
if (!state.data2.monthlyTarget[0]) return;
const { targetProduction, nowProduction, targetYield, nowYield } =
state.data2.monthlyTarget[0];
monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
setupChart();
});
// 绿24FF5E // 绿24FF5E
// FFB524 // FFB524
// FF3737 // FF3737
function setupChart() {
if (chart.value) chart.value.dispose();
nextTick(() => {
console.log("[ChartMonth] ===> 初始化表格: ", monthData.value);
chart.value = echarts.init(chartChart.value);
setupFn(chart.value, monthData.value);
});
}
onMounted(() => { onMounted(() => {
chartChart.value.classList.add("h-full"); chartContainer.value.classList.add("h-full");
// nextTick(() => { const d = loadData(store.data2.monthlyTarget);
// setupChart(); // const d = loadData([
// }) // {
// targetProduction: 100,
// nowProduction: 66,
// targetYield: 13,
// nowYield: 3,
// },
// ]);
if (!d) {
show.value = false;
if (chartInstance.value) {
chartInstance.value.dispose();
chartInstance.value = null;
}
} else {
if (!chartInstance.value)
chartInstance.value = echarts.init(chartContainer.value);
setupFn(chartInstance.value, d);
show.value = true;
}
}); });
//
store.$subscribe((mutation, state) => {
const d = loadData(state.data2.monthlyTarget);
// const d = loadData([
// {
// targetProduction: 100,
// nowProduction: 66,
// targetYield: 13,
// nowYield: 3,
// },
// ]);
if (!d) {
show.value = false;
if (chartInstance.value) {
chartInstance.value.dispose();
chartInstance.value = null;
}
} else {
if (!chartInstance.value)
chartInstance.value = echarts.init(chartContainer.value);
setupFn(chartInstance.value, d);
show.value = true;
}
});
// utils
function loadData(monthlyTarget) {
if (
monthlyTarget == undefined ||
// monthlyTarget?.length == 0 ||
!monthlyTarget[0]
) {
return null;
}
return {
targetProduction: monthlyTarget[0].targetProduction,
nowProduction: monthlyTarget[0].nowProduction,
targetYield: monthlyTarget[0].targetYield,
nowYield: monthlyTarget[0].nowYield,
};
}
</script> </script>
<template> <template>
<Container class="chart" title="本月生产线情况" icon="cube"> <Container class="chart" title="本月生产线情况" icon="cube">
<div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div> <div
<p v-show="!monthData" class="empty-data-hint">暂无数据</p> ref="chartContainer"
class="chart-chart"
:style="{ opacity: show ? 1 : 0 }"
></div>
<p v-show="!show" class="empty-data-hint">暂无数据</p>
</Container> </Container>
</template> </template>
<style scoped> <style scoped>
.chart { .chart {
/* height: 300px; */ /* height: 300px; */
height: auto;
} }
.chart-inner {}
.chart-chart { .chart-chart {
height: 100%; height: 100%;
} }

View File

@ -56,11 +56,11 @@ export const options = {
radius: "55%", radius: "55%",
progress: { progress: {
show: true, show: true,
width: 12, width: 24,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 12, width: 24,
}, },
}, },
pointer: { pointer: {
@ -97,11 +97,11 @@ export const options = {
radius: "55%", radius: "55%",
progress: { progress: {
show: true, show: true,
width: 12, width: 24,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 12, width: 24,
}, },
}, },
pointer: { pointer: {

View File

@ -18,7 +18,7 @@ import LineMonth from '../components/datapage/LineMonth.vue';
<!-- 本日生产线情况 --> <!-- 本日生产线情况 -->
<LineToday /> <LineToday />
<!-- 本月生产线情况 --> <!-- 本月生产线情况 -->
<!-- <LineMonth /> --> <LineMonth />
<!-- 本日班组情况 --> <!-- 本日班组情况 -->
<!-- <TeamChartDay /> --> <!-- <TeamChartDay /> -->
<!-- 本月班组情况 --> <!-- 本月班组情况 -->