lg_frontend/components/peak-coal-monitoring/PeakCustomTable2.vue

<!--自定义table-->
<template>
  <div class="custom-table">
    <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" v-if="dataSource.length && tableRoll">
          <vue-seamless-scroll
            v-if="dataSource.length && tableRoll"
            ref="vueSeamless"
            :data="dataSource"
            class="seamless-scroll"
            :class-option="defaultOption"
          >
            <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">
                  <div class="_value">{{ item[dataIndex.dataIndex] }}</div>
                  <div class="_unit" v-if="dataIndex.dataUnit">{{ item[dataIndex.dataUnit] }}</div>
                </div>
              </div>

            </span>
            </div>
          </vue-seamless-scroll>
        </div>
        <div class="table-body" v-if="dataSource.length && !tableRoll">
          <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">
                  <div class="_value" v-if="dataIndex.dataIndex !== 'operation'">{{ item[dataIndex.dataIndex] }}</div>
                  <div class="_operation" v-else @click="viewDetail(item)">详情</div>
                  <div class="_unit" v-if="dataIndex.dataUnit">{{ item[dataIndex.dataUnit] }}</div>
                </div>
              </div>

            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: "PeakCustomTable",
  components: {vueSeamlessScroll},
  props: {
    tableTitle: {
      type: Array,
      default: () => []
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    tableRoll: {
      type: Boolean,
      default: true
    },
    limitMoveNum: {
      type: Number,
      default: 9
    }
  },
  data() {
    return {}
  },
  computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: this.limitMoveNum, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  methods: {
    viewDetail(val){
      console.log('val:',val)
    }
  }
}
</script>

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

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

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

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

      .table-header {
        position: sticky;
        top: 0;
        height: 40px;
        opacity: 1;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
        line-height: 40px;
        word-break: keep-all;

        .table-header-item {
          display: inline-block;
          font-family: MicrosoftYaHei-Bold;
          /** 文本1 */
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 40px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          vertical-align: top;

        }
      }

      .table-body {
        height: calc(100% - 30px);

        .seamless-scroll {
          height: 100%;
          overflow: hidden;
        }

        .table-item-body {
          margin-top: 10px;
          width: 100%;
          white-space: nowrap;
          height: 30px;
          opacity: 1;
          background: rgba(255, 255, 255, 0.01);
          box-shadow: 0px 1px 0px  rgba(29, 198, 247, 0.2);
          line-height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;

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

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

            .point-name {
              .text-ellipsis;
              .flex-row;

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

              ._operation{
                font-family: MicrosoftYaHei-Bold;
                font-size: 14px;
                color: #FFFFFF;
                letter-spacing: 0;
                font-weight: 700;
                cursor: pointer;
              }

              ._unit {
                font-family: MicrosoftYaHei-Bold;
                font-size: 12px;
                color: #FFFFFF;
                letter-spacing: 0;
                font-weight: 700;
              }
            }

            ._icon {
            }
          }

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

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


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

            ._value {
              font-family: MicrosoftYaHei-Bold;
              font-size: 14px;
              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>