<template>
  <div id="ranking-board">
    <div class="ranking-board-title">AGV运行分布</div>
<!--    <dv-scroll-ranking-board :config="config" />-->
    <dv-scroll-ranking-board :config="config">
      <template #item="{ item }">
        <li class="name">{{ item.name }}</li>
      </template>
    </dv-scroll-ranking-board>
  </div>
</template>

<script>
export default {
  name: 'RankingBoard',
  data () {
    return {
      config: {
        data: [
          {
            name: '模式：'+'手动',
            des:'当前是否占位',
            value: 20
          },
          {
            name: '模式：'+'自动',
            des:'当前是否占位',
            value: 21
          },
          {
            name: '模式：'+'手动',
            des:'当前是否占位',
            value: 15
          },

          // {
          //   name: '计日工',
          //   value: 80
          // },
          // {
          //   name: '路基',
          //   value: 45
          // },
          // {
          //   name: '交安设施',
          //   value: 29
          // },
          // {
          //   name: '除雪',
          //   value: 29
          // },
          // {
          //   name: '绿化',
          //   value: 29
          // }
        ],
        rowNum: 21
      }
    }
  }
}
</script>

<style lang="less">
#ranking-board {
  width: 20%;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;
  padding: 0px 30px;

  .ranking-board-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
  }

  .dv-scroll-ranking-board {
    flex: 1;
  }
  .name {
    line-height: 1.2; /* 设置每行名称的高度 */
    overflow: hidden; /* 控制溢出内容的处理方式 */
    text-overflow: ellipsis; /* 当名称溢出时，使用省略号表示 */
    white-space: nowrap; /* 禁止名称换行 */
  }
}
</style>
