src/views/copilot/components/charts/base/DoubleRingChart.vue

@@ -12,9 +12,7 @@
     <div class="double-ring-chart__legend">
       <div v-for="item in legendItems" :key="item.label" class="legend-item">
         <span class="legend-item__label">{{ item.label }}</span>
-        <span class="legend-item__value">{{
-          item.value.toLocaleString()
-        }}</span>
+        <span class="legend-item__value">{{ item.value | numberFilter }}</span>
       </div>
     </div>
   </div>
@@ -33,6 +31,10 @@ export default {
       type: Number,
       default: 24,
     },
+    factoryId: {
+      type: Number,
+      required: true,
+    },
     period: {
       type: String,
       default: "日",
@@ -45,26 +47,69 @@ export default {
   data() {
     return {};
   },
-  computed: {
-    legendItems() {
-      return calculateItems(this.period);
+  filters: {
+    numberFilter(val) {
+      if (!isNaN(val)) {
+        return (+val).toLocaleString();
+      }
+      return 0;
     },
+  },
+  computed: {
+    dataSourceField() {
+      switch (this.dataSource) {
+        case "标准组件产出":
+          return "stdOutput";
+        case "芯片产出":
+          return "chipOutput";
+        case "BIPV产出":
+          return "bipvOutput";
+      }
+    },
+    valueTuple() {
+      // [previousValue, currentValue, sumValue?]
+      const getter = this.$store.getters.copilot.yield[this.dataSourceField];
+      if (this.period === "日" || this.period === "周") {
+        return [
+          getter.previous[this.factoryId],
+          getter.current[this.factoryId],
+        ];
+      }
+      return [
+        getter.previous[this.factoryId],
+        getter.current[this.factoryId],
+        getter.target[this.factoryId],
+      ];
+    },
+
     options() {
-      // TODO: 此处更新数据
-      let titleValue = "10%",
-        subtitle = "测试子标题",
-        previousSum = 10,
-        currentSum = 0,
-        targetSum = 100;
+      const year = new Date().getFullYear();
+      const month = new Date().getMonth() + 1;
+      const vt = this.valueTuple;
+      let titleValue =
+          vt[0] != null && vt[2] != null && vt[2] !== 0
+            ? `${vt[1] / vt[2]}%`
+            : "0%",
+        subtitle =
+          this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
 
       return getOptions({
         titleValue,
         subtitle,
-        previousSum,
-        currentSum,
-        targetSum,
+        previousSum: this.valueTuple[0],
+        currentSum: this.valueTuple[1],
+        targetSum: this.valueTuple[2],
       });
     },
+
+    legendItems() {
+      return calculateItems(this.period, this.valueTuple);
+    },
+  },
+  watch: {
+    legendItems() {
+      this.initOptions(this.options);
+    },
   },
   mounted() {
     this.initOptions(this.options);
@@ -77,7 +122,7 @@ export default {
   },
 };
 
-function calculateItems(period) {
+function calculateItems(period, valueTuple) {
   let items = [];
   const today = new Date().getDate();
   const month = new Date().getMonth() + 1;
@@ -85,28 +130,28 @@ function calculateItems(period) {
   switch (period) {
     case "日":
       items = [
-        { label: `${month}月${today}日累计`, value: 24 },
-        { label: `去年${month}月${today}日累计`, value: 33 },
+        { label: `${month}月${today}日累计`, value: valueTuple[1] },
+        { label: `去年${month}月${today}日累计`, value: valueTuple[0] },
       ];
       break;
     case "周":
       items = [
-        { label: `本周累计`, value: 32 },
-        { label: `去年本周累计`, value: 12 },
+        { label: `本周累计`, value: valueTuple[1] },
+        { label: `去年本周累计`, value: valueTuple[0] },
       ];
       break;
     case "月":
       items = [
-        { label: `${month}月累计`, value: 24 },
-        { label: `去年${month}月累计`, value: 33 },
-        { label: `${month}月目标`, value: 12334 },
+        { label: `${month}月累计`, value: valueTuple[1] },
+        { label: `去年${month}月累计`, value: valueTuple[0] },
+        { label: `${month}月目标`, value: valueTuple[2] },
       ];
       break;
     case "年":
       items = [
-        { label: `${year - 1}年累计`, value: 23234 },
-        { label: `${year}年累计`, value: 4324 },
-        { label: `${year}年目标`, value: 12334 },
+        { label: `${year}年累计`, value: valueTuple[1] },
+        { label: `${year - 1}年累计`, value: valueTuple[0] },
+        { label: `${year}年目标`, value: valueTuple[2] },
       ];
       break;
   }

src/views/copilot/components/charts/base/DoubleRingWrapper.vue

@@ -13,7 +13,11 @@
         :options="cityOptions"
       />
       <div class="flex-1 stretch">
-        <DoubleRingChartVue :data-source="dataSource" :period="period" />
+        <DoubleRingChartVue
+          :data-source="dataSource"
+          :period="period"
+          :factoryId="factoryId"
+        />
       </div>
     </template>
     <template v-else>
@@ -42,6 +46,7 @@ export default {
   },
   data() {
     return {
+      factoryId: 4, // 默认成都
       cityOptions: [
         "成都",
         "邯郸",
@@ -55,7 +60,7 @@ export default {
   },
   methods: {
     handleActiveUpdate(index) {
-      console.log("handleActiveUpdate--->", index);
+      this.factoryId = index;
     },
   },
 };

src/views/copilot/components/charts/base/double-ring-chart-options.js

@@ -81,11 +81,12 @@ export default ({
           value:
             targetSum > currentSum
               ? targetSum - currentSum
-              : targetSum == currentSum
+              : targetSum == 0
               ? currentSum == 0
                 ? 1
                 : 0
               : 0,
+
           name: "未达成累计",
           itemStyle: { color: "transparent" },
           label: { show: false },
@@ -128,7 +129,12 @@ export default ({
           },
         },
         {
-          value: targetSum > previousSum ? targetSum - previousSum : 0,
+          value:
+            targetSum > previousSum
+              ? targetSum - previousSum
+              : previousSum == 0
+              ? 1
+              : 0,
           name: "-",
           itemStyle: { color: "transparent" },
           label: { show: false },