perf: 优化 Entity Explorer--下拉详情-关系功能样式

2022-02-17 10:48:39 +08:00
parent 5c3655f69d
commit f7b338c68d
5 changed files with 122 additions and 253 deletions
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -123,10 +123,39 @@
    }

    .overview__content.domain__content {
+      .overview__tags.domain__tags.overview__ip-tags,.overview__tags.domain__tags.overview__app-tags {
+        max-width: 1200px;
+        .overview__domain-more-tabs.show-more-app {
+          z-index: 1;
+          position: absolute;
+          right: -92px;
+          top: -180px;
+        }
+        .overview__domain-more-tabs.show-more-ip {
+          z-index: 1;
+          position: absolute;
+          top: -180px;
+          right: -92px;
+        }
+      }
+      .overview__tags.domain__tags.overview__domain-tags {
+        max-width: 1500px;
+        .overview__domain-more-tabs.show-more-app {
+          z-index: 1;
+          position: absolute;
+          top: -180px;
+          right: -92px;
+        }
+        .overview__domain-more-tabs.show-more-ip {
+          z-index: 1;
+          position: absolute;
+          top: -180px;
+          right: -92px;
+        }
+      }
      .overview__tags.domain__tags {
        flex-direction: column;
        align-items: baseline;
-        max-width: 1500px;
        .overview__domain-tabs {
          display: flex;
          margin: 0 0 8px 0;
@@ -159,7 +188,6 @@
            font-size: 14px;
            font-weight: 400;
            border-radius: 15px;
-            position: relative;
          }
          .overview__domain-btn {
            background-color: #EFF6FE;
@@ -172,16 +200,7 @@
            padding: 6px 15px;
            line-height: .3;
            cursor: pointer;
-          }
-          .overview__domain-more-tabs.show-more-app {
-            position: absolute;
-            top: 176px;
-            z-index: 1;
-          }
-          .overview__domain-more-tabs.show-more-ip {
-            position: absolute;
-            top: 215px;
-            z-index: 1;
+            position: relative;
          }
          .overview__domain-more-tabs {
            min-width: 110px;
--- a/src/mixins/relatedServer.js
+++ b/src/mixins/relatedServer.js
@@ -2,61 +2,77 @@ import { get } from '@/utils/http'
 export default {
  data () {
    return {
-      relationDomainData: [],
-      relationAppData: [],
-      showMoreApp: false,
-      showMoreDomain: false,
-      moreDataDomain: [],
-      moreDataApp: [],
-      showDomainMore: false,
-      showAppMore: false
+
+      relationshipDataOne: [], // 数据
+      relationshipDataTow: [], // 数据
+      relationshipShowOne: false, // 控制 ... 的展示隐藏
+      relationshipShowTow: false, // 控制 ... 的展示隐藏
+      relationshipShowMoreOne: false, // 控制弹框的展示隐藏
+      relationshipShowMoreTow: false, // 控制弹框的展示隐藏
+      relationshipMoreDataOne: [], // 展示所有
+      relationshipMoreDataTow: [] // 展示所有
    }
  },
  methods: {
-    getRelatedServerData () {
-      get(this.relatedServerDomainUrl, this.getQueryParams()).then(response => {
+    // 请求数据 relationshipUrlOne => 路由 refOne => ref
+    getRelatedServerDataOne (relationshipUrlOne, refOne) {
+      get(relationshipUrlOne, 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')
+          this.relationshipDataOne = response.data.result
+          // 将请求数据 传入方法中
+          this.relatedServerWidth(this.relationshipDataOne, refOne)
        }
      })
    },
+    getRelatedServerDataTow (relationshipUrlTow, refTow) {
+      get(relationshipUrlTow, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.relationshipDataTow = response.data.result
+          // 将请求数据 传入方法中
+          this.relatedServerWidth(this.relationshipDataTow, refTow)
+        }
+      })
+    },
+    // data => 数据， value => ref
    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
+          // 每条数据的宽度
+          const width = this.$refs[value + index].offsetWidth + 30
          if (width) {
            sum += width
            if (flag && relatedServerWidth < sum) {
              flag = false
-              this.showDomainMore = true
+              this.relationshipShowOne = true
+              this.relationshipShowTow = true
            }
          }
          item.show = flag
        }
        return item
      })
-      console.log(data)
    },
