yudao-init/src/views/copilot/energy/components/ElecCost.vue

<!-- 
    filename: ElecCost.vue
    author: liubin
    date: 2024-04-29 16:37:01
    description: 电能耗
-->

<template>
  <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: {
    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);
    },
  },
  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 {
  flex: 1;
}
</style>