From 9689390af1abe559c2a515afb6c0a40063ebcb8f Mon Sep 17 00:00:00 2001 From: zhangyu Date: Wed, 16 Feb 2022 16:52:34 +0800 Subject: [PATCH 1/5] =?UTF-8?q?fix=EF=BC=9A=E5=8E=BB=E9=99=A4=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=81=87=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/charts/PanelChart.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue index 98996945..42b5a260 100644 --- a/src/views/charts/PanelChart.vue +++ b/src/views/charts/PanelChart.vue @@ -190,12 +190,12 @@ export default { } const requestUrl = url || (chartParams && chartParams.url) if (requestUrl) { - get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => { - if (this.chartInfo.type === 23 && testData) { - response = testData.data - } else if (this.chartInfo.type === 24 && testData) { - response = testData.data2 - } + get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {1 + // if (this.chartInfo.type === 23 && testData) { + // response = testData.data + // } else if (this.chartInfo.type === 24 && testData) { + // response = testData.data2 + // } if (response.code === 200) { if (Array.isArray(response.data.result)) { response.data.result.forEach(item => { From 5c3655f69d7ca77984743c405e3e196ced7efa24 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Wed, 16 Feb 2022 18:19:58 +0800 Subject: [PATCH 2/5] =?UTF-8?q?CN-304=20feat:=20Entity=20Explorer--?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E8=AF=A6=E6=83=85-=E5=85=B3=E7=B3=BB?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entityList/detail-overview.scss | 89 +++++++++++++ src/mixins/relatedServer.js | 63 +++++++++ src/utils/api.js | 8 +- .../entityList/detailOverview/App.vue | 119 +++++++++++++++-- .../entityList/detailOverview/Domain.vue | 112 ++++++++++++++-- .../entityList/detailOverview/Ip.vue | 122 ++++++++++++++++-- 6 files changed, 480 insertions(+), 33 deletions(-) create mode 100644 src/mixins/relatedServer.js 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 2d918e63..252b67dc 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss @@ -122,6 +122,95 @@ } } + .overview__content.domain__content { + .overview__tags.domain__tags { + flex-direction: column; + align-items: baseline; + max-width: 1500px; + .overview__domain-tabs { + display: flex; + margin: 0 0 8px 0; + .overview__domain-tab { + display: flex; + } + .overview__tag.domain__tag { + display: unset; + min-width: 154px; + padding: 6px 15px; + margin: 0 12px 0 0; + text-align: center; + height: 32px; + line-height: 1.5; + background-color: #EFF6FE; + font-size: 14px; + border-radius: 4px; + } + .overview__tag.domain__tag-list { + display: unset; + padding: 6px 15px; + margin: 4px 12px 0 0; + text-align: center; + height: 24px; + min-width: 125px; + line-height: 0.9; + background-color: #EFF6FE; + font-family: Roboto-Regular; + color: #3976CB; + font-size: 14px; + font-weight: 400; + border-radius: 15px; + position: relative; + } + .overview__domain-btn { + background-color: #EFF6FE; + width: 44px; + height: 24px; + border-radius: 15px; + color: #3976CB; + text-align: center; + margin: 4px 12px 0 0; + 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; + } + .overview__domain-more-tabs { + min-width: 110px; + max-height: 180px; + overflow: auto; + background: #FFFFFF; + box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05); + border-radius: 2px; + padding: 5px; + .domain-more-tab { + height: 24px; + padding: 6px 12px; + text-align: center; + font-family: Roboto-Regular; + font-size: 12px; + color: #666666; + letter-spacing: 0; + line-height: 12px; + font-weight: 400; + width: 84px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + } + } + } + .overview__tags { display: flex; diff --git a/src/mixins/relatedServer.js b/src/mixins/relatedServer.js new file mode 100644 index 00000000..fb07d95c --- /dev/null +++ b/src/mixins/relatedServer.js @@ -0,0 +1,63 @@ +import { get } from '@/utils/http' +export default { + data () { + return { + relationDomainData: [], + relationAppData: [], + showMoreApp: false, + showMoreDomain: false, + moreDataDomain: [], + moreDataApp: [], + showDomainMore: false, + showAppMore: false + } + }, + methods: { + 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 + }) + console.log(data) + }, + 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 + } + } + } +} diff --git a/src/utils/api.js b/src/utils/api.js index 1650dc65..75160ba7 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -47,6 +47,8 @@ export const api = { entityAppDetailLinkOut: '/interface/entity/detail/overview/app/linkOut', entityAppDetailAlert: '/interface/entity/detail/overview/app/alert', entityAppDetailSecurity: '/interface/entity/detail/overview/app/security', + entityAppRelatedServerDomain: '/interface/entity/detail/overview/app/relatedDomain', + entityAppRelatedServerIp: '/interface/entity/detail/overview/app/relatedServerIp', // domain detail entityDomainDetailBasic: '/interface/entity/detail/overview/domain/basic', entityDomainDetailTraffic: '/interface/entity/detail/overview/domain/traffic', @@ -56,6 +58,8 @@ export const api = { entityDomainDetailLinkOut: '/interface/entity/detail/overview/domain/linkOut', entityDomainDetailAlert: '/interface/entity/detail/overview/domain/alert', entityDomainDetailSecurity: '/interface/entity/detail/overview/domain/security', + entityDomainRelatedServerIp: '/interface/entity/detail/overview/domain/relatedServerIp', + entityDomainRelatedServerApp: '/interface/entity/detail/overview/domain/relatedApp', // ip detail entityIpDetailTraffic: '/interface/entity/detail/overview/ip/traffic', entityIpDetailTrafficMap: '/interface/entity/detail/ip/trafficMap', @@ -66,7 +70,9 @@ export const api = { entityIpDetailLinkIn: '/interface/entity/detail/overview/ip/linkIn', entityIpDetailLinkOut: '/interface/entity/detail/overview/ip/linkOut', entityIpDetailAlert: '/interface/entity/detail/overview/ip/alert', - entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security' + entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security', + entityIpRelatedServerDomain: '/interface/entity/detail/overview/ip/relatedDomain', + entityIpRelatedServerApp: '/interface/entity/detail/overview/ip/relatedApp' } /* panel */ diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index bd743668..d1c7435e 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -50,18 +50,60 @@
{{$t('overall.relationship')}}
-
-
-
- {{entityData.domainCount}} - {{$t('entities.relatedDomains')}} +
+
+
+
+
+ {{entityData.domainCount}} + {{$t('entities.relatedDomains')}} +
+
+ {{item.domain}} +
+
+
+
...
+
+
+ {{item.domain}} +
+
+
-
- {{entityData.ipCount}} - {{$t('entities.relatedServerIp')}} +
+
+
+ {{entityData.ipCount}} + {{$t('entities.relatedServerIp')}} +
+
+ {{item.ip}} +
+
+
+
...
+
+
+ {{item.ip}} +
+
+
+ + + + + + + + + + + +
{{$t('overall.networkQuality')}}
@@ -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 { diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue index ca055306..264544bb 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue @@ -58,15 +58,45 @@
{{$t('overall.relationship')}}
-
-
-
- {{entityData.appCount}} - {{$t('entities.relatedApp')}} +
+
+
+
+
+ {{entityData.appCount}} + {{$t('entities.relatedApp')}} +
+
+ {{item.appName}} +
+
+
+
...
+
+
+ {{item.appName}} +
+
+
-
- {{entityData.ipCount}} - {{$t('entities.relatedServerIp')}} +
+
+
+ {{entityData.ipCount}} + {{$t('entities.relatedServerIp')}} +
+
+ {{item.ip}} +
+
+
+
...
+
+
+ {{item.ip}} +
+
+
@@ -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 = { diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index 425c3b54..5907e60a 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -42,18 +42,60 @@
{{$t('overall.relationship')}}
-
-
-
- {{entityData.domainCount}} - {{$t('entities.relatedDomains')}} +
+
+
+
+
+ {{entityData.domainCount}} + {{$t('entities.relatedDomains')}} +
+
+ {{item.domain}} +
+
+
+
...
+
+
+ {{item.domain}} +
+
+
-
- {{entityData.appCount}} - {{$t('entities.relatedServerIp')}} +
+
+
+ {{entityData.appCount}} + {{$t('entities.relatedServerIp')}} +
+
+ {{item.appName}} +
+
+
+
...
+
+
+ {{item.appName}} +
+
+
+ + + + + + + + + + + +
{{$t('overall.networkQuality')}}
@@ -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 = { From f7b338c68d3bfb6e70a4723acfeecfcf8266d7b3 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Thu, 17 Feb 2022 10:48:39 +0800 Subject: [PATCH 3/5] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20Entity=20Explo?= =?UTF-8?q?rer--=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) }) }, From 43a30c1f06ea76db49412f5fc9634b9aa61354aa Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Thu, 17 Feb 2022 14:49:19 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20=E4=B8=8B?= =?UTF-8?q?=E6=8B=89=E2=80=94=E5=85=B3=E7=B3=BB=20=E9=80=BB=E8=BE=91?= =?UTF-8?q?=E5=88=A4=E6=96=AD=E9=94=99=E8=AF=AF=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mixins/relatedServer.js | 13 +++++++------ .../entityList/detailOverview/App.vue | 7 ++----- .../entityList/detailOverview/Domain.vue | 6 ++---- .../entityExplorer/entityList/detailOverview/Ip.vue | 6 ++---- 4 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/mixins/relatedServer.js b/src/mixins/relatedServer.js index 2cb86f16..23de5f04 100644 --- a/src/mixins/relatedServer.js +++ b/src/mixins/relatedServer.js @@ -2,7 +2,6 @@ import { get } from '@/utils/http' export default { data () { return { - relationshipDataOne: [], // 数据 relationshipDataTow: [], // 数据 relationshipShowOne: false, // 控制 ... 的展示隐藏 @@ -20,7 +19,7 @@ export default { if (response.code === 200) { this.relationshipDataOne = response.data.result // 将请求数据 传入方法中 - this.relatedServerWidth(this.relationshipDataOne, refOne) + this.relatedServerWidth(this.relationshipDataOne, refOne, 1) } }) }, @@ -29,12 +28,12 @@ export default { if (response.code === 200) { this.relationshipDataTow = response.data.result // 将请求数据 传入方法中 - this.relatedServerWidth(this.relationshipDataTow, refTow) + this.relatedServerWidth(this.relationshipDataTow, refTow, 2) } }) }, // data => 数据， value => ref - relatedServerWidth (data, value) { + relatedServerWidth (data, value, num) { // 最大宽度 const relatedServerWidth = this.$refs.relationship.offsetWidth let sum = 0 @@ -42,12 +41,14 @@ export default { data.map((item, index) => { if (this.$refs[value + index]) { // 每条数据的宽度 - const width = this.$refs[value + index].offsetWidth + 30 + const width = this.$refs[value + index].offsetWidth + 32 if (width) { sum += width - if (flag && relatedServerWidth < sum) { + if (flag && sum >= relatedServerWidth && num === 1) { flag = false this.relationshipShowOne = true + } else if (flag && sum >= relatedServerWidth && num === 2) { + flag = false this.relationshipShowTow = true } } diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index 18149020..85ae0c93 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -285,11 +285,8 @@ export default { this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency')) 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') - }) + this.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedApp') + this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedServerApp') } } }, diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue index 19bd7470..6ce0ba29 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue @@ -293,10 +293,8 @@ 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') - }) + this.getRelatedServerDataOne(this.relatedServerAppUrl, 'relatedDomain') + this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedServerDomain') } } }, diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index 8b3bd8f5..e85c1745 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -279,10 +279,8 @@ 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') - }) + this.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedIp') + this.getRelatedServerDataTow(this.relatedServerAppUrl, 'relatedServerIp') } } }, From 8c0f467ed22f8ebecf010855a5dea75e2d227e27 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Thu, 17 Feb 2022 15:05:33 +0800 Subject: [PATCH 5/5] =?UTF-8?q?style:=20=E4=B8=8B=E6=8B=89-=E5=85=B3?= =?UTF-8?q?=E7=B3=BB=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/entityExplorer/entityList/detail-overview.scss | 2 +- src/mixins/relatedServer.js | 2 +- src/views/entityExplorer/entityList/detailOverview/App.vue | 2 +- src/views/entityExplorer/entityList/detailOverview/Ip.vue | 4 ++-- 4 files changed, 5 insertions(+), 5 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 235ea328..d0e97292 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss @@ -180,7 +180,7 @@ margin: 4px 12px 0 0; text-align: center; height: 24px; - min-width: 125px; + max-width: 300px; line-height: 0.9; background-color: #EFF6FE; font-family: Roboto-Regular; diff --git a/src/mixins/relatedServer.js b/src/mixins/relatedServer.js index 23de5f04..1609f776 100644 --- a/src/mixins/relatedServer.js +++ b/src/mixins/relatedServer.js @@ -41,7 +41,7 @@ export default { data.map((item, index) => { if (this.$refs[value + index]) { // 每条数据的宽度 - const width = this.$refs[value + index].offsetWidth + 32 + const width = this.$refs[value + index].offsetWidth + 35 if (width) { sum += width if (flag && sum >= relatedServerWidth && num === 1) { diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index 85ae0c93..940e2f16 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -51,7 +51,7 @@
{{$t('overall.relationship')}}
-
+
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index e85c1745..554a8ab9 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -43,7 +43,7 @@
{{$t('overall.relationship')}}
-
+
@@ -67,7 +67,7 @@
{{entityData.appCount}} - {{$t('entities.relatedServerIp')}} + {{$t('entities.relatedApp')}}
{{item.appName}}