dvcp_v2_webapp/ui/dv/layout/AiRanking/components/Ranking2.vue

<template>
  <div class="Ranking2" :class="'Ranking2-' + theme">
    <div class="Ranking-item" v-for="(item, index) in list" :key="index" :class="'Ranking-item' + (index + 1)">
      <div class="Ranking-item__top">
        <div class="left">
          <i>{{ index + 1 > 9 ? '' : '0' }}{{ index + 1 }}</i>
          <h2>{{ item.name }}</h2>
        </div>
        <span>{{ item.value }}</span>
      </div>
      <div class="Ranking-item__rate--wrapper">
        <div class="Ranking-item__rate" :style="{width: item.rate + '%'}">
          <div class="bar"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Ranking2',

    props: {
      data: {
        type: Array,
        default: () => []
      },

      theme: {
        type: String,
        default: '0'
      }
    },

    watch: {
      data: {
        handler (v) {
          this.init(v)
        },
        deep: true,
        immediate: true
      }
    },

    data () {
      return {
        list: []
      }
    },

    methods: {
      init (v) {
        if (!v.length) {
          this.list = []
          return false
        }

        const total = this.sum(v.map(v => v.value))
        this.list = v.map(e => {
          return {
            ...e,
            rate: ((Number(e.value) / total) * 100).toFixed(2)
          }
        })
      },

      sum (arr) {
        return arr.reduce((x, y) => x + y)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Ranking2 {
    height: 100%;
    overflow-y: auto;

    .Ranking-item {
      margin-bottom: 16px;

      .Ranking-item__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        .left {
          display: flex;
          align-items: center;
          height: 24px;

          i {
            width: 24px;
            height: 24px;
            line-height: 24px;
            margin-right: 11px;
            text-align: center;
            color: #fff;
            font-style: normal;
            font-size: 14px;
            border: 1px solid #fff;
          }

          h2 {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            font-weight: 500;
          }
        }

        span {
          color: #fff;
          font-weight: 700;
          font-size: 18px;
        }
      }

      .Ranking-item__rate--wrapper {
        height: 6px;
        border-radius: 8px;
        background: rgba(128, 136, 142, 0.4);
      }

      .Ranking-item__rate {
        position: relative;

        .bar {
          position: relative;
          height: 6px;
          border-radius: 8px;
          background: rgb(24, 254, 254);
          box-shadow: 0 0 4px 0 rgba(24, 254, 254, 0.6);
        }
      }
    }

    &.Ranking2-1 {
      .Ranking-item {
        .Ranking-item__rate--wrapper {
          background: rgba(121, 74, 59, 0.4);
        }

        .Ranking-item__rate {
          position: relative;

          .bar {
            background: rgb(255, 186, 68);
            box-shadow: 0 0 4px 0 rgba(255, 186, 68, 0.6);
          }
        }
      }
    }
  }
</style>