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

<!-- 智能算法 -->
<template>
  <div class="algorithm">
    <div class="algorithm-class">
      <div
        v-for="(item, index) in dataList"
        :key="`algorithm-${index}`"
        class="algorithm-card"
      >
        <div class="algorithm-card-title">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { pageWithAttrs } from '@/api/abilityStatistics'
  import { ref, onMounted } from 'vue'
  const dataList = ref([])
  const params = {
    deptIds: [],
    districtId: '',
    infoList: [{ attrType: '组件类型', attrValue: '智能算法' }],
    orderField: 'visits',
    orderType: 'DESC',
    pageNum: 1,
    pageSize: 9,
    type: '组件服务',
  }
  const isNoMore = ref(false)
  const pageWithAttrsFunction = () => {
    pageWithAttrs(params).then((res) => {
      dataList.value = res.data.data.records
    })
  }
  pageWithAttrsFunction()
  onMounted(() => {
    const algorithmclass = document.querySelector('.algorithm-class')
    algorithmclass.addEventListener('scroll', (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) {
        // 当前滚动条已经触底
        isNoMore.value = true
        params.pageNum++
        pageWithAttrs(params).then((res) => {
          dataList.value.push(...res.data.data.records)
        })
      } else {
        isNoMore.value = false
      }
    })
  })
</script>

<style lang="less" scoped>
  .algorithm {
    .algorithm-class {
      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.25rem;
        background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
        background-size: 100%;
        margin-bottom: 0.3rem;
        margin-right: 0.65rem;
        position: relative;
        .algorithm-card-title {
          position: absolute;
          height: 0.6rem;
          width: 100%;
          color: #ffffff;
          font-size: 0.22rem;
        }
      }
    }
    .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>