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 style="flex:1;padding: 0 20%;"> -->
    <div class="chart" ref="chart"></div>
    <!-- </div> -->
    <div class="legend" >
      <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: "日",
    },
    than: {
      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() {
      let items = [];
      var day1 = new Date();
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
      //今天的时间
      // var day2 = new Date();
      // day2.setTime(day2.getTime());
      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
      const today = new Date().getDate();
      // let yesterday = new Date().getDate() -1;
      const month = new Date().getMonth() + 1;
      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
      const year = new Date().getFullYear();
      if (this.period === '日' && this.than === '同比') {
        items = [
          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
          { label: `去年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
        ];
      } else if (this.period === '日' && this.than === '环比') {
        items = [
          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
          { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
        ];
      } else if (this.period === '周' && this.than === '同比') {
        items = [
          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
          { label: `去年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
        ];
      } else if (this.period === '周' && this.than === '环比') {
        items = [
          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
          { label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
        ];
      } else if (this.period === '月' && this.than === '同比') {
        items = [
          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
          { label: `去年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
          { label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
        ];
      } else if (this.period === '月' && this.than === '环比') {
        items = [
          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
          { label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
          { label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
        ];
      } else {
        items = [
          { label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
          { label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null  ? 0 + "%" : (this.valueTuple[0]) + "%" },
          { label: `${year}年目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
        ];
      }
      return items
      // [
      //   {
      //     label:
      //       this.period == "月"
      //         ? `${year - 1}年${month}月良率`
      //         : `${year - 1}年良率`,
      //     value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
      //   },
      //   {
      //     label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
      //     value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
      //   },
      // ];
    },
  },
  mounted() {
    this.initOptions(this.options);
  },
  watch: {
    period() {
      console.log(this.$store.getters.copilot.efficiency)
      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 {
      // margin-left: 5%;
      // width: 290px;
      align-self: stretch;
      // flex: 1 1 auto;
    // align-items: center;
      // margin:0 auto;
      // padding: 0 10%;;
      /* margin: 10%; */
      /* min-width: 300px; */
      height: 200px;
    }
  .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>