保存

src/views/copilot/efficiency/components/ChipInvest.vue

@@ -0,0 +1,106 @@
+<!-- 
+    filename: FtoInvest.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="ChipInvest"
+    class="chip-invest-chart"
+  />
+</template>
+
+<script>
+import BarChartBase from "./sub/bar/BarChartBase.vue";
+
+export default {
+  name: "ChipInvest",
+  components: { BarChartBase },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+    };
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  computed: {
+    legend() {
+      switch (this.period) {
+        case "日":
+          return [{ label: "昨日", color: "#12f7f1" }];
+        case "周":
+          return [{ label: "本周", color: "#12f7f1" }];
+        case "月": {
+          const year = new Date().getFullYear();
+          const month = new Date().getMonth() + 1;
+          return [
+            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+            { label: `${year}年${month}月`, color: "#58adfa" },
+          ];
+        }
+        case "年": {
+          const year = new Date().getFullYear();
+          return [
+            { label: `${year - 1}年`, color: "#12f7f1" },
+            { label: `${year}年`, color: "#58adfa" },
+          ];
+        }
+        default:
+          return [
+            { label: `${year - 1}年`, color: "#12f7f1" },
+            { label: `${year}年`, color: "#58adfa" },
+          ];
+      }
+    },
+    series() {
+      const { chipInvest } = this.$store.getters.copilot.yield;
+      let dataList = null;
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = chipInvest?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = chipInvest?.pervious;
+          dataList[1] = chipInvest?.current;
+      }
+      return getTemplate(this.period, dataList);
+    },
+  },
+};
+
+function getTemplate(period, dataList) {
+  const year = new Date().getFullYear();
+  const month = new Date().getMonth() + 1;
+  return period == "日" || period == "周"
+    ? [
+        {
+          name: period == "日" ? "昨日" : "本周",
+          data: dataList ?? [],
+        },
+      ]
+    : [
+        {
+          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
+          data: dataList ? dataList[0] : [],
+        },
+        {
+          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+          data: dataList ? dataList[1] : [],
+          // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+        },
+      ];
+}
+</script>