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

<!-- 图层服务 -->
<template>
  <div class="algorithm">
    <div style="display: flex">
      <div class="select">
        <div class="top" @click="selectFlag = !selectFlag">
          {{ typeName }}
          <div class="light"></div>
        </div>
        <div class="bottom" v-show="selectFlag">
          <span class="light"></span>
          <div @click="getList('全市')">全市</div>
          <div @click="getList('市级')">市级</div>
          <div @click="getList('区级')">区级</div>
          <div @click="getList('企业')">企业</div>
        </div>
      </div>
      <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>
    <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 { getCategoryTreePage } from '@/api/personalCenter'
import { pageWithAttrs } from '@/api/abilityStatistics'
import { ref, onMounted, onBeforeUnmount } from 'vue'

const type = ref(null)
const typeName = ref('全市')
const typeName2 = ref('全部')
const dictList = ref([])
const dataList = ref([])
const selectFlag2 = ref(false)
const selectFlag = 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: 'deptSort',
  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 algorithmclassDom = null
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 getList = (str) => {
  if (str) {
    algorithmclassDom.scrollTop = 0
    switch (str) {
      case '全市':
        type.value = null
        typeName.value = '全 市'
        break
      case '市级':
        type.value = 2
        typeName.value = '市 级'
        break
      case '区级':
        type.value = 3
        typeName.value = '区 级'
        break
      case '企业':
        type.value = 4
        typeName.value = '企 业'
        break
    }
    params.pageNum = 1
  }
  selectFlag.value = false
  alert('调取接口')
  // getData(str)
}

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(() => {
  algorithmclassDom = document.querySelector('.algorithm-class')
  if (dataLength.value) {
    //监听滚动事件
    algorithmclassDom.addEventListener('scroll', layerFunction, true)
  }
})
onBeforeUnmount(() => {
  algorithmclassDom.removeEventListener('scroll', layerFunction, 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.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>