From 5a831004f5ef5f850d33d5e8549f7b08f3743109 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 26 Oct 2021 17:47:49 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1080=20style:=20=E9=BC=A0=E6=A0=87=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel.vue    | 180 +++++++++++++-----
 .../components/common/alert/alertRuleInfo.vue |  84 +++++---
 .../list/alertRule/alertRuleDetail.vue        |  12 +-
 .../detailView/list/asset/assetDetail.vue     |   1 +
 .../common/detailView/list/dc/dcDetail.vue    |   1 +
 .../list/endpoint/endpointDetail.vue          |   1 +
 .../detailView/list/module/moduleDetail.vue   |   1 +
 .../src/components/common/language/cn.js      |   4 +
 .../src/components/common/language/en.js      |   4 +
 .../rightBox/asset/assetBatchEditBox.vue      |   2 +-
 .../common/table/alert/alertMessageTable.vue  |   4 +-
 .../common/table/alert/alertRuleTable.vue     |  24 ++-
 .../common/table/settings/agentTable.vue      |   2 +-
 .../common/table/settings/endpointTable.vue   |  16 +-
 .../table/settings/terminalLogTable.vue       |   2 +-
 15 files changed, 242 insertions(+), 96 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index eea7655d6..da02788fd 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" ref="alertLabels">
+  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels">
     <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
@@ -9,14 +9,14 @@
         <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">SN</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
-      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">ManageIp</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
       </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">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">State</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
@@ -29,30 +29,29 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Asset Type</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
+        <div class="alert-label-title">Data center</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">Brand</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
+        <div class="alert-label-title">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">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">PingLastReply</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? utcTimeToTimezoneStr(alertLabelData.pingInfo.lastUpdate) : '--'}}</div>
-      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Alert</div>
         <div class="alert-label-value">
-          <span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">DC</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div>
+        <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 : '--'}}</span></div>
       </div>
     </div>
 
@@ -69,6 +68,26 @@
         <div class="alert-label-title">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">Endpoint</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : '--'}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Asset</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.assetName > 0 ? 'colorEF7458' : 'color23BF9A'"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Alert</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+        </div>
+      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Description</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div>
@@ -107,13 +126,48 @@
         <div class="alert-label-title">Module</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
       </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Asset</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.assetName > 0 ? 'colorEF7458' : 'color23BF9A'"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+        </div>
+      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Alert</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+        </div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">State</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}}</div>
+        <div class="alert-label-value" style="margin-left: 3px">
+           <span style="width: auto">
+            <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+            <span v-if="alertLabelData && alertLabelData.configs[0].state === 0 || !alertLabelData.configs[0].state">
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <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">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+          <span style="width: auto">
+            <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
+            <span v-if="alertLabelData && alertLabelData.configs[1].state === 0 || !alertLabelData.configs[1].state">
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <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">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+        </div>
       </div>
     </div>
 
@@ -131,18 +185,30 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Asset num</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: '--'}}</div>
+        <div class="alert-label-title">Asset</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.assetName > 0 ? 'colorEF7458' : 'color23BF9A'"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: '--'}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Cabinet</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinet > 0 ? 'color23BF9A' : 'colorEF7458'"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</span></div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Alert</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</span></div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">State</div>
-        <div class="alert-label-value">
-          <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'oFF'}" class="active-icon"></div>
-          {{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}}
+        <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>
       </div>
     </div>
