gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 关系宽度问题，样式调整

Browse Source
This commit is contained in:
@changcode
2022-02-22 16:19:38 +08:00
parent 8f8f412877
commit 278b78d8a2
5 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
View File

@@ -176,7 +176,7 @@
width: 10px;
}
.overview__domain-more-tabs {
min-width: 110px;
min-width: 150px;
max-height: 180px;
overflow: auto;
background: #FFFFFF;
@@ -185,7 +185,7 @@
padding: 5px;
z-index: 1;
position: absolute;
right: -80px;
right: -120px;
top: -180px;
.domain-more-tab {
height: 24px;
@@ -197,7 +197,7 @@
letter-spacing: 0;
line-height: 12px;
font-weight: 400;
width: 84px;
width: 126px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

10
src/mixins/relatedServer.js
View File

@@ -19,7 +19,6 @@ export default {
getRelatedServerDataOne (relationshipUrlOne, refOne) {
get(relationshipUrlOne, this.getQueryParams()).then(response => {
if (response.code === 200) {
// this.relationshipDataOne = response.data.result
const relationshipDataOne = response.data.result
// 将请求数据 传入方法中
this.relatedServerWidth(relationshipDataOne, refOne, 1)
@@ -29,7 +28,6 @@ export default {
getRelatedServerDataTow (relationshipUrlTow, refTow) {
get(relationshipUrlTow, this.getQueryParams()).then(response => {
if (response.code === 200) {
// this.relationshipDataTow = response.data.result
const relationshipDataTow = response.data.result
// 将请求数据 传入方法中
this.relatedServerWidth(relationshipDataTow, refTow, 2)
@@ -40,12 +38,12 @@ export default {
relatedServerWidth (data, value, num) {
// 最大宽度
const relatedServerWidth = this.$refs.relationship.offsetWidth
let sum = 194
let sum = 240
let flag = true
data.forEach((item, index) => {
data.forEach((item) => {
// 每条数据的宽度
const width = getTextRect(item.appName || item.domain || item.ipAddr).width + 47
if (width > 47 && width !== 0) {
const width = getTextRect(item.appName || item.domain || item.ip).width + 64
if (width > 64 && width !== 0) {
sum += width
if (flag && sum >= relatedServerWidth && num === 1) {
flag = false

24
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -58,7 +58,7 @@
<span class="tag__value">{{relationshipDataOne.length}}</span>
<span class="tag__desc">{{$t('entities.piece')}}{{$t('entities.relatedDomains')}}</span>
</div>
<div class="overview__tag domain__tag-list" :ref="'relatedApp' + index" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
<div class="overview__tag domain__tag-list" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
<span class="tag__desc">{{item.domain}}</span>
</div>
</div>
@@ -77,7 +77,7 @@
<span class="tag__value">{{relationshipDataTow.length}}</span>
<span class="tag__desc">{{$t('entities.piece')}}{{$t('entities.relatedServerIp')}}</span>
</div>
<div class="overview__tag domain__tag-list" :ref="'relatedServerApp' + index" v-show="item.show" v-for="(item, index) in relationshipDataTow" :key="index">
<div class="overview__tag domain__tag-list" v-show="item.show" v-for="(item, index) in relationshipDataTow" :key="index">
<span class="tag__desc">{{item.ip}}</span>
</div>
</div>
@@ -281,18 +281,20 @@ export default {
}
},
watch: {
entityData: {
'entityData.appName': {
immediate: true,
deep: true,
handler (n) {
this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
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.$nextTick(() => {
this.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedApp')
this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedServerApp')
})
if (n) {
this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
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.$nextTick(() => {
this.getRelatedServerDataOne(this.relatedServerDomainUrl)
this.getRelatedServerDataTow(this.relatedServerIpUrl)
})
}
}
}
},

26
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -66,7 +66,7 @@
<span class="tag__value">{{relationshipDataOne.length}}</span>
<span class="tag__desc">{{$t('entities.piece')}}{{$t('entities.relatedApp')}}</span>
</div>
<div class="overview__tag domain__tag-list" :ref="'relatedDomain' + index" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
<div class="overview__tag domain__tag-list" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
<span class="tag__desc">{{item.appName}}</span>
</div>
</div>
@@ -85,7 +85,7 @@
<span class="tag__value">{{relationshipDataTow.length}}</span>
<span class="tag__desc">{{$t('entities.piece')}}{{$t('entities.relatedServerIp')}}</span>
</div>
<div class="overview__tag domain__tag-list" :ref="'relatedDomainIp' + index" v-show="item.show" v-for="(item, index) in relationshipDataTow" :key="index">
<div class="overview__tag domain__tag-list" v-show="item.show" v-for="(item, index) in relationshipDataTow" :key="index">
<span class="tag__desc">{{item.ip}}</span>
</div>
</div>
@@ -288,19 +288,21 @@ export default {
}
},
watch: {
entityData: {
'entityData.domainName': {
immediate: true,
deep: true,
handler (n) {
this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
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.relatedServerAppUrl, 'relatedDomain')
this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedDomainIp')
})
if (n) {
this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
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.relatedServerAppUrl)
this.getRelatedServerDataTow(this.relatedServerIpUrl)
})
}
}
}
},

8
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -50,7 +50,7 @@
<span class="tag__value">{{relationshipDataOne.length}}</span>
<span class="tag__desc">{{$t('entities.piece')}}{{$t('entities.relatedDomains')}}</span>
</div>
<div class="overview__tag domain__tag-list" :ref="'relatedIp' + index" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
<div class="overview__tag domain__tag-list" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
<span class="tag__desc">{{item.domain}}</span>
</div>
</div>
@@ -69,7 +69,7 @@
<span class="tag__value">{{relationshipDataTow.length}}</span>
<span class="tag__desc">{{$t('entities.piece')}}{{$t('entities.relatedApp')}}</span>
</div>
<div class="overview__tag domain__tag-list" :ref="'relatedServerIp' + index" v-show="item.show" v-for="(item, index) in relationshipDataTow" :key="index">
<div class="overview__tag domain__tag-list" v-show="item.show" v-for="(item, index) in relationshipDataTow" :key="index">
<span class="tag__desc">{{item.appName}}</span>
</div>
</div>
@@ -285,8 +285,8 @@ export default {
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)
this.getRelatedServerDataTow(this.relatedServerAppUrl)
})
}
}