diff --git a/src/assets/css/components/components/charts/panel.scss b/src/assets/css/components/components/charts/panel.scss
index b5d9ed9a..6f73d7a2 100644
--- a/src/assets/css/components/components/charts/panel.scss
+++ b/src/assets/css/components/components/charts/panel.scss
@@ -86,9 +86,6 @@
   font-weight:normal;
 }
 
-.cn-panel-crypto {
-  grid-template-columns: repeat(36, 1fr) !important;
-}
 .cn-chart:not(.cn-chart__group):not(.cn-chart__block) {
   &>.cn-chart__body {
     height: 100%;
@@ -672,7 +669,7 @@
     height: 100%;
     width: 100%;
     overflow: auto;
-    &>div {
+    /*&>div {
       display: grid;
       grid-template-columns: repeat(30, 1fr);
       grid-auto-flow: row;
@@ -701,7 +698,7 @@
           }
         }
       }
-    }
+    }*/
   }
 }
 .el-overlay {
diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index a59ef8b2..69f2c83d 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -1,5 +1,5 @@
 @import 'components/advancedSearch/advanced-search';
-@import './components/charts/panel';
+// @import './components/charts/panel';
 @import 'components/common/TimeRange/date-time-range';
 @import 'components/common/TimeRange/time-refresh';
 @import './components/common/pagination';
diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss
index 4fda7602..16f059bc 100644
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -58,118 +58,36 @@
             color: #333;
             padding: 0;
           }
-          /*&:hover {
-            background-color: $--chart-title-hover-background-color;
-
-            .chart-header__tools {
-              .chart-header__tool .tool__icon {
-                visibility: visible;
-              }
-            }
-          }*/
           .chart-header__title {
             max-width: calc(100% - 100px);
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
+            &.chart-header__title--block {
+              color: #1890FF;
+              font-weight: bold;
+              font-size: 16px;
+            }
           }
           .chart-header__tools {
             display: flex;
             justify-content: space-between;
             align-items: center;
 
+            .header__operation-btn {
+              margin-left: 12px;
+              cursor: pointer;
+              color: #999;
+            }
             .chart-header__tool {
               margin-left: 20px;
               cursor: pointer;
 
               .tool__icon {
-                // visibility: hidden;
                 font-size: 14px;
                 color: $--color-text-primary;
               }
-              .nz-chart-dropdown {
-                position: absolute;
-                top: 44px;
-                right: 0;
-                left: unset;
-                transform-origin: center top;
-                z-index: 1000;
-                width: 180px;
-                li {
-                  padding-left: 15px !important;
-                  padding-right: 0 !important;
-                  width: calc(100% - 15px);
-                  text-align: left;
-                  i {
-                    margin-right: 10px;
-                  }
-                  &:hover i {
-                    color: $--color-primary;
-                  }
-                }
-              }
-            }
-          }
-          .chart-header-error{
-            position: absolute;
-            left: 0;
-            top: -1px;
-          }
-        }
-        .chart-screen-header.list-page{
-          background: $--background-color-empty;
-        }
-        .chart-screen-header {
-          display: flex;
-          justify-content:space-between;
-          align-items:center;
-          padding: 0 20px 0 20px;
-          height: 39px;
-          font-size: 14px;
-          line-height: 40px;
-          color: $--color-text-primary;
-          transition: all 0.2s;
-          width: 100%;
-          box-sizing: border-box;
-          margin-top: 15px;
-          &.chart-header--float {
-            position: absolute;
-            width: 100%;
-            z-index: 100;
-            box-sizing: border-box;
-            height: 10px;
-            opacity: 0;
-            transition: all linear .2s;
-
-            &:hover {
-              height: 39px;
-              opacity: 1;
-            }
-          }
-          .chart-header__title {
-            max-width: calc(100% - 100px);
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            font-size: 18px;
-            color: #333;
-            font-weight: 700;
-          }
-          .chart-header__tools {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .chart-header__tool {
-              margin-left: 20px;
-              cursor: pointer;
-
-              .tool__icon {
-                visibility: hidden;
-                font-size: 14px;
-                color: $--color-text-primary;
-              }
-              .nz-chart-dropdown {
+              .cn-chart-dropdown {
                 position: absolute;
                 top: 44px;
                 right: 0;
@@ -208,190 +126,124 @@
             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;
+          &>.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.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;
+                i {
+                  font-size: 15px;
                 }
               }
-              .single-value__unit {
-                font-weight: normal;
-                padding-left: 10px;
-                color: #666;
-                font-size: 20px;
+              .single-value__content {
+                .content__data {
+                  font-size: 14px;
+                }
+                .content__title {
+                  font-size: 12px;
+                }
               }
             }
-          }
-          .cn-chart__single-value.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.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 {
+            &.cn-chart__single-value--icon-left {
               display: flex;
+              align-items: center;
               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%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex: 0 0 40%;
+              }
 
-                  .cn-icon-svg {
-                    width: 50px;
-                    height: 50px;
-                    vertical-align: middle;
-                    fill: currentColor;
-                    overflow: hidden;
-                  }
+              .single-value__icon {
+                display: flex;
+                justify-content: center;
+                width: 72px;
+                height: 72px;
+                background-color: $--chart-single-value-icon-background-color;
+                border-radius: 50%;
 
-                  i {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%,-50%);
-                    font-size: 24px;
-                  }
+                i {
+                  display: flex;
+                  align-items: center;
+                  font-size: 28px;
+                  color: $--color-primary;
                 }
               }
 
-              .single-value__data{
+              .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;
-                padding-left: 20px;
 
                 .content__title {
                   display: flex;
-                  align-items: end;
+                  align-items: center;
                   height: 50%;
                   font-size: 16px;
                   color: #666666;
-                  padding-bottom: 5px;
                 }
                 .content__data {
                   display: flex;
@@ -403,78 +255,113 @@
                   font-weight: bold;
                 }
               }
-
             }
-          }
-          .cn-chart__single-value.cn-chart__single-value--chart {
-            display: flex;
-            padding: 13px 20px;
-            height: 100%;
-            width: 100%;
-
-            .single-value__content {
+            &.cn-chart__single-value--icon-right--color {
               display: flex;
+              flex-direction: row-reverse;
+              justify-content: space-around;
+              align-items: center;
               height: 100%;
               width: 100%;
-              flex-direction: column;
 
-              .content__title {
+              .single-value__content {
                 display: flex;
+                height: 100%;
+                width: 100%;
+                flex-direction: row-reverse;
+                justify-content: space-between;
                 align-items: center;
-                height: 30%;
-                font-size: 16px;
-                color: #666666;
+
+                .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;
+                  }
+                }
+
               }
-              .content__data {
+            }
+            &.cn-chart__single-value--chart {
+              display: flex;
+              padding: 13px 20px;
+              height: 100%;
+              width: 100%;
+
+              .single-value__content {
                 display: flex;
-                align-items: center;
-                height: 25%;
-                font-size: 24px;
-                color: #333333;
-                font-weight: bold;
-              }
-              .content__chart {
-                flex: auto
+                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
+                }
               }
             }
           }
-
-          .chart-table-pagination.el-pagination {
-            padding: 12px 0 9px 0;
-            text-align: center;
-            height: 100%;
-            width: 100%;
-
-            .el-pagination__jump {
-              margin-left: 10px;
-            }
+          &>.cn-chart__whois {
+            overflow: auto;
           }
-        }
-        &>.cn-chart__whois>.cn-chart__body {
-          overflow: auto;
-        }
-        &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map, &>.cn-chart__group, &>.cn-chart__block, &>.cn-chart__whois, &>.cn-chart__dns-record, &>.cn-chart__app-basic {
-          display: flex;
-          flex-direction: column;
-          .cn-chart__header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-shrink: 0;
-            padding: 10px 20px 10px 18px;
-            height: 47px;
-
-            .cn-chart__title {
-              font-size: 16px;
-              color: #333333;
-              font-weight: bold;
-            }
-            .header__operations {
-              color: #999;
-            }
-          }
-          .cn-chart__body {
-            flex: auto;
+          &>.cn-chart__ip-basic {
             display: flex;
             .el-descriptions {
               padding-top: 30px;
@@ -493,19 +380,8 @@
               color: #3976CB;
             }
           }
-        }
-        &>.cn-chart__block {
-          &>.cn-chart__header {
-            height: 60px;
-            border-bottom: none !important;
-          }
-          &>.cn-chart__body {
-            display: grid !important;
-            grid-template-columns: repeat(30, 1fr);
-            grid-auto-flow: row;
-            grid-gap: 10px;
-            padding: 0 20px;
-            &>.cn-chart {
+          &>.cn-chart__block {
+            .cn-chart {
               border: 1px solid #E7EAED;
             }
             /* detail页面block下的五连图的标题样式改变 */
@@ -520,281 +396,278 @@
               }
             }
           }
-        }
-        .cn-chart__group {
-          .cn-chart__header {
-            border-bottom: 1px solid $--content-right-background-color;
-          }
-          &>.cn-chart__body {
-            display: grid !important;
-            grid-gap: 10px;
-            padding: 0 20px;
-            .cn-chart {
-              border: none;
-              box-shadow: none;
-            }
-          }
-        }
-        &>.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 {
-          .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;
-
-            .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;
-              }
-            }
-          }
-        }
-        &>.cn-chart__echarts {
-          .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--echarts {
-                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: 120px;
-                    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 {
-            overflow: hidden auto;
-
-            .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;
-              }
-            }
-          }
-          .cn-chart__body.pie-with-table {
-            flex-basis: 40%;
-          }
-          .cn-chart__footer.pie-with-table {
-            flex-basis: 60%;
-            padding: 10px 30px 30px;
-          }
-        }
-        .pie-table {
-          font-size: 14px;
-          color: #333333;
-          font-weight: 500;
-
-          .el-table__header-wrapper {
-            .cell {
-              color: #333;
-            }
-          }
-          .el-table__expanded-cell[class*=cell] {
-            padding: 0;
-          }
-
-          .expand-table .el-table__body .el-table__row:last-of-type td {
+          &>.cn-chart__title {
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            padding-left: 10px;
+            color: #333;
+            background-color: transparent;
+            box-shadow: none;
             border: none;
           }
-          .expand-table {
-            font-weight: 400;
-            color: #606266;
+          &>.cn-chart__tabs {
+            padding: 10px 25px 10px 15px;
 
-            .el-table__body-wrapper {
-              height: auto !important;
+            .el-tabs__nav-wrap::after {
+              height: 1px;
+            }
+            &>.el-tabs__header {
+              margin-bottom: 10px;
+            }
+            &>.el-tabs__content {
+              height: calc(100% - 40px);
+            }
+          }
+          &>.cn-chart__table {
+            .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;
+
+              .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;
+                }
+              }
+            }
+          }
+          &>.cn-chart__echarts {
+            .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--echarts {
+                  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: 120px;
+                      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 {
+              overflow: hidden auto;
+
+              .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;
+                }
+              }
+            }
+            .cn-chart__body.pie-with-table {
+              flex-basis: 40%;
+            }
+            .cn-chart__footer.pie-with-table {
+              flex-basis: 60%;
+              padding: 10px 30px 30px;
+            }
+          }
+          &>.pie-table {
+            font-size: 14px;
+            color: #333333;
+            font-weight: 500;
+
+            .el-table__header-wrapper {
+              .cell {
+                color: #333;
+              }
+            }
+            .el-table__expanded-cell[class*=cell] {
+              padding: 0;
+            }
+
+            .expand-table .el-table__body .el-table__row:last-of-type td {
+              border: none;
+            }
+            .expand-table {
+              font-weight: 400;
+              color: #606266;
+
+              .el-table__body-wrapper {
+                height: auto !important;
+              }
+            }
+          }
+
+          .chart-table-pagination.el-pagination {
+            padding: 12px 0 9px 0;
+            text-align: center;
+            height: 100%;
+            width: 100%;
+
+            .el-pagination__jump {
+              margin-left: 10px;
             }
           }
         }