+    // 点击事件 控制弹框的展示隐藏，展示全部的数据
    more (data, showMore, index) {
      if (index === 1) {
-        this.moreDataDomain = data
-        this.showMoreDomain = !showMore
-        this.showMoreApp = false
+        // 展示数据
+        this.relationshipMoreDataOne = data
+        // 弹框的显示隐藏
+        this.relationshipShowMoreOne = !showMore
+        // 展示当前弹框是，隐藏其他弹框
+        this.relationshipShowMoreTow = false
      }
      if (index === 2) {
-        this.moreDataApp = data
-        this.showMoreApp = !showMore
-        this.showMoreDomain = false
+        // 展示数据
+        this.relationshipMoreDataTow = data
+        // 弹框的显示隐藏
+        this.relationshipShowMoreTow = !showMore
+        // 展示当前弹框是，隐藏其他弹框
+        this.relationshipShowMoreOne = false
      }
    }
  }
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -51,21 +51,21 @@
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
    <div class="overview__content domain__content">
-      <div class="overview__tags domain__tags" ref="relationship">
+      <div class="overview__tags domain__tags overview__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">
+            <div class="overview__tag domain__tag-list" :ref="'relatedApp' + index" v-show="item.show" v-for="(item, index) in relationshipDataOne" :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-btn" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne">
            <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">
+            <div class="overview__domain-more-tabs show-more-app" v-if="relationshipShowMoreOne">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
                <span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
              </div>
            </div>
@@ -77,14 +77,14 @@
              <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">
+            <div class="overview__tag domain__tag-list" :ref="'relatedServerApp' + index" v-show="item.show" v-for="(item, index) in relationshipDataTow" :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-btn" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow">
            <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">
+            <div class="overview__domain-more-tabs show-more-ip" v-if="relationshipShowMoreTow">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
                <span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
              </div>
            </div>
@@ -92,18 +92,6 @@
        </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>
@@ -195,10 +183,11 @@ import Chart from '@/views/charts/Chart'
 import _ from 'lodash'
 import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
 import { get } from '@/utils/http'
+import relatedServer from '@/mixins/relatedServer'

 export default {
  name: 'App',
-  mixins: [entityDetailMixin],
+  mixins: [entityDetailMixin, relatedServer],
  components: {
    Chart,
    ChartSingleValue
@@ -263,15 +252,7 @@ export default {
          }
        ],
        chartDatas: [null, null, null, null, null]
-      },
-      relationDomainData: [],
-      relationIpData: [],
-      showMoreIp: false,
-      showMoreDomain: false,
-      moreDataDomain: [],
-      moreDataIp: [],
-      showDomainMore: false,
-      showIpMore: false
+      }
    }
  },
  methods: {
@@ -293,48 +274,6 @@ 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: {
@@ -347,6 +286,10 @@ export default {
        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
+        this.$nextTick(() => {
+          this.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedApp')
+          this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedServerApp')
+        })
      }
    }
  },
@@ -354,7 +297,6 @@ export default {
    this.$nextTick(() => {
      setTimeout(() => {
        this.chartGetMap()
-        this.getRelatedServerData()
      }, 250)
    })
  },
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -59,21 +59,21 @@
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
    <div class="overview__content domain__content">
-      <div class="overview__tags domain__tags" ref="relationship">
+      <div class="overview__tags domain__tags overview__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">
+            <div class="overview__tag domain__tag-list" :ref="'relatedDomain' + index" v-show="item.show" v-for="(item, index) in relationshipDataOne" :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-btn" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne">
            <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">
+            <div class="overview__domain-more-tabs show-more-app" v-if="relationshipShowMoreOne">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
                <span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
              </div>
            </div>
@@ -85,14 +85,14 @@
              <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">
