From 68ddce31302e6b64aac34a27a5fee2355ca69264 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Mon, 4 Jul 2022 17:15:06 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E5=85=B3=E8=81=94?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/detailsAll/ApplicationDetails.vue   |  14 +-
 .../src/views/detailsAll/BusinessDetails.vue  |   3 +
 .../views/detailsAll/DeveloperComponents.vue  |  27 ++--
 front/src/views/detailsAll/LayerService.vue   |   1 +
 .../Algorithm/AlgorithmAssociatedAbility.vue  |  36 ++++--
 .../ApplicationAssociatedAbility.vue          | 120 ++++++++++--------
 .../Application/ApplicationNavigation.vue     |  26 ++--
 .../Business/BusinessAssociatedAbility.vue    |  56 +++++---
 .../Business/BusinessNavigation.vue           |   8 +-
 .../Developer/DeveloperAssociatedAbility.vue  |  59 ++++++---
 .../Developer/DeveloperNavigation.vue         |  31 ++---
 11 files changed, 232 insertions(+), 149 deletions(-)

diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index 5589ab37..bd5f757d 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -33,7 +33,8 @@
     ></application-associated-components>
     <!-- 关联能力 -->
     <application-associated-ability
-      :associatedComponents="associatedComponentsFunction()"
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
       id="application-associated-ability"
       class="scrollBox"
     ></application-associated-ability>
@@ -84,11 +85,8 @@
   import { useRouter } from 'vue-router'
   import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
   import mybus from '@/myplugins/mybus'
-  const associatedComponents = ref([
-    { type: '组件服务', dataList: [] },
-    { type: '数据资源', dataList: [] },
-    { type: '基础设施', dataList: [] },
-  ])
+  const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
+  let loading = ref(true)
   const router = useRouter()
   const scrollTop = ref(0)
   const domArr = ref([])
@@ -164,7 +162,9 @@
           type: item.type,
         }
         queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
+          associatedComponents.value[0].dataList = res.data.data
+          debugger
+          loading.value = false
         })
       })
     } else if (obj) {
diff --git a/front/src/views/detailsAll/BusinessDetails.vue b/front/src/views/detailsAll/BusinessDetails.vue
index 00a0434f..c630e25c 100644
--- a/front/src/views/detailsAll/BusinessDetails.vue
+++ b/front/src/views/detailsAll/BusinessDetails.vue
@@ -18,6 +18,7 @@
     ></business-navigation>
     <!-- 关联能力 -->
     <business-associated-ability
+      v-if="!loading"
       :associatedComponents="associatedComponents"
       id="business-associated-ability"
       class="scrollBox"
@@ -82,6 +83,7 @@
   const id = router.currentRoute.value.query.id
   const obj = JSON.parse(window.sessionStorage.getItem('preview'))
   const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
   document.documentElement.style.transition = 'all 0.3s ease'
   document.documentElement.scrollTop = 0
   document.body.style.transition = 'all 0.3s ease'
@@ -146,6 +148,7 @@
         }
         queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
           associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
         })
       })
     } else if (obj) {
diff --git a/front/src/views/detailsAll/DeveloperComponents.vue b/front/src/views/detailsAll/DeveloperComponents.vue
index 2047bcbd..cd9fcbe3 100644
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@@ -12,7 +12,7 @@
     <!-- 导航 -->
     <developer-navigation
       :dataList="dataList.data"
-      :associatedComponents="associatedComponents"
+      :associatedComponents="associatedComponentsFunction()"
       :class="{ fixed: scrollTop >= 600 }"
       :selectNow="selectNow"
     ></developer-navigation>
@@ -24,6 +24,7 @@
     ></Developer-presentation>
     <!-- 关联能力 -->
     <developer-associated-ability
+      v-if="!loading"
       :associatedComponents="associatedComponents"
       id="developer-associated-ability"
       class="scrollBox"
@@ -89,6 +90,7 @@
   const id = router.currentRoute.value.query.id
   const obj = JSON.parse(window.sessionStorage.getItem('preview'))
   const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
   document.documentElement.style.transition = 'all 0.3s ease'
   document.documentElement.scrollTop = 0
   document.body.style.transition = 'all 0.3s ease'
@@ -125,9 +127,16 @@
       }
     })
   })
