feat：修改endpoint 搜索asset列表的接口

nezha-fronted/.eslintrc.js

@@ -1,25 +1,25 @@
 module.exports = {
-  env: {
+    env: {
-    browser: true,
+        browser: true,
-    es2021: true
+        es2021: true
-  },
+    },
-  extends: [
+    extends: [
-    'plugin:vue/essential',
+        'plugin:vue/essential',
-    'standard'
+        'standard'
-  ],
+    ],
-  parserOptions: {
+    parserOptions: {
-    ecmaVersion: 12,
+        ecmaVersion: 12,
-    sourceType: 'module'
+        sourceType: 'module'
-  },
+    },
-  plugins: [
+    plugins: [
-    'vue'
+        'vue'
-  ],
+    ],
-  rules: {
+    rules: {
-    eqeqeq: 0, // 关闭必须使用全等
+        eqeqeq: 0, // 关闭必须使用全等
-    'no-extend-native': 0,
+        'no-extend-native': 0,
-    'vue/no-parsing-error': 0, // 关闭此项避免在{{}}中使用>、<号导致报错的问题
+        'vue/no-parsing-error': 0, // 关闭此项避免在{{}}中使用>、<号导致报错的问题
-    'vue/no-use-v-if-with-v-for': 0, // vue2暂时关闭v-if和v-for写在一起的错误提示，到vue3后要遵守
+        'vue/no-use-v-if-with-v-for': 0, // vue2暂时关闭v-if和v-for写在一起的错误提示，到vue3后要遵守
-    'no-useless-escape': 0,
+        'no-useless-escape': 0,
-    'no-eval': 0
+        'no-eval': 0
-  }
+    }
-}
+}

nezha-fronted/src/components/charts/chart-table.vue

