diff --git a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
index cd3aa00e..427fe2c7 100644
--- a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
+++ b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
@@ -1,11 +1,11 @@
-.chart-one-situation-statistics{
+.cn-chart__one-situation-statistics{
     height: 100%;
-    .situation-statistics-main {
+    .one-situation-statistics__box {
         display: flex;
         align-items: center;
         margin-left: 33px;
         height: 100%;
-        .situation-statistics-main-left{
+        .box__progress{
             display: block;
             width: 76px;
             height: 76px;
@@ -13,7 +13,7 @@
                 font-size: 16px;
             }
         }
-        .situation-statistics-main-right{
+        .box__count{
             margin-left: 22px;
             :first-child{
                 font-size: 18px;
diff --git a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss b/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
index 185df283..602d5120 100644
--- a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
+++ b/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
@@ -1,18 +1,18 @@
 
-.chart-two-situation-statistics{
+.cn-chart__two-situation-statistics{
     padding-top: 22px;
-    .chart-two-situation-statistics-top {
+    .box__body {
         display: flex;
         align-items: center;
         margin-left: 33px;
         padding-top: 22px;
-        .chart-two-situation-statistics-main-left{
+        .body__progress{
             display: block;
             .el-progress__text span{
                 font-size: 16px;
             }
         }
-        .chart-two-situation-statistics-main-right{
+        .body__count{
             margin-left: 22px;
             :first-child{
                 font-size: 18px;
diff --git a/src/assets/css/components/views/charts/chartAlarmInfo.scss b/src/assets/css/components/views/charts/chartAlarmInfo.scss
index 1c722898..84e6003e 100644
--- a/src/assets/css/components/views/charts/chartAlarmInfo.scss
+++ b/src/assets/css/components/views/charts/chartAlarmInfo.scss
@@ -1,13 +1,13 @@
-.cn-chart-alarm-info {
+.cn-chart__alarm-info {
     width: 100%;
     height: 100%;
     position: relative;
 
-    .cn-chart-alarm-info-mainContent {
+    .alarm-info__box {
         height: calc(100% - 40px);
         width: 100%;
 
-        .cn-chart-alarm-content {
+        .box__body {
             display: flex;
             margin-left: 30px;
             margin-right: 30px;
@@ -16,16 +16,16 @@
             height: calc(100% / 9);
             border-bottom: 1px solid #E7EAED;
 
-            .cn-alarm-info-main {
+            .body__content {
                 display: flex;
 
-                .cn-alarm-info-main-left {
+                .content__icon-box {
                     position: relative;
                     display: flex;
                     justify-content: center;
                     align-items: center;
 
-                    .cn-chart-alarm-info-icon {
+                    .icon-box__icon {
                         width: 30px;
                         height: 30px;
                         border-radius: 50%;
@@ -42,10 +42,10 @@
                     }
                 }
 
-                .cn-alarm-info-textContent {
+                .content__text-box {
                     margin-left: 17px;
 
-                    .cn-alarm-info-main-title {
+                    .text-box__title {
                         font-size: 16px;
                         line-height: 19px;
                         font-family: Roboto-Regular;
@@ -57,7 +57,7 @@
                         overflow: hidden;
                     }
 
-                    .cn-alarm-info-bottom {
+                    .text-box__text {
                         font-size: 12px;
                         line-height: 14px;
                         text-align: center;
@@ -70,7 +70,7 @@
                             margin-bottom: 4px;
                         }
 
-                        .cn-alarm-info-bottom-middle {
+                        .text__time-box {
                             display: flex;
                             margin-left: 20px;
                             height: 14px;
@@ -82,7 +82,7 @@
                                 font-size: 12px;
                             }
 
-                            .cn-alarm-info-bottom-time {
+                            .time-box__start-time {
                                 font-family: PingFangSC-Regular;
                                 font-size: 12px;
                                 color: #999999;
@@ -91,7 +91,7 @@
                             }
                         }
 
-                        .cn-alarm-info-bottom-right {
+                        .text__duration-box {
                             height: 14px;
                             display: flex;
                             justify-content: center;
@@ -104,7 +104,7 @@
                                 font-size: 12px;
                             }
 
-                            .cn-alarm-info-bottom-time {
+                            .time-box__start-time {
                                 font-family: PingFangSC-Regular;
                                 font-size: 12px;
                                 color: #999999;
@@ -113,7 +113,7 @@
                             }
                         }
 
-                        .cn-alarm-info-bottom-type {
+                        .text__type {
                             width: auto;
                             font-family: Roboto-Regular;
                             line-height: 16px;
@@ -129,7 +129,7 @@
                             word-break: break-all;
                         }
 
-                        .cn-alarm-info-bottom-circle {
+                        .duration-box__circle {
                             display: inline-block;
                             width: 5px;
                             height: 5px;
@@ -148,7 +148,7 @@
         }
     }
 
-    .cn-chart-alarm-info-pagination {
+    .alarm-info__pagination {
         height: 40px !important;
         width: 100%;
     }
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 6ce29805..7025f7a2 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -208,7 +208,7 @@
         :query-params="queryParams"
       ></chart-echart-app-relate-domain>
 
-      <chart-one-Situation-Statistics
+      <chart-one-situation-statistics
         v-else-if="isSingleSupportStatistics"
         :chart-info="chartInfo"
         :chart-data="chartData"
@@ -216,9 +216,9 @@
         :time-filter="timeFilter"
         :entity="entity"
         @showLoading="showLoading"
-      ></chart-one-Situation-Statistics>
+      ></chart-one-situation-statistics>
 
-      <chart-two-Situation-Statistics
+      <chart-two-situation-statistics
         v-else-if="isTwoSupportStatistics"
         :chart-info="chartInfo"
         :chart-data="chartData"
@@ -226,7 +226,7 @@
         :query-params="queryParams"
         @showLoading="showLoading"
         :entity="entity"
-      ></chart-two-Situation-Statistics>
+      ></chart-two-situation-statistics>
 
       <chart-alarm-info
         v-else-if="isAlarmInfo"
diff --git a/src/views/charts/charts/ChartAlarmInfo.vue b/src/views/charts/charts/ChartAlarmInfo.vue
index 316b6340..07c39988 100644
--- a/src/views/charts/charts/ChartAlarmInfo.vue
+++ b/src/views/charts/charts/ChartAlarmInfo.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="cn-chart-alarm-info">
+  <div class="cn-chart__alarm-info">
     <div class="no-data" v-if="isNoData">No data</div>
     <template v-else>
-      <div class="cn-chart-alarm-info-mainContent">
+      <div class="alarm-info__box">
         <div
-          class="cn-chart-alarm-content"
+          class="box__body"
           v-for="(value, index) in chartData ? chartData : []"
           :key="index"
         >
-          <div class="cn-alarm-info-main">
-            <div class="cn-alarm-info-main-left">
+          <div class="body__content">
+            <div class="content__icon-box">
               <div
-                class="cn-chart-alarm-info-icon"
+                class="icon-box__icon"
                 :style="{
                   background: eventSeverityColor[value.eventSeverity],
                   opacity: 0.1,
@@ -25,8 +25,8 @@
                 }"
               ></i>
             </div>
-            <div class="cn-alarm-info-textContent">
-              <div class="cn-alarm-info-main-title">
+            <div class="content__text-box">
+              <div class="text-box__title">
                 <div v-if="value.entityType === 'domain'" :title="value.domain">
                   <span>{{ value.domain }}</span>
                 </div>
@@ -38,9 +38,9 @@
                 </div>
               </div>
 
-              <div class="cn-alarm-info-bottom">
+              <div class="text-box__text">
                 <div
-                  class="cn-alarm-info-bottom-type"
+                  class="text__type"
                   :style="{
                     color: eventSeverityColor[value.eventSeverity],
                     'border-color': eventSeverityColor[value.eventSeverity],
@@ -49,10 +49,10 @@
                 >
                   {{ value.eventType }}
                 </div>
-                <div class="cn-alarm-info-bottom-middle">
+                <div class="text__time-box">
                   <i class="cn-icon cn-icon-time2"></i>
 
-                  <div class="cn-alarm-info-bottom-time">
+                  <div class="time-box__start-time">
                     &nbsp; {{ $t(`dns.startTime`) }}:&nbsp;&nbsp;&nbsp;
                   </div>
                   <div>
@@ -67,14 +67,14 @@
                 </div>
                 &nbsp;&nbsp;&nbsp;
 
-                <div class="cn-alarm-info-bottom-right">
+                <div class="text__duration-box">
                   <i class="cn-icon cn-icon-time2"></i>
-                  <div class="cn-alarm-info-bottom-time">
+                  <div class="time-box__start-time">
                     &nbsp;{{ $t(`dns.duration`) }}:&nbsp;&nbsp;&nbsp;
                   </div>
 
                   <div
-                    class="cn-alarm-info-bottom-circle"
+                    class="duration-box__circle"
                     :style="{
                       background: eventSeverityColor[value.eventSeverity],
                     }"
@@ -95,7 +95,7 @@
       </div>
       <chart-table-pagination
         ref="tablePagination"
-        class="cn-chart-alarm-info-pagination"
+        class="alarm-info__pagination"
         :total="alarmInfoCount.result"
         :pageSizeForAlarm="pageSizeForAlarm"
         v-model:currentPage="pageNo"
diff --git a/src/views/charts/charts/ChartOneSituationStatistics.vue b/src/views/charts/charts/ChartOneSituationStatistics.vue
index 22b2e104..79b707bb 100644
--- a/src/views/charts/charts/ChartOneSituationStatistics.vue
+++ b/src/views/charts/charts/ChartOneSituationStatistics.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="chart-one-situation-statistics">
-    <div class="situation-statistics-main">
-      <div class="situation-statistics-main-left">
+  <div class="cn-chart__one-situation-statistics">
+    <div class="one-situation-statistics__box">
+      <div class="box__progress">
         <el-progress
           type="circle"
           :color="chartInfo.params.color"
@@ -9,9 +9,9 @@
           :percentage="$_.get(chartData, 'percent', '-') "
         />
       </div>
-      <div class="situation-statistics-main-right">
+      <div class="box__count">
         <div> {{ $_.get(chartData, 'count', '-') }} </div>
-        <div class="situation-statistic-main-right-font">{{ $t(`dns.numberOfNodes`) }}</div>
+        <div>{{ $t(`dns.numberOfNodes`) }}</div>
       </div>
     </div>
   </div>
diff --git a/src/views/charts/charts/ChartTwoSituationStatistics.vue b/src/views/charts/charts/ChartTwoSituationStatistics.vue
index 3b7b54c1..f1d9de6e 100644
--- a/src/views/charts/charts/ChartTwoSituationStatistics.vue
+++ b/src/views/charts/charts/ChartTwoSituationStatistics.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="chart-two-situation-statistics">
+  <div class="cn-chart__two-situation-statistics">
     <div
-      class="chart-two-situation-statistics-main"
+      class="two-situation-statistics__box"
       v-for="(value, key,index) in result ? result : []"
       :key="index"
     >
-      <div class="chart-two-situation-statistics-top">
-        <div class="chart-two-situation-statistics-main-left">
+      <div class="box__body">
+        <div class="body__progress">
           <el-progress
             type="circle"
             :color="chartInfo.params.color[index]"
@@ -14,7 +14,7 @@
             :percentage="value.percent ? value.percent : 0"
           />
         </div>
-        <div class="chart-two-situation-statistics-main-right">
+        <div class="body__count">
           <div>{{ value.count ? value.count : '-' }}</div>
           <div>{{ $t(`dns.numberOfNodesSupporting${key}Protocol`) }}</div>
         </div>