应用广场-只能算法

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

@@ -0,0 +1,88 @@
+<!-- 智能算法 -->
+<template>
+  <div class="algorithm">
+    <div class="algorithm-class">
+      <div
+        v-for="(item, index) in dataList"
+        :key="`algorithm-${index}`"
+        class="algorithm-card"
+      >
+        {{ item.name }}
+      </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');
+        margin-bottom: 0.3rem;
+        margin-right: 0.65rem;
+      }
+    }
+    .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>