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="changeDeptType('全市')">全市</div>
          <div @click="changeDeptType('市级')">市级</div>
          <div @click="changeDeptType('区级')">区级</div>
          <div @click="changeDeptType('企业')">企业</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="changeAreaFunction(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="item.pic || imgSrc"
          :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 { getGisByArea } from '@/api/home'
  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
  const deptType = 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 = {
    pageNum: 1,
    type: '图层服务',
    area: typeName2.value == '全部' ? '' : typeName2.value,
    pageSize: 9, // 固定9
  }
  // 切换领域
  const changeAreaFunction = (val) => {
    params.pageNum = 1
    typeName2.value = val
    params.area = typeName2.value == '全部' ? '' : typeName2.value
    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 = () => {
    getGisByArea(params).then((res) => {
      dataList.value = res.data.data.list
      if (res.data.data.list.length < 9) {
        dataLength.value = false
      }
    })
  }
  pageWithAttrsFunction()
  //跳转详情页
  const detailFunction = (id) => {
    window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
  }
  const changeDeptType = (str) => {
    if (str) {
      if (algorithmclassDom) {
        algorithmclassDom.scrollTop = 0
      }
      switch (str) {
        case '全市':
          deptType.value = null
          typeName.value = '全 市'
          break
        case '市级':
          deptType.value = 2
          typeName.value = '市 级'
          break
        case '区级':
          deptType.value = 3
          typeName.value = '区 级'
          break
        case '企业':
          deptType.value = 4
          typeName.value = '企 业'
          break
      }
      params.pageNum = 1
      if (deptType.value !== null && deptType.value !== undefined) {
        params.deptType = deptType.value
      } else {
        if (Object.keys(params).includes('deptType')) {
          delete params.deptType
        }
      }
    }
    selectFlag.value = false
    getData(str)
  }
  const getData = (str) => {
    getGisByArea(params).then((res) => {
      const resData = res.data.data || {}
      if (
        resData.list.length > 0 &&
        resData.list.length < 9 &&
        algorithmclassDom
      ) {
        algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
      }
      dataList.value = resData.list || []
      nextTick(() => {
        algorithmclassDom = document.querySelector('.algorithm-box')
        if (str && algorithmclassDom) {
          algorithmclassDom.removeEventListener(
            'scroll',
            algorithmFunction,
            true
          )
          algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
        }
      })
    })
  }
  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++
      getGisByArea(params).then((res) => {
        dataList.value.push(...res.data.data.list)
        if (res.data.data.list.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>