From 1c4ce804ffb8df9e6cefc28d37ab6b4b42df76a1 Mon Sep 17 00:00:00 2001 From: "DESKTOP-FUDKNA8\\znjsz" Date: Wed, 31 Jan 2024 11:22:01 +0800 Subject: [PATCH] =?UTF-8?q?done=20=E6=9C=AC=E6=9C=88=E7=8F=AD=E7=BB=84?= =?UTF-8?q?=E6=83=85=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/HeadTime.vue | 8 +- src/components/datapage/TeamChartMonth.vue | 77 +++---- .../datapage/TeamChartMonthOptions.js | 199 ++++-------------- src/pages/DataPage.vue | 2 +- 4 files changed, 84 insertions(+), 202 deletions(-) diff --git a/src/components/HeadTime.vue b/src/components/HeadTime.vue index e7813c0..9af505f 100644 --- a/src/components/HeadTime.vue +++ b/src/components/HeadTime.vue @@ -24,13 +24,7 @@ onMounted(() => { top: 50px; right: 420px; font-size: 24px; - color: #69B4FF; + color: #69b4ff; line-height: 1; } - -:fullscreen .datetime { - /* right: 620px; - top: 56px; */ - color: red; -} diff --git a/src/components/datapage/TeamChartMonth.vue b/src/components/datapage/TeamChartMonth.vue index be2de0e..46088ca 100644 --- a/src/components/datapage/TeamChartMonth.vue +++ b/src/components/datapage/TeamChartMonth.vue @@ -8,55 +8,62 @@ import setupFn from "./TeamChartMonthOptions"; const store = useWsStore(); const chartChart = ref(null); const chart = ref(null); +const showChartDom = ref(false); -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; +/** 无状态，处理数据 */ +function loadData(yieldArray) { + if (yieldArray == undefined || yieldArray?.length == 0) return null; + const result = []; + for (let i = 0; i < yieldArray.length; ++i) { + if (yieldArray[i].teamName == "A组") { + result[0] = parseInt(yieldArray[i].yield); + } else if (yieldArray[i].teamName == "B组") { + result[1] = parseInt(yieldArray[i].yield); + } else if (yieldArray[i].teamName == "C组") { + result[2] = parseInt(yieldArray[i].yield); + } } + return result; +} - 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() { +function setupChart(chart, dom, data) { if (chart.value) chart.value.dispose(); nextTick(() => { - console.log("[ChartMonth] ===> 初始化表格: ", monthData.value); - chart.value = echarts.init(chartChart.value); - setupFn(chart.value, monthData.value); + chart.value = echarts.init(dom); + setupFn(chart.value, data); }); } +/** 有状态，处理数据 */ +function __apply(yieldArray) { + const d = loadData(yieldArray); + if (!d) { + showChartDom.value = false; + if (chart.value) chart.value.dispose(); + return; + } + showChartDom.value = true; + setupChart(chart, chartChart.value, d); +} + +// 订阅 +store.$subscribe((mutation, state) => { + __apply(state.data2.lineTeamMonthYieldList); +}); + onMounted(() => { chartChart.value.classList.add("h-full"); - // nextTick(() => { - // setupChart(); - // }) }); @@ -65,8 +72,6 @@ onMounted(() => { /* height: 300px; */ } -.chart-inner {} - .chart-chart { height: 100%; } diff --git a/src/components/datapage/TeamChartMonthOptions.js b/src/components/datapage/TeamChartMonthOptions.js index 3aa26fc..18a4820 100644 --- a/src/components/datapage/TeamChartMonthOptions.js +++ b/src/components/datapage/TeamChartMonthOptions.js @@ -1,176 +1,59 @@ export const options = { + color: ['#a4c9d1', '#72340b', '#ffd601' ], grid: { - top: 0, - left: 0, - right: 0, - bottom: 0 + top: 8, + bottom: 20, + left: 42, + right: 28, + }, + legend: { + show: false, }, - title: [ - { - text: "当前产量：" + 100 + " 片", - left: "27%", - textAlign: "center", - top: "70%", - textStyle: { - fontSize: 16, - color: '#fffa' + xAxis: { + max: 100, + splitLine: { + lineStyle: { + color: "#fff2", }, }, - { - text: "目标产量：" + 100 + " 片", - left: "27%", - textAlign: "center", - top: "85%", - textStyle: { - fontSize: 16, - color: '#fffa' + axisLabel: { + fontSize: 16, + color: "#e5e5e5a3", + }, + }, + yAxis: { + type: "category", + data: ["A组", "B组", "C组"], + inverse: true, + max: 2, // only the largest 3 bars will be displayed + axisLabel: { + fontSize: 16, + color: "#e5e5e5a3", + }, + splitLine: { + lineStyle: { + color: "#e5e5e5", }, }, - { - text: "当前成品率：" + 22 + "%", - left: "72%", - textAlign: "center", - top: "70%", - textStyle: { - fontSize: 16, - color: '#fffa' - }, - }, - { - text: "目标成品率：" + 22 + "%", - left: "72%", - textAlign: "center", - top: "85%", - textStyle: { - fontSize: 16, - color: '#fffa' - }, - }, - ], + }, series: [ { - type: "gauge", - startAngle: 90, - center: ["27%", "35%"], - endAngle: -270, - radius: "55%", - progress: { + type: "bar", + data: [34, 2, 23], + label: { show: true, - width: 12, - }, - axisLine: { - lineStyle: { - width: 12, - }, - }, - pointer: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, - axisLabel: { - show: false, - }, - detail: { - valueAnimation: true, - fontSize: 16, - offsetCenter: [0, "0%"], - formatter: "{value}%", - color: "rgba(255, 255, 255, 1)", - }, - data: [ - { - // value: (nowProduction / targetProduction * 100).toFixed(1), - value: 100, - }, - ], - }, - { - type: "gauge", - startAngle: 90, - center: ["73%", "35%"], - endAngle: -270, - radius: "55%", - progress: { - show: true, - width: 12, - }, - axisLine: { - lineStyle: { - width: 12, - }, - }, - pointer: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, - axisLabel: { - show: false, - }, - detail: { - show: true, - valueAnimation: true, - fontSize: 16, - offsetCenter: [0, "0%"], - // formatter: 0 + "%", - // formatter: (nowYield / targetYield * 100).toFixed(1) + '%', + position: "right", + formatter: "{c}%", color: "#fff", + fontSize: 16, }, - data: [ - { - // value: targetYield, - value: 100, - name: "Perfect", - title: { - show: false, - }, - detail: { - show: false, - valueAnimation: true, - offsetCenter: ["0%", "-20%"], - }, - }, - { - value: 100, - // value: nowYield, - name: "Good", - title: { - show: false, - }, - detail: { - show: false, - valueAnimation: true, - offsetCenter: ["0%", "10%"], - }, - }, - { - value: 0, - detail: { - show: true, - }, - }, - ], }, ], + }; -export default function setup(echartInstance, data) { + +export default function setup(echartInstance, dataArr) { const new_options = { ...options }; - new_options.title[0].text = "当前产量：" + data.nowProduction + " 片"; - 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 = dataArr; echartInstance.setOption(new_options); } diff --git a/src/pages/DataPage.vue b/src/pages/DataPage.vue index f8b7b67..b43e950 100644 --- a/src/pages/DataPage.vue +++ b/src/pages/DataPage.vue @@ -22,7 +22,7 @@ import LineMonth from '../components/datapage/LineMonth.vue'; - +