update 芯片产出

2024-04-18 16:18:38 +08:00
parent e0058df873
commit 72eb06bb2d
5 changed files with 191 additions and 44 deletions
--- 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,
--- 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年目标值",
--- 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>

--- 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", () => {
--- 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,
        },
-      ],
+      ];
    },
  },
 };