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..d0e97292 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,114 @@ } } + .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; + .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; + max-width: 300px; + line-height: 0.9; + background-color: #EFF6FE; + font-family: Roboto-Regular; + color: #3976CB; + font-size: 14px; + font-weight: 400; + border-radius: 15px; + } + .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; + position: relative; + } + .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..1609f776 --- /dev/null +++ b/src/mixins/relatedServer.js @@ -0,0 +1,80 @@ +import { get } from '@/utils/http' +export default { + data () { + return { + relationshipDataOne: [], // 数据 + relationshipDataTow: [], // 数据 + relationshipShowOne: false, // 控制 ... 的展示隐藏 + relationshipShowTow: false, // 控制 ... 的展示隐藏 + relationshipShowMoreOne: false, // 控制弹框的展示隐藏 + relationshipShowMoreTow: false, // 控制弹框的展示隐藏 + relationshipMoreDataOne: [], // 展示所有 + relationshipMoreDataTow: [] // 展示所有 + } + }, + methods: { + // 请求数据 relationshipUrlOne => 路由 refOne => ref + getRelatedServerDataOne (relationshipUrlOne, refOne) { + get(relationshipUrlOne, this.getQueryParams()).then(response => { + if (response.code === 200) { + this.relationshipDataOne = response.data.result + // 将请求数据 传入方法中 + this.relatedServerWidth(this.relationshipDataOne, refOne, 1) + } + }) + }, + getRelatedServerDataTow (relationshipUrlTow, refTow) { + get(relationshipUrlTow, this.getQueryParams()).then(response => { + if (response.code === 200) { + this.relationshipDataTow = response.data.result + // 将请求数据 传入方法中 + this.relatedServerWidth(this.relationshipDataTow, refTow, 2) + } + }) + }, + // data => 数据， value => ref + relatedServerWidth (data, value, num) { + // 最大宽度 + 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 + 35 + if (width) { + sum += width + if (flag && sum >= relatedServerWidth && num === 1) { + flag = false + this.relationshipShowOne = true + } else if (flag && sum >= relatedServerWidth && num === 2) { + flag = false + this.relationshipShowTow = true + } + } + item.show = flag + } + return item + }) + }, + // 点击事件 控制弹框的展示隐藏，展示全部的数据 + more (data, showMore, index) { + if (index === 1) { + // 展示数据 + this.relationshipMoreDataOne = data + // 弹框的显示隐藏 + this.relationshipShowMoreOne = !showMore + // 展示当前弹框是，隐藏其他弹框 + this.relationshipShowMoreTow = false + } + if (index === 2) { + // 展示数据 + this.relationshipMoreDataTow = data + // 弹框的显示隐藏 + this.relationshipShowMoreTow = !showMore + // 展示当前弹框是，隐藏其他弹框 + this.relationshipShowMoreOne = 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/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 => { diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index bd743668..940e2f16 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -50,15 +50,45 @@
{{$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}} +
+
+
@@ -153,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 @@ -173,6 +204,8 @@ export default { alertUrl: api.entityAppDetailAlert, securityUrl: api.entityAppDetailSecurity, trafficUrlMap: api.entityAppDetailTrafficMap, + relatedServerDomainUrl: api.entityAppRelatedServerDomain, + relatedServerIpUrl: api.entityAppRelatedServerIp, chartData: null, listMode: 'list', singleValues: { @@ -252,12 +285,17 @@ 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.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedApp') + this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedServerApp') } } }, mounted () { - this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) }) + this.$nextTick(() => { + setTimeout(() => { + this.chartGetMap() + }, 250) + }) }, setup (props) { return { diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue index ca055306..6ce0ba29 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,15 +189,16 @@ 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' +import relatedServer from '@/mixins/relatedServer' export default { name: 'Domain', components: { ChartSingleValue, Chart }, - mixins: [entityDetailMixin], + mixins: [entityDetailMixin, relatedServer], data () { return { // entityData: {}, @@ -180,6 +211,8 @@ export default { alertUrl: api.entityDomainDetailAlert, securityUrl: api.entityDomainDetailSecurity, trafficUrlMap: api.entityDomainDetailTrafficMap, + relatedServerIpUrl: api.entityDomainRelatedServerIp, + relatedServerAppUrl: api.entityDomainRelatedServerApp, chartData: null, listMode: 'list', singleValues: { @@ -243,7 +276,7 @@ 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 } @@ -260,11 +293,17 @@ 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.getRelatedServerDataOne(this.relatedServerAppUrl, 'relatedDomain') + this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedServerDomain') } } }, mounted () { - this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)}) + this.$nextTick(() => { + setTimeout(() => { + this.chartGetMap() + }, 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..554a8ab9 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -42,15 +42,45 @@
{{$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.relatedApp')}} +
+
+ {{item.appName}} +
+
+
+
...
+
+
+ {{item.appName}} +
+
+
@@ -145,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 @@ -165,6 +196,8 @@ export default { linkOutUrl: api.entityIpDetailLinkOut, alertUrl: api.entityIpDetailAlert, securityUrl: api.entityIpDetailSecurity, + relatedServerDomainUrl: api.entityIpRelatedServerDomain, + relatedServerAppUrl: api.entityIpRelatedServerApp, listMode: 'list', chartData: null, singleValues: { @@ -246,11 +279,17 @@ 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.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedIp') + this.getRelatedServerDataTow(this.relatedServerAppUrl, 'relatedServerIp') } } }, mounted () { - this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) }) + this.$nextTick(() => { + setTimeout(() => { + this.chartGetMap() + }, 250) + }) }, setup (props) { const entityCopy = {