diff --git a/nezha-fronted/src/components/common/exportXLSX.vue b/nezha-fronted/src/components/common/exportXLSX.vue
index f9feaff5d..14c4cf753 100644
--- a/nezha-fronted/src/components/common/exportXLSX.vue
+++ b/nezha-fronted/src/components/common/exportXLSX.vue
@@ -126,6 +126,7 @@ export default {
   },
   mounted () {
     this.getParamsType()
+    console.log(this.importUrl)
   },
   /* watch: {
       permissions: {
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 680af285f..fb7a2f5e6 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -24,13 +24,6 @@
       </el-dropdown>
       <el-dropdown>
         <div class="header-menu__item" @click="centerDialogVisible = true"><i class="nz-icon nz-icon-guide"></i></div>
-        <!-- <el-dialog
-          title="Get started in 6 steps"
-          :visible.sync="centerDialogVisible"
-          :show="centerDialogVisible"
-          center>
-          <path-navigation></path-navigation>
-        </el-dialog> -->
         <path-navigation :show.sync="centerDialogVisible"></path-navigation>
       </el-dropdown>
     </div>
@@ -141,7 +134,7 @@ export default {
         this.$store.commit('setLinkData', response.data.list)
         // this.linkData = response.data.list
         // console.log(this.linkData);
-      }) 
+      })
     },
     changeLocal (lang) {
       if (lang != localStorage.getItem('nz-language')) {
@@ -258,7 +251,7 @@ export default {
           }
         }
       }
-      
+
     }
   }
   .header-menu--item {
diff --git a/nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue b/nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue
index b4586d67c..18c740f67 100644
--- a/nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue
+++ b/nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue
@@ -4,149 +4,1065 @@
       <el-tabs type="border-card">
         <el-tab-pane>
           <span slot="label"
-            ><i class="nz-icon nz-icon-datacenter1"></i> 我的行程</span
+            ><i class="nz-icon nz-icon-datacenter1"></i>Datacenter</span
           >
-          <div style="margin-top: 0">
-            1sadssssssssssssssssssssssasddddddddddddddddddddddddddddddddddddsdsadasdasdasdasdasdasdasdassssssssssssssssssssssssssssssssssssssssssddddd
+          <div>
+            <div>1</div>
+            <div>2</div>
           </div>
-          <div style="margin-top: 0">
-            1sadssssssssssssssssssssssasddddddddddddddddddddddddddddddddddddsdasdassssssssssssssssssssssssssssssssssssssssssddddd
+          <el-button @click="addDatacenter">Add Datacenter</el-button>
+          <el-button @click="addCabinet">Add Cabinet</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-agent"></i>Agent</span
+          >
+          <div>
+            <div>1</div>
+            <div>2</div>
           </div>
-          <el-button @click="addDatacenter">add a</el-button>
-          <el-button @click="addCabinet">add b</el-button>
+          <el-button @click="addAgent">Add Agent</el-button>
+          <el-button @click="DownloadAgent">Download agent</el-button>
         </el-tab-pane>
         <el-tab-pane>
           <span slot="label"
-            ><i class="nz-icon nz-icon-agent"></i> 我的行程</span
+            ><i class="nz-icon nz-icon-menu-assets"></i>Asset</span
           >
-          <div>1</div>
-          <el-button @click="addAgent">add a</el-button>
-          <el-button @click="downloadAgent">add b</el-button>
+          <div>
+            <div>1</div>
+            <div>2</div>
+          </div>
+          <el-button @click="addAsset">Add Asset</el-button>
+          <el-button @click="importAsset">Import asset</el-button>
+          <el-button @click="webTerminal">Web terminal</el-button>
         </el-tab-pane>
         <el-tab-pane>
           <span slot="label"
-            ><i class="nz-icon nz-icon-menu-assets"></i> 我的行程</span
+            ><i class="nz-icon nz-icon-menu-project"></i> Monitor</span
           >
-          <div>1</div>
-          <el-button @click="addAsset">add a</el-button>
-          <el-button @click="importAsset">add b</el-button>
-          <el-button @click="webTerminal">add c</el-button>
+          <div>
+            <div>1</div>
+            <div>2</div>
+          </div>
+          <el-button @click="addPeoject">Add Peoject</el-button>
+          <el-button @click="addModule">Add Module</el-button>
+          <el-button @click="addEndpoint">Add Endpoint</el-button>
+          <el-button @click="importEndpoint">Import Endpoint</el-button>
         </el-tab-pane>
         <el-tab-pane>
           <span slot="label"
-            ><i class="nz-icon nz-icon-menu-project"></i> 我的行程</span
+            ><i class="nz-icon nz-icon-visualization"></i>Visualization</span
           >
-          <div>1</div>
-          <el-button @click="addPeoject">add a</el-button>
-          <el-button @click="addModule">add b</el-button>
-          <el-button @click="addEndpoint">add c</el-button>
-          <el-button @click="importEndpoint">add d</el-button>
+          <div>
+            <div>1</div>
+            <div>2</div>
+          </div>
+          <el-button @click="addPanel">Add panel</el-button>
+          <el-button @click="addCharts">Add chart</el-button>
         </el-tab-pane>
         <el-tab-pane>
           <span slot="label"
-            ><i class="nz-icon nz-icon-visualization"></i> 我的行程</span
+            ><i class="nz-icon nz-icon-terminal-log"></i>Alert</span
           >
-          <div>1</div>
-          <el-button @click="addPanel">add a</el-button>
-          <el-button @click="addChart">add b</el-button>
-        </el-tab-pane>
-        <el-tab-pane>
-          <span slot="label"
-            ><i class="nz-icon nz-icon-terminal-log"></i> 我的行程</span
-          >
-          <div>1</div>
-          <el-button @click="addAlertRule">add a</el-button>
+          <div>
+            <div>1</div>
+            <div>2</div>
+          </div>
+          <el-button @click="addAlertRule">Add alert rule</el-button>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
+    <!-- dc -->
+    <transition name="right-box">
+      <dc-box v-if="rightBox.dc.show" :dc="dc" :user-data="userData" @close="closeDcBox" @refresh="getTableData"></dc-box>
+    </transition>
+    <!-- cabinet -->
+    <transition name="right-box">
+      <cabinet-box v-if="rightBox.cabinet.show" :cabinet="cabinet" ref="cabinetEditBox" @close="closeCabinetBox"></cabinet-box>
+    </transition>
+    <!-- agent -->
+    <transition name="right-box">
+      <agent-box v-if="rightBox.agents.show" :agents="agents" @close="closeAgentBox"></agent-box>
+    </transition>
+    <el-dialog :title="$t('config.agent.agent.title')" :visible.sync="showAgentDownload" append-to-body class="nz-dialog agent-dialog" width="800px" @close="closeDialog">
+      <div v-if="showAgentDownload" class="agent-box">
+        <el-form v-model="agentParam" class="right-box-form  right-box-form-left" label-position = "top" label-width="120px" size="small" style="width: 100%">
+          <div class="right-box-sub-title">{{$t('config.agent.agent.download')}}</div>
+          <div style="margin-bottom: 20px;width: 100%"></div>
+          <el-form-item :label="$t('config.agent.agent.osType')" class="half-form-item" prop="osType">
+            <el-select v-model="agentParam.osType" class="right-box-row-with-btn" placeholder="">
+              <el-option v-for="item in osTypes" :key="item.name" :label="item.label" :value="item.name">
+                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item   class="half-form-item">
+            <button class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" @click="downloadAgent">{{$t('config.agent.agent.download')}}</button>
+          </el-form-item>
+          <div class="right-box-sub-title">{{$t('config.agent.agent.autoScript')}}</div>
+          <div style="margin-bottom: 20px;width: 100%"></div>
+
+          <el-form-item :label="$t('config.dc.dc')" class="half-form-item" prop="dc">
+            <el-select v-model="agentParam.dc" class="right-box-row-with-btn" placeholder="">
+              <el-option v-for="item in allDc" :key="item.id" :label="item.name" :value="item.id">
+                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('config.agent.agent.type')" class="half-form-item" prop="type">
+            <el-select v-model="agentParam.type" class="right-box-row-with-btn" placeholder="">
+              <el-option v-for="item in agent2.theData" :key="item.value" :label="item.label" :value="item.value" :disabled="federationEnabled && item.value == 2">
+                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="cURL"  v-if="loadFinish" class="download-url">
+            <el-input id="download-url-curl" :disabled="true" v-model="curlUrl">
+              <el-popover :content="$t('tip.copySuccess')" placement="top" trigger="manual" v-model="curlVisible" popper-class="small-pop" slot="suffix" @after-enter="popShow('curl')">
+                <i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-curl')"></i>
+              </el-popover>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="Wget"  v-if="loadFinish" class="download-url">
+            <el-input id="download-url-wget" :disabled="true" v-model="wgetUrl">
+              <el-popover :content="$t('tip.copySuccess')" placement="top" trigger="manual" v-model="wgetVisible" popper-class="small-pop" slot="suffix" @after-enter="popShow('wget')">
+                <i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-wget')"></i>
+              </el-popover>
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+    <!-- asset -->
+    <transition name="right-box">
+      <asset-box
+        v-if="rightBox.asset.show"
+        ref="assetBox"
+        :asset="asset"
+        :dc-data="dcData"
+        :field-group-data="fieldGroupData"
+        :from="fromRoute.asset"
+        :snmp-credential-data="snmpCredentialData"
+        :state-data="stateData"
+        :type-data="typeData"
+        @close="closeAssetBox"></asset-box>
+    </transition>
+    <!-- project -->
+    <transition name="right-box">
+      <projectBox v-if="rightBox.project.show" :project="project" @close="closeProjectBox"></projectBox>
+    </transition>
+    <transition name="right-box">
+      <moduleBox v-if="rightBox.module.show" :module="moduleList" @close="closeModuleBox"></moduleBox>
+    </transition>
+    <transition name="right-box">
+      <addEndpointBox v-if="rightBox.endpoint.show" :endpoint="endpoint" @close="closeEndpointBox"></addEndpointBox>
+    </transition>
+    <transition name="right-box">
+      <chart-box
+      :charts="charts"
+      :from="$CONSTANTS.fromRoute.panel"
+      :panel-data="panelData"
+      :show-panel="showPanel"
+      @close="closeChartsBox"
+      @delete-chart="delChart"
+      @on-create-success="createSuccess"
+      @on-delete-success="delChartOk"
+      @reload="panelReload"
+      @reloadOnlyPanel="panelReloadOnlyPanel"
+      ref="addChartModal"
+      v-if="rightBox.charts.show"></chart-box>
+    </transition>
+    <transition name="right-box">
+      <alert-rule-box v-if="rightBox.alert.show" ref="alertConfigBox" :alert="alert" @close="closeAlertBox"></alert-rule-box>
+    </transition>
+    <!--web-->
+    <el-dropdown>
+      <el-dropdown-menu></el-dropdown-menu>
+      <div id="header-open-cli" @click="cli">
+<!--        <div class="header-menu__item"><i class="nz-icon nz-icon-terminal"></i></div>-->
+<!--        <span v-show="$store.state.consoleCount>0" class="right-tip">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</span>-->
+      </div>
+    </el-dropdown>
+    <!--import-->
+    <el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
+      <div v-if="importBox.type == 1">
+        <div class="upload-body">
+          <el-upload drag class="upload-demo" ref="uploadExcel"  action="" :file-list="importFileList" :on-change="importChange"  :auto-upload="false" accept=".xlsx,.xls" :id="id+'-xlsx-input-file'">
+            <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
+            <i class="nz-icon nz-icon-upload"></i>
+            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+            <!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+              <span class="top-tool-btn-txt" >{{$t('overall.upload')}}</span>
+            </button>-->
+          </el-upload>
+        </div>
+        <div slot="footer" class="footer">
+          <div class="el-message-box__btns" style="text-align: right;">
+            <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
+              <span>{{$t('overall.template')}}</span>
+            </button>
+            <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
+              <span>{{$t('overall.importExcel')}}</span>
+            </button>
+            <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
+              <span>{{$t('overall.cancel')}}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-if="importBox.type == 2">
+        <div class="upload-body">
+          <button @click="exportCur"  class="el-button el-button--default el-button--small" :id="id+'-xlsx-export-current'">
+            <span>{{$t('overall.exportCur')}}</span>
+          </button>
+          <button  @click="exportAll"  class="el-button el-button--default el-button--small" :id="id+'-xlsx-export-all'">
+            <span>{{$t('overall.exportAll')}}</span>
+          </button>
+        </div>
+        <div slot="footer" class="footer">
+        </div>
+      </div>
+      <div v-if="importBox.type==3">
+        <div class="upload-body result-body">
+          <div>
+            <span class="result-title">{{$t('overall.result.total')}}:</span>
+            <span>{{importResult&&importResult.totalNum?importResult.totalNum:0}}</span>
+          </div>
+          <div>
+            <span class="result-title">{{$t('overall.result.failed')}}:</span>
+            <span>{{importResult&&importResult.failNum?importResult.failNum:0}}</span>
+            <span class="result-title">{{$t('overall.result.success')}}:</span>
+            <span>{{importResult&&importResult.successNum?importResult.successNum:0}}</span>
+          </div>
+          <div>
+            <div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
+            <div class="result-detail" v-if="importResult&&importResult.failDetail">
+              <div style="height: 100%; overflow: auto;">
+                <!-- <ul>
+                   <li v-for="(item,index) in importResult.failDetail"><span>{{item.lineNo}}</span>:<span>{{item.errorMsg}}</span> </li>
+                 </ul>-->
+                <template v-for="(item, index) in importResult.failDetail">
+                  <div :key="index" class="import-result-block">
+                    <div class="import-result-item">
+                      <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
+                      <div>{{item.errorMsg}}</div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div slot="footer" class="footer">
+          <div class="el-message-box__btns">
+            <button @click="rollbackImport"  class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" :id="id+'-xlsx-import-rollback'">
+              <span>{{$t('overall.rollbackImport')}}</span>
+            </button>
+            <!--<button  @click="closeDialog"  class="el-button el-button&#45;&#45;default el-button&#45;&#45;small">-->
+            <!--<span>{{$t('overall.cancel')}}</span>-->
+            <!--</button>-->
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import DcBox from "@/components/common/rightBox/dcBox";
+import AgentBox from '../../common/rightBox/agentBox';
+import AssetBox from '../../common/rightBox/asset/assetBox';
+import dataListMixin from '@/components/common/mixin/dataList';
+import projectBox from '@/components/common/rightBox/projectBox';
+import moduleBox from '@/components/common/rightBox/moduleBox'
+import addEndpointBox from '@/components/common/rightBox/addEndpointBox'
+import alertRuleBox from '@/components/common/rightBox/alertRuleBox'
+import ChartBox from '../../page/dashboard/chartBox'
+import table from '@/components/common/mixin/table'
+import cabinetBox from '@/components/common/rightBox/setting/cabinetBox'
+import exportXLSX from '@/components/common/exportXLSX'
+
+import { agent, agent2 } from '@/components/common/js/constants'
+import axios from 'axios'
+
 export default {
   props: {
     show: Boolean,
+    exportUrl: { type: String, required: true },
+    params: { type: Object },
+    exportFileName: { type: String },
+    importUrl: { type: String, required: true },
+    link: { type: Object },
+    permissions: { type: Object },
+    showCur: { type: Boolean, default: true },
+    id: { type: String, default: 'export' }
   },
   components: {
-    DcBox
+    DcBox,
+    ChartBox,
+    AgentBox,
+    AssetBox,
+    projectBox,
+    moduleBox,
+    addEndpointBox,
+    alertRuleBox,
+    cabinetBox,
+    'export-excel': exportXLSX,
+  },
+  mixins: [dataListMixin,table],
+  computed: {
+    wgetUrl () {
+      return 'wget -qO- --header="Authorization:' + this.token + '" ' + this.ipAddr + '/agent/' + this.agentParam.dc + '/' + this.agentParam.type + '/install.sh | bash'
+    },
+    curlUrl () {
+      return 'curl -o- -H "Authorization:' + this.token + '" ' + this.ipAddr + '/agent/' + this.agentParam.dc + '/' + this.agentParam.type + '/install.sh | bash'
+    }
   },
   data() {
-    return {};
+    return {
+      // dc
+      userData: [],
+      // asset
+      dcData: [],
+      typeData: [],
+      stateData: [],
+      fieldGroupData: [],
+      snmpCredentialData: [],
+      // panel
+      panelData: [],
+      showPanel: { // panel下拉列表
+        id: '',
+        name: '',
+        type: 'panel'
+      },
+      // agert
+      osTypes: [{
+          label: 'Centos',
+          name: 'centos'
+      }],
+      agentParam: {
+        osType: 'centos',
+        dc: '',
+        type: 1
+      },
+      allDc: [],
+      agent: agent,
+      agent2: agent2,
+      showAgentDownload: false,
+      // import
+      importBox: { show: false, title: this.$t('overall.importExcel') , type: 1},
+      importFile: null,
+      importFileList: [],
+      importResult: null,
+      exportShow: false,
+      paramsType: '',
+      // importUrl: '/monitor/module',
+      rightBox: {
+        dc: {
+          show: false
+        },
+        asset: {
+          show: false
+        },
+        agents: {
+          show: false
+        },
+        project: {
+          show: false
+        },
+        module: {
+          show: false
+        },
+        endpoint: {
+          show: false
+        },
+        charts: {
+          show: false
+        },
+        alert: {
+          show: false
+        },
+        cabinet: {
+          show: false
+        },
+        panel: {
+          show: false
+        }
+      },
+      dc: {
+        id: '',
+        name: '',
+        location: '',
+        tel: '',
+        principal: '',
+        state: 'ON',
+        longitude: undefined,
+        latitude: undefined
+      },
+      agents: {
+        id: '',
+        host: '',
+        port: 9090,
+        dc: { id: '', name: '', location: '' }
+      },
+      asset: {
+        id: '',
+        name: '',
+        pid: '',
+        sn: '',
+        manageIp: '',
+        stateId: '',
+        purchaseDate: null,
+        dcId: '',
+        cabinetId: '',
+        brandId: '',
+        brand: { id: '', name: '' },
+        modelId: '',
+        model: { id: '', name: '' },
+        type: { name: '', id: '' },
+        brandAndModel: [],
+        typeId: '',
+        authProtocolPort: '',
+        authType: '',
+        authUsername: '',
+        authPin: '',
+        authPriKey: '',
+        authUserTip: '',
+        authPinTip: '',
+        fields: [],
+        accounts: []
+      },
+      project: {
+        id: '',
+        name: '',
+        remark: ''
+      },
+      moduleList: {
+        id: '',
+        projectId: '',
+        name: '',
+        endpointNameTmpl: '{{module.name}}-{{asset.name}}',
+        type: 'http',
+        port: 9100,
+        configs: {
+          walk: [],
+          snmpCredentialsId: '',
+          metrics_path: '',
+          port: '',
+          host: '{{asset.manageIp}}',
+          scrape_interval: '',
+          scrape_timeout: '',
+          params: '',
+          labels: '',
+          basic_auth: {
+            username: '',
+            pin: ''
+          },
+          bearer_token: ''
+        },
+        walk: [],
+        labelModule: [{
+          key: '',
+          value: ''
+        }],
+        paramObj: [{
+          key: '',
+          value: []
+        }]
+      },
+      endpoint: {},
+      charts: {
+        id: '',
+        name: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: 2,
+        param: { url: '', threshold: '' },
+        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
+        panel: '',
+        sync: 0,
+        remark: '',
+        groupId: -1
+      },
+      alert: {
+        id: '',
+        alertName: '',
+        linkObject: { id: '', name: '' },
+        expr: '',
+        unit: 2,
+        operator: '>',
+        last: 60,
+        severity: 'P2',
+        summary: '',
+        description: ''
+      },
+      cabinet: {
+        id: '',
+        idcId: '',
+        name: '',
+        remark: '',
+        seq: '',
+        uSize: 1
+      },
+      panel: {
+        id: '',
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: 2,
+        param: {
+          url: '',
+          threshold: ''
+        },
+      }
+    };
+  },
+   mounted() {
+    this.getStateData()
+    this.getTypeTreeData()
+    this.getDcData()
+    this.getSnmpCredentialData()
+    this.getFieldGroupData()
+     console.log(this.$router)
   },
   methods: {
     // Datacenter
     addDatacenter() {
-      this.$router.push({
-        path: "/dc",
-      });
+      this.rightBox.dc.show = true
       this.$emit("update:show", false);
     },
     addCabinet() {
-      console.log(2);
-      console.log(this.$route);
-      this.$router.push({
-        path: "/dc/cabinet",
-      });
+      this.rightBox.cabinet.show = true
       this.$emit("update:show", false);
     },
     // Angebt
     addAgent() {
-      this.$router.push({
-        path: "/agent",
-      });
+      this.rightBox.agents.show = true
       this.$emit("update:show", false);
     },
-    downloadAgent() {
-      console.log(4);
+    DownloadAgent() {
+      this.$emit("update:show", false);
+      this.toDownloadAgent()
     },
     // Asset
     addAsset() {
-      this.$router.push({
-        path: "/asset",
-      });
+      this.rightBox.asset.show = true
       this.$emit("update:show", false);
     },
     importAsset() {
-      console.log(6);
+      this.showImportBox(1)
+      console.log(this.importUrl)
+      this.$emit("update:show", false);
     },
     webTerminal() {
-      console.log(7);
+      this.cli()
+      this.$emit("update:show", false);
     },
     // Monitor
     addPeoject() {
-      this.$router.push({
-        path: "/monitor/project",
-      });
+      this.rightBox.project.show = true
       this.$emit("update:show", false);
     },
     addModule() {
-      console.log(9);
+      this.rightBox.module.show = true
+      this.$emit("update:show", false);
     },
     addEndpoint() {
-      console.log(10);
+      this.rightBox.endpoint.show = true
+      this.$emit("update:show", false);
     },
     importEndpoint() {
-      console.log(11);
+      this.showImportBox(1)
+      this.$emit("update:show", false);
     },
     // Visualization
     addPanel() {
-      this.$router.push({
-        path: "/panel",
-      });
+      // this.rightBox.panel.show = true
+      this.rightBox.charts.show = true
       this.$emit("update:show", false);
     },
-    addChart() {
-      console.log(13);
+    addCharts() {
+      this.rightBox.charts.show = true
+      this.$emit("update:show", false);
     },
     // Alert
     addAlertRule() {
-      this.$router.push({
-        path: "/alertRule",
-      });
+      this.rightBox.alert.show = true
       this.$emit("update:show", false);
     },
+    cli () {
+      this.$store.commit('openConsole')
+    },
+    // userdata
+    getUserData () {
+      return new Promise(resolve => {
+        this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
+          if (response.code === 200) {
+            this.userData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    /** asset */
+    // dcdata
+    getDcData () {
+      return new Promise(resolve => {
+        this.$get('dc', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.dcData = response.data.list
+            this.titleSearchList.dc.children = response.data.list.map(d => { return { ...d, value: d.id } })
+          }
+          resolve()
+        })
+      })
+    },
+    // fieldGroupData
+    getFieldGroupData () {
+      return new Promise(resolve => {
+        this.$get('asset/field/group', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.fieldGroupData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    // snmpCredentialData
+    getSnmpCredentialData () {
+      return new Promise(resolve => {
+        this.$get('snmp/credential', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.snmpCredentialData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    // stateData
+    getStateData () {
+      return new Promise(resolve => {
+        this.$get('asset/stateConf?pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.stateData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    // typeData
+    getTypeTreeData () {
+      return new Promise(resolve => {
+        this.$get('asset/typeConf/tree').then(response => {
+          if (response.code === 200) {
+            this.typeData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    // Download agent
+    toDownloadAgent: function () {
+      this.getAllDc()
+      this.showAgentDownload = true
+      this.token = sessionStorage.getItem('nz-token')
+      axios.get('/healthy').then(response => {
+        const url = response.request.responseURL
+        this.ipAddr = url.split('/healthy')[0]
+      })
+    },
+    closeDialog: function () {
+      this.showAgentDownload = false
+    },
+    getAllDc () {
+      this.$get('dc?pageSize=-1').then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.allDc = response.data.list
+          if (this.allDc && this.allDc.length > 0) {
+            this.loadFinish = true
+            this.agentParam.dc = this.allDc[0].id
+          }
+        }
+      })
+    },
+    downloadAgent: function () {
+      axios.get('agent/download?os=' + this.agentParam.osType, { responseType: 'blob' }).then(data => {
+        let fileName = 'confagent'
+        const disposition = data.headers['content-disposition']
+        if (disposition) {
+          fileName = disposition.split(';')[1].split('filename=')[1]
+        }
+        // 由于ie不支持download属性，故需要做兼容判断
+        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
+          // ie独有的msSaveBlob属性，data.data为Blob文件流
+          window.navigator.msSaveBlob(data.data, fileName)
+        } else {
+          // 以下流程即为文章开始的下载流程
+          const url = window.URL.createObjectURL(data.data)
+          const link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.download = fileName
+          document.body.appendChild(link)
+          link.click()
+          window.URL.revokeObjectURL(link.href)
+        }
+      })
+    },
+    /* project */
+
+    /* panel */
+    panelReloadOnlyPanel () { // 仅刷新panel数据
+      if (!this.hasButton('panel_view')) {
+        return
+      }
+      this.$get('visual/panel?pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+          for (let i = 0; i < this.panelData.length; i++) {
+            if (this.panelData[i].id == this.showPanel.id) {
+              this.showPanel.name = this.panelData[i].name
+              break
+            }
+          }
+        }
+      })
+    },
+
+    getTableData (clearShowPanel) {
+      const vm = this
+
+      this.$get('visual/panel?type=dashboard&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+          let isInitData = false
+          if (response.data.list.length > 0) {
+            if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
+              this.showPanel = JSON.parse(JSON.stringify(this.$store.state.showPanel))
+            }
+            if (clearShowPanel) {
+              this.showPanel.id = ''
+            }
+            if (!this.showPanel.id) {
+              this.showPanel = response.data.list[0]
+              this.filter.panelId = this.showPanel.id
+              this.getData(this.filter)
+              isInitData = true
+            } else {
+              handler(response.data.list)
+              this.filter.panelId = this.showPanel.id
+            }
+            this.$nextTick(() => {
+              this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
+            })
+          } else {
+            this.showPanel.id = ''
+            this.filter.panelId = ''
+          }
+          this.pageObj.total = response.data.total
+          if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
+            this.getData(this.filter)
+          }
+          this.$store.state.showPanel.id = 0
+          this.$store.state.showPanel.name = ''
+          this.$store.state.showPanel.type = 'dashboard'
+        } else {
+          if (response.msg) {
+            this.$message.error(response.msg)
+          } else if (response.error) {
+            this.$message.error(response.error)
+          } else {
+            this.$message.error(response)
+          }
+        }
+      }).catch((error) => {
+        // console.log('error................'+JSON.stringify(error));
+        if (error) {
+          console.error(error)
+          this.$message.error(error.toString())
+        }
+      })
+
+      function handler (panelData) {
+        panelData.forEach(panel => {
+          if (panel.id == vm.showPanel.id) {
+            vm.showPanel = panel
+          } else {
+            if (panel.children && panel.children.length > 0) {
+              handler(panel.children)
+            }
+          }
+        })
+      }
+    },
+    // 面板相关操作
+    panelChange (val) {
+      if (!val) {
+        return false
+      }
+      this.filter.searchName = ''
+      // this.$refs.searchInput.select();
+      this.showPanel = val
+      this.showPanel.type = 'dashboard'
+      this.filter.panelId = this.showPanel.id
+      // let curTime = this.$refs.calendarPanel.getCurrentTime();
+      const curTime = this.searchTime
+      this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss')
+      // this.$refs.chartList.initCurrentRecordNum();
+      this.$refs.chartList.cleanData()
+      this.getData(this.filter)
+    },
+        panelReloadForDel: function () {
+      if (this.showPanel.id === this.panel.id) {
+        this.showPanel.id = ''
+      }
+      this.getTableData()
+    },
+    /* 图表相关操作--start */
+    addChart () {
+      this.chart = this.newChart()
+      this.chart.panelId = this.showPanel.id
+      this.chart.panelName = this.showPanel.name
+      this.rightBox.chart.show = true
+    },
+    addChartByTemp () {
+      this.chart = Object.assign({}, this.blankChartTemp)
+      this.chart.panelId = this.showPanel.id
+      this.rightBox.chartTemp.show = true
+    },
+    addGroupItem (groupId) {
+      this.chart = this.newChart()
+      this.chart.groupId = groupId
+      this.chart.panelId = this.showPanel.id
+      this.chart.panelName = this.showPanel.name
+      this.chart.isGroup = true
+      this.rightBox.chart.show = true
+    },
+    // 编辑图表信息,打开编辑弹窗
+    editChart (data) {
+      if (!data.param) {
+        data.param = { url: '', threshold: '' }
+      }
+      this.chart = JSON.parse(JSON.stringify(data))
+      this.chart.panelId = this.showPanel.id
+      this.chart.panelName = this.showPanel.name
+      this.rightBox.chart.show = true
+    },
+     delChartOk () {
+      this.filter.panelId = this.showPanel.id
+      this.getData(this.filter)
+    },
+    // 图表创建成功，回调panel页面，进行图表的刷新
+    createSuccess (msg, data, params, panel) {
+      this.filter.panelId = this.showPanel.id
+      this.getData(this.filter)
+    },
+    // 移除图表:弹出确认框询问
+    delChart (data, from) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('visual/panel/chart?ids=' + data.id).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.deleteSuccess')
+            })
+            this.rightBox.chart.show = false
+            const chartList = this.$refs.chartList.dataList
+            for (let i = 0; i < chartList.length; i++) {
+              if (chartList[i].id === data.id) {
+                chartList.splice(i, 1)
+              }
+              if (chartList[i].type === 'group') {
+                chartList[i].children = chartList[i].children.filter((item) => item.id !== data.id)
+              }
+            }
+            this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    panelReload (clearShowPanel) {
+      this.getTableData(clearShowPanel)
+    },
+    panelReloadOnlyPanel () { // 仅刷新panel数据
+      if (!this.hasButton('panel_view')) {
+        return
+      }
+      this.$get('visual/panel?pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+          for (let i = 0; i < this.panelData.length; i++) {
+            if (this.panelData[i].id == this.showPanel.id) {
+              this.showPanel.name = this.panelData[i].name
+              break
+            }
+          }
+        }
+      })
+    },
+    showImportBox (type) {
+      this.importBox.show = true
+      this.importBox.type = type
+      if (type == 2 && (!this.showCur)) {
+        this.exportCur()
+        return
+      }
+      if (type == 1) { // import
+        this.importBox.title = this.$t('overall.importExcel')
+        this.importBox.width = '600px'
+      }
+    },
+    importChange (file, fileList) {
+      if (fileList.length > 0) {
+        this.importFileList = [fileList[fileList.length - 1]]
+      }
+      this.importFile = this.importFileList[0]
+      this.validateFile()
+    },
+    downloadTemplate () {
+      const language = localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
+      const fileName = this.exportFileName + '-' + this.$t('overall.template') + '-' + this.getTimeString() + '.xlsx'
+
+      let url = null
+      if (this.importUrl.indexOf('asset') > -1) {
+        url = '/asset/template'
+      } else if (this.importUrl.indexOf('rule') > -1) {
+        url = '/alert/rule/template'
+      } else if (this.importUrl.indexOf('panel') > -1) {
+        url = '/panel/template'
+      } else if (this.importUrl.indexOf('endpoint') > -1) {
+        url = '/monitor/endpoint/template'
+      } else if (this.importUrl.indexOf('tmpl') > -1) {
+        url = '/expression/tmpl/template'
+      }
+
+      const param = { language: language }
+      if (!url) {
+        console.error('no interface support')
+      }
+      this.exportExcel(url, param, fileName)
+    },
+    importExcel () {
+      if (this.importFile && this.importFile.raw) {
+        this.prevent_opt.import = true
+        const form = new FormData()
+        form.append('excelFile', this.importFile.raw)
+        if (this.paramsType) {
+          form.append('type', this.paramsType)
+          if (this.paramsType === 'asset' || this.paramsType === 'model') {
+            form.append('linkId', this.link ? this.link.id : '')
+          }
+        }
+        form.append('language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+        this.$post(this.importUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
+          if (response.code == 200 && response.msg == 'success') {
+            this.importResult = response.data
+            this.$emit('afterImport')
+            this.importBox.type = 3
+            this.importBox.width = '600px'
+          } else {
+            this.$message.error(response.msg)
+          }
+          this.prevent_opt.import = false
+        })
+      } else {
+        this.$message.error(this.$t('tip.noImportFile'))
+      }
+    },
+    exportCur () {
+      const params = Object.assign({}, this.params)
+      params.language = localStorage.getItem('nz-language') || 'en'
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.closeDialog()
+    },
+    exportAll () {
+      const params = JSON.parse(JSON.stringify(this.params))
+      params.pageSize = -1
+      if (this.importUrl.indexOf('panel') > -1) {
+        delete params.panelId
+      }
+      params.language = localStorage.getItem('nz-language') || 'en'
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.closeDialog()
+    },
+    // Box 侧滑关闭事件
+    closeDcBox (refresh) {
+      this.rightBox.dc.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    closeAgentBox (refresh) {
+      this.rightBox.agents.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    closeAssetBox (refresh) {
+      this.rightBox.asset.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    closeProjectBox (refresh) {
+      this.rightBox.project.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    closeModuleBox (refresh) {
+      this.rightBox.module.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    closeEndpointBox (refresh) {
+      this.rightBox.endpoint.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    closeChartsBox (refresh) {
+      this.rightBox.charts.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    closeAlertBox (refresh) {
+      this.rightBox.alert.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    closeCabinetBox (refresh) {
+      this.rightBox.cabinet.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    }
   },
-  computed: {},
+  watch: {
+
+  }
 };
 </script>
 <style lang="scss">
@@ -162,6 +1078,7 @@ export default {
       width: 156px;
       height: 46px;
       border-radius: 2px;
+      margin-top: 40px;
       background-color: #666;
       span {
         color: #fff;
@@ -169,4 +1086,7 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+.right-box{
+  text-align: left;
+}
+</style>
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 739ad7f3e..8d32282bc 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -25,7 +25,8 @@
         >
           <template slot="optionZone">
             <button id="asset-create-asset" v-has="'asset_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="add">
-              <i class="nz-icon nz-icon-create-square"></i></button>
+              <i class="nz-icon nz-icon-create-square"></i>
+            </button>
           </template>
         </export-excel>
         <button id="asset-batch-asset" v-has="'asset_edit'" :title="$t('overall.batchEdit')" class="top-tool-btn margin-r-10" @click.stop="batchEdit">