91 lines
3.1 KiB
JavaScript
91 lines
3.1 KiB
JavaScript
import { get } from '@/utils/http'
|
|
import { getTextRect } from '@/utils/tools'
|
|
export default {
|
|
data () {
|
|
return {
|
|
relationshipDataOne: [], // 数据
|
|
relationshipDataTow: [], // 数据
|
|
relationshipShowOne: false, // 控制 ... 的展示隐藏
|
|
relationshipShowTow: false, // 控制 ... 的展示隐藏
|
|
relationshipShowMoreOne: false, // 控制弹框的展示隐藏
|
|
relationshipShowMoreTow: false, // 控制弹框的展示隐藏
|
|
relationshipMoreDataOne: [], // 展示所有
|
|
relationshipMoreDataTow: [], // 展示所有
|
|
timer: null
|
|
}
|
|
},
|
|
methods: {
|
|
// 请求数据 relationshipUrlOne => 路由 refOne => ref
|
|
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)
|
|
}
|
|
})
|
|
},
|
|
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)
|
|
}
|
|
})
|
|
},
|
|
// data => 数据， value => ref
|
|
relatedServerWidth (data, value, num) {
|
|
// 最大宽度
|
|
const relatedServerWidth = this.$refs.relationship.offsetWidth
|
|
let sum = 194
|
|
let flag = true
|
|
data.forEach((item, index) => {
|
|
// 每条数据的宽度
|
|
const width = getTextRect(item.appName || item.domain || item.ipAddr).width + 47
|
|
if (width > 47 && width !== 0) {
|
|
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
|
|
})
|
|
if (num === 1) {
|
|
this.relationshipDataOne = data
|
|
} else if (num === 2) {
|
|
this.relationshipDataTow = data
|
|
}
|
|
},
|
|
// 点击事件 控制弹框的展示隐藏，展示全部的数据
|
|
more (data, index) {
|
|
if (index === 1) {
|
|
// 展示数据
|
|
this.relationshipMoreDataOne = data
|
|
// 弹框的显示隐藏
|
|
this.relationshipShowMoreOne = true
|
|
// 展示当前弹框是，隐藏其他弹框
|
|
this.relationshipShowMoreTow = false
|
|
}
|
|
if (index === 2) {
|
|
// 展示数据
|
|
this.relationshipMoreDataTow = data
|
|
// 弹框的显示隐藏
|
|
this.relationshipShowMoreTow = true
|
|
// 展示当前弹框是，隐藏其他弹框
|
|
this.relationshipShowMoreOne = false
|
|
}
|
|
},
|
|
mouseout () {
|
|
this.relationshipShowMoreTow = false
|
|
this.relationshipShowMoreOne = false
|
|
}
|
|
}
|
|
}
|