关联能力

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,
+  })
+}

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)

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)

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)

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)

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)

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>

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) {

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>

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) => {

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>

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)

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>

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) => {

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>

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) => {

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)
         )