hi-ucs/front/src/views/capacitySquare/components/layer.vue

<!-- 图层服务 -->
<template>
  <div class="algorithm">
    <div class="algorithm-class">
      <div
        v-for="(item, index) in dataList"
        :key="`algorithm-${index}`"
        class="algorithm-card"
      >
        <a-image
          :src="algorithmCardPhoto(item.infoList)"
          :width="525"
          :height="275"
          :fallback="imgSrc"
          :preview="false"
        ></a-image>

        <a-tooltip>
          <template #title>{{ item.name }}</template>
          <div class="algorithm-card-title" @click="detailFunction(item.id)">
            <span>{{ item.name }}</span>
            <span>{{ item.deptName }}</span>
          </div>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { pageWithAttrs } from '@/api/abilityStatistics'
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  const dataList = ref([])
  let algorithmclass = null
  const params = {
    deptIds: [],
    districtId: '',
    infoList: [{ attrType: '组件类型', attrValue: '图层服务' }],
    orderField: 'deptSort',
    orderType: 'DESC',
    pageNum: 1,
    pageSize: 9,
    type: '组件服务',
  }
  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
  const dataLength = ref(true)
  const isNoMore = ref(false)
  const pageWithAttrsFunction = () => {
    pageWithAttrs(params).then((res) => {
      dataList.value = res.data.data.records
      if (res.data.data.records.length < 9) {
        dataLength.value = false
      }
    })
  }
  pageWithAttrsFunction()
  //图片显示
  const algorithmCardPhoto = (List) => {
    let url = ''
    List.map((item) => {
      if (item.attrType === '图层缩略图') {
        url = item.attrValue
      }
    })
    return url
  }
  //跳转详情页
  const detailFunction = (id) => {
    window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
  }
  const layerFunction = (e) => {
    var scrollTop = e.currentTarget.scrollTop
    var windowHeight = e.currentTarget.clientHeight
    var scrollHeight = e.currentTarget.scrollHeight
    console.log(scrollTop, windowHeight, scrollHeight, '123')
    if (
      scrollTop + windowHeight <= scrollHeight + 1 &&
      scrollTop + windowHeight >= scrollHeight - 1
    ) {
      // 当前滚动条已经触底
      isNoMore.value = true
      params.pageNum++
      pageWithAttrs(params).then((res) => {
        dataList.value.push(...res.data.data.records)
        if (res.data.data.records.length < 9) {
          dataLength.value = false
        }
      })
    } else {
      isNoMore.value = false
    }
  }
  onMounted(() => {
    algorithmclass = document.querySelector('.algorithm-class')
    if (dataLength.value) {
      //监听滚动事件
      algorithmclass.addEventListener('scroll', layerFunction, true)
    }
  })
  onBeforeUnmount(() => {
    algorithmclass.removeEventListener('scroll', layerFunction, true)
  })
</script>

<style lang="less" scoped>
  .algorithm {
    .algorithm-class {
      margin-top: 0.6rem;
      margin-bottom: 0.59rem;
      display: grid;
      grid-template-columns: repeat(3, 33%);
      height: 8.8rem;
      overflow: auto;
      margin-left: 1.15rem;
      margin-right: 0.15rem;
      .algorithm-card {
        height: 2.75rem;
        width: 5.23rem;
        background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
        background-size: 100% 100%;
        margin-bottom: 0.4rem;
        margin-right: 0.65rem;
        position: relative;
        :deep(.ant-image) {
          img {
            margin-top: 0.15rem;
            height: 2.45rem;
            width: 5.05rem;
            margin-left: 0.1rem;
          }
        }
        .algorithm-card-photo {
          height: 100%;
          width: 100%;
          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
            no-repeat;
          background-size: 100%;
        }
        .algorithm-card-title {
          position: absolute;
          height: 0.6rem;
          margin-left: 0.08rem;
          width: 97%;
          color: #ffffff;
          font-size: 0.22rem;
          font-family: alibaba;
          bottom: 0.15rem;
          padding-left: 0.22rem;
          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
            no-repeat;
          background-size: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          span {
            line-height: 0.24rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
          }
          span:last-child {
            font-size: 0.14rem;
          }
        }
      }
    }
    .algorithm-class::-webkit-scrollbar-track-piece {
      background: #a5bcdb;
      border-radius: 0.08rem;
    }
    .algorithm-class::-webkit-scrollbar-thumb {
      height: 3.2rem;
      background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
    }
    .algorithm-class::-webkit-scrollbar {
      height: 8.8rem;
      width: 0.08rem;
      border-radius: 0.08rem;
    }
  }
</style>