From ba8dfaf0d4c46f5c943aaab24d6830511f5abd8d Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Thu, 13 Jul 2023 17:11:00 +0800
Subject: [PATCH] =?UTF-8?q?CN-1149=20=E8=AF=A6=E6=83=85=E9=A1=B5"=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E5=AE=9E=E4=BD=93"=E5=B1=95=E7=A4=BA=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/domainNameResolution.scss   |  5 +-
 src/views/charts2/chart-mixin.js              | 18 ++++++
 .../tabs/DomainNameResolution.vue             | 63 ++++++++++++++-----
 3 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/src/assets/css/components/views/charts2/domainNameResolution.scss b/src/assets/css/components/views/charts2/domainNameResolution.scss
index 1e27781d..a26fb58e 100644
--- a/src/assets/css/components/views/charts2/domainNameResolution.scss
+++ b/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%;
diff --git a/src/views/charts2/chart-mixin.js b/src/views/charts2/chart-mixin.js
index be345f81..dde4fd15 100644
--- a/src/views/charts2/chart-mixin.js
+++ b/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
+      }
     }
   }
 }
diff --git a/src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue b/src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue
index e76d0308..d36a1bb8 100644
--- a/src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue
+++ b/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">
-          <div v-for="(entity, index) in relatedAppList" class="data-item" :key="index">
-            {{ entity.appName ? entity.appName : entity }}
+        <template v-if="!showError0">
+          <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>
+          <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">
-          <div v-for="(entity, index) in relatedIpList" :key="index" class="data-item">
-            {{ entity.ip ? entity.ip : entity }}
+        <template v-if="!showError1">
+          <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>
+          <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">
-          <div v-for="(entity, index) in relatedDomainList" class="data-item" :key="index">
-            {{ entity.domain ? entity.domain : entity }}
+        <template v-if="!showError2">
+          <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>
+          <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: [],
-      relatedIpList: [],
-      relatedDomainList: [],
+      relatedAppList: [], // 所有数据
+      showRelatedAppListInfo: {
+        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)