From 8a686cfca66601b6125a0f8bf296a95f09bd3c56 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Wed, 6 Jul 2022 12:48:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8=E8=B5=84=E6=BA=90=E5=85=B3?=
 =?UTF-8?q?=E8=81=94=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComponentServices.vue          |  35 ++
 .../Application/ApplicationNavigation.vue     | 329 +++++++++---------
 2 files changed, 197 insertions(+), 167 deletions(-)

diff --git a/front/src/views/capabilityCloud/components/ComponentServices.vue b/front/src/views/capabilityCloud/components/ComponentServices.vue
index 8f0751ba..2c6dc034 100644
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/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: {
diff --git a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
index 4d1c0f4a..189835f5 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/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>
@@ -16,187 +21,177 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps, watch } from 'vue'
-import mybus from '@/myplugins/mybus'
-import { useRouter } from 'vue-router'
-// 获取当前路由地址
-const router = useRouter()
-const keyId = router.currentRoute.value.query.id
-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',
-  },
-  {
-    name: '部署与安全',
-    key: 'deployment-and-security',
-  },
-  {
-    name: '归属部门与服务商',
-    key: 'department-and-service-provider',
-  },
-  {
-    name: '常见问题',
-    key: 'common-problem',
-  },
-])
-const props = defineProps({
-  selectNow: { type: String, default: '' },
-  dataList: { type: Object, default: null },
-  associatedComponents: { type: Array, default: null },
-})
-const select = ref('algorithm-display')
-const list = ref([])
-// 根据能力id查询是否存在关联应用
-if (keyId) {
-  queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
-    console.log('ressssssss', res)
-    if (res.data.data.length > 0) {
-      // 存在关联应用时在导航栏加入关联应用
-      navList.value.unshift({
-        name: '关联组件',
-        key: 'layer-service-associated-ability',
-        show: true,
-      })
-      list.value.unshift('关联组件')
-    }
+  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
+  const navList = ref([
+    {
+      name: '应用展示',
+      key: 'application-presentation',
+    },
+    {
+      name: '功能介绍',
+      key: 'function-introduction',
+    },
+    {
+      name: '使用能力',
+      key: 'ability-to-use',
+    },
+    {
+      name: '部署与安全',
+      key: 'deployment-and-security',
+    },
+    {
+      name: '归属部门与服务商',
+      key: 'department-and-service-provider',
+    },
+    {
+      name: '常见问题',
+      key: 'common-problem',
+    },
+  ])
+  const props = defineProps({
+    selectNow: { type: String, default: '' },
+    dataList: { type: Object, default: null },
+    associatedComponents: { type: Array, default: null },
   })
-}
-const selectNav = (key) => {
-  select.value = key
-  mybus.emit('flyToView', select.value)
-}
-if (props.dataList.infoList) {
-  list.value = []
-  props.dataList.infoList.map((item) => {
-    if (
-      item.attrType === '算法优势' ||
-      item.attrType === '常见问题' ||
-      item.attrType === '使用能力' ||
-      item.attrType === '关联组件'
-    ) {
-      list.value.push(item.attrType)
-    } else if (item.attrType === '应用展示视频') {
-      list.value.push('应用展示')
+  const select = ref('application-associated-ability')
+  const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    let params = {
+      keyId: keyId,
+      type: '组件服务',
     }
-  })
-  list.value.push('关联组件')
-  navList.value.forEach((item) => {
-    console.log(item)
-    if (list.value.indexOf(item.name) > -1) {
+    queryPartAppByKeyId(params).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length != 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联组件',
+          key: 'application-associated-ability',
+          show: true,
+        })
+        list.value.unshift('关联组件')
+      }
+    })
+  }
+  const selectNav = (key) => {
+    select.value = key
+    mybus.emit('flyToView', select.value)
+  }
+  if (props.dataList.infoList) {
+    list.value = []
+    props.dataList.infoList.map((item) => {
       if (
-        item.name == '关联组件' &&
-        props.associatedComponents[0].length != 0
+        item.attrType === '算法优势' ||
+        item.attrType === '常见问题' ||
+        item.attrType === '使用能力' ||
+        item.attrType === '关联组件'
       ) {
-        item.show = true
-      } else {
+        list.value.push(item.attrType)
+      } else if (item.attrType === '应用展示视频') {
+        list.value.push('应用展示')
+      }
+    })
+    list.value.unshift('关联组件')
+    navList.value.forEach((item) => {
+      console.log(item)
+      if (list.value.indexOf(item.name) > -1) {
         item.show = true
       }
-    }
-  })
-  select.value = navList.value.filter(
-    (item) => item.name === list.value[0]
-  )[0].key
-  console.log('11111111111111111111111111', list.value, navList.value)
-}
-watch(
-  () => props.selectNow,
-  (newValue) => {
-    select.value = newValue
-  }
-)
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      list.value = []
-      val.infoList.map((item) => {
-        if (
-          item.attrType === '功能介绍' ||
-          item.attrType === '常见问题' ||
-          item.attrType === '使用能力' ||
-          item.attrType === '关联组件'
-        ) {
-          list.value.push(item.attrType)
-        } else if (item.attrType === '应用展示视频') {
-          list.value.push('应用展示')
-        }
-      })
-      list.value.push('关联组件')
-      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 (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)
     }
+    console.log('11111111111111111111111111', list.value, navList.value)
   }
-)
+  watch(
+    () => props.selectNow,
+    (newValue) => {
+      select.value = newValue
+    }
+  )
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        list.value = []
+        val.infoList.map((item) => {
+          if (
+            item.attrType === '功能介绍' ||
+            item.attrType === '常见问题' ||
+            item.attrType === '使用能力' ||
+            item.attrType === '关联组件'
+          ) {
+            list.value.push(item.attrType)
+          } else if (item.attrType === '应用展示视频') {
+            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) {
+            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 === '关联组件') | (item.name === list.value[0])
+            )[0].key
+          }
+        }
+        console.log('11111111111111111111111111', list.value, navList.value)
+      }
+    }
+  )
 </script>
 <style lang="less" scoped>
-.application-navigation {
-  width: 19.12rem;
-  height: 0.84rem;
-  line-height: 0.8rem;
-  display: flex;
-  justify-content: space-around;
-  font-size: 0.24rem;
-  color: #666;
-  background: #fff;
-  padding: 0 3rem;
-  box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
-  position: relative;
-
-  .nav {
-    cursor: pointer;
+  .application-navigation {
+    width: 19.12rem;
+    height: 0.84rem;
+    line-height: 0.8rem;
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+    justify-content: space-around;
+    font-size: 0.24rem;
+    color: #666;
+    background: #fff;
+    padding: 0 3rem;
+    box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
+    position: relative;
 
-    .line {
-      width: 0.4rem;
-      height: 0.04rem;
+    .nav {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+
+      .line {
+        width: 0.4rem;
+        height: 0.04rem;
+      }
+    }
+
+    .select {
+      color: #526aff;
+
+      .line {
+        background: #526aff;
+      }
     }
   }
-
-  .select {
-    color: #526aff;
-
-    .line {
-      background: #526aff;
-    }
-  }
-}
 </style>