Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev

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([
+  const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
-    { type: '组件服务', dataList: [] },
+  let loading = ref(true)
-    { type: '数据资源', dataList: [] },
-    { type: '基础设施', dataList: [] },
-  ])
   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) {

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

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) => {
+      associatedComponents.value.map((item, index) => {})
-        let queryPartAppByKeyIdParams = {
-          keyId: id,
-        }
-        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
-        })
-      })
     } 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')
   })

front/src/views/detailsAll/LayerService.vue

@@ -154,6 +154,7 @@
           keyId: id,
         }
         queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          debugger
           associatedComponents.value[index].dataList = res.data.data
         })
       })

front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue

@@ -8,13 +8,19 @@
         :key="dataListitem.id"
         @click="switchFunction(dataListitem.id)"
       >
+        <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;
+      display: grid;
-      justify-content: space-around;
+      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;
           }
         }
       }

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"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
-        :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)"
+        :class="cardFunction(dataFrom[0].dataList)"
       >
-            <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({
+    // router.push({
-      path: '/details',
+    //   path: '/details',
-      query: {
+    //   query: {
-        id: id,
+    //     id: id,
-      },
+    //   },
-    })
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
   }
-  if (props.associatedComponents) {
+  if (props.associatedComponents[0].dataList.length != 0) {
-    if (
+    console.log('这个是空值', props.associatedComponents)
-      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
   }
-  } 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].length != 0) {
-        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)
+        console.log('dataFrom.value', dataFrom.value)
-        } else {
-          flag.value = false
-        }
       } else {
         flag.value = false
       }
@@ -102,22 +97,37 @@
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
-      width: 13.14rem;
+      width: 13.3rem;
-      display: flex;
+      display: grid;
-      justify-content: space-between;
+      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;
-          }
+            text-align: center;
-          .associated-ability-card-content-font:hover {
+            display: -webkit-box;
-            color: #0058e1;
+            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;

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 ||
+          item.name == '关联组件' &&
-            props.associatedComponents[1].dataList.length != 0 ||
+          props.associatedComponents[0].length != 0
-            props.associatedComponents[2].dataList.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 ||
+              item.name == '关联组件' &&
-                props.associatedComponents[1].dataList.length != 0 ||
+              props.associatedComponents[0].length != 0
-                props.associatedComponents[2].dataList.length != 0
             ) {
               item.show = true
-              }
             } else {
               item.show = true
             }

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)"
       >
+        <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({
+    // router.push({
-      path: '/details',
+    //   path: '/details',
-      query: {
+    //   query: {
-        id: id,
+    //     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;
+      display: grid;
-      justify-content: space-between;
+      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;
           }
         }
       }

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',

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)"
       >
+        <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({
+    // router.push({
-      path: '/details',
+    //   path: '/details',
-      query: {
+    //   query: {
-        id: id,
+    //     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;
+      display: grid;
-      justify-content: space-between;
+      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;
           }
         }
       }

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 (item.name == '关联应用') {
-          if (props.associatedComponents[0].dataList.length != 0) {
+        //   debugger
+        //   if (props.associatedComponents[0].dataList.length != 0) {
+        //     item.show = true
+        //   }
+        // } else {
         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 (item.name == '关联应用') {
-              if (props.associatedComponents[0].dataList.length != 0) {
+            //   if (props.associatedComponents[0].dataList.length != 0) {
+            //     item.show = true
+            //   }
+            // } else {
             item.show = true
-              }
+            // }
-            } else {
-              item.show = true
-            }
           }
         })
         if (list.value.length > 0) {