From 5f4f8f0e3d62cb1690086cd3ec04d904d6017cac Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Wed, 20 Apr 2022 17:16:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:alert=20silence=20=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0=20alerts=20=E5=88=97?=
 =?UTF-8?q?=E3=80=81=E5=91=8A=E8=AD=A6=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=20=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/alert/alertMessageInfo.scss        |  30 +-
 .../components/common/alert/alertLabel.vue    | 886 ++++++++++++------
 .../common/alert/alertMessageInfoTab.vue      |   6 +-
 .../common/alert/alertMessageInfoTimeLine.vue |   2 +-
 .../components/common/alert/alertRuleInfo.vue |   4 +
 .../common/table/alert/alertSilenceTable.vue  |   4 +-
 .../common/table/settings/endpointTable.vue   |   2 +-
 7 files changed, 646 insertions(+), 288 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
index c753c31f6..1db5291c8 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
@@ -285,6 +285,9 @@
 .el-dialog__body {
   .alert-message-info-box {
     .info-box-right {
+      #alert .name-labe {
+        display: none;
+      }
       .el-timeline {
         .el-timeline-item {
           .el-timeline-item__wrapper {
@@ -294,7 +297,7 @@
                 font-size: 14px;
                 font-weight: 400;
                 padding-left: 5px;
-              } 
+              }
 
               .alert-message-startAt {
                 font-size: 14px;
@@ -375,9 +378,22 @@
     }
 
     .info-box-left {
+      .alert .name-labe {
+        display: block;
+      }
+      .name-labe{
+        display: none;
+      }
       .alert-message-info-tab {
         .el-tabs.el-tabs--card.el-tabs--top {
           .el-tabs__content {
+            #pane-alertRule{
+              .alert-rule-nfo{
+                .alert-rule-box{
+                  display: flex;
+                }
+              }
+            }
             #pane-detail {
               .info-box-header {
                 .info-box-content {
@@ -433,6 +449,7 @@
               .alert-label-info {
                 .alert-label-box {
                   margin-bottom: 25px;
+                  display: flex;
 
                   .alert-label-title {
                     margin-right: 30px;
@@ -445,7 +462,7 @@
               .alert-label-info {
                 .alert-label-box {
                   margin-bottom: 25px;
-
+                  display: flex;
                   .alert-label-title {
                     margin-right: 30px;
                   }
@@ -457,7 +474,7 @@
               .alert-label-info {
                 .alert-label-box {
                   margin-bottom: 25px;
-
+                  display: flex;
                   .alert-label-title {
                     margin-right: 30px;
                   }
@@ -469,7 +486,7 @@
               .alert-label-info {
                 .alert-label-box {
                   margin-bottom: 25px;
-
+                  display: flex;
                   .alert-label-title {
                     margin-right: 30px;
                   }
@@ -481,7 +498,7 @@
               .alert-label-info {
                 .alert-label-box {
                   margin-bottom: 25px;
-
+                  display: flex;
                   .alert-label-title {
                     margin-right: 30px;
                   }
@@ -502,3 +519,6 @@
     }
   }
 }
+
+
+
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index a70a647e0..5e19aea6c 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -1,62 +1,156 @@
 <template>
-  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels">
+  <div
+    :class="calcHeight(that.position, that)"
+    :style="calcPosition(that.position, that)"
+    class="alert-label__border"
+    ref="alertLabels"
+  >
     <div class="alert-label-header-title">
-      <div class="alert-label-header-circle" :style="`background: ${alertColor}`">
-        <i  class="nz-icon" :class="selectIcon(type)"></i>
+      <div
+        class="alert-label-header-circle"
+        :style="`background: ${alertColor}`"
+      >
+        <i class="nz-icon" :class="selectIcon(type)"></i>
       </div>
       <div class="alert-label-header-name">
-        {{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}
+        {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
       </div>
     </div>
-    <div class="alert-label-info" v-if="type==='asset'" v-my-loading="loading">
+    <div
+      class="alert-label-info"
+      v-if="type === 'asset'"
+      v-my-loading="loading"
+    >
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+       <div class="alert-label-box name-labe">
+        <div class="alert-label-title">Name</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.manageIp')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
+        <div class="alert-label-title">{{ $t("overall.manageIp") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.manageIp
+              ? alertLabelData.manageIp
+              : "--"
+          }}
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.type')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
+        <div class="alert-label-title">{{ $t("overall.type") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.type && alertLabelData.type.name
+              ? alertLabelData.type.name
+              : "--"
+          }}
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.state')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.state && alertLabelData.state.name
+              ? alertLabelData.state.name
+              : "--"
+          }}
+        </div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Ping</div>
         <div class="alert-label-value">
-          <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 1,'red-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 0}" class="active-icon"></div>
-          <span v-if="alertLabelData">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.rtt ? alertLabelData.pingInfo.rtt + 'ms':''}}</span>
+          <div
+            v-if="alertLabelData"
+            :class="{
+              'green-bg':
+                alertLabelData &&
+                alertLabelData.pingInfo &&
+                alertLabelData.pingInfo.status === 1,
+              'red-bg':
+                alertLabelData &&
+                alertLabelData.pingInfo &&
+                alertLabelData.pingInfo.status === 0,
+            }"
+            class="active-icon"
+          ></div>
+          <span v-if="alertLabelData">{{
+            alertLabelData &&
+            alertLabelData.pingInfo &&
+            alertLabelData.pingInfo.rtt
+              ? alertLabelData.pingInfo.rtt + "ms"
+              : ""
+          }}</span>
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.dc')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name:'--'}}</div>
+        <div class="alert-label-title">{{ $t("overall.dc") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.dc && alertLabelData.dc.name
+              ? alertLabelData.dc.name
+              : "--"
+          }}
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.cabinet')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</div>
+        <div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData &&
+            alertLabelData.cabinet &&
+            alertLabelData.cabinet.name
+              ? alertLabelData.cabinet.name
+              : "--"
+          }}
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.brand')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
+        <div class="alert-label-title">{{ $t("overall.brand") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.brand && alertLabelData.brand.name
+              ? alertLabelData.brand.name
+              : "--"
+          }}
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.model')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
+        <div class="alert-label-title">{{ $t("overall.model") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.model && alertLabelData.model.name
+              ? alertLabelData.model.name
+              : "--"
+          }}
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
         <div class="alert-label-value" v-if="alertLabelData">
-          <i :class="alertLabelData.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">{{alertLabelData.alertNum}}</div>
+          <i
+            :class="alertLabelData.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">{{ alertLabelData.alertNum }}</div>
             </div>
           </div>
           <alertDaysInfo
@@ -66,44 +160,91 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('asset.endpoint')}}</div>
+        <div class="alert-label-title">{{ $t("asset.endpoint") }}</div>
         <div class="alert-label-value">
           <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
+          <span>{{
+            alertLabelData && alertLabelData.endpointNum
+              ? alertLabelData.endpointNum
+              : 0
+          }}</span>
+        </div>
       </div>
     </div>
 
-    <div class="alert-label-info" v-if="type==='module'" v-my-loading="loading">
+    <div
+      class="alert-label-info"
+      v-if="type === 'module'"
+      v-my-loading="loading"
+    >
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.project')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('asset.endpoint')}}</div>
         <div class="alert-label-value">
-          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
+          {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+        </div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+      <div class="alert-label-box name-labe">
+        <div class="alert-label-title">Name</div>
         <div class="alert-label-value">
-          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
-          <span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+          {{ alertLabelData && alertLabelData.Name ? alertLabelData.Name : "--" }}
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-title">{{ $t("overall.project") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData &&
+            alertLabelData.project &&
+            alertLabelData.project.name
+              ? alertLabelData.project.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("asset.endpoint") }}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.endpointNum
+              ? alertLabelData.endpointNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.assetNum
+              ? alertLabelData.assetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
         <div class="alert-label-value" v-if="alertLabelData">
-          <i :class="alertLabelData.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">{{alertLabelData.alertNum}}</div>
+          <i
+            :class="alertLabelData.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">{{ alertLabelData.alertNum }}</div>
             </div>
           </div>
           <alertDaysInfo
@@ -113,45 +254,92 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.remark')}}</div>
-        <div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
+        <div class="alert-label-title">{{ $t("overall.remark") }}</div>
+        <div class="alert-label-value alert-label-remark">
+          {{
+            alertLabelData && alertLabelData.remark
+              ? alertLabelData.remark
+              : "--"
+          }}
+        </div>
       </div>
     </div>
 
-    <div class="alert-label-info" v-if="type==='project'" v-my-loading="loading">
+    <div
+      class="alert-label-info"
+      v-if="type === 'project'"
+      v-my-loading="loading"
+    >
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+       <div class="alert-label-box name-labe">
+        <div class="alert-label-title">Name</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.module')}}</div>
+        <div class="alert-label-title">{{ $t("overall.module") }}</div>
         <div class="alert-label-value">
-          <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
-          <span>{{alertLabelData && alertLabelData.moduleNum  ? alertLabelData.moduleNum : '--'}}</span>
+          <i
+            style="cursor: pointer"
+            class="nz-icon nz-icon-overview-module monitorColor"
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.moduleNum
+              ? alertLabelData.moduleNum
+              : "--"
+          }}</span>
         </div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Endpoint</div>
         <div class="alert-label-value">
           <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.asset')}}</div>
-        <div class="alert-label-value">
-          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>
-          <span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+          <span>{{
+            alertLabelData && alertLabelData.endpointNum
+              ? alertLabelData.endpointNum
+              : 0
+          }}</span>
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          />
+          <span>{{
+            alertLabelData && alertLabelData.assetNum
+              ? alertLabelData.assetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
         <div class="alert-label-value" v-if="alertLabelData">
-          <i :class="alertLabelData.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">{{alertLabelData.alertNum}}</div>
+          <i
+            :class="alertLabelData.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">{{ alertLabelData.alertNum }}</div>
             </div>
           </div>
           <alertDaysInfo
@@ -161,43 +349,96 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.remark')}}</div>
-        <div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
+        <div class="alert-label-title">{{ $t("overall.remark") }}</div>
+        <div class="alert-label-value alert-label-remark">
+          {{
+            alertLabelData && alertLabelData.remark
+              ? alertLabelData.remark
+              : "--"
+          }}
+        </div>
       </div>
     </div>
 
-    <div class="alert-label-info" v-if="type==='endpoint'" v-my-loading="loading">
+    <div
+      class="alert-label-info"
+      v-if="type === 'endpoint'"
+      v-my-loading="loading"
+    >
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.project')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.module')}}</div>
         <div class="alert-label-value">
-          <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
-          <span>{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</span>
+          {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box name-labe">
+        <div class="alert-label-title">Name</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+        <div class="alert-label-title">{{ $t("overall.project") }}</div>
         <div class="alert-label-value">
-          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.asset.name ? alertLabelData.asset.name : '--'}}</span>
+          {{
+            alertLabelData &&
+            alertLabelData.project &&
+            alertLabelData.project.name
+              ? alertLabelData.project.name
+              : "--"
+          }}
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-title">{{ $t("overall.module") }}</div>
+        <div class="alert-label-value">
+          <i
+            style="cursor: pointer"
+            class="nz-icon nz-icon-overview-module monitorColor"
+          />&nbsp;
+          <span>{{
+            alertLabelData &&
+            alertLabelData.module &&
+            alertLabelData.module.name
+              ? alertLabelData.module.name
+              : "--"
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          ></i
+          >&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.asset.name
+              ? alertLabelData.asset.name
+              : "--"
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
         <div class="alert-label-value" v-if="alertLabelData">
-          <i :class="alertLabelData.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">{{alertLabelData.alertNum}}</div>
+          <i
+            :class="alertLabelData.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">{{ alertLabelData.alertNum }}</div>
             </div>
           </div>
           <alertDaysInfo
@@ -207,14 +448,23 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.state')}}</div>
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
         <div class="alert-label-value">
-           <span style="width: auto">
-            <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
-            <span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
+          <span style="width: auto">
+            <span class="endpoint-cell-left"
+              ><i class="nz-icon nz-icon-Metrics active" />
+              {{ $t("project.endpoint.metrics") }}
+            </span>
+            <span
+              v-if="alertLabelData && alertLabelData.configs[0].state === 0"
+            >
               <span class="active-icon red-bg inline-block"></span>
             </span>
-            <span v-else-if="alertLabelData && alertLabelData.configs[0].state === 1">
+            <span
+              v-else-if="
+                alertLabelData && alertLabelData.configs[0].state === 1
+              "
+            >
               <span class="active-icon green-bg inline-block"></span>
             </span>
             <span v-else-if="alertLabelData && alertLabelData.configs[0].state">
@@ -222,11 +472,20 @@
             </span>
           </span>
           <span style="width: auto">
-            <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
-            <span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
+            <span class="endpoint-cell-left" style="margin-left: 10px"
+              ><i class="nz-icon nz-icon-logs active" />
+              {{ $t("project.endpoint.logs") }}
+            </span>
+            <span
+              v-if="alertLabelData && alertLabelData.configs[1].state === 0"
+            >
               <span class="active-icon red-bg inline-block"></span>
             </span>
-            <span v-else-if="alertLabelData && alertLabelData.configs[1].state === 1">
+            <span
+              v-else-if="
+                alertLabelData && alertLabelData.configs[1].state === 1
+              "
+            >
               <span class="active-icon green-bg inline-block"></span>
             </span>
             <span v-else-if="alertLabelData && alertLabelData.configs[1].state">
@@ -237,37 +496,81 @@
       </div>
     </div>
 
-    <div class="alert-label-info" v-if="type==='dc'" v-my-loading="loading">
+    <div class="alert-label-info" v-if="type === 'dc'" v-my-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.location')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.cabinet')}}</div>
         <div class="alert-label-value">
-          <i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinetNum> 0 ? 'color23BF9A' : 'colorEF7458'"/>&nbsp;
-          <span>{{alertLabelData && alertLabelData.cabinetNum ? alertLabelData.cabinetNum : 0}}</span></div>
+          {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+        </div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+       <div class="alert-label-box name-labe">
+        <div class="alert-label-title">Name</div>
         <div class="alert-label-value">
-          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
-          <span>{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+          {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-title">{{ $t("overall.location") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.location && alertLabelData.location
+              ? alertLabelData.location
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
+        <div class="alert-label-value">
+          <i
+            v-if="alertLabelData"
+            class="nz-icon nz-icon-cabinet monitorColor"
+            :class="
+              alertLabelData && alertLabelData.cabinetNum > 0
+                ? 'color23BF9A'
+                : 'colorEF7458'
+            "
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.cabinetNum
+              ? alertLabelData.cabinetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum
+              ? alertLabelData.assetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
         <div class="alert-label-value" v-if="alertLabelData">
-          <i :class="alertLabelData.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">{{alertLabelData.alertNum}}</div>
+          <i
+            :class="alertLabelData.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">{{ alertLabelData.alertNum }}</div>
             </div>
           </div>
           <alertDaysInfo
@@ -277,23 +580,33 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.state')}}</div>
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
         <div class="alert-label-value" style="margin-left: 3px">
-          <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'OFF'}" class="active-icon"></div>
-          <span v-if="alertLabelData && alertLabelData.state === 'ON'">{{ $t('overall.enabled') }}</span>
-          <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
+          <div
+            v-if="alertLabelData"
+            :class="{
+              'green-bg': alertLabelData && alertLabelData.state === 'ON',
+              'red-bg': alertLabelData && alertLabelData.state === 'OFF',
+            }"
+            class="active-icon"
+          ></div>
+          <span v-if="alertLabelData && alertLabelData.state === 'ON'">{{
+            $t("overall.enabled")
+          }}</span>
+          <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{
+            $t("overall.disabled")
+          }}</span>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
-import trendMixin from './trendMixins'
+import trendMixin from "./trendMixins";
 
 export default {
-  name: 'alertLabel',
+  name: "alertLabel",
   mixins: [trendMixin],
   props: {
     id: {},
@@ -301,240 +614,257 @@ export default {
     // labelLoading:{},
     that: {},
     detailList: Boolean,
-    alertTableDialog: Boolean
+    alertTableDialog: Boolean,
   },
-  data () {
+  data() {
     return {
       alertLabelData: null,
       loading: true,
       heightList: 0,
       boxWidth: 0,
       severityDataWeight: this.$store.getters.severityDataWeight,
-      alertColor: '#23bf9a'
-    }
+      alertColor: "#23bf9a",
+    };
   },
   watch: {
     id: {
       immediate: true,
       deep: true,
-      handler (n) {
-        this.init()
-      }
+      handler(n) {
+        this.init();
+      },
     },
     that: {
       immediate: true,
       deep: true,
-      handler (n) {
-      }
+      handler(n) {},
     },
     LRTriangle: {
       immediate: true,
       deep: true,
-      handler (n) {
-
-      }
-    }
+      handler(n) {},
+    },
   },
   computed: {
-    calcPosition () {
+    calcPosition() {
       return function (position) {
-        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
-        const clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth
-        let leftOffSetView = 0
-        let leftOffSet = this.detailList ? -80 : 10
-        let topOffSet = this.detailList ? 60 : 22
-        let topOffSetView = 0
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight;
+        const clientWidth =
+          document.body.clientWidth < document.documentElement.clientWidth
+            ? document.body.clientWidth
+            : document.documentElement.clientWidth;
+        let leftOffSetView = 0;
+        let leftOffSet = this.detailList ? -80 : 10;
+        let topOffSet = this.detailList ? 60 : 22;
+        let topOffSetView = 0;
         let labelPosition = {
           top: 0,
           left: 0,
-          right: 0
-        }
+          right: 0,
+        };
         if (this.alertTableDialog) {
-          let dialog = document.querySelector('#dialog-alert-massage .el-dialog')
+          let dialog = document.querySelector(
+            "#dialog-alert-massage .el-dialog"
+          );
           if (!dialog) {
-            dialog = document.querySelector('#viewGraphDialog .el-dialog')
+            dialog = document.querySelector("#viewGraphDialog .el-dialog");
           }
-          const dialogHeight = dialog.getBoundingClientRect()
-          leftOffSet = leftOffSet - dialogHeight.x
-          leftOffSetView = dialogHeight.x
-          topOffSet = topOffSet - dialogHeight.y
-          topOffSetView = topOffSet
+          const dialogHeight = dialog.getBoundingClientRect();
+          leftOffSet = leftOffSet - dialogHeight.x;
+          leftOffSetView = dialogHeight.x;
+          topOffSet = topOffSet - dialogHeight.y;
+          topOffSetView = topOffSet;
         }
         if (position.top > clientHeight / 2) {
           labelPosition = {
             left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top - this.heightList - topOffSetView}px`
-          }
+            top: `${position.top - this.heightList - topOffSetView}px`,
+          };
         } else {
           labelPosition = {
             left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top + topOffSet}px`
-          }
+            top: `${position.top + topOffSet}px`,
+          };
         }
         if (position.left > clientWidth / 2) {
-          delete labelPosition.left
+          delete labelPosition.left;
 
-          labelPosition.right = (clientWidth - position.left - leftOffSetView) + 'px'
+          labelPosition.right =
+            clientWidth - position.left - leftOffSetView + "px";
         }
-        return labelPosition
-      }
+        return labelPosition;
+      };
     },
-    calcHeight () {
-      const self = this
+    calcHeight() {
+      const self = this;
       return function (position) {
-        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
-        const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight;
+        const elHeight =
+          self.type === "asset" ? 318 : self.type === "project" ? 70 : 70;
         if (position.top + elHeight > clientHeight) {
-          return 'alert-labelUp'
+          return "alert-labelUp";
         } else {
-          return 'alert-label'
+          return "alert-label";
         }
-      }
-    }
+      };
+    },
   },
   methods: {
-    init () {
-      this.loading = true
-      if (this.type === 'asset') {
-        this.$get('asset/asset/' + this.id).then((res) => {
-          if (res.msg === 'success') {
-            this.loading = false
-            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert)
+    init() {
+      this.loading = true;
+      if (this.type === "asset") {
+        this.$get("asset/asset/" + this.id).then((res) => {
+          if (res.msg === "success") {
+            this.loading = false;
+            this.alertLabelData = res.data;
+            this.alertColor = this.returnColor(res.data.alert);
           } else {
-            this.$message.error(res.msg)
+            this.$message.error(res.msg);
           }
-        })
+        });
       }
-      if (this.type === 'project') {
-        this.$get('monitor/project/' + this.id).then((res) => {
-          if (res.msg === 'success') {
-            this.loading = false
-            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert)
+      if (this.type === "project") {
+        this.$get("monitor/project/" + this.id).then((res) => {
+          if (res.msg === "success") {
+            this.loading = false;
+            this.alertLabelData = res.data;
+            this.alertColor = this.returnColor(res.data.alert);
           } else {
-            this.$message.error(res.msg)
+            this.$message.error(res.msg);
           }
-        })
+        });
       }
-      if (this.type === 'module') {
-        this.$get('monitor/module/' + this.id).then((res) => {
-          if (res.msg === 'success') {
-            this.loading = false
-            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert)
+      if (this.type === "module") {
+        this.$get("monitor/module/" + this.id).then((res) => {
+          if (res.msg === "success") {
+            this.loading = false;
+            this.alertLabelData = res.data;
+            this.alertColor = this.returnColor(res.data.alert);
           } else {
-            this.$message.error(res.msg)
+            this.$message.error(res.msg);
           }
-        })
+        });
       }
-      if (this.type === 'endpoint') {
-        this.$get('monitor/endpoint/' + this.id).then((res) => {
-          if (res.msg === 'success') {
-            this.loading = false
-            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert)
+      if (this.type === "endpoint") {
+        this.$get("monitor/endpoint/" + this.id).then((res) => {
+          if (res.msg === "success") {
+            this.loading = false;
+            this.alertLabelData = res.data;
+            this.alertColor = this.returnColor(res.data.alert);
           } else {
-            this.$message.error(res.msg)
+            this.$message.error(res.msg);
           }
-        })
+        });
       }
-      if (this.type === 'dc') {
-        this.$get('dc/' + this.id).then((res) => {
-          if (res.msg === 'success') {
-            this.loading = false
-            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert)
+      if (this.type === "dc") {
+        this.$get("dc/" + this.id).then((res) => {
+          if (res.msg === "success") {
+            this.loading = false;
+            this.alertLabelData = res.data;
+            this.alertColor = this.returnColor(res.data.alert);
           } else {
-            this.$message.error(res.msg)
+            this.$message.error(res.msg);
           }
-        })
+        });
       }
-      const weekDays = this.getWeeksTime()
+      const weekDays = this.getWeeksTime();
       if (this.trendTimer) {
-        clearTimeout(this.trendTimer)
-        this.trendTimer = null
+        clearTimeout(this.trendTimer);
+        this.trendTimer = null;
       }
       this.trendTimer = setTimeout(() => {
-        this.trendLoading = true
+        this.trendLoading = true;
         const params = {
-          type: 'total',
-          dimension: 'priority',
-          step: 'd'
-        }
-        params[this.type + 'Id'] = this.id
-        this.$get('/stat/alertMessage/trend', params).then((res) => {
+          type: "total",
+          dimension: "priority",
+          step: "d",
+        };
+        params[this.type + "Id"] = this.id;
+        this.$get("/stat/alertMessage/trend", params).then((res) => {
           if (!res.data) {
-            return
+            return;
           }
-          const alertDaysData = res.data.result ? res.data.result[0].values : []
-          const newWeekDays = JSON.parse(JSON.stringify(weekDays))
-          alertDaysData.forEach(item => {
-            item.values.forEach(time => {
-              const findItem = newWeekDays.find(days => days.time == time[0])
+          const alertDaysData = res.data.result
+            ? res.data.result[0].values
+            : [];
+          const newWeekDays = JSON.parse(JSON.stringify(weekDays));
+          alertDaysData.forEach((item) => {
+            item.values.forEach((time) => {
+              const findItem = newWeekDays.find((days) => days.time == time[0]);
               if (findItem) {
-                findItem[item.metric.priority] = time[1]
+                findItem[item.metric.priority] = time[1];
               }
-            })
-          })
+            });
+          });
           setTimeout(() => {
-            this.alertDaysData = newWeekDays
-            this.trendLoading = false
-          })
-        })
-      })
+            this.alertDaysData = newWeekDays;
+            this.trendLoading = false;
+          });
+        });
+      });
     },
-    alertActiveStr () {
-      return this.$t('overall.active')
+    alertActiveStr() {
+      return this.$t("overall.active");
     },
-    alertStateStr (num) {
+    alertStateStr(num) {
       if (num == 1) {
-        return this.$t('asset.inStock')
+        return this.$t("asset.inStock");
       } else {
-        return this.$t('asset.notInStock')
+        return this.$t("asset.notInStock");
       }
     },
-    selectIcon (type) {
+    selectIcon(type) {
       switch (type) {
-        case 'asset' : return 'nz-icon-overview-project'
-        case 'dc' : return 'nz-icon-Datacenter2'
-        case 'project' : return 'nz-icon-project'
-        case 'module' : return 'nz-icon-overview-module'
-        case 'endpoint' : return 'nz-icon-overview-endpoint'
-        case 'alertrule' : return 'nz-icon-Alertrule'
+        case "asset":
+          return "nz-icon-overview-project";
+        case "dc":
+          return "nz-icon-Datacenter2";
+        case "project":
+          return "nz-icon-project";
+        case "module":
+          return "nz-icon-overview-module";
+        case "endpoint":
+          return "nz-icon-overview-endpoint";
+        case "alertrule":
+          return "nz-icon-Alertrule";
       }
-      return 'nz-icon-module5'
+      return "nz-icon-module5";
     },
-    returnColor (obj) {
-      let color = ''
+    returnColor(obj) {
+      let color = "";
       if (!obj) {
-        return '#23bf9a'
+        return "#23bf9a";
       } else {
-        this.severityDataWeight.forEach(severity => {
-          const num = obj.find(alert => alert.priority === severity.name)
+        this.severityDataWeight.forEach((severity) => {
+          const num = obj.find((alert) => alert.priority === severity.name);
           if (num && !color && num.num > 0) {
-            color = severity.color
+            color = severity.color;
           }
-        })
+        });
         if (!color) {
-          color = '#23bf9a'
+          color = "#23bf9a";
         }
-        return color
+        return color;
       }
-    }
+    },
   },
-  mounted () {
+  mounted() {
     if (this.$refs.alertLabels) {
-      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
-      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
+      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height;
+      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width;
     } else {
-      this.heightList = 0
-      this.boxWidth = 0
+      this.heightList = 0;
+      this.boxWidth = 0;
     }
   },
-  beforeDestroy () {
-
-  }
-}
-
+  beforeDestroy() {},
+};
 </script>
+<style>
+</style>
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
index ca8094728..3f85f7652 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
@@ -8,12 +8,14 @@
         <div v-else-if="(activeName === item.key) && infoData[item.key]" class="no-position-alert-label">
 <!--          <searchItemInfo :obj="findData(item.key)" :severityData="severityData" :fa-loading="false"></searchItemInfo>-->
           <alertLabel
+            class="alert"
             v-if="item.key !=='alertRule'"
             :id="infoData[item.key].id"
             :that="findData2(item.key)"
             :alertTableDialog="true"
             :type="item.key"/>
           <alertRuleInfo
+            class="alert"
             v-else
             :id="infoData[item.key].id"
             :severity-data="severityData"
@@ -152,5 +154,7 @@ export default {
 </script>
 
 <style scoped>
-
+.alert .name-labe{
+  display: block;
+}
 </style>
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
index 1fb84c7d3..93ed04ce1 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%; width: 100%">
+  <div style="height: 100%; width: 100%" id="alert">
     <div class="time-line-header">
       <span>{{ $t("alert.relatedAlerts") }}</span>
       <div class="scope-icon-box">
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 8e3657339..0aa6aa6b5 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -13,6 +13,10 @@
         <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">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.name')}}</div>-->
 <!--        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
diff --git a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
index a040983da..1a7387025 100644
--- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
@@ -239,8 +239,8 @@ export default {
         {
           label: this.$t("alert.alert"),
           prop: "alertNum",
-          show: true,
-          minWidth: 120,
+          show: false,
+          width: 120,
           sortable: "custom",
         },
         {
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 6852296f8..3c5756ab9 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -262,7 +262,7 @@ export default {
           label: this.$t('project.endpoint.alerts'),
           prop: 'alerts',
           show: true,
-          minWidth: 180,
+          Width: 120,
           sortable: 'custom'
         },
         {