From 6f26ba3d03d13006cd360b45071b7ae0cc412d12 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 16 Apr 2021 15:02:40 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Aendpoint=20=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20=E4=BB=A5=E5=8F=8A=20ptoject=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/misc.xml                                |   2 +-
 .../src/components/common/language/cn.js      |  12 +-
 .../src/components/common/language/en.js      |  10 +-
 .../components/common/project/topologyL5.vue  |  12 +-
 .../common/rightBox/addEndpointBox.vue        | 911 +++++++++++-------
 .../common/rightBox/editEndpointBoxNew.vue    | 849 ++++++++++++++++
 .../components/common/rightBox/moduleBox.vue  |  16 +-
 .../src/components/common/searchInput.vue     |  35 +-
 .../common/table/settings/endpointTable.vue   |  14 +-
 .../common/table/settings/projectTable.vue    |  40 +-
 .../page/monitor/endpoint/endpointList.vue    |  52 +-
 .../page/monitor/module/moduleList.vue        |  11 +-
 .../components/page/monitor/project/index.vue |   3 +
 .../page/monitor/project/project.vue          |   1 +
 .../page/monitor/project/projectList.vue      |   2 +-
 15 files changed, 1555 insertions(+), 415 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue

diff --git a/.idea/misc.xml b/.idea/misc.xml
index 1c24890b2..ee3933180 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -4,6 +4,6 @@
     <option name="languageLevel" value="ES6" />
   </component>
   <component name="WebPackConfiguration">
-    <option name="mode" value="DISABLED" />
+    <option name="path" value="$PROJECT_DIR$/nezha-fronted/ws.js" />
   </component>
 </project>
