From 2a6ba2659416e91f0b81e8d8aeeca3455ccc33ec Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Wed, 29 Jun 2022 16:56:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E8=81=94=E8=83=BD=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/api/home.js                         |   8 ++
 .../src/views/detailsAll/AlgorithmDetails.vue |  23 +++-
 .../views/detailsAll/ApplicationDetails.vue   |  23 +++-
 .../src/views/detailsAll/BusinessDetails.vue  |  23 +++-
 .../views/detailsAll/DeveloperComponents.vue  |  23 +++-
 front/src/views/detailsAll/LayerService.vue   |  23 +++-
 .../Algorithm/AlgorithmAssociatedAbility.vue  | 127 ++++++++++++++++++
 .../Algorithm/AlgorithmNavigation.vue         |   6 +
 .../ApplicationAssociatedAbility.vue          | 127 ++++++++++++++++++
 .../Application/ApplicationNavigation.vue     |   6 +
 .../Business/BusinessAssociatedAbility.vue    | 127 ++++++++++++++++++
 .../Business/BusinessNavigation.vue           |   6 +
 .../Developer/DeveloperAssociatedAbility.vue  | 127 ++++++++++++++++++
 .../Developer/DeveloperNavigation.vue         |   7 +-
 .../LayerServiceAssociatedAbility.vue         | 127 ++++++++++++++++++
 .../LayerService/LayerServiceNavigation.vue   |   7 +-
 front/src/views/home/DetailsPageconetent.vue  |   4 -
 17 files changed, 783 insertions(+), 11 deletions(-)
 create mode 100644 front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
 create mode 100644 front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
 create mode 100644 front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
 create mode 100644 front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
 create mode 100644 front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue

diff --git a/front/src/api/home.js b/front/src/api/home.js
index 6f560eb9..85da72ff 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -297,3 +297,11 @@ export function getDataResource(data) {
     data,
   })
 }
+//应用详情列表
+export function queryPartAppByKeyId(params) {
+  return request({
+    url: 'dataResourceRel/queryPart4AppByKeyId',
+    method: 'get',
+    params,
+  })
+}
diff --git a/front/src/views/detailsAll/AlgorithmDetails.vue b/front/src/views/detailsAll/AlgorithmDetails.vue
index 911b4974..1bac95d9 100644
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@@ -21,6 +21,12 @@
       id="algorithm-display"
       class="scrollBox"
     ></algorithm-display>
+    <!-- 关联能力 -->
+    <algorithm-associated-ability
+      :associatedComponents="associatedComponents"
+      id="algorithm-associated-ability"
+      class="scrollBox"
+    ></algorithm-associated-ability>
     <!-- 算法优势 -->
     <algorithm-advantage
       :dataList="dataList.data"
@@ -70,6 +76,7 @@
 </template>
 <script setup>
   import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
+  import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
   import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
   import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
   import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
@@ -81,7 +88,7 @@
   import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
   import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
   import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
   import mybus from '@/myplugins/mybus'
   const router = useRouter()
   const scrollTop = ref(0)
