diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index d6a61432..67079961 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -223,3 +223,11 @@ export function queryApplicationRelByResourceId(params) {
     params,
   })
 }
+// 获取关联组件列表
+export function queryResourceRelByKeyId(params) {
+  return request({
+    url: '/dataResourceRel/queryResourceRelByKeyId',
+    method: 'get',
+    params,
+  })
+}
diff --git a/front/src/views/assignCase/components/AssignCaseDetailPage.vue b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
index dd6bf0a5..fdde065e 100644
--- a/front/src/views/assignCase/components/AssignCaseDetailPage.vue
+++ b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.zhangfeihu
  * @Date: 2022-06-13 10:22:27
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-04 15:32:52
+ * @LastEditTime: 2022-07-05 11:25:25
  * @Description: 赋能案例-详情页
 -->
 <template>
@@ -131,19 +131,16 @@
     tabName.value = '案例背景'
     selectOne(val).then((res) => {
       res.data.data.infoList.map((item, index) => {
-        console.log('res.data.data.infoList', res.data.data.infoList)
         if (item.attrType == '图片') {
           res.data.data.infoList.splice(index, 1)
         }
       })
       res.data.data.infoList.map((item, index) => {
-        console.log('res.data.data.infoList', res.data.data.infoList)
         if (item.attrType == '应用领域') {
           res.data.data.infoList.splice(index, 1)
         }
       })
       dataFrom.value = res.data.data
-      console.log('dataFrom.value', dataFrom.value)
     })
   }
   //其他案例
@@ -165,7 +162,6 @@
         }
       })
       dataList.value = res.data.data.records
-      console.log('dataList.value', dataList.value)
     })
   }
   //监听路由发生变化
@@ -181,70 +177,98 @@
   //tab点击事件
   const tabSwitch = (item, index) => {
     tabName.value = item.attrType
-    if (index != 0 && index != 3) {
-      let top =
-        document.querySelector(
-          '#assign-case-detail-page-content-center-card' + index
-        ).offsetTop -
-        document.querySelector(
-          '#assign-case-detail-page-content-center-card' + (index - 1)
-        ).offsetHeight
-      let view = document.getElementById(
-        'assign-case-detail-page-content-left-border-id'
-      )
-      view.style.top =
-        document.querySelector(
-          '#assign-case-detail-page-content-center-card' + (index - 1)
-        ).offsetHeight + 'px'
-      console.log('view.style.top', view.style.top)
-      document.documentElement.scrollTop = top
-      document.body.scrollTop = top
-    } else if (index == 0) {
-      let top = 0
-      let view = document.getElementById(
-        'assign-case-detail-page-content-left-border-id'
-      )
-      document.documentElement.scrollTop = top
-      document.body.scrollTop = top
-      view.style.top = '490px'
-    } else if (index == 3) {
-      let top = document.querySelector(
+    let top =
+      document.querySelector(
         '#assign-case-detail-page-content-center-card' + index
-      ).offsetTop
-      let view = document.getElementById(
-        'assign-case-detail-page-content-left-border-id'
-      )
-      document.documentElement.scrollTop = top
-      document.body.scrollTop = top
-      view.style.top = '220px'
-    }
+      ).offsetTop -
+      330 -
+      60 * index
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
   }
   onMounted(() => {
-    init()
+    // init()
     // console.clear()
     window.addEventListener('scroll', () => {
-      domArr.value = document.querySelectorAll(
-        '.assign-case-detail-page-content-center-card'
-      )
-      scrollTop.value =
-        document.documentElement.scrollTop || document.body.scrollTop
-      for (let i = 0; i < domArr.value.length; i++) {
-        if (i === 0) {
-          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else if (i == domArr.value.length - 1) {
-          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-            selectNow.value = domArr.value[i].id
-          }
-        } else {
-          if (
-            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-          ) {
-            selectNow.value = domArr.value[i].id
-          }
-        }
+      let top = document.documentElement.scrollTop
+      if (
+        top <
+        100 +
+          document.querySelector(
+            '#assign-case-detail-page-content-center-card0'
+          ).offsetHeight -
+          1
+      ) {
+        tabName.value = '案例背景'
+      } else if (
+        top >=
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight &&
+        top <
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight -
+            1
+      ) {
+        tabName.value = '业务挑战'
+      } else if (
+        top >=
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight &&
+        top <
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card2'
+            ).offsetHeight -
+            1
+      ) {
+        tabName.value = '解决方案'
+      } else if (
+        top >=
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card2'
+            ).offsetHeight &&
+        top <
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card2'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card3'
+            ).offsetHeight -
+            1
+      ) {
+        tabName.value = '案例成效'
       }
     })
   })
