应用资源关联组件

front/src/views/capabilityCloud/components/ComponentServices.vue

@@ -168,6 +168,7 @@
           }
         })
       } else {
+        callTheTrendData.value.snum = ['0', '0', '0', '0', '0', '0', '0']
         callTheTrend(callTheTrendData.value)
       }
     } else {
@@ -202,6 +203,39 @@
           }
         })
       } else {
+        callTheTrendData.value.snum = [
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+        ]
         callTheTrend(callTheTrendData.value)
       }
     }
@@ -253,6 +287,7 @@
       ],
       yAxis: [
         {
+          minInterval: 1,
           name: '个',
           type: 'value',
           axisTick: {

front/src/views/detailsAll/components/Application/ApplicationNavigation.vue

@@ -8,7 +8,12 @@
 <template>
   <div class="application-navigation" v-if="navList.length > 0">
     <template v-for="nav in navList" :key="nav.key">
-      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
+      <div
+        class="nav"
+        :class="{ select: nav.key == select }"
+        v-if="nav.show"
+        @click="selectNav(nav.key)"
+      >
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -19,6 +24,7 @@
   import { ref, defineProps, watch } from 'vue'
   import mybus from '@/myplugins/mybus'
   import { useRouter } from 'vue-router'
+  import { queryPartAppByKeyId } from '@/api/home'
   // 获取当前路由地址
   const router = useRouter()
   const keyId = router.currentRoute.value.query.id
@@ -27,18 +33,10 @@ const navList = ref([
       name: '应用展示',
       key: 'application-presentation',
     },
-  {
-    name: '关联组件',
-    key: 'application-associated-ability',
-  },
     {
       name: '功能介绍',
       key: 'function-introduction',
     },
-  // {
-  //   name: '关联组件',
-  //   key: 'application-associated-components',
-  // },
     {
       name: '使用能力',
       key: 'ability-to-use',
@@ -61,17 +59,21 @@ const props = defineProps({
     dataList: { type: Object, default: null },
     associatedComponents: { type: Array, default: null },
   })
-const select = ref('algorithm-display')
+  const select = ref('application-associated-ability')
   const list = ref([])
   // 根据能力id查询是否存在关联应用
   if (keyId) {
-  queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+    let params = {
+      keyId: keyId,
+      type: '组件服务',
+    }
+    queryPartAppByKeyId(params).then((res) => {
       console.log('ressssssss', res)
-    if (res.data.data.length > 0) {
+      if (res.data.data.length != 0) {
         // 存在关联应用时在导航栏加入关联应用
         navList.value.unshift({
           name: '关联组件',
-        key: 'layer-service-associated-ability',
+          key: 'application-associated-ability',
           show: true,
         })
         list.value.unshift('关联组件')
@@ -96,23 +98,20 @@ if (props.dataList.infoList) {
         list.value.push('应用展示')
       }
     })
-  list.value.push('关联组件')
+    list.value.unshift('关联组件')
     navList.value.forEach((item) => {
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
-      if (
-        item.name == '关联组件' &&
-        props.associatedComponents[0].length != 0
-      ) {
         item.show = true
-      } else {
-        item.show = true
-      }
       }
     })
+    if (list.value.length > 0) {
+      if (navList.value.filter((item) => item.name === list.value[0])[0]) {
         select.value = navList.value.filter(
-    (item) => item.name === list.value[0]
+          (item) => (item.name === '关联组件') | (item.name === list.value[0])
         )[0].key
+      }
+    }
     console.log('11111111111111111111111111', list.value, navList.value)
   }
   watch(
@@ -138,27 +137,23 @@ watch(
             list.value.push('应用展示')
           }
         })
-      list.value.push('关联组件')
+        list.value.unshift('关联组件')
         list.value.push('部署与安全')
         list.value.push('归属部门与服务商')
         navList.value.forEach((item) => {
           console.log(item)
           if (list.value.indexOf(item.name) > -1) {
-          if (
-            item.name == '关联组件' &&
-            props.associatedComponents[0].length != 0
-          ) {
             item.show = true
-          } else {
-            item.show = true
-          }
           }
         })
         if (list.value.length > 0) {
+          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
             select.value = navList.value.filter(
-          (item) => item.name === list.value[0]
+              (item) =>
+                (item.name === '关联组件') | (item.name === list.value[0])
             )[0].key
           }
+        }
         console.log('11111111111111111111111111', list.value, navList.value)
       }
     }