NEZ-1939 fix： Rules切换视图后，鼠标虚浮在名称处时出现错位现象
This commit is contained in:
zhangyu
@@ -1,78 +1,80 @@
|
||||
<template>
|
||||
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
|
||||
<div class="alert-label-header-title">
|
||||
<div class="alert-label-header-circle" :style="`background: ${alertColor}`">
|
||||
<i class="nz-icon nz-icon-Alertrule"></i>
|
||||
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" ref="alertLabels">
|
||||
<div v-my-loading="loading">
|
||||
<div class="alert-label-header-title">
|
||||
<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 class="alert-label-header-name">
|
||||
{{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-rule-nfo" >
|
||||
<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 name-labe">
|
||||
<div class="alert-rule-title">{{$t('overall.name')}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
||||
</div>
|
||||
<!-- <div class="alert-rule-box">-->
|
||||
<!-- <div class="alert-rule-title">{{$t('overall.name')}}</div>-->
|
||||
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>-->
|
||||
<!-- </div>-->
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('overall.type')}}</div>
|
||||
<div class="alert-rule-value">
|
||||
<div class="alert-rule-nfo" >
|
||||
<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 name-labe">
|
||||
<div class="alert-rule-title">{{$t('overall.name')}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
||||
</div>
|
||||
<!-- <div class="alert-rule-box">-->
|
||||
<!-- <div class="alert-rule-title">{{$t('overall.name')}}</div>-->
|
||||
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>-->
|
||||
<!-- </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">
|
||||
{{$t('project.metrics.metrics')}}
|
||||
</span>
|
||||
<span v-else-if="alertRuleData.type === 2">
|
||||
<span v-else-if="alertRuleData.type === 2">
|
||||
{{$t('overall.logs')}}
|
||||
</span>
|
||||
<span v-else-if="alertRuleData.type === 3">SNMP trap</span>
|
||||
<span v-else>--</span>
|
||||
<span v-else-if="alertRuleData.type === 3">SNMP trap</span>
|
||||
<span v-else>--</span>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
|
||||
<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>
|
||||
<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="severity-info" style='justify-content: space-between'>
|
||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||
<div class="severity-value">{{alertRuleData.alertNum}}</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>
|
||||
<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>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
|
||||
<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>
|
||||
<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="severity-info" style='justify-content: space-between'>
|
||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||
<div class="severity-value">{{alertRuleData.alertNum}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<alertDaysInfo
|
||||
v-show="!trendLoading"
|
||||
:alertDaysData="alertDaysData"
|
||||
/>
|
||||
</div>
|
||||
<alertDaysInfo
|
||||
v-show="!trendLoading"
|
||||
:alertDaysData="alertDaysData"
|
||||
/>
|
||||
</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"></i></div>
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('overall.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 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"></i></div>
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('overall.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>
|
||||
|
||||
@@ -154,7 +154,7 @@ export function uSize (rule, value, callback) {
|
||||
} else {
|
||||
const num = Number(value)
|
||||
if (num < 0 || num > 47) {
|
||||
callback(new Error(vm.$t('validate.usize')))
|
||||
callback(new Error(vm.$t('validate.uSize')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user