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:
chenjinsong
2022-02-22 15:54:19 +08:00
parent e228a7f84c
commit 932e64e026
2 changed files with 37 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/mixins/relatedServer.js
View File

@@ -1,4 +1,5 @@
import { get } from '@/utils/http' import { get } from '@/utils/http'
import { getTextRect } from '@/utils/tools'
export default { export default {
data () { data () {
return { return {
@@ -18,18 +19,20 @@ export default {
getRelatedServerDataOne (relationshipUrlOne, refOne) { getRelatedServerDataOne (relationshipUrlOne, refOne) {
get(relationshipUrlOne, this.getQueryParams()).then(response => { get(relationshipUrlOne, this.getQueryParams()).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.relationshipDataOne = response.data.result // this.relationshipDataOne = response.data.result
const relationshipDataOne = response.data.result
// 将请求数据 传入方法中 // 将请求数据 传入方法中
this.relatedServerWidth(this.relationshipDataOne, refOne, 1) this.relatedServerWidth(relationshipDataOne, refOne, 1)
} }
}) })
}, },
getRelatedServerDataTow (relationshipUrlTow, refTow) { getRelatedServerDataTow (relationshipUrlTow, refTow) {
get(relationshipUrlTow, this.getQueryParams()).then(response => { get(relationshipUrlTow, this.getQueryParams()).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.relationshipDataTow = response.data.result // this.relationshipDataTow = response.data.result
const relationshipDataTow = response.data.result
// 将请求数据 传入方法中 // 将请求数据 传入方法中
this.relatedServerWidth(this.relationshipDataTow, refTow, 2) this.relatedServerWidth(relationshipDataTow, refTow, 2)
} }
}) })
}, },
@@ -37,26 +40,28 @@ export default {
relatedServerWidth (data, value, num) { relatedServerWidth (data, value, num) {
// 最大宽度 // 最大宽度
const relatedServerWidth = this.$refs.relationship.offsetWidth const relatedServerWidth = this.$refs.relationship.offsetWidth
let sum = 0 let sum = 194
let flag = true let flag = true
data.map((item, index) => { data.forEach((item, index) => {
if (this.$refs[value + index]) { // 每条数据的宽度
// 每条数据的宽度 const width = getTextRect(item.appName || item.domain || item.ipAddr).width + 47
const width = this.$refs[value + index].offsetWidth + 44 if (width > 47 && width !== 0) {
if (width > 44 && width !== 0) { sum += width
sum += width if (flag && sum >= relatedServerWidth && num === 1) {
if (flag && sum >= relatedServerWidth && num === 1) { flag = false
flag = false this.relationshipShowOne = true
this.relationshipShowOne = true } else if (flag && sum >= relatedServerWidth && num === 2) {
} else if (flag && sum >= relatedServerWidth && num === 2) { flag = false
flag = false this.relationshipShowTow = true
this.relationshipShowTow = true
}
} }
item.show = flag
} }
return item item.show = flag
}) })
if (num === 1) {
this.relationshipDataOne = data
} else if (num === 2) {
this.relationshipDataTow = data
}
}, },
// 点击事件 控制弹框的展示隐藏，展示全部的数据 // 点击事件 控制弹框的展示隐藏，展示全部的数据
more (data, index) { more (data, index) {

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

@@ -275,19 +275,20 @@ export default {
} }
}, },
watch: { watch: {
entityData: { 'entityData.ipAddr': {
immediate: true,
deep: true, deep: true,
handler (n) { handler (n) {
this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency')) if (n) {
this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency')) this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency')) this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency'))
this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent')) this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent')) this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
this.$nextTick(() => { this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
this.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedIp') this.$nextTick(() => {
this.getRelatedServerDataTow(this.relatedServerAppUrl, 'relatedServerIp') this.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedIp')
}) this.getRelatedServerDataTow(this.relatedServerAppUrl, 'relatedServerIp')
})
}
} }
} }
}, },