meilan-web/src/views/blockingData/blockingDataScreen/components/RankList.vue

<template>
  <div class="rank-list-container">
    <div class="rank-list-header">
      <span class="header-label">{{ headerLabel }}</span>
      <span class="header-name">{{ headerName }}</span>
      <span class="header-count">{{ headerCount }}</span>
    </div>
    <div class="rank-list-body">
      <div v-for="(item, index) in rankedData" :key="index" class="rank-item" :class="getItemClass(item.rank, index)">
        <span class="rank-number" :class="'rank-number-' + getRankClass(item.rank)">NO.{{ item.rank }}</span>
        <div class="rank-info">
          <span class="rank-name">{{ item.name }}</span>
          <div class="rank-bar">
            <div class="rank-bar-fill" :class="'rank-bar-fill-' + getRankClass(item.rank)" :style="{ width: getProgressWidth(item.value, maxValue) + '%' }"></div>
          </div>
        </div>
        <span class="rank-count">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  rankData: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: '排行榜'
  },
  headerLabel: {
    type: String,
    default: '排名'
  },
  headerName: {
    type: String,
    default: '分管班组长'
  },
  headerCount: {
    type: String,
    default: '计数'
  }
})

const maxValue = computed(() => {
  if (props.rankData.length === 0) return 100
  return Math.max(...props.rankData.map(item => item.value))
})

// 计算并列排名（中国式排名：并列后下一个排名+1）
const rankedData = computed(() => {
  if (props.rankData.length === 0) return []
  
  // 按value降序排序
  const sorted = [...props.rankData].sort((a, b) => b.value - a.value)
  
  let currentRank = 1
  let previousValue = null
  
  return sorted.map((item) => {
    // 如果当前value小于前一个value，排名+1
    if (previousValue !== null && item.value < previousValue) {
      currentRank++
    }
    previousValue = item.value
    return {
      ...item,
      rank: currentRank
    }
  })
})

const getRankClass = (rank) => {
  if (rank === 1) return 'first'
  if (rank === 2) return 'second'
  if (rank === 3) return 'third'
  return 'default'
}

const getProgressWidth = (value, max) => {
  return (value / max) * 100
}

const getItemClass = (rank, index) => {
  const baseClass = 'rank-item rank-item-' + getRankClass(rank)
  if (rank <= 3) return baseClass
  const isGray = (index - 3) % 2 === 0
  return baseClass + (isGray ? ' rank-item-gray' : '')
}
</script>

<style lang="less" scoped>
.rank-list-container {
  width: 100%;
  height: 300px; /* 固定高度 */
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止容器溢出 */
}

.rank-list-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #e5e7eb;
 
  flex-shrink: 0; /* 防止头部被压缩 */
}

.header-label {
  width: 80px;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.header-name {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.header-count {
  width: 80px;
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.rank-list-body {
  flex: 1;
  overflow-y: auto; /* 启用垂直滚动 */

  
  /* 自定义滚动条样式 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 4px;
  
  min-height: 40px; /* 最小高度确保项目可见 */
}

.rank-item:last-child {
  margin-bottom: 0;
}

.rank-item-first {
  background-color: #fef9e7;
}

.rank-item-second {
  background-color: #f3f4f6;
}

.rank-item-third {
  background-color: #fef2f2;
}

.rank-item:hover {
  background-color: #f9fafb;
}

.rank-item-gray {
  background-color: #f3f4f6;
}

.rank-number {
  font-weight: bold;
  font-size: 15px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 8px;
  min-width: 60px;
  text-align: center;
}

.rank-number-first {
  background: linear-gradient(135deg, #EFB63D, #F8CA4D);
  color: #fff;
}

.rank-number-second {
  background: linear-gradient(135deg, #C4CAE1, #E0E4ED);
  color: #fff;
}

.rank-number-third {
  background: linear-gradient(135deg, #D6A089, #E9C0AF);
  color: #fff;
}

.rank-number-default {
  background-color: #e5e7eb;
  color: #6b7280;
}

.rank-info {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.rank-name {
  font-size: 15px;
  color: #1f2937;
  font-weight: 500;
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-bar {
  flex: 1;
  height: 12px;
  background-color: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.rank-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease-out;
}

.rank-bar-fill-first {
  background: #FFCA00;
}

.rank-bar-fill-second {
  background: #C4C9DF;
}

.rank-bar-fill-third {
  background: #D99B86;
}

.rank-bar-fill-default {
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

.rank-count {
  width: 80px;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin-left: 8px;
}
</style>