fix:优化 alertmessage tooltip 显示位置问题
This commit is contained in:
@@ -299,7 +299,7 @@ export default {
|
||||
const leftOffSetView = this.detailList ? -80 : 10
|
||||
const leftOffSet = this.detailList ? -80 : 10
|
||||
const topOffSet = this.detailList ? 60 : 22
|
||||
if (position.top + this.heightList > clientHeight) {
|
||||
if (position.top > clientHeight / 2) {
|
||||
return {
|
||||
left: `${position.left + position.width + leftOffSet}px`,
|
||||
top: `${position.top - this.heightList + topOffSet}px`
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" v-loading="loading">
|
||||
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-loading="loading" ref="alertLabels">
|
||||
<div class="alert-rule-info" >
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">ID</div>
|
||||
@@ -88,37 +88,21 @@ export default {
|
||||
}
|
||||
}
|
||||
const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
|
||||
const elHeight = 50
|
||||
if (position.top + elHeight > clientHeight) {
|
||||
// const windowWidth = window.innerWidth
|
||||
const boxHeight = this.$refs.alertLabels ? this.$refs.alertLabels.offsetHeight : 231
|
||||
const windowHeight = window.innerHeight
|
||||
if (position.top > windowHeight / 2) {
|
||||
return {
|
||||
left: `${position.left + position.width + 200}px`,
|
||||
top: `${position.top - elHeight - 80}px`
|
||||
left: `${position.left + position.width + 10}px`,
|
||||
top: `${position.top - boxHeight}px`
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
left: `${position.left + position.width + 200}px`,
|
||||
top: `${position.top - 80}px`
|
||||
left: `${position.left + position.width + 10}px`,
|
||||
top: `${position.top}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
calcHeight () {
|
||||
return function (position) {
|
||||
const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
|
||||
const elHeight = 50
|
||||
if (!position) {
|
||||
if (elHeight > clientHeight) {
|
||||
return 'alert-rule-abs-Up'
|
||||
} else {
|
||||
return 'alert-rule-abs'
|
||||
}
|
||||
}
|
||||
if (position.top + elHeight > clientHeight) {
|
||||
return 'alert-rule-tip-Up'
|
||||
} else {
|
||||
return 'alert-rule-tip'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -34,16 +34,11 @@
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop === 'alertRule'">
|
||||
<div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
|
||||
<el-popover
|
||||
placement="right-start"
|
||||
popper-class="alert-message-tooltip"
|
||||
style="position: relative"
|
||||
@show="alertMessageHover(scope.row.alertRule, true)"
|
||||
@hide="alertMessageHover(scope.row.alertRule, false)"
|
||||
trigger="hover">
|
||||
<span
|
||||
@mouseenter="alertMessageHover(scope.row.alertRule, true, $event)"
|
||||
@mouseleave="alertMessageHover(scope.row.alertRule, false)"
|
||||
>{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
|
||||
<alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo>
|
||||
<span slot="reference">{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
|
||||
@@ -743,7 +743,6 @@ export default {
|
||||
res.forEach((response, index) => {
|
||||
if (response.data && response.status === 'success') {
|
||||
const data = response.data.result
|
||||
console.log(data)
|
||||
if (data) {
|
||||
data.forEach((result, i) => {
|
||||
const metrics = Object.assign({}, result.metric)
|
||||
|
||||
Reference in New Issue
Block a user