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

2023-07-13 17:11:00 +08:00
parent e489e568e9
commit ba8dfaf0d4
3 changed files with 69 additions and 17 deletions
--- 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%;
--- 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
+      }
    }
  }
 }
--- 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)