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

<!-- 智能算法 -->
<template>
  <div class="algorithm">
    <div class="select">
      <div class="top" @click="selectFlag2 = true">
        {{ typeName2 }}
        <div class="light"></div>
      </div>
      <div class="bottom" v-show="selectFlag2">
        <span class="light"></span>
        <div v-for="val in dictList" :key="val" @click="getList2(val)">
          {{ val }}
        </div>
      </div>
    </div>
    <div class="algorithm-class">
      <div
        v-for="(item, index) in dataList"
        :key="`algorithm-${index}`"
        class="algorithm-card"
      >
        <a-image
          :src="algorithmCardPhoto(item.infoList, item)"
          :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 { getCategoryTreePage } from '@/api/personalCenter'
  import { pageWithAttrs } from '@/api/abilityStatistics'
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  const typeName2 = ref('全部')
  const dictList = ref([])
  const dataList = ref([])
  const selectFlag2 = ref(false)
  getCategoryTreePage({
    page: 1,
    limit: 99,
    dictTypeId: '1513712507692818433',
  }).then((res) => {
    dictList.value = ['全部']
    res.data.data.list.map((val) => {
      // if (val.dictLabel !== '其他') {
      dictList.value.push(val.dictLabel)
      // }
    })
  })
  const params = {
    deptIds: [],
    districtId: '',
    infoList: [{ attrType: '组件类型', attrValue: '智能算法' }],
    orderField: 'pin_top',
    orderType: 'DESC',
    pageNum: 1,
    pageSize: 9,
    type: '组件服务',
  }
  const getList2 = (val) => {
    typeName2.value = val
    if (val == '全部') {
      params.infoList = [{ attrType: '组件类型', attrValue: '智能算法' }]
    } else {
      params.infoList = [
        { attrType: '组件类型', attrValue: '智能算法' },
        { attrType: '应用领域', attrValue: val },
      ]
    }
    selectFlag2.value = false
    pageWithAttrsFunction()
  }
  let algorithmclass = null
  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
  const dataLength = ref(true)
  const isNoMore = ref(false)
  let url = ref('')
  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, item) => {
    let obj = List.filter((item) => item.attrType === '应用场景')[0]
    if (obj && obj.attrValue != '') {
      console.log(
        item.name,
        item.id,
        obj.attrValue,
        '----------------------------'
      )
      obj = JSON.parse(obj.attrValue)[0].img
    }
    return obj || ''
  }
  //跳转详情页
  const detailFunction = (id) => {
    window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
  }
  const algorithmFunction = (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', algorithmFunction, true)
    }
  })
  onBeforeUnmount(() => {
    algorithmclass.removeEventListener('scroll', algorithmFunction, true)
  })
</script>

<style lang="less" scoped>
  .algorithm {
    .select {
      margin: 0.1rem 0 0.1rem 0.2rem;
      color: #fff;
      font-size: 0.2rem;
      font-family: webfont;
      position: relative;
      .top {
        cursor: pointer;
        width: 3.61rem;
        height: 0.85rem;
        font-weight: 600;
        text-align: center;
        padding-top: 0.1rem;
        background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
        background-size: 100%;
        position: relative;
        .light {
          width: 0.56rem;
          height: 3px;
          position: absolute;
          top: 0.4rem;
          left: 1.52rem;
          background: url('~@/assets/capacitySquare/select-light1.png')
            no-repeat;
          background-size: 100%;
        }
      }
      .bottom {
        cursor: pointer;
        position: absolute;
        top: 0.5rem;
        left: 0.9rem;
        z-index: 1000;
        background: rgba(57, 134, 239, 0.68);
        border: 1px solid #aed5ff;
        .light {
          display: inline-block;
          width: 2.39rem;
          height: 5px;
          position: absolute;
          top: -0.08rem;
          left: -0.3rem;
          background: url('~@/assets/capacitySquare/select-light2.png')
            no-repeat;
          background-size: 100%;
        }
        & > div {
          width: 1.8rem;
          height: 0.4rem;
          line-height: 0.4rem;
          text-align: center;
          border-top: 1px solid #aed5ff;
        }
        & > div:nth-of-type(1) {
          border: none;
        }
      }
    }
    .algorithm-class {
      // margin-top: 0.6rem;
      margin-bottom: 0.18rem;
      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% 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>