@@ -875,3 +748,87 @@
     }
   }
 }
+
+.entity-detail-tool {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px 20px 10px 0;
+  padding: 0 20px;
+  height: 60px;
+  background-color: #FFFFFF;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
+  border-radius: 2px;
+
+  .cn-icon-arrow-left-circle {
+    color: $--color-primary;
+    font-size: 20px;
+  }
+}
+
+.chart-error-popper{
+  word-wrap:break-word;
+  word-break:break-word;
+  border: 1px solid #e02f44;
+  min-width: 180px !important;
+  max-width: 280px !important;
+}
+
+.chart-error-popper.el-popper.is-light {
+  background: #e02f44;
+  border: 1px solid #e02f44;
+}
+.chart-error-popper.el-popover.el-popper {
+  color:white;
+}
+
+.chart-error-popper.el-popper.is-light[data-popper-placement^='top'] .el-popper__arrow::before {
+  border-color: #e02f44;
+  background: #e02f44;
+  bottom:0px;
+}
+
+.chart-error-popper.el-popper.is-light[data-popper-placement^='bottom'] .el-popper__arrow::before {
+  border-color: #e02f44;
+  background: #e02f44;
+}
+
+.chart-info-corner {
+  color: #767980;
+  cursor: pointer;
+  position: absolute;
+  display: none;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  z-index: 2;
+  top: 0;
+}
+.chart-info-corner--error {
+  display: block;
+  color: #fff;
+}
+.chart-info-corner--error .chart-info-corner-inner {
+  border-left: 28px solid #e02f44;
+  border-right: none;
+  border-bottom: 28px solid rgba(0,0,0,0);
+}
+.chart-info-corner-inner {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.chart-info-corner .fa {
+  position: absolute;
+  top: 2px;
+  left: 6px;
+  font-size: 65%;
+  z-index: 3;
+  font-style: normal;
+}
+.cn-chart-icon-warning:before {
+  content: "!";
+  font-weight:normal;
+}
diff --git a/src/assets/css/components/views/entityExplorer/entity-detail.scss b/src/assets/css/components/views/entityExplorer/entity-detail.scss
index f3f0a667..826711f0 100644
--- a/src/assets/css/components/views/entityExplorer/entity-detail.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-detail.scss
@@ -68,6 +68,7 @@
       height: calc(100% - 28px);
       flex: 1;
       padding: 10px;
+      overflow: auto;
       background-color: $--content-right-background-color;
 
       &>.cn-entity-detail .entity-detail__body>.cn-panel {
diff --git a/src/components/common/MytTimePicker/index.js b/src/components/common/MytTimePicker/index.js
index 3cb19a40..bb0019c5 100644
--- a/src/components/common/MytTimePicker/index.js
+++ b/src/components/common/MytTimePicker/index.js
@@ -16,7 +16,15 @@ const locale = require('element-plus/lib/locale')
 const debounce = require('lodash/debounce')
 const ElScrollbar = require('element-plus/lib/el-scrollbar')
 const union = require('lodash/union')
-
+const utc = require('dayjs/plugin/utc')
+const timezone = require('dayjs/plugin/timezone')
+const advancedFormat = require('dayjs/plugin/advancedFormat')
+const weekday = require('dayjs/plugin/weekday')
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(advancedFormat)
+dayjs.extend(weekday)
+window.$dayJs = dayjs
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e } }
 
 const dayjs__default = /* #__PURE__ */_interopDefaultLegacy(window.$dayJs)
