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

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

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)
})
}
}
}
},

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)
})
}
}
}
},

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)
})
}
}