diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index c9cf7466f..92edd4ada 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -301,7 +301,8 @@ const en = {
     port:'Invalid port',
     url:'Invalid URL',
     uSize:'Must be number(1 - 47)',
-    requiredIdc:'dc is required'
+    requiredIdc:'dc is required',
+    key:'Invalid key'
   },
   search: {
     searchTip: 'Enter to search',//'点击或回车执行搜索'
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
index e058be6c3..be756613d 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
@@ -3,16 +3,27 @@
     <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">
+          <!--<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>
             <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)'>
+            <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>
           </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>
@@ -28,6 +39,9 @@
         tempTagsObj:[],
         rowIndex:0,
         curConfigs:null,
+        newTag:{key:'',value:''},
+        showNewTagInput:true,
+        newTagInputError:false,
       }
     },
     methods:{
@@ -41,7 +55,7 @@
           this.tempTagsObj=[];
           let obj=null;
           try{
-            obj=JSON.parse(configs[index]['tags'])
+            obj=configs[index]['tags']
           }catch (e) {
 
           }
@@ -54,40 +68,89 @@
           if (!this.editTagsBox.show) {
             return;
           }
-          for (let i = 0; i < this.tempTagsObj.length; i++) {
-            if (!this.tempTagsObj[i].key || !this.tempTagsObj[i].value) {
-              this.tempTagsObj.splice(i, 1);
-              i--;
+          this.confirmInput();
+          this.showNewTagInput=true;
+          let tempObj={};
+          for(let i=0;i<this.tempTagsObj.length;i++){
+            let obj=this.tempTagsObj[i];
+            if(obj.key && obj.value){
+              tempObj[obj.key]=obj.value;
             }
           }
-
-          let tagsJson=this.tagsToJson(this.tempTagsObj);
-          this.curConfigs[this.rowIndex]['tags']=tagsJson;
+          this.curConfigs[this.rowIndex]['tags']=Object.assign({},tempObj)
         }
         this.editTagsBox.show = show;
       },
-      tagsToJson(tags) {
-        let tempTags = {};
-        for (let i = 0; i < tags.length; i++) {
-          eval('tempTags["' + tags[i].key + '"]="' + tags[i].value + '"');
+      validateInput:function(){
+        if(this.newTag.key == ''){
+           return false;
         }
-        let jsonString = JSON.stringify(tempTags);
-        if (jsonString == '{}') {
-          return "";
-        } else {
-          return jsonString;
+        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){
+        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(){
-        this.tempTagsObj.push({key:'',value:''})
+        if(this.showNewTagInput == true){//已经有编辑状态的tag，先保存
+          this.confirmInput();
+        }
+        this.newTag={key:'',value:''}
+        this.showNewTagInput=true;
+        this.$nextTick(()=>{
+          this.$refs.tagKeyInput.focus();
+        })
       },
-      removeTags:function(index){
+      delTag:function(tag,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;
@@ -96,6 +159,13 @@
     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 aa3c22d9e..917e821c4 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -57,7 +57,7 @@
         assetList:[],
         rightBox: {
           show: false,
-          title: '',
+          title: this.$t('config.dc.traffic.title'),
           isCreate: false,
           isEdit:false
         },
@@ -66,7 +66,18 @@
           idcId:'',
           setting:[
             {
-              assetId:null,
+              host:'',
+              port:161,
+              community:'public',
+              version:2,
+              auth:{
+                username:'',
+                securityLevel:'',
+                securityLevel:'',
+                authProtocol:'',
+                privProtocol:'',
+                privPassword:'',
+              },
               configs:[
                 {
                   direction:[],
@@ -89,9 +100,21 @@
       addAssetSetting:function(){
         let valid=this.validateTabs();
         if(valid){
+
           this.uuids.push(getUUID());
           this.traffic.setting.push({
-            assetId:null,
+            host:'',
+            port:161,
+            community:'public',
+            version:2,
+            auth:{
+              username:'',
+              securityLevel:'',
+              securityLevel:'',
+              authProtocol:'',
+              privProtocol:'',
+              privPassword:'',
+            },
             configs:[
               {
                 direction:[],
@@ -99,7 +122,6 @@
                 ifdescr:' ',
                 tags:"",
                 edit:true,
-                inputError:false,
               }
             ]
           })
@@ -107,7 +129,18 @@
       },
       getEmptyTraffic:function(){
         let obj={
-          assetId:null,
+          host:'',
+          port:161,
+          community:'public',
+          version:2,
+          auth:{
+            username:'',
+            securityLevel:'',
+            securityLevel:'',
+            authProtocol:'',
+            privProtocol:'',
+            privPassword:'',
+          },
           configs:[
             {
               direction:[],
@@ -166,7 +199,7 @@
                 direction:config.direction.toString(),
                 ifindex:config.ifindex,
                 ifdescr:config.ifdescr,
-                tags:config.tags&&config.tags!=''?JSON.parse(config.tags):{},
+                tags:config.tags,
               }
               result.setting.push(settingItem);
             })
@@ -201,12 +234,12 @@
               if(list.length>0){
                 let map=new Map();
                 list.forEach(item=>{
-                  let arr=map.get(item.asset.id);
+                  let arr=map.get(item.host);
                   if(arr){
                     arr.push(item)
-                    map.set(item.asset.id,arr);
+                    map.set(item.host,arr);
                   }else{
-                    map.set(item.asset.id,[item])
+                    map.set(item.host,[item])
                   }
                 })
                 this.traffic={
@@ -215,17 +248,21 @@
                 }
                 let keys=map.keys();
                 for(let key of keys){//settings 为同一asset下的设置集合
+                  let configs=map.get(key);
                   let settingItem={
-                    assetId:key,
+                    host:configs[0].host,
+                    port:configs[0].port,
+                    community:configs[0].community,
+                    version:configs[0].version,
+                    auth:configs[0].auth,
                     configs:[],
                   }
-                  let configs=map.get(key);
                   configs.forEach(item=>{
                     let config={
                       direction:item.direction&&item.direction!=''?item.direction.split(','):[],
                       ifindex:item.ifindex,
                       ifdescr:item.ifdescr,
-                      tags:JSON.stringify(item.tags),
+                      tags:item.tags,
                       edit:false,
                     }
                     settingItem.configs.push(config);
@@ -237,7 +274,18 @@
                   idcId:'',
                   setting:[
                     {
-                      assetId:null,
+                      host:'',
+                      port:161,
+                      community:'public',
+                      version:2,
+                      auth:{
+                        username:'',
+                        securityLevel:'',
+                        securityLevel:'',
+                        authProtocol:'',
+                        privProtocol:'',
+                        privPassword:'',
+                      },
                       configs:[
                         {
                           direction:[],
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
index 047f80fa7..f3d4d1d94 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
@@ -1,9 +1,113 @@
 <template>
     <div class="asset-config-tab">
       <el-form-item :label="$t('asset.asset')" size="small" class="right-box-form-content" ref="assetConfigForm" label-width="90px">
-        <el-select class="right-box-row-with-btn" clearable @clear="clearAssetInput"  v-model="assetSetting.assetId" @change="assetChanged" popper-class="no-style-class" :class="{'input-error':assetValidate}">
+        <!--<el-select class="right-box-row-with-btn" clearable @clear="clearAssetInput"  v-model="assetSetting.assetId" @change="assetChanged" popper-class="no-style-class" :class="{'input-error':assetValidate}">
           <el-option v-for="(item,index) in assetList" :label="item.host" :disabled="item.isOccupy" :value="item.id" :key="item.host+'-'+item.id"></el-option>
-        </el-select>
+        </el-select>-->
+        <el-autocomplete
+          clearable
+          class="asset-input right-box-row-with-btn"
+          v-model="assetSetting.host"
+          :fetch-suggestions="queryAssetHosts"
+          :debounce="1000"
+          :trigger-on-focus="false"
+          :highlight-first-item="true"
+          @input="hostInputChange"
+        ></el-autocomplete>
+        <el-popover trigger="click" placement="bottom" @show="popShow" @hide="popHide" popper-class="no-style-class">
+          <div class="mib-browser-ad-search">
+            <el-row class="mib-browser-ad-search-item">
+              <el-col :span="6"><div class="mib-browser-ad-search-label">{{$t("project.endpoint.port")}}</div></el-col>
+              <el-col :span="17">
+                <el-input class="input-x-mini-24" v-model.number="assetSetting.port"></el-input>
+              </el-col>
+            </el-row>
+            <el-row class="mib-browser-ad-search-item">
+              <el-col :span="6"><div class="mib-browser-ad-search-label">{{$t('project.module.community')}}</div></el-col>
+              <el-col :span="17">
+                <el-input class="input-x-mini-24" v-model="assetSetting.community"></el-input>
+              </el-col>
+            </el-row>
+            <el-row class="mib-browser-ad-search-item">
+              <el-col :span="6"><div class="mib-browser-ad-search-label">{{$t('project.module.version')}}</div></el-col>
+              <el-col :span="17">
+                <el-radio-group v-model.number="assetSetting.version">
+                  <el-radio-button :label="2"></el-radio-button>
+                  <el-radio-button :label="3"></el-radio-button>
+                </el-radio-group>
+              </el-col>
+            </el-row>
+            <!--SNMP V3 setting-->
+            <template v-if="assetSetting.version == 3">
+              <el-row class="mib-browser-ad-search-item">
+                <el-col :span="6">
+                  <div class="mib-browser-ad-search-label">{{$t('login.username')}}</div>
+                </el-col>
+                <el-col :span="17">
+                  <el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.username"></el-input>
+                </el-col>
+              </el-row>
+
+              <el-row class="mib-browser-ad-search-item">
+                <el-col :span="6">
+                  <div class="mib-browser-ad-search-label">{{$t('project.module.securityLevel')}}</div>
+                </el-col>
+                <el-col :span="17">
+                  <el-radio-group v-model="assetSetting.auth.securityLevel" size="small">
+                    <el-radio-button label="noAuthNoPriv"></el-radio-button>
+                    <el-radio-button label="authNoPriv"></el-radio-button>
+                    <el-radio-button label="authPriv"></el-radio-button>
+                  </el-radio-group>
+                </el-col>
+              </el-row>
+
+              <el-row class="mib-browser-ad-search-item" v-if="assetSetting.auth.securityLevel == 'authNoPriv' || assetSetting.auth.securityLevel == 'authPriv'">
+                <el-col :span="6">
+                  <div class="mib-browser-ad-search-label">{{$t('login.password')}}</div>
+                </el-col>
+                <el-col :span="17">
+                  <el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.password"></el-input>
+                </el-col>
+              </el-row>
+
+              <el-row class="mib-browser-ad-search-item same-label-width" v-if="assetSetting.auth.securityLevel == 'authNoPriv' || assetSetting.auth.securityLevel == 'authPriv'">
+                <el-col :span="6">
+                  <div class="mib-browser-ad-search-label">{{$t('project.module.authProtocol')}}</div>
+                </el-col>
+                <el-col :span="17">
+                  <el-radio-group v-model="assetSetting.auth.authProtocol">
+                    <el-radio-button label="MD5"></el-radio-button>
+                    <el-radio-button label="SHA"></el-radio-button>
+                  </el-radio-group>
+                </el-col>
+              </el-row>
+
+              <el-row class="mib-browser-ad-search-item same-label-width" v-if="assetSetting.auth.securityLevel == 'authPriv'">
+                <el-col :span="6">
+                  <div class="mib-browser-ad-search-label">{{$t('project.module.privProtocol')}}</div>
+                </el-col>
+                <el-col :span="17">
+                  <el-radio-group v-model="assetSetting.auth.privProtocol">
+                    <el-radio-button label="DES"></el-radio-button>
+                    <el-radio-button label="AES"></el-radio-button>
+                  </el-radio-group>
+                </el-col>
+              </el-row>
+
+              <el-row class="mib-browser-ad-search-item" v-if="assetSetting.auth.securityLevel == 'authPriv'">
+                <el-col :span="6">
+                  <div class="mib-browser-ad-search-label">{{$t('project.module.privPassword')}}</div>
+                </el-col>
+                <el-col :span="17">
+                  <el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.privPassword"></el-input>
+                </el-col>
+              </el-row>
+            </template>
+          </div>
+          <button slot="reference"  class="nz-btn nz-btn-size-normal nz-btn-style-light" id="snmp-advanced">
+            <i class="el-icon-more"></i>
+          </button>
+        </el-popover>
         <div class="right-box-row-btn" @click="delSelf"><i class="el-icon-minus"></i></div>
       </el-form-item>
       <div class="endpoints-box-endpoints">
@@ -12,7 +116,7 @@
                   v-scrollBar:el-table="'large'"
                   max-height="300"
                   height="200"
-                  :row-class-name="assetSetting.assetId == null?'not-allowed':''"
+                  :row-class-name="assetSetting.host == null?'not-allowed':''"
                   @row-dblclick="changeRowEditState"
                   @row-click="validateRows"
                   class="taffic-setting-tab"
@@ -23,7 +127,9 @@
             show-overflow-tooltip
             v-for="(item, index) in tableLabels"
             :width="item.width"
+            align="center"
             :key="`col-${index}`"
+            style="max-height: 200px"
             >
             <template slot="header">
               <span v-if="item.required == true"><span style="color: red;">*</span>{{item.label}}</span>
@@ -31,17 +137,40 @@
             </template>
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'tags'">
-                <div v-if="scope.row.edit==false">{{scope.row[item.prop]}}</div>
-                <template v-else>
-                  <el-input @click.native.stop="showEditTagsBox(true,scope.$index,$event)" :disabled="assetSetting.assetId == null" v-model="scope.row[item.prop]" size="mini" :readonly="true" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.assetId == null}"></el-input>
-                </template>
+                <div style="height: 50px;">
+                  <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"
+                      @click="showEditTagsBox(true,scope.$index,$event)"
+                      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>-->
+
+                      <!--                  </div>-->
+                      {{key}}：{{value}}
+                    </el-tag>
+                  </el-scrollbar>
+                </div>
               </template>
               <template v-if="item.prop == 'ifindex'">
                 <span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
                 <template v-else>
-                  <el-select v-model="scope.row[item.prop]" :disabled="assetSetting.assetId == null" size="mini" popper-class="no-style-class" @change="ifIndexChange(scope.row[item.prop],scope.row)" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.assetId == null}">
-                    <el-option v-for="(item,index) in ifIndexList" :label="item.label" :value="item.value" :key="item.value" :disabled="item.isOccupy"></el-option>
-                  </el-select>
+<!--                  <el-select v-model="scope.row[item.prop]" :disabled="assetSetting.host == null" size="mini" popper-class="no-style-class" @change="ifIndexChange(scope.row[item.prop],scope.row)" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.host == null}">-->
+<!--                    <el-option v-for="(item,index) in ifIndexList" :label="item.label" :value="item.value" :key="item.value" :disabled="item.isOccupy"></el-option>-->
+<!--                  </el-select>-->
+                  <el-autocomplete
+                    v-model.number="scope.row[item.prop]"
+                    :fetch-suggestions="loadIfIndex"
+                    :debounce="300"
+                    :trigger-on-focus="true"
+                    size="mini"
+                    :highlight-first-item="true"
+                    @input="ifIndexInputChange"
+                  ></el-autocomplete>
                 </template>
               </template>
               <template v-if="item.prop == 'ifdescr'">
@@ -53,7 +182,7 @@
                   <span v-if="scope.row[item.prop][1]">{{scope.row[item.prop][1]}}</span>
                 </template>
                 <template v-else>
-                  <el-checkbox-group :disabled="assetSetting.assetId == null" v-model="scope.row[item.prop]" class="direction-checkbox" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.assetId == null}">
+                  <el-checkbox-group :disabled="assetSetting.host == null" v-model="scope.row[item.prop]" class="direction-checkbox" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.host == null}">
                     <div class="input__inner">
                       <el-checkbox label="rx"></el-checkbox>
                       <el-checkbox label="tx"></el-checkbox>
@@ -65,7 +194,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.assetId == 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.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>
             </template>
           </el-table-column>
         </el-table>
@@ -130,6 +259,10 @@
         editTagsBox: {show: false, top: 0, left: 0,}, //param编辑弹框
         tempTagsObj:[],
         showTags:[],
+        showTagInput:false,
+        newTag:{key:'',value:''},
+        hostTimer:null,
+        ifIndexError:false,
       }
     },
     created() {
@@ -175,52 +308,103 @@
         ]
         this.queryInterfaceInfos(this.assetSetting.assetId,true);
       },
-      queryInterfaceInfos:function(assetId,skipCommit=false){
-        if(!assetId&&assetId !=''){
-          return;
+      queryInterfaceInfos:function(skipCommit=false){
+        // this.$refs.loading.startLoading();
+        let queryParams={
+          operation:'walk',
+          host:this.assetSetting.host,
+          port:this.assetSetting.port,
+          version:this.assetSetting.version,
+          community:this.assetSetting.community,
+          oid:'1.3.6.1.2.1.2.2.1',
+          auth:this.assetSetting.auth,
         }
-        let asset=this.assetList.find(item=>{
-          return item.id == assetId;
-        })
-        if(asset){
-          this.$refs.loading.startLoading();
-          let queryParams={
-            operation:'walk',
-            host:asset.host,
-            port:161,
-            version:2,
-            community:'public',
-            oid:'1.3.6.1.2.1.2.2.1',
+        this.$post('/mib/browser',queryParams).then(response=>{
+          this.ifIndexList=[];
+          this.ifDescMap.clear();
+          if(response.code == 200){
+            let resultList=response.data.list;
+            let ifIndexList=resultList.filter(item=>{
+              return /if(?:Index)\.\d+/.test(item.name);
+            })
+
+            this.ifIndexList=ifIndexList.map(item=>{
+              return {label:item.value,value:Number.parseInt(item.value),isOccupy:false};
+            })
+
+            let ifDescrList=resultList.filter(item=>{
+              return /if(?:Descr)\.\d+/.test(item.name);
+            })
+            this.ifDescrList=ifDescrList.filter(item=>{
+              this.ifDescMap.set(item.name,item.value)
+            })
+            this.commitAdd(skipCommit);
+            // this.$refs.loading.endLoading();
+          }else{
+            // this.$refs.loading.endLoading();
+            console.error(response);
+            this.$message.error(response.msg)
           }
-          this.$post('/mib/browser',queryParams).then(response=>{
-            this.ifIndexList=[];
-            this.ifDescMap.clear();
-            if(response.code == 200){
-              let resultList=response.data.list;
-              let ifIndexList=resultList.filter(item=>{
-                return /if(?:Index)\.\d+/.test(item.name);
-              })
+        })
 
-              this.ifIndexList=ifIndexList.map(item=>{
-                return {label:item.value,value:Number.parseInt(item.value),isOccupy:false};
-              })
+      },
+      loadIfIndex:function(queryString,cb){
+        cb(this.ifIndexList);
+      },
+      queryAssetHosts:function(queryString,cb){
+        let param={
+          pageSize:-1,
+          host:queryString,
+        }
+        this.$get('/asset',param).then(response=>{
+          if(response.code == 200){
+            let data=response.data.list;
+            console.log(data)
+            let result=data.map(item=>{
+              return {label:item.host,value:item.host}
+            })
+            cb(result)
+          }else{
+            cb([]);
+            console.error(response)
+          }
+        })
+      },
+      popShow() {
 
-              let ifDescrList=resultList.filter(item=>{
-                return /if(?:Descr)\.\d+/.test(item.name);
-              })
-              this.ifDescrList=ifDescrList.filter(item=>{
-                this.ifDescMap.set(item.name,item.value)
-              })
-              this.commitAdd(skipCommit);
-              this.$refs.loading.endLoading();
+      },
+      popHide() {
+
+      },
+      showInput:function(){
+        this.showTagInput=true;
+      },
+      handleInputConfirm:function(){
+
+      },
+      ifIndexInputChange:function(value){
+        if(this.ifIndexList && this.ifIndexList.length>0){
+          let temp=this.ifIndexList.find(item=>{
+            return item.value == Number.parseInt(value);
+            if(!temp){
+              this.ifIndexError=true;
             }else{
-              this.$refs.loading.endLoading();
-              console.error(response);
-              this.$message.error(response.msg)
+              this.ifIndexError=false;
             }
           })
         }
       },
+      hostInputChange:function(value){
+        console.log('input change')
+        if(this.hostTimer){
+          clearTimeout(this.hostTimer);
+        }
+        this.hostTimer=setTimeout(()=>{
+          console.log('lazy loading')
+          this.queryInterfaceInfos();
+        },1000)
+      },
+
       changeRowEditState:function(row,column,event){
         if(this.validateRows()){
           this.commitAdd(true);
@@ -234,7 +418,7 @@
       },
       validateRows:function(){
         let validateFlag=true;
-        validateFlag=this.assetSetting && this.assetSetting.assetId != null ;
+        validateFlag=this.assetSetting && this.assetSetting.host != '' ;
         if(!validateFlag){
           this.assetValidate=true;
           return validateFlag;
@@ -306,7 +490,7 @@
         this.$emit('delSelf',this.index)
       },
       showEditTagsBox:function(show,index,e){
-        if(this.assetSetting.assetId != null){
+        if(this.assetSetting.host != ''){
           this.$refs.subBox.showEditTagsBox(show,this.assetSetting.configs,index,e);
         }
       },
@@ -334,8 +518,32 @@
   .asset-config-tab .add-btn{
     text-align: center;
   }
+  .asset-config-tab #snmp-advanced{
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    height: 30px;
+    position: relative;
+    left: -4px;
+    top:1px;
+  }
+  .asset-config-tab .right-box-row-with-btn{
+    width: calc(100% - 69px);
+  }
 </style>
 <style lang="scss">
+  .tab-tags{
+    /*border: 0px;*/
+    /*padding: 0;*/
+    /*display: inline-block;*/
+    /*border-radius: 2px;*/
+    /*width: 100px;*/
+  }
+  .tab-tags .tab-tags-item{
+    display: flex;
+  }
+  .tab-tags-item .tag-item-key{
+    /*background-color: #E6E4E4;*/
+  }
   .taffic-setting-tab .el-table__row:hover{
     .input__inner{
       border-color: #F0F0F0;
@@ -358,15 +566,33 @@
   .direction-checkbox .el-checkbox__label{
     padding-left:0px
   }
-  .taffic-setting-tab  td>.cell , .taffic-setting-tab td{
+  /*.taffic-setting-tab  td>.cell , .taffic-setting-tab td{
     text-align: center !important;
     padding:0 10px!important;
   }
   .taffic-setting-tab th>.cell{
     text-align: center !important;
     padding:0 10px!important;
-  }
+  }*/
   .not-allowed:hover{
     cursor: not-allowed;
   }
+  .asset-config-tab .asset-input .el-input__inner{
+    border-top-right-radius: 0px !important;
+    border-bottom-right-radius: 0px !important;
+  }
+  /*mib 移植*/
+  .mib-browser-ad-search-item {
+    margin-bottom: 10px;
+  }
+  .mib-browser-ad-search .el-radio-group .el-radio-button__inner {
+    height: 24px;
+    line-height: 0;
+  }
+  .mib-browser-ad-search-label {
+    line-height: 24px;
+  }
+  .mib-browser-ad-search {
+    width: 450px;
+  }
 </style>
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index ffa308352..154738a0e 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -308,8 +308,8 @@
       configTraffic: function (u) {
         let tempDc = JSON.parse(JSON.stringify(u));
         this.currentDc = tempDc;
-        console.log(this.currentDc)
         setTimeout(()=>{
+
           this.$refs.trafficBox.show(true, true);
         },200)
       },
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index 6f2c2bd7e..fca093806 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -284,6 +284,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
               let legend = [];
               if (res.length > 0) {
                 res.forEach((response, index) => {
+                  let promqlIndex=promqlInputIndexs[index];
                   if (response.data.status == 'success') {
                     let data = response.data.data.result;
                     data.forEach((result, i) => {
@@ -312,8 +313,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                       series.push(seriesItem);
                       legend.push({name: seriesItem.name, alias: null, isGray: false});
                     })
+
+                    this.$refs['promql-'+promqlIndex][0].setError('')
                   }else{
-                    let promqlIndex=promqlInputIndexs[index];
                     console.log(response)
                     this.$refs['promql-'+promqlIndex][0].setError(response.data.error)
                   }
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 69e207857..83a55c6f0 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -463,12 +463,11 @@
             this.currentProject=project;
             // this.$store.commit('setProject',this.currentProject)
           }
-          this.currentModule={};
-
           // this.$refs.projectLeft.setActiveNames([]);
         }else{
           this.currentProjectTitle=this.currentProject.name+"-"+this.currentProject.id
         }
+        this.currentModule={};
       },
       getAllModuleList:function(){
         this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
@@ -500,6 +499,7 @@
         this.$refs.projectSearch.clearSearch();
         this.showSubList = false;
         this.selectedEndpoints=[];
+        this.currentProject={};
       },
 
       //弹出endpoint编辑页