diff --git a/src/main.js b/src/main.js
index b3d4eab5..e837fc6a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,15 +19,17 @@ import timezone from 'dayjs/plugin/timezone'
 import advancedFormat from 'dayjs/plugin/advancedFormat'
 import weekday from 'dayjs/plugin/weekday'
 
+import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
+import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 import PanelChartList from '@/views/charts/PanelChartList'
 
 const _ = require('lodash') // lodash工具
 
-dayjs.extend(utc)
+/*dayjs.extend(utc)
 dayjs.extend(timezone)
 dayjs.extend(advancedFormat)
 dayjs.extend(weekday)
-window.$dayJs = dayjs
+window.$dayJs = dayjs*/
 
 const app = createApp(App)
 
@@ -47,6 +49,8 @@ app.config.globalProperties.$_ = _
 
 app.mixin(commonMixin)
 
+app.component('date-time-range', DateTimeRange)
+app.component('time-refresh', TimeRefresh)
 app.component('panel-chart-list', PanelChartList)
 
 app.mount('#app')
diff --git a/src/permission.js b/src/permission.js
index 15da1ab0..5f21039f 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@ import { storageKey } from '@/utils/constants'
 import { loadI18n } from '@/i18n'
 
 const loginWhiteList = ['/login', '/'] // 免登陆白名单
