NEZ-1939 fix： Rules切换视图后，鼠标虚浮在名称处时出现错位现象
This commit is contained in:
zhangyu
@@ -1,78 +1,80 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
|
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" ref="alertLabels">
|
||||||
<div class="alert-label-header-title">
|
<div v-my-loading="loading">
|
||||||
<div class="alert-label-header-circle" :style="`background: ${alertColor}`">
|
<div class="alert-label-header-title">
|
||||||
<i class="nz-icon nz-icon-Alertrule"></i>
|
<div class="alert-label-header-circle" :style="`background: ${alertColor}`">
|
||||||
|
<i class="nz-icon nz-icon-Alertrule"></i>
|
||||||
|
</div>
|
||||||
|
<div class="alert-label-header-name">
|
||||||
|
{{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-header-name">
|
<div class="alert-rule-nfo" >
|
||||||
{{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
|
<div class="alert-rule-box">
|
||||||
</div>
|
<div class="alert-rule-title">ID</div>
|
||||||
</div>
|
<div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
|
||||||
<div class="alert-rule-nfo" >
|
</div>
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-box name-labe">
|
||||||
<div class="alert-rule-title">ID</div>
|
<div class="alert-rule-title">{{$t('overall.name')}}</div>
|
||||||
<div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
|
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-rule-box name-labe">
|
<!-- <div class="alert-rule-box">-->
|
||||||
<div class="alert-rule-title">{{$t('overall.name')}}</div>
|
<!-- <div class="alert-rule-title">{{$t('overall.name')}}</div>-->
|
||||||
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<!-- <div class="alert-rule-box">-->
|
<div class="alert-rule-box">
|
||||||
<!-- <div class="alert-rule-title">{{$t('overall.name')}}</div>-->
|
<div class="alert-rule-title">{{$t('overall.type')}}</div>
|
||||||
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>-->
|
<div class="alert-rule-value">
|
||||||
<!-- </div>-->
|
|
||||||
<div class="alert-rule-box">
|
|
||||||
<div class="alert-rule-title">{{$t('overall.type')}}</div>
|
|
||||||
<div class="alert-rule-value">
|
|
||||||
<span v-if="alertRuleData.type === 1">
|
<span v-if="alertRuleData.type === 1">
|
||||||
{{$t('project.metrics.metrics')}}
|
{{$t('project.metrics.metrics')}}
|
||||||
</span>
|
</span>
|
||||||
<span v-else-if="alertRuleData.type === 2">
|
<span v-else-if="alertRuleData.type === 2">
|
||||||
{{$t('overall.logs')}}
|
{{$t('overall.logs')}}
|
||||||
</span>
|
</span>
|
||||||
<span v-else-if="alertRuleData.type === 3">SNMP trap</span>
|
<span v-else-if="alertRuleData.type === 3">SNMP trap</span>
|
||||||
<span v-else>--</span>
|
<span v-else>--</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="alert-rule-box">
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-title">{{$t('alert.severity')}}</div>
|
||||||
<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"><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>
|
||||||
</div>
|
<div class="alert-rule-box">
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-title">{{$t('alert.config.expr')}}</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 class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}</div>
|
</div>
|
||||||
</div>
|
<div class="alert-rule-box">
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
|
||||||
<div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
|
<div class="alert-rule-value" v-if="alertRuleData">
|
||||||
<div class="alert-rule-value" v-if="alertRuleData">
|
<i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-value">{{alertRuleData.alertNum}}</div>
|
||||||
<div class="severity-value">{{alertRuleData.alertNum}}</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<alertDaysInfo
|
||||||
|
v-show="!trendLoading"
|
||||||
|
:alertDaysData="alertDaysData"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<alertDaysInfo
|
|
||||||
v-show="!trendLoading"
|
|
||||||
:alertDaysData="alertDaysData"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="alert-rule-box">
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
|
||||||
<div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
|
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
|
||||||
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
|
</div>
|
||||||
</div>
|
<div class="alert-rule-box">
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-title">{{$t('overall.state')}}</div>
|
||||||
<div class="alert-rule-title">{{$t('overall.state')}}</div>
|
<div class="alert-rule-value" style="margin-left: 3px">
|
||||||
<div class="alert-rule-value" style="margin-left: 3px">
|
<div v-if="alertRuleData.state === 1">
|
||||||
<div v-if="alertRuleData.state === 1">
|
<i class="active-icon green-bg inline-block"></i>
|
||||||
<i class="active-icon green-bg inline-block"></i>
|
{{ $t('overall.enabled') }}
|
||||||
{{ $t('overall.enabled') }}
|
</div>
|
||||||
</div>
|
<div v-else-if="alertRuleData.state === 0">
|
||||||
<div v-else-if="alertRuleData.state === 0">
|
<i class="active-icon gray-bg inline-block"></i>
|
||||||
<i class="active-icon gray-bg inline-block"></i>
|
{{ $t('overall.disabled') }}
|
||||||
{{ $t('overall.disabled') }}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -154,7 +154,7 @@ export function uSize (rule, value, callback) {
|
|||||||
} else {
|
} else {
|
||||||
const num = Number(value)
|
const num = Number(value)
|
||||||
if (num < 0 || num > 47) {
|
if (num < 0 || num > 47) {
|
||||||
callback(new Error(vm.$t('validate.usize')))
|
callback(new Error(vm.$t('validate.uSize')))
|
||||||
} else {
|
} else {
|
||||||
callback()
|
callback()
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user