@@ -327,7 +351,7 @@
           padding-top: 5px;
           padding-bottom: 5px;
           position: fixed;
-          top: 4.9rem;
+          top: 3.9rem;
           div {
             height: 0.3rem;
             padding-right: 0.7rem;
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index 789dabd6..96eae8fe 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -79,6 +79,9 @@
             <a-button v-else-if="item.type == 'dialog'" @click="sourceClick">
               请选择来源应用
             </a-button>
+            <a-button v-else-if="item.type == 'dialog2'" @click="componentsClick">
+              请选择关联组件
+            </a-button>
             <a-select v-else-if="item.type == 'select'" style="width: 240px" v-model:value="item.note1"
               :placeholder="'请选择' + item.name">
               <a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
@@ -98,12 +101,12 @@
             </div>
           </div>
           <div class="AssociatedApplication">
-            <a-modal v-model:visible="visibleAssociatedApplication" title="关联应用" @ok="handleOk" @cancel="handleCancel"
-              style="width: 960px">
+            <a-modal v-model:visible="visibleAssociatedApplication" :title="titleName" @ok="handleOk"
+              @cancel="handleCancel" style="width: 960px">
               <div>
                 <a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys"
-                  :data-source="mockData" :titles="['未关联的应用名称', '已关联的应用名称']" :render="(item) => item.title"
-                  @change="handleChange" @selectChange="handleSelectChange" />
+                  :data-source="mockData" :titles="titles" :render="(item) => item.title" @change="handleChange"
+                  @selectChange="handleSelectChange" />
               </div>
             </a-modal>
           </div>
@@ -120,6 +123,7 @@ import { message } from 'ant-design-vue'
 import {
   getCategoryTreePage,
   queryApplicationRelByResourceId,
+  queryResourceRelByKeyId,
 } from '@/api/personalCenter'
 import { useRouter } from 'vue-router'
 
@@ -327,6 +331,8 @@ const ApplicationArea = (item, itemson) => {
 // 来源应用
 const visibleAssociatedApplication = ref(false)
 const mockData = ref([])
+const titles = ref(['未关联的应用名称', '已关联的应用名称'])
+const titleName = ref('关联应用')
 
 const sourceClick = () => {
   visibleAssociatedApplication.value = true
@@ -344,6 +350,28 @@ const sourceClick = () => {
     })
   })
 }
+// 关联组件
+const componentsClick = () => {
+  titles.value = ['未关联的组件名称', '已关联的组件名称']
+  titleName.value = '关联组件'
+
+  visibleAssociatedApplication.value = true
+  queryResourceRelByKeyId({
+    keyId: 0,
+    type: '组件服务',
+    referenceName: '',
+  }).then((res) => {
+    // console.log(res.data.data.notLinked)
+    res.data.data.notLinked.forEach((val, index) => {
+      // console.log(val, index)
+      mockData.value.push({
+        key: val.id,
+        title: val.name,
+        description: val.id,
+      })
+    })
+  })
+}
 const targetKeys = ref([])
 const selectedKeys = ref([])
 
