diff --git a/back/src/views/modules/ability/IntegratedServices-add.vue b/back/src/views/modules/ability/IntegratedServices-add.vue
index b1601b32..e6ddedec 100644
--- a/back/src/views/modules/ability/IntegratedServices-add.vue
+++ b/back/src/views/modules/ability/IntegratedServices-add.vue
@@ -53,10 +53,8 @@
             <div class="title">
               组合能力
             </div>
-            <!-- <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施" ref="jcssDom"
-              :getDataParams="getListParams['基础设施']"></combine-ability> -->
             <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
-              ref="jcssDom"></InfrastructureModal>
+              :modalType="modalType" ref="jcssDom"></InfrastructureModal>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
               :getDataParams="getListParams['数据资源']"></combine-ability>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
@@ -298,14 +296,10 @@ export default {
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
         file.type === 'image/png'
-      // const isLt2M = file.size / 1024 / 1024 < 2
 
       if (!isImage) {
         this.$message.error('上传头像图片只能是 jpg/png 格式!')
       }
-      // if (!isLt2M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
-      // }
       return isImage
     },
     addUploadRemoveFile(file, fileList) {
@@ -317,14 +311,9 @@ export default {
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
         file.type === 'image/png'
-      // const isLt2M = file.size / 1024 / 1024 < 2
-
       if (!isImage) {
         this.$message.error('上传头像图片只能是 jpg/png 格式!')
       }
-      // if (!isLt2M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
-      // }
       return isImage
     },
     editUploadRemoveFile(file, fileList) {
diff --git a/back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue b/back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue
index 67a7163a..bf8d6c71 100644
--- a/back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue
+++ b/back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue
@@ -162,6 +162,9 @@ export default {
                 this.$nextTick(() => {
                     this.selectCheckbox()
                 })
+                if (this.modalType == 'add') {
+                    this.clear()
+                }
             }
         }
     },
@@ -246,8 +249,7 @@ export default {
                     this.$nextTick(() => {
                         this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || [];
                         if (this.modalType == 'add') {
-                            // 获取列表
-                            this.getData()
+                            this.clear()
                         }
                     })
                 }).catch(err => {
@@ -276,7 +278,7 @@ export default {
         },
         // 获取列表
         getData() {
-            let postData = Object.assign({
+            let postData = Object.assign({}, {
                 checkStatus: 1,
                 gpsX: '',
                 gpsY: '',
@@ -311,11 +313,10 @@ export default {
             this.dataList.map(v => {
                 if (idtCameraChannelArray.includes(v.idtCameraChannel)) {
                     this.displayList.push({
-                        name: v.channelName
+                        channelName: v.channelName
                     })
                 }
             })
-
             this.$emit('update', {
                 title: this.type,
                 list: this.selectedArray.map(v => v.idtCameraChannel)
diff --git a/front/src/assets/capacitySquare/algorithm-photo.jpg b/front/src/assets/capacitySquare/algorithm-photo.jpg
new file mode 100644
index 00000000..f805185d
Binary files /dev/null and b/front/src/assets/capacitySquare/algorithm-photo.jpg differ
diff --git a/front/src/assets/capacitySquare/algorithm-photo2.jpg b/front/src/assets/capacitySquare/algorithm-photo2.jpg
new file mode 100644
index 00000000..1446ca86
Binary files /dev/null and b/front/src/assets/capacitySquare/algorithm-photo2.jpg differ
diff --git a/front/src/assets/capacitySquare/algorithm-title-bg.png b/front/src/assets/capacitySquare/algorithm-title-bg.png
new file mode 100644
index 00000000..47760e80
Binary files /dev/null and b/front/src/assets/capacitySquare/algorithm-title-bg.png differ
diff --git a/front/src/views/capacitySquare/components/algorithm.vue b/front/src/views/capacitySquare/components/algorithm.vue
index 4d0ebf76..35b6e2d0 100644
--- a/front/src/views/capacitySquare/components/algorithm.vue
+++ b/front/src/views/capacitySquare/components/algorithm.vue
@@ -7,7 +7,17 @@
         :key="`algorithm-${index}`"
         class="algorithm-card"
       >
-        <div class="algorithm-card-title">{{ item.name }}</div>
+        <a-image
+          :src="algorithmCardPhoto(item.infoList)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+        ></a-image>
+
+        <a-tooltip>
+          <template #title>{{ item.name }}</template>
+          <div class="algorithm-card-title">{{ item.name }}</div>
+        </a-tooltip>
       </div>
     </div>
   </div>
@@ -26,31 +36,51 @@
     pageSize: 9,
     type: '组件服务',
   }
+  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
+      }
     })
   }
   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
+  //图片显示
+  const algorithmCardPhoto = (List) => {
+    List.map((item) => {
+      if (item.attrType === '图层缩略图') {
+        url.value = item.attrValue
       }
     })
+    return url.value
+  }
+  onMounted(() => {
+    const algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      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)
+            if (res.data.data.records.length < 9) {
+              dataLength.value = false
+            }
+          })
+        } else {
+          isNoMore.value = false
+        }
+      })
+    }
   })
 </script>
 
