diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
index 08c9c186..ea04794c 100644
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -95,7 +95,7 @@
     right:0px;
     .search-select {
       color:#575757;
-      margin-right:20px;
+      margin-right:10px;
       span {
         margin-right:3px;
       }
@@ -121,14 +121,21 @@
     }
     .search-customize-tab {
       color:$blue;
+      height:24px;
+      padding:2px 11px;
       .icon-gear{
         color:#2C72C6;
         width:12px;
         height:12px;
+        margin-right:2px;
+        font-size: 12px;
       }
     }
-    .search-customize-tab:hover {
+    .search-customize-tab:hover,.search-customize-tab__active {
       cursor:pointer;
+      background: rgba(56,172,210,0.10);
+      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+      border-radius: 2px;
     }
     .grid-content{
       min-height: 36px;
@@ -136,19 +143,80 @@
   }
 }
 .customize-tab__popper{
-  height:560px;/*calc(100% - 136px);*/
-  overflow:auto;
+  max-height:405px;/*calc(100% - 136px);*/
+  overflow:hidden;
+  padding: 0px !important;
+  background: #FFFFFF;
+  /*border: 1px solid #C5C5C5;*/
+  border:1px solid #C5C5C5 !important;
+  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+  border-radius: 2px !important;
+  .el-popper {
+    max-height: 405px;
+  }
+  .el-tabs__header{
+    font-size: 12px;
+    color:green !important;
+    font-weight: 500;
+    margin: 0px ;
+    border-bottom: 1px solid #E2E5EC;
+  }
+  .el-tabs__content {
+    max-height: 358px !important;
+    margin:8px 0 6px 0;
+  }
+  .el-tabs__nav{
+    width:100%;
+  }
+  .el-tabs__nav-wrap {
+    margin-bottom: 0px !important;
+  }
+  .el-tabs__item{
+    width:50%;
+    text-align:center;
+    padding:0px;
+    height:30px;
+    line-height: 30px;
+    font-size: 12px;
+    color: #353636;
+    font-weight: 500;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+    border-top: 3px solid #38ACD2;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
+    border-radius: 2.5px 0 0 0;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
+    border-radius: 0 2.5px 0 0 ;
+    border-left: 1px #E2E5EC solid !important;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item{
+    border-bottom: 0px ;
+    border-top: 3px solid white;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__nav {
+    border:0px ;
+  }
 
   .list {
     list-style: none;
     padding-inline-start: 0px !important;
+    /*height:375px;*/
+    max-height: 358px !important;
+    overflow:auto;
+    margin:0 0;
     .drag-move {
       transition: transform 0.3s;
     }
+
+    .list-item:last-child {
+      margin-bottom: 6px;
+    }
     .list-item {
       width:100%;
       color: #575757;
-      margin-bottom: 6px;
+      margin-bottom: 0px;
       height: 24px;
       line-height: 24px;
       text-align: left;
@@ -158,6 +226,25 @@
 
       .icon-drag{
         cursor: move;
+        margin-left:6px;
+        margin-right:3px;
+      }
+
+      .el-checkbox__input.is-checked .el-checkbox__inner {
+        background-color: #38ACD2;
+        border-color: #38ACD2;
+        border-radius: 2px;
+      }
+      .el-checkbox__input .el-checkbox__inner {
+        background-color: #F2F7F9;
+        border: 1px solid rgba(0,0,0,0.15);
+        border-radius: 2px;
+      }
+      .el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
+        font-family: Helvetica;
+        font-size: 12px;
+        color: #575757;
+        font-weight: 400;
       }
     }
   }
@@ -170,4 +257,4 @@
   .el-popper__arrow {
     display: none;
   }
-}
+}
\ No newline at end of file
diff --git a/src/views/charts2/charts/NetworkOverviewTabs.vue b/src/views/charts2/charts/NetworkOverviewTabs.vue
index 0d645267..e67e0b69 100644
--- a/src/views/charts2/charts/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/NetworkOverviewTabs.vue
@@ -24,30 +24,32 @@
                 class="tab-table"
                 height="100%"
         >
-          <el-table-column
-                  v-for="(item, index) in customTableTitles"
-                  class="data-column"
-          >
-            <template #header>
-              <span class="data-column__span">{{$t(item.label)}}</span>
-            </template>
-            <template  #default="scope" :column="item">
-              <div class="data-total" >
-                {{scope.row[item.prop]}}
-                <template v-if="item.prop === 'total'"  >
-                  <div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
-                    <i class="cn-icon-rise1 cn-icon"></i>{{scope.row['trendValue']}}
-                  </div>
-                  <div v-else-if="scope.row['trend'] === 'down'" class="data-total-trend data-total-trend-green">
-                    <i class="cn-icon-decline cn-icon"></i>{{scope.row['trendValue']}}
-                  </div>
-                  <div v-else class="data-total-trend data-total-trend-black">
-                    <i class="cn-icon-constant cn-icon"></i>
-                  </div>
-                </template>
-              </div>
-            </template>
-          </el-table-column>
+          <template v-for="(item,index) in customTableTitles">
+              <el-table-column
+                    v-if="item.checked"
+                    class="data-column"
+            >
+              <template #header>
+                <span class="data-column__span">{{$t(item.label)}}</span>
+              </template>
+              <template  #default="scope" :column="item">
+                <div class="data-total" >
+                  {{scope.row[item.prop]}}
+                  <template v-if="item.prop === 'total'"  >
+                    <div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
+                      <i class="cn-icon-rise1 cn-icon"></i>{{scope.row['trendValue']}}
+                    </div>
+                    <div v-else-if="scope.row['trend'] === 'down'" class="data-total-trend data-total-trend-green">
+                      <i class="cn-icon-decline cn-icon"></i>{{scope.row['trendValue']}}
+                    </div>
+                    <div v-else class="data-total-trend data-total-trend-black">
+                      <i class="cn-icon-constant cn-icon"></i>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </el-table-column>
+          </template>
         </el-table>
 
       </el-tab-pane>
