diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 348545dc..5c1e6d4b 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -19,5 +19,12 @@
 @import './views/entityExplorer/entityList/row';
 @import 'views/entityExplorer/entityList/detail-overview';
 @import './views/charts/panel';
-@import 'views/charts/ChartIpOpenPortBar';
+@import 'views/charts/chartIpOpenPortBar';
+@import './views/charts/chartTable';
+@import './views/charts/chartSingleValue';
+@import './views/charts/chartCryptocurrencyEventList';
+@import './views/charts/chartAppBasicInfo';
+@import './views/charts/chartDomainDnsRecord';
+@import './views/charts/chartDomainWhois';
+
 //@import '../chart';
diff --git a/src/assets/css/components/views/charts/chartAppBasicInfo.scss b/src/assets/css/components/views/charts/chartAppBasicInfo.scss
new file mode 100644
index 00000000..36acb01a
--- /dev/null
+++ b/src/assets/css/components/views/charts/chartAppBasicInfo.scss
@@ -0,0 +1,110 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout>.vue-grid-item {
+      .cn-chart {
+        height: 100% !important;
+        .cn-chart__app-basic {
+          display: flex;
+          flex-direction: column;
+          .cn-chart__body {
+            flex: auto;
+            display: flex;
+            .el-descriptions {
+              padding-top: 30px;
+            }
+            &>.el-descriptions {
+              flex: 0 0 350px;
+              padding: 30px 36px;
+            }
+            .chart-location {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              padding: 0 20px 20px 0;
+            }
+            .el-descriptions__content {
+              color: #3976CB;
+            }
+            .cn-chart__body-single {
+              display: flex;
+              .cn-chart__body-single-table {
+                display: flex;
+                width: 250px;
+                align-items: center;
+              }
+              .single-value-icon__box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex: 0 0 40%;
+              }
+              .single-value__icon {
+                display: flex;
+                justify-content: center;
+                width: 72px;
+                height: 72px;
+                background-color: $--chart-single-value-icon-background-color;
+                border-radius: 50%;
+
+                i {
+                  display: flex;
+                  align-items: center;
+                  font-size: 28px;
+                  color: $--color-primary;
+                }
+              }
+              .single-value-color-g.single-value__icon {
+                background-color: limegreen;
+                i {
+                  color: green;
+                }
+              }
+              .single-value-color-y.single-value__icon {
+                background-color: yellow;
+                i {
+                  color: darkorange;
+                }
+              }
+              .single-value__content {
+                display: flex;
+                flex-direction: column;
+                max-width: 60%;
+                padding-left: 10px;
+
+                div:nth-of-type(1) {
+                  margin-bottom: 10px;
+                }
+
+                .content__data {
+                  padding-bottom: 7%;
+                  font-size: 24px;
+                  color: #333333;
+                  font-weight: bold;
+                }
+                .content__title {
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  font-size: 16px;
+                  color: #666666;
+                }
+                &.single-value__content--with-chart {
+                  .content__title {
+                    border-bottom: 1px solid $--content-right-background-color;
+                  }
+                }
+                .single-value__unit {
+                  font-weight: normal;
+                  padding-left: 10px;
+                  color: #666;
+                  font-size: 20px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss b/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
new file mode 100644
index 00000000..e7d344e1
--- /dev/null
+++ b/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
@@ -0,0 +1,74 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout>.vue-grid-item {
+      .cn-chart {
+        .cn-chart__table.eventList {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+          .cn-chart__body {
+            flex: auto;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            .el-descriptions {
+              padding-top: 30px;
+            }
+            &>.el-descriptions {
+              flex: 0 0 350px;
+              padding: 30px 36px;
+            }
+            .chart-location {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              padding: 0 20px 20px 0;
+            }
+            .el-descriptions__content {
+              color: #3976CB;
+            }
+            .crypto-eventList__record {
+              display: flex;
+              height: 100%;
+              width: 100%;
+              .record__table {
+                display: table;
+                height: 100%;
+                width: 100%;
+
+                .record__table-row {
+                  display: table-row;
+                  font-size: 14px;
+                  color: #333333;
+                }
+                .record__table-row.record__table-row--header {
+                  padding: 13px 30px 0;
+                  height: 40px;
+                  color: #6B717B;
+                }
+                .record__table-cell {
+                  display: table-cell;
+                  vertical-align: middle;
+                  padding: 15px 10px;
+                  .record_second{
+                    color:#7e8088;
+                    font-size:12px;
+                  }
+                  .circle-red {
+                    color: #EC7F66;
+                    font-size: 28px;
+                  }
+                }
+                .record__table-cell:first-of-type {
+                  padding-left:30px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/views/charts/chartDomainDnsRecord.scss b/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
new file mode 100644
index 00000000..ca99b284
--- /dev/null
+++ b/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
@@ -0,0 +1,38 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout>.vue-grid-item {
+      .cn-chart {
+        height: 100% !important;
+        cn-chart__dns-record {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+          .cn-chart__body {
+            flex: auto;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            .el-descriptions {
+              padding-top: 30px;
+            }
+            &>.el-descriptions {
+              flex: 0 0 350px;
+              padding: 30px 36px;
+            }
+            .chart-location {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              padding: 0 20px 20px 0;
+            }
+            .el-descriptions__content {
+              color: #3976CB;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/views/charts/chartDomainWhois.scss b/src/assets/css/components/views/charts/chartDomainWhois.scss
new file mode 100644
index 00000000..708438a4
--- /dev/null
+++ b/src/assets/css/components/views/charts/chartDomainWhois.scss
@@ -0,0 +1,13 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout>.vue-grid-item {
+      .cn-chart {
+        height: 100% !important;
+        .cn-chart__whois {
+          overflow: auto;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/views/charts/ChartIpOpenPortBar.scss b/src/assets/css/components/views/charts/chartIpOpenPortBar.scss
similarity index 100%
rename from src/assets/css/components/views/charts/ChartIpOpenPortBar.scss
rename to src/assets/css/components/views/charts/chartIpOpenPortBar.scss
diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss
new file mode 100644
index 00000000..401436ce
--- /dev/null
+++ b/src/assets/css/components/views/charts/chartSingleValue.scss
@@ -0,0 +1,223 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout>.vue-grid-item {
+      .cn-chart {
+        height: 100% !important;
+        .cn-chart__single-value {
+          &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
+            .single-value__icon {
+              width: 38px;
+              height: 38px;
+              i {
+                font-size: 15px;
+              }
+            }
+            .single-value__content {
+              .content__data {
+                font-size: 14px;
+              }
+              .content__title {
+                font-size: 12px;
+              }
+            }
+          }
+          &.cn-chart__single-value--icon-left {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            .single-value-icon__box {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              flex: 0 0 40%;
+            }
+            .single-value__icon {
+              display: flex;
+              justify-content: center;
+              width: 72px;
+              height: 72px;
+              background-color: $--chart-single-value-icon-background-color;
+              border-radius: 50%;
+              i {
+                display: flex;
+                align-items: center;
+                font-size: 28px;
+                color: $--color-primary;
+              }
+            }
+            .single-value__content {
+              display: flex;
+              flex-direction: column;
+              max-width: 60%;
+              padding-right: 10px;
+              .content__data {
+                padding-bottom: 7%;
+                font-size: 24px;
+                color: #333333;
+                font-weight: bold;
+              }
+              .content__title {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                font-size: 16px;
+                color: #666666;
+              }
+              &.single-value__content--with-chart {
+                .content__title {
+                  border-bottom: 1px solid $--content-right-background-color;
+                }
+              }
+              .single-value__unit {
+                font-weight: normal;
+                padding-left: 10px;
+                color: #666;
+                font-size: 20px;
+              }
+            }
+          }
+          &.cn-chart__single-value--icon-right {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: space-around;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            .single-value__icon {
+              background-color: $--chart-single-value-icon-background-color;
+              border-radius: 50%;
+              position: relative;
+              margin-right: 7.5%;
+              margin-bottom: 6%;
+              width: 56px;
+              height: 56px;
+              i {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%,-50%);
+                font-size: 24px;
+                color: $--color-primary;
+              }
+            }
+            .single-value__content {
+              display: flex;
+              height: 100%;
+              flex-direction: column;
+              .content__title {
+                display: flex;
+                align-items: center;
+                height: 50%;
+                font-size: 16px;
+                color: #666666;
+              }
+              .content__data {
+                display: flex;
+                padding-top: 5%;
+                height: 50%;
+                flex: auto;
+                font-size: 24px;
+                color: #333333;
+                font-weight: bold;
+              }
+            }
+          }
+          &.cn-chart__single-value--icon-right--color {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: space-around;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            .single-value__content {
+              display: flex;
+              height: 100%;
+              width: 100%;
+              flex-direction: row-reverse;
+              justify-content: space-between;
+              align-items: center;
+              .single-value-icon__box {
+                padding-right: 30px;
+                .single-value__icon {
+                  border-radius: 50%;
+                  position: relative;
+                  margin-right: 7.5%;
+                  margin-top: 30%;
+                  .cn-icon-svg {
+                    width: 50px;
+                    height: 50px;
+                    vertical-align: middle;
+                    fill: currentColor;
+                    overflow: hidden;
+                  }
+                  i {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%,-50%);
+                    font-size: 24px;
+                  }
+                }
+              }
+              .single-value__data{
+                display: flex;
+                height: 100%;
+                flex-direction: column;
+                padding-left: 20px;
+                .content__title {
+                  display: flex;
+                  align-items: end;
+                  height: 50%;
+                  font-size: 16px;
+                  color: #666666;
+                  padding-bottom: 5px;
+                }
+                .content__data {
+                  display: flex;
+                  padding-top: 5%;
+                  height: 50%;
+                  flex: auto;
+                  font-size: 24px;
+                  color: #333333;
+                  font-weight: bold;
+                }
+              }
+            }
+          }
+          &.cn-chart__single-value--chart {
+            display: flex;
+            padding: 13px 20px;
+            height: 100%;
+            width: 100%;
+            .single-value__content {
+              display: flex;
+              height: 100%;
+              width: 100%;
+              flex-direction: column;
+              .content__title {
+                display: flex;
+                align-items: center;
+                height: 30%;
+                font-size: 16px;
+                color: #666666;
+              }
+              .content__data {
+                display: flex;
+                align-items: center;
+                height: 25%;
+                font-size: 24px;
+                color: #333333;
+                font-weight: bold;
+              }
+              .content__chart {
+                flex: auto
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/views/charts/chartTable.scss b/src/assets/css/components/views/charts/chartTable.scss
new file mode 100644
index 00000000..d7d68894
--- /dev/null
+++ b/src/assets/css/components/views/charts/chartTable.scss
@@ -0,0 +1,81 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout>.vue-grid-item {
+      .cn-chart {
+        height: 100% !important;
+        .active-ip.cn-chart__table {
+          height: calc(100% - 47px) !important;
+        }
+        .cn-chart__table{
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          .cn-chart__body {
+            flex: auto;
+            overflow-y: auto;
+            height: 100%;
+            width: 100%;
+
+            .el-table {
+              padding: 0 10px;
+              .el-table__body-wrapper.is-scrolling-none {
+                height: 100%;
+                overflow-y: auto;
+              }
+
+              &:before {
+                height: 0;
+              }
+              thead {
+                color: #333;
+              }
+              th.is-leaf, td {
+                border-bottom: none;
+              }
+              th {
+                padding-bottom: 5px;
+              }
+              td {
+                padding: 4px 0;
+                color: #333;
+              }
+            }
+            .active-ip__icon {
+              overflow: hidden;
+              position: absolute;
+              top: 8px;
+              left: 6px;
+              display: flex;
+              justify-content: center;
+              justify-items: center;
+              align-items: center;
+              width: 23px;
+              height: 23px;
+              border-radius: 50%;
+              background: #e8fbf9;
+              border: 2px solid #e8fbf9;
+            }
+            .ip-green {
+              color: #23BF9A;
+            }
+            .active-ip__content {
+              position: absolute;
+              top: 7px;
+              left: 35px;
+              overflow: hidden;
+            }
+          }
+          .chart-table-pagination.el-pagination {
+            padding: 12px 0 9px 0;
+            text-align: center;
+
+            .el-pagination__jump {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss
index 29c690b2..2d7b7f3b 100644
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -1,13 +1,11 @@
 .cn-panel2 {
   position: relative;
-
   .panel__time {
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 1;
     display: flex;
-
     &>div {
       margin-left: 10px;
     }
@@ -22,7 +20,6 @@
         display: flex;
         position: relative;
         flex-direction: column;
-
         &.panel-chart--title-chart {
           border: none;
           background-color: transparent;
@@ -201,437 +198,11 @@
           border-radius: 2px;
           height: calc(100% - 47px);
           width: 100%;
-
           .chart-drawing {
             height: 100%;
             width: 100%;
           }
-          &>.cn-chart__single-value {
-            &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
-              .single-value__icon {
-                width: 38px;
-                height: 38px;
-
-                i {
-                  font-size: 15px;
-                }
-              }
-              .single-value__content {
-                .content__data {
-                  font-size: 14px;
-                }
-                .content__title {
-                  font-size: 12px;
-                }
-              }
-            }
-            &.cn-chart__single-value--icon-left {
-              display: flex;
-              align-items: center;
-              height: 100%;
-              width: 100%;
-
-              .single-value-icon__box {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 0 0 40%;
-              }
-
-              .single-value__icon {
-                display: flex;
-                justify-content: center;
-                width: 72px;
-                height: 72px;
-                background-color: $--chart-single-value-icon-background-color;
-                border-radius: 50%;
-
-                i {
-                  display: flex;
-                  align-items: center;
-                  font-size: 28px;
-                  color: $--color-primary;
-                }
-              }
-
-              .single-value__content {
-                display: flex;
-                flex-direction: column;
-                max-width: 60%;
-                padding-right: 10px;
-
-                .content__data {
-                  padding-bottom: 7%;
-                  font-size: 24px;
-                  color: #333333;
-                  font-weight: bold;
-                }
-                .content__title {
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-                  font-size: 16px;
-                  color: #666666;
-                }
-                &.single-value__content--with-chart {
-                  .content__title {
-                    border-bottom: 1px solid $--content-right-background-color;
-                  }
-                }
-                .single-value__unit {
-                  font-weight: normal;
-                  padding-left: 10px;
-                  color: #666;
-                  font-size: 20px;
-                }
-              }
-            }
-            &.cn-chart__single-value--icon-right {
-              display: flex;
-              flex-direction: row-reverse;
-              justify-content: space-around;
-              align-items: center;
-              height: 100%;
-              width: 100%;
-
-              .single-value__icon {
-                background-color: $--chart-single-value-icon-background-color;
-                border-radius: 50%;
-                position: relative;
-                margin-right: 7.5%;
-                margin-bottom: 6%;
-                width: 56px;
-                height: 56px;
-
-                i {
-                  position: absolute;
-                  top: 50%;
-                  left: 50%;
-                  transform: translate(-50%,-50%);
-                  font-size: 24px;
-                  color: $--color-primary;
-                }
-              }
-
-              .single-value__content {
-                display: flex;
-                height: 100%;
-                flex-direction: column;
-
-                .content__title {
-                  display: flex;
-                  align-items: center;
-                  height: 50%;
-                  font-size: 16px;
-                  color: #666666;
-                }
-                .content__data {
-                  display: flex;
-                  padding-top: 5%;
-                  height: 50%;
-                  flex: auto;
-                  font-size: 24px;
-                  color: #333333;
-                  font-weight: bold;
-                }
-              }
-            }
-            &.cn-chart__single-value--icon-right--color {
-              display: flex;
-              flex-direction: row-reverse;
-              justify-content: space-around;
-              align-items: center;
-              height: 100%;
-              width: 100%;
-
-              .single-value__content {
-                display: flex;
-                height: 100%;
-                width: 100%;
-                flex-direction: row-reverse;
-                justify-content: space-between;
-                align-items: center;
-
-                .single-value-icon__box {
-                  padding-right: 30px;
-                  .single-value__icon {
-                    border-radius: 50%;
-                    position: relative;
-                    margin-right: 7.5%;
-                    margin-top: 30%;
-
-                    .cn-icon-svg {
-                      width: 50px;
-                      height: 50px;
-                      vertical-align: middle;
-                      fill: currentColor;
-                      overflow: hidden;
-                    }
-
-                    i {
-                      position: absolute;
-                      top: 50%;
-                      left: 50%;
-                      transform: translate(-50%,-50%);
-                      font-size: 24px;
-                    }
-                  }
-                }
-
-                .single-value__data{
-                  display: flex;
-                  height: 100%;
-                  flex-direction: column;
-                  padding-left: 20px;
-
-                  .content__title {
-                    display: flex;
-                    align-items: end;
-                    height: 50%;
-                    font-size: 16px;
-                    color: #666666;
-                    padding-bottom: 5px;
-                  }
-                  .content__data {
-                    display: flex;
-                    padding-top: 5%;
-                    height: 50%;
-                    flex: auto;
-                    font-size: 24px;
-                    color: #333333;
-                    font-weight: bold;
-                  }
-                }
-
-              }
-            }
-            &.cn-chart__single-value--chart {
-              display: flex;
-              padding: 13px 20px;
-              height: 100%;
-              width: 100%;
-
-              .single-value__content {
-                display: flex;
-                height: 100%;
-                width: 100%;
-                flex-direction: column;
-
-                .content__title {
-                  display: flex;
-                  align-items: center;
-                  height: 30%;
-                  font-size: 16px;
-                  color: #666666;
-                }
-                .content__data {
-                  display: flex;
-                  align-items: center;
-                  height: 25%;
-                  font-size: 24px;
-                  color: #333333;
-                  font-weight: bold;
-                }
-                .content__chart {
-                  flex: auto
-                }
-              }
-            }
-          }
-          &>.cn-chart__whois {
-            overflow: auto;
-          }
-          &>.cn-chart__ip-basic {
-            display: flex;
-            .el-descriptions {
-              padding-top: 30px;
-            }
-            &>.el-descriptions {
-              flex: 0 0 350px;
-              padding: 30px 36px;
-            }
-            .chart-location {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              padding: 0 20px 20px 0;
-            }
-            .el-descriptions__content {
-              color: #3976CB;
-            }
-          }
-          &>.cn-chart__block {
-            .cn-chart {
-              border: 1px solid #E7EAED;
-            }
-            /* detail页面block下的五连图的标题样式改变 */
-            .cn-chart__group .cn-chart__echarts {
-              .cn-chart__header {
-                border-bottom: none !important;
-
-                .header__title {
-                  font-size: 14px !important;
-                  color: #3976CB !important;
-                }
-              }
-            }
-          }
-          &>.cn-chart__title {
-            display: flex;
-            align-items: center;
-            font-size: 20px;
-            padding-left: 10px;
-            color: #333;
-            background-color: transparent;
-            box-shadow: none;
-            border: none;
-          }
-          &>.cn-chart__tabs {
-            padding: 10px 25px 10px 15px;
-
-            .el-tabs__nav-wrap::after {
-              height: 1px;
-            }
-            &>.el-tabs__header {
-              margin-bottom: 10px;
-            }
-            &>.el-tabs__content {
-              height: calc(100% - 40px);
-            }
-          }
-          &>.cn-chart__table{
-            height: 100%;
-            width: 100%;
-            .cn-chart__header {
-              border-bottom: 1px solid $--content-right-background-color;
-              .header__operations {
-                display: flex;
-                justify-content: end;
-                align-items: center;
-
-                .header__operation.header__operation--table {
-                  display: flex;
-                  align-items: center;
-                  height: 22px;
-                  margin-left: 10px;
-                  color: $--color-primary;
-                  border: 1px solid $--color-primary;
-                  border-radius: $--border-radius-primary;
-
-                  .option__button {
-                    display: flex;
-                    align-items: center;
-                    height: 100%;
-                    padding: 0 5px;
-                    cursor: pointer;
-                    background-color: white;
-                    transition: all linear .2s;
-                  }
-                  .option__button:hover {
-                    background-color: #EFF2F5;
-                  }
-                  .option__button.icon-group-item:first-of-type:not(:last-of-type) {
-                    padding: 0 5px 0 0;
-                  }
-                  .option__button.icon-group-item:last-of-type:not(:first-of-type) {
-                    padding: 0 0 0 5px;
-                  }
-                  .option__select {
-                    .el-input__inner {
-                      width: 80px;
-                      padding-right: 20px;
-                      border: none;
-                      height: 100%;
-                      line-height: 20px;
-                      color: $--color-primary;
-                    }
-                    .el-input__prefix > div {
-                      font-weight: normal;
-                      line-height: 19px;
-                      color: $--color-primary;
-                    }
-                    .el-input__suffix {
-                      display: flex;
-                      .el-input__suffix-inner {
-                        line-height: 14px;
-                        .el-select__caret {
-                          line-height: 14px;
-                          width: 16px;
-                          color: $--color-primary;
-                        }
-                      }
-                    }
-                  }
-                  .option__select.select-column {
-                    .el-input__inner {
-                      width: 86px;
-                      padding-left: 8px;
-                    }
-                  }
-                  .icon-group-divide {
-                    height: 14px;
-                    width: 1px;
-                    background-color: $--color-primary;
-                  }
-                  i {
-                    font-size: 12px;
-                  }
-                }
-              }
-            }
-            .cn-chart__body {
-              flex: auto;
-              overflow-y: auto;
-              height: 100%;
-              width: 100%;
-
-              .el-table {
-                padding: 0 10px;
-
-                &:before {
-                  height: 0;
-                }
-                thead {
-                  color: #333;
-                }
-                th.is-leaf, td {
-                  border-bottom: none;
-                }
-                th {
-                  padding-bottom: 5px;
-                }
-                td {
-                  padding: 4px 0;
-                  color: #333;
-                }
-              }
-              .active-ip__icon {
-                overflow: hidden;
-                position: absolute;
-                top: 8px;
-                left: 6px;
-                display: flex;
-                justify-content: center;
-                justify-items: center;
-                align-items: center;
-                width: 23px;
-                height: 23px;
-                border-radius: 50%;
-                background: #e8fbf9;
-                border: 2px solid #e8fbf9;
-              }
-              .ip-green {
-                color: #23BF9A;
-              }
-              .active-ip__content {
-                position: absolute;
-                top: 7px;
-                left: 35px;
-                overflow: hidden;
-              }
-            }
-          }
-          &>.cn-chart__echarts {
+          &>.cn-chart__echarts,&>.cn-chart__table {
             .cn-chart__header {
               border-bottom: 1px solid $--content-right-background-color;
               .header__operations {
@@ -709,6 +280,66 @@
                 }
               }
             }
+          }
+          &>.cn-chart__ip-basic {
+            display: flex;
+            .el-descriptions {
+              padding-top: 30px;
+            }
+            &>.el-descriptions {
+              flex: 0 0 350px;
+              padding: 30px 36px;
+            }
+            .chart-location {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              padding: 0 20px 20px 0;
+            }
+            .el-descriptions__content {
+              color: #3976CB;
+            }
+          }
+          &>.cn-chart__block {
+            .cn-chart {
+              border: 1px solid #E7EAED;
+            }
+            /* detail页面block下的五连图的标题样式改变 */
+            .cn-chart__group .cn-chart__echarts {
+              .cn-chart__header {
+                border-bottom: none !important;
+
+                .header__title {
+                  font-size: 14px !important;
+                  color: #3976CB !important;
+                }
+              }
+            }
+          }
+          &>.cn-chart__title {
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            padding-left: 10px;
+            color: #333;
+            background-color: transparent;
+            box-shadow: none;
+            border: none;
+          }
+          &>.cn-chart__tabs {
+            padding: 10px 25px 10px 15px;
+
+            .el-tabs__nav-wrap::after {
+              height: 1px;
+            }
+            &>.el-tabs__header {
+              margin-bottom: 10px;
+            }
+            &>.el-tabs__content {
+              height: calc(100% - 40px);
+            }
+          }
+          &>.cn-chart__echarts {
             .cn-chart__body {
               overflow: hidden auto;
 
@@ -767,7 +398,6 @@
               }
             }
           }
-
           .chart-table-pagination.el-pagination {
             padding: 12px 0 9px 0;
             text-align: center;
@@ -778,205 +408,6 @@
               margin-left: 10px;
             }
           }
-          &>.cn-chart__app-basic {
-            display: flex;
-            flex-direction: column;
-            .cn-chart__body {
-              flex: auto;
-              display: flex;
-              .el-descriptions {
-                padding-top: 30px;
-              }
-              &>.el-descriptions {
-                flex: 0 0 350px;
-                padding: 30px 36px;
-              }
-              .chart-location {
-                display: flex;
-                flex: 1;
-                flex-direction: column;
-                padding: 0 20px 20px 0;
-              }
-              .el-descriptions__content {
-                color: #3976CB;
-              }
-            }
-            .cn-chart__body-single {
-              display: flex;
-              .cn-chart__body-single-table {
-                display: flex;
-                width: 250px;
-                align-items: center;
-              }
-              .single-value-icon__box {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 0 0 40%;
-              }
-              .single-value__icon {
-                 display: flex;
-                 justify-content: center;
-                 width: 72px;
-                 height: 72px;
-                 background-color: $--chart-single-value-icon-background-color;
-                 border-radius: 50%;
-
-                 i {
-                   display: flex;
-                   align-items: center;
-                   font-size: 28px;
-                   color: $--color-primary;
-                 }
-               }
-              .single-value-color-g.single-value__icon {
-                background-color: limegreen;
-                i {
-                  color: green;
-                }
-              }
-              .single-value-color-y.single-value__icon {
-                background-color: yellow;
-                i {
-                  color: darkorange;
-                }
-              }
-              .single-value__content {
-                display: flex;
-                flex-direction: column;
-                max-width: 60%;
-                padding-left: 10px;
-
-                div:nth-of-type(1) {
-                  margin-bottom: 10px;
-                }
-
-                .content__data {
-                  padding-bottom: 7%;
-                  font-size: 24px;
-                  color: #333333;
-                  font-weight: bold;
-                }
-                .content__title {
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-                  font-size: 16px;
-                  color: #666666;
-                }
-                &.single-value__content--with-chart {
-                  .content__title {
-                    border-bottom: 1px solid $--content-right-background-color;
-                  }
-                }
-                .single-value__unit {
-                  font-weight: normal;
-                  padding-left: 10px;
-                  color: #666;
-                  font-size: 20px;
-                }
-              }
-            }
-          }
-          &>.cn-chart__dns-record {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            width: 100%;
-            .cn-chart__body {
-              flex: auto;
-              display: flex;
-              height: 100%;
-              width: 100%;
-              .el-descriptions {
-                padding-top: 30px;
-              }
-              &>.el-descriptions {
-                flex: 0 0 350px;
-                padding: 30px 36px;
-              }
-              .chart-location {
-                display: flex;
-                flex: 1;
-                flex-direction: column;
-                padding: 0 20px 20px 0;
-              }
-              .el-descriptions__content {
-                color: #3976CB;
-              }
-            }
-          }
-          .cn-chart__table.eventList {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            width: 100%;
-            .cn-chart__body {
-              flex: auto;
-              display: flex;
-              height: 100%;
-              width: 100%;
-              .el-descriptions {
-                padding-top: 30px;
-              }
-              &>.el-descriptions {
-                flex: 0 0 350px;
-                padding: 30px 36px;
-              }
-              .chart-location {
-                display: flex;
-                flex: 1;
-                flex-direction: column;
-                padding: 0 20px 20px 0;
-              }
-              .el-descriptions__content {
-                color: #3976CB;
-              }
-              .crypto-eventList__record {
-                display: flex;
-                height: 100%;
-                width: 100%;
-
-                .record__table {
-                  display: table;
-                  height: 100%;
-                  width: 100%;
-
-                  .record__table-row {
-                    display: table-row;
-                    font-size: 14px;
-                    color: #333333;
-                  }
-                  .record__table-row.record__table-row--header {
-                    padding: 13px 30px 0;
-                    height: 40px;
-                    color: #6B717B;
-                  }
-                  .record__table-cell {
-                    display: table-cell;
-                    vertical-align: middle;
-                    padding-left: 10px;
-                    padding-top: 15px;
-                    padding-bottom: 0;
-
-                    .record_second{
-                      color:#7e8088;
-                      font-size:12px;
-                    }
-
-                    .circle-red {
-                      color: #EC7F66;
-                      font-size: 28px;
-                    }
-
-                  }
-                  .record__table-cell:first-of-type {
-                    padding-left:30px;
-                  }
-                }
-              }
-            }
-          }
         }
         .chart__legend {
           width: calc(100% - 40px);
diff --git a/src/views/charts/Chart2.vue b/src/views/charts/Chart2.vue
index 1f1fdff5..448d1453 100644
--- a/src/views/charts/Chart2.vue
+++ b/src/views/charts/Chart2.vue
@@ -70,12 +70,12 @@
       ></chart-category-bar>
 
       <chart-ip-open-port-bar
-              v-else-if="isIpOpenPortBar"
-              :chart-info="chartInfo"
-              :chart-data="chartData"
-              :result-type="resultType"
-              :query-params="queryParams"
-              @showLoading="showLoading"
+        v-else-if="isIpOpenPortBar"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        :result-type="resultType"
+        :query-params="queryParams"
+        @showLoading="showLoading"
       ></chart-ip-open-port-bar>
 
       <chart-table
@@ -88,11 +88,11 @@
       ></chart-table>
 
       <chart-active-ip-table
-          v-else-if="isActiveIpTable"
-          :chart-info="chartInfo"
-          :chart-data="chartData"
-          :table="table"
-          :query-params="queryParams"
+        v-else-if="isActiveIpTable"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        :table="table"
+        :query-params="queryParams"
       ></chart-active-ip-table>
 
       <chart-app-basic-info
@@ -110,32 +110,32 @@
       ></chart-domain-whois>
 
       <chart-domain-dns-record
-          v-else-if="isDomainDnsRecord"
-          :chart-info="chartInfo"
-          :chart-data="chartData"
-          :query-params="queryParams"
+        v-else-if="isDomainDnsRecord"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        :query-params="queryParams"
       ></chart-domain-dns-record>
 
       <chart-cryptocurrency-event-list
-          v-else-if="isCryptocurrencyEventList"
-          :chart-info="chartInfo"
-          :chart-data="chartData"
-          :query-params="queryParams"
+        v-else-if="isCryptocurrencyEventList"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        :query-params="queryParams"
       ></chart-cryptocurrency-event-list>
 
       <chart-relation-ship
-              v-else-if="isRelationShip"
-              :chart-info="chartInfo"
-              :chart-data="chartData"
-              :query-params="queryParams"
+        v-else-if="isRelationShip"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        :query-params="queryParams"
       ></chart-relation-ship>
 
       <chart-san-key
-              v-else-if="isSankey"
-              :chart-info="chartInfo"
-              :chart-data="chartData"
-              :query-params="queryParams"
-              :entity="entity"
+        v-else-if="isSankey"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        :query-params="queryParams"
+        :entity="entity"
       ></chart-san-key>
 
     </template>
diff --git a/src/views/charts/charts/ChartActiveIpTable.vue b/src/views/charts/charts/ChartActiveIpTable.vue
index b774f2ca..ef841198 100644
--- a/src/views/charts/charts/ChartActiveIpTable.vue
+++ b/src/views/charts/charts/ChartActiveIpTable.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="cn-chart__table">
+  <div class="cn-chart__table active-ip">
     <div class="cn-chart__body">
       <el-table
-          style="width: 100%"
+          style="width: 100%;height: 100%"
           tooltip-effect="light"
           :data="activeIpTable.tableData"
           :show-header="false"
diff --git a/src/views/charts/charts/ChartAppBasicInfo.vue b/src/views/charts/charts/ChartAppBasicInfo.vue
index b46cfef5..69765322 100644
--- a/src/views/charts/charts/ChartAppBasicInfo.vue
+++ b/src/views/charts/charts/ChartAppBasicInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="cn-chart__app-basic" :style="computePosition">
+  <div class="cn-chart__app-basic">
     <div class="cn-chart__body">
       <div style="display: flex; justify-content: space-between; width: 100%;">
         <el-descriptions :column="1" style="padding: 20px 30px;">
@@ -55,8 +55,6 @@
 </template>
 
 <script>
-import ChartSingleValue from "@/views/charts/charts/ChartSingleValue";
-import {isIpBasicInfo} from "@/views/charts/charts/tools";
 export default {
   name: "ChartAppBasicInfo",
   props: {
@@ -64,36 +62,12 @@ export default {
     chartData: [Array, Object],
     queryParams: Object
   },
-  components: {
-    ChartSingleValue
-  },
   data () {
     return {
 
     }
   },
-  watch: {
-    chartData: {
-      deep: true,
-      immediate: true,
-      handler (n) {
-      }
-    }
-  },
-  computed: {
-    computePosition() {
-      const gridColumn = `${this.chartInfo.x} / ${this.chartInfo.x + this.chartInfo.w}`
-      const gridRow = `${this.chartInfo.y} / ${this.chartInfo.y + this.chartInfo.h}`
-      return {
-        gridColumn,
-        gridRow
-      }
-    }
-  },
   mounted() {
-  },
-  setup (props) {
-    isIpBasicInfo: isIpBasicInfo(props.chartInfo.type)
   }
 }
 </script>
diff --git a/src/views/charts/charts/ChartDomainWhois.vue b/src/views/charts/charts/ChartDomainWhois.vue
index 4eaf299c..1220ba8e 100644
--- a/src/views/charts/charts/ChartDomainWhois.vue
+++ b/src/views/charts/charts/ChartDomainWhois.vue
@@ -1,5 +1,4 @@
 <template>
-
   <div class="cn-chart__whois">
     <div class="cn-chart__body">
       <div class="domain-detail-list">
diff --git a/src/views/charts/charts/ChartTable.vue b/src/views/charts/charts/ChartTable.vue
index 5b6f3d7f..1ae3f643 100644
--- a/src/views/charts/charts/ChartTable.vue
+++ b/src/views/charts/charts/ChartTable.vue
@@ -6,10 +6,7 @@
           tooltip-effect="light"
           :data="table.currentPageData"
       >
-        <el-table-column
-            type="index"
-            label="#"
-        >
+        <el-table-column v-if="table.currentPageData.length" type="index" label="#">
         </el-table-column>
         <el-table-column
             v-for="(c, i) in table.tableColumns"
@@ -33,7 +30,7 @@
         </el-table-column>
       </el-table>
     </div>
-    <div class="cn-chart__footer">
+    <div class="cn-chart__footer" v-if="table.tableData.length > 10">
       <chart-table-pagination
           ref="tablePagination"
           :total="table.tableData.length"
@@ -73,6 +70,7 @@ export default {
     },
   },
   mounted() {
+    console.log(this.chartData)
   }
 }
 </script>