详情页关联组件样式修改

2022-07-04 17:15:06 +08:00 · 2022-07-04 17:15:06 +08:00 · 68ddce3130
parent 854eaef183
commit 68ddce3130
11 changed files with 232 additions and 149 deletions
--- 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) {
--- 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) {
--- 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')
  })
--- 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
        })
      })
--- 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)"
      >
+        <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;
          }
        }
      }
--- 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"
-      >
-        <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"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].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({
-      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
-    ) {
+  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
  }
-  } 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
-        ) {
+      if (val[0].length != 0) {
        flag.value = true
        dataFrom.value = props.associatedComponents
-          // console.log('dataFrom.value', dataFrom.value)
-        } else {
-          flag.value = false
-        }
+        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;
--- 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.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.name == '关联组件' &&
+              props.associatedComponents[0].length != 0
            ) {
              item.show = true
-              }
            } else {
              item.show = true
            }
--- 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)"
      >
+        <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;
          }
        }
      }
--- 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',
--- 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)"
      >
+        <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;
          }
        }
      }
--- 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) {
+        // if (item.name == '关联应用') {
+        //   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 (props.associatedComponents[0].dataList.length != 0) {
+            // if (item.name == '关联应用') {
+            //   if (props.associatedComponents[0].dataList.length != 0) {
+            //     item.show = true
+            //   }
+            // } else {
            item.show = true
-              }
-            } else {
-              item.show = true
-            }
+            // }
          }
        })
        if (list.value.length > 0) {