goaf-monitoring-system/src/components/Configurable/detail/CustomTable.vue

<template>
  <div class="table__content" :class="`table__content_${type}`">
    <div class="table__content_label" :class="`table__content_label_${type}`">
      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
    </div>
    <div class="table__content_list" :class="`table__content_list_${type}`">
      <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
        <div
          v-for="(t, i) in columns"
          :key="`svvhbctr-${i}`"
          :style="{ flexBasis }"
          :class="`table__content__list_item_${type} ${t.path ? 'cursor-pointer' : ''}`"
          @click="redirectTo(getFormattedText(item, t.path))"
        >
          <slot :name="t.prop" :scope="item">
            <span>{{ getter(item, t.prop) }}</span>
          </slot>
        </div>
      </div>
      <Empty v-if="!data.length" class="table__content_empty" :image="simpleImage"></Empty>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { get, isNil } from 'lodash-es';
  import { getFormattedText, redirectTo } from '../hooks/helper';
  import { Empty } from 'ant-design-vue';

  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

  let props = withDefaults(
    defineProps<{
      /** B | C */
      type: string;
      /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
      columns: { prop: string; name: string; path?: string }[];
      data: any[];
      defaultValue?: string;
    }>(),
    {
      type: 'B',
      autoScroll: false,
      columns: () => [],
      data: () => [],
      defaultValue: '-',
    }
  );

  const flexBasis = computed(() => {
    return Math.fround(100 / props.columns.length) + '%';
  });

  function getter(o, p) {
    const d = get(o, p);
    return isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
  }
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';

  @font-face {
    font-family: 'douyuFont';
    src: url('/@/assets/font/douyuFont.otf');
  }

  .table__content {
    --image-content-label-A: url('/@/assets/images/sealedGoaf/configurable/table/table-label-A.png');
    --image-content-E: url('/@/assets/images/sealedGoaf/configurable/gallery/bg-C-3.png');
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0;

    .table__content_empty {
      padding: 20px;
      font-size: 20px;
    }

    .table__content_label {
      width: 400px;
      height: 32px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .label-t {
        text-align: center;
        font-size: 14px;
      }
    }

    .table__content_list {
      height: calc(100% - 32px);
      width: 400px;
      display: flex;
      flex-direction: column;
      padding: 5px 0;
      box-sizing: border-box;
      overflow-y: auto;
      .table__content_list_row {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        margin-bottom: 5px;
        span {
          display: inline-block;
          text-align: center;
        }
      }
    }

    .table__content_label_A {
      background-image: var(--image-content-label-A);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #000000;
      width: 100%;
      padding-left: 10px;
    }

    .table__content_list_A {
      width: 100%;
      padding-left: 10px;
      font-weight: bold;
      font-size: 28px;
    }
    /* 第一个子元素：黑色 */
    .table__content_list_row .table__content__list_item_A:nth-child(1) {
      font-size: 14px;
      text-align: left;
      color: #000000;
    }

    /* 第二个子元素：蓝色 */
    .table__content_list_row .table__content__list_item_A:nth-child(2) {
      color: #0052cc;
    }

    /* 第三个子元素：黄色 */
    .table__content_list_row .table__content__list_item_A:nth-child(3) {
      color: #b39f01;
    }

    /* 第四个子元素：橙色 */
    .table__content_list_row .table__content__list_item_A:nth-child(4) {
      color: #e6a23d;
    }

    /* 第五个子元素：红色 */
    .table__content_list_row .table__content__list_item_A:nth-child(5) {
      color: #c45656;
    }

    .table__content_label_B {
      background-image: var(--image-content-label-A);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #000000;
      width: 100%;
      padding-left: 10px;
    }

    .table__content_list_B {
      width: 100%;
      padding-left: 10px;
      font-weight: bold;
      font-size: 28px;
    }
    /* 第一个子元素：黑色 */
    .table__content_list_row .table__content__list_item_B:nth-child(1) {
      font-size: 14px;
      text-align: left;
      color: #000000;
    }

    /* 第二个子元素：蓝色 */
    .table__content_list_row .table__content__list_item_B:nth-child(2) {
      color: #0052cc;
    }

    /* 第三个子元素：绿色 */
    .table__content_list_row .table__content__list_item_B:nth-child(3) {
      color: #4caf50;
    }

    /* 第四个子元素：橙色 */
    .table__content_list_row .table__content__list_item_B:nth-child(4) {
      color: #c97800;
    }

    /* 第五个子元素：红色 */
    .table__content_list_row .table__content__list_item_B:nth-child(5) {
      color: #c45656;
    }
  }

  .table__content_label_C {
    background-image: var(--image-content-label-A);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #000000;
    width: 100% !important;
  }

  .table__content_list_C {
    width: 100% !important;
    font-weight: bold;
    font-size: 15px;
    color: #000000;
    .table__content_list_row {
      color: #000000 !important;
      margin-bottom: 10px !important;
    }
  }
  // /* 第一个子元素：红色 */
  .table__content_list_row .table__content__list_item_C:nth-child(1) {
    color: #ff0000;
  }

  .table__content_label_D {
    background-image: var(--image-content-label-A);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #000000;
    width: 100% !important;
  }

  .table__content_list_D {
    width: 100% !important;
    font-weight: bold;
    font-size: 15px;
    color: #000000;
    text-align: center;
  }
  .table__content_list_row {
    color: #000000 !important;
  }

  .table__content_list_row .table__content__list_item_D:nth-child(1) {
    width: 50px;
  }
  .table__content_list_row .table__content__list_item_D:nth-child(3) {
    color: #2b6ff0;
  }
  .table__content_list_row .table__content__list_item_D:nth-child(4) {
    color: #107f30;
  }

  //
  .table__content_E {
    background-image: var(--image-content-E);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
   .table__content_label_E {
    background-image: var(--image-content-label-A);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #000000;
    width: 100% !important;
    z-index: 10;
  }

  .table__content_list_E {
    width: 100% !important;
    font-weight: bold;
    font-size: 15px;
    color: #000000;
    text-align: center;
    z-index: 10;
  }
  .table__content_list_row {
    color: #000000 !important;
  }
</style>