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">
-        <a-image :src="item.pic" :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="item.pic || imgSrc"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+          :preview="false"
+        ></a-image>
 
         <a-tooltip>
           <template #title>{{ item.name }}</template>
@@ -45,67 +58,67 @@
   </div>
 </template>
 <script setup>
-import { getCategoryTreePage } from '@/api/personalCenter'
-import { getGisByArea } from '@/api/home'
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  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({
+  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) => {
+  }).then((res) => {
     dictList.value = ['全部']
     res.data.data.list.map((val) => {
       // if (val.dictLabel !== '其他') {
       dictList.value.push(val.dictLabel)
       // }
     })
-})
-const params = {
+  })
+  const params = {
     pageNum: 1,
     type: '图层服务',
     area: typeName2.value == '全部' ? '' : typeName2.value,
-  pageSize: 9 // 固定9
-}
+    pageSize: 9, // 固定9
+  }
 
-// 切换领域
-const changeAreaFunction = (val) => {
-  params.pageNum = 1;
+  // 切换领域
+  const changeAreaFunction = (val) => {
+    params.pageNum = 1
     typeName2.value = val
-  params.area = typeName2.value == '全部' ? '' : typeName2.value;
+    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 = () => {
+  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()
+  }
+  pageWithAttrsFunction()
 
-//跳转详情页
-const detailFunction = (id) => {
+  //跳转详情页
+  const detailFunction = (id) => {
     window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
-}
+  }
 
-const changeDeptType = (str) => {
+  const changeDeptType = (str) => {
     if (str) {
-    if(algorithmclassDom) {
+      if (algorithmclassDom) {
         algorithmclassDom.scrollTop = 0
       }
       switch (str) {
@@ -126,37 +139,45 @@ const changeDeptType = (str) => {
           typeName.value = '企 业'
           break
       }
-    params.pageNum = 1;
-    if(deptType.value !== null && deptType.value !== undefined) {
-      params.deptType = deptType.value;
-    }else {
-      if(Object.keys(params).includes('deptType')) {
+      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) => {
+  const getData = (str) => {
     getGisByArea(params).then((res) => {
       const resData = res.data.data || {}
-    if (resData.list.length > 0 && resData.list.length < 9 && algorithmclassDom) {
+      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.removeEventListener(
+            'scroll',
+            algorithmFunction,
+            true
+          )
           algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
         }
       })
     })
-}
+  }
 
-const layerFunction = (e) => {
+  const layerFunction = (e) => {
     var scrollTop = e.currentTarget.scrollTop
     var windowHeight = e.currentTarget.clientHeight
     var scrollHeight = e.currentTarget.scrollHeight
@@ -177,21 +198,21 @@ const layerFunction = (e) => {
     } else {
       isNoMore.value = false
     }
-}
-onMounted(() => {
+  }
+  onMounted(() => {
     algorithmclassDom = document.querySelector('.algorithm-class')
     if (dataLength.value) {
       //监听滚动事件
       algorithmclassDom.addEventListener('scroll', layerFunction, true)
     }
-})
-onBeforeUnmount(() => {
+  })
+  onBeforeUnmount(() => {
     algorithmclassDom.removeEventListener('scroll', layerFunction, true)
-})
+  })
 </script>
 
 <style lang="less" scoped>
-.algorithm {
+  .algorithm {
     .select {
       margin: 0.1rem 0 0.1rem 0.2rem;
       color: #fff;
@@ -216,7 +237,8 @@ onBeforeUnmount(() => {
           position: absolute;
           top: 0.4rem;
           left: 1.52rem;
-        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
+          background: url('~@/assets/capacitySquare/select-light1.png')
+            no-repeat;
           background-size: 100%;
         }
       }
@@ -237,11 +259,12 @@ onBeforeUnmount(() => {
           position: absolute;
           top: -0.08rem;
           left: -0.3rem;
-        background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
+          background: url('~@/assets/capacitySquare/select-light2.png')
+            no-repeat;
           background-size: 100%;
         }
 
-      &>div {
+        & > div {
           width: 1.8rem;
           height: 0.4rem;
           line-height: 0.4rem;
@@ -249,7 +272,7 @@ onBeforeUnmount(() => {
           border-top: 1px solid #aed5ff;
         }
 
-      &>div:nth-of-type(1) {
+        & > div:nth-of-type(1) {
           border: none;
         }
       }
@@ -286,7 +309,8 @@ onBeforeUnmount(() => {
         .algorithm-card-photo {
           height: 100%;
           width: 100%;
-        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
+          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+            no-repeat;
           background-size: 100%;
         }
 
@@ -300,7 +324,8 @@ onBeforeUnmount(() => {
           font-family: alibaba;
           bottom: 0.15rem;
           padding-left: 0.22rem;
-        background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
           background-size: 100%;
           display: flex;
           flex-direction: column;
@@ -336,5 +361,5 @@ onBeforeUnmount(() => {
       width: 0.08rem;
       border-radius: 0.08rem;
     }
-}
+  }
 </style>