CN-1149 详情页"相关实体"展示交互优化

src/assets/css/components/views/charts2/domainNameResolution.scss

@@ -33,8 +33,11 @@
       }
     }
 
+    .more{
+      margin-bottom:20px;
+    }
     .type-content {
-      margin-bottom:15px;
+      margin-bottom:0px;
       display:flex;
       flex-flow: row wrap;
       width:100%;

src/views/charts2/chart-mixin.js

@@ -1,3 +1,5 @@
+import { entityDetailRelatedEntitiesShowSize } from '@/utils/constants'
+
 export default {
   props: {
     chart: Object,
@@ -15,6 +17,22 @@ export default {
   methods: {
     toggleLoading (loading) {
       this.$emit('toggleLoading', loading)
+    },
+    showMore (showListInfo, allList) {
+      const showNum = showListInfo.num
+      if (showNum < allList.length) {
+        showListInfo.num = showNum + entityDetailRelatedEntitiesShowSize
+        if (showNum > allList.length) {
+          showListInfo.num = allList.length
+        }
+      }
+    },
+    handleShowDataNum (showListInfo, allList) {
+      if (allList.length <= entityDetailRelatedEntitiesShowSize) {
+        showListInfo.num = allList.length
+      } else {
+        showListInfo.num = entityDetailRelatedEntitiesShowSize
+      }
     }
   }
 }

src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue

@@ -1,4 +1,4 @@
-<template>
+<template xmlns="http://www.w3.org/1999/html">
   <div>
     <chart-no-data v-if="isNoData"></chart-no-data>
 
@@ -8,11 +8,16 @@
           <span class="title-mark"></span>
           {{ $t('entities.tab.relatedApp') }}&nbsp;&nbsp;({{ relatedAppList.length }})
         </div>
-        <div class="type-content" v-if="!showError0">
+        <template v-if="!showError0">
-          <div v-for="(entity, index) in relatedAppList" class="data-item" :key="index">
+          <div class="type-content" >
+            <div v-for="(entity, index) in relatedAppList.slice(0,showRelatedAppListInfo.num)" class="data-item" :key="index">
               {{ entity.appName ? entity.appName : entity }}
             </div>
           </div>
+          <div class="more" >
+            <span style="color:#909399;cursor: pointer;" :style="{'opacity': relatedAppList.length > showRelatedAppListInfo.num ? 1 : 0.6}"  @click="showMore(showRelatedAppListInfo,relatedAppList)">{{ $t('overall.more') }} > &nbsp;&nbsp; </span> <span style="color:red;"> {{ $t('overall.moreTip') }} </span>
+          </div>
+        </template>
         <div class="type-error-content" v-else>
           <chart-error class="type-error-content__block" :content="errorMsg0"></chart-error>
         </div>
@@ -23,11 +28,16 @@
           <span class="title-mark"></span>
           {{ $t('entities.tab.relatedIp') }}&nbsp;&nbsp;({{ relatedIpList.length }})
         </div>
-        <div class="type-content" v-if="!showError1">
+        <template v-if="!showError1">
-          <div v-for="(entity, index) in relatedIpList" :key="index" class="data-item">
+          <div class="type-content" >
+            <div v-for="(entity, index) in relatedIpList.slice(0,showRelatedIpListInfo.num)" :key="index" class="data-item">
               {{ entity.ip ? entity.ip : entity }}
             </div>
           </div>
+          <div class="more" >
+            <span style="color:#909399;cursor: pointer;" :style="{'opacity': relatedIpList.length > showRelatedIpListInfo.num ? 1 : 0.6}"  @click="showMore(showRelatedIpListInfo,relatedIpList)">{{ $t('overall.more') }} > &nbsp;&nbsp; </span> <span style="color:red;"> {{ $t('overall.moreTip') }} </span>
+          </div>
+        </template>
         <div class="type-error-content" v-else>
           <chart-error class="type-error-content__block" :content="errorMsg1"></chart-error>
         </div>
@@ -38,11 +48,16 @@
           <span class="title-mark"></span>
           {{ $t('entities.tab.relatedDomain') }}&nbsp;&nbsp;({{ relatedDomainList.length }})
         </div>
-        <div class="type-content" v-if="!showError2">
+        <template v-if="!showError2">
-          <div v-for="(entity, index) in relatedDomainList" class="data-item" :key="index">
+          <div class="type-content">
+            <div v-for="(entity, index) in relatedDomainList.slice(0,showRelatedDomainListInfo.num)" class="data-item" :key="index">
               {{ entity.domain ? entity.domain : entity }}
             </div>
           </div>
+          <div class="more" >
+            <span style="color:#909399;cursor: pointer;" :style="{'opacity': relatedDomainList.length > showRelatedDomainListInfo.num ? 1 : 0.6}"  @click="showMore(showRelatedDomainListInfo,relatedDomainList)">{{ $t('overall.more') }} > &nbsp;&nbsp; </span> <span style="color:red;"> {{ $t('overall.moreTip') }} </span>
+          </div>
+        </template>
         <div class="type-error-content" v-else>
           <chart-error class="type-error-content__block" :content="errorMsg2"></chart-error>
         </div>
@@ -70,9 +85,18 @@ export default {
   },
   data () {
     return {
-      relatedAppList: [],
+      relatedAppList: [], // 所有数据
-      relatedIpList: [],
+      showRelatedAppListInfo: {
-      relatedDomainList: [],
+        num: 0
+      }, // 界面展示的数量
+      relatedIpList: [], // 所有数据
+      showRelatedIpListInfo: {
+        num: 0
+      }, // 界面展示的数量
+      relatedDomainList: [], // 所有数据
+      showRelatedDomainListInfo: {
+        num: 0
+      }, // 界面展示的数量
       initFlag: false, // 初始化标识，请求接口之后再显示，避免标题初始化会闪一下
       showError0: false,
       errorMsg0: '',
@@ -127,6 +151,7 @@ export default {
         if (this.entity.entityType === 'app' && !this.isNoData) {
           if (res0.code === 200) {
             this.relatedIpList = res0.data.result
+            this.handleShowDataNum(this.showRelatedIpListInfo, this.relatedIpList)
           } else {
             this.showError1 = true
             this.errorMsg1 = this.errorMsgHandler(res0)
@@ -134,6 +159,7 @@ export default {
 
           if (res1.code === 200) {
             this.relatedDomainList = res1.data.result
+            this.handleShowDataNum(this.showRelatedDomainListInfo, this.relatedDomainList)
           } else {
             this.showError2 = true
             this.errorMsg2 = this.errorMsgHandler(res1)
@@ -145,12 +171,14 @@ export default {
         if (this.entity.entityType === 'ip' && !this.isNoData) {
           if (res0.code === 200) {
             this.relatedAppList = res0.data.result
+            this.handleShowDataNum(this.showRelatedAppListInfo, this.relatedAppList)
           } else {
             this.showError0 = true
             this.errorMsg0 = this.errorMsgHandler(res0)
           }
           if (res1.code === 200) {
             this.relatedDomainList = res1.data.result
+            this.handleShowDataNum(this.showRelatedDomainListInfo, this.relatedDomainList)
           } else {
             this.showError2 = true
             this.errorMsg2 = this.errorMsgHandler(res1)
@@ -167,6 +195,7 @@ export default {
 
           if (res0.code === 200) {
             this.relatedAppList = res0.data.result
+            this.handleShowDataNum(this.showRelatedAppListInfo, this.relatedAppList)
           } else {
             this.showError0 = true
             this.errorMsg0 = this.errorMsgHandler(res0)
@@ -174,6 +203,7 @@ export default {
 
           if (res1.code === 200) {
             this.relatedIpList = res1.data.result
+            this.handleShowDataNum(this.showRelatedIpListInfo, this.relatedIpList)
           } else {
             this.showError1 = true
             this.errorMsg1 = this.errorMsgHandler(res1)
@@ -181,6 +211,7 @@ export default {
 
           if (res2.code === 200) {
             this.relatedDomainList = res2.data.result
+            this.handleShowDataNum(this.showRelatedDomainListInfo, this.relatedDomainList)
           } else {
             this.showError2 = true
             this.errorMsg2 = this.errorMsgHandler(res2)