@@ -90,6 +97,11 @@
   const dataList = reactive({ data: {} })
   const id = router.currentRoute.value.query.id
   const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([
+    { type: '应用资源', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
   document.documentElement.style.transition = 'all 0.3s ease'
   document.documentElement.scrollTop = 0
   document.body.style.transition = 'all 0.3s ease'
@@ -148,6 +160,15 @@
           })
         }
       })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
     } else if (obj) {
       dataList.data = obj
       console.log('预览==============', obj)
diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index 0664547e..509ade79 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -29,6 +29,12 @@
       id="application-associated-components"
       class="scrollBox"
     ></application-associated-components>
+    <!-- 关联能力 -->
+    <application-associated-ability
+      :associatedComponents="associatedComponents"
+      id="application-associated-ability"
+      class="scrollBox"
+    ></application-associated-ability>
     <!-- 功能介绍-->
     <application-function-intorduction
       :dataList="dataList.data"
@@ -64,6 +70,7 @@
 <script setup>
   import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
   import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
+  import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
   import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
   import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
   import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
@@ -73,8 +80,13 @@
   import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
   import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
   import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
   import mybus from '@/myplugins/mybus'
+  const associatedComponents = ref([
+    { type: '组件服务', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
   const router = useRouter()
   const scrollTop = ref(0)
   const domArr = ref([])
@@ -140,6 +152,15 @@
           })
         }
       })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
     } else if (obj) {
       dataList.data = obj
       console.log('预览==============', obj)
diff --git a/front/src/views/detailsAll/BusinessDetails.vue b/front/src/views/detailsAll/BusinessDetails.vue
index aaadae11..8cbd5352 100644
--- a/front/src/views/detailsAll/BusinessDetails.vue
+++ b/front/src/views/detailsAll/BusinessDetails.vue
@@ -21,6 +21,12 @@
       id="business-presentation"
       class="scrollBox"
     ></business-presentation>
+    <!-- 关联能力 -->
+    <business-associated-ability
+      :associatedComponents="associatedComponents"
+      id="business-associated-ability"
+      class="scrollBox"
+    ></business-associated-ability>
     <!-- 功能介绍-->
     <business-function-intorduction
       :dataList="dataList.data"
@@ -55,6 +61,7 @@
 </template>
 <script setup>
   import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
+  import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
   import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
   import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
   import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
@@ -64,7 +71,7 @@
   import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
   import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
   import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
   import mybus from '@/myplugins/mybus'
   const router = useRouter()
   const scrollTop = ref(0)
@@ -73,6 +80,11 @@
   const dataList = reactive({ data: {} })
   const id = router.currentRoute.value.query.id
   const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([
+    { type: '应用资源', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
   document.documentElement.style.transition = 'all 0.3s ease'
   document.documentElement.scrollTop = 0
   document.body.style.transition = 'all 0.3s ease'
@@ -131,6 +143,15 @@
           })
         }
       })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
     } else if (obj) {
       dataList.data = obj
       console.log('预览==============', obj)
diff --git a/front/src/views/detailsAll/DeveloperComponents.vue b/front/src/views/detailsAll/DeveloperComponents.vue
index d150981a..1c7c5c9e 100644
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@@ -21,6 +21,12 @@
       id="eveloper-presentation"
       class="scrollBox"
     ></Developer-presentation>
+    <!-- 关联能力 -->
+    <developer-associated-ability
+      :associatedComponents="associatedComponents"
+      id="developer-associated-ability"
+      class="scrollBox"
+    ></developer-associated-ability>
     <!-- 功能介绍-->
     <developer-function-intorduction
       :dataList="dataList.data"
@@ -61,6 +67,7 @@
 </template>
 <script setup>
   import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
+  import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
   import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
   import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
   import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
@@ -71,7 +78,7 @@
   import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
   import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
   import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
   import mybus from '@/myplugins/mybus'
   const router = useRouter()
   const scrollTop = ref(0)
@@ -80,6 +87,11 @@
   const dataList = reactive({ data: {} })
   const id = router.currentRoute.value.query.id
   const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([
+    { type: '应用资源', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
   document.documentElement.style.transition = 'all 0.3s ease'
   document.documentElement.scrollTop = 0
   document.body.style.transition = 'all 0.3s ease'
@@ -138,6 +150,15 @@
           })
         }
       })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
     } else if (obj) {
       dataList.data = obj
       console.log('预览==============', obj)
diff --git a/front/src/views/detailsAll/LayerService.vue b/front/src/views/detailsAll/LayerService.vue
index 1eec31a7..126e17cb 100644
--- a/front/src/views/detailsAll/LayerService.vue
+++ b/front/src/views/detailsAll/LayerService.vue
@@ -29,6 +29,12 @@
       id="service-information"
       class="scrollBox"
     ></layer-service-information>
+    <!-- 关联能力 -->
+    <layer-service-associated-ability
+      :associatedComponents="associatedComponents"
+      id="layer-service-associated-ability"
+      class="scrollBox"
+    ></layer-service-associated-ability>
     <!-- 应用场景 -->
     <layer-service-application-scenarios
       :dataList="dataList.data"
@@ -63,6 +69,7 @@
 </template>
 <script setup>
   import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
+  import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
   import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
   import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
   import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
@@ -73,7 +80,7 @@
   import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
   import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
   import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
   import mybus from '@/myplugins/mybus'
   const router = useRouter()
   const scrollTop = ref(0)
@@ -82,6 +89,11 @@
   const dataList = reactive({ data: {} })
   const id = router.currentRoute.value.query.id
   const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([
+    { type: '应用资源', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
   document.documentElement.style.transition = 'all 0.3s ease'
   document.documentElement.scrollTop = 0
   document.body.style.transition = 'all 0.3s ease'
@@ -140,6 +152,15 @@
           })
         }
       })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
     } else if (obj) {
       dataList.data = obj
       console.log('预览==============', obj)
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
new file mode 100644
index 00000000..4740f254
--- /dev/null
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
index 96b831ab..bb2ac893 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
@@ -32,6 +32,10 @@
       name: '算法优势',
       key: 'algorithm-advantage',
     },
+    {
+      name: '关联能力',
+      key: 'algorithm-associated-ability',
+    },
     {
       name: '应用场景',
       key: 'application-scenarios',
@@ -87,6 +91,7 @@
         list.value.push('使用方式')
       }
     })
+    list.value.push('关联能力')
     navList.value.forEach((item) => {
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
@@ -131,6 +136,7 @@
             list.value.push('使用方式')
           }
         })
