算法广场和GIS广场增加区域筛选，api待联调

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

@@ -1,6 +1,20 @@
 <!-- 智能算法 -->
 <template>
   <div class="algorithm">
+    <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="select">
         <div class="top" @click="selectFlag2 = true">
           {{ typeName2 }}
@@ -13,19 +27,12 @@
           </div>
         </div>
       </div>
+    </div>
+
     <div class="algorithm-class">
-      <div
+      <div v-for="(item, index) in dataList" :key="`algorithm-${index}`" class="algorithm-card">
-        v-for="(item, index) in dataList"
+        <a-image :src="algorithmCardPhoto(item.infoList, item)" :width="525" :height="275" :fallback="imgSrc"
-        :key="`algorithm-${index}`"
+          :preview="false"></a-image>
-        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>
@@ -42,10 +49,15 @@
 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,
@@ -81,7 +93,7 @@
   selectFlag2.value = false
   pageWithAttrsFunction()
 }
-  let algorithmclass = null
+let algorithmclassDom = null
 const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
 const dataLength = ref(true)
 const isNoMore = ref(false)
@@ -136,15 +148,43 @@
   }
 }
 
+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
+  }
+  selectFlag.value = false
+  alert('调取接口')
+  // getData(str)
+}
+
 onMounted(() => {
-    algorithmclass = document.querySelector('.algorithm-class')
+  algorithmclassDom = document.querySelector('.algorithm-class')
   if (dataLength.value) {
     //监听滚动事件
-      algorithmclass.addEventListener('scroll', algorithmFunction, true)
+    algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
   }
 })
 onBeforeUnmount(() => {
-    algorithmclass.removeEventListener('scroll', algorithmFunction, true)
+  algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
 })
 </script>
 
@@ -156,6 +196,7 @@
     font-size: 0.2rem;
     font-family: webfont;
     position: relative;
+
     .top {
       cursor: pointer;
       width: 3.61rem;
@@ -166,17 +207,18 @@
       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')
+        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
     }
+
     .bottom {
       cursor: pointer;
       position: absolute;
@@ -185,6 +227,7 @@
       z-index: 1000;
       background: rgba(57, 134, 239, 0.68);
       border: 1px solid #aed5ff;
+
       .light {
         display: inline-block;
         width: 2.39rem;
@@ -192,10 +235,10 @@
         position: absolute;
         top: -0.08rem;
         left: -0.3rem;
-          background: url('~@/assets/capacitySquare/select-light2.png')
+        background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
+
       &>div {
         width: 1.8rem;
         height: 0.4rem;
@@ -203,11 +246,13 @@
         text-align: center;
         border-top: 1px solid #aed5ff;
       }
+
       &>div:nth-of-type(1) {
         border: none;
       }
     }
   }
