diff --git a/nezha-fronted/src/assets/stylus/index.scss b/nezha-fronted/src/assets/stylus/index.scss
index f6de58e77..b10348368 100644
--- a/nezha-fronted/src/assets/stylus/index.scss
+++ b/nezha-fronted/src/assets/stylus/index.scss
@@ -25,6 +25,9 @@ $content-left-text-color: #666; //左侧菜单默认字色
 
 $dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
 
+$danger-color: #DE5D3F; //全局警告色红色
+$success-color: #23BF9A; //全局正常色绿色
+
 $left-menu-bgcolor:#FFF;
 
 @import './main.scss';
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index f255da836..41bac9167 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -635,7 +635,7 @@ li{
   align-content: center;
 }
 .has-sub-popper {
-  color: red;
+  color: $danger-color;
 }
 .main-list {
   height: 100%;
@@ -785,13 +785,13 @@ li{
   background-color: $content-right-background-color;
 }
 .nz-table td.danger .cell>span {
-  background-color: #d64f40;
+  background-color: $danger-color;
   color: white;
   padding:2px 5px;
   border-radius: 4px;
 }
 .nz-table td.success .cell>span {
-  background-color: #50d050;
+  background-color: $success-color;
   color: white;
   padding:2px 5px;
   border-radius: 4px;
@@ -1622,11 +1622,11 @@ li{
 }
 .red {
   //background-color: #d64f40 !important;
-  background-color: #ec7f66 !important;
+  background-color: $danger-color !important;
 }
 .green {
   //background-color:#50d050 !important;
-  background-color:#23bf9a !important;
+  background-color:$success-color !important;
 }
 .grey {
   background-color:lightGrey;
diff --git a/nezha-fronted/src/components/charts/chartDataFormat.js b/nezha-fronted/src/components/charts/chartDataFormat.js
index 972ed6d0c..59fcc6ad8 100644
--- a/nezha-fronted/src/components/charts/chartDataFormat.js
+++ b/nezha-fronted/src/components/charts/chartDataFormat.js
@@ -19,12 +19,11 @@ function short(value,index,type=1,dot){
 
 }
 function percent01(value,index){
-  value=parseFloat((value).toPrecision(12));
+  value=parseFloat(new Number(value).toPrecision(12));
   return `${value} %`;
 }
 function percent02(value,index){
-  console.log(value);
-  value=parseFloat((value*100).toPrecision(12));
+  value=parseFloat((new Number(value)*100).toPrecision(12));
   return `${value} %`;
 }
 function localFormat(value,index){
@@ -328,10 +327,10 @@ function asciiCompute(num,ascii,units,dot=2){
     num = num / Math.pow(ascii,carry)
   }
   if(Number.isInteger(num)){
-    console.log(num +' '+units[carry],dot);
+    //console.log(num +' '+units[carry],dot);
     return num +' '+units[carry];
   }else{
-    console.log(num.toFixed(dot) +' '+units[carry],dot);
+    //console.log(num.toFixed(dot) +' '+units[carry],dot);
     return num.toFixed(dot) +' '+units[carry];
   }
 }
diff --git a/nezha-fronted/src/components/common/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
index 8f4e2463e..09ebf11af 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -51,7 +51,7 @@
         :minWidth="item.minWidth"
         :key="`col-${index}`"
         :label="item.label"
-        :show-overflow-tooltip="item.prop != 'labels'"
+        :show-overflow-tooltip="item.prop != 'labels' && item.prop != 'alertRule'"
         min-width="110px"
         :sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
         :prop="$tableSet.propTitle(item.prop,'alertMessage')"
@@ -59,10 +59,8 @@
       >
         <template slot-scope="scope" :column="item">
           <template v-if="item.prop == 'alertRule'">
-            <div class="too-long-split pointer"v-if="scope.row.alertRule.alertName" >
-              <span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">
-                <span>{{scope.row.alertRule.alertName}}</span>
-              </span>
+            <div v-if="scope.row.alertRule.alertName" >
+              <span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">{{scope.row.alertRule.alertName}}</span>
               <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
             </div>
             <template v-else>-</template>
@@ -127,12 +125,10 @@
             </el-tooltip>-->
 
           </template>
-          <div v-else-if="item.prop == 'state'">
-                <span class="">
-                  {{scope.row['state'] == 1 ? "Pending" : ""}}
-                  {{scope.row['state'] == 2 ? "Expired" : ""}}
-                </span>
-          </div>
+          <span v-else-if="item.prop == 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
+              {{scope.row['state'] == 1 ? "Pending" : ""}}
+              {{scope.row['state'] == 2 ? "Expired" : ""}}
+          </span>
           <div v-else-if="item.prop == 'current'" class="too-long-split pointer" @click="detail(scope.row)">
             <span v-if="!scope.row.current">-</span>
             <el-popover v-else placement="right" trigger="hover">
@@ -707,6 +703,12 @@
       labelsClassName(row) {
         if (row.column.label == this.$t("alert.list.labels")) {
           return "alert-message-list-labels";
+        } else if (row.column.label == this.$t("alert.list.state")) {
+          if (row.row.state == 1) {
+            return "danger";
+          } else if (row.row.state == 2) {
+            return "success";
+          }
         } else {
           return "";
         }
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 7216b926b..89e3d25a2 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -1,23 +1,25 @@
 <template>
-  <div class="alert-rule-info" :style="calcPosition(that.position)" v-loading="loading">
-    <div class="alert-rule-box">
-      <div class="alert-rule-title">ID</div>
-      <div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
-    </div>
-    <!--<div class="alert-rule-box">-->
+  <div class="alert-rule-tip" :style="calcPosition(that.position)" 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?alertRuleData.id:''}}</div>
+      </div>
+      <!--<div class="alert-rule-box">-->
       <!--<div class="alert-rule-title">ID</div>-->
       <!--<div class="alert-rule-value">{{alertRuleData.id}}</div>-->
-    <!--</div>-->
-    <div class="alert-rule-box">
-      <div class="alert-rule-title">Expression</div>
-      <div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
-    </div>
-    <div class="alert-rule-box">
-      <div class="alert-rule-title">Level</div>
-      <div class="alert-rule-value">
-        <span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'high'}).label}}</span>
-        <span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'medium'}).label}}</span>
-        <span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'low'}).label}}</span>
+      <!--</div>-->
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">Expression</div>
+        <div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">Level</div>
+        <div class="alert-rule-value">
+          <span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'high'}).label}}</span>
+          <span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'medium'}).label}}</span>
+          <span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'low'}).label}}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -91,7 +93,55 @@
 </script>
 
 <style scoped>
-  .alert-rule-info::after {
+  .alert-rule-tip {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-rule-tip::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    top: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .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;
+  }
+  .alert-rule-title{
+    text-align: left;
+    width: 90px;
+    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;
+  }
+/*  .alert-rule-info::after {
     content: '';
     display: block;
     width:0;
@@ -112,9 +162,14 @@
     border-bottom: none;
     font-size: 13px;
     line-height: 26px;
-    position: fixed;
+  }*/
+/*  .alert-rule-info{
+    border: 1px solid #ebeef5;
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+    display: flex;
     background-color: white;
-    z-index: 3000;
     padding: 10px;
     transform: translateY(-50%);
     overflow-wrap: break-word;
@@ -136,5 +191,5 @@
     text-align: left;
     color: #1a1a1a;
     padding: 0 3px 0 13px;
-  }
+  }*/
 </style>