封装一个排行榜

功能：后台返回一个数组，这组数组根据金额的大小，由大到小进行排列

前端：将处理好的数据添加一个排名，同等的金额，排名也相同

  思路：将数组中金额最大的金额提取出来，其长度为满格（即：初始长度），之后的金额长度为（对应的金额/最大金额）*初始长度

  排名：给数组中的对象添加一个字段（例如：status），将数组的相邻两个金额做对比，如果相同，则排名相同，若不同，排名为当前组数下标+1

 代码：

1.封装的排行榜

<template>
    <div class="horizontalStrip">
        <div  v-for="(item,index) in turnRankArr" :key="index">
            <div class="bar">
                <div  v-if="item.status==0"><img src="../assets/firstAward.png" style="width:20.04px;height:23.04px;"></div>
                <div v-if="item.status==1"><img src="../assets/secondAward.png" style="width:20.04px;height:23.04px;"></div>
                <div v-if="item.status==2"><img src="../assets/thirdAward.png" style="width:20.04px;height:23.04px;"></div>
                //排行榜的排名
                <div v-if="item.status!='0' && item.status!='1' && item.status!='2'" style="width:20.04px;height:23.04px;text-align: center;">{{index+1}}</div>
                //排行榜的名称
                <div class='barName' :title="item.buildName">{{item.buildName}}</div>
                //排行榜的长度
                <div class="barPro" :style="{width:item.width}"></div>
                //单位
                <div style="margin-left:12px">{{item.totalPrice.toLocaleString()}}&nbsp;{{unit}}</div>
            </div>
        </div>        
    </div>
</template>
<script>
export default {
    props:['turnRankArr','title'],
    data(){
        return{
            unit:'',
        }
    },
    mounted(){
        this.judgmentTitle()
    },
    methods:{
        judgmentTitle(){
            if(this.title=='1'){
                this.unit='元'
            }else{
                this.unit='度'
            }
        },
    },
}
</script>
<style lang="scss" scoped>
    .bar{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 13px;
        height: 30px;
        .barName{
            width:79.2px;
            height: 24px;
            overflow: hidden;
            white-space: nowrap; 
            text-overflow: ellipsis;
            margin:0 12px;
        }
        .barPro{
            width: 240px;
            height: 9.96px;
            border-radius: 5.04px;
            background: #04BBFF 
        }
    }
</style>

2.页面调用封装的排行榜组件

<template>
  <div>
      <div class="title" v-if="leaderboard.length>0 && turnRankArr.length>0">
          <horizontalStrip :turnRankArr="turnRankArr" :title="title"></horizontalStrip>
      </div>
  </div>
</template>
<script>
//调用排行榜组件
import horizontalStrip from "../../components/horizontalStrip";
//接口调用
import {selectDetailsPriceRatioByCity} from "../../utils/urls.js";
export default {
  components: {
    horizontalStrip
  },
  data(){
    turnRankArr:[],
    title: "1",
  },
  mounted(){
    this.showOne()
  },
  methods:{
    showOne() {
      if (this.leaderboard.length) {
        this.$post(selectHomePagePriceByBuild, this.getOneQuery()).then(res => {
          if (res.status == 1) {
            this.turnRankArr = res.data.rows;
            if (this.turnRankArr.length > 0) {
              let a = this.turnRankArr[0].totalPrice;
              this.turnRankArr.forEach((item, index) => {
                item.status = index;
                let b = item.totalPrice;
                let c = (b / a) * 200 + "px";
                item.width = c;
              });
             let cc = this.userRankArr;
             for (let i = 0; i < cc.length; i++) {
               for (let j = 1; j < cc.length; j++) {
                  if (j == 1 + i) {
                     if (cc[i].totalPrice == cc[j].totalPrice) {
                       cc[j].status = cc[i].status;
                      }
                   }
                }
              }
            }
          }
        });
      }
    },
    //参数
    getOneQuery() {
      let bb = this.formline
      let param = {
        provinceCode: bb.provinceCode,
        cityCode: bb.cityCode,
        areaCode: bb.areaCode,
        buildCodes:bb.buildCodes,
        userTypes: bb.userTypes.toString(),
        startTime:
          bb.time.length > 1
            ? this.$moment(bb.time[0]).format("YYYY-MM-DD")
            : "",
        endTime:
          bb.time.length > 1
            ? this.$moment(bb.time[1]).format("YYYY-MM-DD")
            : "",
        page: 1,
        size: 500
      };
      return param;
    },
  }
}