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__label">{{ lgd.label }}</span>
        <span class="legend-item__value">{{ lgd.value }}</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 today = new Date().getDate();
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      const vt = this.valueTuple;
      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}日良率`, },
          { label: `${year-1}年${month}月${today}日良率` },
        ];
      } else if (this.period === '日' && this.than === '环比') {
        items = [
          { label: `${month}月${today}日良率` },
          { label: `${yesterday}日良率` },
        ];
      } else if (this.period === '周' && this.than === '同比') {
        items = [
          { label: `本周良率`, },
          { label: `${year-1}年本周良率` },
        ];
      } else if (this.period === '周' && this.than === '环比') {
        items = [
          { label: `本周良率`, },
          { label: `上周良率`, },
        ];
      } else if (this.period === '月' && this.than === '同比') {
        items = [
          { label: `${month}月良率`, },
          { label: `${year-1}年${month}月良率`, },
          { label: `${month}月目标良率`, },
        ];
      } else if (this.period === '月' && this.than === '环比') {
        items = [
          { label: `${month}月良率`, },
          { label: `${lastMonth}月良率`, },
          { label: `${month}月目标良率`, },
        ];
      } else {
        items = [
          { label: `${year}年良率`, },
          { label: `${year - 1}年良率` },
          { label: `${year}年目标良率` },
        ];
      }
      let titleValue = vt[1] === null ? 0 + '%' : this.formatNumber(vt[1]) + '%',
        subtitle = {
          日: "本日良率",
          周: "本周良率",
          月: `${month}月良率`,
          年: `${year}良率`,
        }[this.period];
      console.log(vt[1]);
      const t = getOptions({
        // single,
        color: this.color == 1 ? "#4CF0E8" : "#1065ff",
        titleValue,
        subtitle,
        currentName: items[0].label,
        preName: items[1].label,
        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: `${year-1}年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
        ];
      } else if (this.period === '日' && this.than === '环比') {
        items = [
          { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
        ];
      } else if (this.period === '周' && this.than === '同比') {
        items = [
          { label: `${year-1}年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },

        ];
      } else if (this.period === '周' && this.than === '环比') {
        items = [
          { label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
        ];
      } else if (this.period === '月' && this.than === '同比') {
        items = [
          { label: `${year-1}年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },

          { label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
        ];
      } else if (this.period === '月' && this.than === '环比') {
        items = [
          { label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },

          { label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
        ];
      } else {
        items = [
          { label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
          { label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },

          { label: `${year}年目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(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: {
    formatNumber(num) {
      console.log(num);
      // 判断是否为整数
      if (Number.isInteger(num)) {
        return num; // 如果是整数，直接转换为字符串
      } else {
        // 如果不是整数，保留两位小数并转换为字符串
        return num.toFixed(2);
      }
    },
    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;
    // padding: 0 3px;
    // justify-content: center;
    gap: 3px;
    backdrop-filter: blur(24px);
  .cities {
    height: 40px;
  }

    .chart {
      // margin-left: 5%;
      // width: 290px;
      flex: 1 1 auto;
      padding: 0 20%;
      /* margin: 10%; */
      height: 16vh;
      /* min-width: 300px; */
      align-self: stretch;
    }
  .legend {
    height: 80px;
    display: flex;
    color: #fff;
    justify-content: flex-end;
    gap:20px;
    // justify-content: space-between;
  }
  // .legend:nth-child(3){
  //   margin-left: 30px;
  // }
  .legend-item {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    align-items: flex-start;
    gap: 3px;

    &:first-child {
      // margin-left: 5px;
      .legend-item__value {
        color: #0e61f5;
      }
    }

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

.legend-item__label::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 2px;
  top: 6px;
  left: -18px;
}

.legend-item:nth-child(2) .legend-item__label::before {
  background: #12fff5;
}

.legend-item:nth-child(2) .legend-item__value {
  color: #12fff5;
}

.legend-item:nth-child(1) .legend-item__label::before {
  background: #0f65ff;
}

.legend-item:nth-child(1) .legend-item__value {
  color: #0f65ff;
}

.legend-item:nth-child(3) .legend-item__label::before {
  background: #003982;
}
  .legend-item__value {
    font-size: 24px;
    font-weight: 600;
  }
}
</style>