@@ -157,7 +223,8 @@ export default {
     id: {},
     type: {},
     // labelLoading:{},
-    that: {}
+    that: {},
+    detailList: Boolean
   },
   /* watch:{
       labelLoading: {
@@ -232,16 +299,20 @@ export default {
       const self = this
       return function (position) {
         const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const leftOffSetView = this.detailList ? -80 : 10
+        const topOffSetView = this.detailList ? 0 : 0
+        const leftOffSet = this.detailList ? -80 : 10
+        const topOffSet = this.detailList ? 70 : 0
         const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
         if (position.top + elHeight > clientHeight) {
           return {
-            left: `${position.left + position.width + 20}px`,
-            top: `${position.top - elHeight - 20}px`
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top - elHeight + topOffSet}px`
           }
         } else {
           return {
-            left: `${position.left + position.width + 20}px`,
-            top: `${position.top - 20}px`
+            left: `${position.left + position.width + leftOffSetView}px`,
+            top: `${position.top + topOffSetView}px`
           }
         }
       }
@@ -341,6 +412,12 @@ export default {
     border-radius: 4px;
     box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
   }
+  .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-labelUp {
     position: fixed;
     background-color: white;
@@ -357,9 +434,9 @@ export default {
     overflow: hidden;
     font-size: 0;
     line-height: 0;
-    border: 5px;
-    border-style: dashed solid dashed dashed;
-    border-color: transparent #fff transparent transparent;
+    /*border: 5px;*/
+    /*border-style: dashed solid dashed dashed;*/
+    /*border-color: transparent #fff transparent transparent;*/
     position: absolute;
     top: 20px;
     left: 0;
@@ -373,36 +450,46 @@ export default {
     overflow: hidden;
     font-size: 0;
     line-height: 0;
-    border: 5px;
-    border-style: dashed solid dashed dashed;
-    border-color: transparent #fff transparent transparent;
+    /*border: 5px;*/
+    /*border-style: dashed solid dashed dashed;*/
+    /*border-color: transparent #fff transparent transparent;*/
     position: absolute;
     bottom: 20px;
     left: 0;
     transform: translate(-100%, -50%);
   }
   .alert-label-info{
-    border: 1px solid #ebeef5;
+    /*border: 1px solid #ebeef5;*/
     border-bottom: none;
     font-size: 13px;
     line-height: 26px;
   }
   .alert-label-box{
     display: flex;
-    justify-content:space-between;
-    border-bottom: 1px solid #ebeef5;
+    flex-direction: row;
+    /*border-bottom: 1px solid #ebeef5;*/
   }
   .alert-label-title{
-    text-align: left;
-    width: 110px;
-    border-right: 1px solid #ebeef5;
-    color: #666;
+    font-family: Roboto-Regular;
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    line-height: 23px;
+    font-weight: 400;
+    min-width: 100px;
     padding: 0 3px 0 13px;
+    min-width: 100px;
   }
   .alert-label-value{
-    text-align: left;
-    width: 150px;
-    color: #1a1a1a;
+    text-align: right;
+    height: 26px;
+    ont-family: Roboto-Regular;
+    overflow: hidden;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    line-height: 23px;
+    font-weight: 400;
     padding: 0 3px 0 13px;
     word-break: break-all;
   }
@@ -421,4 +508,7 @@ export default {
   /deep/.active-icon{
     margin-top: 0;
   }
+  .colorFA901C{
+    color: #fa901c;
+  }
 </style>
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 7cabe5ae4..dd47873ef 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -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;
diff --git a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
index 47be8f76c..6296eb1bf 100644
--- a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
@@ -24,12 +24,12 @@
         :class="item.id === detailViewRightObj.id ? 'selected' : ''"
         @click="detailViewRightShow(item)">
         <el-popover
-          placement="right"
-          popper-class="alert-message-tooltip"
+          placement="right-start"
+          popper-class="alert-message-tooltip alert-rule-detail"
           style="position: relative"
           @show="alertMessageHover(item, true)"
           @hide="alertMessageHover(item, false)"
-          trigger="click">
+          trigger="hover">
           <alertRuleInfo v-if="item.loading" :id="item.id" :severity-data="severityData" :that="item" @showText="showText(item)"></alertRuleInfo>
           <div class="detail-row-info" slot="reference">
           <div class="asset-manageIp">
@@ -227,7 +227,11 @@ export default {
   }
 }
 </script>