\ No newline at end of file
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 321e824af..9a62a678c 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -582,7 +582,14 @@ const cn = {
       option: '操作',
       assetPing: 'Ping',
       lastReply: 'Ping最后应答',
-      vendor: '厂商'
+      vendor: '厂商',
+      sn: 'SN',
+      name: 'Name',
+      manageIp: 'manageIp',
+      brand: '品牌ID',
+      dc: '数据中心',
+      type: '主机地址',
+      state: '主机状态'
     },
     tagTableTitle: {
       projectName: '系统名称',
@@ -1156,7 +1163,8 @@ const cn = {
       privProtocol: '隐私协议',
       contextName: '内容名称',
       alerts: 'Alerts',
-      privPassword: '隐私密码'
+      privPassword: '隐私密码',
+      asset: 'Asset'
     },
     endpoint: {
       createEndpoint: '新增Endpoint',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index ea8072ce4..1ce927960 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -632,7 +632,14 @@ const en = {
       procurementDate: 'Purchase date', // '购买日期'
       principal: 'Administrator', // '负责人'
       principalTel: 'Telephone', // '电话'
-      option: 'Operation'// "操作"
+      option: 'Operation', // "操作"
+      sn: 'SN',
+      name: 'Name',
+      manageIp: 'manageIp',
+      brand: 'BrandID',
+      dc: 'DataCenter',
+      type: 'typeIds',
+      state: 'state'
     },
     tagTableTitle: {
       projectName: 'Project name', // '系统名称'
@@ -1159,6 +1166,7 @@ const en = {
       contextName: 'Context name',
       privPassword: 'Priv password',
       alerts: 'Alerts',
+      asset: 'Asset',
       tip: {
         defaultEndpointSet: 'Default endpoint settings', // "默认的Endpoint设置"
         relation: 'Module associated Endpoint will configure the following ports/paths/parameters by default'// "组件关联的Endpoint将默认配置以下端口/路径/参数"
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 500a84706..b30bf89db 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -110,7 +110,7 @@
            </button>
          </span>
       </div>
-      <div style="width: 100%;display: flex;justify-content: space-between" v-if="!editTopologyFlag&&!fromOverView">
+      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right">
         <div>{{topologyInfo.name}}</div>
         <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 <button @click="changeScreen" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
@@ -2469,13 +2469,14 @@ export default {
     position: relative;
     border-radius: 2px;
     overflow: hidden;
+    background: #fff;
     .pickTime{
       margin-top: -13px;
     }
     .project-title {
       height: 34px;
-      padding-top: 8px;
-      padding-bottom: 8px;
+      padding-top: 20px;
+      padding-bottom: 0px;
     }
 
     .drag-header {
@@ -2493,8 +2494,9 @@ export default {
 
   .page {
     display: flex;
-    height: calc(100% - 55px);
-    width: 100%;
+    height: calc(100% - 65px);
+    width: calc(100% - 10px);
+    margin: 5px;
     position: relative;
 
     .tools {
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index 6664811f8..c8f9e58e0 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="()=>{showEditParamBox(false);showEditLabelsBox(false)}" v-clickoutside="{obj:endpoint,func:clickOutside}">
+  <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-clickoutside="{obj:endpoint,func:clickOutside}">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns"></div>
     <!-- end--顶部按钮-->
@@ -19,23 +19,36 @@
         </el-form-item>
         <!--module-->
         <el-form-item :label='$t("project.module.module")' prop="moduleId" class="select-warp">
-          <el-select @change="((val) => {changeModule(val)})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small" id="add-endpoint-module">
+          <el-select @change="((val) => {changeModule(val)})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small" id="add-endpoint-module" :disabled="!currentProjectCopy.id">
             <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item" :id="'module-'+item.id"></el-option>
           </el-select>
         </el-form-item>
         <!--asset和endpoint-->
-        <div class="asset-and-endponit">
+        <div class="asset-and-endpoint">
+          <!--asset-->
           <div class="right-box-asset-table">
-            <div>
-              <search-input ref="searchInput" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
+            <div v-show="!currentModuleCopy.id" class="disabled-asset-table">
+            </div>
+            <div class="search-box">
+              <search-input
+                ref="searchInput"
+                :searchMsg="searchMsg"
+                @search="search"
+                style="width:100%"
+                :show-history="false"
+                :show-search="false"
+                :placeholder="$t('overall.placeHolder')"
+              ></search-input>
             </div>
             <el-table
               ref="multipleTable"
               :data="assetTableData"
               tooltip-effect="dark"
+              class="asset-table"
+              :row-class-name="setRowShow"
               style="width: 100%"
-              height="100%"
-              @selection-change="handleSelectionChange">
+              height="calc(100% - 97px)"
+              @selection-change="handleSelectionChangeAsset">
                <el-table-column
                 type="selection"
                 width="55">
@@ -79,13 +92,126 @@
                 </template>
               </el-table-column>
             </el-table>
+            <div class="table-bottom">
+                <el-pagination
+                  style="padding-top:10px"
+                  small
+                  @size-change="handleSizeChange"
+                  @current-change="handleSizeChange"
+                  :current-page.sync="pageObj.pageNo"
+                  :page-size="pageObj.pageSize"
+                  layout="prev, slot, next"
+                  :total="pages.total">
+                  <template>
+                    <el-input ref="jumpInput" class="jump-input" v-model.number="pages.pageNo" size="small" @change="handleCurrentChange" @keyup.enter.native="handleCurrentChange"/>
+                    <span class="jump-pages">/&nbsp{{pages.pages}}</span>
+                  </template>
+                </el-pagination>
+              <span class="add-endpoint" @click="addEndpoint">
+                <i class="nz-icon nz-icon-arrow-right"></i>
+              </span>
+            </div>
+            <div v-if="selectAssetAll" class="asset-allselect">
+              '当前页已全部选择'
+            </div>
           </div>
+          <!--endpoint-->
           <div class="right-box-endpoint-table">
-
+            <div class="search-box" style="display: flex;justify-content: flex-end">
+              <el-button @click="showRightBox" class="top-tool-btn" type="button">
+                <i class="nz-icon-gear nz-icon"></i>
+              </el-button>
+              <el-button @click="editAllEndpoint" class="top-tool-btn" type="button">
+                <i class="nz-icon-batch-edit nz-icon"></i>
+              </el-button>
+            </div>
+            <el-table
+              :data="endpointTableData"
+              ref="endpointTable"
+              style="width:100%;border-radius: 4px;"
+              height="calc(100% - 95px)"
+              id="add-endpoint-asset-table"
+              @selection-change="handleSelectionChangeEndpoint"
+              empty-text=" ">
+              <el-table-column
+                type="selection"
+                width="25"
+                style="padding: 0 1px;">
+              </el-table-column>
+              <el-table-column
+                label-class-name="endpoints-box-endpoints-title"
+                v-for="(title, index) in endpointTableTitle"
+                v-if="title.show"
+                :width="title.width"
+                :key="`col-${index}`"
+                :label="title.label"
+              >
+                <template slot-scope="scope" :column="title">
+                  <span v-if="title.prop == 'asset'">{{scope.row.assetName}}</span>
+                  <span v-else-if="title.prop == 'params'">
+                      <el-popover
+                        placement="bottom"
+                        width="200"
+                        trigger="hover"
+                      >
+                        <div class="endpoint-param-pop">
+                          <div v-for="p in scope.row.paramObj" :key="p">{{p.key}}={{p.value}}</div>
+                        </div>
+                        <span slot="reference">
+                          <span @mousedown.stop>{{scope.row.configs.params.length > 8 ? scope.row.configs.params.substring(0, 8) + '...' : scope.row.configs.params}}</span>
+                        </span>
+                      </el-popover>
+                    </span>
+                  <span v-else-if="title.prop == 'labels'">
+                      <el-popover
+                        placement="bottom"
+                        width="200"
+                        trigger="hover"
+                      >
+                        <div class="endpoint-param-pop">
+                          <div v-for="p in scope.row.labelModule" :key="p">{{p.key}}={{p.value}}</div>
+                        </div>
+                        <span slot="reference">
+                          <span @mousedown.stop>{{scope.row.configs.labels.length > 8 ? scope.row.configs.labels.substring(0, 8) + '...' : scope.row.configs.labels}}</span>
+                        </span>
+                      </el-popover>
+                    </span>
+                  <span v-else-if="title.prop == 'path'">
+                      <el-popover
+                        placement="bottom"
+                        width="100"
+                        trigger="hover"
+                        :content="scope.row.configs[title.prop]"
+                      >
+                        <span slot="reference" >
+                          <span>{{scope.row.configs.metrics_path.length > 5 ? scope.row.configs.metrics_path.substring(0, 5) + '...' : scope.row.configs.metrics_path}}</span>
+                        </span>
+                      </el-popover>
+                    </span>
+                  <span v-else-if="title.prop == 'port'">
+                      <span >{{scope.row.configs.port}}</span>
+                  </span>
+                  <span v-else-if="title.prop == 'host'">
+                      <span>{{scope.row.configs.host}}</span>
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column label="" width="56"  fixed="right">
+                <template slot-scope="scope" style="text-align: center">
+                  <span @click="editEndpointRow(scope.row, scope.$index)">
+                    <i class="nz-icon-gear nz-icon"></i>
+                  </span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="table-bottom">
+              <span class="add-endpoint" @click="removeEndpoint" style="margin-left: 10px">
+                <i class="nz-icon nz-icon-arrow-left"></i>
+              </span>
+            </div>
           </div>
         </div>
       </el-form>
-
     </div>
 
     <!--底部按钮-->
@@ -97,52 +223,24 @@
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
-
-    <!--start--param编辑框-->
-    <transition name="right-sub-box">
-      <div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
-        <div class="param-box">
-          <div v-for="(item, index) in tempParamObj" :key="index" class="param-box-row">
-            <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="removeParam(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
-          </div>
-        </div>
-        <div style="width: 100%; text-align: center; height: 25px;">
-          <el-button @click="addParam" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="nz-icon nz-icon-plus"></i></el-button>
-        </div>
-      </div>
+<!--    edit endpoint-->
+    <transition name="right-box">
+      <edit-endpoint-box-new v-if="rightBox.show" :module="object" @close="closeRightBox" :disabled="true" :type="'add'"></edit-endpoint-box-new>
     </transition>
-    <!--end--param编辑框-->
-    <!--start--labels编辑框-->
-    <transition name="right-sub-box">
-      <div @mousedown.stop class="right-sub-box" v-if="editLabelsBox.show" :style="'top: ' + editLabelsBox.top + 'px; left: ' + editLabelsBox.left + 'px;'">
-        <div class="param-box">
-          <div v-for="(item, index) in tempLabelModule" :key="index" class="param-box-row" style="position: relative">
-            <el-input placeholder="key" class="param-box-row-key input-x-mini-22" :class="{'input-error':inputKeyErr[index]}" v-model="item.key"  @input="validateInput(item.key,index)"></el-input>
-            <span style="color: #F56C6C;font-size: 12px;position: absolute;top:25px;left: 10px" v-if="inputKeyErr[index]">{{$t('validate.key')}}</span>
-            <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="removeLabels(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
-          </div>
-        </div>
-        <div style="width: 100%; text-align: center; height: 25px;">
-          <el-button @click="addLabels" id="add-labels" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="nz-icon nz-icon-plus"></i></el-button>
-        </div>
-      </div>
-    </transition>
-    <!--end--param编辑框-->
   </div>
 </template>
 
 <script>
+import editEndpointBoxNew from './editEndpointBoxNew'
 export default {
   name: 'endpointBox',
   props: {
     currentProject: Object,
     currentModule: Object
   },
+  components: {
+    'edit-endpoint-box-new': editEndpointBoxNew
+  },
   data () {
     return {
       rules: {
@@ -155,8 +253,14 @@ export default {
       },
       pageObj: {
         pageNo: 1,
-        pageSize: 10
+        pageSize: 2
       },
+      pages: {
+        total: 0,
+        pages: 0,
+        pageNo: 1
+      },
+      object: {},
       vendorAndModelOptionData: [],
       paramBorderColor: '#dcdfe6',
       endpointTouch: false,
@@ -170,11 +274,45 @@ export default {
       tempEndpoint2: {},
       assetLoading: true,
       rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false },
+      blankEndpoint: {
+        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: '',
+          paramObj: [],
+          labelModule: [],
+          basic_auth: {
+            username: '',
+            password: ''
+          },
+          bearer_token: ''
+        },
+        walk: [],
+        labelModule: [{
+          key: '',
+          value: ''
+        }],
+        paramObj: [{
+          key: '',
+          value: []
+        }]
+      },
       editParamBox: { show: false, top: 0, left: 0, type: 0 }, // param编辑弹框
       editLabelsBox: { show: false, top: 0, left: 0, type: 0 }, // param编辑弹框
       moduleParamShow: false, // module默认参数param悬浮窗
       assetSearch: { host: '', sn: '', text: '', label: 'Host', typeIds: '', modelId: '', idcId: '', dropdownShow: false }, // 侧滑框中asset的搜索相关
-      assetPageObj: { pageNo: 1, pageSize: 10 },
       selectedAssets: [], // 侧滑框中选中的asset
       projectList: [],
       moduleList: [],
@@ -184,12 +322,12 @@ export default {
         {
           label: this.$t('project.endpoint.asset'),
           prop: 'asset',
-          width: 76,
+          width: 150,
           show: true
         }, {
           label: this.$t('project.endpoint.host'),
           prop: 'host',
-          width: 76,
+          width: 80,
           show: true
         }, {
           label: this.$t('project.endpoint.port'),
@@ -203,8 +341,8 @@ export default {
           show: true
         }, {
           label: this.$t('project.endpoint.param'),
-          prop: 'param',
-          width: 90,
+          prop: 'params',
+          width: 100,
           show: true
         }, {
           label: this.$t('project.endpoint.path'),
@@ -219,157 +357,129 @@ export default {
         {
           label: this.$t('asset.tableTitle.sn'),
           prop: 'sn',
-          show: true
+          show: true,
+          minWidth: '200'
         },
         {
           label: this.$t('asset.tableTitle.name'),
           prop: 'name',
           show: false,
-          allowed: true
+          allowed: true,
+          minWidth: '200'
         }, {
           label: this.$t('asset.tableTitle.manageIp'),
           prop: 'manageIp',
-          show: true
+          show: true,
+          minWidth: '200'
         }, {
           label: this.$t('asset.tableTitle.brand'),
           prop: 'brand',
-          show: true
+          show: true,
+          minWidth: '100'
         }, {
           label: this.$t('asset.tableTitle.model'),
           prop: 'model',
-          show: true
+          show: true,
+          minWidth: '100'
         }, {
           label: this.$t('asset.tableTitle.dc'),
           prop: 'dc',
-          show: true
+          show: true,
+          minWidth: '100'
         }, {
           label: this.$t('asset.tableTitle.cabinet'),
           prop: 'cabinet',
-          show: true
+          show: true,
+          minWidth: '100'
         }, {
           label: this.$t('asset.tableTitle.type'),
           prop: 'type',
-          show: true
+          show: true,
+          minWidth: '100'
         }, {
           label: this.$t('asset.tableTitle.state'),
           prop: 'state',
-          show: true
+          show: true,
+          minWidth: '100'
         }],
       typeList: [],
       dcList: [],
       modelList: [],
       assetTableData: [],
+      assetSelection: [],
+      endpointSelection: [],
+      selectAssetAll: 0,
+      endpointTableData: [],
       seachLabel: [],
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [{
           id: 10,
-          name: 'Project name',
+          name: this.$t('asset.tableTitle.sn'),
+          type: 'input',
+          label: 'sn',
+          disabled: false
+        },
+        {
+          id: 11,
+          name: this.$t('asset.tableTitle.name'),
           type: 'input',
           label: 'name',
           disabled: false
         },
         {
-          id: 10,
-          name: 'Project id',
+          id: 11,
+          name: this.$t('asset.tableTitle.manageIp'),
           type: 'input',
-          label: 'id',
+          label: 'manageIp',
+          disabled: false
+        },
+        {
+          id: 11,
+          name: this.$t('asset.tableTitle.brand'),
+          type: 'input',
+          label: 'brand',
+          disabled: false
+        },
+        {
+          id: 11,
+          name: this.$t('asset.tableTitle.model'),
+          type: 'input',
+          label: 'model',
+          disabled: false
+        },
+        {
+          id: 11,
+          name: this.$t('asset.tableTitle.dc'),
+          type: 'input',
+          label: 'dc',
+          disabled: false
+        },
+        {
+          id: 11,
+          name: this.$t('asset.tableTitle.cabinet'),
+          type: 'input',
+          label: 'cabinet',
+          disabled: false
+        },
+        {
+          id: 11,
+          name: this.$t('asset.tableTitle.type'),
+          type: 'input',
+          label: 'type',
+          disabled: false
+        },
+        {
+          id: 11,
+          name: this.$t('asset.tableTitle.state'),
+          type: 'input',
+          label: 'state',
           disabled: false
         }]
       }
     }
   },
   methods: {
-    // 子弹框控制  obj: module或endpoint对象  type:1module2endpoint
-    showEditParamBox (show, obj, type, e) {
-      if (show) {
-        const position = e.target.getBoundingClientRect()
-        this.editParamBox.type = type
-        if (this.editParamBox.type == 2) {
-          this.tempEndpoint = obj
-        }
-        this.editParamBox.top = position.top - 227
-        this.editParamBox.left = position.left - 48
-        if (!obj.param) {
-          this.$set(obj, 'paramObj', [])
-          this.tempParamObj = []
-        } else {
-          this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj))
-        }
-      } else {
-        if (!this.editParamBox.show) {
-          return
-        }
-        for (let i = 0; i < this.tempParamObj.length; i++) {
-          if (!this.tempParamObj[i].key || !this.tempParamObj[i].value) {
-            this.tempParamObj.splice(i, 1)
-            i--
-          }
-        }
-        if (this.editParamBox.type == 1) {
-          this.currentModuleCopy.paramObj = this.tempParamObj
-          this.currentModuleCopy.param = this.paramToJson(this.tempParamObj)
-        } else if (this.editParamBox.type == 2) {
-          for (let i = 0; i < this.endpointList.length; i++) {
-            if (this.endpointList[i].asset.id == this.tempEndpoint.asset.id) {
-              this.endpointList[i].param = this.paramToJson(this.tempParamObj)
-              this.endpointList[i].paramObj = this.tempParamObj
-              break
-            }
-          }
-        }
-        this.tempParamObj = []
-      }
-      this.editParamBox.show = show
-    },
-
-    // 子弹框控制  obj: module或endpoint对象  type:1module2endpoint
-    showEditLabelsBox (show, obj, type, e) {
-      // editLabelsBox tempLabelModule labelModule
-      if (show) {
-        this.inputKeyErr = []
-        const position = e.target.getBoundingClientRect()
-        this.editLabelsBox.type = type
-        if (this.editLabelsBox.type == 2) {
-          this.tempEndpoint = obj
-        }
-        this.editLabelsBox.top = position.top - 227
-        this.editLabelsBox.left = position.left - 48
-        if (!obj.labels) {
-          this.$set(obj, 'labelModule', [])
-          this.tempLabelModule = []
-        } else {
-          this.tempLabelModule = JSON.parse(JSON.stringify(obj.labelModule))
-        }
-        this.tempLabelModule.forEach((item, index) => {
-          this.inputKeyErr.push(false)
-        })
-      } else {
-        if (!this.editLabelsBox.show) {
-          return
-        }
-        for (let i = 0; i < this.tempLabelModule.length; i++) {
-          if (!this.tempLabelModule[i].key || !this.tempLabelModule[i].value || this.inputKeyErr[i]) {
-            this.tempLabelModule.splice(i, 1)
-            i--
-          }
-        }
-        if (this.editLabelsBox.type == 1) {
-          this.currentModuleCopy.labelModule = this.tempLabelModule
-          this.currentModuleCopy.labels = this.paramToJson(this.tempLabelModule)
-        } else if (this.editLabelsBox.type == 2) {
-          for (let i = 0; i < this.endpointList.length; i++) {
-            if (this.endpointList[i].asset.id == this.tempEndpoint.asset.id) {
-              this.endpointList[i].labels = this.paramToJson(this.tempLabelModule)
-              this.endpointList[i].labelModule = this.tempLabelModule
-              break
-            }
-          }
-        }
-        this.tempLabelModule = []
-      }
-      this.editLabelsBox.show = show
-    },
     clickOutside () {
       this.esc(false)
     },
@@ -380,69 +490,6 @@ export default {
       this.$emit('close', refresh)
     },
 
-    // 新增param
-    addParam () {
-      this.tempParamObj.push({ key: '', value: '' })
-    },
-
-    // 移除单个param
-    removeParam (index) {
-      this.tempParamObj.splice(index, 1)
-    },
-    // 新增labels
-    addLabels () {
-      this.tempLabelModule.push({ key: '', value: '' })
-      this.inputKeyErr.push(false)
-    },
-
-    // 移除单个param
-    removeLabels (index) {
-      this.tempLabelModule.splice(index, 1)
-      this.inputKeyErr.splice(index, 1)
-    },
-    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)
-      }
-    },
-    // 编辑endpoint
-    toEditEndpoint (endpoint) {
-      for (let i = 0; i < this.endpointList.length; i++) {
-        if (this.endpointList[i].isEdit) {
-          this.endpointList.splice(i, 1, JSON.parse(JSON.stringify(this.tempEndpoint2)))
-          this.endpointList[i].isEdit = false
-          break
-        }
-      }
-      endpoint.isEdit = true
-      this.tempEndpoint2 = JSON.parse(JSON.stringify(endpoint))
-    },
-    editEndpoint (endpoint) {
-      this.$refs.addEndpoint.validate((valid) => {
-        if (valid) {
-          endpoint.isEdit = false
-          this.tempEndpoint2 = {}
-        } else {
-          return false
-        }
-      })
-    },
-
-    // 移除endpoint
-    removeEndpoint (endpoint) {
-      endpoint.isEdit = false
-      for (let i = 0; i < this.endpointList.length; i++) {
-        if (this.endpointList[i].assetId == endpoint.assetId) {
-          this.endpointList.splice(i, 1)
-          this.assetList.unshift(endpoint.asset)
-          i--
-          break
-        }
-      }
-    },
-
     /* 获取project列表 */
     getProjectList () {
       this.$get('monitor/project', { pageSize: -1, pageNo: 1 }).then(response => {
@@ -452,128 +499,6 @@ export default {
         }
       })
     },
-
-    /* 获取型号列表 */
-    getModelList () {
-      this.$get('monitor/module', { pageSize: -1, pageNo: 1 }).then(response => {
-        if (response.code === 200) {
-          const resultData = []
-          const modelData = response.data.list
-          for (let i = 0; i < modelData.length; i++) {
-            if (!modelData[i].vendor) {
-              continue
-            }
-            const obj = {}
-            obj.id = modelData[i].vendor.id
-            obj.code = modelData[i].vendor.code
-            obj.value = 'vendor-' + modelData[i].vendor.code
-            obj.label = modelData[i].vendor.value
-            obj.children = []
-            resultData.push(obj)
-          }
-          const result = []
-          const obj1 = {}
-          for (let i = 0; i < resultData.length; i++) {
-            if (!obj1[resultData[i].id]) {
-              result.push(resultData[i])
-              obj1[resultData[i].id] = true
-            }
-          }
-          for (let x = 0; x < result.length; x++) {
-            for (let y = 0; y < modelData.length; y++) {
-              if (!modelData[y].vendor) {
-                continue
-              }
-              if (result[x].code === modelData[y].vendor.code) {
-                const obj2 = {}
-                obj2.value = modelData[y].id
-                obj2.label = modelData[y].name
-                result[x].children.push(obj2)
-              }
-            }
-          }
-          this.vendorAndModelOptionData = result
-        }
-      })
-    },
-
-    // 获取endpoint弹框中的asset子弹框里asset列表数据
-    getAssetList () {
-      this.assetLoading = true
-      const params = {
-        ...this.assetPageObj,
-        ...this.seachLabel
-      }
-      this.$get('asset/asset', params).then(response => {
-        if (response.code === 200) {
-          this.assetTableData = response.data.list
-        }
-      }).finally(() => {
-        setTimeout(() => {
-          this.assetLoading = false
-        }, 200)
-      })
-    },
-    // 回车搜索searchAsset
-    searchAssetKeydown (e) {
-      e = e || window.event
-      const keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode
-      if (keyCode === 13) {
-        this.searchAsset()
-      }
-    },
-    // endpoint弹框中的asset子弹框搜索
-    searchAsset () {
-      this.assetSearch.host = ''
-      this.assetSearch.sn = ''
-      if (this.assetSearch.label == 'Host') {
-        this.assetSearch.host = this.assetSearch.text
-        this.assetSearch.modelId = ''
-        this.assetSearch.typeIds = ''
-        this.assetSearch.idcId = ''
-      } else if (this.assetSearch.label == 'SN') {
-        this.assetSearch.sn = this.assetSearch.text
-        this.assetSearch.modelId = ''
-        this.assetSearch.typeIds = ''
-        this.assetSearch.idcId = ''
-      }
-      this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch)
-      this.getAssetList()
-    },
-
-    changeProject (project) {
-      this.currentModuleCopy = {}
-      this.endpoint.moduleId = ''
-      this.endpoint.projectId = project.id
-      this.editParamBox.show = false
-      this.editLabelsBox.show = false
-      this.tempParamObj = []
-      this.endpointList = []
-      this.getAssetList()
-      this.getModuleList(project.id)
-    },
-
-    changeModule (module) {
-      this.endpoint.moduleId = module.id
-      this.editParamBox.show = false
-      this.editLabelsBox.show = false
-      this.tempParamObj = []
-    },
-
-    // 将param转为json字符串格式
-    paramToJson (param) {
-      const tempParam = {}
-      for (let i = 0; i < param.length; i++) {
-        eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
-      }
-      const jsonString = JSON.stringify(tempParam)
-      if (jsonString == '{}') {
-        return ''
-      } else {
-        return jsonString
-      }
-    },
-
     // 获取endpoint弹框中module下拉框数据
     getModuleList (projectId) {
       this.$get('monitor/module', { projectIds: projectId, pageSize: -1 }).then(response => {
@@ -601,21 +526,92 @@ export default {
       })
     },
 
+    changeProject (project) {
+      this.currentModuleCopy = {}
+      this.endpoint.moduleId = ''
+      this.endpoint.projectId = project.id
+      this.editParamBox.show = false
+      this.editLabelsBox.show = false
+      this.tempParamObj = []
+      this.endpointTableData = []
+      this.getAssetList()
+      this.getModuleList(project.id)
+    },
+
+    changeModule (module) {
+      this.endpoint.moduleId = module.id
+      this.editParamBox.show = false
+      this.editLabelsBox.show = false
+      this.tempParamObj = []
+      this.endpointTableData = []
+    },
+    handleSizeChange (val) {
+      console.log(val)
+      this.getAssetList()
+    },
+    handleCurrentChange () {
+      this.$refs.jumpInput.blur()
+      if (this.pages.pageNo > this.pages.pages) {
+        this.pages.pageNo = this.pageObj.pageNo
+        return
+      }
+      this.pageObj.pageNo = this.pages.pageNo
+      this.getAssetList()
+    },
+    search (seachLabel) {
+      console.log(seachLabel)
+      this.seachLabel = { ...seachLabel }
+      this.getAssetList()
+    },
+    // 获取endpoint弹框中的asset子弹框里asset列表数据
+    getAssetList () {
+      this.assetLoading = true
+      const params = {
+        ...this.pageObj,
+        ...this.seachLabel
+      }
+      this.$get('asset/asset', params).then(response => {
+        if (response.code === 200) {
+          this.assetTableData = response.data.list
+          this.pages.pages = response.data.pages
+          this.pages.total = response.data.total
+          this.pages.pageNo = response.data.pageNo
+        }
+      }).finally(() => {
+        setTimeout(() => {
+          this.assetLoading = false
+        }, 200)
+      })
+    },
+    handleSelectionChangeAsset (val) {
+      this.assetSelection = val
+      console.log(val)
+    },
+    handleSelectionChangeEndpoint (val) {
+      this.endpointSelection = val
+      console.log(val)
+    },
     // 保存endpoint
     save () {
       if (this.prevent_opt.save) { return } ;
       this.prevent_opt.save = true
       this.endpoint.projectId = this.currentProjectCopy.id
       this.endpoint.moduleId = this.currentModuleCopy.id
-      if (this.endpointList.length == 0) {
+      if (this.endpointTableData.length == 0) {
         this.endpointTouch = true
         this.$refs.addEndpoint.validate()
         return false
       }
       // 对endpointList进行处理，避免携带过多无用数据
       const endpointList = []
-      this.endpointList.forEach((item, index) => {
-        const endpoint = { moduleId: item.moduleId, assetId: item.assetId, port: item.port, param: item.param, path: item.path, host: item.host, labels: item.labels }
+      this.endpointTableData.forEach((item, index) => {
+        const endpoint = {
+          moduleId: item.moduleId,
+          assetId: item.assetId,
+          name: item.name,
+          configs: JSON.stringify(item.configs),
+          port: 9100
+        }
         endpointList.push(endpoint)
       })
       this.$refs.addEndpoint.validate((valid) => {
@@ -636,21 +632,6 @@ export default {
       })
     },
 
-    // 覆盖endpoint的port/path/param
-    coverEndpoint () {
-      if (this.endpointList.length > 0) {
-        for (let i = 0; i < this.endpointList.length; i++) {
-          this.endpointList[i].port = this.currentModuleCopy.port
-          this.endpointList[i].param = this.currentModuleCopy.param
-          this.endpointList[i].paramObj = this.currentModuleCopy.paramObj
-          this.endpointList[i].labels = this.currentModuleCopy.labels
-          this.endpointList[i].labelModule = this.currentModuleCopy.labelModule
-          this.endpointList[i].path = this.currentModuleCopy.path
-        }
-        this.$message({ duration: 1000, type: 'success', message: this.$t('tip.coverSuccess') })
-      }
-    },
-
     // 删除endpoint
     del () {
       if (this.prevent_opt.save) { return } ;
@@ -672,14 +653,99 @@ export default {
       }).catch(() => {
         this.prevent_opt.save = false
       })
+    },
+    addEndpoint () {
+      this.assetSelection.forEach(item => {
+        if (this.endpointTableData.find(endpoint => endpoint.assetId === item.id)) {
+          return
+        }
+        const obj = {
+          assetId: item.id,
+          assetName: item.name,
+          asset: item,
+          type: this.currentModuleCopy.type,
+          projectId: this.currentModuleCopy.projectId,
+          configs: { ...JSON.parse(this.currentModuleCopy.configs), host: item.manageIp },
+          moduleId: this.currentModuleCopy.id
+        }
+        if (obj.configs.labels !== '{}' && obj.configs.labels) {
+          obj.labelModule = []
+          Object.keys(obj.configs.labels).forEach(key => {
+            obj.labelModule.push({ key, value: obj.configs.labels[key] })
+          })
+        } else {
+          obj.labelModule.push({ key: '', value: '' })
+        }
+        if (obj.configs.params !== '{}' && obj.configs.params) {
+          obj.paramObj = []
+          Object.keys(obj.configs.params).forEach(key => {
+            obj.paramObj.push({ key, value: obj.configs.params[key] })
+          })
+        } else {
+          obj.paramObj.push({ key: '', value: [] })
+        }
+        this.endpointTableData.push(obj)
+      })
+      console.log(this.endpointTableData)
+      this.assetTableData = [...this.assetTableData]
+      this.$refs.multipleTable.clearSelection()
+    },
+    removeEndpoint () {
+      if (this.endpointSelection.length === 0) {
+        return
+      }
+      this.endpointTableData = this.endpointTableData.filter(item => !this.endpointSelection.find(item1 => item1.assetId === item.assetId))
+      this.assetTableData = [...this.assetTableData]
+    },
+    setRowShow ({ row }) {
+      if (this.endpointTableData.find(endpoint => endpoint.assetId === row.id)) {
+        return 'hide-row'
+      }
+      return ''
+    },
+    editEndpointRow (u) {
+      console.log(u)
+      this.object = JSON.parse(JSON.stringify(u))
+      this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
+      this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
+      this.rightBox.show = true
+    },
+    showRightBox () {
+      console.log(this.blankEndpoint)
+      this.object = { ...JSON.parse(JSON.stringify(this.blankEndpoint)), projectId: this.currentModuleCopy.projectId, moduleId: this.currentModuleCopy.id, assetName: '', type: this.currentModuleCopy.type }
+      this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
+      this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
+      this.rightBox.show = true
+    },
+    editAllEndpoint () {
+      this.endpointTableData.forEach((item, index) => {
+        this.endpointTableData[index] = { ...this.endpointTableData[index], ...this.blankEndpoint }
+      })
+      this.endpointTableData = [...this.endpointTableData]
+      console.log(this.endpointTableData)
+    },
+    closeRightBox (isEdit, endpoint, isAll) {
+      console.log(isEdit, endpoint, isAll)
+      this.rightBox.show = false
+      if (!isEdit) { return }
+      if (isAll) {
+        Object.keys(this.blankEndpoint).forEach(key => {
+          this.blankEndpoint[key] = endpoint[key]
+        })
+      } else {
+        this.endpointTableData.forEach((item, index) => {
+          if (item.assetId === endpoint.assetId) {
+            this.endpointTableData[index] = { ...endpoint }
+          }
+        })
+        this.endpointTableData = [...this.endpointTableData]
+        console.log(this.endpointTableData)
+      }
     }
   },
   created () {
     this.getProjectList()
     this.getAssetList()
-    this.getDCList()
-    this.getModelList()
-    this.getTypeList()
   },
   watch: {
     endpointList (n, o) {
@@ -690,12 +756,25 @@ export default {
         this.paramBorderColor = '#F56C6C'
       }
     },
+    assetTableData: {
+      handler (n) {
+        if (n) {
+          this.$nextTick(() => {
+            const domarr = document.getElementsByClassName('hide-row')
+            console.log(domarr.length, 'domArr')
+            this.selectAssetAll = domarr.length === this.pageObj.pageSize
+          })
+        }
+      }
+    },
     currentProject: {
       immediate: true,
       handler (n, o) {
-        this.currentProjectCopy = Object.assign({}, n)
-        this.endpoint.projectId = n.id
-        this.getModuleList(n.id)
+        if (n) {
+          this.currentProjectCopy = Object.assign({}, n)
+          this.endpoint.projectId = n.id
+          this.getModuleList(n.id)
+        }
       }
     },
     currentModule: {
@@ -710,6 +789,7 @@ export default {
     currentModuleCopy: {
       immediate: true,
       handler (n, o) {
+        console.log(n)
         if (n.type && n.type.toLowerCase() == 'snmp') {
           this.endpointTableTitle[4].show = false
           this.endpointTableTitle[5].show = false
@@ -1007,7 +1087,7 @@ export default {
   .endpoints-clear-btn {
     margin: 6px 0 0 7px;
   }
-  .asset-and-endponit{
+  .asset-and-endpoint{
     width: 100%;
     display: flex;
     height: 480px;
@@ -1018,9 +1098,27 @@ export default {
     background: #FFFFFF;
     border: 1px solid #E7EAED;
     border-radius: 2px;
+    position: relative;
+  }
+  .disabled-asset-table{
+    position: absolute;
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
+    z-index: 2;
+    background: #999999;
+    left: 1px;
+    top: 1px;
+    opacity: 0.1;
+  }
+  .asset-allselect{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
   }
   .right-box-endpoint-table{
-    flex: 1;
+
+    width: 60%;
     background: #FFFFFF;
     border: 1px solid #E7EAED;
     border-radius: 2px;
@@ -1028,9 +1126,83 @@ export default {
   /* end--table*/
 
   /* end--子弹框*/
+  .search-box{
+    width: calc(100% - 10px);
+    padding: 10px 5px;
+    border-bottom: 1px solid #E7EAED;
+    display: flex;
+  }
+  /deep/ .new-search .search-input-all{
+    width: auto;
+    flex: 1;
+  }
+  .jump-input{
+    width: 38px;
+    height: 24px;
+  }
+  .jump-pages{
+    font-size: 14px;
+    color: #333333;
+    text-align: left;
+    line-height: 24px !important;
+    height: 24px !important;
+    font-weight: 400;
+    margin-left: 5px;
+    min-width: auto !important;
+  }
+  /deep/ .jump-input .el-input__inner{
+    padding: 0 5px;
+    height: 24px;
+    line-height: 24px;
+  }
+  .table-bottom{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  /deep/ .el-pagination .btn-next, /deep/ .el-pagination .btn-prev{
+    margin-top: 3px;
+  }
+  .add-endpoint{
+    display: inline-block;
+    background: #F9F9F9;
+    border: 1px solid #DEDEDE;
+    border-radius: 2px;
+    width: 28px;
+    height: 28px;
+    margin: 7px 7px 0 0;
+    text-align: center;
+    line-height: 28px;
+  }
+  .top-tool-btn{
+    height: 32px;
+    width: 32px;
+    border: 1px solid #DEDEDE;
+    outline: none;
+    border-radius: 2px;
+    background-color: #F9F9F9;
+    -webkit-transition: background-color linear .1s;
+    transition: background-color linear .1s;
+    padding: 0;
+  }
+  .top-tool-btn:hover{
+    background-color: #fff;
+  }
+  .top-tool-btn:focus{
+    background-color: #fff;
+    border-color: #FBCEA4;
+  }
+  .top-tool-btn:focus .nz-icon{
+    color: #FBCEA4;
+  }
+  .endpoint-table-btn{
+
+  }
 </style>
 <style lang="scss">
-
+  .el-table__row.hide-row{
+    display: none !important;
+  }
   .right-box-add-endpoint {
     .right-box-form>.el-form-item {
       margin-left: 0;
@@ -1038,6 +1210,9 @@ export default {
     .right-box-form-left.right-box-form .el-form-item .el-form-item__label {
       width: 100px;
     }
+    .asset-table /deep/ .el-table td ,.asset-table /deep/ .el-table th{
+      padding: 3px 0 !important;
+    }
   }
 
   .endpoint-asset-search .el-autocomplete>.el-input {
@@ -1060,10 +1235,8 @@ export default {
     color: black;
     font-weight: 400;
   }
-  .endpoints-box-endpoints .el-table td, .endpoints-box-endpoints .el-table th {
-    padding: 5px 0 !important;
-  }
-  .endpoints-box-endpoints .cell {
+
+  .right-box-endpoint-table .cell {
     padding: 0 2px 0 10px;
   }
   .endpoints-box-endpoints .el-table .el-table__row td{
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
new file mode 100644
index 000000000..f8f4a3907
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -0,0 +1,849 @@
+<template>
+  <div class="right-box right-box-module" v-clickoutside="{obj:editEndpoint,func:clickOutside}">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns right-box-form-delete">
+      <button v-if="editEndpoint.id" id="module-del" v-has="'module_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
+        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{editEndpoint.id ? $t("project.module.editEndpoint") + "  ID：" + editEndpoint.id : $t("project.module.createModule")}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <div class="right-box-form-box" ref="scrollbar">
+      <el-form class="right-box-form right-box-form-left" :model="editEndpoint" label-position = "top" label-width="120px" :rules="rules" ref="moduleForm">
+        <!--name-->
+        <el-form-item :label='$t("project.module.moduleName")' prop="name" label-width="125px">
+          <el-input placeholder="" maxlength="64" show-word-limit v-model="editEndpoint.name" size="small" id="module-box-input-name"></el-input>
+        </el-form-item>
+        <!--project-->
+        <el-form-item :label='$t("project.project.project")' prop="projectId">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editEndpoint.projectId" placeholder="" size="small" id="module-box-input-project" @change="changeProject" :disabled="disabled">
+            <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--asset-->
+        <el-form-item :label='$t("project.module.asset")' prop="asset" label-width="125px">
+          <el-input placeholder="" maxlength="64" show-word-limit v-model="editEndpoint.assetName" size="small" id="module-box-input-assetName" :disabled="disabled"></el-input>
+        </el-form-item>
+        <!--module-->
+        <el-form-item :label='$t("project.module.module")' prop="remark">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editEndpoint.moduleId" placeholder="" size="small" :disabled="!editEndpoint.projectId || disabled " id="module-box-input-module">
+            <el-option :id="'module-'+item.id" v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--type-->
+        <el-form-item :label='$t("project.endpoint.type")' prop="type">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editEndpoint.type" placeholder="" size="small" id="module-box-input-type" :disabled="!!editEndpoint.id || disabled" @change="changeAuthType" >
+            <el-option :id="'module-type-'+item.id" v-for="item in typetList" :key="item.value" :label="item.name" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- snmp表单 -->
+        <span class="snmp-form" v-if="editEndpoint.type && editEndpoint.type == 'snmp'">
+          <div class="right-box-sub-title">SNMP settings
+          </div>
+          <div class="right-box-line"></div>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item prop="walk">
+                <select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="editEndpoint.walk">
+                  <template v-slot:trigger>
+                    <div class="el-cascader">
+                      <div class="el-input">
+                        <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
+                      </div>
+                      <div class="el-cascader__tags">
+                        <div ref="walkScrollbar" style="height: 100%; overflow: auto;">
+                          <span v-for="(item, index) in editEndpoint.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
+                            <span v-html="mibName(item)"></span>
+                            <div class="walk-close-box" @click.stop="removeWalk(item)">
+                              <i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
+                            </div>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </select-walk>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <!--credentials-->
+        <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editEndpoint.configs.snmpCredentialsId" placeholder="" size="small" id="module-box-input-credentials">
+            <el-option :id="'module-type-'+item.id" v-for="item in credentialList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        </span>
+
+        <!--Enpoint template-->
+        <div class="right-box-sub-title">Enpoint template
+          <el-tooltip placement="top" effect="light">
+            <div slot="content">
+              {{$t('project.module.tip.defaultEndpointSet')}}
+              <div></div>
+              {{$t('project.module.tip.relation')}}
+            </div>
+            <i class="nz-icon nz-icon-info-normal"></i>
+          </el-tooltip>
+        </div>
+        <div class="right-box-line"></div>
+
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="Basic" name="Basic">
+            <!--path-->
+            <el-form-item :label='$t("project.endpoint.path")' prop="configs.metrics_path" class="half-form-item">
+              <el-input placeholder="" v-model="editEndpoint.configs.metrics_path" size="small" id="module-box-input-path"></el-input>
+            </el-form-item>
+            <!--port-->
+            <el-form-item :label='$t("project.endpoint.port")' prop="port" class="half-form-item">
+              <el-input placeholder="" v-model.number="editEndpoint.port" size="small" id="module-box-input-port"></el-input>
+            </el-form-item>
+            <!--host-->
+            <el-form-item :label='$t("project.endpoint.host")' prop="host">
+              <el-input placeholder="" v-model.number="editEndpoint.configs.host" size="small" id="module-box-input-host"></el-input>
+            </el-form-item>
+            <transition name="el-zoom-in-top">
+              <div v-show="showAllBasicOption" >
+                <!--name pattern-->
+                <el-form-item :label='$t("project.endpoint.pattern")' prop="pattern" class="half-form-item">
+                  <!--              <el-input placeholder="" v-model=""></el-input>-->
+                  <el-autocomplete
+                    class="inline-input"
+                    size="small"
+                    id="module-box-input-pattern"
+                    v-model="editEndpoint.endpointNameTmpl"
+                    :fetch-suggestions="querySearch"
+                    placeholder="请输入内容"
+                  ></el-autocomplete>
+                </el-form-item>
+                <!--scrape_interval-->
+                <el-form-item :label='$t("project.endpoint.scrape_interval")' prop="scrape_interval" class="half-form-item">
+                  <el-input :placeholder='$t("project.endpoint.scrape_interval_placeholder")' v-model.number="editEndpoint.configs.scrape_interval" size="small" id="module-box-input-scrape_interval">
+                   <template slot="append">s</template>
+                  </el-input>
+                </el-form-item>
+                <!--scrape_timeout-->
+                <el-form-item :label='$t("project.endpoint.scrape_timeout")' prop="scrape_timeout" class="half-form-item">
+                  <el-input :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' v-model.number="editEndpoint.configs.scrape_timeout" size="small" id="module-box-input-scrape_timeout"></el-input>
+                   <template slot="append">s</template>
+                </el-form-item>
+              </div>
+            </transition>
+
+            <div style="text-align: center"><i class="nz-icon nz-icon-drop-down need-rotate" :class="showAllBasicOption?'is-active':''" @click="showAllBasicOption=!showAllBasicOption"></i></div>
+          </el-tab-pane>
+          <el-tab-pane label="Parameter" name="Parameter">
+            <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-params">
+              <div v-for="(item, index) in editEndpoint.paramObj" :key="index" class="param-box-row">
+                <el-form-item class="param-box-row-key" :prop="'paramObj.' + index + '.key'">
+                  <el-input placeholder="key" size="mini" v-model="item.key" ></el-input>
+                </el-form-item>
+                <span class="param-box-row-eq">=</span>
+                <el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'">
+                  <el-select
+                    v-model="item.value"
+                    multiple
+                    filterable
+                    allow-create
+                    :ref="'select'+ index"
+                    placeholder="value" size="mini"
+                    default-first-option
+                    popper-class="config-dropdown hide-element"
+                  >
+                    <span slot="empty" class=""></span>
+                  </el-select>
+                </el-form-item>
+                <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+              </div>
+            </div>
+            <div style="text-align: center">
+               <span id="module-add-param" type="button" @click="addParam" class="right-box-form-add module-add-label">
+              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
+            </span>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="Labels" name="Labels">
+            <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-labels">
+              <div v-for="(item, index) in editEndpoint.labelModule" :key="index" class="param-box-row">
+                <el-form-item class="param-box-row-key" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
+                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
+                </el-form-item>
+                <span class="param-box-row-eq">=</span>
+                <el-form-item class="param-box-row-value" :prop="'labelModule.' + index + '.value'">
+                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                </el-form-item>
+                <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+              </div>
+            </div>
+            <div style="text-align: center">
+               <span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add module-add-label">
+              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
+            </span>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="Auth" name="Auth" v-if="editEndpoint.type !== 'snmp'">
+            <!--authtype-->
+            <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
+              <el-select @change="changeAuthType" value-key="id" popper-class="config-dropdown" v-model="authType" placeholder="" size="small" id="module-box-input-auth-type">
+                <el-option :id="'module-type-'+item.id" v-for="item in authTypeList" :key="item.value" :label="item.name" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+
+            <!--authtype 1-->
+            <el-form-item :label='$t("project.endpoint.username")' prop="authtype" v-if="authType === 1" class="half-form-item">
+              <el-input placeholder='' v-model.number="editEndpoint.configs.basic_auth.username" size="small" id="module-box-input-uername"></el-input>
+            </el-form-item>
+
+            <el-form-item :label='$t("project.endpoint.password")' prop="authtype" v-if="authType === 1" class="half-form-item">
+              <el-input placeholder='' v-model.number="editEndpoint.configs.basic_auth.password" size="small" id="module-box-input-password"></el-input>
+            </el-form-item>
+
+            <!--authtype 2-->
+            <el-form-item :label='$t("project.endpoint.bearer_token")' prop="authtype" v-if="authType === 2">
+              <el-input placeholder='' v-model.number="editEndpoint.configs.bearer_token" size="small" id="module-box-input-bearer_token"></el-input>
+            </el-form-item>
+
+          </el-tab-pane>
+        </el-tabs>
+        <div class="configs-copy-value">
+          <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
+          <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
+        </div>
+      </el-form>
+    </div>
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button v-cancel="{obj:editEndpoint,func:esc}" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="module-box-save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { noSpecialChar, port, nzNumber } from '../js/validate'
+import selectWalk from '../popBox/selectWalk'
+
+export default {
+  name: 'editEndpointBoxNew',
+  props: {
+    module: Object,
+    currentProject: Object,
+    disabled: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'add'
+    }
+  },
+  components: {
+    'select-walk': selectWalk
+  },
+  data () {
+    return {
+      walkData: [],
+      activeName: 'Basic',
+      expandedWalkData: [],
+      radio: 'password',
+      editEndpoint: {},
+      restaurants: [
+        { value: '{{module.name}}-{{asset.name}}' },
+        { value: '{{module.name}}-{{asset.manageIp}}' }
+      ],
+      showAllBasicOption: false,
+      rules: {
+        name: [
+          { validator: noSpecialChar, trigger: 'change' }
+        ],
+        projectId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        moduleId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        walk: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        port: [
+          { validator: port, trigger: 'blur' }
+        ]
+      },
+      projectList: [],
+      moduleList: [],
+      credentialList: [],
+      typetList: [
+        {
+          value: 'http',
+          name: 'HTTP'
+        },
+        {
+          value: 'snmp',
+          name: 'SNMP'
+        }
+      ],
+      authType: 0,
+      authTypeList: [
+        { name: this.$t('project.endpoint.authTypeNull'), value: 0 },
+        { name: this.$t('project.endpoint.authTypeWord'), value: 1 },
+        { name: this.$t('project.endpoint.authTypeToken'), value: 2 }
+      ],
+      configsCopyValue: ''
+    }
+  },
+  methods: {
+    selectWalk (walk) {
+      if (this.editEndpoint.walk.indexOf(walk) != -1) {
+        this.editEndpoint.walk.splice(this.editEndpoint.walk.indexOf(walk), 1)
+      } else {
+        this.editEndpoint.walk.push(walk)
+      }
+    },
+    // 从mibData里取得oid对应的mib名称
+    getMibName (walkData, walk) {
+      let mibName = ''
+      let objectName = ''
+      walkData.forEach((item, index) => {
+        if (!mibName && item.subTree && item.subTree.length > 0) {
+          item.subTree.forEach((item2, index2) => {
+            if (!mibName && getMibName(item2, walk)) {
+              mibName = item.name
+            }
+          })
+        }
+      })
+      function getMibName (tree, oid) {
+        if (oid.indexOf(tree.objectID) > -1) {
+          if (tree.objectID == oid) {
+            objectName = tree.name
+            return true
+          } else {
+            if (tree.subTree && tree.subTree.length > 0) {
+              let result = false
+              for (let i = 0; i < tree.subTree.length; i++) {
+                if (getMibName(tree.subTree[i], oid)) {
+                  result = true
+                  break
+                }
+              }
+              return result
+            } else {
+              return false
+            }
+          }
+        } else {
+          return false
+        }
+      }
+      if (!objectName) {
+        objectName = walk
+      }
+      objectName = "<span style='font-weight:bold'>" + objectName + '</span>'
+      return mibName ? mibName + '：' + objectName : objectName
+    },
+
+    removeWalk (walk) {
+      this.editEndpoint.walk.splice(this.editEndpoint.walk.indexOf(walk), 1)
+      this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false)
+    },
+
+    initWalk () {
+      this.$nextTick(() => {
+        if (this.$refs.selectWalk) {
+          this.$refs.selectWalk.show()
+        }
+      })
+    },
+
+    getWalkData () {
+      this.$get('mib/tree', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          const obj = JSON.parse(response.data)
+          this.walkData = []
+          for (const item in obj) {
+            setAttr(obj[item], 'detailShow', false)
+            this.walkData.push({ name: item, detailShow: false, subTree: obj[item] })
+          }
+        }
+      })
+      function setAttr (tree, name, value) {
+        if (tree && tree.length > 0) {
+          for (let i = 0; i < tree.length; i++) {
+            tree[i][name] = value
+            if (tree[i].subTree && tree[i].subTree.length > 0) {
+              setAttr(tree[i].subTree, name, value)
+            }
+          }
+        }
+      }
+    },
+
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+
+    clickOutside () {
+      this.esc(false)
+    },
+    changeType (type) {
+      if (this.editEndpoint.id) {
+        return
+      }
+      this.editEndpoint.type = type
+      if (type == 'http') {
+        this.editEndpoint.port = 9100
+      } else {
+        this.$nextTick(() => {
+          this.$refs.selectWalk.show()
+        })
+        this.editEndpoint.port = 161
+      }
+    },
+    /* 保存 */
+    save () {
+      console.log(this.editEndpoint)
+      this.editEndpoint.configs.params = this.paramToJson(this.editEndpoint.paramObj)
+      this.editEndpoint.configs.labels = this.labelsToJson(this.editEndpoint.labelModule)
+      this.editEndpoint.paramObj = this.editEndpoint.paramObj.filter(item => item.value && item.value.length)
+      this.editEndpoint.labelModule = this.editEndpoint.labelModule.filter(item => item.value)
+      console.log(1)
+      const params = { ...this.editEndpoint }
+      params.configs.walk = params.walk
+      params.configs.port = params.port
+      params.configs = JSON.stringify(params.configs)
+      if (this.authType === 2 && !this.editEndpoint.configs.bearer_token) {
+        this.$message.error("'token' is required")
+      } else if (this.authType === 1 && !(this.editEndpoint.configs.basic_auth.username && this.editEndpoint.configs.basic_auth.password)) {
+        this.$message.error("'username' and 'password' is required")
+      } else {
+        this.authType = 0
+      }
+      this.$nextTick(() => {
+        this.$refs.moduleForm.validate((valid) => {
+          if (valid) {
+            if (this.type === 'add') {
+              this.prevent_opt.save = true
+              if (this.editEndpoint.assetId) {
+                this.$emit('close', true, this.editEndpoint, false)
+                this.prevent_opt.save = false
+              } else {
+                this.$emit('close', true, this.editEndpoint, true)
+                this.prevent_opt.save = false
+              }
+            } else if (this.type === 'edit') {
+              if (this.editEndpoint.id) {
+                this.$put('monitor/endpoint', [params]).then(response => {
+                  if (response.code === 200) {
+                    this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                    this.$store.commit('setReloadFacade')
+                    this.esc(true)
+                  } else {
+                    this.$message.error(response.msg)
+                  }
+                  this.prevent_opt.save = false
+                })
+              }
+            }
+          } else {
+            return false
+          }
+        })
+      })
+    },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('monitor/module?ids=' + this.editEndpoint.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.$store.commit('setReloadFacade')
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+
+    /* 获取project列表 */
+    getProjectList () {
+      this.$get('monitor/project', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.projectList = response.data.list
+        }
+      })
+    },
+    changeProject () {
+      this.getModuleList()
+    },
+    /* 获取module列表 */
+    getModuleList () {
+      if (!this.editEndpoint.projectId) {
+        return
+      }
+      this.$get('monitor/module', { pageSize: -1, pageNo: 1, projectIds: this.editEndpoint.projectId }).then(response => {
+        if (response.code === 200) {
+          this.moduleList = response.data.list
+        }
+      })
+    },
+    // get snmp
+    getCredential () {
+      this.$get('/snmp/credential', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.credentialList = response.data.list
+        }
+      })
+    },
+    // 清除param
+    clearAllParam () {
+      this.editEndpoint.paramObj = []
+    },
+
+    // 新增param
+    addParam () {
+      this.editEndpoint.paramObj.push({ key: '', value: [], showList: false })
+    },
+    // 移除单个param
+    removeParam (index) {
+      if (this.editEndpoint.paramObj.length === 1) {
+        this.editEndpoint.paramObj = [{ key: '', value: [] }]
+      }
+      this.editEndpoint.paramObj.splice(index, 1)
+    },
+    // 新增label
+    addLabel () {
+      this.editEndpoint.labelModule.push({ key: '', value: '' })
+    },
+    // 移除单个Label
+    removeLabel (index) {
+      if (this.editEndpoint.labelModule.length === 1) {
+        this.editEndpoint.labelModule = [{ key: '', value: '' }]
+      }
+      this.editEndpoint.labelModule.splice(index, 1)
+    },
+    // 将param转为json字符串格式
+    paramToJson (param) {
+      const tempParam = {}
+      for (let i = 0; i < param.length; i++) {
+        if (!param[i].key || !param[i].value.length) {
+          continue
+        }
+        tempParam[param[i].key] = param[i].value
+      }
+      return tempParam
+    },
+    // 将labels转为json字符串格式
+    labelsToJson (param) {
+      const tempParam = {}
+      for (let i = 0; i < param.length; i++) {
+        if (!param[i].key || !param[i].value) {
+          continue
+        }
+        eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
+      }
+      return tempParam
+    },
+    // 输入建议
+    querySearch (queryString, cb) {
+      const restaurants = this.restaurants
+      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    changeAuthType () {
+      this.editEndpoint.configs.bearer_token = ''
+      this.editEndpoint.configs.basic_auth = {
+        username: '',
+        password: ''
+      }
+    },
+    copyValue () {
+      const domUrl = document.createElement('input')
+      domUrl.value = this.configsCopyValue
+      domUrl.id = 'creatDom'
+      document.body.appendChild(domUrl)
+      domUrl.select() // 选择对象
+      document.execCommand('Copy') // 执行浏览器复制命令
+      const creatDom = document.getElementById('creatDom')
+      creatDom.parentNode.removeChild(creatDom)
+      this.$message(this.$t('overall.copySuccess'))
+    },
+    syntaxHighlight (json) {
+      if (typeof json != 'string') {
+        json = JSON.stringify(json, undefined, 2)
+      }
+      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
+      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+        function (match) {
+          let cls = 'number'
+          if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+              cls = 'key'
+            } else {
+              cls = 'string'
+            }
+          } else if (/true|false/.test(match)) {
+            cls = 'boolean'
+          } else if (/null/.test(match)) {
+            cls = 'null'
+          }
+          return '<span class="' + cls + '">' + match + '</span>'
+        }
+      )
+    }
+  },
+  mounted () {
+    this.getWalkData()
+  },
+  created () {
+    this.getProjectList()
+    this.getCredential()
+  },
+  computed: {
+    mibName () {
+      return (value) => {
+        return this.getMibName(this.walkData, value)
+      }
+    }
+  },
+  watch: {
+    module: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.editEndpoint = JSON.parse(JSON.stringify(n))
+        this.activeName = 'Basic'
+        this.changeProject()
+        if (this.editEndpoint.configs.bearer_token) {
+          this.authType = 2
+        } else if (this.editEndpoint.configs.basic_auth.username) {
+          this.authType = 1
+        } else {
+          this.authType = 0
+        }
+        if (n.type && n.type.toLowerCase() == 'snmp') {
+          this.$refs.selectWalk.show()
+          for (let i = 0; i < this.editEndpoint.walk.length; i++) {
+            this.expandedWalkData.push(this.editEndpoint.configs.walk[i].substring(0, this.editEndpoint.configs.walk[i].lastIndexOf('.')))
+          }
+        }
+        // if (n.id) {
+        // } else {
+        //   if (n.type && n.type.toLowerCase() == 'snmp') {
+        //     this.$refs.selectWalk.show()
+        //     for (let i = 0; i < this.editEndpoint.walk.length; i++) {
+        //       this.expandedWalkData.push(this.editEndpoint.walk[i].substring(0, this.editEndpoint.walk[i].lastIndexOf('.')))
+        //     }
+        //   }
+        // }
+      }
+    },
+    editEndpoint: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if (n && n.configs) {
+          const params = Object.assign({}, n.configs)
+          params.params = this.paramToJson(this.editEndpoint.paramObj)
+          params.labels = this.labelsToJson(this.editEndpoint.labelModule)
+          params.walk = n.walk
+          params.port = n.port
+          Object.keys(params).forEach(key => {
+            if (!params[key]) {
+              delete params[key]
+            }
+            if (Array.isArray(params[key]) && !params[key].length) {
+              delete params[key]
+            }
+          })
+          if (params.basic_auth && !params.basic_auth.username) {
+            delete params.basic_auth
+          }
+          if (params.basic_auth && !params.basic_auth.password) {
+            delete params.basic_auth
+          }
+          if (!Object.keys(params.param).length) {
+            delete params.param
+          }
+          if (!Object.keys(params.labels).length) {
+            delete params.labels
+          }
+          this.configsCopyValue = JSON.stringify(params, null, 2)
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+  .module-walk-box {
+    width: 100%;
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    min-height: 32px;
+    margin-bottom: 22px;
+    padding: 3px 0;
+  }
+  .module-walk-box i {
+    color: #C0C4CC;
+  }
+  .walk-box-item {
+    padding: 5px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .walk-box-item-txt {
+    color: #606266;
+  }
+  .walk-box-item-op span:first-of-type {
+    margin-right: 4px;
+  }
+  .walk-box-item-op span {
+    cursor: pointer;
+  }
+  .walk-box-op {
+    width: 18px;
+    margin: 5px 0 5px 15px;
+    cursor: pointer;
+  }
+  .el-cascader {
+    width: 100%;
+  }
+  .el-cascader__tags {
+    height: calc(100% - 10px);
+    width: 100%;
+  }
+  .right-box-module .el-cascader .el-input__inner {
+    height: 150px;
+  }
+  .right-box-form-tip{
+    color: #999999;
+    line-height: 21px;
+  }
+  .half-form-item {
+    width: calc(50% - 30px);
+    display: inline-block;
+    padding: 0 18px 0 8px;
+  }
+  .half-form-item:nth-child(even){
+    padding-left: 0;
+  }
+  /deep/ .el-tabs__item{
+    width: 90px;
+    padding: 0;
+    text-align: center;
+  }
+  /deep/ .el-tabs__item.is-active{
+    color: #FA901C
+  }
+  /deep/ .el-tabs__active-bar{
+    background-color: #FA901C
+  }
+  /deep/ .el-radio-group{
+    width: 100%;
+  }
+  /deep/ .el-radio{
+    width: 100%;
+  }
+  /deep/ .el-autocomplete{
+    width: 100%;
+  }
+  /deep/ .el-tabs__content{
+    padding-left: 18px;
+  }
+  .need-rotate.nz-icon-drop-down{
+    display: inline-block;
+    transition: transform .3s;
+  }
+  .need-rotate.nz-icon-drop-down.is-active{
+    transform: rotate(
+      -180deg
+    );
+  }
+  .module-add-label{
+    display: inline-block;
+    width: 300px;
+    height: 18px;
+    background: #FFFCF9;
+    border: 1px solid #FFE0BD;
+    border-radius: 2px;
+    text-align: center;
+    line-height: 18px;
+    margin-right: 80px;
+  }
+  .configs-copy-value{
+    opacity: 0.9;
+    background: #F6F8FA;
+    border: 1px solid #E7EAED;
+    border-radius: 2px;
+    height: 140px;
+    position: relative;
+    margin-top: 10px;
+    padding: 10px 0px 10px 15px;
+    width: calc(100% - 40px);
+    margin-left: 20px;
+  }
+  .configs-copy-value .copy-value-content{
+    position: absolute;
+    right: 20px;
+    top: 14px;
+    cursor: pointer;
+  }
+</style>
+<style>
+  .sub-label {
+    padding-right: 15px;
+    font-size: 14px;
+    color: #666;
+    text-align: left;
+    line-height: 30px;
+    padding-left: 15px;
+    font-weight: bold;
+  }
+  .sub-label-required::after {
+    content: '*';
+    color: #F56C6C;
+    margin-left: 4px;
+  }
+  .module-box-type {
+    margin: 25px 0 10px -15px;
+  }
+  .walk-close-box {
+    margin-left: 6px;
+    width: 14px;
+  }
+  .walk-close {
+    font-size: 12px;
+  }
+  .config-dropdown.hide-element{
+    border: none!important;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index af01c83d0..2e61f2a2c 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -41,7 +41,7 @@
 
         <!--type-->
         <el-form-item :label='$t("project.endpoint.type")' prop="type">
-          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.type" placeholder="" size="small" id="module-box-input-type" :disabled="!!editModule.id" @change="changeAuthType">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.type" placeholder="" size="small" id="module-box-input-type" @change="changeAuthType">
             <el-option :id="'module-type-'+item.id" v-for="item in typetList" :key="item.value" :label="item.name" :value="item.value"></el-option>
           </el-select>
         </el-form-item>
@@ -432,12 +432,13 @@ export default {
     },
     /* 保存 */
     save () {
-      this.editModule.configs.param = this.paramToJson(this.editModule.paramObj)
+      this.editModule.configs.params = this.paramToJson(this.editModule.paramObj)
       console.log(this.editModule.paramObj, this.editModule.configs.param)
       this.editModule.configs.labels = this.labelsToJson(this.editModule.labelModule)
       const params = { ...this.editModule }
       params.configs.walk = params.walk
       params.configs.port = params.port
+      console.log({ ...params })
       params.configs = JSON.stringify(params.configs)
       if (this.authType === 2 && !this.editModule.configs.bearer_token) {
         this.$message.error("'token' is required")
@@ -523,6 +524,9 @@ export default {
     },
     // 移除单个param
     removeParam (index) {
+      if (this.editModule.paramObj.length === 1) {
+        this.editModule.paramObj = [{ key: '', value: [] }]
+      }
       this.editModule.paramObj.splice(index, 1)
     },
     // 新增label
@@ -532,7 +536,7 @@ export default {
     // 移除单个Label
     removeLabel (index) {
       if (this.editModule.labelModule.length === 1) {
-        return
+        this.editModule.labelModule = [{ key: '', value: '' }]
       }
       this.editModule.labelModule.splice(index, 1)
     },
@@ -665,7 +669,7 @@ export default {
         console.log(n)
         if (n && n.configs) {
           const params = Object.assign({}, n.configs)
-          params.param = this.paramToJson(this.editModule.paramObj)
+          params.params = this.paramToJson(this.editModule.paramObj)
           params.labels = this.labelsToJson(this.editModule.labelModule)
           params.walk = n.walk
           params.port = n.port
@@ -684,8 +688,8 @@ export default {
           if (params.basic_auth && !params.basic_auth.password) {
             delete params.basic_auth
           }
-          if (!Object.keys(params.param).length) {
-            delete params.param
+          if (!Object.keys(params.params).length) {
+            delete params.params
           }
           if (!Object.keys(params.labels).length) {
             delete params.labels
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index 019c35f18..6cafaa4d1 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -2,7 +2,7 @@
     <div class="new-search"  v-clickoutside="clickout">
         <div class="search-input-all input-position" @click="stop_click">
 <!--            历史记录-->
-            <div class="search-history">
+            <div class="search-history" v-if="showHistory">
                 <i class="nz-icon nz-icon-time" @click="look_history" id="search-view-history"></i>
                 <div :class="localStorage_display?'localStorage_list_box none':'localStorage_list_box'">
                     <div class="list_box_title">
@@ -27,7 +27,7 @@
             </div>
 <!--            搜索框-->
             <div class="input-center-box" id="input-center-box">
-              <el-scrollbar style="height: 100%;width: 200px; overflow-y: hidden" ref="searchScrollbar">
+              <el-scrollbar style="height: 100%;width: 100%; overflow-y: hidden" ref="searchScrollbar">
                 <ul class="sreach_fixe_left" id="search-ul">
                     <li class="selectinfo_box" v-if="select_list.length>0" v-for="(val,ind) in select_list" :key="ind" @click="update_sreach(ind,$event)">
                         <div class="select_condition">
@@ -166,7 +166,7 @@
                     </li>
 <!-- 最开始的input框-->
                     <li class="select_input" v-if="change_sreach_show">
-                        <input type="text" @click="read_input" v-model="no_condition" @keyup="enter_one" id="one-input" @keydown="clear_search_list" >
+                        <input type="text" @click="read_input" v-model="no_condition" @keyup="enter_one" id="one-input" @keydown="clear_search_list" :placeholder="placeholder">
                     </li>
                 </ul>
               </el-scrollbar>
@@ -185,7 +185,7 @@
                 </ul>
             </div>
         </div>
-        <button id="search-input-search" class="search-btn float-right" type="button" @click="select"><i class="nz-icon nz-icon-search"></i></button>
+        <button id="search-input-search" class="search-btn float-right" type="button" @click="select" v-if="showSearch"><i class="nz-icon nz-icon-search"></i></button>
         <!--<div class="new-search-btn" @click="select">
             <i class="nz-icon nz-icon-search"></i>
         </div>-->
@@ -386,7 +386,26 @@ export default {
       }
     }
   },
-  props: ['searchMsg', 'defaultItem', 'defaultValue', 'inTransform', 'position', 'single'],
+  props: {
+    searchMsg: {},
+    defaultItem: {},
+    defaultValue: {},
+    inTransform: {},
+    position: {},
+    single: {},
+    showHistory: {
+      type: Boolean,
+      default: true
+    },
+    showSearch: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    }
+  },
   methods: {
     // dc
     clearSearch () {
@@ -1361,6 +1380,12 @@ export default {
     color: $btn-normal-background-color-new;
   }
 }
+.search-input-placeholder{
+  font-size: 12px;
+  color: #999999;
+  position: absolute;
+  left: 7px;
+}
 .top-tools input {
   background-color: white;
 }
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index da546c93d..b6daa8312 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -1,6 +1,6 @@
 <template>
   <el-table
-    id="userTable"
+    id="endpointTable"
     ref="dataTable"
     :data="tableData"
     :height="height"
@@ -64,7 +64,7 @@
           </div>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -75,7 +75,7 @@
 <script>
 import table from '@/components/common/mixin/table'
 export default {
-  name: 'userTable',
+  name: 'endpointTable',
   mixins: [table],
   data () {
     return {
@@ -126,12 +126,6 @@ export default {
       this.$store.commit('currentProjectChange', project)
     }
   },
-  computed: {
-    isCurrentUser () {
-      return function (username) {
-        return localStorage.getItem('nz-username') === username
-      }
-    }
-  }
+  computed: {}
 }
 </script>
diff --git a/nezha-fronted/src/components/common/table/settings/projectTable.vue b/nezha-fronted/src/components/common/table/settings/projectTable.vue
index aec16c185..b74d8e297 100644
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -33,14 +33,25 @@
         <div class="col-resize-area"></div>
       </template>
       <template slot-scope="scope" :column="item">
-        <template v-if="item.prop === 'moduleNum'">
-          moduleNum
+        <template v-if="item.prop === 'name'">
+          <span class="module-num">
+            {{scope.row[item.prop]}}
+          </span>
+        </template>
+        <template v-else-if="item.prop === 'moduleNum'">
+          <span class="module-num">
+            {{scope.row[item.prop]}}
+          </span>
         </template>
         <template v-else-if="item.prop === 'endpointNum'">
-          endpointNum
+          <span class="endpoint-num" :class="scope.row[item.prop]>0?'bagEF7458':'bag23BF9A'">
+            {{scope.row[item.prop]}}
+          </span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-          alertNum
+         <span class="endpoint-num" :class="scope.row[item.prop]>0?'bagEF7458':'bag23BF9A'">
+            {{scope.row[item.prop]}} active
+          </span>
         </template>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
       </template>
@@ -123,3 +134,24 @@ export default {
   }
 }
 </script>
+<style scoped>
+  .moduleNum{
+    font-size: 14px;
+    color: #3C92F1;
+    font-weight: 400;
+  }
+  .endpoint-num{
+    padding: 0 3px;
+  }
+  .module-num{
+    padding: 0 3px;
+  }
+  .bagEF7458{
+    background: #EF7458;
+    color: #fff;
+  }
+  .bag23BF9A{
+    background: #23BF9A;
+    color: #fff;
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index b8e88a204..9510e21d0 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -8,7 +8,7 @@
       :layout="['searchInput', 'elementSet']"
       :search-msg="searchMsg">
       <template v-slot:top-tool-right>
-        <button id="account-add" v-has="'monitor_endpoint_add'" :title="$t('overall.createUser')" class="top-tool-btn margin-l-20"
+        <button id="account-add" v-has="'monitor_endpoint_add'" :title="$t('overall.createUser')" class="top-tool-btn margin-l-20 margin-r-20"
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
@@ -37,6 +37,9 @@
     <transition name="right-box">
       <addEndpointBox v-if="rightBox.show" :endpoint="object" @close="closeRightBox"></addEndpointBox>
     </transition>
+    <transition name="right-box">
+      <edit-endpoint-box-new v-if="rightBox.editShow" :module="object" @close="closeRightEditBox" :disabled="true" :type="'edit'"></edit-endpoint-box-new>
+    </transition>
   </div>
 </template>
 <script>
@@ -45,10 +48,12 @@ import addEndpointBox from '@/components/common/rightBox/addEndpointBox'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import endpointTable from '@/components/common/table/settings/endpointTable'
+import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
 
 export default {
   name: 'endpointList',
   components: {
+    EditEndpointBoxNew,
     nzDataList,
     addEndpointBox,
     deleteButton,
@@ -78,12 +83,51 @@ export default {
           disabled: false
         }]
       },
-      roles: []
+      roles: [],
+      rightBox: {
+        editShow: false,
+        show: false
+      }
     }
   },
   methods: {
-    edit (u) {
-      this.rightBox.show = true
+    edit (row) {
+      this.$get('monitor/endpoint/' + row.id).then(res => {
+        const u = res.data
+        this.object = JSON.parse(JSON.stringify(u))
+        this.object.configs = JSON.parse(this.object.configs)
+        this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
+        this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
+        this.object.paramObj = []
+        this.object.labelModule = []
+        if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) {
+          Object.keys(this.object.configs.labels).forEach(key => {
+            this.object.labelModule.push({ key, value: this.object.configs.labels[key] })
+          })
+        } else {
+          this.object.labelModule.push({ key: '', value: '' })
+        }
+        if (JSON.stringify(this.object.configs.params) !== '{}' && this.object.configs.params) {
+          Object.keys(this.object.configs.params).forEach(key => {
+            this.object.paramObj.push({ key, value: this.object.configs.params[key] })
+          })
+        } else {
+          this.object.paramObj.push({ key: '', value: [] })
+        }
+        this.object.assetName = this.object.asset.name
+        this.object.projectId = this.object.project.id
+        this.object.moduleId = this.object.module.id
+        this.object.type = this.object.module.type
+        this.rightBox.editShow = true
+        console.log(this.rightBox.editShow)
+      })
+    },
+    closeRightEditBox (refresh) {
+      this.rightBox.editShow = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
     }
   },
   computed: {
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
index da82659cb..2a81c485c 100644
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -63,7 +63,6 @@ export default {
         projectId: '',
         name: '',
         endpointNameTmpl: '{{module.name}}-{{asset.name}}',
-        endpointHostTmpl: '',
         type: 'http',
         port: 9100,
         configs: {
@@ -76,8 +75,6 @@ export default {
           scrape_timeout: '',
           params: '',
           labels: '',
-          paramObj: [],
-          labelModule: [],
           basic_auth: {
             username: '',
             password: ''
@@ -124,16 +121,16 @@ export default {
       this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
       this.object.paramObj = []
       this.object.labelModule = []
-      if (this.object.configs.labels !== '{}' && this.object.configs.labels) {
+      if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) {
         Object.keys(this.object.configs.labels).forEach(key => {
           this.object.labelModule.push({ key, value: this.object.configs.labels[key] })
         })
       } else {
         this.object.labelModule.push({ key: '', value: '' })
       }
-      if (this.object.configs.param !== '{}' && this.object.configs.param) {
-        Object.keys(this.object.configs.param).forEach(key => {
-          this.object.paramObj.push({ key, value: this.object.configs.param[key] })
+      if (JSON.stringify(this.object.configs.params) !== '{}' && this.object.configs.params) {
+        Object.keys(this.object.configs.params).forEach(key => {
+          this.object.paramObj.push({ key, value: this.object.configs.params[key] })
         })
       } else {
         this.object.paramObj.push({ key: '', value: [] })
diff --git a/nezha-fronted/src/components/page/monitor/project/index.vue b/nezha-fronted/src/components/page/monitor/project/index.vue
index 14e85fbf2..7a1c8c571 100644
--- a/nezha-fronted/src/components/page/monitor/project/index.vue
+++ b/nezha-fronted/src/components/page/monitor/project/index.vue
@@ -49,4 +49,7 @@ export default {
     margin-left: 10px;
   }
 }
+  /deep/ .main-container{
+    padding-right: 0px !important;
+  }
 </style>
diff --git a/nezha-fronted/src/components/page/monitor/project/project.vue b/nezha-fronted/src/components/page/monitor/project/project.vue
index 66e763268..3220f7d32 100644
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/nezha-fronted/src/components/page/monitor/project/project.vue
@@ -725,6 +725,7 @@ export default {
 <style scoped lang="scss">
   .project {
     height: 100%;
+    background: #f6f6f6;
   }
 
   /*  .content-right-option {
diff --git a/nezha-fronted/src/components/page/monitor/project/projectList.vue b/nezha-fronted/src/components/page/monitor/project/projectList.vue
index c5c69bd42..bf600bb41 100644
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -96,7 +96,7 @@ export default {
 <style lang="scss">
   .project-list{
     .project-page{
-      margin: 0 20px;
+      margin: 0 10px 0 20px;
       border: 1px solid #eeeeee;
       border-top: none;
       /deep/ .pagination{