diff --git a/nezha-fronted/.gitignore b/nezha-fronted/.gitignore
index 541a820f6..ce84da4cf 100644
--- a/nezha-fronted/.gitignore
+++ b/nezha-fronted/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules/
 /dist/
+static/Tiles/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
diff --git a/nezha-fronted/src/assets/stylus/index.scss b/nezha-fronted/src/assets/stylus/index.scss
index 1a312e2a0..934d16ed0 100644
--- a/nezha-fronted/src/assets/stylus/index.scss
+++ b/nezha-fronted/src/assets/stylus/index.scss
@@ -43,6 +43,7 @@ $dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
 
 $danger-color: #DE5D3F; //全局警告色红色
 $success-color: #23BF9A; //全局正常色绿色
+$suspended-color: #71706D; //全局停用色灰色
 
 $left-menu-bgcolor:#FFF;
 
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index a92f07838..3af0e2484 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -888,6 +888,18 @@ li{
   padding:2px 5px;
   border-radius: 4px;
 }
+.nz-table td.suspended .cell>span {
+  background-color: $suspended-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
+.nz-table td.success .cell>span {
+  background-color: $success-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
 .nz-table th {
   padding: 0;
 }
@@ -1733,8 +1745,8 @@ li{
   //background-color:#50d050 !important;
   background-color:$success-color !important;
 }
-.grey {
-  background-color:lightGrey;
+.gray {
+  background-color: $suspended-color !important;
 }
 .dark-red {
   background-color: #aa0000 !important;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
index e678bc342..63ea1dbd9 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
@@ -103,7 +103,7 @@
           <span v-else-if="item.prop == 'state'" >
             <el-popover placement="right" trigger="hover" :content="getStateContent(scope.row)" popper-class="small-pop">
               <div slot="reference" style="width: 20px">
-                <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
+                <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0', 'active-icon gray':scope.row.state == '2'}"></div>
               </div>
             </el-popover>
           </span>
@@ -411,13 +411,13 @@
         return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
       },
       getStateContent:function(row){
-        if(row){
-          if(row.state == 1){
+        if (row) {
+          if (row.state == 1) {
             return 'up';
-            //return 'up'+'['+this.formatUpdateTime(row.lastUpdate)+']';
-          }else{
+          } else if (row.state == 0){
             return 'down';
-            //return 'down'+'['+this.getStateErrorMsg(row)+']';
+          } else if (row.state == 2) {
+            return 'suspended';
           }
         }
       },
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index a033644e6..3f847ab39 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -546,6 +546,7 @@ const cn = {
     endpointNum:'代表总的数量',
     active:"Alive",// "存活",
     total:"Total", // "总数",
+    down: "Down",
   },
   config: {
     config: "设置",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 8da3efcb8..db23db46b 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -548,6 +548,7 @@ const en = {
     },
     active:"Alive",// "存活",
     total:"Total",// "总数",
+    down: "Down"
   },
   config: {
     config: 'Settings',//"设置"
diff --git a/nezha-fronted/src/components/common/project/popData/Main.vue b/nezha-fronted/src/components/common/project/popData/Main.vue
index d20aca36a..3f60a0502 100644
--- a/nezha-fronted/src/components/common/project/popData/Main.vue
+++ b/nezha-fronted/src/components/common/project/popData/Main.vue
@@ -20,6 +20,7 @@
           <div class="legend-value">
             <div>{{moduleInfo.endpointStat.up}}</div>
             <div>{{moduleInfo.endpointStat.down}}</div>
+            <div>{{moduleInfo.endpointStat.suspended}}</div>
           </div>
           <div class="tooltip-chart" id="chart--endpoint"></div>
         </div>
@@ -116,10 +117,11 @@
           endpointOption.series[0].label.formatter = this.moduleInfo.endpointStat.down+this.moduleInfo.endpointStat.up + "";
           endpointOption.series[0].data = [
             {name: this.$t("dashboard.overview.asset.pingUp"), value: this.moduleInfo.endpointStat.up ? this.moduleInfo.endpointStat.up : 0},
-            {name: this.$t("dashboard.overview.asset.pingDown"), value: this.moduleInfo.endpointStat.down ? this.moduleInfo.endpointStat.down : 0}
+            {name: this.$t("dashboard.overview.asset.pingDown"), value: this.moduleInfo.endpointStat.down ? this.moduleInfo.endpointStat.down : 0},
+            {name: this.$t("asset.suspended"), value: this.moduleInfo.endpointStat.suspended ? this.moduleInfo.endpointStat.suspended : 0}
           ];
           endpointOption.title.show = false;
-          endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
+          endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown"), this.$t("asset.suspended")];
           assetOption.series[0].label.formatter = this.moduleInfo.assetStat.up+this.moduleInfo.assetStat.down + "";
           assetOption.series[0].data = [
             {name: this.$t("dashboard.overview.asset.pingUp"), value: this.moduleInfo.assetStat.up ? this.moduleInfo.assetStat.up : 0},
@@ -144,13 +146,13 @@
 
     .tooltip--row {
       position: relative;
-      height: 50px;
+      height: 70px;
       
       .legend-value {
         font-size: 12px;
         color: #333333;
         position: absolute;
-        left: 125px;
+        left: 150px;
         top: 6px;
       }
 
@@ -227,7 +229,7 @@
   .main-box{
     background: #FFFFFF;
     border: 1px solid #E7EAED;
-    width: 180px;
+    width: 190px;
     margin-bottom: 15px;
   }
   .main-box-title{
@@ -258,7 +260,7 @@
     margin-right: 5px;
     line-height: 1;
   }
-  .bg23BF9A{
+/*  .bg23BF9A{
     background: #23BF9A;
   }
   .bgEC7F66{
@@ -266,6 +268,6 @@
   }
   .bg3C92F1{
     background: #3C92F1;
-  }
+  }*/
 
 </style>
diff --git a/nezha-fronted/src/components/common/project/popData/endpointTable.vue b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
index 2954bcd84..4b45db2f9 100644
--- a/nezha-fronted/src/components/common/project/popData/endpointTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
@@ -20,10 +20,6 @@
           <div class="top-tool-search">
             <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="true"></search-input>
           </div>
-          <!--<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"-->
-          <!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
-          <!--<i class="nz-icon nz-icon-download1"></i>-->
-          <!--</button>-->
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -73,11 +69,12 @@
               <span v-else-if="item.prop == 'state'" >
               <el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
                 <div slot="reference" style="width: 20px">
-                  <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
+                  <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0','active-icon gray':scope.row.state == '2'}"></div>
                 </div>
                 <div >
                   <div v-if="scope.row.state == '1'">up</div>
-                  <div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
+                  <div v-else-if="scope.row.state == '0'">down:<br/>{{getStateErrorMsg(scope.row)}}</div>
+                  <div v-else-if="scope.row.state == '2'">suspended</div>
                 </div>
               </el-popover>
             </span>
@@ -98,8 +95,6 @@
 </template>
 
 <script>
-  import bus from '@/libs/bus';
-  import axios from 'axios';
   import nzAlertTag from '@/components/page/alert/nzAlertTag';
   import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
   import alertLabel from '@/components/common/alert/alertLabel'
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 49288c549..814633213 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -102,9 +102,9 @@
           <template v-if="item.prop=='Module'">
             <el-tooltip placement="right" effect="light">
               <div slot="content">
-                {{$t('asset.active')}} / {{$t('asset.total')}}
+                {{$t('asset.down')}} / {{$t('asset.total')}}
               </div>
-              <span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointNum-scope.row.endpointDownNum}}/{{scope.row.endpointNum}}</span>
+              <span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointDownNum}}/{{scope.row.endpointNum}}</span>
             </el-tooltip>
           </template>
           <template v-if="item.prop=='Alert'">
@@ -504,10 +504,14 @@
           }
         }
         if(e.column.label == 'Module' || e.column.label == this.$t("asset.tableTitle.modules")){
-          if (e.row.endpointDownNum > 0) {
-            return 'danger';
+          if (e.row.state == 3) {
+            return 'suspended';
           } else {
-            return 'success';
+            if (e.row.endpointDownNum > 0) {
+              return 'danger';
+            } else {
+              return 'success';
+            }
           }
         }
         return '';
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index 6194d86e9..5082fa6e3 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -418,7 +418,7 @@
       series: null,
     };
     const tooltipPieOption = {
-      color: ["#60C6B4", "#EEA694"],
+      color: ["#60C6B4", "#EEA694", "#71706D"],
       title: {
         show: true,
         textStyle: {
@@ -432,7 +432,7 @@
         data: [],
         show: true,
         left: 70,
-        top: 44,
+        top: 35,
         icon: "circle",
         itemHeight: 4,
         orient: "vertical",
@@ -459,15 +459,15 @@
       ]
     };
     const topoPieOption = {
-      color: ["#60C6B4", "#EEA694"],
+      color: ["#60C6B4", "#EEA694", "#71706D"],
       title: {
         show: false,
       },
       legend: {
         data: [],
         show: true,
-        left: 60,
-        top: 6,
+        left: 62,
+        top: 7,
         icon: "circle",
         itemHeight: 4,
         orient: "vertical",
@@ -481,8 +481,8 @@
         {
           type: "pie",
           animation: false,
-          center: [30, 25],
-          radius: [14, 22],
+          center: [30, 35],
+          radius: [18, 26],
           data: [],
           label: {
             show: true,
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index a7e70e353..e7f1499a6 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -373,7 +373,7 @@
   border-radius: 2px;
   padding: 10px 20px;
   box-sizing: border-box;
-  width: 390px;
+  width: 420px;
   height: 320px;
 }
 .content-bottom-box .tooltip{
@@ -409,16 +409,16 @@
       font-size: 12px;
       color: #333333;
       position: absolute;
-      left: 132px;
-      top: 45px;
+      left: 155px;
+      top: 35px;
     }
 
     .legend-value + .legend-value {
-      left: 310px;
+      left: 356px;
     }
 
     .tooltip-asset {
-      width: 240px;
+      width: 260px;
       height: 150px;
       border: 1px solid #DEDEDE;
       border-radius: 2px;
@@ -493,7 +493,7 @@
             border-radius: 50%;
             top: 50%;
             transform: translateY(-50%);
-            left: 0;
+            left: 15px;
           }
 
           .red-sign {
@@ -504,16 +504,20 @@
             background-color: $success-color;
           }
 
+          .gray-sign {
+            background-color: #010101;
+            opacity: 0.35;
+          }
           span {
             position: absolute;
-            left: 11px;
+            left: 26px;
           }
         }
       }
     }
 
     .tooltip-alert {
-      width: 96px;
+      width: 106px;
       height: 150px;
       box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47);
 
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index f3a8c9edc..72233c4ac 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -866,10 +866,11 @@
           endpointOption.series[0].label.formatter = data.endpointTotal + "";
           endpointOption.series[0].data = [
             {name: vm.$t("dashboard.overview.asset.pingUp"), value: data.endpointUp ? data.endpointUp : 0},
-            {name: vm.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0}
+            {name: vm.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0},
+            {name: vm.$t("asset.suspended"), value: data.endpointSuspended ? data.endpointSuspended : 0}
           ];
           endpointOption.title.text = vm.$t("project.endpoint.endpoint");
-          endpointOption.legend.data = [vm.$t("dashboard.overview.asset.pingUp"), vm.$t("dashboard.overview.asset.pingDown")];
+          endpointOption.legend.data = [vm.$t("dashboard.overview.asset.pingUp"), vm.$t("dashboard.overview.asset.pingDown"), vm.$t("asset.suspended")];
           prometheusOption.series[0].label.formatter = data.promTotal + "";
           prometheusOption.series[0].data = [
             {name: vm.$t("dashboard.overview.asset.pingUp"), value: data.promUp ? data.promUp : 0},
@@ -1293,7 +1294,7 @@
                   </div>
                   <div class="tooltip-asset--sub-row">
                     <div class="sub-row--label">${this.$t("asset.suspended")}</div>
-                    <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetSuspended}</span></div>
+                    <div class="sub-row--value"><div class="sign gray-sign"></div><span>${dcStat.assetSuspended}</span></div>
                   </div>
                 </div>
               </div>
@@ -1328,6 +1329,7 @@
             <div class="legend-value">
               <div>${dcStat.endpointUp}</div>
               <div>${dcStat.endpointDown}</div>
+              <div>${dcStat.endpointSuspended}</div>
             </div>
             <div class="legend-value">
               <div>${dcStat.promUp}</div>
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index f0056f9e3..7e80bb6e1 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -142,12 +142,12 @@
               <el-popover placement="right" width="50" trigger="hover"
                           :popper-class="scope.row.state == '1'?'small-pop':''">
                 <div slot="reference" style="width: 20px">
-                  <div
-                    :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
+                  <div :class="{'active-icon green':scope.row.state == '1', 'active-icon red':scope.row.state == '0', 'active-icon gray':scope.row.state == '2'}"></div>
                 </div>
                 <div>
                   <div v-if="scope.row.state == '1'">up</div>
-                  <div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
+                  <div v-else-if="scope.row.state == '0'">down:<br/>{{getStateErrorMsg(scope.row)}}</div>
+                  <div v-else-if="scope.row.state == '2'">suspended</div>
                 </div>
               </el-popover>
             </span>