@@ -59,7 +61,6 @@
         <span>{{$t('network.metric')}}:</span>
         <el-select v-model="metric"
                    class="option__select select-column"
-                   placeholder=""
                    popper-class="option-popper metric-select"
                    :popper-append-to-body="false"
                    size="mini">
@@ -71,36 +72,59 @@
           />
         </el-select>
       </div>
-      <el-popover placement="left"
-                  :width="280"
+      <el-popover placement="bottom-end"
+                  :width="240"
                   :show-arrow="false"
-                  :append-to-body="false"
-                  :offset="-91"
+                  :append-to-body="true"
                   :hide-after="0"
-                  title="Customize"
                   popper-class="customize-tab__popper"
+                  @show="handleCustomizeButton(true)"
+                  @hide="handleCustomizeButton(false)"
                   trigger="click">
         <template #reference>
-          <div class="search-customize-tab">
-            <i class="cn-icon-gear cn-icon icon-gear"></i>  {{$t('network.customize')}}
+          <div class="search-customize-tab "  :class="showBackground?'search-customize-tab__active':''"  >
+            <i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
           </div>
         </template>
 
-        <div>
-          <transition-group name="drag" class="list" tag="ul">
-            <li v-for="(item, index) in list"
+          <el-tabs v-model="activeCustomize"
+                   @tab-click="handleCustomizeClick"
+                   type="card"
+          >
+            <el-tab-pane :label="$t('network.tabs')" name="tabs" width="50%"  >
+              <transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
+                <li v-for="(item, index) in list"
                     :key="item.label"
                     class="list-item"
-            >
-              <i class="cn-icon-sort cn-icon icon-drag"
-                 @dragenter="dragenter($event, index)"
-                 @dragover="dragover($event, index)"
-                 @dragstart="dragstart(index)"
-                 draggable="true"
-              ></i> <el-checkbox @change="tabChange" v-model="item.checked"  :label="$t(item.label) " size="small" />
-            </li>
-          </transition-group>
-        </div>
+                    @dragenter="dragenter($event, index)"
+                    @dragover="dragover($event, index)"
+                    @dragstart="dragstart(index)"
+                    draggable="true"
+                >
+                  <i class="cn-icon-sort cn-icon icon-drag"
+
+                     :key="item.label"
+                  ></i> <el-checkbox @change="tabChange" v-model="item.checked"  :label="$t(item.label) " size="small"  :key="item.label"/>
+                </li>
+              </transition-group>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('network.metric')" name="metrics" width="50%" >
+              <transition-group name="dragMetric" class="list" tag="ul" ref="metric">
+                <li v-for="(item, index) in customTableTitles"
+                    :key="item.label"
+                    class="list-item"
+                    @dragenter="dragMetricEnter($event, index)"
+                    @dragover="dragMetricOver($event, index)"
+                    @dragstart="dragMetricStart(index)"
+                    draggable="true"
+                >
+                  <i class="cn-icon-sort cn-icon icon-drag"
+                     :key="item.label"
+                  ></i> <el-checkbox @change="metricChange" v-model="item.checked"  :label="$t(item.label) " size="small" :key="item.label"/>
+                </li>
+              </transition-group>
+            </el-tab-pane>
+          </el-tabs>
       </el-popover>
     </div>
 
