update home

src/views/dashboard/charts/Bipv.vue

@@ -0,0 +1,89 @@
+<!-- 
+    filename: Bipv.vue
+    author: liubin
+    date: 2024-04-10 15:39:54
+    description: 
+-->
+
+<template>
+  <right-chart-base
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    :vHeight="20.5"
+    class="bipv-chart"
+  />
+</template>
+
+<script>
+import RightChartBase from "./RightChartBase.vue";
+
+export default {
+  name: "BipvChart",
+  components: { RightChartBase },
+  data() {
+    const year = new Date().getFullYear();
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      legend: [
+        { label: `${year}年目标值`, color: "#f3c000" },
+        { label: `${year - 1}年`, color: "#12f7f1" },
+        { label: `${year}年`, color: "#58adfa" },
+      ],
+      xAxis: cities,
+    };
+  },
+  computed: {
+    series() {
+      const bipvOutput = this.$store.getters.home.bipvOutput;
+      // const bipvTarget = this.$store.getters.home.bipvTarget;
+
+      if (
+        !bipvOutput ||
+        !bipvOutput.current ||
+        !bipvOutput.previous ||
+        !bipvOutput.target
+      ) {
+        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: `${new Date().getFullYear()}年目标值`,
+          data: bipvOutput.target,
+        },
+        {
+          name: `${new Date().getFullYear() - 1}年`,
+          data: bipvOutput.previous,
+        },
+        {
+          name: `${new Date().getFullYear()}年`,
+          data: bipvOutput.current,
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>