BUG修改

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

@@ -22,16 +22,29 @@
         </div>
         <div class="bottom" v-show="selectFlag2">
           <span class="light"></span>
-          <div v-for="val in dictList" :key="val" @click="changeAreaFunction(val)">
+          <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">
+      <div
-        <a-image :src="item.pic" :width="525" :height="275" :fallback="imgSrc"
+        v-for="(item, index) in dataList"
-          :preview="false"></a-image>
+        :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>
@@ -45,296 +58,308 @@
   </div>
 </template>
 <script setup>
-import { getCategoryTreePage } from '@/api/personalCenter'
+  import { getCategoryTreePage } from '@/api/personalCenter'
-import { getGisByArea } from '@/api/home'
+  import { getGisByArea } from '@/api/home'
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 
-const deptType = ref(null)
+  const deptType = ref(null)
-const typeName = ref('全市')
+  const typeName = ref('全市')
-const typeName2 = ref('全部')
+  const typeName2 = ref('全部')
-const dictList = ref([])
+  const dictList = ref([])
-const dataList = ref([])
+  const dataList = ref([])
-const selectFlag2 = ref(false)
+  const selectFlag2 = ref(false)
-const selectFlag = ref(false)
+  const selectFlag = ref(false)
-getCategoryTreePage({
+  getCategoryTreePage({
-  page: 1,
+    page: 1,
-  limit: 99,
+    limit: 99,
-  dictTypeId: '1513712507692818433',
+    dictTypeId: '1513712507692818433',
-}).then((res) => {
+  }).then((res) => {
-  dictList.value = ['全部']
+    dictList.value = ['全部']
-  res.data.data.list.map((val) => {
+    res.data.data.list.map((val) => {
-    // if (val.dictLabel !== '其他') {
+      // if (val.dictLabel !== '其他') {
-    dictList.value.push(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 params = {
+    pageNum: 1,
+    type: '图层服务',
+    area: typeName2.value == '全部' ? '' : typeName2.value,
+    pageSize: 9, // 固定9
+  }
 
-const layerFunction = (e) => {
+  // 切换领域
-  var scrollTop = e.currentTarget.scrollTop
+  const changeAreaFunction = (val) => {
-  var windowHeight = e.currentTarget.clientHeight
+    params.pageNum = 1
-  var scrollHeight = e.currentTarget.scrollHeight
+    typeName2.value = val
-  console.log(scrollTop, windowHeight, scrollHeight, '123')
+    params.area = typeName2.value == '全部' ? '' : typeName2.value
-  if (
+    selectFlag2.value = false
-    scrollTop + windowHeight <= scrollHeight + 1 &&
+    pageWithAttrsFunction()
-    scrollTop + windowHeight >= scrollHeight - 1
+  }
-  ) {
+
-    // 当前滚动条已经触底
+  let algorithmclassDom = null
-    isNoMore.value = true
+  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
-    params.pageNum++
+  const dataLength = ref(true)
+  const isNoMore = ref(false)
+  const pageWithAttrsFunction = () => {
     getGisByArea(params).then((res) => {
-      dataList.value.push(...res.data.data.list)
+      dataList.value = res.data.data.list
       if (res.data.data.list.length < 9) {
         dataLength.value = false
       }
     })
-  } else {
-    isNoMore.value = false
   }
-}
+  pageWithAttrsFunction()
-onMounted(() => {
+
-  algorithmclassDom = document.querySelector('.algorithm-class')
+  //跳转详情页
-  if (dataLength.value) {
+  const detailFunction = (id) => {
-    //监听滚动事件
+    window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
-    algorithmclassDom.addEventListener('scroll', layerFunction, true)
   }
-})
+
-onBeforeUnmount(() => {
+  const changeDeptType = (str) => {
-  algorithmclassDom.removeEventListener('scroll', layerFunction, true)
+    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 {
+  .algorithm {
-  .select {
+    .select {
-    margin: 0.1rem 0 0.1rem 0.2rem;
+      margin: 0.1rem 0 0.1rem 0.2rem;
-    color: #fff;
+      color: #fff;
-    font-size: 0.2rem;
+      font-size: 0.2rem;
-    font-family: webfont;
+      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 {
+      .top {
-        width: 0.56rem;
+        cursor: pointer;
-        height: 3px;
+        width: 3.61rem;
-        position: absolute;
+        height: 0.85rem;
-        top: 0.4rem;
+        font-weight: 600;
-        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;
+        padding-top: 0.1rem;
-      }
+        background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
+        background-size: 100%;
+        position: relative;
 
-      &>div:nth-of-type(1) {
+        .light {
-        border: none;
+          width: 0.56rem;
-      }
+          height: 3px;
-    }
+          position: absolute;
-  }
+          top: 0.4rem;
-
+          left: 1.52rem;
-  .algorithm-class {
+          background: url('~@/assets/capacitySquare/select-light1.png')
-    // margin-top: 0.6rem;
+            no-repeat;
-    margin-bottom: 0.18rem;
+          background-size: 100%;
-    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 {
+      .bottom {
-        height: 100%;
+        cursor: pointer;
-        width: 100%;
-        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
-        background-size: 100%;
-      }
-
-      .algorithm-card-title {
         position: absolute;
-        height: 0.6rem;
+        top: 0.5rem;
-        margin-left: 0.08rem;
+        left: 0.9rem;
-        width: 97%;
+        z-index: 1000;
-        color: #ffffff;
+        background: rgba(57, 134, 239, 0.68);
-        font-size: 0.22rem;
+        border: 1px solid #aed5ff;
-        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 {
+        .light {
-          line-height: 0.24rem;
+          display: inline-block;
-          overflow: hidden;
+          width: 2.39rem;
-          text-overflow: ellipsis;
+          height: 5px;
-          white-space: nowrap;
+          position: absolute;
-          cursor: pointer;
+          top: -0.08rem;
+          left: -0.3rem;
+          background: url('~@/assets/capacitySquare/select-light2.png')
+            no-repeat;
+          background-size: 100%;
         }
 
-        span:last-child {
+        & > div {
-          font-size: 0.14rem;
+          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 {
+    .algorithm-class {
-    background: #a5bcdb;
+      // margin-top: 0.6rem;
-    border-radius: 0.08rem;
+      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-class::-webkit-scrollbar-thumb {
+      .algorithm-card {
-    height: 3.2rem;
+        height: 2.75rem;
-    background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
+        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;
 
-  .algorithm-class::-webkit-scrollbar {
+        :deep(.ant-image) {
-    height: 8.8rem;
+          img {
-    width: 0.08rem;
+            margin-top: 0.15rem;
-    border-radius: 0.08rem;
+            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>