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

fix: alert-list样式调整、label悬停bug修复

Browse Source
This commit is contained in:
chenjinsong
2020-09-29 18:51:03 +08:00
parent ac835be958
commit f41d59a0a0
5 changed files with 101 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,23 +1,25 @@
<template>
<div class="alert-rule-info" :style="calcPosition(that.position)" v-loading="loading">
<div class="alert-rule-box">
<div class="alert-rule-title">ID</div>
<div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
</div>
<!--<div class="alert-rule-box">-->
<div class="alert-rule-tip" :style="calcPosition(that.position)" v-loading="loading">
<div class="alert-rule-info" >
<div class="alert-rule-box">
<div class="alert-rule-title">ID</div>
<div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
</div>
<!--<div class="alert-rule-box">-->
<!--<div class="alert-rule-title">ID</div>-->
<!--<div class="alert-rule-value">{{alertRuleData.id}}</div>-->
<!--</div>-->
<div class="alert-rule-box">
<div class="alert-rule-title">Expression</div>
<div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">Level</div>
<div class="alert-rule-value">
<span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'high'}).label}}</span>
<span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'medium'}).label}}</span>
<span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'low'}).label}}</span>
<!--</div>-->
<div class="alert-rule-box">
<div class="alert-rule-title">Expression</div>
<div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">Level</div>
<div class="alert-rule-value">
<span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'high'}).label}}</span>
<span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'medium'}).label}}</span>
<span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'low'}).label}}</span>
</div>
</div>
</div>
</div>
@@ -91,7 +93,55 @@
</script>
<style scoped>
.alert-rule-info::after {
.alert-rule-tip {
position: fixed;
background-color: white;
z-index: 3000;
padding: 10px;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.alert-rule-tip::after {
content: '';
display: block;
width:0;
height:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 5px;
border-style: dashed solid dashed dashed;
border-color: transparent #fff transparent transparent;
position: absolute;
top: 20px;
left: 0;
transform: translate(-100%, -50%);
}
.alert-rule-info{
border: 1px solid #ebeef5;
border-bottom: none;
font-size: 13px;
line-height: 26px;
}
.alert-rule-box{
display: flex;
justify-content:space-between;
border-bottom: 1px solid #ebeef5;
}
.alert-rule-title{
text-align: left;
width: 90px;
border-right: 1px solid #ebeef5;
color: #666;
padding: 0 3px 0 13px;
}
.alert-rule-value{
text-align: left;
width: 150px;
color: #1a1a1a;
padding: 0 3px 0 13px;
}
/* .alert-rule-info::after {
content: '';
display: block;
width:0;
@@ -112,9 +162,14 @@
border-bottom: none;
font-size: 13px;
line-height: 26px;
position: fixed;
}*/
/* .alert-rule-info{
border: 1px solid #ebeef5;
border-bottom: none;
font-size: 13px;
line-height: 26px;
display: flex;
background-color: white;
z-index: 3000;
padding: 10px;
transform: translateY(-50%);
overflow-wrap: break-word;
@@ -136,5 +191,5 @@
text-align: left;
color: #1a1a1a;
padding: 0 3px 0 13px;
}
}*/
</style>