@@ -71,12 +101,36 @@
         margin-bottom: 0.3rem;
         margin-right: 0.65rem;
         position: relative;
+        :deep(.ant-image) {
+          img {
+            height: 2.75rem;
+            width: 5.25rem;
+          }
+        }
+        .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;
           width: 100%;
+          line-height: 0.6rem;
           color: #ffffff;
           font-size: 0.22rem;
+          font-family: alibaba;
+          bottom: 0;
+          padding-left: 0.22rem;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
+          background-size: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
         }
       }
     }
diff --git a/front/src/views/capacitySquare/components/layer.vue b/front/src/views/capacitySquare/components/layer.vue
index e69de29b..67d4d626 100644
--- a/front/src/views/capacitySquare/components/layer.vue
+++ b/front/src/views/capacitySquare/components/layer.vue
@@ -0,0 +1,151 @@
+<!-- 图层服务 -->
+<template>
+  <div class="algorithm">
+    <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"
+        ></a-image>
+
+        <a-tooltip>
+          <template #title>{{ item.name }}</template>
+          <div class="algorithm-card-title">{{ item.name }}</div>
+        </a-tooltip>
+      </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 imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.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
+      }
+    })
+  }
+  pageWithAttrsFunction()
+  //图片显示
+  const algorithmCardPhoto = (List) => {
+    List.map((item) => {
+      if (item.attrType === '图层缩略图') {
+        url.value = item.attrValue
+      }
+    })
+    return url.value
+  }
+  onMounted(() => {
+    const algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      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)
+            if (res.data.data.records.length < 9) {
+              dataLength.value = false
+            }
+          })
+        } 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') no-repeat;
+        background-size: 100%;
+        margin-bottom: 0.3rem;
+        margin-right: 0.65rem;
+        position: relative;
+        :deep(.ant-image) {
+          img {
+            height: 2.75rem;
+            width: 5.25rem;
+          }
+        }
+        .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;
+          width: 100%;
+          line-height: 0.6rem;
+          color: #ffffff;
+          font-size: 0.22rem;
+          font-family: alibaba;
+          bottom: 0;
+          padding-left: 0.22rem;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
+          background-size: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+      }
+    }
+    .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/index.vue b/front/src/views/capacitySquare/index.vue
index 6db9ebcb..29c7e1fb 100644
--- a/front/src/views/capacitySquare/index.vue
+++ b/front/src/views/capacitySquare/index.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-08-09 11:32:47
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-08-09 14:36:28
+ * @LastEditTime: 2022-08-09 15:26:57
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -83,6 +83,8 @@
     .box {
       flex: 1;
       // padding: 0.5rem 0;
+      font-family: alibaba;
+      src: url('~@/assets/capacitySquare/webfont.ttf');
     }
   }
 </style>