gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：优化 alertmessage tooltip 显示位置问题

Browse Source
This commit is contained in:
zhangyu
2021-12-31 10:15:36 +08:00
parent f297983554
commit 2ccd8ff66c
4 changed files with 15 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -299,7 +299,7 @@ export default {
const leftOffSetView = this.detailList ? -80 : 10 const leftOffSetView = this.detailList ? -80 : 10
const leftOffSet = this.detailList ? -80 : 10 const leftOffSet = this.detailList ? -80 : 10
const topOffSet = this.detailList ? 60 : 22 const topOffSet = this.detailList ? 60 : 22
if (position.top + this.heightList > clientHeight) { if (position.top > clientHeight / 2) {
return { return {
left: `${position.left + position.width + leftOffSet}px`, left: `${position.left + position.width + leftOffSet}px`,
top: `${position.top - this.heightList + topOffSet}px` top: `${position.top - this.heightList + topOffSet}px`

34
nezha-fronted/src/components/common/alert/alertRuleInfo.vue
View File

@@ -1,5 +1,5 @@
<template> <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-info" >
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">ID</div> <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 clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
const elHeight = 50 // const windowWidth = window.innerWidth
if (position.top + elHeight > clientHeight) { const boxHeight = this.$refs.alertLabels ? this.$refs.alertLabels.offsetHeight : 231
const windowHeight = window.innerHeight
if (position.top > windowHeight / 2) {
return { return {
left: `${position.left + position.width + 200}px`, left: `${position.left + position.width + 10}px`,
top: `${position.top - elHeight - 80}px` top: `${position.top - boxHeight}px`
} }
} else { } else {
return { return {
left: `${position.left + position.width + 200}px`, left: `${position.left + position.width + 10}px`,
top: `${position.top - 80}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: { methods: {

15
nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
View File

@@ -34,16 +34,11 @@
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop === 'alertRule'"> <template v-if="item.prop === 'alertRule'">
<div v-if="scope.row.alertRule&&scope.row.alertRule.name" > <div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
<el-popover <span
placement="right-start" @mouseenter="alertMessageHover(scope.row.alertRule, true, $event)"
popper-class="alert-message-tooltip" @mouseleave="alertMessageHover(scope.row.alertRule, false)"
style="position: relative" >{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
@show="alertMessageHover(scope.row.alertRule, true)" <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>
@hide="alertMessageHover(scope.row.alertRule, false)"
trigger="hover">
<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> </div>
<template v-else>-</template> <template v-else>-</template>
</template> </template>

1
nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
View File

@@ -743,7 +743,6 @@ export default {
res.forEach((response, index) => { res.forEach((response, index) => {
if (response.data && response.status === 'success') { if (response.data && response.status === 'success') {
const data = response.data.result const data = response.data.result
console.log(data)
if (data) { if (data) {
data.forEach((result, i) => { data.forEach((result, i) => {
const metrics = Object.assign({}, result.metric) const metrics = Object.assign({}, result.metric)