update 3d--本月班组情况

src/components/TeamChartMonth.vue

@@ -5,53 +5,75 @@ import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
 import setupFn from "./TeamChartMonthOptions";
 
+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) => {
-  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(() => {
-    chart.value = echarts.init(chartChart.value);
-    setupFn(chart.value, monthData.value);
+onMounted(() => {
+  chartContainer.value.classList.add("h-full");
+  const d = loadData(store.data2.monthlyTarget);
+  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);
+  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;
   }
 
-onMounted(() => {
-  chartChart.value.classList.add("h-full");
-});
+  return {
+    targetProduction: monthlyTarget[0].targetProduction,
+    nowProduction: monthlyTarget[0].nowProduction,
+    targetYield: monthlyTarget[0].targetYield,
+    nowYield: monthlyTarget[0].nowYield,
+  };
+}
 </script>
 
 <template>
   <Container class="chart" title="本月班组情况" icon="cube">
     <div
-      ref="chartChart"
+      ref="chartContainer"
       class="chart-chart"
-      :style="{ opacity: monthData ? 1 : 0 }"
+      :style="{ opacity: show ? 1 : 0 }"
     ></div>
-    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
+    <p v-show="!show" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
 
@@ -60,9 +82,6 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {
-}
-
 .chart-chart {
   height: 100%;
 }

src/components/TeamChartMonthOptions.js

@@ -164,13 +164,21 @@ export const options = {
 };
 export default function setup(echartInstance, data) {
   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.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) + '%',
   echartInstance.setOption(new_options);
 }
+
+
+// {
+//   "targetProduction": 99,
+//   "nowProduction": 58,
+//   "targetYield": 12,
+//   "nowYield": 9
+// }

src/components/useTeamMonthData.js

@@ -1,6 +0,0 @@
-import { useWsStore } from "../store";
-import setupFn from "./TeamChartMonthOptions";
-
-export const useTeamMonthData = () => {
-
-}