+            <div class="overview__tag domain__tag-list" :ref="'relatedServerDomain' + index" v-show="item.show" v-for="(item, index) in relationshipDataTow" :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-btn" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow">
            <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">
+            <div class="overview__domain-more-tabs show-more-ip" v-if="relationshipShowMoreTow">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
                <span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
              </div>
            </div>
@@ -191,13 +191,14 @@ import unitConvert from '@/utils/unit-convert'
 import Chart from '@/views/charts/Chart'
 import _, { lowerFirst } from 'lodash'
 import { get } from '@/utils/http'
+import relatedServer from '@/mixins/relatedServer'
 export default {
  name: 'Domain',
  components: {
    ChartSingleValue,
    Chart
  },
-  mixins: [entityDetailMixin],
+  mixins: [entityDetailMixin, relatedServer],
  data () {
    return {
      // entityData: {},
@@ -258,15 +259,7 @@ export default {
          }
        ],
        chartDatas: [null, null, null, null, null]
-      },
-      relationAppData: [],
-      relationIpData: [],
-      showMoreIp: false,
-      showMoreApp: false,
-      moreDataApp: [],
-      moreDataIp: [],
-      showAppMore: false,
-      showIpMore: false
+      }
    }
  },
  methods: {
@@ -288,49 +281,6 @@ export default {
          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: {
@@ -343,6 +293,10 @@ export default {
        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
+        this.$nextTick(() => {
+          this.getRelatedServerDataOne(this.relatedServerAppUrl, 'relatedDomain')
+          this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedServerDomain')
+        })
      }
    }
  },
@@ -350,7 +304,6 @@ export default {
    this.$nextTick(() => {
      setTimeout(() => {
        this.chartGetMap()
-        this.getRelatedServerData()
      }, 250)
    })
  },
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -43,21 +43,21 @@
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
    <div class="overview__content domain__content">
-      <div class="overview__tags domain__tags" ref="relationship">
+      <div class="overview__tags domain__tags overview__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">
+            <div class="overview__tag domain__tag-list" :ref="'relatedIp' + index" v-show="item.show" v-for="(item, index) in relationshipDataOne" :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-btn" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne">
            <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">
+            <div class="overview__domain-more-tabs show-more-app" v-if="relationshipShowMoreOne">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
                <span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
              </div>
            </div>
@@ -69,14 +69,14 @@
              <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">
+            <div class="overview__tag domain__tag-list" :ref="'relatedServerIp' + index" v-show="item.show" v-for="(item, index) in relationshipDataTow" :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-btn" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow">
            <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">
+            <div class="overview__domain-more-tabs show-more-ip" v-if="relationshipShowMoreTow">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
                <span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
              </div>
            </div>
@@ -84,18 +84,6 @@
        </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>
@@ -187,10 +175,11 @@ import unitConvert from '@/utils/unit-convert'
 import Chart from '@/views/charts/Chart'
 import _ from 'lodash'
 import { get } from '@/utils/http'
+import relatedServer from '@/mixins/relatedServer'

 export default {
  name: 'Ip',
-  mixins: [entityDetailMixin],
+  mixins: [entityDetailMixin, relatedServer],
  components: {
    Chart,
    ChartSingleValue
@@ -255,15 +244,7 @@ export default {
          }
        ],
        chartDatas: [null, null, null, null, null]
-      },
-      relationDomainData: [],
-      relationAppData: [],
-      showMoreApp: false,
-      showMoreDomain: false,
-      moreDataDomain: [],
-      moreDataApp: [],
-      showDomainMore: false,
-      showAppMore: false
+      }
    }
  },
  methods: {
@@ -286,51 +267,6 @@ 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: {
@@ -343,6 +279,10 @@ export default {
        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
+        this.$nextTick(() => {
+          this.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedIp')
+          this.getRelatedServerDataTow(this.relatedServerAppUrl, 'relatedServerIp')
+        })
      }
    }
  },
@@ -350,7 +290,6 @@ export default {
    this.$nextTick(() => {
      setTimeout(() => {
        this.chartGetMap()
-        this.getRelatedServerData()
      }, 250)
    })
  },