yudao-init/src/views/copilot/efficiency/components/sub/std/StdRateItem.vue

<!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
 * @LastEditTime: 2024-06-14 09:58:01
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <div v-if="period == '日'" class="std-rate-item">
    <CityName :value="city.name" />
    <div class="std-rate-item__value">
      <ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
      <ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
    </div>
  </div>
  <div v-else-if="period == '周'" class="std-rate-item">
    <CityName :value="city.name" />
    <div class="std-rate-item__value">
      <ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
      <ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
    </div>
  </div>
  <div v-else-if="period == '月'" class="std-rate-item">
    <CityName :value="city.name" />
    <div class="std-rate-item__value">
      <ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
      <ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
      <!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
    </div>
  </div>
  <div v-else="period == '年'" class="std-rate-item">
    <CityName :value="city.name" />
    <div class="std-rate-item__value">
      <ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
      <ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
      <!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
    </div>
  </div>
</template>

<script>
import CityName from "./CityName.vue";
import ProgressBar from "./ProgressBar.vue";

export default {
  name: "StdRateItem",
  components: { CityName, ProgressBar },
  props: {
    city: {
      type: Object,
      required: true,
    },
    period: {
      type: String,
      default: "日",
    },
    than: {
      type: String,
      default: "同比",
    },
  },
  data() {
    return {
      showDay:true,
    };
  },
  computed: {
    titlePre() {
      console.log(this.city);
      var day1 = new Date();
      var day2 = new Date();
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
      const today = new Date().getDate();
      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 === '同比') {
        return `${year - 1}年${yesterday}日`
      } else if (this.period === '日' && this.than === '环比') {
        return `${dayBeYes}日`
      } else if (this.period === '周' && this.than === '同比') {
        return `${year-1}年本周`
      } else if (this.period === '周' && this.than === '环比') {
        return `上周`
      } else if (this.period === '月' && this.than === '同比') {
        return `${year-1}年${month}月`
      } else if (this.period === '月' && this.than === '环比') {
        return `${lastMonth}月`
      } else {
        return `${year - 1}年`
      }
    },
    title() {
      var day1 = new Date();
      var day2 = new Date();
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
      const today = new Date().getDate();
      const month = new Date().getMonth() + 1;
      const year = new Date().getFullYear();
      if (this.period === '日' && this.than === '同比') {
        return `${yesterday}日`
      } else if (this.period === '日' && this.than === '环比') {
        return `${yesterday}日`
      } else if (this.period === '周' && this.than === '同比') {
        return `本周`
      } else if (this.period === '周' && this.than === '环比') {
        return `本周`
      } else if (this.period === '月' && this.than === '同比') {
        return `${month}月`
      } else if (this.period === '月' && this.than === '环比') {
        return `${month}月`
      } else {
        return `${year}年`
      }
    },
    titleTarget() {
      var day1 = new Date();
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
      const today = new Date().getDate();
      const month = new Date().getMonth() + 1;
      const year = new Date().getFullYear();
      if (this.period === '月') {
        return `${month}月目标${this.city.target}%`
      } else if (this.period === '年') {
        return `${year}年目标${this.city.target}%`
      } else if (this.period === '周') {
        return `本周目标${this.city.target}%`
      } else if (this.period === '日') {
        return `${month}月${today}日目标${this.city.target}%`
      }
    },
  },
};
</script>

<style scoped lang="scss">
.std-rate-item {
  box-shadow: inset 0 0 12px 2px #fff3;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  padding: 12px;
}

.std-rate-item__value {
  flex: 1 1 auto;
  margin: 6px;
  display: flex;
  gap: 12px;
  // height: auto;
  flex-direction: column;
  justify-content: center;
}
</style>