-
   const init = (id) => {
     if (id) {
+      let queryPartAppByKeyIdParams = {
+        keyId: id,
+      }
+      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+        associatedComponents.value[0].dataList = res.data.data
+        debugger
+        loading.value = false
+      })
       selectOne(id).then((res) => {
         // console.clear()
         dataList.data = res.data.data
@@ -147,20 +156,18 @@
           })
         }
       })
-      associatedComponents.value.map((item, index) => {
-        let queryPartAppByKeyIdParams = {
-          keyId: id,
-        }
-        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
-        })
-      })
+      associatedComponents.value.map((item, index) => {})
     } else if (obj) {
       dataList.data = obj
       console.log('预览==============', obj)
     }
   }
   init(id)
+  const associatedComponentsFunction = () => {
+    if (associatedComponents.value[0].dataList.length > 0) {
+      return associatedComponents.value
+    }
+  }
   onBeforeUnmount(() => {
     mybus.off('flyToView')
   })
diff --git a/front/src/views/detailsAll/LayerService.vue b/front/src/views/detailsAll/LayerService.vue
index 2411a090..7906c466 100644
--- a/front/src/views/detailsAll/LayerService.vue
+++ b/front/src/views/detailsAll/LayerService.vue
@@ -154,6 +154,7 @@
           keyId: id,
         }
         queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          debugger
           associatedComponents.value[index].dataList = res.data.data
         })
       })
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
index 023501d8..a39683c2 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
@@ -8,13 +8,19 @@
         :key="dataListitem.id"
         @click="switchFunction(dataListitem.id)"
       >
-        <div class="associated-ability-card-title">
-          {{ dataListitem.name }}
-        </div>
-        <div class="associated-ability-card-content">
-          <div class="associated-ability-card-content-font">
-            {{ dataListitem.description }}
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
+            {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
@@ -40,7 +46,7 @@
     //     id: id,
     //   },
     // })
-    window.open(window.SITE_CONFIG.previewUrl+ '#/details?id=' + id)
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
     // alert(id)
   }
   console.log('这个是空值', props.associatedComponents[0])