@@ -362,7 +390,7 @@ const handleOk = (e) => {
   visibleAssociatedApplication.value = false
   // console.log('2222222222222', props.refData)
   data.value.list.map((item) => {
-    if (item.name === '来源应用') {
+    if (item.name === '来源应用' || item.name === '关联组件信息') {
       item.note1 = targetKeys.value + ''
     }
   })
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
index d07af6cc..06303258 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:56:28
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 14:16:18
+ * @LastEditTime: 2022-07-05 11:41:52
  * @Description: 算法详情页头部
 -->
 <template>
@@ -96,6 +96,7 @@
               resourceName: props.dataList.name,
               time: props.dataList.createDate,
               type: props.dataList.type,
+              componentType: '智能算法',
             },
           ],
           deptId: props.dataList.deptId,
diff --git a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
index 8f5f245c..317e5387 100644
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:56:28
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 14:20:52
+ * @LastEditTime: 2022-07-05 11:42:27
  * @Description: 算法详情页头部
 -->
 <template>
@@ -96,6 +96,7 @@
               resourceName: props.dataList.name,
               time: props.dataList.createDate,
               type: props.dataList.type,
+              componentType: '业务组件',
             },
           ],
           deptId: props.dataList.deptId,
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
index 30fd34a2..0655035e 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:56:28
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 14:21:04
+ * @LastEditTime: 2022-07-05 11:42:59
  * @Description: 开发组件详情页头部
 -->
 <template>
@@ -96,6 +96,7 @@
               resourceName: props.dataList.name,
               time: props.dataList.createDate,
               type: props.dataList.type,
+              componentType: '开发组件',
             },
           ],
           deptId: props.dataList.deptId,
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
index 954e2ae4..04c67bc2 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:56:28
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 18:52:34
+ * @LastEditTime: 2022-07-05 11:43:18
  * @Description: 算法详情页头部
 -->
 <template>
@@ -96,6 +96,7 @@
               resourceName: props.dataList.name,
               time: props.dataList.createDate,
               type: props.dataList.type,
+              componentType: '图层服务',
             },
           ],
           deptId: props.dataList.deptId,
diff --git a/front/src/views/home/apply.vue b/front/src/views/home/apply.vue
index f4fc6801..44123dad 100644
--- a/front/src/views/home/apply.vue
+++ b/front/src/views/home/apply.vue
@@ -277,22 +277,24 @@
       })
       console.log(
         'list',
-        list.value,
-        list.value[0].children.filter(
-          (val) => val.id == list.value[0].checkedList[0]
-        )[0].resourceName
+        list.value
+        // list.value[0].children.filter(
+        //   (val) => val.id == list.value[0].checkedList[0]
+        // )[0].resourceName
       )
       const baseURL = window.SITE_CONFIG.apiURL
       let record = ref('1')
       const text = ref('')
       const formName = reactive({
         title: list.value[0].children
-          .filter((val) => val.id == list.value[0].checkedList[0])[0]
-          .resourceName.concat(
-            list.value[0].checkedList.length > 0
-              ? '等能力申请' + num.value + '个'
-              : '能力申请'
-          ), // 标题
+          ? list.value[0].children
+              .filter((val) => val.id == list.value[0].checkedList[0])[0]
+              .resourceName.concat(
+                list.value[0].checkedList.length > 0
+                  ? '等能力申请' + num.value + '个'
+                  : '能力申请'
+              )
+          : list.value[0].arr[0].resourceName.concat('能力申请'), // 标题
         applicationSystem: [], // 应用系统
         applicationScene: [], // 应用场景
         applicationBackground: '', // 应用背景
diff --git a/front/src/views/home/components/searchResultList.vue b/front/src/views/home/components/searchResultList.vue
index 2afaba5d..e9bdd500 100644
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@@ -37,7 +37,7 @@
           :class="
             item.type == '应用资源'
               ? 'yyzy'
-              : item.type == '数据资源'
+              : !item.type
               ? 'sjzy'
               : item.infoList &&
                 item.infoList.filter((val) => val.attrType == '组件类型')[0]