update 综合

src/views/copilot/energy/components/ElecCost.vue

@@ -6,25 +6,123 @@
 -->
 
 <template>
-  <div class="elec-cost">elec cost</div>
+  <LineChartBase
+    v-if="1"
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="elecCost"
+    class="elec-cost"
+  />
+  <BarChartBase
+    v-else
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="elecCost"
+    class="elec-cost"
+  />
 </template>
 
 <script>
+import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
+import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
+
 export default {
   name: "ElecCost",
-  components: {},
-  props: {},
-  data() {
-    return {};
+  components: {
+    BarChartBase: BarChartBaseVue,
+    LineChartBase: LineChartBaseVue,
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+    };
+  },
+  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 { ftoInvest } = this.$store.getters.copilot.yield;
+      let dataList = null;
+
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = ftoInvest?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = ftoInvest?.pervious;
+          dataList[1] = ftoInvest?.current;
+      }
+
+      return getTemplate(this.period, dataList);
+    },
   },
-  computed: {},
   methods: {},
 };
+
+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>
 
 <style scoped lang="scss">
 .elec-cost {
-  background: #cc03;
   flex: 1;
 }
 </style>