CN-1594 feat: 清理过时scss文件

33 files changed, 26 insertions, 2922 deletions

diff --git a/src/assets/css/common/index.scss b/src/assets/css/common/index.scss
index 39aad316..a43dad94 100644
--- a/src/assets/css/common/index.scss
+++ b/src/assets/css/common/index.scss
@@ -1,6 +1,5 @@
 @import 'right-box-common';
 @import 'table-common';
-@import 'part-select';
 
 /* 通用css */
 .panel-chart__no-data {
diff --git a/src/assets/css/common/part-select.scss b/src/assets/css/common/part-select.scss
deleted file mode 100644
index f610c601..00000000
--- a/src/assets/css/common/part-select.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/* 部分 select 通用样式 */
-// small下拉框的输入框中字体大小
-/*.el-select--small .el-select__wrapper {
-  font-size: 14px;
-}
-.el-select-dropdown {
-  .el-scrollbar {
-    .el-select-dropdown__wrap {
-      .el-scrollbar__view.el-select-dropdown__list {
-        .el-select-dropdown__item {
-          padding: 0 8px;
-          height: 28px;
-          line-height: 28px;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-}*/
diff --git a/src/assets/css/components/components/rightBox/administration/chart-box.scss b/src/assets/css/components/components/rightBox/administration/chart-box.scss
deleted file mode 100644
index a4b7efdd..00000000
--- a/src/assets/css/components/components/rightBox/administration/chart-box.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.my-editor {
-  margin-top: 4px;
-  border: 1px solid var(--el-border-color-light);
-
-  .prism-editor__textarea {
-    outline: none;
-  }
-}
diff --git a/src/assets/css/components/components/setting/galaxy-proxy-debug.scss b/src/assets/css/components/components/setting/galaxy-proxy-debug.scss
deleted file mode 100644
index 1e9325dc..00000000
--- a/src/assets/css/components/components/setting/galaxy-proxy-debug.scss
+++ /dev/null
@@ -1,233 +0,0 @@
-.proxy-debug__dialog {
-  height: 90vh;
-  overflow: hidden;
-  .el-dialog__header {
-    display: none;
-  }
-  .el-dialog__body {
-    height: 100%;
-    padding: 0;
-  }
-}
-.debug-wrapper{
-  width: 100%;
-  height:100%;
-  background: #fff;
-  text-align: center;
-  display: grid;
-  grid-template-columns: 25% auto;
-  grid-template-rows: 60px auto;
-  grid-row-gap: 20px;
-  grid-column-gap: 20px;
-  padding:25px;
-
-  .item{
-    border:1px solid #bbbbbb;
-    color: #000C18;
-    line-height: 60px;
-    font-size: 16px;
-    text-align: left;
-  }
-
-  .item-1 {
-    border: 0;
-  }
-
-  .item-2 {
-    background-color: #ffffff;
-    border: 0;
-    .el-input__inner {
-      border-radius: 0px;
-      border-left: 0px;
-      border-right: 0;
-      border-top: 1px solid #bbbbbb;
-      border-bottom: 1px solid #bbbbbb;
-      color: #606266;
-      height: 60px;
-      line-height: 60px;
-      padding: 0 15px;
-    }
-  }
-
-  .sub-grid-send{
-    width: 100%;
-    height:100%;
-    background: #fff;
-    text-align: center;
-    display: grid;
-    grid-template-columns: 100px auto 80px;
-    grid-template-rows: 60px;
-    grid-row-gap: 0px;
-    grid-column-gap: 0px;
-    padding: 0;
-  }
-
-  .item-3 {
-    background-color: #ffffff;
-    .el-input__inner{
-      border: 0px;
-    }
-    .el-input__inner:hover {
-      border: 0px;
-    }
-    .el-input__inner:focus {
-      border: 1px solid #bbbbbb;
-    }
-
-    .el-table__header, .el-table__body{
-      witdh:100% !important;
-    }
-
-    .el-table__header-wrapper{
-      height: 60px;
-    }
-
-    .el-table__empty-block{
-      height: 0;
-      min-height: 0;
-    }
-
-    .el-table th.is-leaf, .el-table td {
-      border-top: 1px solid #bbbbbb;
-      border-left: 1px solid #bbbbbb;
-      border-right: 0px;
-      padding-top: 3px;
-      padding-bottom: 3px;
-    }
-
-    .el-table{
-      border-bottom: 1px solid #bbbbbb;
-      border-right: 0px solid #bbbbbb;
-      border-left: 0px solid #bbbbbb;
-    }
-
-    .el-table .cell {
-      line-height: 23px;
-      padding-left: 3px;
-      padding-right: 3px;
-      text-align: center;
-    }
-
-    .el-table__body tr:hover >td {
-      background-color: #ffffff;
-    }
-
-    .el-table__body tr:focus >td {
-      background-color: cadetblue;
-    }
-    .debug__params-delete:hover{
-      color:#0091FF;
-      cursor: pointer;
-    }
-  }
-
-  .item-4 {
-    height:100%;
-    overflow:hidden;
-    background-color: #ffffff;
-    display: grid;
-    grid-template-columns: 40% 60%;
-    grid-template-rows: 60px  minmax(100px, 1fr) 60px minmax(100px, 2fr);
-    grid-row-gap: 0px;
-    grid-column-gap: 0px;
-
-    pre {outline: 0px; padding: 0px; margin: 0px;height:360px;line-height: 20px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;}
-    .color-pre__style{
-      height: 95%;
-      width: 95%;
-    }
-    .request-header {
-      grid-column-start: 1;
-      grid-column-end: 3;
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 15px;
-    }
-
-    .request-header-content{
-      grid-column-start: 1;
-      grid-column-end: 3;
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 0px;
-      overflow:scroll;
-      height: 100%;
-      width:100%;
-      line-height: 30px;
-    }
-
-    .response-header {
-      border-right:1px solid #bbbbbb;
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 15px;
-    }
-
-    .response-header-content {
-      border-right:1px solid #bbbbbb;
-      padding-left: 0px;
-      height: 100%;
-      width:100%;
-      overflow:scroll;
-      line-height: 30px;
-    }
-
-    .response-body {
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 15px;
-    }
-
-    .response-body-content {
-      padding-left: 5px;
-      height:100%;
-      width:100%;
-      overflow:scroll;
-    }
-  }
-
-  .sub-grid-params{
-    width: 100%;
-    height:100%;
-    background: #fff;
-    text-align: center;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 60px auto;
-    grid-row-gap: 0px;
-    grid-column-gap: 0px;
-    padding: 0;
-    justify-items: center;
-
-  }
-
-  .sub-grid-params-add{
-    width: 96%;
-    height:100%;
-    background: #fff;
-    text-align: left;
-    display: grid;
-    grid-template-columns: 70% 30%;
-    grid-template-rows:100%;
-    grid-row-gap: 0;
-    grid-column-gap: 0;
-    padding: 0;
-  }
-
-  .el-select .el-input .el-input__inner{
-    height: 60px;
-    border-radius: 0;
-    border:1px solid #bbbbbb;
-  }
-  .el-select .el-input .el-select__caret {
-    line-height:60px;
-    font-weight: bolder;
-    color:black;
-  }
-
-  .el-button {
-    border-color: #bbbbbb;
-  }
-
-  .sub-grid-params-add  .el-button {
-    height: 38px;
-    margin-top: 11px;
-    margin-right: 10px;
-  }
-}
diff --git a/src/assets/css/components/components/table/administration/galaxy-proxy-table.scss b/src/assets/css/components/components/table/administration/galaxy-proxy-table.scss
deleted file mode 100644
index f5fc3550..00000000
--- a/src/assets/css/components/components/table/administration/galaxy-proxy-table.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.galaxy-proxy-table {
-  .js-code-highlight {
-    height: 250px;
-
-    .highlight-box {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-
-      .highlight-box__copy-btn {
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        cursor: pointer;
-      }
-    }
-  }
-  pre code.hljs {
-    overflow-x: visible;
-  }
-}
diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index d0d64286..deb46747 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -1,14 +1,9 @@
 @import './components/advancedSearch/advanced-search2';
 @import './components/advancedSearch/codemirror';
-// @import './components/charts/panel';
 @import './components/common/TimeRange/date-time-range';
 @import './components/common/TimeRange/time-refresh';
 @import './components/common/pagination';
-// @import './components/entities/entities';
 @import './components/layout/layout';
-@import 'components/rightBox/administration/chart-box';
-@import 'components/setting/galaxy-proxy-debug';
-@import 'components/table/administration/galaxy-proxy-table';
 @import './components/table/common';
 @import './views/charts/chart';
 @import 'views/entityExplorer/entity-explorer';
@@ -25,24 +20,9 @@
 @import './views/detections/detection-list/detection-list';
 @import './views/detections/detection-list/row';
 @import './views/detections/detection-overview';
-@import './views/charts/chartSingleValue';
 @import './views/charts/panel';
-@import 'views/charts/chartIpOpenPortBar';
-@import './views/charts/chartTable';
-@import './views/charts/chartCryptocurrencyEventList';
-@import './views/charts/chartAppBasicInfo';
-@import './views/charts/chartDomainDnsRecord';
-@import './views/charts/chartDomainWhois';
-@import './views/charts/chartEchartWithTable';
-@import './views/charts/ipBasicInfo';
-@import './views/charts/chartEchartIpHostedDomain';
-@import './views/charts/chartEchartAppRelateDomain';
-@import './views/charts/ChartOneSituationStatistics';
-@import './views/charts/ChartTwoSituationStatistics';
-@import './views/charts/chartAlarmInfo';
 @import './views/chartHeader';
 @import './views/charts/chartMap';
-@import 'views/charts/chartRelationShipList';
 @import 'views/report/report';
 @import 'components/rightBox/report/reportBox';
 
@@ -69,11 +49,6 @@
 @import './views/charts2/domainNameResolution.scss';
 @import './views/charts2/informationAggregation.scss';
 @import 'views/charts2/linkTrafficLine';
-@import 'views/charts2/dnsTrafficLine';
-@import 'views/charts2/dnsRecentEvents';
-@import 'views/charts2/dnsActiveMaliciousDomain';
-@import 'views/charts2/dnsEventChart';
-@import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
 @import './components/common/chart-error';
 @import './components/common/chart-tab';
diff --git a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
deleted file mode 100644
index a5c7ca7f..00000000
--- a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.cn-chart__one-situation-statistics{
-    height: 100%;
-    .one-situation-statistics__box {
-        display: flex;
-        align-items: center;
-        margin-left: 33px;
-        height: 100%;
-        .box__progress {
-            display: block;
-            .el-progress-circle {
-                height: 80px !important;
-                width: 80px !important;
-            }
-            .el-progress__text span{
-                font-size: 16px;
-            }
-        }
-        .box__count{
-            margin-left: 22px;
-            :first-child{
-                font-size: 18px;
-                color: #333;
-            }
-            :last-child{
-                margin-top: 5px;
-                font-size: 14px;
-                color: #666666;
-            }
-        }
-      }
-}
diff --git a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss b/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
deleted file mode 100644
index 602d5120..00000000
--- a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-
-.cn-chart__two-situation-statistics{
-    padding-top: 22px;
-    .box__body {
-        display: flex;
-        align-items: center;
-        margin-left: 33px;
-        padding-top: 22px;
-        .body__progress{
-            display: block;
-            .el-progress__text span{
-                font-size: 16px;
-            }
-        }
-        .body__count{
-            margin-left: 22px;
-            :first-child{
-                font-size: 18px;
-                color: #333;
-            }
-            :last-child{
-                margin-top: 5px;
-                font-size: 14px;
-                color: #666666;
-            }
-        }
-      }
-}
\ No newline at end of file
diff --git a/src/assets/css/components/views/charts/chartAlarmInfo.scss b/src/assets/css/components/views/charts/chartAlarmInfo.scss
deleted file mode 100644
index b923ba8a..00000000
--- a/src/assets/css/components/views/charts/chartAlarmInfo.scss
+++ /dev/null
@@ -1,154 +0,0 @@
-.cn-chart__alarm-info {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .alarm-info__box {
-        height: calc(100% - 40px);
-        width: 100%;
-        overflow: auto;
-
-        .box__body {
-            display: flex;
-            margin-left: 30px;
-            margin-right: 30px;
-            justify-content: flex-start;
-            align-items: center;
-            //height: calc(100% / 9);
-            min-height: 78px;
-            border-bottom: 1px solid #E7EAED;
-
-            .body__content {
-                display: flex;
-
-                .content__icon-box {
-                    position: relative;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-
-                    .icon-box__icon {
-                        width: 30px;
-                        height: 30px;
-                        border-radius: 50%;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                    }
-
-                    .cn-icon-alert {
-                        width: 12px;
-                        position: absolute;
-                        top: calc(50% - 8px);
-                        left: calc(50% - 8px);
-                    }
-                }
-
-                .content__text-box {
-                    margin: 2px 0 2px 17px;
-
-                    .text-box__title {
-                        font-size: 16px;
-                        line-height: 19px;
-                        color: #333333;
-                        font-weight: 400;
-                        div {
-                            max-width: 300px;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                        }
-                    }
-
-                    .text-box__text {
-                        font-size: 12px;
-                        line-height: 14px;
-                        text-align: center;
-                        margin-top: 10px;
-                        display: flex;
-                        align-items: center;
-                        flex-wrap: wrap;
-
-                        &>div {
-                            margin-bottom: 8px;
-                        }
-
-                        .text__time-box {
-                            display: flex;
-                            margin-right: 8px;
-
-                            .cn-icon-time2 {
-                                color: #8FA1BE;
-                                width: 10px;
-                                height: 10px;
-                                font-size: 12px;
-                            }
-
-                            .time-box__start-time {
-                                font-size: 12px;
-                                color: #999999;
-                                line-height: 14px;
-                                font-weight: 400;
-                            }
-                        }
-
-                        .text__duration-box {
-                            height: 14px;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-
-                            .cn-icon-time2 {
-                                color: #8FA1BE;
-                                width: 12px;
-                                height: 12px;
-                                font-size: 12px;
-                                line-height: 12px;
-                            }
-
-                            .time-box__start-time {
-                                font-size: 12px;
-                                color: #999999;
-                                font-weight: 400;
-                            }
-                        }
-
-                        .text__type {
-                            width: auto;
-                            line-height: 16px;
-                            font-size: 12px;
-                            border: 1px solid;
-                            font-weight: 400;
-                            max-width: 150px;
-                            padding-left: 2px;
-                            padding-right: 2px;
-                            margin-right: 8px;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                            word-break: break-all;
-                        }
-
-                        .duration-box__circle {
-                            display: inline-block;
-                            width: 5px;
-                            height: 5px;
-                            border-radius: 50%;
-                            font-size: 12px;
-                            color: #666666;
-                            line-height: 17px;
-                            font-weight: 400;
-                        }
-                    }
-
-                }
-
-            }
-        }
-    }
-
-    .alarm-info__pagination {
-        height: 40px !important;
-        width: 100%;
-    }
-}
diff --git a/src/assets/css/components/views/charts/chartAppBasicInfo.scss b/src/assets/css/components/views/charts/chartAppBasicInfo.scss
deleted file mode 100644
index 17c8244f..00000000
--- a/src/assets/css/components/views/charts/chartAppBasicInfo.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.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;
-      }
-      .cn-chart__body-single-table:nth-of-type(3) {
-        margin-right: 126px;
-      }
-      .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: #E2FCEF;
-        i {
-          color: #41D389;
-        }
-      }
-      .single-value-color-y.single-value__icon {
-        background-color: #FFF0DA;
-        i {
-          color: #FA901C;
-        }
-      }
-      .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
deleted file mode 100644
index 3215599c..00000000
--- a/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.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
deleted file mode 100644
index 45de90d9..00000000
--- a/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.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
deleted file mode 100644
index 876d8181..00000000
--- a/src/assets/css/components/views/charts/chartDomainWhois.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.cn-chart__whois {
-  overflow: auto;
-}
-
diff --git a/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss b/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss
deleted file mode 100644
index 8a799862..00000000
--- a/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout > .vue-grid-item {
-      .cn-chart {
-        .app-detail__related-domain {
-          display: flex;
-          flex-direction: row;
-          height: 100%;
-          width: 100%;
-          .related-domain__list {
-            display: flex;
-            flex-direction: column;
-            flex: 0 0 25%;
-            overflow: auto;
-            padding-bottom: 20px;
-            //border-bottom: 1px solid $--right-box-border-color;
-
-            .related-domain__list-title {
-              padding: 13px 30px 0;
-              height: 40px;
-              color: #6B717B;
-            }
-
-            .related-domain__list-body {
-              display: flex;
-              flex-direction: column;
-              height: calc(100% - 40px);
-              overflow: hidden auto;
-            }
-
-            .related-domain__list-row {
-              padding: 5px 30px;
-              color: #3976CB;
-
-              i {
-                color: #B8C1D1;
-              }
-            }
-          }
-
-          .related-domain__chart {
-            display: flex;
-            flex-direction: row;
-            flex: 1;
-
-            & > div {
-              flex: 0 0 50%;
-              display: flex;
-              flex-direction: column;
-
-              .related-domain__chart-title {
-                padding-left: 20px;
-                line-height: 50px;
-                flex: 0 0 50px;
-              }
-
-              .chart-drawing {
-                flex: 1;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header,.cn-panel2 .chart-list > .dns-screen> .panel-chart .chart-header {
-  border-bottom: 1px solid $--right-box-border-color;
-}
-.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header.is-group-collapse {
-  border-bottom: none;
-}
diff --git a/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss b/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss
deleted file mode 100644
index cb8de62e..00000000
--- a/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout > .vue-grid-item {
-      .cn-chart {
-        .ip-detail__hosted-domain {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          width: 100%;
-          .hosted-domain__list {
-            display: flex;
-            flex-direction: column;
-            flex: 0 0 25%;
-            overflow: auto;
-            padding-bottom: 20px;
-            border-bottom: 1px solid $--right-box-border-color;
-
-            .hosted-domain__list-title {
-              padding: 13px 30px 0;
-              height: 40px;
-              color: #6B717B;
-            }
-
-            .hosted-domain__list-body {
-              display: flex;
-              flex-direction: column;
-              height: calc(100% - 40px);
-              overflow: hidden auto;
-            }
-
-            .hosted-domain__list-row {
-              padding: 5px 30px;
-              color: #3976CB;
-
-              i {
-                color: #B8C1D1;
-              }
-            }
-          }
-
-          .hosted-domain__chart {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-
-            & > div {
-              flex: 0 0 50%;
-              display: flex;
-              flex-direction: column;
-
-              .hosted-domain__chart-title {
-                padding-left: 20px;
-                line-height: 50px;
-                flex: 0 0 50px;
-              }
-
-              .chart-drawing {
-                flex: 1;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/components/views/charts/chartEchartWithTable.scss b/src/assets/css/components/views/charts/chartEchartWithTable.scss
deleted file mode 100644
index b675b2be..00000000
--- a/src/assets/css/components/views/charts/chartEchartWithTable.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        .cn-chart__echarts {
-          display: flex;
-          flex-direction: column;
-          height:100%;
-          .cn-chart__body {
-            flex: auto;
-            display: flex;
-
-            .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;
-              }
-            }
-
-            /*.chart-drawing{
-              height: calc(100% - 36px) !important;
-            }*/
-          }
-          //.cn-chart__body.pie-with-table {
-          //  flex-basis: 60%;
-          //}
-          .cn-chart__footer.pie-with-table {
-            padding: 10px 30px 30px;
-            overflow: auto;
-            .pie-table .el-table__body-wrapper {
-              height: calc(100% - 40px) !important;
-            }
-          }
-        }
-        .pie-table {
-          font-size: 12px;
-          color: #333333;
-          font-weight: 500;
-          border-bottom: none !important;
-
-          .el-table__header-wrapper {
-            .cell {
-              color: #333;
-            }
-          }
-          .el-table__expanded-cell[class*=cell] {
-            padding: 0;
-          }
-          .el-table__expanded-cell[class*=cell]:last-child {
-            border-bottom: none;
-          }
-
-          .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;
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/components/views/charts/chartIpOpenPortBar.scss b/src/assets/css/components/views/charts/chartIpOpenPortBar.scss
deleted file mode 100644
index 1c655d1c..00000000
--- a/src/assets/css/components/views/charts/chartIpOpenPortBar.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.chart-ip-open-port-bar {
-    display: flex;
-    height: 100%;
-    .el-table--border {
-        border: none;
-        .el-table__body-wrapper {
-            overflow-y: auto;
-            height: 261px !important;
-            .el-table__body {
-                tr td:nth-of-type(1) {
-                    padding-left: 28px;
-                }
-            }
-        }
-        .el-table__header-wrapper {
-            .has-gutter {
-                tr th:nth-of-type(1) {
-                    padding-left: 28px;
-                }
-            }
-        }
-    }
-    .el-table--border td{
-        border: none !important;
-    }
-    .el-table--border th{
-        border-right: none !important;
-    }
-    .chart-box{
-        width: 30%;
-        height: 100%;
-        >.title{
-            height: 36px;
-            line-height: 36px;
-            box-sizing: border-box;
-            padding: 0 10px;
-            color: #909399;
-            font-size: 12px;
-            font-weight: bold;
-        }
-        .chart-drawing{
-            height: calc(100% - 36px) !important;
-        }
-    }
-
-}
diff --git a/src/assets/css/components/views/charts/chartRelationShipList.scss b/src/assets/css/components/views/charts/chartRelationShipList.scss
deleted file mode 100644
index 74510d24..00000000
--- a/src/assets/css/components/views/charts/chartRelationShipList.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-$text-color-primary: var(--el-text-color-primary);
-.ship--show.ship {
-  visibility: visible;
-}
-
-.chart-drawing-ship__width {
-  width: 1542px !important;
-}
-
-.ship {
-  width: 320px;
-  background: var(--el-fill-color-blank);
-  border: 1px solid rgba(119, 131, 145, 0.60);
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 3px;
-  position: absolute;
-  display: flex;
-  visibility: hidden;
-  flex-direction: column;
-
-  .ship-title {
-    display: flex;
-    height: 49px;
-    border-bottom: 1px solid var(--el-border-color-light);
-    padding-left: 10px;
-
-    .ship-title-name {
-      line-height: 49px;
-      font-size: 16px;
-      color: $text-color-primary;
-      letter-spacing: 0;
-      font-weight: 500;
-    }
-
-    .ship-title-symbol {
-      padding-right: 5px;
-      line-height: 65px;
-
-      img {
-        width: 30px;
-        height: 30px;
-      }
-    }
-  }
-
-  .ship-body {
-    display: flex;
-    flex-direction: column;
-    margin: 7px;
-
-    .ship-body-basicInfo {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .ship-body-list.ship-body-child {
-      display: flex;
-      flex-direction: column;
-
-      .ship-body-list-child {
-        position: relative;
-
-        .ship-body-list-child-left {
-          margin: 3px 0 3px 10px;
-          display: flex;
-          font-size: 12px;
-          color: var(--el-color-info);
-          font-weight: 400;
-
-          .ship-body-list-child-title {
-            width: 120px;
-          }
-
-          .ship-body-list-child-trip {
-            width: 160px;
-          }
-
-          .ship-body-list-child-value {
-            display: flex;
-
-            .ship-body-list-child-msg {
-              margin-right: 7px;
-            }
-
-            .ship-body-list-child-loading {
-              .ship-body-list-child-charts {
-                width: 38px;
-                height: 16px;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .ship-body-list {
-      margin: 0 0 5px 20px;
-      text-align: left;
-      display: flex;
-      width: calc(100% - 20px);
-      position: relative;
-
-      .ship-body-list-title {
-        width: 130px;
-        font-size: 14px;
-        color: var(--el-text-color-regular);
-        letter-spacing: 0;
-        font-weight: 400;
-        display: flex;
-        flex: 1;
-      }
-
-      .security.ship-body-list-security-length {
-        width: 140px;
-      }
-
-      .ship-body-list-value {
-        font-size: 14px;
-        color: $text-color-primary;
-        letter-spacing: 0;
-        font-weight: 400;
-        display: flex;
-        flex: 1;
-      }
-
-      .ship-body-list-value.security {
-        font-size: 12px;
-        color: var(--el-fill-color-blank);
-        font-weight: 400;
-        border-radius: 2px;
-        margin: 0 3px;
-        width: 200px;
-        flex-wrap: wrap;
-
-        .ship-severity {
-          margin-bottom: 3px;
-        }
-
-        .ship-body-list-security-alert {
-          padding: 1px;
-          text-align: center;
-        }
-
-        .ship-body-list-security-length {
-          margin: 0 10px 0 3px;
-          font-size: 14px;
-          color: $text-color-primary;
-          letter-spacing: 0;
-          font-weight: 400;
-        }
-
-        .no-recent-alerts {
-          font-size: 12px;
-          color: $text-color-primary;
-          font-weight: 400;
-          line-height: 19px;
-
-          i {
-            color: var(--el-color-success);
-            margin-right: 4px;
-          }
-        }
-
-        .ship-body-list-security-alert.critical {
-          background-color: var(--cn-color-critical);
-        }
-
-        .ship-body-list-security-alert.high {
-          background-color: var(--cn-color-high);
-        }
-
-        .ship-body-list-security-alert.info {
-          background-color: var(--cn-color-info);
-        }
-
-        .ship-body-list-security-alert.medium {
-          background-color: var(--cn-color-medium);
-        }
-
-        .ship-body-list-security-alert.low {
-          background-color: var(--cn-color-low);
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss
deleted file mode 100644
index aa2981b2..00000000
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ /dev/null
@@ -1,670 +0,0 @@
-.cn-chart__single-value {
-  .single-value__unit {
-    padding-left: 6px;
-  }
-
-  &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
-    width: unset;
-    flex: 0 0 240px;
-    flex-wrap: wrap;
-
-    .single-value__icon {
-      width: 38px;
-      height: 38px;
-
-      i {
-        font-size: 15px;
-      }
-    }
-
-    .single-value__content {
-      .content__data {
-        font-size: 14px;
-        color: #333;
-
-        .single-value__unit {
-          font-size: 14px;
-          color: #333;
-        }
-      }
-
-      .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 100px;
-    }
-
-    .single-value__icon {
-      display: flex;
-      justify-content: center;
-      width: 56px;
-      height: 56px;
-      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;
-      padding-right: 10px;
-
-      .content__data {
-        padding-bottom: 10px;
-        font-size: 18px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px;
-        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: 90%;
-    margin: auto;
-
-    .single-value-icon__box {
-      flex: 0 0 74px;
-    }
-
-    .single-value__icon {
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-      position: relative;
-      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: 0 10px;
-
-      .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: flex-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: 18px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__chart {
-        flex: auto
-      }
-    }
-  }
-
-  &.cn-chart__single-value--icon-doh {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
-    border-radius: 2px;
-
-    .single-value-icon__box {
-      flex: 0 0 80px;
-    }
-
-    .single-value__icon {
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-      position: relative;
-      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;
-      align-items: center;
-      justify-content: center;
-      padding: 0 10px;
-      margin-left: 20px;
-
-      .content__title {
-        display: flex;
-        align-items: center;
-        margin: 16px 0 27px 0;
-        font-size: 16px;
-        color: #333333;
-        line-height: 22px;
-        font-weight: 500;
-      }
-
-      .content__data {
-        display: flex;
-        padding-top: 5%;
-        height: 50%;
-        flex: auto;
-        font-size: 24px;
-        color: #333333;
-        font-weight: bold;
-
-        .content__data__doh {
-          .content__data__doh__count {
-            font-size: 30px;
-            color: #333333;
-            font-weight: 500;
-          }
-
-          .content__data__doh__percent {
-            margin-top: 10px;
-            font-size: 14px;
-            color: #666666;
-            font-weight: 400;
-
-            span {
-              font-size: 14px;
-              color: #FC8157;
-              font-weight: 500;
-              margin-left: 10px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.cn-chart__single-value--protocol {
-    height: 100%;
-    width: 100%;
-    .single-value__content {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      flex-direction: column;
-      .single-value__data {
-        display: flex;
-        flex-direction: column;
-        padding: 10px 20px 10px 18px;
-        .content__title {
-          font-size: 16px;
-          color: #333333;
-        }
-      }
-      .content__data {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .content__data-protocol:nth-of-type(1) {
-        margin-bottom: 50px;
-        span:nth-of-type(2) {
-          font-size: 12px;
-          color: #FC8157;
-          font-weight: 500;
-        }
-      }
-      .content__data-protocol:nth-of-type(2) {
-        span:nth-of-type(2) {
-          font-size: 12px;
-          color: #FBA342;
-          font-weight: 500;
-        }
-      }
-      .content__data-protocol {
-        display: flex;
-        height: 68px;
-        text-align: left;
-        .content__data-protocol-all {
-          flex: 1.5;
-        }
-        .content__data-protocol-icon {
-          display: flex;
-          width: 68px;
-          height: 100%;
-          margin: auto;
-          line-height: 68px;
-          border-radius: 100%;
-          justify-content: center;
-          i {
-            font-size: 26px;
-          }
-        }
-        .content__data-protocol-value {
-          flex: 2;
-          display: flex;
-          justify-content: space-between;
-          flex-direction: column;
-          .content__data-protocol-value-title {
-            margin-bottom: 7px;
-            font-size: 14px;
-            color: #666666;
-            font-weight: 400;
-          }
-          .content__data-protocol-value-num {
-            font-size: 26px;
-            color: #333333;
-            font-weight: 500;
-          }
-        }
-        .content__data-protocol-percent {
-          flex: 2;
-          display: flex;
-          justify-content: center;
-          height: 68px;
-          text-align: left;
-          font-size: 14px;
-          color: #666666;
-          font-weight: 400;
-          line-height: 95px;
-        }
-      }
-    }
-  }
-
-  &.cn-chart__single-value--percentile-right {
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    height: 100%;
-    flex: 0 0 auto;
-    flex-wrap: nowrap;
-    margin-bottom: 10px;
-
-    .single-value-icon__box {
-      display: flex;
-      align-items: center;
-      justify-content: left;
-      margin-right: 5px;
-      flex: 0 0 80;
-    }
-
-    .single-value__icon {
-      display: flex;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-
-      i {
-        display: flex;
-        align-items: center;
-        font-size: 20px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      flex-direction: column;
-      max-width: 60%;
-      padding-right: 10px;
-
-      .data__title-in-one {
-        display:flex;
-        flex-direction: row;
-        align-items: center;
-      }
-
-      .content__data {
-        margin-bottom: 5px;
-        font-size: 14px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__title {
-        white-space: nowrap;
-        font-size: 12px !important;
-        color: #7e8081;
-        margin-bottom: 5px;
-        padding: 3px 4px 3px 3px;
-      }
-
-      .title-background-color {
-        background-color: #EFF6FE;
-        border-radius: 4px;
-      }
-
-      .content__percentile {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 12px;
-        color: #666666;
-        display:flex;
-        flex-direction: row;
-
-        .circle__content {
-          display:flex;
-          flex-display:row;
-          margin-right:4px;
-
-          .percentile__title-color {
-            color:#9b9b9b
-          }
-        }
-      }
-
-      .circle {
-        position: relative;
-        width: 6px;
-        height: 6px;
-        line-height: 6px;
-        border-radius: 50%;
-        -moz-border-radius: 50%;
-        margin: auto;
-        margin-right: 4px;
-        z-index: 1;
-      }
-
-      .circle.circle-p50 {
-        background: #ffa200;
-
-      }
-      .circle.circle-p90 {
-        background: #23bf9a;
-      }
-
-      &.single-value__content--with-chart {
-        .content__title {
-          border-bottom: 1px solid $--content-right-background-color;
-        }
-      }
-
-      .single-value__unit {
-        padding-left:0px;
-        padding-right: 5px;
-        color: #333333;
-        font-size: 14px;
-        font-weight: bold;
-      }
-    }
-  }
-
-  &.cn-chart__single-value--percentile-left {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    width: unset;
-
-    .single-value-icon__box {
-      display: flex;
-      align-items: flex-start;
-      justify-content: right;
-      margin: 0 22px 22px 0;
-      flex: 0 0 80;
-    }
-
-    .single-value__icon {
-      display: flex;
-      justify-content: center;
-      width: 60px;
-      height: 60px;
-      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;
-      margin-left:25px;
-
-      .content__data {
-        margin-bottom: 5%;
-        font-size: 22px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px !important;
-        color: #7e8081;
-        margin-bottom: 7%;
-        font-weight:400;
-      }
-
-      .content__percentile {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 12px;
-        color: #666666;
-        display:flex;
-        flex-direction: row;
-        font-weight: bold;
-
-        .circle__content {
-          display:flex;
-          flex-display:row;
-          margin-right:15px;
-
-          .percentile__title-color {
-            color:#9b9b9b;
-            font-weight: 500;
-          }
-        }
-      }
-
-      .circle {
-        position: relative;
-        width: 7px;
-        height: 7px;
-        line-height: 7px;
-        border-radius: 50%;
-        -moz-border-radius: 50%;
-        margin: auto;
-        margin-right: 4px;
-        z-index: 1;
-      }
-
-      .circle.circle-p50 {
-        background: #ffa200;
-
-      }
-      .circle.circle-p90 {
-        background: #23bf9a;
-      }
-
-      &.single-value__content--with-chart {
-        .content__title {
-          border-bottom: 1px solid $--content-right-background-color;
-        }
-      }
-
-      .single-value__unit {
-        color: #333333;
-        font-size: 22px;
-        font-weight: bold;
-      }
-    }
-  }
-
-}
diff --git a/src/assets/css/components/views/charts/chartTable.scss b/src/assets/css/components/views/charts/chartTable.scss
deleted file mode 100644
index 62591375..00000000
--- a/src/assets/css/components/views/charts/chartTable.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.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;
-      font-size: 14px;
-      .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/ipBasicInfo.scss b/src/assets/css/components/views/charts/ipBasicInfo.scss
deleted file mode 100644
index 678d62d5..00000000
--- a/src/assets/css/components/views/charts/ipBasicInfo.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.cn-chart__ip-basic {
-  display: flex;
-  padding: 30px  60px 0 30px;
-  .cn-chart__ip-basic-info {
-    padding-right: 80px;
-  }
-  &>.el-descriptions {
-    flex: 0 0 350px;
-  }
-  .chart-location {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-  .el-descriptions :not(.is-bordered) td {
-    padding-bottom: 5px !important;
-  }
-  .el-descriptions__content {
-    color: #3976CB;
-  }
-}
-
diff --git a/src/assets/css/components/views/charts2/dnsActiveMaliciousDomain.scss b/src/assets/css/components/views/charts2/dnsActiveMaliciousDomain.scss
deleted file mode 100644
index faa7f81a..00000000
--- a/src/assets/css/components/views/charts2/dnsActiveMaliciousDomain.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.dns-mailcious-domain {
-  $blue: #046ECA;
-  $fontFamily: NotoSansHans-Medium;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .dns-mailcious-domain-title {
-    font-size: 14px;
-    color: #353636;
-    margin-bottom: 12px;
-  }
-
-  .dns-mailcious-domain-table {
-    height: calc(100% - 30px) !important;
-    border: 1px solid #E2E5EC;
-    border-radius: 4px;
-    font-size: 12px;
-    padding: 1px;
-
-    .el-table__header-wrapper {
-      tr th {
-        padding: 4px 0;
-
-        .dns-column__span {
-          font-size: 12px;
-          color: #353636;
-          font-weight: 600;
-        }
-      }
-    }
-    .el-table__body-wrapper.is-scrolling-none {
-      tr td {
-        padding: 6.49px 0;
-      }
-    }
-  }
-
-  .data-mailcious-domain-table {
-    display: flex !important;
-    height: auto;
-    line-height: 20.4px;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .data-column-domain, .data-column-ips {
-      font-family: NotoSansSChineseRegular;
-      width: 210px;
-      font-size: 12px;
-      color: $blue;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-
-      .data-column-ips-hover-block {
-        height: 24px;
-        line-height: 24px;
-        color: #046ECA;
-      }
-    }
-  }
-
-  .el-table--group::after, .el-table--border::after, .el-table::before {
-    height: 0px;
-  }
-}
diff --git a/src/assets/css/components/views/charts2/dnsEventChart.scss b/src/assets/css/components/views/charts2/dnsEventChart.scss
deleted file mode 100644
index 33ebec62..00000000
--- a/src/assets/css/components/views/charts2/dnsEventChart.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.dns-event-chart {
-  width: 100%;
-  height: 100%;
-  border: 1px solid $--border-color;
-  border-radius: 4px;
-  display: flex;
-  justify-content: space-between;
-
-  .dns-event-chart-pie {
-    width: 33%;
-    height: 100%;
-  }
-
-  .dns-event-chart-bar {
-    width: 67%;
-    height: 100%;
-  }
-
-}
diff --git a/src/assets/css/components/views/charts2/dnsEventChartByPie.scss b/src/assets/css/components/views/charts2/dnsEventChartByPie.scss
deleted file mode 100644
index f0b7f3c5..00000000
--- a/src/assets/css/components/views/charts2/dnsEventChartByPie.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.dns-event {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border: none;
-
-  .dns-event-pie {
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-    display: flex;
-    border: none;
-
-    .dns-event-pies {
-      height: 100%;
-      width: 100%;
-      display: flex;
-      align-items: center;
-
-      .chart-drawing {
-        height: 100%;
-        width: 50%;
-      }
-
-      .color-block {
-        width: 8px;
-        height: 8px;
-        margin-right: 8px;
-        margin-top: 3px;
-      }
-    }
-  }
-}
-
diff --git a/src/assets/css/components/views/charts2/dnsRecentEvents.scss b/src/assets/css/components/views/charts2/dnsRecentEvents.scss
deleted file mode 100644
index 35b840ea..00000000
--- a/src/assets/css/components/views/charts2/dnsRecentEvents.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.dns-recent-event.npm-app-event {
-  .npm-app-event-table.dns-recent-event-table {
-    .el-table__body-wrapper.is-scrolling-none {
-      tr td {
-        padding: 6.49px 0;
-      }
-    }
-  }
-  .data-applications {
-    font-size: 12px;
-    color: #353636;
-    .cn-icon-events-type {
-      font-size: 12px;
-    }
-    .cn-icon-events-type.performance {
-      color: #D9C74B;
-    }
-    .cn-icon-events-type.security {
-      color: #E99F67;
-    }
-  }
-  .dns-recent-event-header {
-    display: flex;
-    justify-content: space-between;
-    .dns-recent-event-title {
-      font-size: 14px;
-      color: #353636;
-      margin-bottom: 13px;
-    }
-    .dns-recent-event-select {
-      display: flex;
-      .metric-select:nth-of-type(2) {
-        margin-left: 20px;
-      }
-      .metric-select:nth-of-type(1) {
-        .option__select.select-column {
-          .el-input__inner {
-            width: 155px;
-          }
-        }
-      }
-    }
-  }
-  .data-eventType {
-    background: none;
-    padding: 0;
-    margin-right: 0;
-    margin-bottom: 0;
-    font-weight: 600;
-  }
-}
diff --git a/src/assets/css/components/views/charts2/dnsTrafficLine.scss b/src/assets/css/components/views/charts2/dnsTrafficLine.scss
deleted file mode 100644
index 0b08f51a..00000000
--- a/src/assets/css/components/views/charts2/dnsTrafficLine.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.line.network.dns-traffic-line {
-  
-}
diff --git a/src/assets/css/components/views/charts2/panel.scss b/src/assets/css/components/views/charts2/panel.scss
index 3d877e89..5e8d9f58 100644
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -11,6 +11,7 @@
 }
 .panel-box2 {
   height: calc(100% - 20px);
+
   .panel__header {
     display: flex;
     justify-content: space-between;
@@ -20,10 +21,10 @@
     .panel__title {
       font-size: 24px;
       line-height: 24px;
-      font-weight: 900;
-      //color: #353636;
-      color: $--text-color-1;
-      display:flex;
+      font-weight: bold;
+      color: var(--el-text-color-primary);
+      display: flex;
+
       .score {
         .circle-icon {
           border-radius: 3px;
@@ -33,25 +34,23 @@
           margin-right: 4px;
         }
         .data-score-red {
-          background: #E26154;
+          background: var(--el-color-error);
         }
         .data-score-yellow {
-          background: #E5A219;
+          background: var(--el-color-warning);
         }
         .data-score-green {
-          background: #749F4D;
+          background: var(--el-color-success);
         }
-        height:24px;
+        height: 24px;
         font-size: 12px;
-        color: #353636;
-        font-weight: 500;
-        margin-left:8px;
-        padding-right:13px;
-        background: #F7F7F7;
-        border: 1px solid #E2E5EC;
-        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+        color: var(--el-text-color-primary);
+        margin-left: 8px;
+        padding-right: 13px;
+        background: var(--el-fill-color-light);
+        border: 1px solid var(--el-border-color-light);
         border-radius: 4px;
-        display:flex;
+        display: flex;
         align-items: center;
         justify-content: center;
       }
@@ -68,8 +67,7 @@
         i {
           font-size: 18px;
           cursor: pointer;
-          color: #626262;
-          font-weight: 500;
+          color: var(--el-text-color-regular);
         }
       }
     }
@@ -82,13 +80,13 @@
 
         .select-prefix {
           font-size: 14px;
-          color: #999;
+          color: var(--el-text-color-secondary);
           padding: 0 6px 0 3px;
         }
         .el-input__inner {
           font-size: 14px;
-          color: #353636;
-          background-color: #FFFFFF;
+          color: var(--el-text-color-primary);
+          background-color: var(--el-fill-color-blank);
         }
       }
       .panel__time {
@@ -102,21 +100,22 @@
   .chart-list {
     height: calc(100% - 68px);
     overflow: auto;
+
     &>.vue-grid-layout {
       margin-top: -20px;
       .header__operation--cancel:hover,.el-button:hover,.app-card-title-more-delete:hover {
-        background: #EBF1F4;
-        border: 1px solid rgba(0,0,0,0.15);
+        background: var(--cn-bg-color-light);
+        border: 1px solid var(--el-border-color-light);
       }
       .header__operation--cancel:active,.el-button:active,.app-card-title-more-delete:active {
-        background: #E0E7EA;
-        border: 1px solid rgba(0,0,0,0.15);
+        background: var(--el-fill-color-darker);
+        border: 1px solid var(--el-border-color-light);
       }
       .header__operation--save:hover {
-        background: #57B8D9;
+        background: var(--el-color-business-light-1);
       }
       .header__operation--save:active {
-        background: #31A5CD;
+        background: var(--el-color-business);
       }
     }
   }
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index 688ae741..231d7d52 100644
--- a/src/views/charts2/Chart.vue
+++ b/src/views/charts2/Chart.vue
@@ -136,24 +136,6 @@
         :chart="chart"
         @toggleLoading="toggleLoading"
     ></link-direction-grid>
-    <dns-active-malicious-domain
-        v-else-if="chart.type === typeMapping.dnsInsight.dnsActiveMaliciousDomain"
-        :time-filter="timeFilter"
-        :chart="chart"
-        @toggleLoading="toggleLoading"
-    ></dns-active-malicious-domain>
-    <dns-event-chart
-        v-else-if="chart.type === typeMapping.dnsInsight.dnsEventChart"
-        :time-filter="timeFilter"
-        :chart="chart"
-        @toggleLoading="toggleLoading"
-    ></dns-event-chart>
-    <dns-recent-events
-        v-else-if="chart.type === typeMapping.dnsInsight.dnsRecentEvents"
-        :time-filter="timeFilter"
-        :chart="chart"
-        @toggleLoading="toggleLoading"
-    ></dns-recent-events>
     <dns-traffic-line
         v-else-if="chart.type === typeMapping.dnsInsight.dnsTrafficLine"
         :time-filter="timeFilter"
@@ -228,9 +210,6 @@ import NpmTrafficLine from '@/views/charts2/charts/npm/NpmTrafficLine'
 import LinkBlock from '@/views/charts2/charts/linkMonitor/LinkBlock'
 import LinkTrafficSankey from '@/views/charts2/charts/linkMonitor/LinkTrafficSankey'
 import LinkTrafficLine from '@/views/charts2/charts/linkMonitor/LinkTrafficLine'
-import DnsActiveMaliciousDomain from '@/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain'
-import DnsEventChart from '@/views/charts2/charts/dnsInsight/DnsEventChart'
-import DnsRecentEvents from '@/views/charts2/charts/dnsInsight/DnsRecentEvents'
 import DnsTrafficLine from '@/views/charts2/charts/dnsInsight/DnsTrafficLine'
 import EntityDetailBasicInfo from '@/views/charts2/charts/entityDetail/EntityDetailBasicInfo'
 import EntityDetailLine from '@/views/charts2/charts/entityDetail/EntityDetailLine'
@@ -268,9 +247,6 @@ export default {
     LinkBlock,
     LinkTrafficSankey,
     LinkTrafficLine,
-    DnsActiveMaliciousDomain,
-    DnsEventChart,
-    DnsRecentEvents,
     DnsTrafficLine,
     EntityDetailBasicInfo,
     EntityDetailSubscriberKpi,
diff --git a/src/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain.vue b/src/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain.vue
deleted file mode 100644
index 70ea24b2..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div class="dns-mailcious-domain">
-    <div class="dns-mailcious-domain-title">
-      {{ $t('dns.activeMaliciousDomains') }}
-    </div>
-    <el-table :data="tableData" class="dns-mailcious-domain-table" height="100%">
-      <template v-for="(item, index) in customTableTitles" :key="index">
-        <el-table-column class="data-column">
-          <!--表头-->
-          <template #header>
-            <span class="dns-column__span">{{ $t(item.label) }}</span>
-          </template>
-          <!--表格内容-->
-          <template #default="scope" :column="item">
-            <div class="data-mailcious-domain-table">
-              <template v-if="item.prop === 'domain'">
-                <span class="data-column-domain">{{ $t(scope.row[item.prop]) }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'ips'">
-                <el-popover placement="right" :width="126" trigger="hover" v-if="scope.row['ips'].split(',').length >=3">
-                  <template #reference>
-                    <span class="data-column-ips">{{ $t(scope.row[item.prop]) }}</span>
-                  </template>
-                  <!--超过3个ip就省略号显示，移动鼠标block块展示，并换行-->
-                  <pre style="max-height: 152px;margin: 0 -10px -15px 0;overflow: scroll;"><span style="height: 24px;line-height: 24px;color: #046ECA;">{{scope.row[item.prop].replace(/,/g, '\n')}}</span></pre>
-                </el-popover>
-                <span v-else class="data-column-ips">{{ $t(scope.row[item.prop]) }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'numberOfIPs'">
-                <span>{{ scope.row['ips'].split(',').length }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'queries'">
-                <span>{{ scope.row[item.prop] }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'firstSeenTime'">
-                <span>{{ dateFormatByAppearance(scope.row[item.prop]) }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'lastSeenTime'">
-                <span>{{ dateFormatByAppearance(scope.row[item.prop]) }}</span>
-              </template>
-              <span v-else>-</span>
-            </div>
-          </template>
-        </el-table-column>
-      </template>
-
-      <template v-slot:empty>
-        <div class="table-no-data" v-show="isNoData">
-          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
-        </div>
-      </template>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { api } from '@/utils/api'
-import { getSecond } from '@/utils/date-util'
-import axios from 'axios'
-import chartMixin from '@/views/charts2/chart-mixin'
-
-export default {
-  name: 'DnsActiveMaliciousDomain',
-  data () {
-    return {
-      tableData: [], // 表格数据
-      // 表头数据
-      customTableTitles: [
-        {
-          label: 'dns.domain',
-          prop: 'domain'
-        },
-        {
-          label: 'dns.IPs',
-          prop: 'ips'
-        },
-        {
-          label: 'dns.numberOfIPs',
-          prop: 'numberOfIPs'
-        },
-        {
-          label: 'dns.queries',
-          prop: 'queries'
-        },
-        {
-          label: 'dns.firstSeenTime',
-          prop: 'firstSeenTime'
-        },
-        {
-          label: 'dns.lastSeenTime',
-          prop: 'lastSeenTime'
-        }
-      ],
-      isNoData: false // 无数据标识，true为无数据，false有数据
-    }
-  },
-  mixins: [chartMixin],
-  watch: {
-    timeFilter: {
-      handler (n) {
-        if (n) {
-          this.initData()
-        }
-      }
-    }
-  },
-  mounted () {
-    this.initData()
-  },
-  methods: {
-    initData () {
-      this.toggleLoading(true)
-
-      this.tableData = []
-
-      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime)
-      }
-      this.toggleLoading(true)
-      axios.get(api.dnsInsight.activeMaliciousDomain, { params: params }).then(response => {
-        const res = response.data
-        if (response.status === 200) {
-          this.isNoData = res.data.result.length === 0
-          this.tableData = res.data.result
-        } else {
-          this.isNoData = true
-          this.tableData = []
-        }
-      }).finally(() => {
-        this.toggleLoading(false)
-      })
-    }
-  },
-  computed: {}
-}
-</script>
diff --git a/src/views/charts2/charts/dnsInsight/DnsEventChart.vue b/src/views/charts2/charts/dnsInsight/DnsEventChart.vue
deleted file mode 100644
index 8991cbe3..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsEventChart.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <div class="dns-event-chart">
-    <chart-no-data v-if="isNoData"></chart-no-data>
-    <template v-else>
-      <div class="dns-event-chart-pie">
-        <dns-event-chart-by-pie :timeFilter="timeFilter" :pieData="pieData"/>
-      </div>
-      <div class="dns-event-chart-bar">
-        <dns-event-chart-by-bar :timeFilter="timeFilter" :series="series"/>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { shallowRef } from 'vue'
-import axios from 'axios'
-import { api } from '@/utils/api'
-import chartMixin from '@/views/charts2/chart-mixin'
-import dnsEventChartByPie from './DnsEventChartByPie'
-import dnsEventChartByBar from './DnsEventChartByBar'
-import { getSecond } from '@/utils/date-util'
-import ChartNoData from '@/views/charts/charts/ChartNoData'
-
-export default {
-  name: 'DnsEventChart',
-  props: {
-    type: String
-  },
-  components: {
-    ChartNoData,
-    dnsEventChartByPie,
-    dnsEventChartByBar
-  },
-  mixins: [chartMixin],
-  setup () {
-    return {
-      myChart: shallowRef(null)
-    }
-  },
-  data () {
-    return {
-      pieData: [], // 饼状图数据
-      series: [], // 柱状图的series数据
-      isNoData: false
-    }
-  },
-  watch: {
-    timeFilter: {
-      handler (n) {
-        this.initData()
-      }
-    }
-  },
-  mounted () {
-    this.initData()
-  },
-  methods: {
-    initData () {
-      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime)
-      }
-      this.toggleLoading(true)
-      axios.get(api.dnsInsight.eventChart, { params }).then(res => {
-        const data = res.data.data.result
-        this.pieData = []
-
-        if (data !== undefined && data.length > 0) {
-          this.isNoData = false
-          const series = []
-          data.forEach((item, index) => {
-            this.pieData.push({
-              name: item.type,
-              value: item.analysis.sum
-            })
-
-            const tempArr = []
-            tempArr.push(item.values)
-            series.push({
-              data: item.values,
-              stack: 'total',
-              name: item.type,
-              barWidth: 26,
-              type: 'bar',
-              emphasis: {
-                focus: 'series'
-              }
-            })
-          })
-          this.series = series
-        } else {
-          this.isNoData = true
-        }
-      }).catch(e => {
-        console.error(e)
-        this.isNoData = true
-      }).finally(() => {
-        this.toggleLoading(false)
-      })
-    },
-    resize () {
-      this.myChart.resize()
-    }
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
-  }
-}
-</script>
diff --git a/src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue b/src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue
deleted file mode 100644
index d03d0913..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div class="npm-event dns-event">
-    <div class="npm-event-pie dns-event-pie">
-      <chart-no-data v-if="isNoData"></chart-no-data>
-
-      <div class="npm-event-pies dns-event-pies" v-else>
-        <!--堆叠柱状图-->
-        <div style="width: 100%;height: 100%" id="chart"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { shallowRef } from 'vue'
-import * as echarts from 'echarts'
-import { stackedBarChartOption } from '@/views/charts2/charts/options/echartOption'
-import ChartNoData from '@/views/charts/charts/ChartNoData'
-import chartMixin from '@/views/charts2/chart-mixin'
-
-export default {
-  name: 'DnsEventChartByPie',
-  props: {
-    type: String,
-    timeFilter: Object,
-    series: Array
-  },
-  components: {
-    ChartNoData
-  },
-  mixins: [chartMixin],
-  setup () {
-    return {
-      myChart: shallowRef(null)
-    }
-  },
-  data () {
-    return {
-      chartData: [],
-      timer: null,
-      isNoData: false
-    }
-  },
-  watch: {
-    timeFilter: {
-      handler (n) {
-        this.eventsByTypeData()
-      }
-    },
-    series: {
-      deep: true,
-      handler (n) {
-        this.eventsByTypeData()
-      }
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      this.eventsByTypeData()
-    })
-    window.addEventListener('resize', this.resize)
-  },
-  methods: {
-    init () {
-      const _this = this
-      const dom = document.getElementById('chart')
-      if (!this.myChart) {
-        this.myChart = echarts.init(dom)
-        this.chartOption = stackedBarChartOption
-        this.chartOption.series = this.series
-
-        this.myChart.on('mouseover', function (params) {
-          _this.myChart.setOption(_this.chartOption)
-        })
-        this.myChart.on('mouseout', function (params) {
-          _this.myChart.setOption(_this.chartOption)
-        })
-
-        this.myChart.setOption(this.chartOption)
-      } else {
-        this.chartOption.series = this.series
-        this.myChart.setOption(this.chartOption)
-      }
-    },
-    eventsByTypeData () {
-      this.toggleLoading(false)
-      if (this.series.length > 0) {
-        this.init()
-        this.toggleLoading(true)
-      }
-    },
-    resize () {
-      this.myChart.resize()
-    }
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
-    if (this.myChart) {
-      echarts.dispose(this.myChart)
-    }
-  }
-}
-</script>
diff --git a/src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue b/src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue
deleted file mode 100644
index da46039c..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div class="npm-event dns-event">
-    <div class="npm-event-pie dns-event-pie">
-      <chart-no-data v-if="isNoData"></chart-no-data>
-
-      <div class="npm-event-pies dns-event-pies" v-else>
-        <!--pie图-->
-        <div class="chart-drawing" id="chart1"></div>
-
-        <div class="npm-event-pie-legends">
-          <div class="npm-event-pie-legend">
-            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
-              <div class="npm-event-pie-legend-type">
-                <span class="color-block" :style="{background: chartColor6[index]}"></span>
-                <div class="npm-event-pie-legend-type-severity">{{ legend.name }}</div>
-              </div>
-            </template>
-          </div>
-
-          <div class="npm-event-pie-legend">
-            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
-              <div class="npm-event-pie-legend-total">{{ legend.value }}</div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { shallowRef } from 'vue'
-import * as echarts from 'echarts'
-import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
-import ChartNoData from '@/views/charts/charts/ChartNoData'
-import chartMixin from '@/views/charts2/chart-mixin'
-import { chartColor6 } from '@/utils/constants'
-
-export default {
-  name: 'DnsEventChartByPie',
-  props: {
-    type: String,
-    timeFilter: Object,
-    pieData: Array
-  },
-  components: {
-    ChartNoData
-  },
-  mixins: [chartMixin],
-  setup () {
-    return {
-      myChart: shallowRef(null)
-    }
-  },
-  data () {
-    return {
-      chartData: [],
-      timer: null,
-      isNoData: false,
-      chartColor6: chartColor6
-    }
-  },
-  watch: {
-    timeFilter: {
-      handler (n) {
-        this.eventsByTypeData()
-      }
-    },
-    pieData: {
-      deep: true,
-      handler (n) {
-        this.eventsByTypeData()
-      }
-    }
-  },
-  methods: {
-    init () {
-      const _this = this
-      const dom = document.getElementById('chart1')
-      if (!this.myChart) {
-        this.myChart = echarts.init(dom)
-        this.chartOption = pieChartOption3
-        this.chartOption.color = chartColor6
-        this.chartOption.series[0].data = this.chartData
-        this.chartOption.series[0].label = {
-          show: true,
-          position: 'center',
-          fontFamily: 'NotoSansHans-Medium',
-          fontSize: 20,
-          fontWeight: 500,
-          formatter: function () {
-            let num = 0
-            _this.chartData.forEach(t => {
-              num += t.value
-            })
-            return num
-          }
-        }
-        this.myChart.on('mouseover', function (params) {
-          _this.chartOption.series[0].label.show = false
-          _this.myChart.setOption(_this.chartOption)
-        })
-        this.myChart.on('mouseout', function (params) {
-          _this.chartOption.series[0].label.show = true
-          _this.myChart.setOption(_this.chartOption)
-        })
-        this.myChart.setOption(this.chartOption)
-      } else {
-        this.chartOption.color = chartColor6
-        this.chartOption.series[0].data = this.chartData
-        this.chartOption.series[0].label = {
-          show: true,
-          position: 'center',
-          fontFamily: 'NotoSansHans-Medium',
-          fontSize: 20,
-          fontWeight: 500,
-          formatter: function () {
-            let num = 0
-            _this.chartData.forEach(t => {
-              num += t.value
-            })
-            return num
-          }
-        }
-        this.myChart.setOption(this.chartOption)
-      }
-    },
-    eventsByTypeData () {
-      this.toggleLoading(false)
-      if (this.pieData.length > 0) {
-        this.chartData = this.pieData
-        this.init()
-        this.toggleLoading(true)
-      }
-    },
-    resize () {
-      this.myChart.resize()
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      this.eventsByTypeData()
-    })
-    window.addEventListener('resize', this.resize)
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
-    if (this.myChart) {
-      echarts.dispose(this.myChart)
-    }
-  }
-}
-</script>
diff --git a/src/views/charts2/charts/dnsInsight/DnsRecentEvents.vue b/src/views/charts2/charts/dnsInsight/DnsRecentEvents.vue
deleted file mode 100644
index 145e4413..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsRecentEvents.vue
+++ /dev/null
@@ -1,244 +0,0 @@
-<template>
-  <div class="dns-recent-event npm-app-event">
-    <div class="dns-recent-event-header">
-      <div class="dns-recent-event-title">{{ $t('network.recentEvents') }}</div>
-      <div class="dns-recent-event-select">
-        <div class="metric-select">
-          <el-select v-model="tableType"
-                     class="option__select select-column"
-                     popper-class="option-popper common-select"
-                     :teleported="false"
-                     key="tabMetric"
-                     :placeholder="$t('overall.select')"
-                     @change="changeMetric"
-                     size="small"
-                     width="100">
-            <el-option
-                v-for="item in options"
-                :key="item.label"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-          <span>{{$t('overall.type')}}：</span>
-        </div>
-        <div class="metric-select">
-          <el-select v-model="tableSeverity"
-                     class="option__select select-column"
-                     popper-class="option-popper common-select"
-                     :teleported="false"
-                     key="tabMetric"
-                     :placeholder="$t('overall.select')"
-                     @change="changeMetric"
-                     size="small"
-                     width="100">
-            <el-option
-                v-for="item in severityOption"
-                :key="item.label"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-          <span>{{$t('network.severity')}}：</span>
-        </div>
-      </div>
-    </div>
-    <el-table
-        id="tabTable"
-        ref="dataTable"
-        :data="tableData"
-        class="npm-app-event-table dns-recent-event-table"
-        height="100%"
-        empty-text=""
-    >
-      <template v-for="(item, index) in customTableTitles" :key="index">
-        <el-table-column class="data-column" :min-width="columnWidth(index)">
-          <template #header>
-            <span class="data-column__span">{{$t(item.label)}}</span>
-          </template>
-          <template  #default="scope" :column="item">
-            <div class="data-app-event-table">
-              <template v-if="item.prop === 'type'">
-                <span v-if="scope.row[item.prop] === 'Performance Event'" class="data-applications">
-                  <span class="cn-icon cn-icon-events-type performance">&nbsp;</span>
-                  {{scope.row[item.prop]}}
-                </span>
-                <span v-else class="data-applications">
-                  <span class="cn-icon cn-icon-events-type security">&nbsp;</span>
-                  {{scope.row[item.prop]}}
-                </span>
-              </template>
-              <template v-else-if="item.prop === 'event'">
-                <span class="data-eventType">{{scope.row[item.prop]}}</span>
-              </template>
-              <template v-else-if="item.prop === 'severity'">
-                <template v-if="scope.row[item.prop]==='critical'">
-                  <div v-for="(item, index) in 5" class="red-dot" :key="index"></div>
-                </template>
-                <template v-else-if="scope.row[item.prop]==='high'">
-                  <div v-for="(item, index) in 4" class="red-dot" :key="index"></div>
-                  <div class="grey-dot"></div>
-                </template>
-                <template v-else-if="scope.row[item.prop]==='medium'">
-                  <div v-for="(item, index) in 3" class="red-dot" :key="index"></div>
-                  <div v-for="(item, index) in 2" class="grey-dot" :key="index"></div>
-                </template>
-                <template v-else-if="scope.row[item.prop]==='low'">
-                  <div v-for="(item, index) in 2" class="red-dot" :key="index"></div>
-                  <div v-for="(item, index) in 3" class="grey-dot" :key="index"></div>
-                </template>
-                <template v-else-if="scope.row[item.prop]==='info'">
-                  <div v-for="(item, index) in 1" class="red-dot" :key="index"></div>
-                  <div v-for="(item, index) in 4" class="grey-dot" :key="index"></div>
-                </template>
-                <span class="data-severity" >{{scope.row[item.prop]}}</span>
-              </template>
-              <span v-else>-</span>
-            </div>
-          </template>
-        </el-table-column>
-      </template>
-      <template v-slot:empty>
-        <div class="table-no-data" v-show="isNoData">
-          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
-        </div>
-      </template>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { api } from '@/utils/api'
-import { getSecond } from '@/utils/date-util'
-import axios from 'axios'
-import chartMixin from '@/views/charts2/chart-mixin'
-import { useRoute } from 'vue-router'
-import { ref } from 'vue'
-import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
-
-export default {
-  name: 'DnsRecentEvents',
-  setup () {
-    const { query } = useRoute()
-    const tableType = ref(query.tableType || '')
-    const tableSeverity = ref(query.tableSeverity || '')
-    return {
-      tableType,
-      tableSeverity
-    }
-  },
-  data () {
-    return {
-      options: [
-        {
-          label: this.$t('dnsInsight.securityEvent'),
-          value: 'securityEvent'
-        },
-        {
-          label: this.$t('dnsInsight.PerEvent'),
-          value: 'performanceEvent'
-        }
-      ],
-      severityOption: [
-        {
-          value: 'critical',
-          label: 'Critical'
-        },
-        {
-          value: 'high',
-          label: 'High'
-        },
-        {
-          value: 'medium',
-          label: 'Medium'
-        },
-        {
-          value: 'low',
-          label: 'Low'
-        },
-        {
-          value: 'info',
-          label: 'Info'
-        }
-      ],
-      tableData: [],
-      customTableTitles: [
-        { label: 'overall.type', prop: 'type' },
-        { label: 'dnsInsight.event', prop: 'event' },
-        { label: 'network.severity', prop: 'severity' }
-      ]
-    }
-  },
-  mixins: [chartMixin],
-  watch: {
-    timeFilter: {
-      handler (n) {
-        this.dnsRecentEventData()
-      }
-    },
-    tableType (n) {
-      const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        tableType: n
-      })
-      overwriteUrl(newUrl)
-    },
-    tableSeverity (n) {
-      const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        tableSeverity: n
-      })
-      overwriteUrl(newUrl)
-    }
-  },
-  mounted () {
-    this.dnsRecentEventData()
-  },
-  methods: {
-    dnsRecentEventData () {
-      this.toggleLoading(true)
-      this.tableData = []
-      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime),
-        limit: 8,
-        type: this.tableType,
-        severity: this.tableSeverity
-      }
-      this.toggleLoading(true)
-      axios.get(api.dnsInsight.recentEvents, { params }).then(res => {
-        if (res.status === 200) {
-          this.isNoData = res.data.data.result.length === 0
-          this.tableData = res.data.data.result
-          this.tableData.forEach((t, index) => {
-            if (index > 5) {
-              t.type = 'Security Event'
-            } else {
-              t.type = 'Performance Event'
-            }
-          })
-        } else {
-          this.isNoData = true
-        }
-      }).finally(() => {
-        this.toggleLoading(false)
-      })
-    },
-    changeMetric () {
-      this.dnsRecentEventData()
-    },
-    columnWidth (index) {
-      if (index === 0 || index === 1) {
-        return '50%'
-      } else if (index === 2) {
-        return '25%'
-      } else if (index === 3) {
-        return '15%'
-      }
-    }
-
-  },
-  computed: {
-  }
-}
-</script>