diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index fa16d9cfe..f853e7765 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -47,6 +47,7 @@ const cn = {
     createChart: '新增图表',
     createProject: '新增系统',
     createEndpoint: '新增Endpoint',
+    batchEndpoint: '批量修改Endpoint',
     createAsset: '新增资产',
     createAlertRule: '新增告警规则',
     createUser: '新增用户',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 195353721..82829f689 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -54,6 +54,7 @@ const en = {
     createChart: 'Create chart',
     createProject: 'Create project',
     createEndpoint: 'Create endpoint',
+    batchEndpoint: 'Batch modify endpoint',
     createAsset: 'Create asset',
     createAlertRule: 'Create alert rule',
     createUser: 'Create user',
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 05db3dc5a..71b8d6d95 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -3,7 +3,7 @@
   @import "./L5/css/props.css";
 </style>
 <template>
-  <div class="project-box" v-loading="topologyLoading">
+  <div class="project-box list-page" v-loading="topologyLoading">
     <!--project主要信息-->
     <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
       <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
@@ -110,22 +110,22 @@
            </button>
          </span>
       </div>
-      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right">
+      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
         <div>{{topologyInfo.name}}</div>
         <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 <button @click="changeScreen" class="top-tool-btn float-right"
-        style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
+        style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
 >
                   <i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
         </button>
         <button @click="editTopology" class="top-tool-btn float-right"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
+                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
         >
                   <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
         </button>
           <pick-time
             v-show="!editTopologyFlag"
-            class="float-right pickTime"
+            class="float-right pickTime top-tool-btn-group"
             :refresh-data-func="dateChange"
             v-model="searchTime"
             :use-chart-unit="false"
@@ -2471,11 +2471,10 @@ export default {
     overflow: hidden;
     background: #fff;
     .pickTime{
-      margin-top: -13px;
+      margin-right: 10px;
     }
     .project-title {
-      height: 34px;
-      padding-top: 20px;
+      height: 55px;
       padding-bottom: 0px;
     }
 
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index d8c278c86..f4d582caf 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -253,7 +253,7 @@ export default {
       },
       pageObj: {
         pageNo: 1,
-        pageSize: 2
+        pageSize: 10
       },
       pages: {
         total: 0,
@@ -606,7 +606,6 @@ export default {
           assetId: item.assetId,
           name: item.name,
           configs: JSON.stringify(item.configs),
-          port: 9100
         }
         endpointList.push(endpoint)
       })
diff --git a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
new file mode 100644
index 000000000..3096aa57e
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
@@ -0,0 +1,1035 @@
+<template>
+  <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--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{$t("overall.batchEndpoint")}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <div class="right-box-form-box" style="overflow: hidden">
+      <el-form class="right-box-form right-box-form-left" label-position = "top" ref="addEndpoint" :model="endpoint" :rules="rules">
+        <!--asset和endpoint-->
+        <div class="asset-and-endpoint">
+          <!--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% - 45px)"
+              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>
+        </div>
+      </el-form>
+    </div>
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button v-cancel="{obj:endpoint,func:esc}" id="ep-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="ep-add">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </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>
+  </div>
+</template>
+
+<script>
+import editEndpointBoxNew from './editEndpointBoxNew'
+export default {
+  name: 'endpointBox',
+  props: {
+    currentProject: Object,
+    currentModule: Object,
+    selectEndpointList: Array
+  },
+  components: {
+    'edit-endpoint-box-new': editEndpointBoxNew
+  },
+  data () {
+    return {
+      rules: {
+        projectId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        moduleId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: 2
+      },
+      pages: {
+        total: 0,
+        pages: 0,
+        pageNo: 1
+      },
+      object: {},
+      vendorAndModelOptionData: [],
+      paramBorderColor: '#dcdfe6',
+      endpointTouch: false,
+      endpoint: { projectId: '', moduleId: '', endpointList: [] },
+      currentModuleCopy: {},
+      currentProjectCopy: { id: '' },
+      tempParamObj: [],
+      tempLabelModule: [],
+      inputKeyErr: [],
+      tempEndpoint: {},
+      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的搜索相关
+      selectedAssets: [], // 侧滑框中选中的asset
+      projectList: [],
+      moduleList: [],
+      assetList: [],
+      endpointList: [],
+      endpointTableTitle: [
+        {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          width: 150,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.host'),
+          prop: 'host',
+          width: 80,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.port'),
+          prop: 'port',
+          width: 54,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.labels'),
+          prop: 'labels',
+          width: 90,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.param'),
+          prop: 'params',
+          width: 100,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.path'),
+          prop: 'path',
+          width: 66,
+          show: true
+        }
+      ],
+      typeList: [],
+      dcList: [],
+      modelList: [],
+      assetTableData: [],
+      assetSelection: [],
+      endpointSelection: [],
+      endpointTableData: [],
+    }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+
+    /* 获取project列表 */
+    getProjectList () {
+      this.$get('monitor/project', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.projectList = response.data.list
+          this.getModuleList(this.currentProjectCopy.id)
+        }
+      })
+    },
+    // 获取endpoint弹框中module下拉框数据
+    getModuleList (projectId) {
+      this.$get('monitor/module', { projectIds: projectId, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            try {
+              const param = response.data.list[i].param || '{}'
+              const tempObj = JSON.parse(param)
+              const labels = response.data.list[i].labels || '{}'
+              const tempObj1 = JSON.parse(labels)
+              response.data.list[i].paramObj = []
+              response.data.list[i].labelsModule = []
+              for (const k in tempObj) {
+                response.data.list[i].paramObj.push({ key: k, value: tempObj[k] })
+              }
+              for (const k in tempObj1) {
+                response.data.list[i].labelsModule.push({ key: k, value: tempObj1[k] })
+              }
+            } catch (err) {
+              // console.info(response.data.list[i], err);
+            }
+          }
+          this.moduleList = response.data.list
+        }
+      })
+    },
+
+    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) {
+      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) {
+      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
+    },
+    handleSelectionChangeEndpoint (val) {
+      this.endpointSelection = val
+    },
+    // 保存endpoint
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      // 对endpointList进行处理，避免携带过多无用数据
+      const endpointList = []
+      this.endpointTableData.forEach((item, index) => {
+        const endpoint = {
+          moduleId: item.moduleId,
+          assetId: item.assetId,
+          name: item.name,
+          configs: JSON.stringify(item.configs),
+          id: item.id
+        }
+        endpointList.push(endpoint)
+      })
+      this.$refs.addEndpoint.validate((valid) => {
+        if (valid) {
+          this.$put('monitor/endpoint', endpointList).then(response => {
+            this.prevent_opt.save = false
+            if (response.code === 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+
+    // 删除endpoint
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('endpoint?ids=' + this.endpoint.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).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
+        }
+        obj.labelModule = []
+        if (obj.configs.labels !== '{}' && obj.configs.labels) {
+          Object.keys(obj.configs.labels).forEach(key => {
+            obj.labelModule.push({ key, value: obj.configs.labels[key] })
+          })
+        } else {
+          obj.labelModule.push({ key: '', value: '' })
+        }
+        obj.paramObj = []
+        if (obj.configs.params !== '{}' && obj.configs.params) {
+          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)
+      })
+      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) {
+      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 () {
+      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]
+    },
+    closeRightBox (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]
+      }
+    }
+  },
+  created () {
+    this.getProjectList()
+    this.getAssetList()
+  },
+  watch: {
+    endpointList (n, o) {
+      this.endpoint.endpointList = n
+      if (n.length > 0) {
+        this.paramBorderColor = '#dcdfe6'
+      } else {
+        this.paramBorderColor = '#F56C6C'
+      }
+    },
+    currentProject: {
+      immediate: true,
+      handler (n, o) {
+        if (n) {
+          this.currentProjectCopy = Object.assign({}, n)
+          this.endpoint.projectId = n.id
+          this.getModuleList(n.id)
+        }
+      }
+    },
+    currentModule: {
+      immediate: true,
+      handler (n, o) {
+        if (n) {
+          this.endpoint.moduleId = n.id
+          this.currentModuleCopy = JSON.parse(JSON.stringify(n))
+        }
+      }
+    },
+    currentModuleCopy: {
+      immediate: true,
+      handler (n, o) {
+        if (n.type && n.type.toLowerCase() == 'snmp') {
+          this.endpointTableTitle[4].show = false
+          this.endpointTableTitle[5].show = false
+        } else {
+          this.endpointTableTitle[4].show = true
+          this.endpointTableTitle[5].show = true
+        }
+      }
+    },
+    selectEndpointList: {
+      immediate: true,
+      handler (n) {
+        console.log(n)
+        n.configs = JSON.parse(n.configs)
+        this.endpointTableData = [...n]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .nz-icon.nz-icon-shanchu1 {
+    font-size: 14px;
+  }
+  /* start--param*/
+  .param-btn {
+    float: right;
+    height: 27px;
+    margin-top: -3px;
+  }
+  .param-btn-active {
+    background-color: #656565;
+    color: white;
+    border: 1px solid #656565;
+  }
+  .param-btn-active:hover, .param-btn-active:focus {
+    background-color: #656565;
+    color: white;
+  }
+  .param-btn-clear {
+    background-color: #D4D4D4;
+    border: 1px solid #D4D4D4;
+    color: white;
+  }
+  .param-btn-clear:hover, .param-btn-clear:focus {
+    background-color: #D4D4D4;
+    color: white;
+  }
+
+  .param-box {
+    height: 200px;
+    overflow: auto;
+    border: none;
+  }
+  .param-box-row {
+    padding: 7px 10px 0 10px;
+    position: relative;
+  }
+  .param-box-row:last-of-type {
+    padding-bottom: 7px;
+  }
+  .param-box-row-key, .param-box-row-value {
+    display: inline-block;
+    width: 50px;
+  }
+  .param-box-row-eq {
+    display: inline-block;
+    width: 14px;
+    text-align: center;
+    height: 22px;
+    line-height: 22px;
+    color: #c4c7cF;
+  }
+  /* end--param*/
+
+  /* begin--小盒子*/
+  .right-child-boxes {
+    height: calc(100% - 120px);
+    position: relative;
+  }
+  .endpoint-to-right-symbol {
+    position: absolute;
+    top: calc(50% - 28px);
+    left: 274px;
+    cursor: pointer;
+    font-size: 18px;
+  }
+  .right-child-box {
+    height: 100%;
+  }
+  .assets-box {
+    float: left;
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    width: 320px;
+  }
+  .endpoints-box {
+    margin: 0 0 0 340px;
+    width: 445px;
+  }
+  .endpoints-box.endpoints-box-snmp {
+    width: 380px;
+  }
+  .right-child-box .el-input-group {
+    width: 187px;
+    float: right;
+    margin: 7px 5px 0 0;
+  }
+  .right-child-box .module-info .el-input {
+    display: inline-block;
+  }
+
+  .right-child-box .module-info {
+    display: inline-block;
+    height: 22px;
+    vertical-align: middle;
+    position: absolute;
+    top: 5px;
+  }
+  .right-child-box-title {
+    padding: 9px 0 0 9px;
+    display: inline-block;
+  }
+  .endpoints-box-module-info {
+    background: #eeeeee;
+    width: 100%;
+    height: 33px;
+    position: relative;
+  }
+  .endpoints-box-module-info .title {
+    line-height: 33px;
+    color: #5e5e5e;
+    padding-left: 5px;
+    display: inline-block;
+  }
+  .module-info-port {
+    width: 53px;
+    right: 309px;
+  }
+  .module-info-port-snmp {
+    right: 142px;
+  }
+  .module-info-param {
+    width: 89px;
+    right: 116px;
+  }
+  .module-info-labels {
+    width: 89px;
+    right: 216px;
+  }
+  .module-info-labels-snmp {
+    right: 50px;
+  }
+  .module-info-path {
+    width: 70px;
+    right: 42px;
+  }
+  .endpoint-info-param {
+    width: 80px;
+  }
+  .right-child-box .module-info-cover {
+    right: 4px;
+    padding: 0px 6px;
+    margin-right: 5px;
+  }
+  .endpoints-box-endpoints {
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    height: calc(100% - 39px);
+    margin-top: 6px;
+    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  }
+  .endpoint-param-pop{
+    max-height: 200px;
+    overflow: auto;
+  }
+  /* end--小盒子*/
+
+  /* begin--子弹框*/
+  .right-sub-box {
+    width: 170px;
+    height: 225px;
+    position: fixed;
+    z-index: 2;
+    padding: 0;
+  }
+  /* begin--搜索框*/
+  .endpoint-asset-search {
+    position: relative;
+    margin: 0;
+    z-index: 11;
+  }
+  .endpoint-asset-search button {
+    height: 24px !important;
+  }
+  .endpoint-asset-search-dropdown {
+    position: absolute;
+    top: 25px;
+    background-color: #444;
+    border-radius: 2px;
+    width: 58px;
+    left: 0;
+  }
+  .endpoint-asset-search-dropdown-item {
+    text-align: center;
+    line-height: 22px;
+    height: 22px;
+    cursor: default;
+    color: white;
+    font-size: 12px;
+  }
+  .endpoint-asset-label-txt {
+    display: inline-block;
+    min-width: 19px;
+    text-align: center;
+  }
+  .endpoint-asset-search-dropdown-item:first-of-type {
+    border-radius: 4px 4px 0 0;
+  }
+  .endpoint-asset-search-dropdown-item:last-of-type {
+    border-radius: 0 0 4px 4px;
+  }
+  .endpoint-asset-search-dropdown-item:hover {
+    background-color: #222;
+    color: #ff9900;
+  }
+  .endpoint-asset-search-input {
+    display: inline-block;
+    width: 100px;
+    vertical-align: top;
+  }
+  .checkbox-mc{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 14px;
+    height: 14px;
+    z-index:1;
+  }
+  /* end--搜索框*/
+
+  /* begin--table*/
+  .endpoint-sub-table {
+    padding-top: 13px;
+    height: calc(100% - 83px);
+    width: 320px;
+  }
+  .line-100 {
+    margin-bottom: 3px;
+    width: 320px;
+  }
+  .endpoint-sub-table-head {
+    line-height: 28px;
+    height: 30px;
+    width: 600px;
+  }
+  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
+    line-height: 28px;
+    height: 30px;
+    color: #656565;
+    position: relative;
+    width: 600px;
+  }
+  .endpoint-sub-table-row:hover {
+    background-color: #dadada;
+    cursor: default;
+  }
+  .endpoint-sub-table-row-active {
+    background-color: #dadada;
+  }
+  .endpoint-sub-table-row-selected {
+    background-color: #656565;
+    color: white;
+  }
+  .endpoint-sub-table-col {
+    display: inline-block;
+    padding-left: 10px;
+    width: 100px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .endpoint-sub-table-paginate-all {
+    position: absolute;
+    left: 10px;
+    bottom: 17px;
+    color: #5a5a5a;
+  }
+  .endpoint-sub-table-body {
+    font-size: 15px;
+    position: relative;
+    height: calc(100% - 37px);
+  }
+  .endpoint-sub-table-body-dialog {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.7);
+    position: absolute;
+    z-index: 10;
+    top: 0;
+  }
+  .endpoints-clear-btn {
+    margin: 6px 0 0 7px;
+  }
+  .asset-and-endpoint{
+    width: 100%;
+    display: flex;
+    height: 480px;
+  }
+  .right-box-asset-table{
+    width: 37.5%;
+    margin-right: 2%;
+    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{
+
+    width: 100%;
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    border-radius: 2px;
+  }
+  /* 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;
+    }
+    .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 {
+    position: absolute;
+  }
+  .endpoint-asset-search .el-select {
+    width: 100px;
+  }
+  .endpoint-asset-search .el-cascader .el-input {
+    position: absolute;
+    height: 24px;
+    line-height: 24px;
+
+    input {
+      height: 24px;
+      line-height: 24px;
+    }
+  }
+  .endpoints-box-endpoints-title {
+    color: black;
+    font-weight: 400;
+  }
+
+  .right-box-endpoint-table .cell {
+    padding: 0 2px 0 10px;
+  }
+  .endpoints-box-endpoints .el-table .el-table__row td{
+    padding: 5px 0;
+  }
+  .module-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner,
+  .endpoint-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner {
+    cursor: pointer;
+    background-color: white;
+    border-color: #DCDFE6;
+    color: #606266;
+    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  }
+  .module-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover,
+  .endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover {
+    border-color: #c0c4cc;
+  }
+
+  .endpoints-box-endpoints .el-form-item {
+    margin-bottom: 0;
+  }
+  .endpoints-box-endpoints .el-form-item.is-error {
+    margin-bottom: 22px;
+  }
+  .input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus,
+  .input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus {
+    border-color: #F56C6C !important;
+  }
+
+  .asset-tip {
+    display: table;
+
+    .tip-row {
+      display: table-row;
+
+      .tip-cell {
+        display: table-cell;
+        padding: 2px 4px;
+      }
+    }
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 8b4cb7a48..447604b7b 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -592,7 +592,7 @@ export default {
       document.execCommand('Copy') // 执行浏览器复制命令
       const creatDom = document.getElementById('creatDom')
       creatDom.parentNode.removeChild(creatDom)
-      this.$message(this.$t('overall.copySuccess'))
+      this.$message.success(this.$t('overall.copySuccess'))
     },
     syntaxHighlight (json) {
       if (typeof json != 'string') {
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 108b46ade..5e4e30251 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -584,7 +584,7 @@ export default {
       document.execCommand('Copy') // 执行浏览器复制命令
       const creatDom = document.getElementById('creatDom')
       creatDom.parentNode.removeChild(creatDom)
-      this.$message(this.$t('overall.copySuccess'))
+      this.$message.success(this.$t('overall.copySuccess'))
     },
     syntaxHighlight (json) {
       if (typeof json != 'string') {
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index fba010dd3..137f7b4fb 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -7,7 +7,7 @@
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
-    @selection-change="(selection) => { batchDeleteObjs = selection }"
+    @selection-change="selectionChange"
   >
     <el-table-column
       :resizable="false"
@@ -46,14 +46,24 @@
           {{scope.row[item.prop].name}}
         </template>
         <template v-else-if="item.prop === 'alerts'">
-          <span class="endpoint-num" :class="scope.row.alertNum>0?'bagEF7458':'bag23BF9A'">
-            {{scope.row.alertNum}} active
+          <span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
+            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
+            {{scope.row.alertNum}}
+          </span>
+        </template>
+        <template v-else-if="item.prop === 'asset'">
+          <span >
+            <i class="nz-icon nz-icon-asset" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
+            {{scope.row.asset.name}}
           </span>
         </template>
         <template v-else-if="item.prop === 'configs'">
-          <el-tooltip placement="right" effect="light">
-            <span class="configs-endpoint">{}</span>
-            <div slot="content">{{scope.row[item.prop]}}</div>
+          <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'">
+            <span class="configs-endpoint">{ ... }</span>
+            <div class="endpointConfigsTips" slot="content">
+              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row[item.prop])"></i></span>
+              <pre >{{JSON.stringify(JSON.parse(scope.row[item.prop]),null,2)}}</pre>
+            </div>
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'state'">
@@ -109,18 +119,24 @@ export default {
           prop: 'project',
           show: true
         },
+        {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          show: true
+        },
         {
           label: this.$t('project.module.module'),
           prop: 'module',
           show: true
-        }, {
-          label: this.$t('project.endpoint.alerts'),
-          prop: 'alerts',
-          show: true
         },
         {
           label: this.$t('project.endpoint.configs'),
           prop: 'configs',
+          show: false
+        },
+        {
+          label: this.$t('project.endpoint.alerts'),
+          prop: 'alerts',
           show: true
         },
         {
@@ -132,6 +148,17 @@ export default {
     }
   },
   methods: {
+    copyValue (str) {
+      const domUrl = document.createElement('input')
+      domUrl.value = str
+      domUrl.id = 'creatDom'
+      document.body.appendChild(domUrl)
+      domUrl.select() // 选择对象
+      document.execCommand('Copy') // 执行浏览器复制命令
+      const creatDom = document.getElementById('creatDom')
+      creatDom.parentNode.removeChild(creatDom)
+      this.$message.success(this.$t('overall.copySuccess'))
+    }
   },
   computed: {}
 }
@@ -151,9 +178,28 @@ export default {
     color: #fff;
   }
   .configs-endpoint{
-    background: #FA901C;
     border-radius: 4px;
     padding: 2px 7px;
-    color: #fff;
+    color: #3C92F1;
+  }
+  .colorEF7458{
+    color: #EF7458;
+  }
+  .color23BF9A{
+    color: #23BF9A;
+  }
+  .endpoint-num, .alert-num{
+    cursor: pointer;
+  }
+</style>
+<style>
+  .endpointConfigsTips{
+    height: 200px;
+    overflow-y: auto;
+  }
+  .copy-value-content{
+    position: absolute;
+    right: 1px;
+    top: 4px;
   }
 </style>
diff --git a/nezha-fronted/src/components/common/table/settings/moduleTable.vue b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
index a21b62375..69a89a406 100644
--- a/nezha-fronted/src/components/common/table/settings/moduleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
@@ -7,7 +7,7 @@
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
-    @selection-change="(selection) => { batchDeleteObjs = selection }"
+    @selection-change="selectionChange"
   >
     <el-table-column
       :resizable="false"
@@ -43,10 +43,16 @@
           {{scope.row[item.prop].name}}
         </template>
         <template v-else-if="item.prop === 'endpointNum'">
+          <span class="endpoint-num"  @click="showBottomBox('endpoint', scope.row)">
+             <i class="nz-icon nz-icon-endpoint" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
           {{scope.row[item.prop]}}
+          </span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-          {{scope.row[item.prop]}}
+          <span class="alert-num" @click="showBottomBox('moduleAlertMessage', scope.row)">
+            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
+            {{scope.row[item.prop]}}
+          </span>
         </template>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
       </template>
@@ -89,10 +95,11 @@ export default {
           label: this.$t('project.module.moduleName'),
           prop: 'name',
           show: true,
+          minWidth: 200
         }, {
           label: this.$t('project.module.type'),
           prop: 'type',
-          show: true,
+          show: false,
           width: 150
         }, {
           label: this.$t('project.project.project'),
@@ -114,7 +121,7 @@ export default {
         {
           label: this.$t('overall.remark'),
           prop: 'remark',
-          show: true,
+          show: false,
           minWidth: 150
         }
       ]
@@ -132,3 +139,14 @@ export default {
   }
 }
 </script>
+<style scoped>
+  .colorEF7458{
+    color: #EF7458;
+  }
+  .color23BF9A{
+    color: #23BF9A;
+  }
+  .endpoint-num, .alert-num{
+    cursor: pointer;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/table/settings/projectTable.vue b/nezha-fronted/src/components/common/table/settings/projectTable.vue
index 0b7b9366a..c9b6b2a89 100644
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -7,7 +7,7 @@
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
-    @selection-change="(selection) => { batchDeleteObjs = selection }"
+    @selection-change="selectionChange"
   >
     <el-table-column
       :resizable="false"
@@ -34,23 +34,26 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
-          <span class="module-num">
+          <span class="">
             {{scope.row[item.prop]}}
           </span>
         </template>
         <template v-else-if="item.prop === 'moduleNum'" >
           <span class="module-num" @click="jumpModule(scope.row)">
+            <i class="nz-icon nz-icon-overview-module"/>
             {{scope.row[item.prop]}}
           </span>
         </template>
         <template v-else-if="item.prop === 'endpointNum'">
-          <span class="endpoint-num" :class="scope.row[item.prop]>0?'bagEF7458':'bag23BF9A'"  @click="jumpEndpoint(scope.row)">
+          <span class="endpoint-num" @click="jumpEndpoint(scope.row)" >
+              <i class="nz-icon nz-icon-endpoint" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
             {{scope.row[item.prop]}}
           </span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-         <span class="endpoint-num" :class="scope.row[item.prop]>0?'bagEF7458':'bag23BF9A'">
-            {{scope.row[item.prop]}} active
+         <span class="alert-num">
+            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
+            {{scope.row[item.prop]}}
           </span>
         </template>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
@@ -94,7 +97,7 @@ export default {
           label: this.$t('project.project.project'),
           prop: 'name',
           show: true,
-          width: 150
+          minWidth: 150
         }, {
           label: this.$t('project.module.module'),
           prop: 'moduleNum',
@@ -106,7 +109,7 @@ export default {
           show: true,
           width: 150
         }, {
-          label: this.$t('project.endpoint.endpoint'),
+          label: this.$t('project.endpoint.alerts'),
           prop: 'alertNum',
           show: true,
           width: 150
@@ -114,7 +117,7 @@ export default {
         {
           label: this.$t('overall.remark'),
           prop: 'remark',
-          show: true,
+          show: false,
           minWidth: 150
         }
       ]
@@ -142,26 +145,26 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
   .module-num{
     font-size: 14px;
-    color: #3C92F1;
     font-weight: 400;
     cursor: pointer;
     padding: 0 3px;
     cursor: pointer;
+    .nz-icon-overview-module{
+    color: rgb(122, 208, 188)
+    }
   }
-  .endpoint-num{
+  .alert-num{
     padding: 0 3px;
     cursor: pointer;
     border-radius: 2px;
   }
-  .bagEF7458{
-    background: #EF7458;
-    color: #fff;
+  .colorEF7458{
+    color: #EF7458;
   }
-  .bag23BF9A{
-    background: #23BF9A;
-    color: #fff;
+  .color23BF9A{
+    color: #23BF9A;
   }
 </style>
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 4246b8f05..05d4f1eb6 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -3,6 +3,7 @@
     <nz-data-list
       ref="dataList"
       :api="url"
+      :tableId="tableId"
       class="dataList"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.endpoint"
@@ -22,13 +23,17 @@
           class="top-tool-export margin-r-10"
         >
           <template slot="optionZone">
-            <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'" class="top-tool-btn margin-l-20"
                     type="button" @click="add">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>
           </template>
         </export-excel>
         <delete-button id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <button id="account-batch-modify" v-has="'monitor_endpoint_add'" :class="{'nz-btn-disabled' : batchDeleteObjs.length<1}" class="top-tool-btn margin-l-20 margin-r-20"
+                type="button" @click="batchModify">
+          <i class="nz-icon-batch-edit nz-icon"></i>
+        </button>
       </template>
       <template v-slot:search>
         <clickSearch :titleSearchList="titleSearchList" :selectValue.sync="selectValue" @reload="reloadTable"/>
@@ -41,10 +46,12 @@
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"
+          :tableId="tableId"
           @del="del"
           @edit="edit"
           @orderBy="tableDataSort"
           @reload="getTableData"
+          @selectionChange="selectionChange"
           @showBottomBox="(targetTab, item) => { $refs.dataList.showBottomBox(targetTab, item) }"></endpoint-table>
       </template>
       <template v-slot:pagination>
@@ -59,6 +66,9 @@
     <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>
+    <transition name="right-box">
+      <batchModifyEndpoint v-if="rightBox.batchModify" :module="object" @close="closeRightBatchModify" :selectEndpointList="batchDeleteObjs" :disabled="true" :type="'edit'"></batchModifyEndpoint>
+    </transition>
   </div>
 </template>
 <script>
@@ -69,6 +79,7 @@ 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'
+import batchModifyEndpoint from '@/components/common/rightBox/batchModifyEndpoint'
 import clickSearch from '@/components/common/clickSearch'
 
 export default {
@@ -84,7 +95,8 @@ export default {
     deleteButton,
     endpointTable,
     'export-excel': exportXLSX,
-    clickSearch
+    clickSearch,
+    batchModifyEndpoint
   },
   mixins: [dataListMixin],
   data () {
@@ -119,7 +131,8 @@ export default {
       roles: [],
       rightBox: {
         editShow: false,
-        show: false
+        show: false,
+        batchModify: false
       },
       titleSearch: {},
       titleSearchList: {
@@ -199,6 +212,13 @@ export default {
         this.getTableData()
       }
     },
+    closeRightBatchModify (refresh) {
+      this.rightBox.batchModify = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
     getTableData () {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -257,7 +277,13 @@ export default {
           })
         }
       })
-      this.titleSearchList.state.children = [{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' },{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }]
+      this.titleSearchList.state.children = [{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }]
+    },
+    batchModify () {
+      if (!this.batchDeleteObjs.length) {
+        return
+      }
+      this.rightBox.batchModify = true
     }
   },
   computed: {
@@ -294,4 +320,7 @@ export default {
     flex: 1;
     width: 100%;
   }
+  /deep/ .nz-btn-disabled {
+    opacity: 0.5;
+  }
 </style>
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
index 0bc4f5d21..cb221ecf8 100644
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -3,6 +3,7 @@
     <nz-data-list
       ref="dataList"
       :api="url"
+      :tableId="tableId"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.module"
       :layout="['searchInput', 'elementSet']"
@@ -33,6 +34,7 @@
           ref="dataTable"
           v-loading="slotProps.loading"
           :api="url"
+          :tableId="tableId"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"
@@ -40,6 +42,7 @@
           @edit="edit"
           @orderBy="tableDataSort"
           @reload="getTableData"
+          @selectionChange="selectionChange"
           @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></module-table>
       </template>
       <template v-slot:pagination>
@@ -196,19 +199,21 @@ export default {
 
       this.searchLabel.projectIds = localStorage.getItem('moduleProjectId')
     }
+    if (localStorage.getItem('moduleProjectId')) {
+      setTimeout(()=>{
+        this.$refs.dataList.$refs.searchInput.select_list.push({
+          id: 11,
+          name: 'project id',
+          type: 'input',
+          label: 'projectIds',
+          disabled: false,
+          val: localStorage.getItem('moduleProjectId')
+        })
+        this.$refs.dataList.$refs.searchInput.sreach_num = 1
+      })
+    }
   },
   mounted () {
-    if (localStorage.getItem('moduleProjectId')) {
-      this.$refs.dataList.$refs.searchInput.select_list.push({
-        id: 11,
-        name: 'project id',
-        type: 'input',
-        label: 'projectIds',
-        disabled: false,
-        val: localStorage.getItem('moduleProjectId')
-      })
-      this.$refs.dataList.$refs.searchInput.sreach_num = 1
-    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/monitor/project/projectList.vue b/nezha-fronted/src/components/page/monitor/project/projectList.vue
index 999d049d6..b982d3007 100644
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -3,6 +3,7 @@
     <nz-data-list
       ref="dataList"
       :api="url"
+      :tableId="tableId"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.project"
       :layout="['searchInput', 'elementSet']"
@@ -22,10 +23,12 @@
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"
+          :tableId="tableId"
           @del="del"
           @edit="edit"
           @orderBy="tableDataSort"
           @reload="getTableData"
+          @selectionChange="selectionChange"
           @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></project-table>
       </template>
       <template v-slot:pagination>