CN-304 feat: Entity Explorer--下拉详情-关系调整

2022-02-16 18:19:58 +08:00
parent 9689390af1
commit 5c3655f69d
6 changed files with 480 additions and 33 deletions
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -50,18 +50,60 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
-    <div class="overview__content">
-      <div class="overview__tags">
-        <div class="overview__tag">
-          <span class="tag__value">{{entityData.domainCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
+    <div class="overview__content domain__content">
+      <div class="overview__tags domain__tags" ref="relationship">
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
+              <span class="tag__value">{{entityData.domainCount}}</span>
+              <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
+            </div>
+            <div class="overview__tag domain__tag-list" :ref="'relatedDomain' + index" v-show="item.show" v-for="(item, index) in relationDomainData" :key="index">
+              <span class="tag__desc">{{item.domain}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationDomainData, showMoreDomain, 1)" v-if="showDomainMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-app" v-if="showMoreDomain">
+              <div class="domain-more-tab" v-for="item in moreDataDomain" :key="item">
+                <span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
+              </div>
+            </div>
+          </div>
        </div>
-        <div class="overview__tag">
-          <span class="tag__value">{{entityData.ipCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
+              <span class="tag__value">{{entityData.ipCount}}</span>
+              <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+            </div>
+            <div class="overview__tag domain__tag-list" :ref="'relatedServerIp' + index" v-show="item.show" v-for="(item, index) in relationIpData" :key="index">
+              <span class="tag__desc">{{item.ip}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationIpData, showMoreIp, 2)" v-if="showIpMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-ip" v-if="showMoreIp">
+              <div class="domain-more-tab" v-for="item in moreDataIp" :key="item">
+                <span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
+              </div>
+            </div>
+          </div>
        </div>
      </div>
    </div>
+<!--    <div class="overview__content">-->
+<!--      <div class="overview__tags">-->
+<!--        <div class="overview__tag">-->
+<!--          <span class="tag__value">{{entityData.domainCount}}</span>-->
+<!--          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>-->
+<!--        </div>-->
+<!--        <div class="overview__tag">-->
+<!--          <span class="tag__value">{{entityData.ipCount}}</span>-->
+<!--          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
@@ -173,6 +215,8 @@ export default {
      alertUrl: api.entityAppDetailAlert,
      securityUrl: api.entityAppDetailSecurity,
      trafficUrlMap: api.entityAppDetailTrafficMap,
+      relatedServerDomainUrl: api.entityAppRelatedServerDomain,
+      relatedServerIpUrl: api.entityAppRelatedServerIp,
      chartData: null,
      listMode: 'list',
      singleValues: {
@@ -219,7 +263,15 @@ export default {
          }
        ],
        chartDatas: [null, null, null, null, null]
-      }
+      },
+      relationDomainData: [],
+      relationIpData: [],
+      showMoreIp: false,
+      showMoreDomain: false,
+      moreDataDomain: [],
+      moreDataIp: [],
+      showDomainMore: false,
+      showIpMore: false
    }
  },
  methods: {
@@ -241,6 +293,48 @@ export default {
          this.chartData = response.data.result
        }
      })
