InternalRatingInThePastThreeYears.vue

<template>
  <div>
    <div class="card">
      <div class="card-title">
        <div>{{ threeYData.oneYear }}年内部等级</div>
      </div>
      <div class="grade">
        <van-slider
          v-model="this.value1"
          disabled
          step="4.5"
          :active-color="color1"
        >
          <template #button>
            <div :style="grade_color1" class="custom-button">
              {{ GradeValue1 }}
            </div>
          </template>
        </van-slider>
      </div>
    </div>
    <div class="card">
      <div class="card-title">
        <div>{{ threeYData.twoYear }}年内部等级</div>
      </div>
      <div class="grade">
        <van-slider
          v-model="this.value2"
          disabled
          step="4.5"
          :active-color="color2"
        >
          <template #button>
            <div :style="grade_color2" class="custom-button">
              {{ GradeValue2 }}
            </div>
          </template>
        </van-slider>
      </div>
    </div>
    <div class="card">
      <div class="card-title">
        <div>{{ threeYData.threeYear }}年内部等级</div>
      </div>
      <div class="grade">
        <van-slider
          v-model="this.value3"
          disabled
          step="4.5"
          :active-color="color3"
        >
          <template #button>
            <div :style="grade_color3" class="custom-button">
              {{ GradeValue3 }}
            </div>
          </template>
        </van-slider>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { Slider } from "vant";

Vue.use(Slider);
/**
 * @Description 近三年内部评级情况
 * @Author JiangTao
 * @Date 2021-11-10 下午 04:19
 */
@Component({
  name: "InternalRatingInThePastThreeYears",
})
export default class InternalRatingInThePastThreeYears extends Vue {
  @Prop({ default: {} }) threeYData: any | {}; // 当前选择器的值
  //n表示倍数
  n = 0;
  //默认等级
  value = 0;
  //前一年等级值
  value1 = 0;
  //前两年等级值
  value2 = 0;
  //前三年等级值
  value3 = 0;
  //默认等级颜色
  color = "#999999";
  //前一年等级颜色
  color1 = "#999999";
  grade_color1: any = {};
  //前两年等级颜色
  color2 = "#999999";
  grade_color2: any = {};
  //前三年等级颜色
  color3 = "#999999";
  grade_color3: any = {};
  //前一年等级
  GradeValue1 = "未评级";
  //前一年等级
  GradeValue2 = "未评级";
  //前一年等级
  GradeValue3 = "未评级";

  activated() {
    const vm = this;
    setTimeout(function () {
      vm.grade1(vm.threeYData.oneYearBefore_cnName);
      vm.grade2(vm.threeYData.twoYearBefore_cnName);
      vm.grade3(vm.threeYData.thrYearBefore_cnName);
    }, 500);
  }
  grade1(GradeValue1: any) {
    this.value1 = this.grade(GradeValue1);
    if (GradeValue1 == "" || GradeValue1==null) {
      this.GradeValue1 = "未评级";
    }else{
      this.GradeValue1 = GradeValue1;
    }
    this.color1 = this.color;
    this.grade_color1 = {
      backgroundColor: this.color1,
    };
  }
  grade2(GradeValue2: any) {
    // this.value2 = this.value;
    this.value2 = this.grade(GradeValue2);
    if (GradeValue2 == "" || GradeValue2==null) {
      this.GradeValue2 = "未评级";
    }else{
      this.GradeValue2 = GradeValue2;
    }
    this.color2 = this.color;
    this.grade_color2 = {
      backgroundColor: this.color2,
    };
  }
  grade3(GradeValue3: any) {
    this.value3 = this.grade(GradeValue3);
    if (GradeValue3 == "" || GradeValue3==null) {
      this.GradeValue3 = "未评级";
    }else{
      this.GradeValue3 = GradeValue3;
    }
    this.color3 = this.color;
    this.grade_color3 = {
      backgroundColor: this.color3,
    };
  }
  grade(GradeValue: any) {
    if (GradeValue === "AAA") {
      this.n = 22;
      this.color = "#03bf16";
    } else if (GradeValue === "AA+") {
      this.n = 21;
      this.color = "#03bf16";
    } else if (GradeValue === "AA-") {
      this.n = 20;
      this.color = "#03bf16";
    } else if (GradeValue === "A+") {
      this.n = 19;
      this.color = "#03bf16";
    } else if (GradeValue === "A") {
      this.n = 18;
      this.color = "#03bf16";
    } else if (GradeValue === "A-") {
      this.n = 17;
      this.color = "#03bf16";
    } else if (GradeValue === "BBB+") {
      this.n = 16;
      this.color = "#FFDD56";
    } else if (GradeValue === "BBB") {
      this.n = 15;
      this.color = "#FFDD56";
    } else if (GradeValue === "BBB-") {
      this.n = 14;
      this.color = "#FFDD56";
    } else if (GradeValue === "BB+") {
      this.n = 13;
      this.color = "#FFDD56";
    } else if (GradeValue === "BB") {
      this.n = 12;
      this.color = "#FFDD56";
    } else if (GradeValue === "BB-") {
      this.n = 11;
      this.color = "#FFDD56";
    } else if (GradeValue === "B+") {
      this.n = 10;
      this.color = "#FFDD56";
    } else if (GradeValue === "B") {
      this.n = 9;
      this.color = "#FFDD56";
    } else if (GradeValue === "B-") {
      this.n = 8;
      this.color = "#FFDD56";
    } else if (GradeValue === "CCC+") {
      this.n = 7;
      this.color = "#FF9556";
    } else if (GradeValue === "CCC") {
      this.n = 6;
      this.color = "#FF9556";
    } else if (GradeValue === "CCC-") {
      this.n = 5;
      this.color = "#FF9556";
    } else if (GradeValue === "CC") {
      this.n = 4;
      this.color = "#FF9556";
    } else if (GradeValue === "C") {
      this.n = 3;
      this.color = "#FF9556";
    } else if (GradeValue === "RD") {
      this.n = 2;
      this.color = "#FF5656";
    } else if (GradeValue === "D") {
      this.n = 1;
      this.color = "#FF5656";
    } else {
      this.n = 0;
      this.color = "#999999";
    }
    return 4.5 * this.n;
  }
}
</script>

<style scoped>
.card {
  width: 100%;
  padding: 1.5% 2%;
  box-shadow: 0px 0px 6px rgba(249, 68, 88, 0.15);
  border: 1px solid white;
  margin-bottom: 1.5%;
}
.card-title {
  width: 100%;
}
.card-title div {
  font-size: 18px;
  color: #333333;
  margin-right: 1%;
  font-family: "Arial Normal", "Arial";
}
.custom-button {
  width: 26px;
  color: #fff;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  /*background-color: rgba(238, 10, 36, 1);*/
  /*background-color: #999999;*/
  border-radius: 100px;
}
::v-deep .custom-button {
  width: 60px;
  height: 30px;
  line-height: 30px;
}
.grade {
  width: 95%;
  margin: 0 auto;
  margin-bottom: 1%;
  margin-top: 1%;
}
::v-deep .grade {
  display: flex;
  align-items: center;
}
::v-deep .van-slider__bar {
  padding-top: 5px;
}
::v-deep .van-slider {
  height: 5px;
}
::v-deep .van-slider--disabled {
  opacity: 1;
}
</style>