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

NEZ-1080 style: 鼠标悬浮样式调整

Browse Source
This commit is contained in:
@changcode
2021-10-26 17:47:49 +08:00
parent 062bbaf58f
commit 5a831004f5
15 changed files with 242 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,41 +1,65 @@
<template>
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" v-loading="loading">
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" 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.id ? alertRuleData.id : ''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.alertName')}}</div>
<div class="alert-rule-title">{{$t('alert.name')}}</div>
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : ''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
<div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : ''}}</div>
<div class="alert-rule-title">{{$t('alert.type')}}</div>
<div class="alert-rule-value">{{alertRuleData.type ? alertRuleData.type : ''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.severity')}}</div>
<div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : ''}}</div>
<!-- <div class="alert-rule-value severity">
<span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
</span>
<span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P2'}).label}}
</span>
<span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
</span>
</div>-->
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.config.threshold')}}</div>
<div class="alert-rule-value">{{alertRuleData.threshold ? alertRuleData.threshold : ''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.severity')}}</div>
<div class="alert-rule-value">{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : ''}}</div>
<!-- <div class="alert-rule-value severity">
<span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
</span>
<span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P2'}).label}}
</span>
<span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
</span>
</div>-->
<div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
<div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : ''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
<div class="alert-rule-value">
<i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
<span>{{alertRuleData.alertNum ? alertRuleData.alertNum : 0}}</span>
</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju" style="color: #fa901c"></i></div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.state')}}</div>
<div class="alert-rule-value" style="margin-left: 3px">
<div v-if="alertRuleData.state === 1">
<i class="active-icon green-bg inline-block"></i>
{{ $t('overall.enabled') }}
</div>
<div v-else-if="alertRuleData.state === 0">
<i class="active-icon gray-bg inline-block"></i>
{{ $t('overall.disabled') }}
</div>
</div>
</div>
</div>
</div>
</template>
@@ -53,7 +77,8 @@ export default {
data () {
return {
loading: true,
alertRuleData: ''
alertRuleData: '',
severityColor: ''
}
},
components: {
@@ -72,12 +97,12 @@ export default {
const elHeight = 50
if (position.top + elHeight > clientHeight) {
return {
left: `${position.left + position.width + 20}px`,
left: `${position.left + position.width + 200}px`,
top: `${position.top - elHeight - 80}px`
}
} else {
return {
left: `${position.left + position.width + 20}px`,
left: `${position.left + position.width + 200}px`,
top: `${position.top - 80}px`
}
}
@@ -113,12 +138,19 @@ export default {
},
trbShotShow () {
this.$emit('showText')
},
severityDataColor () {
this.severityData.map(item => {
console.log(item.color)
this.severityColor = item.color
})
}
},
mounted () {
this.$get('/alert/rule/' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.severityDataColor()
this.alertRuleData = res.data
} else {
this.$message.error(res.msg)
@@ -193,26 +225,22 @@ export default {
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.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;
flex-direction: row;
}
.alert-rule-title{
text-align: left;
width: 110px;
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;
word-wrap: break-word;
@@ -240,6 +268,12 @@ export default {
color: #FFFFFF;
padding: 2px 6px;
}
.alert-label__border {
background: #FFFFFF;
border: 1px solid #E7EAED;
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
border-radius: 3px 3px 3px 3px 0 0;
}
/* .alert-rule-info::after {
content: '';
display: block;