@@ -116,7 +140,7 @@ export default {
   name: 'NetworkOverviewTabs',
   data () {
     return {
-      metric: '',
+      metric: 'Bits',
       options: [
         {
           value: 'Bits',
@@ -133,7 +157,7 @@ export default {
       ],
       tableData: [
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'up',
           trendValue: '33%',
@@ -141,7 +165,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trendValue: '6%',
           trend: '',
@@ -149,7 +173,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'up',
           trendValue: '6%',
@@ -157,7 +181,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'down',
           trendValue: '2%',
@@ -165,7 +189,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'down',
           trendValue: '2%',
@@ -173,7 +197,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: '',
           trendValue: '2%',
@@ -181,7 +205,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'down',
           trendValue: '2%',
@@ -189,7 +213,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'down',
           trendValue: '2%',
@@ -197,7 +221,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'down',
           trendValue: '2%',
@@ -205,7 +229,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'up',
           trendValue: '2%',
@@ -213,7 +237,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'down',
           trendValue: '2%',
@@ -221,7 +245,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'down',
           trendValue: '2%',
@@ -229,7 +253,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'down',
           trendValue: '2%',
@@ -237,7 +261,7 @@ export default {
           outbound: 0.89
         },
         {
-          ips: 'cate',
+          tab: 'cate',
           total: 10,
           trend: 'down',
           trendValue: '2%',
@@ -246,65 +270,81 @@ export default {
         }
       ],
       customTableTitles: [
-        { label: 'network.ips', prop: 'ips' },
-        { label: 'network.total', prop: 'total' },
-        { label: 'network.inbound', prop: 'inbound' },
-        { label: 'network.outbound', prop: 'outbound' }
+        { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true },
+        { label: 'network.total', prop: 'total', checked: true, tabColumn: false },
+        { label: 'network.inbound', prop: 'inbound', checked: true, tabColumn: false },
+        { label: 'network.outbound', prop: 'outbound', checked: true, tabColumn: false }
       ],
       list: [
         {
           label: 'network.ips',
+          prop: 'tab',
           checked: true
         }, {
           label: 'network.countries',
+          prop: 'tab',
           checked: true
         }, {
           label: 'network.asns',
+          prop: 'tab',
           checked: true
         }, {
           label: 'network.applications',
+          prop: 'tab',
           checked: true
         }, {
           label: 'network.providers',
+          prop: 'tab',
           checked: true
         }, {
           label: 'network.domains',
+          prop: 'tab',
           checked: true
         }, {
           label: 'network.protocols',
+          prop: 'tab',
           checked: true
         }, {
           label: 'network.idcTenants',
+          prop: 'tab',
           checked: true
         }, {
           label: 'network.provinces',
+          prop: 'tab',
           checked: false
         }, {
           label: 'network.cities',
+          prop: 'tab',
           checked: false
         }, {
           label: 'network.isps',
+          prop: 'tab',
           checked: false
         }, {
           label: 'network.applicationCategories',
+          prop: 'tab',
           checked: false
         }, {
           label: 'network.domainCategories',
+          prop: 'tab',
           checked: false
         }, {
           label: 'network.hosts',
+          prop: 'tab',
           checked: false
         }, {
           label: 'network.snis',
+          prop: 'tab',
           checked: false
         }, {
           label: 'network.protocolPorts',
+          prop: 'tab',
           checked: false
         }
       ],
       dragIndex: '',
-      enterIndex: '',
-      endIndex: ''
+      dragMetricIndex: '',
+      showBackground: false
     }
   },
   components: {
@@ -314,13 +354,29 @@ export default {
     shuffle () {
       this.list = _.shuffle(this.list)
     },
+    handleCustomizeButton (status) {
+      console.log(this.showBackground)
+      this.showBackground = status
+    },
     tabChange () {
       const tabList = this.list.filter(item => item.checked == true)
       if (tabList && tabList.length > 0) {
         this.activeTab = tabList[0].label
-        this.customTableTitles[0].label = this.$t(tabList[0].label)
+        this.customTableTitles.forEach(item => {
+          if (item.tabColumn) {
+            item.label = tabList[0].label
+            item.prop = tabList[0].prop
+          }
+        })
       }
     },
+    metricChange () {
+      // const metricList = this.customTableTitles.filter(item => item.checked == true)
+      // if (metricList && metricList.length > 0) {
+      // this.activeCustomize = metricList[0].label
+      // this.customTableTitles[0].label = this.$t(metricList[0].label)
+      // }
+    },
     dragstart (index) {
       this.dragIndex = index
     },
@@ -336,10 +392,34 @@ export default {
     dragover (e, index) {
       e.preventDefault()
     },
+    dragMetricStart (index) {
+      this.dragMetricIndex = index
+    },
+    dragMetricEnter (e, index) {
+      e.preventDefault()
+      if (this.dragMetricIndex !== index) {
+        const moving = this.customTableTitles[this.dragMetricIndex]
+        this.customTableTitles.splice(this.dragMetricIndex, 1)
+        this.customTableTitles.splice(index, 0, moving)
+        this.dragMetricIndex = index
+      }
+    },
+    dragMetricOver (e, index) {
+      e.preventDefault()
+    },
     handleClick (tab) {
-      this.customTableTitles[0].label = tab.paneName
+      this.customTableTitles.forEach(item => {
+        if (item.tabColumn) {
+          item.label = tab.paneName
+        }
+      })
+      // this.customTableTitles[0].label = tab.paneName
       // this.activeTab = tab.paneName
     },
+    handleCustomizeClick (tab) {
+      // this.customTableTitles[0].label = tab.paneName
+      this.activeCustomize = tab.paneName
+    },
     tableCellStyle ({ row, column, rowIndex, columnIndex }) {
       let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
       if (rowIndex === this.tableData.length - 1) {
@@ -364,9 +444,11 @@ export default {
       }
       // const dataList = [...props.chartInfo.children]
     }
+    const activeCustomize = ref('tabs')
 
     return {
       activeTab,
+      activeCustomize,
       networkOverviewTabs
       // dataList
     }