+        list.value.push('关联能力')
         navList.value.forEach((item) => {
           console.log(item)
           if (list.value.indexOf(item.name) > -1) {
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
new file mode 100644
index 00000000..4740f254
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
index a53358b2..3fc42394 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@@ -36,6 +36,10 @@
       name: '关联组件',
       key: 'application-associated-components',
     },
+    {
+      name: '关联能力',
+      key: 'application-associated-ability',
+    },
     {
       name: '使用能力',
       key: 'ability-to-use',
@@ -77,6 +81,7 @@
         list.value.push('应用展示')
       }
     })
+    list.value.push('关联能力')
     navList.value.forEach((item) => {
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
@@ -111,6 +116,7 @@
             list.value.push('应用展示')
           }
         })
+        list.value.push('关联能力')
         list.value.push('部署与安全')
         list.value.push('归属部门与服务商')
         navList.value.forEach((item) => {
diff --git a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
new file mode 100644
index 00000000..4740f254
--- /dev/null
+++ b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
index e285dc53..fa9f6e76 100644
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@@ -36,6 +36,10 @@
       name: '应用场景',
       key: 'application-scenarios',
     },
+    {
+      name: '关联能力',
+      key: 'business-associated-ability',
+    },
     {
       name: '应用案例',
       key: 'application-case',
@@ -87,6 +91,7 @@
         list.value.push('组件展示')
       }
     })
+    list.value.push('关联能力')
     list.value.push('使用方式')
     navList.value.forEach((item) => {
       console.log(item)
@@ -136,6 +141,7 @@
             list.value.push('组件展示')
           }
         })
+        list.value.push('关联能力')
         list.value.push('使用方式')
         navList.value.forEach((item) => {
           console.log(item)
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
new file mode 100644
index 00000000..4740f254
--- /dev/null
+++ b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
index 05b817f9..dc751b18 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
@@ -28,6 +28,10 @@
       name: '组件展示',
       key: 'eveloper-presentation',
     },
+    {
+      name: '关联能力',
+      key: 'developer-associated-ability',
+    },
     {
       name: '功能介绍',
       key: 'function-introduction',
@@ -66,7 +70,6 @@
   if (props.dataList.infoList) {
     list.value = []
     props.dataList.infoList.map((item) => {
-      debugger
       if (
         item.attrType === '常见问题' ||
         item.attrType === '应用案例' ||
@@ -77,6 +80,7 @@
         list.value.push('组件展示')
       }
     })
+    list.value.push('关联能力')
     navList.value.forEach((item) => {
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
@@ -111,6 +115,7 @@
             list.value.push('组件展示')
           }
         })
+        list.value.push('关联能力')
         list.value.push('组件试用')
         list.value.push('使用方式')
         navList.value.forEach((item) => {
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
new file mode 100644
index 00000000..4740f254
--- /dev/null
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
index b6c96318..cdaa2258 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@@ -32,6 +32,10 @@
       name: '图层信息',
       key: 'service-information',
     },
+    {
+      name: '关联能力',
+      key: 'layer-service-associated-ability',
+    },
     {
       name: '应用场景',
       key: 'service-application-scenarios',
@@ -117,7 +121,7 @@
         list.value.push('使用方式')
       }
     })
-
+    list.value.push('关联能力')
     navList.value.forEach((item) => {
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
@@ -192,6 +196,7 @@
             list.value.push('使用方式')
           }
         })
+        list.value.push('关联能力')
         list.value.push('图层信息')
         list.value.push('使用方式')
         navList.value.forEach((item) => {
diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index 931abc69..5060a8ba 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -1018,7 +1018,6 @@
               })
               console.log('paramsGetResources', paramsGetResources)
             }
-            // debugger
             tecHnosphere = router.currentRoute.value.query.tecHnosphere
             appLiCation = router.currentRoute.value.query.appLiCation
             if (val.typeList && val.typeList.length > 6) {
@@ -1099,7 +1098,6 @@
           if (switchIndex != '分页查询') {
             paramsGetResources.pageNum = 1
           }
-          debugger
           pageWithAttrs(paramsGetResources).then((res) => {
             console.log('查询列表============>', resourceList, res.data.data)
             resourceList.data = []
@@ -1193,7 +1191,6 @@
         paramsGetResources.pageNum = val
         let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
         getAppResources(params)
-        debugger
       }
       // const findZywMessage = () => {
       //   zywMessage().then((res) => {
@@ -1246,7 +1243,6 @@
         router.currentRoute.value.query.appLiCation = ''
         tecHnosphere = router.currentRoute.value.query.tecHnosphere
         appLiCation = router.currentRoute.value.query.appLiCation
-        // debugger
         let newQuery = JSON.parse(
           JSON.stringify(router.currentRoute.value.query)
         )