lg_frontend/components/CustomTable.vue

<!--自定义table-->
<template>
  <div class="custom-table" :class="[type]">
    <div class="check-data-info">
      <div class="table-info">
        <div class="table-header">
          <span class="table-header-item" v-for="(item,index) of tableTitle"
                :style="`width:${item.width};`">
            {{ item.title }}
          </span>
        </div>
        <div class="table-body">
          <div class="table-item-body" v-for="item of dataSource">
            <span class="data-content" v-for="dataIndex of tableTitle" :style="`width:${dataIndex.width};`">
              <div class="_content">
                <div class="point-name">
              {{ item[dataIndex.dataIndex] }}
                </div>

            <div class="_icon" :class="getOddsRatioIcon(item[dataIndex.dataIndex],dataIndex.dataIndex)">

            </div>
              </div>

            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CustomTable",
  props: {
    /**
     * 地图类型
     * @param { 'big' | 'small' } type
     */
    type: {
      type: String,
      default: 'big'
    },
    tableTitle: {
      type: Array,
      default: () => []
    },
    standardValue: {
      type: Object,
      default: () => {
      }
    },
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    //判断数值是上升还是下降
    getOddsRatioIcon(val, valType) {
      if (this.standardValue != null && this.standardValue[valType]) {
        if (val > this.standardValue[valType]) {
          return 'odds-ratio-up-icon'
        } else if (val < this.standardValue[valType]) {
          return 'odds-ratio-reduction-icon'
        }
      }

    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";

.custom-table {
  height: 100%;
  width: 100%;
  overflow: auto;
  &.middle {
    height: 1200px !important;
    .table-header {
      font-size: 20px !important;
    }
    .data-content {
      height: 50px !important;
    }


    .table-header {
      height: 50px !important;
      .table-header-item {
        font-size: 30px !important;
        line-height: 50px !important;
      }
    }
    .table-info, .check-data-info {
      height: 1200px !important;
    }
    .table-body {
      height: 1200px !important;
      overflow-y: auto;
      .table-item-body {
        margin-top: 10px !important;
        height: 50px !important;
      }
      .point-name {
        font-size: 30px !important;

      }
    }
    .odds-ratio-up-icon {
      width: 11px !important;
      height: 11px !important;
      padding-left: 10px !important;
    }
    .odds-ratio-reduction-icon {
      width: 11px !important;
      height: 11px !important;
      padding-left: 10px !important;
    }
    .data-value {
      ._value {
        font-size: 16px !important;
      }
    }
  }

  .check-data-info {
    height: 100%;
    width: 100%;

    .table-info {
      width: 100%;
      height: 100%;
      overflow: auto;

      .table-header {
        position: sticky;
        top: 0;
        height: 100px;
        white-space: nowrap;
        background-color: #063367;
        .table-header-item {
          background-color: rgba(35, 140, 255, 0.2);
          display: inline-block;
          font-family: MicrosoftYaHei-Bold;
          font-size: 46px;
          color: #37EAFF;
          letter-spacing: 0;
          text-align: center;
          line-height: 100px;
          font-weight: 700;
        }
      }

      .table-body {
        height: calc(100% - 100px);
        .table-item-body {
          height: 100px;
          margin-top: 20px;
          width: 100%;
          white-space: nowrap;

          .data-content {
            display: inline-block;
            height: 100px;
            background: rgba(21, 77, 160, 0.20);

            ._content {
              height: 100%;
              width: 100%;
              .flex-row;
              justify-content: center;
            }

            .point-name {
              font-family: MicrosoftYaHei-Bold;
              font-size: 46px;
              color: #FFFFFF;
              letter-spacing: 0;
              font-weight: 700;
              text-align: center;
              .text-ellipsis;
            }

            ._icon {
            }
          }

          .odds-ratio-up-icon {
            width: 23px;
            height: 25px;
            padding-left: 20px;
            background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
          }

          .odds-ratio-reduction-icon {
            width: 22px;
            height: 26px;
            padding-left: 20px;
            background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
          }


          .data-value {
            .flex-row;
            justify-content: center;

            ._value {
              font-family: MicrosoftYaHei-Bold;
              font-size: 29.97px;
              color: #FFFFFF;
              letter-spacing: 0;
              text-align: center;
              font-weight: 700;
            }
          }
        }
      }
    }
  }

}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: rgba(21, 77, 160, 0.20);;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background-color: #d3dce6;
}
</style>