From 7363c3a227da3fb3904277d8118fd16463cdd111 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 11 Jul 2022 13:48:46 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=20alertRule=20to?=
 =?UTF-8?q?oltip=E7=9A=84=E7=9B=B8=E5=85=B3class=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel.scss   | 11 ++++
 .../components/common/alert/alertRuleInfo.vue | 56 +++++++++----------
 .../common/alert/alertRuleInfo2.vue           | 56 +++++++++----------
 3 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
index 6e8ebcc2d..964dacbf9 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
@@ -63,6 +63,17 @@
     color: $--color-text-primary;
     letter-spacing: 0;
     line-height: 23px;
+    padding-right: 5px;
+    .nz-icon-guzhangshuju {
+      color: $--color-primary;
+      vertical-align: middle;
+    }
+    .nz-icon-overview-alert{
+      vertical-align: middle;
+    }
+    .alert-days-info{
+      vertical-align: middle;
+    }
   }
   .danger{
     background-color: $--color-danger;
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index a442666b8..7a70ea340 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -9,22 +9,22 @@
           {{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 class="alert-label-nfo" >
+        <div class="alert-label-box">
+          <div class="alert-label-title">ID</div>
+          <div class="alert-label-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 class="alert-label-box name-labe">
+          <div class="alert-label-title">{{$t('overall.name')}}</div>
+          <div class="alert-label-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 : '&#45;&#45;'}}</div>-->
+        <!--      <div class="alert-label-box">-->
+        <!--        <div class="alert-label-title">{{$t('overall.name')}}</div>-->
+        <!--        <div class="alert-label-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
         <!--      </div>-->
-        <div class="alert-rule-box">
-          <div class="alert-rule-title">{{$t('overall.type')}}</div>
-          <div class="alert-rule-value">
+        <div class="alert-label-box">
+          <div class="alert-label-title">{{$t('overall.type')}}</div>
+          <div class="alert-label-value">
           <span v-if="alertRuleData.type === 1">
             {{$t('overall.metric')}}
           </span>
@@ -35,17 +35,17 @@
             <span v-else>--</span>
           </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-label-box">
+          <div class="alert-label-title">{{$t('alert.severity')}}</div>
+          <div class="alert-label-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 class="alert-label-box">
+          <div class="alert-label-title">{{$t('alert.config.expr')}}</div>
+          <div class="alert-label-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">
+        <div class="alert-label-box">
+          <div class="alert-label-title">{{$t('alert.alertNum')}}</div>
+          <div class="alert-label-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('overall.active')}})</div>
@@ -60,13 +60,13 @@
             />
           </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 class="alert-label-box">
+          <div class="alert-label-title">{{$t('alert.config.trbShot')}}</div>
+          <div class="alert-label-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 class="alert-label-box">
+          <div class="alert-label-title">{{$t('overall.state')}}</div>
+          <div class="alert-label-value" style="margin-left: 3px">
             <div v-if="alertRuleData.state === 1">
               <i class="active-icon green-bg inline-block"></i>
               {{ $t('overall.enabled') }}
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo2.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo2.vue
index 7ff336035..418b99175 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo2.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo2.vue
@@ -8,22 +8,22 @@
         {{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 class="alert-label-nfo" >
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-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 class="alert-label-box name-labe">
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-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 : '&#45;&#45;'}}</div>-->
+<!--      <div class="alert-label-box">-->
+<!--        <div class="alert-label-title">{{$t('overall.name')}}</div>-->
+<!--        <div class="alert-label-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
 <!--      </div>-->
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('overall.type')}}</div>
-        <div class="alert-rule-value">
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.type')}}</div>
+        <div class="alert-label-value">
           <span v-if="alertRuleData.type === 1">
             {{$t('overall.metric')}}
           </span>
@@ -34,17 +34,17 @@
           <span v-else>--</span>
         </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-label-box">
+        <div class="alert-label-title">{{$t('alert.severity')}}</div>
+        <div class="alert-label-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 class="alert-label-box">
+        <div class="alert-label-title">{{$t('alert.config.expr')}}</div>
+        <div class="alert-label-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">
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('alert.alertNum')}}</div>
+        <div class="alert-label-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('overall.active')}})</div>
@@ -59,13 +59,13 @@
           />
         </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 class="alert-label-box">
+        <div class="alert-label-title">{{$t('alert.config.trbShot')}}</div>
+        <div class="alert-label-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 class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.state')}}</div>
+        <div class="alert-label-value" style="margin-left: 3px">
           <div v-if="alertRuleData.state === 1">
             <i class="active-icon green-bg inline-block"></i>
             {{ $t('overall.enabled') }}