yudao-init/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue

<!--
    filename: ChipRateItem.vue
    author: liubin
    date: 2024-04-29 14:25:18
    description:
-->

<template>
  <div class="chip-rate-item">
    <div class="cities">
      <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
    </div>
    <div class="chart" ref="chart"></div>
    <div class="legend" v-if="period == '月' || period == '年'">
      <div class="legend-item" v-for="lgd in legend" :key="lgd.label">
        <span class="legend-item__value">{{ lgd.value }}</span>
        <span class="legend-item__label">{{ lgd.label }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import CopilotButtons from "@/views/copilot/components/select.vue";
import chartMixin from "@/mixins/chart.js";
import fullscreenMixin from "@/mixins/fullscreen.js";
import getOptions from "../../../options/chipOptions.js";
import { mapGetters } from "vuex";

export default {
  name: "ChipRateItem",
  components: { CopilotButtons },
  mixins: [chartMixin, fullscreenMixin],
  props: {
    cities: {
      type: Array,
      default: () => [],
    },
    color: {
      type: Number,
      default: 1,
    },
    period: {
      type: String,
      default: "日",
    },
  },
  data() {
    return {
      factoryId: 0,
      count: 1,
    };
  },
  computed: {
    chipRate() {
      return this.$store.getters.copilot.efficiency.chipRate;
    },
    valueTuple() {
      const getter = this.chipRate;
      console.log(getter)
      if (this.period === "日" || this.period === "周") {
        return [
          getter.previous[this.factoryId],
          getter.current[this.factoryId],
          0,
        ];
      }
      // [100, 200, 200]
      return [
        getter.previous[this.factoryId],
        getter.current[this.factoryId],
        getter.target[this.factoryId],
      ];
    },
    options() {
      const single = this.period === "日" || this.period === "周";
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      const vt = this.valueTuple;
      let titleValue = single
          ? (vt[1] != null && `${vt[1] * 100}%`) || "0%"
          : vt[0] != null && vt[2] != null && vt[2] !== 0
          ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
          : "0%",
        subtitle = {
          日: "本日良率",
          周: "本周良率",
          月: `${month}月良率`,
          年: `${year}良率`,
        }[this.period];

      const t = getOptions({
        single,
        color: this.color == 1 ? "#4CF0E8" : "#1065ff",
        titleValue,
        subtitle,
        previousSum: vt[0],
        currentSum: vt[1],
        targetSum: vt[2],
      });
      return t;
    },
    legend() {
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      return [
        {
          label:
            this.period == "月"
              ? `${year - 1}年${month}月良率`
              : `${year - 1}年良率`,
          value: (this.valueTuple[0] * 100).toFixed(0) + "%",
        },
        {
          label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
          value:  (this.valueTuple[1] * 100).toFixed(0) + "%",
        },
      ];
    },
  },
  mounted() {
    this.initOptions(this.options);
  },
  watch: {
    period() {
      this.initOptions(this.options);
    },
    factoryId() {
      this.initOptions(this.options);
    },
    chipRate() {
      this.initOptions(this.options);
    },
  },
  methods: {
    handleCityUpdate(id) {
      this.factoryId = id;
    },
    fullscreenCallback(isFullscreen) {},
  },
};
</script>

<style scoped lang="scss">
.chip-rate-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  backdrop-filter: blur(24px);

  .cities {
    height: 40px;
  }

  .chart {
    align-self: stretch;
    height: 280px;
  }

  .legend {
    height: 80px;
    display: flex;
    gap: 40px;
    justify-content: space-around;
  }

  .legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;

    &:first-child {
      .legend-item__value {
        color: #0e61f5;
      }
    }

    &:nth-child(2) {
      .legend-item__value {
        color: #0fd5d1;
      }
    }
  }

  .legend-item__value {
    font-size: 24px;
    font-weight: 600;
  }
}
</style>
l