-const permissionWhiteList = [...loginWhiteList] // 权限白名单
+const permissionWhiteList = [...loginWhiteList, '/entityDetail'] // 权限白名单
 
 router.beforeEach(async (to, from, next) => {
   // 加载iso-3166-2资源
diff --git a/src/views/charts/Chart2.vue b/src/views/charts/Chart2.vue
index 0bf3bba7..0d285b9e 100644
--- a/src/views/charts/Chart2.vue
+++ b/src/views/charts/Chart2.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="cn-chart">
-    <loading :loading="loading && !isTabs"></loading>
+    <loading :loading="loading && !isTabs && !isBlock"></loading>
     <chart-no-data v-if="isNoData"></chart-no-data>
     <template v-else>
 
@@ -8,13 +8,15 @@
           v-if="isTabs"
           :chart-info="chartInfo"
           :query-params="queryParams"
+          :entity="entity"
       ></chart-tabs>
 
       <chart-map
-          v-else-if="isMap"
+          v-else-if="isMap && !isIpBasicInfo"
           :chart-info="chartInfo"
           :chart-data="chartData"
           :query-params="queryParams"
+          :entity="entity"
           @showLoading="showLoading"
       ></chart-map>
 
@@ -26,7 +28,19 @@
           @showLoading="showLoading"
       ></chart-single-value>
 
-      <div v-else style="height: 100%; width: 100%; background-color: lightcyan;"></div>
+      <chart-block
+          v-else-if="isBlock"
+          :chart-info="chartInfo"
+          :chart-data="chartData"
+          :entity="entity"
+      ></chart-block>
+
+      <ip-basic-info
+          v-else-if="isIpBasicInfo"
+          :chart-info="chartInfo"
+          :chart-data="chartData"
+          :entity="entity"
+      ></ip-basic-info>
 
       <chart-echart-line
           v-else-if="isEchartsLine"
@@ -47,6 +61,8 @@ import ChartNoData from './charts/ChartNoData'
 import ChartTabs from './charts/ChartTabs'
 import ChartMap from './charts/ChartMap'
 import ChartSingleValue from './charts/ChartSingleValue'
+import ChartBlock from './charts/ChartBlock'
+import IpBasicInfo from '@/views/charts/charts/IpBasicInfo'
 import ChartEchartLine from './charts/ChartEchartLine'
 import {
   isEcharts,
@@ -84,12 +100,14 @@ import _ from 'lodash'
 export default {
   name: 'chart',
   components: {
+    IpBasicInfo,
     ChartSingleValue,
     Loading,
     ChartNoData,
     ChartTabs,
     ChartMap,
-    ChartEchartLine
+    ChartEchartLine,
+    ChartBlock
   },
   props: {
     chartInfo: Object,
@@ -100,6 +118,7 @@ export default {
     isFullscreen: Boolean,
     loading: Boolean,
     panelLock: Boolean,
+    entity: Object,
     isError: Boolean
   },
   computed: {
diff --git a/src/views/charts/ChartHeader.vue b/src/views/charts/ChartHeader.vue
index 73a36b4f..292f2329 100644
--- a/src/views/charts/ChartHeader.vue
+++ b/src/views/charts/ChartHeader.vue
@@ -1,21 +1,30 @@
 <template>
   <div class="chart-header" :class="{'chart-header--title-chart': isTitle}">
-    <div class="chart-header__title">{{chartInfo.name}}</div>
+    <div class="chart-header__title" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
     <chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
     <div class="chart-header__tools" v-if="!isTitle && !isTabs">
-      <el-popover trigger="click" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
-        <template #reference>
-          <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
-        </template>
-      </el-popover>
-      <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
+      <div class="panel__time" v-if="chartInfo.params && chartInfo.params.showTimeTool">
+        <date-time-range class="date-time-range" :start-time="chartTimeFilter.startTime" :end-time="chartTimeFilter.endTime" ref="dateTimeRange" @change="reload"/>
+        <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="chartTimeFilter.endTime"/>
+      </div>
+      <template v-else-if="!isBlock">
+        <el-popover trigger="click" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
+          <template #reference>
+            <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
+          </template>
+        </el-popover>
+        <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-import { isTitle, isTabs } from './charts/tools'
+import { isTitle, isTabs, isBlock } from './charts/tools'
 import ChartError from '@/components/charts/ChartError'
+import { getNowTime } from '@/utils/date-util'
+import { ref } from 'vue'
+
 export default {
   name: 'ChartHeader',
   props: {
@@ -41,11 +50,29 @@ export default {
   methods: {
     refresh () {
       this.$emit('refresh')
+    },
+    timeRefreshChange () {
+      if (!this.$refs.dateTimeRange.isCustom) {
+        const value = this.chartTimeFilter.dateRangeValue
+        this.$refs.dateTimeRange.quickChange(value)
+      }
+    },
+    reload (s, e, v) {
+      this.dateTimeRangeChange(s, e, v)
+    },
+    dateTimeRangeChange (s, e, v) {
+      this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
     }
   },
   setup (props) {
+    const dateRangeValue = 60
+    const { startTime, endTime } = getNowTime(dateRangeValue)
+    // entity详情内的chart时间工具不是公共的，需要单独定义
+    const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
     return {
+      chartTimeFilter,
       isTitle: isTitle(props.chartInfo.type),
+      isBlock: isBlock(props.chartInfo.type),
       isTabs: isTabs(props.chartInfo.type)
     }
   }
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index d1411da3..acc594cd 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -2,8 +2,8 @@
   <div style="padding: 10px 10px 20px 10px; overflow: auto" v-if="!isEntityDetail">
     <div id="cn-panel" class="cn-panel2">
       <div class="panel__time">
-        <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
-        <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
+        <date-time-range class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
+        <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
       </div>
       <panel-chart-list
           :time-filter="timeFilter"
@@ -11,46 +11,26 @@
           :panel-lock="panelLock"
       >
       </panel-chart-list>
-<!--      <chart
-          v-for="chart in chartList"
-          :key="chart.id"
-          :chart="chart"
-          :time-filter="timeFilter"
-          :ref="`chart-${chart.id}`"
-          :entity="entity"
-          @getCurrentTimeRange="getCurrentTimeRange"
-      ></chart>-->
-      <!--    <grid-layout v-model:layout="chartList"
-                       :col-num="12"
-                       :row-height="30"
-                       :is-draggable="draggable"
-                       :is-resizable="resizable"
-                       :vertical-compact="compact"
-                       :use-css-transforms="true"
-          >
-            <grid-item v-for="item in chartList" :key="item.i"
-                       :x="item.x"
-                       :y="item.y"
-                       :w="item.w"
-                       :h="item.h"
-                       :i="item.i"
-            >
-              <span class="text">{{ item.i }}</span>
-            </grid-item>
-          </grid-layout>-->
     </div>
   </div>
   <div class="cn-entity-detail" id="cn-entity-detail" v-else>
     <div class="entity-detail__body">
-      <div class="cn-panel" @scroll="scroll" id="cn-panel">
-        <template v-for="chart in chartList" :key="chart.id">
-<!--          <chart
+      <div class="cn-panel2" id="cn-panel">
+        <panel-chart-list
+            :time-filter="timeFilter"
+            :data-list="chartList"
+            :panel-lock="panelLock"
+            :entity="entity"
+        >
+        </panel-chart-list>
+<!--        <template v-for="chart in chartList" :key="chart.id">
+          <chart
               :chart="chart"
               :ref="`chart-${chart.id}`"
               :entity="entity"
               @getCurrentTimeRange="getCurrentTimeRange"
-          ></chart>-->
-        </template>
+          ></chart>
+        </template>-->
       </div>
     </div>
   </div>
@@ -62,8 +42,6 @@ import { ref } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
-import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
-import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 
 export default {
   name: 'Panel',
@@ -72,10 +50,6 @@ export default {
     isEntityDetail: Boolean,
     typeName: String
   },
-  components: {
-    DateTimeRange,
-    TimeRefresh
-  },
   data () {
     return {
       chartList: [], // 普通panel的chart
@@ -125,16 +99,13 @@ export default {
         this.chartList = allCharts
         setTimeout(() => {
           this.$emit('chartLoaded', allCharts)
-        })
+        }, 1000)
       }
     },
     changeTab ({ index }) {
       this.currentTab = this.detailTabs[index].id + ''
       this.detailChartList = this.detailTabs[index].children
     },
-    scroll (e) {
-      this.$emit('scroll', { top: e.target.scrollTop })
-    },
     recursionParamsConvert (chart) {
       chart.params = chart.params ? JSON.parse(chart.params) : null
       if (!this.$_.isEmpty(chart.children)) {
@@ -165,9 +136,6 @@ export default {
       this.chartList.forEach(chart => {
         this.$refs[`chart-${chart.id}`] && this.$refs[`chart-${chart.id}`].reloadChart()
       })
-    },
-    jumpToTop (top) {
-      document.querySelector('#cn-panel').scrollTop = top
     }
   }
 }
diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index 58dc4812..eccb3f75 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -1,9 +1,13 @@
 <template>
   <!-- chart外层箱子 -->
-  <div :class="{'panel-chart--fullscreen': isFullscreen, 'panel-chart--title-chart': isTitle}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)">
+  <div
+      :class="{'panel-chart--fullscreen': isFullscreen, 'panel-chart--title-chart': isTitle}"
+      class="panel-chart"
+      :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)"
+  >
     <!-- title和工具栏，支持浮动 -->
     <chart-header
-        v-if="!isFullscreen && showHeader && !isSingleValue"
+        v-if="!isFullscreen && showHeader && !isSingleValue && !isTabs"
         :is-error="isError"
         :error-info="errorInfo"
         :chart-data="chartData"
@@ -16,7 +20,7 @@
     <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
     <chart
         ref="chart"
-        v-if="(!isGroup || !chartInfo.param.collapse) && !isTitle"
+        v-if="(!isGroup || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle"
         :chart-data="chartData"
         :result-type="resultType"
         :chart-info="chartInfo"
@@ -24,6 +28,7 @@
         :panel-lock="panelLock"
         :is-error="isError"
         :loading="loading"
+        :entity="entity"
         :is-fullscreen="isFullscreen"
         @showLoading="showLoading"
     ></chart>
@@ -80,6 +85,7 @@ export default {
     timeFilter: Object, // 时间范围
     isFullscreen: Boolean,
     panelLock: Boolean,
+    entity: Object,
     showHeader: {
       type: Boolean,
       default: true
diff --git a/src/views/charts/PanelChartList.vue b/src/views/charts/PanelChartList.vue
index 1299a07e..7396471e 100644
--- a/src/views/charts/PanelChartList.vue
+++ b/src/views/charts/PanelChartList.vue
@@ -25,12 +25,14 @@
           :isResizable = "item.type === 'group' ? false: null"
           dragAllowFrom=".chart-header"
           dragIgnoreFrom=".chart-header__tools"
+          v-bind="anchorPoint(item)"
       >
         <panel-chart
             :ref="'chart' + item.id"
             :chart-info="item"
             :show-header="true"
             :time-filter="timeFilter"
+            :entity="entity"
             @showFullscreen="showFullscreen"
         ></panel-chart>
       </grid-item>
@@ -64,6 +66,7 @@
 import PanelChart from '@/views/charts/PanelChart'
 import VueGridLayout from 'vue-grid-layout'
 import { getTypeCategory } from './charts/tools'
+import _ from 'lodash'
 
 export default {
   name: 'PanelChartList',
@@ -76,6 +79,7 @@ export default {
     timeFilter: Object, // 时间范围
     panelLock: { type: Boolean, default: true },
     isGroup: Boolean,
+    entity: Object,
     dataList: Array // 看板中所有图表信息
   },
   data () {
@@ -109,9 +113,21 @@ export default {
       this.fullscreen.visible = show
     }
   },
+  computed: {
+    anchorPoint () {
+      return function (chart) {
+        if (!_.isEmpty(chart.params && chart.params.anchorPoint)) {
+          return { 'anchor-point': chart.params.anchorPoint }
+        } else {
+          return ''
+        }
+      }
+    }
+  },
   watch: {
     dataList: {
       deep: true,
+      immediate: true,
       handler (n, o) {
         this.gridLayoutShow = false
         this.gridLayoutLoading = true
diff --git a/src/views/charts/charts/ChartBlock.vue b/src/views/charts/charts/ChartBlock.vue
new file mode 100644
index 00000000..9e80059e
--- /dev/null
+++ b/src/views/charts/charts/ChartBlock.vue
@@ -0,0 +1,23 @@
+<template>
+  <panel-chart-list
+      :time-filter="timeFilter"
+      :data-list="chartInfo.children"
+      :panel-lock="true"
+      :entity="entity"
+  >
+  </panel-chart-list>
+</template>
+
+<script>
+import chartMixin from '@/views/charts/charts/chart-mixin'
+
+export default {
+  name: 'ChartBlock',
+  mixins: [chartMixin],
+  props: {
+    timeFilter: Object
+  },
+  mounted () {
+  }
+}
+</script>
diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue
index 0d9da88a..755232e0 100644
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -4,21 +4,16 @@
 </template>
 
 <script>
-import * as L from 'leaflet'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { getGeoData, replaceUrlPlaceholder } from '@/utils/tools'
 import { storageKey } from '@/utils/constants'
-import 'leaflet/dist/leaflet.css'
-import icon from 'leaflet/dist/images/marker-icon.png'
-import iconShadow from 'leaflet/dist/images/marker-shadow.png'
-import {
-  isIpBasicInfo,
-  isMapBlock
-} from './tools'
+
+import { isMapBlock } from './tools'
 import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
 import { HeatLegend } from '@/components/amcharts/heatLegend'
 import { getData } from '@/utils/api'
+import chartMixin from './chart-mixin'
 
 export default {
   name: 'ChartMap',
@@ -31,88 +26,50 @@ export default {
       countrySeries: null // 下钻国家series
     }
   },
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    queryParams: Object
-  },
+  mixins: [chartMixin],
   methods: {
     initMap (id) {
-      if (this.isIpBasicInfo) {
-        L.Marker.prototype.options.icon = L.icon({
-          iconUrl: icon,
-          shadowUrl: iconShadow
-        })
-        const map = L.map(`chart${this.chartInfo.id}`, {
-          minZoom: 3,
-          maxZoom: 7,
-          zoom: 5,
-          attributionControl: false,
-          zoomControl: false,
-          maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
-        })
-        L.tileLayer(
-          this.mapPictureUrl,
-          { noWrap: true }
-        ).addTo(map)
-
-        const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
-        attribution.addAttribution(' © OpenStreetMap contributors')
-        attribution.addTo(map)
-
-        /* L.control.zoom({
-          position: 'bottomright',
-          zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
-          zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
-          zoomInTitle: '',
-          zoomOutTitle: ''
-        }).addTo(map) */
-
-        this.myChart = map
-        this.loadLeafletMap()
-      } else {
-        const chart = am4Core.create(id, am4Maps.MapChart)
-        chart.geodata = getGeoData(storageKey.iso36112WorldLow)
-        chart.projection = new am4Maps.projections.Miller()
-        this.myChart = chart
-        const polygonSeries = chart.series.push(new am4Maps.MapPolygonSeries())
-        polygonSeries.useGeodata = true
-        polygonSeries.exclude = ['AQ'] // 排除南极洲
-        polygonSeries.tooltip.getFillFromObject = false
-        polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
-        this.polygonSeries = polygonSeries
-        const polygonTemplate = polygonSeries.mapPolygons.template
-        polygonTemplate.tooltipHTML = this.generateTooltipHTML()
-        polygonTemplate.nonScalingStroke = true
-        polygonTemplate.strokeWidth = 0.5
-        polygonTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
-        this.loadAm4ChartMap(this.polygonSeries)
-        // 地图点击事件
-        polygonTemplate.events.on('hit', async ev => {
-          const countryId = ev.target.dataItem.dataContext.id
-          if (countryId) {
-            ev.target.series.chart.zoomToMapObject(ev.target)
-            ev.target.isHover = false
-            this.countrySeries = chart.series.push(new am4Maps.MapPolygonSeries())
-            this.countrySeries.tooltip.getFillFromObject = false
-            this.countrySeries.tooltip.background.fill = am4Core.color('#FFFFFF')
-            const countryTemplate = this.countrySeries.mapPolygons.template
-            countryTemplate.tooltipHTML = this.generateTooltipHTML()
-            countryTemplate.nonScalingStroke = true
-            countryTemplate.strokeWidth = 0.5
-            countryTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
-            const geoData = getGeoData(countryId)
-            if (geoData) {
-              this.countrySeries.geodata = geoData
-              this.polygonSeries.hide()
-              const country = ev.target.dataItem.dataContext.serverCountry
-              const queryParams = { ...this.queryParams, country }
-              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
-              this.loadAm4ChartMap(this.countrySeries, ev.target.dataItem.dataContext.serverCountry, chartData)
-            }
+      const chart = am4Core.create(id, am4Maps.MapChart)
+      chart.geodata = getGeoData(storageKey.iso36112WorldLow)
+      chart.projection = new am4Maps.projections.Miller()
+      this.myChart = chart
+      const polygonSeries = chart.series.push(new am4Maps.MapPolygonSeries())
+      polygonSeries.useGeodata = true
+      polygonSeries.exclude = ['AQ'] // 排除南极洲
+      polygonSeries.tooltip.getFillFromObject = false
+      polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
+      this.polygonSeries = polygonSeries
+      const polygonTemplate = polygonSeries.mapPolygons.template
+      polygonTemplate.tooltipHTML = this.generateTooltipHTML()
+      polygonTemplate.nonScalingStroke = true
+      polygonTemplate.strokeWidth = 0.5
+      polygonTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
+      this.loadAm4ChartMap(this.polygonSeries)
+      // 地图点击事件
+      polygonTemplate.events.on('hit', async ev => {
+        const countryId = ev.target.dataItem.dataContext.id
+        if (countryId) {
+          ev.target.series.chart.zoomToMapObject(ev.target)
+          ev.target.isHover = false
+          this.countrySeries = chart.series.push(new am4Maps.MapPolygonSeries())
+          this.countrySeries.tooltip.getFillFromObject = false
+          this.countrySeries.tooltip.background.fill = am4Core.color('#FFFFFF')
+          const countryTemplate = this.countrySeries.mapPolygons.template
+          countryTemplate.tooltipHTML = this.generateTooltipHTML()
+          countryTemplate.nonScalingStroke = true
+          countryTemplate.strokeWidth = 0.5
+          countryTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
+          const geoData = getGeoData(countryId)
+          if (geoData) {
+            this.countrySeries.geodata = geoData
+            this.polygonSeries.hide()
+            const country = ev.target.dataItem.dataContext.serverCountry
+            const queryParams = { ...this.queryParams, country }
+            const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
+            this.loadAm4ChartMap(this.countrySeries, ev.target.dataItem.dataContext.serverCountry, chartData)
           }
-        })
-      }
+        }
+      })
     },
     loadAm4ChartMap (polygonSeries, country, chartData) {
       if (chartData) {
@@ -196,20 +153,6 @@ export default {
         }
       }
     },
-    loadLeafletMap () {
-      this.$emit('showLoading', true)
-      try {
-        this.myChart.setView([this.chartData.latitude, this.chartData.longitude], 5)
-        const myIcon = L.divIcon({
-          className: 'cn-icon cn-icon-position2 position-icon'
-        })
-        L.marker([this.chartData.latitude, this.chartData.longitude], { icon: myIcon }).addTo(this.myChart)
-      } finally {
-        setTimeout(() => {
-          this.$emit('showLoading', false)
-        }, 200)
-      }
-    },
     mapBack () {
       this.countrySeries.hide()
       this.$nextTick(() => {
@@ -264,7 +207,6 @@ export default {
   },
   setup (props) {
     return {
-      isIpBasicInfo: isIpBasicInfo(props.chartInfo.type),
       isMapBlock: isMapBlock(props.chartInfo.type)
     }
   }
diff --git a/src/views/charts/charts/ChartTabs.vue b/src/views/charts/charts/ChartTabs.vue
index 99651e17..ede006b2 100644
--- a/src/views/charts/charts/ChartTabs.vue
+++ b/src/views/charts/charts/ChartTabs.vue
@@ -15,6 +15,7 @@
           :time-filter="timeFilter"
           :data-list="tab.children"
           :panel-lock="true"
+          :entity="entity"
       >
       </panel-chart-list>
     </el-tab-pane>
@@ -23,14 +24,10 @@
 
 <script>
 import _ from 'lodash'
+import chartMixin from '@/views/charts/charts/chart-mixin'
 
 export default {
   name: 'ChartTabs',
-  props: {
-    chartInfo: Object,
-    chartData: [Object, Array, String], // 数据在父组件查询后传入，本组件内不查询，只根据接传递的数据来渲染
-    queryParams: Object // 接口请求参数
-  },
   computed: {
     timeFilter () {
       return {
@@ -39,6 +36,7 @@ export default {
       }
     }
   },
+  mixins: [chartMixin],
   methods: {
     showFullscreen () {
 
diff --git a/src/views/charts/charts/IpBasicInfo.vue b/src/views/charts/charts/IpBasicInfo.vue
new file mode 100644
index 00000000..e5996ed6
--- /dev/null
+++ b/src/views/charts/charts/IpBasicInfo.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="cn-chart__ip-basic">
+    <el-descriptions :column="1">
+      <el-descriptions-item label="ASN:">{{(chartData && chartData.asn) || '-'}}</el-descriptions-item>
+      <el-descriptions-item label="AS Org:">{{(chartData && chartData.asOrganization) || '-'}}</el-descriptions-item>
+      <el-descriptions-item :label="$t('entities.asSubnet') + ':'">{{(chartData && chartData.asSubnet) || '-'}}</el-descriptions-item>
+      <el-descriptions-item label="ISP:">{{(chartData && chartData.isp) || '-'}}</el-descriptions-item>
+      <el-descriptions-item label="DNS PTR:">{{(chartData && chartData.dnsPtr) || '-'}}</el-descriptions-item>
+    </el-descriptions>
+    <div class="chart-location">
+      <el-descriptions :column="1">
+        <el-descriptions-item :label="$t('overall.location') + ':'">{{location}}</el-descriptions-item>
+      </el-descriptions>
+      <div class="chart-drawing" style="padding: 0 36px 30px 0;" :id="`chart${chartInfo.id}`"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartMixin from '@/views/charts/charts/chart-mixin'
+import * as L from 'leaflet'
+import icon from 'leaflet/dist/images/marker-icon.png'
+import iconShadow from 'leaflet/dist/images/marker-shadow.png'
+import 'leaflet/dist/leaflet.css'
+
+export default {
+  name: 'IpBasicInfo',
+  mixins: [chartMixin],
+  data () {
+    return {
+      myChart: null,
+      mapPictureUrl: '/Tiles/{z}/{x}/{y}.png'
+    }
+  },
+  computed: {
+    location () {
+      let location = ''
+      if (this.chartInfo) {
+        if (this.chartInfo.country) {
+          location = this.chartInfo.country
+          if (this.chartInfo.province) {
+            location += ', '
+            location += this.chartInfo.province
+            if (this.chartInfo.city) {
+              location += ', '
+              location += this.chartInfo.city
+            }
+          }
+        } else if (this.chartInfo.province) {
+          location = this.chartInfo.province
+          if (this.chartInfo.city) {
+            location += ', '
+            location += this.chartInfo.city
+          }
+        } else if (this.chartInfo.city) {
+          location = this.chartInfo.city
+        }
+      }
+      return location
+    }
+  },
+  methods: {
+    initMap (id) {
+      L.Marker.prototype.options.icon = L.icon({
+        iconUrl: icon,
+        shadowUrl: iconShadow
+      })
+      const map = L.map(`chart${this.chartInfo.id}`, {
+        minZoom: 3,
+        maxZoom: 7,
+        zoom: 5,
+        attributionControl: false,
+        zoomControl: false,
+        maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
+      })
+      L.tileLayer(
+        this.mapPictureUrl,
+        { noWrap: true }
+      ).addTo(map)
+
+      const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
+      attribution.addAttribution(' © OpenStreetMap contributors')
+      attribution.addTo(map)
+
+      /* L.control.zoom({
+        position: 'bottomright',
+        zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
+        zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
+        zoomInTitle: '',
+        zoomOutTitle: ''
+      }).addTo(map) */
+
+      this.myChart = map
+      this.loadLeafletMap()
+    },
+    loadLeafletMap () {
+      if (this.chartData.latitude && this.chartData.longitude) {
+        this.myChart.setView([this.chartData.latitude, this.chartData.longitude], 5)
+        const myIcon = L.divIcon({
+          className: 'cn-icon cn-icon-position2 position-icon'
+        })
+        L.marker([this.chartData.latitude, this.chartData.longitude], { icon: myIcon }).addTo(this.myChart)
+      }
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        this.initMap(`chart${this.chartInfo.id}`)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/charts/chart-mixin.js b/src/views/charts/charts/chart-mixin.js
new file mode 100644
index 00000000..9d383385
--- /dev/null
+++ b/src/views/charts/charts/chart-mixin.js
@@ -0,0 +1,8 @@
+export default {
+  props: {
+    chartInfo: Object,
+    chartData: [Object, Array, String], // 数据在父组件查询后传入，本组件内不查询，只根据接传递的数据来渲染
+    entity: Object,
+    queryParams: Object // 接口请求参数
+  }
+}
diff --git a/src/views/entityExplorer/EntityDetail.vue b/src/views/entityExplorer/EntityDetail.vue
index c6c1f21f..228b77da 100644
--- a/src/views/entityExplorer/EntityDetail.vue
+++ b/src/views/entityExplorer/EntityDetail.vue
@@ -12,13 +12,12 @@
           </div>
         </template>
       </div>
-      <div class="entity-detail__content">
+      <div class="entity-detail__content" @scroll="scroll" id="detailWrapper">
         <cn-panel
             ref="cnPanel"
             :entity="entityData"
             :is-entity-detail="true"
             @chartLoaded="chartLoaded"
-            @scroll="scroll"
         ></cn-panel>
       </div>
     </main>
@@ -75,16 +74,16 @@ export default {
     chartLoaded (chartList) {
       this.anchorPoints = []
       let anchorPoints = []
-      const panelDom = document.querySelector('#cn-panel')
+      const panelDom = document.querySelector('#detailWrapper')
       this.scrollHeight = panelDom.scrollHeight
       this.clientHeight = panelDom.clientHeight
       chartList.forEach(chart => {
         if (chart.params.anchorPoint) {
-          const dom = document.querySelector(`#${chart.params.anchorPoint}`)
-          anchorPoints.push({
+          const dom = document.querySelector(`[anchor-point='${chart.params.anchorPoint}']`)
+          dom && anchorPoints.push({
             id: chart.params.anchorPoint,
             label: chart.i18n ? this.$t(chart.i18n) : chart.name,
-            top: dom.offsetTop/* ,
+            top: dom.offsetTop + 10/* ,
             height: document.querySelector(`#${chart.params.anchorPoint}}`).scrollHeight */
           })
         }
@@ -98,12 +97,12 @@ export default {
       }
       this.anchorPoints = anchorPoints
     },
-    scroll ({ top }) {
-      this.top = top || 0
+    scroll (e) {
+      this.top = (e.target.scrollTop + 10) || 0
     },
     jumpToAnchor (anchor) {
       this.top = anchor.top
-      this.$refs.cnPanel.jumpToTop(anchor.top)
+      document.querySelector('#detailWrapper').scrollTop = this.top
     }
   },
   computed: {
@@ -133,7 +132,7 @@ export default {
     },
     currentAnchor () {
       let currentAnchor = null
-      if (this.top + this.clientHeight === this.scrollHeight) {
+      if (this.top + this.clientHeight - 10 === this.scrollHeight) {
         currentAnchor = this.anchorPoints[this.anchorPoints.length - 1]
       } else {
         this.anchorPoints.forEach(anchor => {