From f66b3a8a7a4b2073295d86db05f0b2fdb0e13ed0 Mon Sep 17 00:00:00 2001
From: Melete <ugog@qq.com>
Date: Mon, 18 Mar 2024 19:58:42 +0800
Subject: [PATCH] update

---
 src/components/Chart/RateChart.vue    |   8 +-
 src/components/Chart/rateOption.js    |   4 +-
 src/components/datapage/LineMonth.vue | 124 +++++++++++++++++---------
 src/components/datapage/LineToday.vue |  76 +++++++++-------
 4 files changed, 133 insertions(+), 79 deletions(-)

diff --git a/src/components/Chart/RateChart.vue b/src/components/Chart/RateChart.vue
index 67687ef..7607a3b 100644
--- a/src/components/Chart/RateChart.vue
+++ b/src/components/Chart/RateChart.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue";
 import * as echarts from "echarts";
-import option from "./rateOption";
+import getOptions from "./rateOption";
 
 const props = defineProps({
   isOnlyChild: {
@@ -41,7 +41,7 @@ const rateChartRef = ref(null);
 function reInitChart() {
   if (chart.value) chart.value.dispose();
   const _chart = echarts.init(rateChartRef.value);
-  _chart.setOption(option);
+  _chart.setOption(getOptions(props.rawData));
   chart.value = _chart;
 }
 
@@ -62,11 +62,11 @@ onMounted(() => {
     <div class="text-intro">
       <div class="text-intro__item">
         <span class="legend-box green"></span>
-        <span>当前成品率: 32.73%</span>
+        <span>当前成品率: {{ props.rawData.nowYield }}%</span>
       </div>
       <div class="text-intro__item">
         <span class="legend-box blue"></span>
-        <span>目标成品率: 90.72%</span>
+        <span>目标成品率: {{ props.rawData.targetYield }}%</span>
       </div>
     </div>
   </div>
diff --git a/src/components/Chart/rateOption.js b/src/components/Chart/rateOption.js
index 519b5b0..782e332 100644
--- a/src/components/Chart/rateOption.js
+++ b/src/components/Chart/rateOption.js
@@ -129,7 +129,9 @@ const targetSerie = {
 
 export default (data) => {
   dataSerie.data[0].value = data.nowYield;
-  dataSerie.data[1].value = data.targetYield - data.nowYield;
+  dataSerie.data[1].value = 100 - data.nowYield;
+  targetSerie.data[0].value = data.targetYield;
+  targetSerie.data[1].value = 100 - data.targetYield;
   return {
     tooltip,
     title,
diff --git a/src/components/datapage/LineMonth.vue b/src/components/datapage/LineMonth.vue
index 443fe9d..db6f8b0 100644
--- a/src/components/datapage/LineMonth.vue
+++ b/src/components/datapage/LineMonth.vue
@@ -1,43 +1,47 @@
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
-import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
 import { useWsStore } from "../../store";
-import setupFn from "./LineMonthOptions";
+import YieldChart from "../Chart/YieldChart.vue";
+import RateChart from "../Chart/RateChart.vue";
 
-const show = ref(false);
-const chartContainer = ref(null);
-const chartInstance = ref(null);
+const displayProductionChart = ref(false);
+const displayRateChart = ref(false);
+const websocketData = ref(null);
+const refreshToken = ref(1);
 const store = useWsStore();
 
 onMounted(() => {
-  chartContainer.value.classList.add("h-full");
-  const d = loadData(store.data2.monthlyTarget);
-  // const d = loadData([
+  // websocketData.value = loadData([
   //   {
-  //     targetProduction: 100,
-  //     nowProduction: 66,
-  //     targetYield: 13,
-  //     nowYield: 3,
+  //     targetProduction: 0,
+  //     nowProduction: 10,
+  //     targetYield: 10.34,
+  //     nowYield: 3.11,
   //   },
   // ]);
-  if (!d) {
-    show.value = false;
-    if (chartInstance.value) {
-      chartInstance.value.dispose();
-      chartInstance.value = null;
-    }
+  websocketData.value = loadData(store.data2.monthlyTarget);
+  if (!websocketData.value) {
+    displayProductionChart.value = false;
+    displayRateChart.value = false;
   } else {
-    if (!chartInstance.value)
-      chartInstance.value = echarts.init(chartContainer.value);
-    setupFn(chartInstance.value, d);
-    show.value = true;
+    /** 阻止  targetProduction == 0 */
+    if (!websocketData.value.targetProduction) {
+      displayProductionChart.value = false;
+    } else {
+      displayProductionChart.value = true;
+    }
+    /** 阻止  targetYield == 0 */
+    if (!websocketData.value.targetYield) {
+      displayRateChart.value = false;
+    } else {
+      displayRateChart.value = true;
+    }
   }
 });
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  const d = loadData(state.data2.monthlyTarget);
   // const d = loadData([
   //   {
   //     targetProduction: 100,
@@ -46,30 +50,35 @@ store.$subscribe((mutation, state) => {
   //     nowYield: 3,
   //   },
   // ]);
-  if (!d) {
-    show.value = false;
-    if (chartInstance.value) {
-      chartInstance.value.dispose();
-      chartInstance.value = null;
-    }
+  websocketData.value = loadData(state.data2.monthlyTarget);
+  if (!websocketData.value) {
+    displayProductionChart.value = false;
+    displayRateChart.value = false;
   } else {
-    if (!chartInstance.value)
-      chartInstance.value = echarts.init(chartContainer.value);
-    setupFn(chartInstance.value, d);
-    show.value = true;
+    /** 阻止  targetProduction == 0 */
+    if (!websocketData.value.targetProduction) {
+      displayProductionChart.value = false;
+    } else {
+      if (refreshToken.value > 100000) refreshToken.value = 0;
+      refreshToken.value += 1;
+      displayProductionChart.value = true;
+    }
+    /** 阻止  targetYield == 0 */
+    if (!websocketData.value.targetYield) {
+      displayRateChart.value = false;
+    } else {
+      if (refreshToken.value > 100000) refreshToken.value = 0;
+      refreshToken.value += 1;
+      displayRateChart.value = true;
+    }
   }
 });
 
 // utils
 function loadData(monthlyTarget) {
-  if (
-    monthlyTarget == undefined ||
-    // monthlyTarget?.length == 0 ||
-    !monthlyTarget[0]
-  ) {
+  if (monthlyTarget == undefined || !monthlyTarget[0]) {
     return null;
   }
-
   return {
     targetProduction: monthlyTarget[0].targetProduction,
     nowProduction: monthlyTarget[0].nowProduction,
@@ -81,12 +90,39 @@ function loadData(monthlyTarget) {
 
 <template>
   <Container class="chart" title="本月生产线情况" icon="cube">
-    <div
+    <!-- <div
       ref="chartContainer"
       class="chart-chart"
       :style="{ opacity: show ? 1 : 0 }"
     ></div>
-    <p v-show="!show" class="empty-data-hint">暂无数据</p>
+    <p v-show="!show" class="empty-data-hint">暂无数据</p> -->
+    <div class="container-body__h-full">
+      <yield-chart
+        v-if="displayProductionChart"
+        :key="refreshToken + '_yield_chart'"
+        :raw-data="websocketData"
+      />
+      <rate-chart
+        v-if="displayRateChart"
+        :key="refreshToken + '_rate_chart'"
+        :raw-data="websocketData"
+        :isOnlyChild="!displayProductionChart"
+      />
+      <p
+        v-if="!displayProductionChart && !displayRateChart"
+        style="
+          height: 100%;
+          line-height: 350px;
+          user-select: none;
+          flex: 1;
+          color: #fffc;
+          font-size: 24px;
+          text-align: center;
+        "
+      >
+        暂无数据
+      </p>
+    </div>
   </Container>
 </template>
 
@@ -99,4 +135,10 @@ function loadData(monthlyTarget) {
 .chart-chart {
   height: 100%;
 }
+
+.container-body__h-full {
+  height: 100%;
+  display: flex;
+  gap: 12px;
+}
 </style>
diff --git a/src/components/datapage/LineToday.vue b/src/components/datapage/LineToday.vue
index bf022b3..37bf905 100644
--- a/src/components/datapage/LineToday.vue
+++ b/src/components/datapage/LineToday.vue
@@ -8,19 +8,19 @@ import RateChart from "../Chart/RateChart.vue";
 const displayProductionChart = ref(false);
 const displayRateChart = ref(false);
 const websocketData = ref(null);
+const refreshToken = ref(1);
 const store = useWsStore();
 
 onMounted(() => {
-  websocketData.value = loadData([
-    {
-      targetProduction: 120,
-      nowProduction: 10,
-      targetYield: 13,
-      nowYield: 3,
-    },
-  ]);
-  // const d = loadData(state.data2.dailyTarget);
-  // console.log("websocketData==>", websocketData);
+  // websocketData.value = loadData([
+  //   {
+  //     targetProduction: 120,
+  //     nowProduction: 10,
+  //     targetYield: 10.34,
+  //     nowYield: 3.11,
+  //   },
+  // ]);
+  websocketData.value = loadData(store.data2.dailyTarget);
   if (!websocketData.value) {
     displayProductionChart.value = false;
     displayRateChart.value = false;
@@ -41,28 +41,38 @@ onMounted(() => {
 });
 
 // 订阅
-// store.$subscribe((mutation, state) => {
-//   // const d = loadData([
-//   //   {
-//   //     targetProduction: 100,
-//   //     nowProduction: 66,
-//   //     targetYield: 13,
-//   //     nowYield: 3,
-//   //   },
-//   // ]);
-//   const d = loadData(state.data2.dailyTarget);
-//   if (!d) {
-//     displayProductionChart.value = false;
-//     displayRateChart.value = false;
-//   } else {
-//     displayRateChart.value = false;
-//     if (!d.targetProduction) {
-//       displayProductionChart.value = false;
-//     } else {
-//       displayProductionChart.value = true;
-//     }
-//   }
-// });
+store.$subscribe((mutation, state) => {
+  // const d = loadData([
+  //   {
+  //     targetProduction: 100,
+  //     nowProduction: 66,
+  //     targetYield: 13,
+  //     nowYield: 3,
+  //   },
+  // ]);
+  websocketData.value = loadData(state.data2.dailyTarget);
+  if (!websocketData.value) {
+    displayProductionChart.value = false;
+    displayRateChart.value = false;
+  } else {
+    /** 阻止  targetProduction == 0 */
+    if (!websocketData.value.targetProduction) {
+      displayProductionChart.value = false;
+    } else {
+      if (refreshToken.value > 100000) refreshToken.value = 0;
+      refreshToken.value += 1;
+      displayProductionChart.value = true;
+    }
+    /** 阻止  targetYield == 0 */
+    if (!websocketData.value.targetYield) {
+      displayRateChart.value = false;
+    } else {
+      if (refreshToken.value > 100000) refreshToken.value = 0;
+      refreshToken.value += 1;
+      displayRateChart.value = true;
+    }
+  }
+});
 
 // utils
 function loadData(dailyTarget) {
@@ -110,7 +120,7 @@ function loadData(dailyTarget) {
           text-align: center;
         "
       >
-        - 暂无数据 -
+        暂无数据
       </p>
     </div>
   </Container>