@@ -376,13 +376,13 @@ export default {
           let mapping
           if (type == 'value') {
             mapping = mappings.find(t => {
-              let mappingValue = t.value ===''?'':Number(t.value) //Number('') 值为0
+              const mappingValue = t.value === '' ? '' : Number(t.value) // Number('') 值为0
               return mappingValue === value
             })
           } else {
             mapping = mappings.find(t => {
-              let mappingFrom = t.from ===''?'':Number(t.from)
+              const mappingFrom = t.from === '' ? '' : Number(t.from)
-              let mappingTo = t.to ===''?'':Number(t.to)
+              const mappingTo = t.to === '' ? '' : Number(t.to)
               return Number(mappingFrom) <= value && Number(mappingTo) >= value
             })
           }
@@ -433,26 +433,25 @@ export default {
     getStatisticsResult: function (statistics, seriesItem) {
       if (!seriesItem || !seriesItem.length > 0) return []
       if (!statistics) return seriesItem
-      let copy = JSON.parse(JSON.stringify(seriesItem))
+      const copy = JSON.parse(JSON.stringify(seriesItem))
       copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })[0]
-      let classifies=[];
+      const classifies = []
-      let maxGroup=0
+      let maxGroup = 0
-      let map = new Map();//用于记录在第几组
+      const map = new Map()// 用于记录在第几组
       copy.forEach(item => {
-        let element = item.element.element;
+        const element = item.element.element
-        let group = map.get(element);
+        const group = map.get(element)
-        if(typeof group != "undefined"){
+        if (typeof group != 'undefined') {
           classifies[group].push(item)
-        }else{
+        } else {
-          classifies.push([item]);
+          classifies.push([item])
-          map.set(element,maxGroup++)
+          map.set(element, maxGroup++)
         }
       })
 
       let result
       switch (statistics) {
         case 'null': {
-
           result = copy.map(item => {
             return {
               element: item.element,
@@ -463,22 +462,22 @@ export default {
           break
         }
         case 'min': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-              let groupMin = group.sort((x, y) => {
+            const groupMin = group.sort((x, y) => {
-                return parseFloat(x.data[1]) - parseFloat(y.data[1])
+              return parseFloat(x.data[1]) - parseFloat(y.data[1])
-              })[0]
+            })[0]
 
-              return {
+            return {
-                element: groupMin.element,
+              element: groupMin.element,
-                time: bus.timeFormate(new Date(groupMin.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              time: bus.timeFormate(new Date(groupMin.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-                value: groupMin.data[1]
+              value: groupMin.data[1]
-              }
+            }
           })
           break
         }
         case 'max': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-            let groupMax = group.sort((x, y) => {
+            const groupMax = group.sort((x, y) => {
               return parseFloat(y.data[1]) - parseFloat(x.data[1])
             })[0]
 
@@ -491,11 +490,11 @@ export default {
           break
         }
         case 'average': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-            let groupData=group.map(t => parseFloat(t.data[1]))
+            const groupData = group.map(t => parseFloat(t.data[1]))
             const sum = eval(groupData.join('+'))
             const avg = sum / groupData.length
-            let last = group.sort((x, y) => {
+            const last = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[0]
             return {
@@ -507,10 +506,10 @@ export default {
           break
         }
         case 'total': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-            let groupData=group.map(t => parseFloat(t.data[1]))
+            const groupData = group.map(t => parseFloat(t.data[1]))
             const total = eval(groupData.join('+'))
-            let last = group.sort((x, y) => {
+            const last = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[0]
             return {
@@ -522,8 +521,8 @@ export default {
           break
         }
         case 'first': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-            let first = group.sort((x, y) => {
+            const first = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[copy.length - 1]
 
@@ -536,9 +535,8 @@ export default {
           break
         }
         case 'last': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-
+            const last = group.sort((x, y) => {
-            let last = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[0]
             return {
@@ -550,17 +548,16 @@ export default {
           break
         }
         case 'range': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-
             const sort = JSON.parse(JSON.stringify(group)).sort((x, y) => {
               return parseFloat(y.data[1]) - parseFloat(x.data[1])
             })
-            let last = group.sort((x, y) => {
+            const last = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[0]
             const max = sort[0]
             const min = sort[sort.length - 1]
-            let range = max.data[1] - min.data[1];
+            const range = max.data[1] - min.data[1]
             return {
               element: last.element,
               time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
@@ -570,13 +567,12 @@ export default {
           break
         }
         case 'different': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-
             const sort = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })
-            let last = sort[0]
+            const last = sort[0]
-            let first = sort[copy.length - 1]
+            const first = sort[copy.length - 1]
             return {
               element: last.element,
               time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),

nezha-fronted/src/components/charts/chartPreview.vue

@@ -1391,26 +1391,25 @@ export default {
     getStatisticsResult: function (statistics, seriesItem) {
       if (!seriesItem || !seriesItem.length > 0) return []
       if (!statistics) return seriesItem
-      let copy = JSON.parse(JSON.stringify(seriesItem))
+      const copy = JSON.parse(JSON.stringify(seriesItem))
       copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })[0]
-      let classifies=[];
+      const classifies = []
-      let maxGroup=0
+      let maxGroup = 0
-      let map = new Map();//用于记录在第几组
+      const map = new Map()// 用于记录在第几组
       copy.forEach(item => {
-        let element = item.element.element;
+        const element = item.element.element
-        let group = map.get(element);
+        const group = map.get(element)
-        if(typeof group != "undefined"){
+        if (typeof group != 'undefined') {
           classifies[group].push(item)
-        }else{
+        } else {
-          classifies.push([item]);
+          classifies.push([item])
-          map.set(element,maxGroup++)
+          map.set(element, maxGroup++)
         }
       })
 
       let result
       switch (statistics) {
         case 'null': {
-
           result = copy.map(item => {
             return {
               element: item.element,
@@ -1421,8 +1420,8 @@ export default {
           break
         }
         case 'min': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-            let groupMin = group.sort((x, y) => {
+            const groupMin = group.sort((x, y) => {
               return parseFloat(x.data[1]) - parseFloat(y.data[1])
             })[0]
 
@@ -1435,8 +1434,8 @@ export default {
           break
         }
         case 'max': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-            let groupMax = group.sort((x, y) => {
+            const groupMax = group.sort((x, y) => {
               return parseFloat(y.data[1]) - parseFloat(x.data[1])
             })[0]
 
@@ -1449,11 +1448,11 @@ export default {
           break
         }
         case 'average': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-            let groupData=group.map(t => parseFloat(t.data[1]))
+            const groupData = group.map(t => parseFloat(t.data[1]))
             const sum = eval(groupData.join('+'))
             const avg = sum / groupData.length
-            let last = group.sort((x, y) => {
+            const last = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[0]
             return {
@@ -1465,10 +1464,10 @@ export default {
           break
         }
         case 'total': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-            let groupData=group.map(t => parseFloat(t.data[1]))
+            const groupData = group.map(t => parseFloat(t.data[1]))
             const total = eval(groupData.join('+'))
-            let last = group.sort((x, y) => {
+            const last = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[0]
             return {
@@ -1480,8 +1479,8 @@ export default {
           break
         }
         case 'first': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-            let first = group.sort((x, y) => {
+            const first = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[copy.length - 1]
 
@@ -1494,9 +1493,8 @@ export default {
           break
         }
         case 'last': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-
+            const last = group.sort((x, y) => {
-            let last = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[0]
             return {
@@ -1508,17 +1506,16 @@ export default {
           break
         }
         case 'range': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-
             const sort = JSON.parse(JSON.stringify(group)).sort((x, y) => {
               return parseFloat(y.data[1]) - parseFloat(x.data[1])
             })
-            let last = group.sort((x, y) => {
+            const last = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })[0]
             const max = sort[0]
             const min = sort[sort.length - 1]
-            let range = max.data[1] - min.data[1];
+            const range = max.data[1] - min.data[1]
             return {
               element: last.element,
               time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
@@ -1528,13 +1525,12 @@ export default {
           break
         }
         case 'different': {
-          result = classifies.map(group=>{
+          result = classifies.map(group => {
-
             const sort = group.sort((x, y) => {
               return parseFloat(y.data[0]) - parseFloat(x.data[0])
             })
-            let last = sort[0]
+            const last = sort[0]
-            let first = sort[copy.length - 1]
+            const first = sort[copy.length - 1]
             return {
               element: last.element,
               time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),

nezha-fronted/src/components/common/js/constants.js

@@ -129,22 +129,22 @@ export const setting = {
     { value: 'OFF', label: i18n.t('config.dc.suspended') }
   ]
 }
-export const snmpProtocolTypes=[
+export const snmpProtocolTypes = [
   // {label:'V1',value:1},
-  {label:'V2',value:2},
+  { label: 'V2', value: 2 },
-  {label:'V3',value:3}
+  { label: 'V3', value: 3 }
 ]
-export const snmpAuthMethod=[
+export const snmpAuthMethod = [
-  {label:'None',value:''},
+  { label: 'None', value: '' },
-  {label:'MD5',value:'MD5'},
+  { label: 'MD5', value: 'MD5' },
-  {label:'SHA',value:'SHA'},
+  { label: 'SHA', value: 'SHA' }
 ]
-export const snmpEncryptionMethod=[
+export const snmpEncryptionMethod = [
-  {label:'None',value:''},
+  { label: 'None', value: '' },
-  {label:'DES',value:'DES'},
+  { label: 'DES', value: 'DES' },
-  {label:'AES-128',value:'AES-128'},
+  { label: 'AES-128', value: 'AES-128' },
-  {label:'AES-192',value:'AES-192'},
+  { label: 'AES-192', value: 'AES-192' },
-  {label:'AES-256',value:'AES-256'},
+  { label: 'AES-256', value: 'AES-256' }
 ]
 export const terminalLog = {
   status: {

nezha-fronted/src/components/common/language/cn.js

@@ -149,7 +149,7 @@ const cn = {
     hadConfig: '已经有人开始配置系统',
     invalidCode: '身份验证无效，请按照{page}中的描述继续',
     welcomePage: '欢迎页面',
-    inited: '系统已经被初始化',
+    inited: '系统已经被初始化'
   },
   webshell: {
     shellTitle: '本地 Shell',
@@ -698,13 +698,13 @@ const cn = {
       perms: '权限',
       button: '按钮',
       menu: '菜单',
-      tab:'Tab',
+      tab: 'Tab',
       parent: '上级菜单',
       mainMenu: '主菜单',
       createMenu: '新增菜单',
       editMenu: '编辑菜单',
       orderNum: '排序',
-      icon:'图标',
+      icon: '图标'
     },
     promServer: {
       promServerList: 'Prometheus服务',
@@ -860,14 +860,14 @@ const cn = {
       mibBrowser: 'MIB浏览器',
       credentials: '证书',
       noData: '暂无数据',
-      credential:{
+      credential: {
-        type:"协议类型",
+        type: '协议类型',
-        port:"端口",
+        port: '端口',
-        remark:"备注",
+        remark: '备注',
-        auth:"认证",
+        auth: '认证',
-        method:'方式',
+        method: '方式',
-        encryption:"加密",
+        encryption: '加密',
-        pin:"密码"
+        pin: '密码'
       }
     },
     system: {
@@ -1193,7 +1193,7 @@ const cn = {
       password: '密码',
       authTypeNull: 'none',
       authTypeWord: 'basic auth',
-      authTypeToken: 'bearer token',
+      authTypeToken: 'bearer token'
     },
     metrics: {
       metrics: '指标',

nezha-fronted/src/components/common/language/en.js

@@ -155,7 +155,7 @@ const en = {
     hadConfig: 'Someone has started to configure the system',
     invalidCode: "The authentication is invalid ,please follow the description in {page} 'To continue'",
     welcomePage: 'Welcome page',
-    inited:'The system has been initialized',
+    inited: 'The system has been initialized'
   },
   webshell: {
     shellTitle: 'Local Shell',
@@ -701,13 +701,13 @@ const en = {
       perms: 'Permission',
       button: 'Button',
       menu: 'Menu',
-      tab:'Tab',
+      tab: 'Tab',
       parent: 'Previous menu',
       mainMenu: 'Primary menu',
       createMenu: 'Create menu',
       editMenu: 'Edit menu',
       orderNum: 'Order',
-      icon:'Icon'
+      icon: 'Icon'
     },
     agent: {
       // 侧滑框
@@ -862,16 +862,16 @@ const en = {
       mibBrowser: 'MIB browser',
       credentials: 'Credentials',
       noData: 'No Data',
-      credential:{
+      credential: {
-        type:"Protocol type",
+        type: 'Protocol type',
-        port:"Port",
+        port: 'Port',
-        remark:"Description",
+        remark: 'Description',
-        edit:"Edit",
+        edit: 'Edit',
-        create:"Create",
+        create: 'Create',
-        auth:'Authentication',
+        auth: 'Authentication',
-        method:'Method',
+        method: 'Method',
-        encryption:"Encryption",
+        encryption: 'Encryption',
-        pin:"Password"
+        pin: 'Password'
       }
     },
     system: {
@@ -1199,7 +1199,7 @@ const en = {
       password: 'Password',
       authTypeNull: 'None',
       authTypeWord: 'basic auth',
-      authTypeToken: 'bearer token',
+      authTypeToken: 'bearer token'
     },
     metrics: {
       metrics: 'Metrics', // "指标"

nezha-fronted/src/components/common/popBox/selectWalk.vue

@@ -103,8 +103,8 @@ export default {
     show () {
       this.popBox.show = true
     },
-    hideDetail (data,num) {
+    hideDetail (data, num) {
-      console.log(data,num)
+      console.log(data, num)
       this.tempWalk.detailShow = false
     },
     showDetail (data, e) {

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -24,226 +24,64 @@
           </el-select>
         </el-form-item>
         <!--asset和endpoint-->
-        <div class="right-box-form-row right-child-boxes" style="height: calc(100% - 190px);">
+        <div class="asset-and-endponit">
-          <div class="right-child-box assets-box">
+          <div class="right-box-asset-table">
-            <!--begin--标题-->
-            <div class="right-child-box-title">{{$t('asset.asset')}}</div>
-            <!--end--标题-->
-            <!-- begin--table-->
-            <div class="endpoint-sub-table" v-loading="assetLoading">
-              <div ref="assetScrollbar" style="overflow: auto; height: 100%; width: 100%;">
-                <div class="endpoint-sub-table-head">
-                  <div @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
-                  <div class="endpoint-sub-table-col" style="width: 15px;position: relative">
-                    <el-checkbox v-model="assetListAll" :indeterminate="assetListHalf"
-                               @change="assetListSelAll"></el-checkbox>
-                  </div>
-                  <div class="endpoint-sub-table-col">Host</div>
-                  <div class="endpoint-sub-table-col">SN</div>
-                  <div class="endpoint-sub-table-col">Model</div>
-                  <div class="endpoint-sub-table-col">DC</div>
-                  <div class="endpoint-sub-table-col">Type</div>
-                </div>
-                <div class="line-100"></div>
-                <div class="endpoint-sub-table-body">
-                  <div v-for="(item, index) in assetList" :id="'select-asset-'+item.id" :key="index" :data="item.id" class="endpoint-sub-table-row">
-                    <el-popover trigger="hover" placement="left-start">
-                      <div class="asset-tip" style="display: table">
-                        <div class="tip-row">
-                          <span class="tip-cell">Host</span>
-                          <span class="tip-cell">{{item.host}}</span>
-                        </div>
-                        <div class="tip-row">
-                          <span class="tip-cell">SN</span>
-                          <span class="tip-cell">{{item.sn}}</span>
-                        </div>
-                        <div class="tip-row">
-                          <span class="tip-cell">Model</span>
-                          <span class="tip-cell">{{item.model.name}}</span>
-                        </div>
-                        <div class="tip-row">
-                          <span class="tip-cell">DC</span>
-                          <span class="tip-cell">{{item.idc.name}}</span>
-                        </div>
-                        <div class="tip-row">
-                          <span class="tip-cell">Type</span>
-                          <span class="tip-cell">{{item.model.type.value}}</span>
-                        </div>
-                      </div>
-                      <span slot="reference">
-                      <div class="endpoint-sub-table-col" style="width: 15px;">
-                        <el-checkbox v-model="item.sel" @change="selectAsset"></el-checkbox>
-                      </div>
-                      <div class="endpoint-sub-table-col">{{item.host}}</div>
-                      <div class="endpoint-sub-table-col">{{item.sn}}</div>
-                      <div class="endpoint-sub-table-col">{{item.model.name}}</div>
-                      <div class="endpoint-sub-table-col">{{item.idc.name}}</div>
-                      <div class="endpoint-sub-table-col">{{item.model.type.value}}</div>
-                    </span>
-                    </el-popover>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="line-100" style="border-color:#dcdfe6"></div>
             <div>
-              <button type="button" @click="addToEndpointList"
+              <search-input ref="searchInput" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
-                      class="nz-btn nz-btn-size-small-new nz-btn-style-light-new endpoints-clear-btn" style="margin-top: 3px;" id="add-endpoint-add-asset">
-                {{$t('overall.addAssetList')}}
-              </button>
-              <span style="display: inline-block; font-size: 14px; float: right;padding-right: 15px;margin-top: 3px;">All: {{this.assetList.length}}</span>
             </div>
-            <!--end--table-->
+            <el-table
+              ref="multipleTable"
+              :data="assetTableData"
+              tooltip-effect="dark"
+              style="width: 100%"
+              height="100%"
+              @selection-change="handleSelectionChange">
+               <el-table-column
+                type="selection"
+                width="55">
+              </el-table-column>
+              <el-table-column
+                v-for="(item, index) in assetTableTitle"
+                :key="`col-${index}`"
+                :fixed="item.fixed"
+                :label="item.label"
+                :min-width="`${item.minWidth}`"
+                :prop="item.prop"
+                :resizable="true"
+                :sort-orders="['ascending', 'descending']"
+                :width="`${item.width}`"
+                class="data-column"
+              >
+                <template slot="header">
+                  <span>{{item.label}}</span>
+                  <div class="col-resize-area"></div>
+                </template>
+                <template slot-scope="scope" :column="item">
+                  <template v-if="item.prop == 'brand'">
+                    <span>{{scope.row[item.prop].name}}</span>
+                  </template>
+                  <template v-else-if="item.prop == 'model'">
+                    <span>{{scope.row[item.prop].name}}</span>
+                  </template>
+                  <template v-else-if="item.prop == 'dc'">
+                    <span>{{scope.row[item.prop].name}}</span>
+                  </template>
+                   <template v-else-if="item.prop == 'cabinet'">
+                    <span>{{scope.row[item.prop].name}}</span>
+                  </template>
+                  <template v-else-if="item.prop == 'type'">
+                    <span>{{scope.row[item.prop].name}}</span>
+                  </template>
+                  <template v-else-if="item.prop == 'state'">
+                    <span>{{scope.row[item.prop].name}}</span>
+                  </template>
+                  <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
-          <!--右侧endpoint列表-->
+          <div class="right-box-endpoint-table">
-          <div class="right-child-box endpoints-box" :class="{'endpoints-box-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}">
-            <!--module-->
-            <div class="endpoints-box-module-info">
-              <div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
-              <el-input class="module-info module-info-port input-x-mini-22" :class="{'module-info-port-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.port" id="add-endpoint-module-port"></el-input>
-              <el-popover
-                placement="bottom"
-                width="100"
-                trigger="hover"
-                v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'"
-              >
-                <div class="endpoint-param-pop">
-                  <div v-for="(item, index) in currentModuleCopy.paramObj" :key="index">{{item.key}}={{item.value}}</div>
-                </div>
-                <el-input id="add-endpoint-module-param" @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param  input-x-mini-22" v-model="currentModuleCopy.param" ></el-input>
-              </el-popover>
 
-              <el-popover
-                placement="bottom"
-                width="100"
-                trigger="hover"
-              >
-                <div class="endpoint-param-pop">
-                  <div v-for="(item, index) in currentModuleCopy.labelModule" :key="index">{{item.key}}={{item.value}}</div>
-                </div>
-                <el-input id="edit-labels" @click.native.stop="showEditLabelsBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param module-info-labels input-x-mini-22" :class="{'module-info-labels-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.labels"></el-input>
-              </el-popover>
-
-              <el-input v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'" class="module-info module-info-path input-x-mini-22" v-model="currentModuleCopy.path" id="add-endpoint-module-path"></el-input>
-              <button type="button" id="cover-param" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light module-info module-info-cover"><i class="nz-icon nz-icon-override"></i></button>
-            </div>
-            <!--endpoints-->
-            <div class="endpoints-box-endpoints" :style="{borderColor: endpointTouch ? paramBorderColor : '#dcdfe6'}">
-              <el-table
-                :data="endpointList"
-                ref="endpointTable"
-                style="width: 100%;border-radius: 4px;"
-                height="calc(100% - 36px)"
-                :row-class-name="setRowIndex"
-                id="add-endpoint-asset-table"
-                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[title.prop]">{{scope.row[title.prop].host}}</span>
-                    <span v-else-if="title.prop == 'param'">
-                      <el-popover
-                        v-if="!scope.row.isEdit"
-                        placement="bottom"
-                        width="200"
-                        trigger="hover"
-                      >
-                        <div class="endpoint-param-pop">
-                          <div v-for="p in scope.row.paramObj" :key="p.key">{{p.key}}={{p.value}}</div>
-                        </div>
-                        <span slot="reference">
-                          <span @mousedown.stop>{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
-                        </span>
-                      </el-popover>
-                      <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)">
-                        <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: false, message: $t('validate.required'), trigger: 'blur'}">
-                          <el-input readonly class="endpoint-info endpoint-info-param input-x-mini-22" v-model="scope.row.param"></el-input>
-                        </el-form-item>
-                      </span>
-                    </span>
-                    <span v-else-if="title.prop == 'labels'">
-                      <el-popover
-                        v-if="!scope.row.isEdit"
-                        placement="bottom"
-                        width="200"
-                        trigger="hover"
-                      >
-                        <div class="endpoint-param-pop">
-                          <div v-for="p in scope.row.labelModule" :key="p.key">{{p.key}}={{p.value}}</div>
-                        </div>
-                        <span slot="reference">
-                          <span @mousedown.stop>{{scope.row.labels.length > 8 ? scope.row.labels.substring(0, 8) + '...' : scope.row.labels}}</span>
-                        </span>
-                      </el-popover>
-                      <span @mousedown.stop v-else @click.stop="showEditLabelsBox(true, scope.row, 2, $event)">
-                        <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: false, message: $t('validate.required'), trigger: 'blur'}">
-                          <el-input readonly class="endpoint-info endpoint-info-param input-x-mini-22" v-model="scope.row.labels"></el-input>
-                        </el-form-item>
-                      </span>
-                    </span>
-                    <span v-else-if="title.prop == 'path'">
-                      <el-popover
-                        placement="bottom"
-                        width="100"
-                        trigger="hover"
-                        :content="scope.row[title.prop]"
-                        v-if="!scope.row.isEdit"
-                      >
-                        <span slot="reference" >
-                          <span>{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
-                        </span>
-                      </el-popover>
-                      <span @mousedown.stop v-else>
-                        <el-form-item :prop="'endpointList[' + scope.row.index + '].path'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.path"></el-input>
-                        </el-form-item>
-                      </span>
-                    </span>
-                    <span v-else-if="title.prop == 'port'">
-                      <span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
-                      <span @mousedown.stop v-else>
-                        <el-form-item :prop="'endpointList[' + scope.row.index + '].port'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.port"></el-input>
-                        </el-form-item>
-                      </span>
-                    </span>
-                    <span v-else-if="title.prop == 'host'">
-                      <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
-                      <span @mousedown.stop v-else>
-                        <el-form-item :prop="'endpointList[' + scope.row.index + '].host'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.host"></el-input>
-                        </el-form-item>
-                      </span>
-                    </span>
-                  </template>
-                </el-table-column>
-                <el-table-column label="" width="56">
-                  <template slot-scope="scope" :column="title">
-                    <div>
-                      <span :id="'ep-asset-toedit-'+scope.row.assetId" v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @mousedown.stop @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
-                      <span :id="'ep-asset-edit-'+scope.row.assetId" v-else class="endpoint-box-row-symbol" @mousedown.stop @click="editEndpoint(scope.row)"><i class="nz-icon nz-icon-check"></i></span>
-                      <!--<span :id="'ep-asset-remove-'+scope.row.assetId" class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="nz-icon nz-icon-shanchu1"></i></span>-->
-                    </div>
-                  </template>
-                </el-table-column>
-              </el-table>
-              <div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div>
-              <div>
-                <button id="clear-select-asset" type="button" @click="clearSelection" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new endpoints-clear-btn">{{$t('overall.clear')}}</button>
-                <span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
-              </div>
-            </div>
           </div>
         </div>
       </el-form>
@@ -315,6 +153,10 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
         ]
       },
+      pageObj: {
+        pageNo: 1,
+        pageSize: 10
+      },
       vendorAndModelOptionData: [],
       paramBorderColor: '#dcdfe6',
       endpointTouch: false,
@@ -332,7 +174,7 @@ export default {
       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: -1 },
+      assetPageObj: { pageNo: 1, pageSize: 10 },
       selectedAssets: [], // 侧滑框中选中的asset
       projectList: [],
       moduleList: [],
@@ -373,9 +215,68 @@ export default {
       ],
       assetListAll: false,
       assetListHalf: false,
+      assetTableTitle: [
+        {
+          label: this.$t('asset.tableTitle.sn'),
+          prop: 'sn',
+          show: true
+        },
+        {
+          label: this.$t('asset.tableTitle.name'),
+          prop: 'name',
+          show: false,
+          allowed: true
+        }, {
+          label: this.$t('asset.tableTitle.manageIp'),
+          prop: 'manageIp',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.brand'),
+          prop: 'brand',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.model'),
+          prop: 'model',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.dc'),
+          prop: 'dc',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.cabinet'),
+          prop: 'cabinet',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.type'),
+          prop: 'type',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.state'),
+          prop: 'state',
+          show: true
+        }],
       typeList: [],
       dcList: [],
-      modelList: []
+      modelList: [],
+      assetTableData: [],
+      seachLabel: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: 'Project name',
+          type: 'input',
+          label: 'name',
+          disabled: false
+        },
+        {
+          id: 10,
+          name: 'Project id',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }]
+      }
     }
   },
   methods: {
@@ -596,41 +497,16 @@ export default {
       })
     },
 
-    /* 获取类型列表 */
-    getTypeList () {
-      this.$get('sys/dict/all', { pageSize: -1, pageNo: 1, type: 'assetType' }).then(response => {
-        if (response.code === 200) {
-          this.typeList = response.data
-        }
-      })
-    },
-
-    /* 获取DC列表 */
-    getDCList () {
-      this.$get('idc', { pageSize: -1, pageNo: 1 }).then(response => {
-        if (response.code === 200) {
-          this.dcList = response.data.list
-        }
-      })
-    },
-
     // 获取endpoint弹框中的asset子弹框里asset列表数据
     getAssetList () {
       this.assetLoading = true
-      this.$get('asset', this.assetPageObj).then(response => {
+      const params = {
+        ...this.assetPageObj,
+        ...this.seachLabel
+      }
+      this.$get('asset/asset', params).then(response => {
         if (response.code === 200) {
-          const respData = response.data.list
+          this.assetTableData = response.data.list
-          for (let i = 0; i < respData.length; i++) {
-            respData[i].sel = false
-            for (let j = 0; j < this.endpointList.length; j++) {
-              if (respData[i].id == this.endpointList[j].assetId) {
-                respData.splice(i, 1)
-                i--
-                break
-              }
-            }
-          }
-          this.assetList = response.data.list
         }
       }).finally(() => {
         setTimeout(() => {
@@ -684,88 +560,6 @@ export default {
       this.tempParamObj = []
     },
 
-    // 清空勾选的endpoint
-    clearSelection () {
-      const selections = this.$refs.endpointTable.selection
-      if (selections && selections.length > 0) {
-        for (let i = 0; i < selections.length; i++) {
-          this.removeEndpoint(selections[i])
-        }
-      }
-    },
-
-    // endpoint弹框中的asset子弹框里asset选择事件
-    selectAsset () {
-      this.$nextTick(() => {
-        let index = 0
-        this.assetList.forEach(item => {
-          if (item.sel) {
-            index++
-          }
-        })
-        if (index == 0) {
-          this.assetListAll = false
-          this.assetListHalf = false
-        } else if (index < this.assetList.length) {
-          this.assetListAll = true
-          this.assetListHalf = true
-        } else {
-          this.assetListAll = true
-          this.assetListHalf = false
-        }
-      })
-    },
-    // 批量添加到endpoint
-    addToEndpointList () {
-      const arr = []
-      this.assetListAll = false
-      this.assetListHalf = false
-      this.endpointTouch = true
-      this.endpointTouch = true
-      this.endpoint.projectId = this.currentProjectCopy.id
-      this.endpoint.moduleId = this.currentModuleCopy.id
-      this.assetList = this.assetList.filter(item => {
-        const flag = item.sel
-        if (flag) {
-          item.sel = false
-          const obj = {
-            isEdit: false,
-            assetId: item.id,
-            asset: item,
-            host: item.host,
-            param: this.currentModuleCopy.param ? this.currentModuleCopy.param : '',
-            paramObj: this.currentModuleCopy.paramObj ? this.currentModuleCopy.paramObj : {},
-            labels: this.currentModuleCopy.labels ? this.currentModuleCopy.labels : '',
-            labelModule: this.currentModuleCopy.labelModule ? this.currentModuleCopy.labelModule : {},
-            port: this.currentModuleCopy.port,
-            path: this.currentModuleCopy.path,
-            moduleId: this.currentModuleCopy.id
-          }
-          arr.push(obj)
-        }
-        return !flag
-      })
-      this.endpointList = this.endpointList.concat(arr)
-    },
-    // 全选的checkbox的事件
-    assetListSelAll (flag) {
-      if (flag) {
-        this.assetListHalf = false
-        this.assetList.forEach(item => {
-          item.sel = flag
-        })
-      } else if (!flag && !this.assetListHalf) {
-        this.assetList.forEach(item => {
-          item.sel = flag
-        })
-      } else if (!flag && this.assetListHalf) {
-        this.assetListHalf = false
-        this.assetListAll = true
-        this.assetList.forEach(item => {
-          item.sel = !flag
-        })
-      }
-    },
     // 将param转为json字符串格式
     paramToJson (param) {
       const tempParam = {}
@@ -782,7 +576,7 @@ export default {
 
     // 获取endpoint弹框中module下拉框数据
     getModuleList (projectId) {
-      this.$get('module', { projectIds: projectId, pageSize: -1 }).then(response => {
+      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 {
@@ -826,7 +620,7 @@ export default {
       })
       this.$refs.addEndpoint.validate((valid) => {
         if (valid) {
-          this.$post('endpoint', endpointList).then(response => {
+          this.$post('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') })
@@ -878,64 +672,6 @@ export default {
       }).catch(() => {
         this.prevent_opt.save = false
       })
-    },
-    // endpoint弹框的asset子弹框顶部搜索条件选中事件
-    dropdownSelect (label) {
-      this.assetSearch.text = ''
-      if (this.assetSearch.label !== label) {
-        this.assetSearch.host = ''
-        this.assetSearch.sn = ''
-        this.assetSearch.modelId = ''
-        this.assetSearch.typeIds = ''
-        this.assetSearch.idcId = ''
-      }
-      this.assetSearch.label = label
-      this.assetSearch.dropdownShow = false
-    },
-
-    clearEndpoints () {
-      this.getAssetList()
-      this.endpointList = []
-      this.assetSearch = { host: '', sn: '', text: '', label: 'Host', dropdownShow: false }
-    },
-
-    setRowIndex ({ row, rowIndex }) {
-      row.index = rowIndex
-    },
-
-    filterDCValue (input, callback) {
-      const result = this.dcList.filter(item => {
-        return item.name.toLowerCase().indexOf(input.toLowerCase()) != -1
-      })
-      console.info(input, result)
-      callback(result)
-    },
-    filterModelValue (input, callback) {
-      const result = this.modelList.filter(item => {
-        return item.name.toLowerCase().indexOf(input.toLowerCase()) != -1
-      })
-      callback(result)
-    },
-    filterTypeValue (input, callback) {
-      const result = this.typeList.filter(item => {
-        return item.name.toLowerCase().indexOf(input.toLowerCase()) != -1
-      })
-      callback(result)
-    },
-    selectDC (select) {
-      this.assetSearch.idcId = select.id
-      this.assetSearch.modelId = ''
-      this.assetSearch.typeIds = ''
-    },
-    selectModel (select) {
-      this.assetSearch.modelId = select
-      this.assetSearch.idcId = ''
-      this.assetSearch.typeIds = ''
-    },
-    selectType (select) {
-      this.assetSearch.typeIds = select.id
-      this.assetSearch.idcId = ''
-      this.assetSearch.modelId = ''
     }
   },
   created () {
@@ -1271,6 +1007,24 @@ export default {
   .endpoints-clear-btn {
     margin: 6px 0 0 7px;
   }
+  .asset-and-endponit{
+    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;
+  }
+  .right-box-endpoint-table{
+    flex: 1;
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    border-radius: 2px;
+  }
   /* end--table*/
 
   /* end--子弹框*/

nezha-fronted/src/components/common/rightBox/agentBox.vue

@@ -108,14 +108,14 @@ export default {
   },
   methods: {
     refreshToken: function () {
-      if(!this.editPromServer.token||this.editPromServer.token == ''){
+      if (!this.editPromServer.token || this.editPromServer.token == '') {
-        this.$message.error("The token is empty")
+        this.$message.error('The token is empty')
-        return;
+        return
       }
-      this.$post('agent/token/refresh' , this.editPromServer).then(response=>{
+      this.$post('agent/token/refresh', this.editPromServer).then(response => {
-        if(response.code == 200){
+        if (response.code == 200) {
-          this.editPromServer.token = response.data.token;
+          this.editPromServer.token = response.data.token
-        }else{
+        } else {
           this.$message.error(response.msg)
         }
       })

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -131,11 +131,14 @@
                 </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="editModule.configs.scrape_interval" size="small" id="module-box-input-scrape_interval"></el-input>
+                  <el-input :placeholder='$t("project.endpoint.scrape_interval_placeholder")' v-model.number="editModule.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="editModule.configs.scrape_timeout" size="small" id="module-box-input-scrape_timeout"></el-input>
+                   <template slot="append">s</template>
                 </el-form-item>
               </div>
             </transition>
@@ -215,14 +218,9 @@
 
           </el-tab-pane>
         </el-tabs>
-
+        <div class="configs-copy-value">
-        <pre class="configs-copy-value">
+          <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
-          {{configsCopyValue}}
+          <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
-         <i class="nz-icon nz-icon-override copy-value-content" @click="copyValue"></i>
-        </pre>
-
-        <div class="right-box-form-tip" :style="{'margin-bottom': '15px','margin-left':editModule.type.toLowerCase()=='snmp'?'15px':'0'}">
-
         </div>
       </el-form>
     </div>
@@ -319,8 +317,8 @@ export default {
     }
   },
   methods: {
-    change(){
+    change () {
-      console.log(this.$refs['select'+0])
+      console.log(this.$refs['select' + 0])
     },
     selectWalk (walk) {
       if (this.editModule.walk.indexOf(walk) != -1) {
@@ -521,7 +519,7 @@ export default {
 
     // 新增param
     addParam () {
-      this.editModule.paramObj.push({ key: '', value: [] ,showList: false})
+      this.editModule.paramObj.push({ key: '', value: [], showList: false })
     },
     // 移除单个param
     removeParam (index) {
@@ -693,6 +691,7 @@ export default {
             delete params.labels
           }
           this.configsCopyValue = JSON.stringify(params, null, 2)
+          console.log(this.configsCopyValue)
         }
       }
     }
@@ -802,10 +801,9 @@ export default {
     border: 1px solid #E7EAED;
     border-radius: 2px;
     height: 140px;
-    overflow-y: auto;
     position: relative;
     margin-top: 10px;
-    padding: 10px 15px;
+    padding: 10px 0px 10px 15px;
     width: calc(100% - 40px);
     margin-left: 20px;
   }

nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue

@@ -89,13 +89,13 @@
 
 <script>
 
-  import {port} from "../js/validate";
+import { port } from '../js/validate'
 
-  export default {
+export default {
   name: 'credentialBox',
 
   props: {
-    credential: Object,
+    credential: Object
   },
   data () {
     return {
@@ -108,14 +108,14 @@
         remark: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        type:[
+        type: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        port:[
+        port: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
           { validator: port, trigger: 'blur' }
         ]
-      },
+      }
     }
   },
   methods: {
@@ -128,21 +128,21 @@
       this.esc(false)
     },
 
-    typeChange:function(type){
+    typeChange: function (type) {
-      if(type === 1 || type === 2){
+      if (type === 1 || type === 2) {
-        this.$set(this.editCredential,'config',{
+        this.$set(this.editCredential, 'config', {
-          readCommunity:'',
+          readCommunity: '',
-          writeCommunity:'',
+          writeCommunity: ''
         })
-      }else{
+      } else {
-        this.$set(this.editCredential,'config',{
+        this.$set(this.editCredential, 'config', {
-          username:'',
+          username: '',
-          contextname:'',
+          contextname: '',
-          securityLevel:'',
+          securityLevel: '',
-          authProtocol:'',
+          authProtocol: '',
-          authPin:'',
+          authPin: '',
-          privProtocol:'',
+          privProtocol: '',
-          privPin:'',
+          privPin: ''
         })
       }
     },
@@ -154,19 +154,19 @@
       this.prevent_opt.save = true
       this.$refs.credentialForm.validate((valid) => {
         if (valid) {
-          if(this.editCredential.type === 3 ){
+          if (this.editCredential.type === 3) {
-            if(this.editCredential.config.authProtocol && !this.editCredential.config.privProtocol){
+            if (this.editCredential.config.authProtocol && !this.editCredential.config.privProtocol) {
               this.editCredential.securityLevel = 'authNoPriv'
-            }else if(this.editCredential.config.authProtocol && this.editCredential.config.privProtocol){
+            } else if (this.editCredential.config.authProtocol && this.editCredential.config.privProtocol) {
               this.editCredential.securityLevel = 'authPriv'
-            }else{
+            } else {
               this.editCredential.securityLevel = 'noAuthNoPriv'
             }
           }
-          let param = JSON.parse(JSON.stringify(this.editCredential))
+          const param = JSON.parse(JSON.stringify(this.editCredential))
           param.config = JSON.stringify(param.config)
           if (this.editCredential.id) {
-            this.$put('/snmp/credential',param).then(response=>{
+            this.$put('/snmp/credential', param).then(response => {
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
@@ -176,7 +176,7 @@
               this.prevent_opt.save = false
             })
           } else {
-            this.$post('/snmp/credential',param).then(response=>{
+            this.$post('/snmp/credential', param).then(response => {
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
@@ -213,7 +213,7 @@
       }).catch(() => {
         this.prevent_opt.save = false
       })
-    },
+    }
   },
   mounted () {
 
@@ -225,7 +225,7 @@
       handler (n, o) {
         this.editCredential = JSON.parse(JSON.stringify(n))
         this.editCredential.config = JSON.parse(this.editCredential.config)
-        console.log('edit',this.editCredential)
+        console.log('edit', this.editCredential)
       }
     }
   }

nezha-fronted/src/components/common/table/settings/credentialsTable.vue

@@ -86,37 +86,37 @@
 </template>
 
 <script>
-  import table from '@/components/common/mixin/table'
+import table from '@/components/common/mixin/table'
-  export default {
+export default {
-    name: "credentialsTable",
+  name: 'credentialsTable',
-    mixins: [table],
+  mixins: [table],
-    data(){
+  data () {
-      return{
+    return {
-        tableTitle:[{
+      tableTitle: [{
-          label: 'ID',
+        label: 'ID',
-          prop: 'id',
+        prop: 'id',
-          show: true,
+        show: true,
-          width: 80
+        width: 80
-        }, {
+      }, {
-          label: this.$t('overall.name'),
+        label: this.$t('overall.name'),
-          prop: 'name',
+        prop: 'name',
-          show: true
+        show: true
-        },{
+      }, {
-          label:this.$t('config.mib.credential.type'),
+        label: this.$t('config.mib.credential.type'),
-          prop: 'type',
+        prop: 'type',
-          show: true
+        show: true
-        },{
+      }, {
-          label:this.$t('config.mib.credential.port'),
+        label: this.$t('config.mib.credential.port'),
-          prop: 'port',
+        prop: 'port',
-          show: true
+        show: true
-        },{
+      }, {
-          label:this.$t('config.mib.credential.remark'),
+        label: this.$t('config.mib.credential.remark'),
-          prop: 'remark',
+        prop: 'remark',
-          show: true
+        show: true
-        }]
+      }]
-      }
     }
   }
+}
 </script>
 
 <style scoped>

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -106,7 +106,7 @@ export default {
           prop: 'endpointNum',
           show: true,
           width: 150
-        },{
+        }, {
           label: this.$t('project.module.alerts'),
           prop: 'alertNum',
           show: true,
@@ -124,7 +124,7 @@ export default {
   methods: {
     showBottomBox (project) {
       this.$store.commit('currentProjectChange', project)
-    },
+    }
   },
   computed: {
     isCurrentUser () {

nezha-fronted/src/components/common/table/settings/moduleTable.vue

@@ -106,7 +106,7 @@ export default {
           prop: 'endpointNum',
           show: true,
           width: 150
-        },{
+        }, {
           label: this.$t('project.module.alerts'),
           prop: 'alertNum',
           show: true,
@@ -124,7 +124,7 @@ export default {
   methods: {
     showBottomBox (project) {
       this.$store.commit('currentProjectChange', project)
-    },
+    }
   },
   computed: {
     isCurrentUser () {

nezha-fronted/src/components/page/alert/alertSilence.vue

@@ -170,4 +170,3 @@ export default {
   }
 }
 </script>
-

nezha-fronted/src/components/page/config/agent.vue

@@ -110,10 +110,10 @@ export default {
   mixins: [dataListMixin],
   computed: {
     wgetUrl () {
-      return 'wget -qO- --header="Authorization:'+this.token+'" '+ this.ipAddr+'/agent/'+this.agentParam.dc+'/'+this.agentParam.type+'/install.sh | bash'
+      return 'wget -qO- --header="Authorization:' + this.token + '" ' + this.ipAddr + '/agent/' + this.agentParam.dc + '/' + this.agentParam.type + '/install.sh | bash'
     },
     curlUrl () {
-      return 'curl -o- -H "Authorization:'+this.token+'" '+ this.ipAddr+'/agent/'+this.agentParam.dc+'/'+this.agentParam.type+'/install.sh | bash'
+      return 'curl -o- -H "Authorization:' + this.token + '" ' + this.ipAddr + '/agent/' + this.agentParam.dc + '/' + this.agentParam.type + '/install.sh | bash'
     }
   },
   data () {
@@ -203,7 +203,7 @@ export default {
         this.tools.loading = false
         if (response.code === 200) {
           this.allDc = response.data.list
-          if(this.allDc&&this.allDc.length>0){
+          if (this.allDc && this.allDc.length > 0) {
             this.loadFinish = true
             this.agentParam.dc = this.allDc[0].id
           }
@@ -221,33 +221,32 @@ export default {
       }
       document.body.removeChild(input)
 
-      if(id.indexOf('curl') != -1){
+      if (id.indexOf('curl') != -1) {
         this.curlVisible = true
         // let timeout = setTimeout(()=>{
         //   this.curlVisible = false;
         //   clearTimeout(timeout)
         // },1000)
-      }else{
+      } else {
         this.wgetVisible = true
         // let timeout = setTimeout(()=>{
         //   this.wgetVisible = false;
         //   clearTimeout(timeout)
         // },1000)
-
       }
     },
-    popShow:function(where){
+    popShow: function (where) {
       const self = this
-      if(where == 'curl'){
+      if (where == 'curl') {
-        let timeout = setTimeout(()=>{
+        const timeout = setTimeout(() => {
-          self.curlVisible = false;
+          self.curlVisible = false
           clearTimeout(timeout)
-        },1000)
+        }, 1000)
-      }else{
+      } else {
-        let timeout = setTimeout(()=>{
+        const timeout = setTimeout(() => {
-          self.wgetVisible = false;
+          self.wgetVisible = false
           clearTimeout(timeout)
-        },1000)
+        }, 1000)
       }
     },
     downloadAgent: function () {

nezha-fronted/src/components/page/config/credentials.vue

@@ -53,72 +53,72 @@
 </template>
 
 <script>
-  import mibBrowser from './mibBrowser'
+import mibBrowser from './mibBrowser'
-  import deleteButton from '@/components/common/deleteButton'
+import deleteButton from '@/components/common/deleteButton'
-  import nzDataList from '@/components/common/table/nzDataList'
+import nzDataList from '@/components/common/table/nzDataList'
-  import dataListMixin from '@/components/common/mixin/dataList'
+import dataListMixin from '@/components/common/mixin/dataList'
-  import credentialsTable from '@/components/common/table/settings/credentialsTable'
+import credentialsTable from '@/components/common/table/settings/credentialsTable'
-  import snmpCredentialBox from "../../common/rightBox/snmpCredentialBox";
+import snmpCredentialBox from '../../common/rightBox/snmpCredentialBox'
-  export default {
+export default {
-    name: "credentials",
+  name: 'credentials',
-    props: {
+  props: {
-      showTab: String
+    showTab: String
-    },
+  },
-    components: {
+  components: {
-      mibBrowser,
+    mibBrowser,
-      deleteButton,
+    deleteButton,
-      nzDataList,
+    nzDataList,
-      credentialsTable,
+    credentialsTable,
-      snmpCredentialBox
+    snmpCredentialBox
-    },
+  },
-    mixins: [dataListMixin],
+  mixins: [dataListMixin],
-    data(){
+  data () {
-      return{
+    return {
-        url:'snmp/credential',
+      url: 'snmp/credential',
-        tableId: 'credentialTable', // 需要分页的table的id，用于记录每页数量
+      tableId: 'credentialTable', // 需要分页的table的id，用于记录每页数量
-        blankObject: {
+      blankObject: {
-          id: null,
+        id: null,
-          name: '',
+        name: '',
-          type:2,
+        type: 2,
-          port:161,
+        port: 161,
-          remark: '',
+        remark: '',
-          config:{
+        config: {
 
-          },
-        },
-        searchMsg: { // 给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: 'ID',
-            type: 'input',
-            label: 'id',
-            disabled: false
-          }, {
-            id: 5,
-            name: this.$t('overall.name'),
-            type: 'input',
-            label: 'name',
-            disabled: false
-          },{
-            id:6,
-            name: 'Type',
-            type: 'input',
-            label: 'types',
-            disabled: false
-          }]
         }
-      }
-    },
-    methods:{
-      toFileTab () {
-        this.$emit('toFileTab')
       },
-      toBrowserTab(){
+      searchMsg: { // 给搜索框子组件传递的信息
-        this.$emit('toBrowserTab')
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 5,
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }, {
+          id: 6,
+          name: 'Type',
+          type: 'input',
+          label: 'types',
+          disabled: false
+        }]
       }
     }
+  },
+  methods: {
+    toFileTab () {
+      this.$emit('toFileTab')
+    },
+    toBrowserTab () {
+      this.$emit('toBrowserTab')
+    }
   }
+}
 </script>
 
 <style scoped>

nezha-fronted/src/components/page/config/menus.vue

@@ -64,7 +64,7 @@ export default {
         route: '',
         orderNum: 1,
         perms: '',
-        icon:''
+        icon: ''
       },
       tableTitle: [ // 原table列
         {
@@ -88,7 +88,7 @@ export default {
           label: this.$t('config.menus.type'),
           prop: 'type',
           show: true
-        },{
+        }, {
           label: this.$t('config.menus.icon'),
           prop: 'icon',
           show: true

nezha-fronted/src/components/page/config/mib.vue

@@ -60,7 +60,7 @@ import deleteButton from '@/components/common/deleteButton'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import mibTable from '@/components/common/table/settings/mibTable'
-import credentials from "./credentials";
+import credentials from './credentials'
 export default {
   name: 'mib',
   components: {

nezha-fronted/src/components/page/config/setup.vue

@@ -237,15 +237,15 @@ export default {
           } else {
             this.getValidateCode()
             this.$get('setup/checkCode?code=' + this.validateCode).then(response => {
-              if(response.status == 404){
+              if (response.status == 404) {
                 this.$alert(this.$t('setup.hadConfig'), { type: 'warning' })
-                const self = this;
+                const self = this
-                setTimeout(()=>{
+                setTimeout(() => {
                   self.$router.push({
                     path: '/'
                   })
-                },2000)
+                }, 2000)
-                return;
+                return
               }
               if (response.code == 200) {
                 this.activeStep = 1

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -1013,7 +1013,7 @@ export default {
           param: param,
           sync: this.editChart.sync,
           remark: this.editChart.remark,
-          groupId: this.editChart.groupId,
+          groupId: this.editChart.groupId
         }
         if (valid) {
           if (opType === 'preview') {
@@ -1082,7 +1082,7 @@ export default {
               },
               sync: this.editChart.sync,
               remark: this.editChart.remark,
-              groupId: this.editChart.groupId,
+              groupId: this.editChart.groupId
             }
 
             if (valid) {
@@ -1487,7 +1487,7 @@ export default {
             if (this.editChart.type != 'singleStat' && this.editChart.type != 'pie' && this.editChart.type != 'table') {
               delete params.param.statistics
             }
-            if (this.editChart.type === 'bar' && this.editChart.param.statistics && this.editChart.param.statistics !== 'null'){
+            if (this.editChart.type === 'bar' && this.editChart.param.statistics && this.editChart.param.statistics !== 'null') {
               params.param.statistics = this.editChart.param.statistics
             }
             if (this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea' || this.editChart.type === 'table') {

nezha-fronted/src/components/page/monitor/module/moduleList.vue

@@ -124,14 +124,14 @@ 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 (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) {
+      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] })
         })

nezha-fronted/src/components/page/monitor/project/index.vue

@@ -11,8 +11,8 @@ import projectTopo from './project'
 export default {
   name: 'index',
   props: {},
-  computed:{
+  computed: {
-    showList(){
+    showList () {
       return !this.$store.getters.getShowTopoScreen
     }
   },

nezha-fronted/src/store/index.js

@@ -32,7 +32,7 @@ const store = new Vuex.Store({
     idcArr: [],
     overViewProject: {},
     dcDataRefresh: false,
-    showTopoScreen: false,
+    showTopoScreen: false
   },
   getters: {
     getLinkData (state) {