done 本日生产线情况

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;

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[0].data[0].value =
-  new_options.series[1].data[0].value = data.targetYield
+    data.nowProduction != null &&
-  new_options.series[1].data[1].value = data.nowYield
+    data.targetProduction != null &&
-  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
+    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
-// }
+// }

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");
+  chartContainer.value.classList.add("h-full");
-  // nextTick(() => {
+  const d = loadData(store.data2.dailyTarget);
-  //   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.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,
+  };
+}
 </script>
 
 <template>
   <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>
 </template>
 
 <style scoped>
 .chart {
   /* height: 300px; */
+  height: auto;
 }
 
-.chart-inner {}
-
 .chart-chart {
   height: 100%;
 }

src/components/datapage/LineTodayOptions.js

@@ -3,47 +3,47 @@ export const options = {
     top: 0,
     left: 0,
     right: 0,
-    bottom: 0
+    bottom: 0,
   },
   title: [
     {
-      text: "当前产量：" + 100 + " 片",
+      text: "当前产量：" + 118 + " 片",
       left: "27%",
       textAlign: "center",
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: '#fffa'
+        color: "#fffa",
       },
     },
     {
-      text: "目标产量：" + 100 + " 片",
+      text: "目标产量：" + 213 + " 片",
       left: "27%",
       textAlign: "center",
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: '#fffa'
+        color: "#fffa",
       },
     },
     {
-      text: "当前成品率：" + 22 + "%",
+      text: "当前成品率：" + 78 + "%",
       left: "72%",
       textAlign: "center",
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: '#fffa'
+        color: "#fffa",
       },
     },
     {
-      text: "目标成品率：" + 22 + "%",
+      text: "目标成品率：" + 90 + "%",
       left: "72%",
       textAlign: "center",
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: '#fffa'
+        color: "#fffa",
       },
     },
   ],
@@ -56,11 +56,11 @@ export const options = {
       radius: "55%",
       progress: {
         show: true,
-        width: 12,
+        width: 24,
       },
       axisLine: {
         lineStyle: {
-          width: 12,
+          width: 24,
         },
       },
       pointer: {
@@ -85,7 +85,7 @@ export const options = {
       data: [
         {
           // value: (nowProduction / targetProduction * 100).toFixed(1),
-          value: 100,
+          value: 89.78,
         },
       ],
     },
@@ -97,11 +97,11 @@ export const options = {
       radius: "55%",
       progress: {
         show: true,
-        width: 12,
+        width: 24,
       },
       axisLine: {
         lineStyle: {
-          width: 12,
+          width: 24,
         },
       },
       pointer: {
@@ -128,7 +128,7 @@ export const options = {
       data: [
         {
           // value: targetYield,
-          value: 100,
+          value: 78,
           name: "Perfect",
           title: {
             show: false,
@@ -140,8 +140,7 @@ export const options = {
           },
         },
         {
-          value: 100,
+          value: 90,
-          // value: nowYield,
           name: "Good",
           title: {
             show: false,
@@ -150,6 +149,7 @@ export const options = {
             show: false,
             valueAnimation: true,
             offsetCenter: ["0%", "10%"],
+            formatter: "99.23%",
           },
         },
         {
@@ -168,9 +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[0].data[0].value =
-  new_options.series[1].data[0].value = data.targetYield
+    data.nowProduction != null &&
-  new_options.series[1].data[1].value = data.nowYield
+    data.targetProduction != null &&
-  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
+    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
+// }

src/pages/DataPage.vue

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