diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 3a17b877d..6075dc3d5 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1395,10 +1395,10 @@ li{
 .nz-submenu .el-menu--popup .el-menu-item .menu-item-active{
   color:$global-text-color-active !important;
 }
-.el-icon-setting:before {
-  content: "\E6CA";
-  color: #BA3939;
-}
+//.el-icon-setting:before {
+//  content: "\E6CA";
+//  color: #BA3939;
+//}
 
 .el-dropdown-menu__item:focus,
 .el-dropdown-menu__item:not(.is-disabled):hover,
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 2fc798ce7..58ae52b43 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -574,7 +574,13 @@ const cn = {
       cabinetNum: "机柜数量",
       assets: "资产",
       remark: "备注",
-      cabinets: "机柜"
+      cabinets: "机柜",
+      traffic:{
+        title:'流量配置',
+        add:'添加',
+        direction:'方向',
+        tags:'标签'
+      }
     },
     model: {
       model: "资产模型",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 3ddb8156f..d695db6c9 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -302,7 +302,8 @@ const en = {
     url:'Invalid URL',
     uSize:'Must be number(1 - 47)',
     requiredIdc:'dc is required',
-    key:'Invalid key'
+    key:'Invalid key',
+    repeat:'Repeat'
   },
   search: {
     searchTip: 'Enter to search',//'点击或回车执行搜索'
@@ -561,6 +562,8 @@ const en = {
       traffic:{
         title:'Traffic Setting',
         add:'Add',
+        direction:'Direction',
+        tags:'Tags'
       }
     },
     model: {
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
index c6f42a342..af3ad5b47 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
@@ -3,27 +3,17 @@
     <div class="right-sub-box sub-box" v-if="editTagsBox.show" :style="'top: ' + editTagsBox.top + 'px; left: ' + editTagsBox.left + 'px;'" >
       <div class="param-box" style="height: calc(100% - 25px)">
         <el-scrollbar style="height: 100%">
-          <!--<div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
-            <el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key"></el-input>
+          <div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
+            <el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key" @input="validateInput(item.key,index)" :class="{'input-error':inputKeyErr[index]}"></el-input>
             <span class="param-box-row-eq">=</span>
             <el-input placeholder="value" class="param-box-row-value input-x-mini-22" v-model="item.value"></el-input>
             <span class="param-box-row-symbol" :id="'remove-param-'+index" @click="removeTags(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-          </div>-->
-          <el-tag v-for="(item, index) in tempTagsObj" class="sub-box-tags"  size="small" :closable="true" :key="index" @close='delTag(item,index)' @click="editTag(item,index)">
-            <div >{{item.key}}：{{item.value}}</div>
-          </el-tag>
-          <div class="param-box-row" v-show="showNewTagInput">
-            <el-input placeholder="key" style="width: 63px" ref="tagKeyInput" class="param-box-row-key input-x-mini-22" :class="{'input-error':newTagInputError}" v-model="newTag.key" @keydown.enter.native="confirmInput" @blur="confirmInput"></el-input>
-            <span class="param-box-row-eq">=</span>
-            <el-input placeholder="value" style="width: 63px" class="param-box-row-value input-x-mini-22" v-model="newTag.value" @keydown.enter.native="confirmInput" @blur="confirmInput"></el-input>
-          </div>
-          <div v-if="showNewTagInput&&newTagInputError" style="text-align: left;padding-left: 10px">
-            <span  style="color: #F56C6C;font-size: 12px;">{{$t('validate.key')}}</span>
+            <span style="color: #F56C6C;font-size: 12px;" v-if="inputKeyErr[index]">{{$t('validate.key')}}</span>
           </div>
         </el-scrollbar>
       </div>
       <div class="add-btn">
-<!--        <el-button @click="addTags" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>-->
+        <el-button @click="addTags" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
         <el-button @click="showEditTagsBox(false)"  style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-check"></i></el-button>
       </div>
     </div>
@@ -39,9 +29,7 @@
         tempTagsObj:[],
         rowIndex:0,
         curConfigs:null,
-        newTag:{key:'',value:''},
-        showNewTagInput:true,
-        newTagInputError:false,
+        inputKeyErr:[],
       }
     },
     methods:{
@@ -53,6 +41,7 @@
           this.editTagsBox.top = position.top + 25;
           this.editTagsBox.left = position.left - 48;
           this.tempTagsObj=[];
+          this.inputKeyErr=[];
           let obj=null;
           try{
             obj=configs[index]['tags']
@@ -62,14 +51,19 @@
           if(obj){
             for(let key in obj){
               this.tempTagsObj.push({key:key,value:obj[key]})
+              this.inputKeyErr.push(false);
             }
           }
         } else {
           if (!this.editTagsBox.show) {
             return;
           }
-          this.confirmInput();
-          this.showNewTagInput=true;
+          let temp=this.inputKeyErr.find(item=>{
+            return item == true;
+          })
+          if(typeof temp != "undefined"){
+            return ;
+          }
           let tempObj={};
           for(let i=0;i<this.tempTagsObj.length;i++){
             let obj=this.tempTagsObj[i];
@@ -79,79 +73,27 @@
           }
           this.curConfigs[this.rowIndex]['tags']=Object.assign({},tempObj)
         }
+        this.$emit('after')
         this.editTagsBox.show = show;
       },
-      validateInput:function(){
-        if(this.newTag.key == ''){
-           return false;
-        }
-        if(!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(this.newTag.key)){
-          this.newTagInputError=true;
-          return false;
-        }
-        if(this.newTag.value == ''){
-          return false;
-        }
-        this.newTagInputError=false;
-        return true;
-      },
-      confirmInput:function(){
-        if(this.validateInput()){
-          this.tempTagsObj.push(Object.assign({},this.newTag));
-          this.showNewTagInput=true;
-          this.newTag={key:'',value:''};
-          this.$nextTick(()=>{
-            this.$refs.tagKeyInput.focus();
-          })
-        }
-      },
-      editTag:function(tag,index){
-        console.log(222)
-        if(this.showNewTagInput == true){//已经有编辑状态的tag，先保存
-          this.confirmInput();
-        }
-        this.tempTagsObj.splice(index,1);
-        this.newTag=Object.assign({},tag)
-        this.showNewTagInput=true;
-        this.$nextTick(()=>{
-          this.$refs.tagKeyInput.focus();
-        })
-      },
       addTags:function(){
-        if(this.showNewTagInput == true){//已经有编辑状态的tag，先保存
-          this.confirmInput();
+        this.tempTagsObj.push({key:'',value:''})
+        this.inputKeyErr.push(false);
+      },
+      validateInput:function(value,index){
+        if(!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(value)){
+          this.inputKeyErr.splice(index,1,true)
+        }else{
+          this.inputKeyErr.splice(index,1,false)
         }
-        this.newTag={key:'',value:''}
-        this.showNewTagInput=true;
-        this.$nextTick(()=>{
-          this.$refs.tagKeyInput.focus();
-        })
       },
-      delTag:function(tag,index){
+      removeTags:function(index){
         this.tempTagsObj.splice(index,1)
-      },
-      clearNewTag:function(){
-        this.newTag={key:'',value:''}
-        this.showNewTagInput=true;
       }
     },
   }
 </script>
-<style>
-  .sub-box-tags{
-    position: relative;
-    margin-bottom: 5px;
-    display: block;
-    width: 150px;
-    margin-left: 10px;
-    text-align: left;
-  }
-  .sub-box-tags .el-tag__close{
-    position: absolute;
-    top: 5px;
-    right: 2px;
-  }
-</style>
+
 <style scoped>
   .right-sub-box {
     width: 170px;
@@ -160,13 +102,6 @@
     z-index: 2;
     padding: 0;
   }
-  .sub-box{
-    padding:5px;
-    text-align: center;
-  }
-  .sub-box .param-box-row{
-    padding:0 10px 0 10px !important;
-  }
   .sub-box .add-btn{
     width: 100%;
     text-align: center;
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
index 8ec5c8176..4331c2aab 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -165,10 +165,14 @@
         return valid;
       },
       valiateRepeatFunc:function(host,index){
-        let temp=this.traffic.setting.find((item,i)=>{
-          return i != index && item.host == host;
-        })
-        return typeof temp == "undefined";
+        if(host != ''){
+          let temp=this.traffic.setting.find((item,i)=>{
+            return i != index && item.host == host;
+          })
+          return typeof temp == "undefined";
+        }else{
+          return true;
+        }
       },
       delAssetSetting:function(index){
         this.uuids.splice(index,1);
@@ -300,7 +304,7 @@
                           direction:[],
                           ifindex:'',
                           ifdescr:' ',
-                          tags:"",
+                          tags:{},
                           edit:true,
                         }
                       ]
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
index 7934401a3..7b15b17d9 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
@@ -15,6 +15,7 @@
           :trigger-on-focus="false"
           :highlight-first-item="true"
           @input="hostInputChange"
+          @blur="validateHostEmpty"
         ></el-autocomplete>
         <el-popover trigger="click" placement="bottom" @show="popShow" @hide="popHide" popper-class="no-style-class">
           <div class="mib-browser-ad-search">
@@ -111,6 +112,11 @@
           </button>
         </el-popover>
         <div class="right-box-row-btn" @click="delSelf"><i class="el-icon-minus"></i></div>
+        <div>
+          <span style="color:#F56C6C;font-size: 12px;" v-if="hostRepeat">{{$t('validate.repeat')}}</span>
+          <span style="color:#F56C6C;font-size: 12px;" v-if="hostInvalid">{{$t('validate.host')}}</span>
+          <span style="color:#F56C6C;font-size: 12px;" v-if="hostEmpty">{{$t('validate.required')}}</span>
+        </div>
       </el-form-item>
       <div class="endpoints-box-endpoints">
         <el-table :data="assetSetting.configs"
@@ -122,6 +128,7 @@
                   @row-dblclick="changeRowEditState"
                   @row-click="validateRows"
                   class="taffic-setting-tab"
+                  v-if="refreshTab"
                   style="width: 100%;">
           <el-table-column
             label-class-name="endpoints-box-endpoints-title"
@@ -139,22 +146,34 @@
             </template>
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'tags'">
-                <div style="height: 50px;" @click="showEditTagsBox(true,scope.$index,scope.row,$event)">
-                  <el-scrollbar style="height: 100%;">
+                <div class="tab-tags" @click="showEditTagsBox(true,scope.$index,scope.row,$event)">
+                  <!--<el-scrollbar style="height: 100%;">
                     <el-tag
                       v-for="(value, key, index) in scope.row[item.prop]"
                       class="tab-tags"
                       size="mini"
-                      :closable="scope.row.edit==true"
                       :key="key"
                       style="display: block;margin-bottom:5px;" >
-                      <!--                  <div class="tab-tags-item">-->
-                      <!--                    <div class="tag-item-key">{{key}}：</div><div class="tag-item-value">{{value}}</div>-->
+                      &lt;!&ndash;                  <div class="tab-tags-item">&ndash;&gt;
+                      &lt;!&ndash;                    <div class="tag-item-key">{{key}}：</div><div class="tag-item-value">{{value}}</div>&ndash;&gt;
 
-                      <!--                  </div>-->
+                      &lt;!&ndash;                  </div>&ndash;&gt;
                       {{key}}：{{value}}
                     </el-tag>
-                  </el-scrollbar>
+                  </el-scrollbar>-->
+                  <el-tooltip placement="top" effect="light" popper-class="tags-pop transparent-pop">
+                    <div slot="content">
+                      <div class="tab-tags-item" v-for="(value, key, index) in scope.row[item.prop]">
+                        <div class="tag-item-key">{{key}}</div>
+                        <div class="tag-item-value">{{value}}</div>
+                      </div>
+                    </div>
+                    <div class="tab-tags-item" v-if="Object.keys(scope.row[item.prop]).length>0">
+                      <div class="tag-item-key">{{Object.keys(scope.row[item.prop])[0]}}</div>
+                      <div class="tag-item-value">{{scope.row[item.prop][Object.keys(scope.row[item.prop])[0]]}}</div>
+                      <div class="tag-item-text" v-if="Object.keys(scope.row[item.prop]).length>1">+{{Object.keys(scope.row[item.prop]).length-1}}</div>
+                    </div>
+                  </el-tooltip>
                 </div>
               </template>
               <template v-if="item.prop == 'ifindex'">
@@ -177,10 +196,11 @@
                 </template>
               </template>
               <template v-if="item.prop == 'ifdescr'">
-                <span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
+                <!--<span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
                 <template v-else>
                   <el-input v-model="scope.row[item.prop]" size="small" clearable></el-input>
-                </template>
+                </template>-->
+                <span>{{scope.row[item.prop]}}</span>
               </template>
               <template v-if="item.prop == 'direction'">
                 <template v-if="scope.row.edit==false">
@@ -200,7 +220,7 @@
           </el-table-column>
           <el-table-column label="" :width="30">
             <template slot-scope="scope">
-              <el-button @click.stop="delTabRow(scope.$index,scope.row.ifindex)" :disabled="assetSetting.host == null" style="width: 18px;height: 18px; line-height: 18px; padding:0;" size="mini"><i class="el-icon-minus"></i></el-button>
+              <el-button @click.stop="delTabRow(scope.$index,scope.row)" :disabled="assetSetting.host == null" style="width: 18px;height: 18px; line-height: 18px; padding:0;" size="mini"><i class="el-icon-minus"></i></el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -208,7 +228,7 @@
           <el-button @click="addTabRow"  style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
         </div>
       </div>
-      <sub-box ref="subBox"></sub-box>
+      <sub-box ref="subBox" @after="refreshTabFunc"></sub-box>
       <loading ref="loading"></loading>
     </div>
 </template>
@@ -235,6 +255,8 @@
         assetValidate:false,
         hostRepeat:false,
         hostInvalid:false,
+        hostEmpty:false,
+        refreshTab:true,
         tableLabels:[
           {
             label:'ifIndex',
@@ -251,14 +273,14 @@
             errRows:[],
           },
           {
-            label:'direction',
+            label:this.$t('config.dc.traffic.direction'),
             prop:'direction',
             width:100,
             required:true,
             errRows:[],
           },
           {
-            label:'tags',
+            label:this.$t('config.dc.traffic.tags'),
             prop:'tags',
             required:false,
             errRows:[],
@@ -283,6 +305,12 @@
       clearAssetInput:function(){
         this.resetComponet();
       },
+      refreshTabFunc:function(){
+        this.refreshTab=false;
+        this.$nextTick(()=>{
+          this.refreshTab=true;
+        });
+      },
       resetComponet:function(){
         this.ifIndexList=[];
         this.assetSetting.assetId=null;
@@ -401,15 +429,15 @@
       },
       ifIndexInputChange:function(ifindex,row,index){
         if(this.ifIndexList && this.ifIndexList.length>0){
-          let temp=this.ifIndexList.find(item=>{
-            return item.value == ifindex;
-          })
-          if(!temp){
-            this.ifIndexError=true;
-            return ;
-          }else{
-            this.ifIndexError=false;
-          }
+          // let temp=this.ifIndexList.find(item=>{
+          //   return item.value == ifindex;
+          // })
+          // if(!temp){
+          //   this.ifIndexError=true;
+          //   return ;
+          // }else{
+          //   this.ifIndexError=false;
+          // }
           this.ifIndexChange(ifindex,row)
           let tmp=this.assetSetting.configs.find((item,i)=>{
             return i != index && item.ifindex == ifindex;
@@ -429,12 +457,20 @@
           clearTimeout(this.hostTimer);
         }
         this.hostTimer=setTimeout(()=>{
-          this.queryInterfaceInfos(true);
           this.validateHostRepeat(value);
           this.validateHostValid(value);
-        },1000)
+          if(!this.hostEmpty&&!this.hostRepeat&&!this.hostInvalid){
+            this.queryInterfaceInfos(true);
+          }
+        },500)
+      },
+      validateHostEmpty:function(){
+        this.hostEmpty=!this.assetSetting.host||this.assetSetting.host == '';
       },
       validateHostValid:function(host){
+        if(host==''){
+          return false
+        }
         const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
         if (hostReg.test(host)) {
           this.hostInvalid=false;
@@ -478,6 +514,18 @@
             if(required &&(!value || (typeof value =='string' && value == '')||(value instanceof Array && value.length<1))){
               validateFlag=false
               label.errRows.push(index) //保存有错误的行的index，通过行列唯一定位有错误的输入框
+            }else{
+              if(label.prop == 'ifindex'){
+                if(this.ifIndexList && this.ifIndexList.length>0) {
+                  let temp = this.ifIndexList.find(item => {
+                    return item.value == value;
+                  })
+                  if(!temp){
+                    validateFlag=false
+                    label.errRows.push(index) //保存有错误的行的index，通过行列唯一定位有错误的输入框
+                  }
+                }
+              }
             }
           })
         })
@@ -507,15 +555,18 @@
             direction:[],
             ifindex:null,
             ifdescr:' ',
-            tags:"",
+            tags:{},
             edit:true,
           })
         }
       },
