From 72eb06bb2d59d6b01f21f443aa847e06b50d38c0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Thu, 18 Apr 2024 16:18:38 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E8=8A=AF=E7=89=87=E4=BA=A7=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/home.js                     | 10 +-
 src/views/dashboard/charts/Bipv.vue           |  7 +-
 src/views/dashboard/charts/ChipYield.vue      | 44 ++++++++-
 src/views/dashboard/charts/ChipYieldChart.vue | 98 +++++++++++++++++--
 src/views/dashboard/charts/StdChart.vue       | 76 ++++++++------
 5 files changed, 191 insertions(+), 44 deletions(-)

diff --git a/src/store/modules/home.js b/src/store/modules/home.js
index 11e0364..e9f8163 100644
--- a/src/store/modules/home.js
+++ b/src/store/modules/home.js
@@ -95,10 +95,18 @@ const actions = {
     }; // BIPV产出
 
     if (dataArr) {
-      console.log("copilot init home--->", dataArr);
       for (const factory of dataArr) {
         /* 工厂索引 */
         const factoryId = factory.factory;
+        /* 收集目标数据 */
+        if (targetArr) {
+          const target = targetArr.find((item) => item.factory === factoryId);
+          if (target) {
+            chipOutput.target.splice(factoryId, 1, target.chipYield ?? 0);
+            stdOutput.target.splice(factoryId, 1, target.componentYield ?? 0);
+            bipvOutput.target.splice(factoryId, 1, target.bipvProductOutput ?? 0);
+          }
+        }
         /* 收集芯片投入数据 */
         chipInvest.current.splice(
           factoryId,
diff --git a/src/views/dashboard/charts/Bipv.vue b/src/views/dashboard/charts/Bipv.vue
index 97c4cf4..1793791 100644
--- a/src/views/dashboard/charts/Bipv.vue
+++ b/src/views/dashboard/charts/Bipv.vue
@@ -39,7 +39,12 @@ export default {
       const bipvOutput = this.$store.getters.home.bipvOutput;
       // const bipvTarget = this.$store.getters.home.bipvTarget;
 
-      if (!bipvOutput || !bipvOutput.current || !bipvOutput.previous) {
+      if (
+        !bipvOutput ||
+        !bipvOutput.current ||
+        !bipvOutput.previous ||
+        !bipvOutput.target
+      ) {
         return [
           {
             name: "样例数据--2024年目标值",
diff --git a/src/views/dashboard/charts/ChipYield.vue b/src/views/dashboard/charts/ChipYield.vue
index 2f740cb..f901a6b 100644
--- a/src/views/dashboard/charts/ChipYield.vue
+++ b/src/views/dashboard/charts/ChipYield.vue
@@ -7,7 +7,7 @@
 
 <template>
   <div class="chip-yield">
-    <chip-yield-chart />
+    <chip-yield-chart :factory="activeLoc" />
     <section class="right-part">
       <div class="yield-location">
         <section class="btn-group">
@@ -61,15 +61,15 @@
       <div class="yield-summary">
         <div class="legend">
           <span class="legend-label">2024年累计</span>
-          <span class="legend-value deep-green">40,100</span>
+          <span class="legend-value deep-green">{{ output.current }}</span>
         </div>
         <div class="legend">
           <span class="legend-label">2024年目标</span>
-          <span class="legend-value">30,100</span>
+          <span class="legend-value">{{ output.target }}</span>
         </div>
         <div class="legend">
           <span class="legend-label">2023年累计</span>
-          <span class="legend-value deep-blue">400</span>
+          <span class="legend-value deep-blue">{{ output.previous }}</span>
         </div>
       </div>
     </section>
@@ -88,6 +88,42 @@ export default {
       activeLoc: "1",
     };
   },
+  computed: {
+    output() {
+      // ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]
+      const chipOutput = this.$store.getters.home.chipOutput;
+      if (
+        !chipOutput ||
+        !chipOutput.target ||
+        !chipOutput.current ||
+        !chipOutput.previous
+      )
+        return {
+          target: 0,
+          current: 0,
+          previous: 0,
+        };
+      const index =
+        this.activeLoc == "1"
+          ? 4
+          : this.activeLoc == "2"
+          ? 1
+          : this.activeLoc == "3"
+          ? 2
+          : this.activeLoc == "4"
+          ? 0
+          : this.activeLoc == "5"
+          ? 3
+          : this.activeLoc == "6"
+          ? 5
+          : 6;
+      return {
+        target: parseInt(chipOutput.target[index]).toLocaleString(),
+        current: parseInt(chipOutput.current[index]).toLocaleString(),
+        previous: parseInt(chipOutput.previous[index]).toLocaleString(),
+      };
+    },
+  },
 };
 </script>
 
diff --git a/src/views/dashboard/charts/ChipYieldChart.vue b/src/views/dashboard/charts/ChipYieldChart.vue
index d9ed45b..dbe79b0 100644
--- a/src/views/dashboard/charts/ChipYieldChart.vue
+++ b/src/views/dashboard/charts/ChipYieldChart.vue
@@ -29,8 +29,13 @@ export default {
       type: Number,
       default: 22,
     },
+    factory: {
+      type: String,
+      default: "1",
+    },
   },
   data() {
+    const year = new Date().getFullYear();
     return {
       isFullscreen: false,
       options: {
@@ -43,7 +48,7 @@ export default {
         },
         tooltip: {},
         title: {
-          text: "78%",
+          text: "0%",
           left: "48%",
           top: "40%",
           textAlign: "center",
@@ -52,9 +57,9 @@ export default {
             fontSize: 32,
             color: "#fffd",
           },
-          subtext: "\u200224年累计产出\u2002",
+          subtext: `\u2002${year}年累计产出\u2002`,
           subtextStyle: {
-            fontSize: 14,
+            fontSize: 12,
             fontWeight: 100,
             color: "#fffd",
             align: "right",
@@ -64,7 +69,7 @@ export default {
           // 背景 series - 2024计划
           {
             type: "pie",
-            name: "2024目标",
+            name: `${year}目标`,
             radius: ["70%", "85%"],
             center: ["50%", "52%"],
             emptyCircleStyle: {
@@ -87,7 +92,7 @@ export default {
             data: [
               {
                 value: 90,
-                name: "2024累计产出",
+                name: `${year}累计产出`,
                 selected: false,
                 itemStyle: {
                   borderJoin: "round",
@@ -130,7 +135,7 @@ export default {
             data: [
               {
                 value: 90,
-                name: "2023累计产出",
+                name: `${year - 1}累计产出`,
                 selected: false,
                 itemStyle: {
                   borderJoin: "round",
@@ -151,7 +156,7 @@ export default {
                 },
               },
               {
-                value: 20,
+                value: 0,
                 name: "-",
                 itemStyle: { color: "transparent" },
                 label: { show: false },
@@ -162,19 +167,92 @@ export default {
       },
     };
   },
+  computed: {
+    output() {
+      const chipOutput = this.$store.getters.home.chipOutput;
+      if (
+        !chipOutput ||
+        !chipOutput.target ||
+        !chipOutput.current ||
+        !chipOutput.previous
+      )
+        return {
+          target: 0,
+          current: 0,
+          previous: 0,
+        };
+      const index =
+        this.factory == "1"
+          ? 4
+          : this.factory == "2"
+          ? 1
+          : this.factory == "3"
+          ? 2
+          : this.factory == "4"
+          ? 0
+          : this.factory == "5"
+          ? 3
+          : this.factory == "6"
+          ? 5
+          : 6;
+      return {
+        target: chipOutput.target[index], //  parseInt(chipOutput.target[index]).toLocaleString(),
+        current: chipOutput.current[index], //  parseInt(chipOutput.current[index]).toLocaleString(),
+        previous: chipOutput.previous[index], //  parseInt(chipOutput.previous[index]).toLocaleString(),
+      };
+    },
+    actualOptions() {
+      const options = JSON.parse(JSON.stringify(this.options));
+      // 标题
+      if (!this.output.target) options.title.text = "0%";
+      else
+        options.title.text =
+          (this.output.current / this.output.target) * 100 + "%";
+      // 外环
+      if (
+        this.output.current == this.output.target &&
+        this.output.current == 0
+      ) {
+        options.series[1].data[0].value = 0;
+        options.series[1].data[1].value = 100;
+        // options.series[2].data[0].value = 0;
+      } else {
+        options.series[1].data[0].value = this.output.current;
+        options.series[1].data[1].value =
+          this.output.target - this.output.current;
+        // options.series[2].data[0].value = this.output.previous;
+      }
+      // 内环
+      console.log("output---", this.output);
+      if (this.output.previous == 0) {
+        options.series[2].data[0].value = 0;
+        options.series[2].data[1].value = 100;
+      } else {
+        options.series[2].data[0].value = this.output.previous;
+        options.series[2].data[1].value = 0;
+      }
+      return options;
+    },
+  },
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
       // this.options.title.top = val ? "40%" : "37%";
       this.options.title.textStyle.fontSize = val ? 48 : 32;
-      this.options.title.subtextStyle.fontSize = val ? 18 : 14;
-      this.initOptions(this.options);
+      this.options.title.subtextStyle.fontSize = val ? 18 : 12;
+      // this.options.title.subtextStyle.fontSize = val ? 18 : 14;
+      this.initOptions(this.actualOptions);
+    },
+    factory(val) {
+      this.initOptions(this.actualOptions);
     },
   },
   mounted() {
+    console.log("mounted", this.actualOptions);
     /** 清除 MIN_WIDTH, 此处比较特殊, 需要这么一步, 去除 chart mixin 的滚动条功能 */
     this.MIN_WIDTH = 0;
-    this.initOptions(this.options);
+    this.initOptions(this.actualOptions);
+    debugger;
 
     if (screenfull.isEnabled) {
       screenfull.on("change", () => {
diff --git a/src/views/dashboard/charts/StdChart.vue b/src/views/dashboard/charts/StdChart.vue
index fce7ae5..4a855e5 100644
--- a/src/views/dashboard/charts/StdChart.vue
+++ b/src/views/dashboard/charts/StdChart.vue
@@ -21,41 +21,61 @@ import RightChartBase from "./RightChartBase.vue";
 export default {
   name: "StdChart",
   components: { RightChartBase },
-  props: {
-    legend: {
-      type: Array,
-      default: () => [
-        { label: "2024年目标值", color: "#f3c000" },
-        { label: "2023年", color: "#12f7f1" },
-        { label: "2024年", color: "#58adfa" },
+
+  data() {
+    const year = new Date().getFullYear();
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      legend: [
+        { label: `${year}年目标值`, color: "#f3c000" },
+        { label: `${year - 1}年`, color: "#12f7f1" },
+        { label: `${year}年`, color: "#58adfa" },
       ],
-    },
-    xAxis: {
-      type: Array,
-      default: () => ["成都", "邯郸", "株洲", "瑞昌", "heels", "socks"],
-    },
-    series: {
-      type: Array,
-      default: () => [
+      xAxis: cities,
+    };
+  },
+  computed: {
+    series() {
+      const stdOutput = this.$store.getters.home.stdOutput;
+
+      if (!stdOutput || !stdOutput.current || !stdOutput.previous) {
+        return [
+          {
+            name: "样例数据--2024年目标值",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+          {
+            name: "样例数据--2023年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+          {
+            name: "样例数据--2024年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+        ];
+      }
+
+      return [
         {
-          name: "2024年目标值",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear()}年目标值`,
+          data: stdOutput.target,
         },
         {
-          name: "2023年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear() - 1}年`,
+          data: stdOutput.previous,
         },
         {
-          name: "2024年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear()}年`,
+          data: stdOutput.current,
         },
-      ],
+      ];
     },
   },
 };