From f7b338c68d3bfb6e70a4723acfeecfcf8266d7b3 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Thu, 17 Feb 2022 10:48:39 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20Entity=20Explorer-?= =?UTF-8?q?-=E4=B8=8B=E6=8B=89=E8=AF=A6=E6=83=85-=E5=85=B3=E7=B3=BB=20?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entityList/detail-overview.scss | 43 ++++++--- src/mixins/relatedServer.js | 70 ++++++++------ .../entityList/detailOverview/App.vue | 90 ++++-------------- .../entityList/detailOverview/Domain.vue | 79 ++++------------ .../entityList/detailOverview/Ip.vue | 93 ++++--------------- 5 files changed, 122 insertions(+), 253 deletions(-) diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss index 252b67dc..235ea328 100644 --- 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; diff --git a/src/mixins/relatedServer.js b/src/mixins/relatedServer.js index fb07d95c..2cb86f16 100644 --- 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 } } } diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index d1c7435e..18149020 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -51,21 +51,21 @@
{{$t('overall.relationship')}}
-
+
{{entityData.domainCount}} {{$t('entities.relatedDomains')}}
-
+
{{item.domain}}
-
+
...
-
-
+
+
{{item.domain}}
@@ -77,14 +77,14 @@ {{entityData.ipCount}} {{$t('entities.relatedServerIp')}}
-
+
{{item.ip}}
-
+
...
-
-
+
+
{{item.ip}}
@@ -92,18 +92,6 @@
- - - - - - - - - - - -
{{$t('overall.networkQuality')}}
@@ -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) }) }, diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue index 264544bb..19bd7470 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue @@ -59,21 +59,21 @@
{{$t('overall.relationship')}}
-
+
{{entityData.appCount}} {{$t('entities.relatedApp')}}
-
+
{{item.appName}}
-
+
...
-
-
+
+
{{item.appName}}
@@ -85,14 +85,14 @@ {{entityData.ipCount}} {{$t('entities.relatedServerIp')}}
-
+
{{item.ip}}
-
+
...
-
-
+
+
{{item.ip}}
@@ -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) }) }, diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index 5907e60a..8b3bd8f5 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -43,21 +43,21 @@
{{$t('overall.relationship')}}
-
+
{{entityData.domainCount}} {{$t('entities.relatedDomains')}}
-
+
{{item.domain}}
-
+
...
-
-
+
+
{{item.domain}}
@@ -69,14 +69,14 @@ {{entityData.appCount}} {{$t('entities.relatedServerIp')}}
-
+
{{item.appName}}
-
+
...
-
-
+
+
{{item.appName}}
@@ -84,18 +84,6 @@
- - - - - - - - - - - -
{{$t('overall.networkQuality')}}
@@ -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) }) },