diff --git a/src/components/TeamChartMonth.vue b/src/components/TeamChartMonth.vue index 2293743..7a98340 100644 --- a/src/components/TeamChartMonth.vue +++ b/src/components/TeamChartMonth.vue @@ -51,7 +51,7 @@ store.$subscribe((mutation, state) => { function loadData(monthlyTarget) { if ( monthlyTarget == undefined || - monthlyTarget?.length == 0 || + // monthlyTarget?.length == 0 || !monthlyTarget[0] ) { return null; diff --git a/src/components/TeamChartMonthOptions.js b/src/components/TeamChartMonthOptions.js index 70e3b98..036d040 100644 --- a/src/components/TeamChartMonthOptions.js +++ b/src/components/TeamChartMonthOptions.js @@ -3,7 +3,7 @@ export const options = { top: 0, left: 0, right: 0, - bottom: 0 + bottom: 0, }, title: [ { @@ -13,7 +13,7 @@ export const options = { top: "70%", textStyle: { fontSize: 16, - color: '#fffa' + color: "#fffa", }, }, { @@ -23,7 +23,7 @@ export const options = { top: "85%", textStyle: { fontSize: 16, - color: '#fffa' + color: "#fffa", }, }, { @@ -33,7 +33,7 @@ export const options = { top: "70%", textStyle: { fontSize: 16, - color: '#fffa' + color: "#fffa", }, }, { @@ -43,7 +43,7 @@ export const options = { top: "85%", textStyle: { fontSize: 16, - color: '#fffa' + color: "#fffa", }, }, ], @@ -149,7 +149,7 @@ export const options = { show: false, valueAnimation: true, offsetCenter: ["0%", "10%"], - formatter: '99.23%' + formatter: "99.23%", }, }, { @@ -168,17 +168,24 @@ export default function setup(echartInstance, data) { new_options.title[1].text = "目标产量：" + data.targetProduction + " 片"; new_options.title[2].text = "当前成品率：" + data.nowYield + "%"; new_options.title[3].text = "目标成品率：" + data.targetYield + "%"; - new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1) - new_options.series[1].data[0].value = data.targetYield - new_options.series[1].data[1].value = data.nowYield - new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%', + new_options.series[0].data[0].value = + data.nowProduction != null && + data.targetProduction != null && + data.targetProduction != 0 + ? ((data.nowProduction / data.targetProduction) * 100).toFixed(1) + : 0; + new_options.series[1].data[0].value = data.targetYield; + new_options.series[1].data[1].value = data.nowYield; + new_options.series[1].detail.formatter = + data.nowYield != null && data.targetYield != null && data.targetYield != 0 + ? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%" + : "0%"; echartInstance.setOption(new_options); } - // { // "targetProduction": 99, // "nowProduction": 58, // "targetYield": 12, // "nowYield": 9 -// } \ No newline at end of file +// } diff --git a/src/components/datapage/LineToday.vue b/src/components/datapage/LineToday.vue index 8ca3c57..effb850 100644 --- a/src/components/datapage/LineToday.vue +++ b/src/components/datapage/LineToday.vue @@ -5,68 +5,100 @@ import Container from "../Base/Container.vue"; import { useWsStore } from "../../store"; import setupFn from "./LineTodayOptions"; +const show = ref(false); +const chartContainer = ref(null); +const chartInstance = ref(null); 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 // 黄色：FFB524 // 红色：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(() => { - chartChart.value.classList.add("h-full"); - // nextTick(() => { - // setupChart(); - // }) + chartContainer.value.classList.add("h-full"); + const d = loadData(store.data2.dailyTarget); + // 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.dailyTarget); + // 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(dailyTarget) { + if ( + dailyTarget == undefined || + // dailyTarget?.length == 0 || + !dailyTarget[0] + ) { + return null; + } + + return { + targetProduction: dailyTarget[0].targetProduction, + nowProduction: dailyTarget[0].nowProduction, + targetYield: dailyTarget[0].targetYield, + nowYield: dailyTarget[0].nowYield, + }; +}