@@ -85,21 +91,29 @@
     .application-associated-ability-main {
       margin-top: 0.4rem;
       width: 13.3rem;
-      display: flex;
-      justify-content: space-around;
+      display: grid;
+      grid-template-columns: repeat(4, 25%);
       .associated-ability-card {
         width: 3.2rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
         cursor: pointer;
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -111,6 +125,10 @@
             margin-right: 0.15rem;
             margin-top: 0.15rem;
             text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
index e73ed586..91e0360b 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
@@ -1,25 +1,28 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
-    <detals-title title="关联组件" type="RELEVANCE"></detals-title>
+    <detals-title title="关联组件" type="ASSOCIATED"></detals-title>
     <div class="application-associated-ability-main">
       <div
         class="associated-ability-card"
-        v-for="(item, index) in dataFrom"
-        :key="item.type"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+        :key="dataListitem.id"
+        @click="switchFunction(dataListitem.id)"
+        :class="cardFunction(dataFrom[0].dataList)"
       >
-        <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>
+        <div class="icon"></div>
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
             {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description || '' }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description || '' }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
@@ -39,44 +42,36 @@
   const oldid = router.currentRoute.value.query.id
   //点击查看详情
   const switchFunction = (id) => {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
   }
-  if (props.associatedComponents) {
-    if (
-      props.associatedComponents[0].dataList.length > 0 ||
-      props.associatedComponents[1].dataList.length > 0 ||
-      props.associatedComponents[2].dataList.length > 0
-    ) {
-      flag.value = true
-      dataFrom.value = props.associatedComponents
-      console.log('dataFrom.value', dataFrom.value)
-    } else {
-      flag.value = false
-    }
+  if (props.associatedComponents[0].dataList.length != 0) {
+    console.log('这个是空值', props.associatedComponents)
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
   } else {
     flag.value = false
   }
-
+  //根据数据多少决定对齐方式
+  const cardFunction = (item) => {
+    if (item.length < 5) {
+      return 'card-function-class'
+    }
+  }
   watch(
     () => props.associatedComponents,
     (val) => {
-      if (props.associatedComponents) {
-        if (
-          val[0].dataList.length > 0 ||
-          val[1].dataList.length > 0 ||
-          val[2].dataList.length > 0
-        ) {
-          flag.value = true
-          dataFrom.value = props.associatedComponents
-          // console.log('dataFrom.value', dataFrom.value)
-        } else {
-          flag.value = false
-        }
+      if (val[0].length != 0) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
       } else {
         flag.value = false
       }
@@ -102,22 +97,37 @@
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
-      width: 13.14rem;
-      display: flex;
-      justify-content: space-between;
+      width: 13.3rem;
+      display: grid;
+      grid-template-columns: repeat(4, 25%);
       .associated-ability-card {
-        width: 4.28rem;
+        width: 3.2rem;
+        // height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
+        padding-top: 0.3rem;
         cursor: pointer;
+        .icon {
+          width: 82px;
+          height: 82px;
+          background: url('~@/assets/detailsAll/sf_icon1.png') no-repeat;
+          background-size: 100%;
+        }
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -128,12 +138,18 @@
             color: #999;
             margin-right: 0.15rem;
             margin-top: 0.15rem;
-          }
-          .associated-ability-card-content-font:hover {
-            color: #0058e1;
+            text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
+      .card-function-class {
+        display: flex;
+        justify-content: center;
+      }
       .associated-ability-card:hover {
         border-radius: 0.02rem;
         border: 0.01rem solid #0058e1;
diff --git a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
index bb92e834..e0e3c845 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@@ -86,14 +86,11 @@
     navList.value.forEach((item) => {
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
-        if (item.name == '关联组件') {
-          if (
-            props.associatedComponents[0].dataList.length != 0 ||
-            props.associatedComponents[1].dataList.length != 0 ||
-            props.associatedComponents[2].dataList.length != 0
-          ) {
-            item.show = true
-          }
+        if (
+          item.name == '关联组件' &&
+          props.associatedComponents[0].length != 0
+        ) {
+          item.show = true
         } else {
           item.show = true
         }
@@ -133,14 +130,11 @@
         navList.value.forEach((item) => {
           console.log(item)
           if (list.value.indexOf(item.name) > -1) {
-            if (item.name == '关联组件') {
-              if (
-                props.associatedComponents[0].dataList.length != 0 ||
-                props.associatedComponents[1].dataList.length != 0 ||
-                props.associatedComponents[2].dataList.length != 0
-              ) {
-                item.show = true
-              }
+            if (
+              item.name == '关联组件' &&
+              props.associatedComponents[0].length != 0
+            ) {
+              item.show = true
             } else {
               item.show = true
             }
diff --git a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
index 0173725e..a39683c2 100644
--- a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
-    <detals-title title="关联应用" type="RELEVANCE"></detals-title>
+    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
     <div class="application-associated-ability-main">
       <div
         class="associated-ability-card"
@@ -8,13 +8,19 @@
         :key="dataListitem.id"
         @click="switchFunction(dataListitem.id)"
       >
-        <div class="associated-ability-card-title">
-          {{ dataListitem.name }}
-        </div>
-        <div class="associated-ability-card-content">
-          <div class="associated-ability-card-content-font">
-            {{ dataListitem.description }}
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
+            {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
@@ -34,17 +40,20 @@
   const oldid = router.currentRoute.value.query.id
   //点击查看详情
   const switchFunction = (id) => {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
   }
-  if (props.associatedComponents[0].dataList.length != 0) {
+  console.log('这个是空值', props.associatedComponents[0])
+  if (props.associatedComponents[0].dataList.length > 0) {
+    console.log('这个是空值', props.associatedComponents)
     flag.value = true
     dataFrom.value = props.associatedComponents
-    debugger
     console.log('dataFrom.value', dataFrom.value)
   } else {
     flag.value = false
@@ -82,21 +91,29 @@
     .application-associated-ability-main {
       margin-top: 0.4rem;
       width: 13.3rem;
-      display: flex;
-      justify-content: space-between;
+      display: grid;
+      grid-template-columns: repeat(4, 25%);
       .associated-ability-card {
         width: 3.2rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
         cursor: pointer;
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -107,6 +124,11 @@
             color: #999;
             margin-right: 0.15rem;
             margin-top: 0.15rem;
+            text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
index 69eba071..bc2e18d6 100644
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@@ -24,14 +24,14 @@
   import { ref, defineProps, watch } from 'vue'
   import mybus from '@/myplugins/mybus'
   const navList = ref([
-    {
-      name: '组件展示',
-      key: 'business-presentation',
-    },
     {
       name: '关联应用',
       key: 'business-associated-ability',
     },
+    {
+      name: '组件展示',
+      key: 'business-presentation',
+    },
     {
       name: '功能介绍',
       key: 'function-introduction',
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
index e03abb90..6f3c050c 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
@@ -1,20 +1,26 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
-    <detals-title title="关联应用" type="RELEVANCE"></detals-title>
+    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
     <div class="application-associated-ability-main">
       <div
         class="associated-ability-card"
-        v-for="dataListitem in dataFrom[0].dataList"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
         :key="dataListitem.id"
         @click="switchFunction(dataListitem.id)"
       >
-        <div class="associated-ability-card-title">
-          {{ dataListitem.name }}
-        </div>
-        <div class="associated-ability-card-content">
-          <div class="associated-ability-card-content-font">
-            {{ dataListitem.description }}
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
+            {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
@@ -34,17 +40,19 @@
   const oldid = router.currentRoute.value.query.id
   //点击查看详情
   const switchFunction = (id) => {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
   }
   if (props.associatedComponents[0].dataList.length != 0) {
+    console.log('这个是空值', props.associatedComponents)
     flag.value = true
     dataFrom.value = props.associatedComponents
-    debugger
     console.log('dataFrom.value', dataFrom.value)
   } else {
     flag.value = false
@@ -52,7 +60,7 @@
   watch(
     () => props.associatedComponents,
     (val) => {
-      if (val) {
+      if (val.length != 0) {
         flag.value = true
         dataFrom.value = props.associatedComponents
         console.log('dataFrom.value', dataFrom.value)
@@ -63,7 +71,7 @@
   )
   watch(
     () => router.currentRoute.value.query.id,
-    () => {
+    (newValue, oldValue) => {
       if (oldid != router.currentRoute.value.query.id) {
         window.location.reload()
       }
@@ -82,21 +90,29 @@
     .application-associated-ability-main {
       margin-top: 0.4rem;
       width: 13.3rem;
-      display: flex;
-      justify-content: space-between;
+      display: grid;
+      grid-template-columns: repeat(4, 25%);
       .associated-ability-card {
         width: 3.2rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
         cursor: pointer;
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -107,6 +123,11 @@
             color: #999;
             margin-right: 0.15rem;
             margin-top: 0.15rem;
+            text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
index dcc3f48c..50082f81 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
@@ -60,7 +60,7 @@
   const props = defineProps({
     selectNow: { type: String, default: '' },
     dataList: { type: Object, default: null },
-    associatedComponents: { type: Array, default: null },
+    associatedComponents: { type: Object, default: null },
   })
   const select = ref('algorithm-display')
   const list = ref([])
@@ -85,13 +85,14 @@
     navList.value.forEach((item) => {
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
-        if (item.name == '关联应用') {
-          if (props.associatedComponents[0].dataList.length != 0) {
-            item.show = true
-          }
-        } else {
-          item.show = true
-        }
+        // if (item.name == '关联应用') {
+        //   debugger
+        //   if (props.associatedComponents[0].dataList.length != 0) {
+        //     item.show = true
+        //   }
+        // } else {
+        item.show = true
+        // }
       }
     })
     select.value = navList.value.filter(
@@ -128,13 +129,13 @@
         navList.value.forEach((item) => {
           console.log(item)
           if (list.value.indexOf(item.name) > -1) {
-            if (item.name == '关联应用') {
-              if (props.associatedComponents[0].dataList.length != 0) {
-                item.show = true
-              }
-            } else {
-              item.show = true
-            }
+            // if (item.name == '关联应用') {
+            //   if (props.associatedComponents[0].dataList.length != 0) {
+            //     item.show = true
+            //   }
+            // } else {
+            item.show = true
+            // }
           }
         })
         if (list.value.length > 0) {