-      delTabRow:function(index,ifindex){
+      delTabRow:function(index,row){
         if(this.assetSetting.configs.length>1){
-          this.assetSetting.configs.splice(index,1)
-          this.changeIfIndexOccupyState(ifindex,false)
+          this.assetSetting.configs.splice(index,1);
+          if(row.edit == true && this.ifIndexError == true){
+            this.ifIndexError=false;
+          }
+          this.changeIfIndexOccupyState(row.ifindex,false)
         }
       },
       resetIfIndexOccupyState:function(){
@@ -578,17 +629,36 @@
 </style>
 <style lang="scss">
   .tab-tags{
-    /*border: 0px;*/
-    /*padding: 0;*/
-    /*display: inline-block;*/
-    /*border-radius: 2px;*/
-    /*width: 100px;*/
+    width: 100%;
+    height: 22px;
   }
-  .tab-tags .tab-tags-item{
+  .tags-pop{
+    width: 110px;
+    text-align: center;
+  }
+  .tab-tags-item{
     display: flex;
+    margin-bottom: 5px;
+    height: 20px;
+    line-height: 20px;
   }
   .tab-tags-item .tag-item-key{
-    /*background-color: #E6E4E4;*/
+    border:1px solid #E6E4E4;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    background-color: #E6E4E4;
+    width: 52px;
+  }
+  .tab-tags-item .tag-item-value{
+    border:1px solid #E6E4E4;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: #FFF;
+    width: 52px;
+  }
+  .tab-tags-item .tag-item-text{
+    background-color: #FFF;
+    width: 20px;
   }
   .taffic-setting-tab .el-table__row:hover{
     .input__inner{
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 154738a0e..661b720f0 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -47,6 +47,10 @@
                       class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
                 <i class="nz-icon-create-square nz-icon"></i>
               </button>
+<!--              <button type="button" @click="listLanguage" :title="$t('overall.createDatacenter')"-->
+<!--                      class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" >-->
+<!--                <i class="nz-icon-create-square nz-icon"></i>-->
+<!--              </button>-->
             </div>
             <div class="pagination-top pagination-top-hide display-none"></div>
           </div>
@@ -79,7 +83,7 @@
                   &nbsp;
                   <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
                   &nbsp;
-                  <span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id" ><i class="el-icon-s-tools"></i></span>
+                  <span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-setting-'+scope.row.id" ><i class="el-icon-setting"></i></span>
                 </div>
                 <template v-else-if="item.prop == 'principal'">
                   <template v-if="scope.row.principal">
@@ -148,6 +152,7 @@
   var vm;
   import bus from '../../../libs/bus';
   import trafficSettingBox from "../../common/rightBox/trafficSetting/trafficSettingBox";
+  import util from "./util";
   export default {
     name: "dc",
     components:{
@@ -252,6 +257,10 @@
       }
     },
     methods: {
+      listLanguage:function(){
+        util.methods.listLanguage();
+        console.log(util.data().languageList)
+      },
       elementsetShow(s, e) {
         var eventfixed = {
           shezhi: 0,