From 1a40a09286afb2514e4e3e9489335adc3c45495a Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Mon, 24 Oct 2022 17:44:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E6=B3=95=E5=B9=BF=E5=9C=BA=E5=92=8CGI?=
 =?UTF-8?q?S=E5=B9=BF=E5=9C=BA=E5=A2=9E=E5=8A=A0=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=EF=BC=8Capi=E5=BE=85=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../capacitySquare/components/algorithm.vue   | 536 ++++++++++--------
 .../views/capacitySquare/components/layer.vue | 525 +++++++++--------
 2 files changed, 582 insertions(+), 479 deletions(-)

diff --git a/front/src/views/capacitySquare/components/algorithm.vue b/front/src/views/capacitySquare/components/algorithm.vue
index ec9112c5..d0c834ff 100644
--- a/front/src/views/capacitySquare/components/algorithm.vue
+++ b/front/src/views/capacitySquare/components/algorithm.vue
@@ -1,31 +1,38 @@
 <!-- 智能算法 -->
 <template>
   <div class="algorithm">
-    <div class="select">
-      <div class="top" @click="selectFlag2 = true">
-        {{ typeName2 }}
-        <div class="light"></div>
+    <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="bottom" v-show="selectFlag2">
-        <span class="light"></span>
-        <div v-for="val in dictList" :key="val" @click="getList2(val)">
-          {{ val }}
+      <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, item)"
-          :width="525"
-          :height="275"
-          :fallback="imgSrc"
-          :preview="false"
-        ></a-image>
+      <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>
@@ -39,248 +46,293 @@
   </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)
-      // }
-    })
+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: 'pin_top',
-    orderType: 'DESC',
-    pageNum: 1,
-    pageSize: 9,
-    type: '组件服务',
+})
+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 },
+    ]
   }
-  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-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
     }
-    selectFlag2.value = false
-    pageWithAttrsFunction()
+  })
+}
+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
   }
-  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 = () => {
+  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 = res.data.data.records
+      dataList.value.push(...res.data.data.records)
       if (res.data.data.records.length < 9) {
         dataLength.value = false
       }
     })
+  } else {
+    isNoMore.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)
+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
     }
-  })
-  onBeforeUnmount(() => {
-    algorithmclass.removeEventListener('scroll', algorithmFunction, true)
-  })
+    params.pageNum = 1
+  }
+  selectFlag.value = false
+  alert('调取接口')
+  // getData(str)
+}
+
+onMounted(() => {
+  algorithmclassDom = document.querySelector('.algorithm-class')
+  if (dataLength.value) {
+    //监听滚动事件
+    algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
+  }
+})
+onBeforeUnmount(() => {
+  algorithmclassDom.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;
+.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;
-      .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;
+
+      .light {
+        width: 0.56rem;
+        height: 3px;
         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;
-        }
+        top: 0.4rem;
+        left: 1.52rem;
+        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
+        background-size: 100%;
       }
     }
-    .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;
-          }
-        }
+
+    .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::-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;
     }
   }
+
+  .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>
diff --git a/front/src/views/capacitySquare/components/layer.vue b/front/src/views/capacitySquare/components/layer.vue
index eb103ed3..c0a2f5fb 100644
--- a/front/src/views/capacitySquare/components/layer.vue
+++ b/front/src/views/capacitySquare/components/layer.vue
@@ -1,31 +1,37 @@
 <!-- 图层服务 -->
 <template>
   <div class="algorithm">
-    <div class="select">
-      <div class="top" @click="selectFlag2 = true">
-        {{ typeName2 }}
-        <div class="light"></div>
+    <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="bottom" v-show="selectFlag2">
-        <span class="light"></span>
-        <div v-for="val in dictList" :key="val" @click="getList2(val)">
-          {{ val }}
+      <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>
+      <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>
@@ -39,242 +45,287 @@
   </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)
-      // }
-    })
+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 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 },
+    ]
   }
-  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
     }
-    selectFlag2.value = false
-    pageWithAttrsFunction()
+  })
+}
+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
   }
-  let algorithmclass = null
-  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
-  const dataLength = ref(true)
-  const isNoMore = ref(false)
-  const pageWithAttrsFunction = () => {
+  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 = res.data.data.records
+      dataList.value.push(...res.data.data.records)
       if (res.data.data.records.length < 9) {
         dataLength.value = false
       }
     })
+  } else {
+    isNoMore.value = false
   }
-  pageWithAttrsFunction()
-  //图片显示
-  const algorithmCardPhoto = (List) => {
-    let url = ''
-    List.map((item) => {
-      if (item.attrType === '图层缩略图') {
-        url = item.attrValue
-      }
-    })
-    return url
+}
+onMounted(() => {
+  algorithmclassDom = document.querySelector('.algorithm-class')
+  if (dataLength.value) {
+    //监听滚动事件
+    algorithmclassDom.addEventListener('scroll', layerFunction, true)
   }
-  //跳转详情页
-  const detailFunction = (id) => {
-    window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
-  }
-  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(() => {
-    algorithmclass = document.querySelector('.algorithm-class')
-    if (dataLength.value) {
-      //监听滚动事件
-      algorithmclass.addEventListener('scroll', layerFunction, true)
-    }
-  })
-  onBeforeUnmount(() => {
-    algorithmclass.removeEventListener('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;
+.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;
-      .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;
+
+      .light {
+        width: 0.56rem;
+        height: 3px;
         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;
-        }
+        top: 0.4rem;
+        left: 1.52rem;
+        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
+        background-size: 100%;
       }
     }
-    .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;
-          }
-        }
+
+    .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::-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;
     }
   }
+
+  .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>