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

<!--
    filename: ProgressBar.vue
    author: liubin
    date: 2024-04-29 09:18:30
    description:
-->

<template>
  <div class="progress-bar" :data-title="title" :data-rate="current + '%'">
    <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
  </div>
</template>

<script>
export default {
  name: "ProgressBar",
  components: {},
  props: {
    value: {
      type: Number,
      default: 0,
    },
    target: {
      type: Number,
      default: 0,
    },
    previous: {
      type: Number,
      default: 0,
    },
    current: {
      type: Number,
      default: 0,
    },
    // total: {
    //   type: Number,
    //   default: 0,
    // },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {
    dataRate() {
      // if (this.current != 0 && this.target != 0) {
        console.log( '1111111111', this.current, this.target,this.previous);
      return this.current == 0 && this.target == 0
          ? 0
        : this.current != 0 && this.target != 0
          ? `${((this.current / this.target) * 100).toFixed(2)}%`
          : this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? parseFloat(this.current).toFixed(2) + '%' : 0 + '%'
      // } else if(this.previous != 0) {
      //   return this.previous + '%'
      // }
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.progress-bar {
  height: 10px;
  background-color: #002f6b;
  border-radius: 4px;
  margin-bottom: 12px;
  position: relative;

  &:before {
    content: attr(data-title);
    display: inline-block;
    color: #fff;
    position: absolute;
    bottom: -200%;
    font-size: 12px;
  }

  &:after {
    content: attr(data-rate);
    display: inline-block;
    color: #fff;
    position: absolute;
    bottom: -200%;
    right: 0;
    font-size: 12px;
  }

  &:first-child {
    &:after {
      color: #11eae3;
    }
  }

  &:nth-child(2) {
    &:after {
      color: #0e65fd;
    }
  }

  .progress-bar__rate {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 0;
    border-radius: 4px;
     background: linear-gradient(to right,
          #004c5e11 10%,
          #004c5e,
          #0ac0c0,
          #11eae3);
  }

  &:first-child {
    .progress-bar__rate {
      background: linear-gradient(to right,
          #004c5e11 10%,
          #004c5e,
          #0ac0c0,
          #11eae3);
    }
  }

  &:nth-child(2) {
    .progress-bar__rate {
      background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd);
    }
  }
}
</style>