应用广场

front/src/views/capacitySquare/components/algorithm.vue

@@ -7,7 +7,17 @@
         :key="`algorithm-${index}`"
         class="algorithm-card"
       >
+        <a-image
+          :src="algorithmCardPhoto(item.infoList)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+        ></a-image>
+
+        <a-tooltip>
+          <template #title>{{ item.name }}</template>
           <div class="algorithm-card-title">{{ item.name }}</div>
+        </a-tooltip>
       </div>
     </div>
   </div>
@@ -26,15 +36,31 @@
     pageSize: 9,
     type: '组件服务',
   }
+  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) => {
+    List.map((item) => {
+      if (item.attrType === '图层缩略图') {
+        url.value = item.attrValue
+      }
+    })
+    return url.value
+  }
   onMounted(() => {
     const algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
       algorithmclass.addEventListener('scroll', (e) => {
         var scrollTop = e.currentTarget.scrollTop
         var windowHeight = e.currentTarget.clientHeight
@@ -46,11 +72,15 @@
           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
         }
       })
+    }
   })
 </script>
 
@@ -71,12 +101,36 @@
         margin-bottom: 0.3rem;
         margin-right: 0.65rem;
         position: relative;
+        :deep(.ant-image) {
+          img {
+            height: 2.75rem;
+            width: 5.25rem;
+          }
+        }
+        .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;
           width: 100%;
+          line-height: 0.6rem;
           color: #ffffff;
           font-size: 0.22rem;
+          font-family: alibaba;
+          bottom: 0;
+          padding-left: 0.22rem;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
+          background-size: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
         }
       }
     }

front/src/views/capacitySquare/components/layer.vue

@@ -0,0 +1,151 @@
+<!-- 图层服务 -->
+<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"
+        ></a-image>
+
+        <a-tooltip>
+          <template #title>{{ item.name }}</template>
+          <div class="algorithm-card-title">{{ item.name }}</div>
+        </a-tooltip>
+      </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 imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.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) => {
+    List.map((item) => {
+      if (item.attrType === '图层缩略图') {
+        url.value = item.attrValue
+      }
+    })
+    return url.value
+  }
+  onMounted(() => {
+    const algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      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)
+            if (res.data.data.records.length < 9) {
+              dataLength.value = false
+            }
+          })
+        } 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;
+        :deep(.ant-image) {
+          img {
+            height: 2.75rem;
+            width: 5.25rem;
+          }
+        }
+        .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;
+          width: 100%;
+          line-height: 0.6rem;
+          color: #ffffff;
+          font-size: 0.22rem;
+          font-family: alibaba;
+          bottom: 0;
+          padding-left: 0.22rem;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
+          background-size: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+      }
+    }
+    .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>