+    },
+    getRelatedServerData () {
+      get(this.relatedServerDomainUrl, this.getQueryParams()).then(response => {
+        console.log(response)
+        this.relationDomainData = response.data.result
+        this.relatedServerWidth(this.relationDomainData, 'relatedDomain')
+      })
+      get(this.relatedServerIpUrl, this.getQueryParams()).then(response => {
+        this.relationIpData = response.data.result
+        this.relatedServerWidth(this.relationIpData, 'relatedServerIp')
+      })
+    },
+    relatedServerWidth (data, value) {
+      const relatedServerWidth = this.$refs.relationship.offsetWidth
+      let sum = 0
+      let flag = true
+      data.map((item, index) => {
+        if (this.$refs[value + index]) {
+          const width = this.$refs[value + index].offsetWidth + 22
+          if (width) {
+            sum += width
+            if (flag && relatedServerWidth < sum) {
+              flag = false
+              this.showDomainMore = true
+            }
+          }
+          item.show = flag
+        }
+        return item
+      })
+    },
+    more (data, showMore, index) {
+      if (index === 1) {
+        this.moreDataDomain = data
+        this.showMoreDomain = !showMore
+        this.showMoreIp = false
+      }
+      if (index === 2) {
+        this.moreDataIp = data
+        this.showMoreIp = !showMore
+        this.showMoreDomain = false
+      }
    }
  },
  watch: {
@@ -257,7 +351,12 @@ export default {
    }
  },
  mounted () {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) })
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.chartGetMap()
+        this.getRelatedServerData()
+      }, 250)
+    })
  },
  setup (props) {
    return {
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -58,15 +58,45 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
-    <div class="overview__content">
-      <div class="overview__tags">
-        <div class="overview__tag">
-          <span class="tag__value">{{entityData.appCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedApp')}}</span>
+    <div class="overview__content domain__content">
+      <div class="overview__tags domain__tags" ref="relationship">
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
+              <span class="tag__value">{{entityData.appCount}}</span>
+              <span class="tag__desc">{{$t('entities.relatedApp')}}</span>
+            </div>
+            <div class="overview__tag domain__tag-list" :ref="'relatedApp' + index" v-show="item.show" v-for="(item, index) in relationAppData" :key="index">
+              <span class="tag__desc">{{item.appName}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationAppData, showMoreApp, 1)" v-if="showAppMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-app" v-if="showMoreApp">
+              <div class="domain-more-tab" v-for="item in moreDataApp" :key="item">
+                <span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
+              </div>
+            </div>
+          </div>
        </div>
-        <div class="overview__tag">
-          <span class="tag__value">{{entityData.ipCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
+              <span class="tag__value">{{entityData.ipCount}}</span>
+              <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+            </div>
+            <div class="overview__tag domain__tag-list" :ref="'relatedServerIp' + index" v-show="item.show" v-for="(item, index) in relationIpData" :key="index">
+              <span class="tag__desc">{{item.ip}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationIpData, showMoreIp, 2)" v-if="showIpMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-ip" v-if="showMoreIp">
+              <div class="domain-more-tab" v-for="item in moreDataIp" :key="item">
+                <span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
+              </div>
+            </div>
+          </div>
        </div>
      </div>
    </div>
@@ -159,7 +189,7 @@ import entityDetailMixin from './entityDetailMixin'
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import Chart from '@/views/charts/Chart'
-import _ from 'lodash'
+import _, { lowerFirst } from 'lodash'
 import { get } from '@/utils/http'
 export default {
  name: 'Domain',
@@ -180,6 +210,8 @@ export default {
      alertUrl: api.entityDomainDetailAlert,
      securityUrl: api.entityDomainDetailSecurity,
      trafficUrlMap: api.entityDomainDetailTrafficMap,
+      relatedServerIpUrl: api.entityDomainRelatedServerIp,
+      relatedServerAppUrl: api.entityDomainRelatedServerApp,
      chartData: null,
      listMode: 'list',
      singleValues: {
@@ -226,7 +258,15 @@ export default {
          }
        ],
        chartDatas: [null, null, null, null, null]
-      }
+      },
+      relationAppData: [],
+      relationIpData: [],
+      showMoreIp: false,
+      showMoreApp: false,
+      moreDataApp: [],
+      moreDataIp: [],
+      showAppMore: false,
+      showIpMore: false
    }
  },
  methods: {
@@ -243,11 +283,54 @@ export default {
      this.entityData.ipCount = result.ipCount
    },
    chartGetMap () {
-      get((this.trafficUrlMap), this.getQueryParams()).then(response => {
+      get(this.trafficUrlMap, this.getQueryParams()).then(response => {
        if (response.code === 200) {
          this.chartData = response.data.result
        }
      })
+    },
+    getRelatedServerData () {
+      get(this.relatedServerAppUrl, this.getQueryParams()).then(response => {
+        console.log(response)
+        this.relationAppData = response.data.result
+        this.relatedServerWidth(this.relationAppData, 'relatedApp')
+      })
+      get(this.relatedServerIpUrl, this.getQueryParams()).then(response => {
+        this.relationIpData = response.data.result
+        this.relatedServerWidth(this.relationIpData, 'relatedServerIp')
+      })
+    },
+    relatedServerWidth (data, value) {
+      const relatedServerWidth = this.$refs.relationship.offsetWidth
+      let sum = 0
+      let flag = true
+      data.map((item, index) => {
+        if (this.$refs[value + index]) {
+          const width = this.$refs[value + index].offsetWidth + 22
+          if (width) {
+            sum += width
+            if (flag && relatedServerWidth < sum) {
+              flag = false
+              this.showAppMore = true
+            }
+          }
+          item.show = flag
+        }
+        return item
+      })
+      console.log(data)
+    },
+    more (data, showMore, index) {
+      if (index === 1) {
+        this.moreDataApp = data
+        this.showMoreApp = !showMore
+        this.showMoreIp = false
+      }
+      if (index === 2) {
+        this.moreDataIp = data
+        this.showMoreIp = !showMore
+        this.showMoreApp = false
+      }
    }
  },
  watch: {
@@ -264,7 +347,12 @@ export default {
    }
  },
  mounted () {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)})
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.chartGetMap()
+        this.getRelatedServerData()
+      }, 250)
+    })
  },
  setup (props) {
    const entityCopy = {
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -42,18 +42,60 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
-    <div class="overview__content">
-      <div class="overview__tags">
-        <div class="overview__tag">
-          <span class="tag__value">{{entityData.domainCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
+    <div class="overview__content domain__content">
+      <div class="overview__tags domain__tags" ref="relationship">
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
+              <span class="tag__value">{{entityData.domainCount}}</span>
+              <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
+            </div>
+            <div class="overview__tag domain__tag-list" :ref="'relatedDomain' + index" v-show="item.show" v-for="(item, index) in relationDomainData" :key="index">
+              <span class="tag__desc">{{item.domain}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationDomainData, showMoreDomain, 1)" v-if="showDomainMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-app" v-if="showMoreDomain">
+              <div class="domain-more-tab" v-for="item in moreDataDomain" :key="item">
+                <span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
+              </div>
+            </div>
+          </div>
        </div>
-        <div class="overview__tag">
-          <span class="tag__value">{{entityData.appCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
+              <span class="tag__value">{{entityData.appCount}}</span>
+              <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+            </div>
+            <div class="overview__tag domain__tag-list" :ref="'relatedServerApp' + index" v-show="item.show" v-for="(item, index) in relationAppData" :key="index">
+              <span class="tag__desc">{{item.appName}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationAppData, showMoreApp, 2)" v-if="showAppMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-ip" v-if="showMoreApp">
+              <div class="domain-more-tab" v-for="item in moreDataApp" :key="item">
+                <span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
+              </div>
+            </div>
+          </div>
        </div>
      </div>
    </div>
+<!--    <div class="overview__content">-->
+<!--      <div class="overview__tags">-->
+<!--        <div class="overview__tag">-->
+<!--          <span class="tag__value">{{entityData.domainCount}}</span>-->
+<!--          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>-->
+<!--        </div>-->
+<!--        <div class="overview__tag">-->
+<!--          <span class="tag__value">{{entityData.appCount}}</span>-->
+<!--          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
@@ -165,6 +207,8 @@ export default {
      linkOutUrl: api.entityIpDetailLinkOut,
      alertUrl: api.entityIpDetailAlert,
      securityUrl: api.entityIpDetailSecurity,
+      relatedServerDomainUrl: api.entityIpRelatedServerDomain,
+      relatedServerAppUrl: api.entityIpRelatedServerApp,
      listMode: 'list',
      chartData: null,
      singleValues: {
@@ -211,7 +255,15 @@ export default {
          }
        ],
        chartDatas: [null, null, null, null, null]
-      }
+      },
+      relationDomainData: [],
+      relationAppData: [],
+      showMoreApp: false,
+      showMoreDomain: false,
+      moreDataDomain: [],
+      moreDataApp: [],
+      showDomainMore: false,
+      showAppMore: false
    }
  },
  methods: {
@@ -234,6 +286,51 @@ export default {
          this.chartData = response.data.result
        }
      })
+    },
+    getRelatedServerData () {
+      get(this.relatedServerDomainUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.relationDomainData = response.data.result
+          this.relatedServerWidth(this.relationDomainData, 'relatedDomain')
+        }
+      })
+      get(this.relatedServerAppUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.relationAppData = response.data.result
+          this.relatedServerWidth(this.relationAppData, 'relatedServerApp')
+        }
+      })
+    },
+    relatedServerWidth (data, value) {
+      const relatedServerWidth = this.$refs.relationship.offsetWidth
+      let sum = 0
+      let flag = true
+      data.map((item, index) => {
+        if (this.$refs[value + index]) {
+          const width = this.$refs[value + index].offsetWidth + 22
+          if (width) {
+            sum += width
+            if (flag && relatedServerWidth < sum) {
+              flag = false
+              this.showDomainMore = true
+            }
+          }
+          item.show = flag
+        }
+        return item
+      })
+    },
+    more (data, showMore, index) {
+      if (index === 1) {
+        this.moreDataDomain = data
+        this.showMoreDomain = !showMore
+        this.showMoreApp = false
+      }
+      if (index === 2) {
+        this.moreDataApp = data
+        this.showMoreApp = !showMore
+        this.showMoreDomain = false
+      }
    }
  },
  watch: {
@@ -250,7 +347,12 @@ export default {
    }
  },
  mounted () {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) })
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.chartGetMap()
+        this.getRelatedServerData()
+      }, 250)
+    })
  },
  setup (props) {
    const entityCopy = {