+
   .algorithm-class {
     // margin-top: 0.6rem;
     margin-bottom: 0.18rem;
@@ -217,6 +262,7 @@
     overflow: auto;
     margin-left: 1.15rem;
     margin-right: 0.15rem;
+
     .algorithm-card {
       height: 2.75rem;
       width: 5.25rem;
@@ -225,6 +271,7 @@
       margin-bottom: 0.4rem;
       margin-right: 0.65rem;
       position: relative;
+
       :deep(.ant-image) {
         img {
           margin-top: 0.15rem;
@@ -233,13 +280,14 @@
           margin-left: 0.1rem;
         }
       }
+
       .algorithm-card-photo {
         height: 100%;
         width: 100%;
-          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
+
       .algorithm-card-title {
         position: absolute;
         height: 0.6rem;
@@ -250,12 +298,12 @@
         font-family: alibaba;
         bottom: 0.15rem;
         padding-left: 0.22rem;
-          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+        background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
-            no-repeat;
         background-size: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
+
         span {
           line-height: 0.24rem;
           overflow: hidden;
@@ -263,20 +311,24 @@
           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;

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

@@ -1,6 +1,20 @@
 <!-- 图层服务 -->
 <template>
   <div class="algorithm">
+    <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="select">
         <div class="top" @click="selectFlag2 = true">
           {{ typeName2 }}
@@ -13,19 +27,11 @@
           </div>
         </div>
       </div>
+    </div>
     <div class="algorithm-class">
-      <div
+      <div v-for="(item, index) in dataList" :key="`algorithm-${index}`" class="algorithm-card">
-        v-for="(item, index) in dataList"
+        <a-image :src="algorithmCardPhoto(item.infoList)" :width="525" :height="275" :fallback="imgSrc"
-        :key="`algorithm-${index}`"
+          :preview="false"></a-image>
-        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>
@@ -42,10 +48,14 @@
 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,
@@ -81,7 +91,7 @@
   selectFlag2.value = false
   pageWithAttrsFunction()
 }
-  let algorithmclass = null
+let algorithmclassDom = null
 const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
 const dataLength = ref(true)
 const isNoMore = ref(false)
@@ -108,6 +118,35 @@
 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
+  }
+  selectFlag.value = false
+  alert('调取接口')
+  // getData(str)
+}
+
 const layerFunction = (e) => {
   var scrollTop = e.currentTarget.scrollTop
   var windowHeight = e.currentTarget.clientHeight
@@ -131,14 +170,14 @@
   }
 }
 onMounted(() => {
-    algorithmclass = document.querySelector('.algorithm-class')
+  algorithmclassDom = document.querySelector('.algorithm-class')
   if (dataLength.value) {
     //监听滚动事件
-      algorithmclass.addEventListener('scroll', layerFunction, true)
+    algorithmclassDom.addEventListener('scroll', layerFunction, true)
   }
 })
 onBeforeUnmount(() => {
-    algorithmclass.removeEventListener('scroll', layerFunction, true)
+  algorithmclassDom.removeEventListener('scroll', layerFunction, true)
 })
 </script>
 
@@ -150,6 +189,7 @@
     font-size: 0.2rem;
     font-family: webfont;
     position: relative;
+
     .top {
       cursor: pointer;
       width: 3.61rem;
@@ -160,17 +200,18 @@
       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')
+        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
     }
+
     .bottom {
       cursor: pointer;
       position: absolute;
@@ -179,6 +220,7 @@
       z-index: 1000;
       background: rgba(57, 134, 239, 0.68);
       border: 1px solid #aed5ff;
+
       .light {
         display: inline-block;
         width: 2.39rem;
@@ -186,10 +228,10 @@
         position: absolute;
         top: -0.08rem;
         left: -0.3rem;
-          background: url('~@/assets/capacitySquare/select-light2.png')
+        background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
+
       &>div {
         width: 1.8rem;
         height: 0.4rem;
@@ -197,11 +239,13 @@
         text-align: center;
         border-top: 1px solid #aed5ff;
       }
+
       &>div:nth-of-type(1) {
         border: none;
       }
     }
   }
+
   .algorithm-class {
     // margin-top: 0.6rem;
     margin-bottom: 0.18rem;
@@ -211,6 +255,7 @@
     overflow: auto;
     margin-left: 1.15rem;
     margin-right: 0.15rem;
+
     .algorithm-card {
       height: 2.75rem;
       width: 5.23rem;
@@ -219,6 +264,7 @@
       margin-bottom: 0.4rem;
       margin-right: 0.65rem;
       position: relative;
+
       :deep(.ant-image) {
         img {
           margin-top: 0.15rem;
@@ -227,13 +273,14 @@
           margin-left: 0.1rem;
         }
       }
+
       .algorithm-card-photo {
         height: 100%;
         width: 100%;
-          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
+
       .algorithm-card-title {
         position: absolute;
         height: 0.6rem;
@@ -244,12 +291,12 @@
         font-family: alibaba;
         bottom: 0.15rem;
         padding-left: 0.22rem;
-          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+        background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
-            no-repeat;
         background-size: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
+
         span {
           line-height: 0.24rem;
           overflow: hidden;
@@ -257,20 +304,24 @@
           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;