Merge remote-tracking branch 'origin/dev-dataBoard'

zhengyiming

8 天以前 92921431668181fb6d3387368c751ccc40aba8cf

 src/views/DataBoard/components/DataBoardTableView.vue

New file
@@ -0,0 +1,118 @@
<template>
  <div class="data-board-table">
    <div class="data-board-table-item title">
      <div class="data-board-table-item-icon">排名</div>
      <div class="data-board-table-item-content">企业名</div>
      <div class="data-board-table-item-num">{{ customerName }}</div>
    </div>
    <div
      v-for="(item, index) in props.tableData"
      :key="index"
      class="data-board-table-item"
      :class="{ isOdd: index % 2 === 0 }"
    >
      <div class="data-board-table-item-icon">
        <img
          class="data-board-table-item-icon-img"
          v-if="index < 3"
          :src="iconList[index]"
          alt=""
        />
        <span class="data-board-table-item-icon-index" v-else>{{ index + 1 }}</span>
      </div>
      <div class="data-board-table-item-content ellipsis">{{ item.name }}</div>
      <div class="data-board-table-item-num">
        {{ `${isMoney ? toThousand(item.value) : item.value}${unit}` }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import DataBoardTableIcon1 from '@/assets/dataBoard/data-board-table-icon1.png';
import DataBoardTableIcon2 from '@/assets/dataBoard/data-board-table-icon2.png';
import DataBoardTableIcon3 from '@/assets/dataBoard/data-board-table-icon3.png';
import { toThousand } from '@/utils';

defineOptions({
  name: 'DataBoardTableView',
});

type Props = {
  tableData?: any[];
  unit: string;
  isMoney?: boolean;
  customerName: string;
};

const props = withDefaults(defineProps<Props>(), {
  isMoney: false,
});

const iconList = [DataBoardTableIcon1, DataBoardTableIcon2, DataBoardTableIcon3];
</script>

<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.data-board-table {
  display: flex;
  padding: 0 14px 11px;
  flex-direction: column;
  min-height: 270px;

  .data-board-table-item {
    display: grid;
    align-items: center;
    height: 37px;
    font-size: 14px;
    color: #ffffff;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    grid-template-columns: 60px 3fr 2fr;
    background-image: linear-gradient(
      to right,
      rgba(150, 150, 150, 0),
      rgb(121, 121, 121),
      rgba(150, 150, 150, 0)
    );

    &.title {
      font-size: 14px;
      color: #9d9d9d;
    }

    &.isOdd {
      background-color: #141c2f;
    }

    .data-board-table-item-icon {
      display: flex;
      justify-content: center;

      .data-board-table-item-icon-img {
        width: 24px;
        height: 28px;
      }

      .data-board-table-item-icon-index {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 16px;
        font-size: 14px;
        font-family: YouSheBiaoTiHei Regular;
        color: #ffffff;
        background-color: #3e4b68;
        transform: skewX(-30deg);
      }
    }

    .data-board-table-item-num {
      text-align: right;
    }
  }
}
</style>