-
+<style>
+.alert-rule-detail {
+  left: 440px !important;
+}
+</style>
 <style scoped lang="scss">
   .order-box{
     display: flex;
diff --git a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
index 7f4b1aca5..8627ba0f1 100644
--- a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
@@ -40,6 +40,7 @@
           v-if="item && item.loading"
           :id="item.id"
           :that="item"
+          :detail-list="true"
           :type="'asset'"
         ></alertLabel>
       </li>
diff --git a/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue b/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
index b4f1ad040..d63dcc8a7 100644
--- a/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
@@ -38,6 +38,7 @@
           v-if="item && item.loading"
           :id="item.id"
           :that="item"
+          :detail-list="true"
           :type="'dc'"
         ></alertLabel>
       </li>
diff --git a/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue b/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
index 94c3b6f26..57d577692 100644
--- a/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
@@ -38,6 +38,7 @@
           v-if="item && item.loading"
           :id="item.id"
           :that="item"
+          :detail-list="true"
           :type="'endpoint'"
         ></alertLabel>
       </li>
diff --git a/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue b/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
index 5686f4407..14416bb4d 100644
--- a/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
@@ -38,6 +38,7 @@
           v-if="item && item.loading"
           :id="item.id"
           :that="item"
+          :detail-list="true"
           :type="'module'"
         ></alertLabel>
       </li>
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 45d880f2a..a33db5e31 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1257,6 +1257,10 @@ const cn = {
     notify: '通知', // "通知方式"
     startAt: '开始时间',
     endAt: '结束时间',
+    name: '名称',
+    state: '状态',
+    type: '类型',
+    alertNum: '告警数量',
     list: {
       linked: '关联',
       type: '类别',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index ae4d249e8..7334dfaa1 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -1259,6 +1259,10 @@ const en = {
     startAt: 'Start time', // "开始时间"
     notify: 'Notification', // "通知方式"
     endAt: 'End time', // "结束时间"
+    name: 'Name',
+    state: 'State',
+    type: 'Type',
+    alertNum: 'Alert',
     list: {
       // 表头
       linked: 'Linked', // "关联"
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
index 0897f1c02..9a7ee73d0 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
@@ -18,7 +18,7 @@
           <!-- 第一级：Edit type = account -->
           <template v-if="editData.editType === assetConstants.editTypeData.account">
             <el-form-item :label="$t('asset.authProtocol')" prop="authProtocol">
-              <el-select v-model="editData.authProtocol" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
+              <el-select v-model="editData.authProtocol" class="right-box__select" :placeholder="$t('overall.select')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
                 <el-option v-for="type in assetConstants.authProtocolOptions" :key="type.value" :label="type.label" :value="type.value"/>
               </el-select>
             </el-form-item>
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index ebbd3df97..f7b5cddc6 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -38,12 +38,12 @@
         <template v-if="item.prop === 'alertRule'">
           <div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
             <el-popover
-              placement="right"
+              placement="right-start"
               popper-class="alert-message-tooltip"
               style="position: relative"
               @show="alertMessageHover(scope.row.alertRule, true)"
               @hide="alertMessageHover(scope.row.alertRule, false)"
-              trigger="click">
+              trigger="hover">
               <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo>
               <span slot="reference" class="data-column__span">{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
             </el-popover>
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index 41c266d93..ebe749582 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -63,14 +63,14 @@
         <template v-else-if="item.prop === 'state'">
           <el-popover
             placement="right"
-            trigger="click"
+            trigger="hover"
             :open-delay="300"
-            :width="225"
+            :width="215"
             popper-class="schedEnableTitle"
           >
             <div>
               <div class="margin-b-10">
-                {{$t('alert.config.schedEnable')}} :
+                {{$t('alert.config.schedEnable')}}
                 <el-switch
                   style="margin-left: 14px"
                   slot="reference"
@@ -82,12 +82,12 @@
                 />
               </div>
               <div>
-                <div class="margin-b-10">{{$t('alert.config.schedDays')}} :</div>
+                <div class="margin-b-10">{{$t('alert.config.schedDays')}}</div>
                 <div class="margin-b-5" style="display: flex">
-                  <i class="nz-icon nz-icon-a-rilizhou"/>
+                  <i class="nz-icon nz-icon-a-rilizhou" style="color: #FA901C;"/>
                   <span v-html="weekStr(scope.row.schedDays)"></span>
                 </div>
-                <div ><i class="nz-icon nz-icon-dingshishijian"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
+                <div ><i class="nz-icon nz-icon-dingshishijian" style="color: #FA901C;"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
               </div>
             </div>
 <!--            <el-switch-->
@@ -320,11 +320,17 @@ export default {
   padding: 2px 6px;
 }
 .schedEnableTitle{
-  padding: 15px 20px;
+  padding: 20px 15px;
+  margin-right: 0;
+  left: 1995px !important;
+  background: #FFFFFF;
+  border: 1px solid rgba(119,131,145,0.60);
+  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+  border-radius: 3px;
 }
 .schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian{
   font-size: 14px;
-  color: #FA901C;
+  color: #666666;
   margin-right: 12px;
 }
 .schedEnableTitle .week-item{
@@ -332,7 +338,7 @@ export default {
   height: 22px;
   line-height: 22px;
   opacity: 0.9;
-  background: #F7F7FA;
+  background: #F6F6FA;
   border-radius: 2px;
   display: inline-block;
   font-size: 12px;
diff --git a/nezha-fronted/src/components/common/table/settings/agentTable.vue b/nezha-fronted/src/components/common/table/settings/agentTable.vue
index 33c53b01c..4ee98f445 100644
--- a/nezha-fronted/src/components/common/table/settings/agentTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/agentTable.vue
@@ -41,7 +41,7 @@
               </span>
         <span v-else-if="item.prop === 'checkTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
         <span v-else-if="item.prop === 'status'">
-          <el-popover :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))" placement="right" trigger="click" width="200">
+          <el-popover :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))" placement="right" trigger="hover" width="200">
             <div slot="reference" style="width: 20px">
               <div :class="{'active-icon green-bg':scope.row[item.prop] == '1','active-icon red-bg':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
             </div>
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 01dec76bc..85a19b546 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -72,12 +72,6 @@
             :type="'module'"
           ></alertLabel>
         </template>
-        <template v-else-if="item.prop === 'alerts'">
-          <span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
-            <i class="nz-icon nz-icon-overview-alert" :class="scope.row.alertNum>0?'colorEF7458':'color23BF9A'"/>
-            {{scope.row.alertNum}}
-          </span>
-        </template>
         <template v-else-if="item.prop === 'asset'">
           <span
             class="pointer"
@@ -94,6 +88,12 @@
             :type="'asset'"
           ></alertLabel>
         </template>
+        <template v-else-if="item.prop === 'alerts'">
+          <span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
+            <i class="nz-icon nz-icon-overview-alert" :class="scope.row.alertNum>0?'colorEF7458':'color23BF9A'"/>
+            {{scope.row.alertNum}}
+          </span>
+        </template>
         <template v-else-if="item.prop === 'configs'">
 <!--          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">-->
 <!--            <span class="configs-endpoint metrics">{ Metrics }</span>-->
@@ -119,7 +119,7 @@
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'state'">
-          <el-popover placement="left" trigger="click" width="100" :popper-class="''" :disabled="scope.row.configs[0].state<2">
+          <el-popover placement="left" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[0].state<2">
             <div>
               <div v-html="suspendedStr(scope.row.configs[0].state)"></div>
             </div>
@@ -136,7 +136,7 @@
               </span>
             </span>
           </el-popover>
-          <el-popover placement="right" trigger="click" width="100" :popper-class="''" :disabled="scope.row.configs[1].state<2">
+          <el-popover placement="right" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[1].state<2">
             <div>
               <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
             </div>
diff --git a/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue b/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
index dc86f03e9..2ed9eb03c 100644
--- a/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
@@ -43,7 +43,7 @@
           <el-popover
             placement="right-start"
             width="200"
-            trigger="click"
+            trigger="hover"
             :content="scope.row.uuid">
             <span slot="reference">{{scope.row.uuid.substring(0, 8).toUpperCase()}}</span>
           </el-popover>