feat:系统配置页面 & 其他修改

1.系统配置页面
2.mib table调整
3.overview 使用地图接口

nezha-fronted/src/components/common/header.vue

@@ -110,6 +110,9 @@
         <el-menu-item index="5-4">
           <div @click="jumpTo('mib')" :class="{'menu-item-active' :(activeIndex == 'mib' )}">{{$t('config.mib.mib')}}</div>
         </el-menu-item>
+        <el-menu-item index="5-5">
+          <div @click="jumpTo('system')" :class="{'menu-item-active' :(activeIndex == 'system' )}">{{$t('config.system.system')}}</div>
+        </el-menu-item>
       </el-submenu>
       <el-submenu index="6" popper-class="nz-submenu">
         <template slot="title">

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

@@ -54,3 +54,30 @@ export function noSpecialChar(rule, value, callback){
     }
   }, 100)
 }
+
+export function positiveInteger(rule, value, callback){
+  setTimeout(() => {
+    if(Number(value) == 'NaN'){
+      callback(new Error(vm.$t('validate.number')))
+    }else{
+      if(Number(value) >=0 ){
+        callback();
+      }else{
+        callback(new Error(vm.$t('validate.positiveInteger')))
+      }
+    }
+  }, 100)
+}
+
+export function url(rule, value, callback){
+  let urlReg='';
+  let reg=new RegExp(urlReg)
+  setTimeout(() => {
+    if (reg.test(value)) {
+      callback()
+    } else {
+      callback(new Error(vm.$t('validate.url')))
+    }
+  }, 100)
+}
+

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

@@ -65,7 +65,9 @@ const en = {
       failed:'Failed',
       success:'Success',
       failedDetail:'Failed Detail'
-    }
+    },
+    reset:'Reset',
+    submit:'Submit'
   },
   pageSize: '/page',
   webshell:{
@@ -235,11 +237,13 @@ const en = {
   validate: { //校验规则
     required: 'Required',//'必填项'
     number: 'Numberic',//'必须是数字'
+    positiveInteger:'Positive Integer',
     email:'Invalid email',//'不合法的E-mail地址'
     tel:'Invalid phone number',//'不合法的电话号码'
     host:'Invalid IP',//'不合法的IP'
     fileSize:'文件过大',//File exceed max size.
     port:'Invalid Port',
+    url:'Invalid URL',
     config: {
       account: {
 
@@ -512,6 +516,56 @@ const en = {
     },
     system:{
       system:'System',
+      basic:{
+        basic:'Basic',
+        alertApi:'Alert API',
+        assetPingSwith:'Asset Ping',
+        assetPingInterval:'Interval',
+        exporterTarget:'Exporter Path',
+        scrapeInterval:'Scrape Interval',
+        storageRetention:'Local Retention',
+        systemName:'System Name',
+        curUrl:'Current URL'
+      },
+      email:{
+        email:'Email',
+        smtpHost:'SMTP Host',
+        smtpPort:'SMTP Port',
+        smtpAccount:'SMTP Account',
+        smtpPwd:'SMTP Password',
+        sendAccount:'Send Account',
+        testAccount:'Test Account',
+        useSSL:'SSL',
+        useTLS:'TLS',
+        testConnection:'Test Connection',
+        pwdTip:'Tip:Some email providers need to enter token',
+        sendAccountTip:'Tip:The SMTP account is used as the sending account by default',
+        testAccountTip:'Tip:Used only as test mail recipient',
+        sslTip:'If the SMTP port is 465, you usually need to enable SSL',
+        tlsTip:'If the SMTP port is 587, you usually need to enable TLS'
+      },
+      terminal:{
+        terminal:'Terminal',
+        terminalNum:'Max Terminal Number'
+      },
+      ldap:{
+        ldap:'LDAP',
+        address:'LDAP Address',
+        dn:'Bind DN',
+        pwd:'Password',
+        ou:'User OU',
+        filter:'User Filter',
+        map:'LDAP Field Mapping',
+        active:'LDAP Authentication'
+      },
+      reset:{
+        reset:'Reset',
+        type:'Type',
+        pwd:'Password',
+        metric:'metric',
+        alert:'alert',
+        sysConfig:'system config',
+      }
     }
   },
   alert: {

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

@@ -308,12 +308,8 @@
         deep:true,
         handler(n, o) {
           this.currentMib = Object.assign({},n);
-          if(this.currentMib.modelsDetail && this.currentMib.modelsDetail.length>0){
+          if(this.currentMib.models){
-            for(let model of this.currentMib.modelsDetail){
+            this.selectedModels=this.currentMib.models.split(',');
-              model.label=model.name;
-              model.value=model.id;
-              this.selectedModels.push(model);
-            }
           }else{
             this.selectedModels=[];
           }

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

@@ -21,6 +21,9 @@
         <div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
           {{$t('config.mib.mib')}}
         </div>
+        <div class="sidebar-info-item" @click="jumpTo('system')" id="account-jump-system">
+          {{$t('config.system.system')}}
+        </div>
       </div>
     </div>
     <div class="content-right">

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

@@ -42,15 +42,18 @@
           <div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
             {{$t('config.promServer.promServerList')}}
           </div>
-          <div class="sidebar-info-item sidebar-info-item-active"  id="account-jump-dc">
+          <div class="sidebar-info-item sidebar-info-item-active"  id="dc-jump-dc">
             {{$t('config.dc.dc')}}
           </div>
-          <div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
+          <div class="sidebar-info-item" @click="jumpTo('model')" id="dc-jump-model">
             {{$t('config.model.model')}}
           </div>
-          <div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
+          <div class="sidebar-info-item" @click="jumpTo('mib')" id="dc-jump-mib">
             {{$t('config.mib.mib')}}
           </div>
+          <div class="sidebar-info-item" @click="jumpTo('system')" id="dc-jump-system">
+            {{$t('config.system.system')}}
+          </div>
         </div>
       </div>
       <!--dc table start-->

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

@@ -21,6 +21,9 @@
         <div class="sidebar-info-item sidebar-info-item-active" id="mib-jump-mib">
           {{$t('config.mib.mib')}}
         </div>
+        <div class="sidebar-info-item" @click="jumpTo('system')" id="mib-jump-system">
+          {{$t('config.system.system')}}
+        </div>
       </div>
     </div>
     <div class="content-right">
@@ -35,8 +38,8 @@
           </button>
         </div>
       </div>
-      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table" v-scrollBar:el-table>
+      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table>
-        <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
+        <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
                          :key="`col-${index}`" :label="item.label">
           <template slot-scope="scope" :column="item">
             <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
@@ -44,9 +47,9 @@
               <span class="clickable" @click="downloadMib(scope.row.id)">{{scope.row[item.prop]}}</span>
             </template>
             <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0">
-              <div style="max-height: 100px">
+              <div style="height: 100px">
                 <el-scrollbar style="height: 100%">
-                  <span v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" >
+                  <div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" >
                   <el-popover trigger="hover" placement="right" >
                     <div>
                       <div>
@@ -63,14 +66,10 @@
                       </div>
                     </div>
                     <template slot="reference">
-                      <template v-if="i < scope.row['modelsDetail'].length-1">
+                        <div  class="detail-item-content">{{n.name}}</div>
-                        {{n.name}}
-                        <el-divider></el-divider>
-                      </template>
-                      <template v-else>{{n.name}}</template>
                     </template>
                   </el-popover>
-                </span>
+                </div>
               </el-scrollbar>
               </div>
             </template>
@@ -360,3 +359,19 @@
     }
   }
 </script>
+<style >
+  .mib-table .el-divider--horizontal{
+    margin:2px 0 !important;
+  }
+  .mib-table td .cell{
+    min-height: 80px !important;
+    padding-bottom: 3px;
+  }
+  .mib-table td .cell .detail-item-content{
+    width:fit-content;
+    width:-webkit-fit-content;
+    width:-moz-fit-content;
+    height: 20px;
+    line-height: 20px;
+  }
+</style>

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

@@ -18,9 +18,12 @@
         <div class="sidebar-info-item sidebar-info-item-active" id="model-jump-model">
           {{$t('config.model.model')}}
         </div>
-        <div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
+        <div class="sidebar-info-item" @click="jumpTo('mib')" id="model-jump-mib">
           {{$t('config.mib.mib')}}
         </div>
+        <div class="sidebar-info-item" @click="jumpTo('system')" id="model-jump-system">
+          {{$t('config.system.system')}}
+        </div>
       </div>
     </div>
     <div class="content-right">

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

@@ -12,15 +12,18 @@
           {{$t('config.account.account')}}
         </div>
         <div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
-        <div class="sidebar-info-item" @click="jumpTo('dc')" id="account-jump-dc">
+        <div class="sidebar-info-item" @click="jumpTo('dc')" id="prom-jump-dc">
           {{$t('config.dc.dc')}}
         </div>
-        <div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
+        <div class="sidebar-info-item" @click="jumpTo('model')" id="prom-jump-model">
           {{$t('config.model.model')}}
         </div>
-        <div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
+        <div class="sidebar-info-item" @click="jumpTo('mib')" id="prom-jump-mib">
           {{$t('config.mib.mib')}}
         </div>
+        <div class="sidebar-info-item" @click="jumpTo('system')" id="prom-jump-system">
+          {{$t('config.system.system')}}
+        </div>
       </div>
     </div>
     <div class="content-right">

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

@@ -0,0 +1,378 @@
+<template>
+  <div class="system">
+    <div class="content-left">
+      <div class="sidebar-title">{{$t('overall.config')}}</div>
+      <div class="sidebar-info">
+        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
+          {{$t('config.account.account')}}
+        </div>
+        <div class="sidebar-info-item " @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
+        <div class="sidebar-info-item" @click="jumpTo('dc')" id="system-jump-dc">
+          {{$t('config.dc.dc')}}
+        </div>
+        <div class="sidebar-info-item" @click="jumpTo('model')" id="system-jump-model">
+          {{$t('config.model.model')}}
+        </div>
+        <div class="sidebar-info-item" @click="jumpTo('mib')" id="system-jump-mib">
+          {{$t('config.mib.mib')}}
+        </div>
+        <div class="sidebar-info-item sidebar-info-item-active"  id="system-jump-system">
+          {{$t('config.system.system')}}
+        </div>
+      </div>
+    </div>
+    <div class="content-right">
+      <el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab">
+        <el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
+          <div class="system-config-form">
+            <el-form :model="basic"  label-width="180px" size="small" ref="basicForm" :rules="basicRules">
+              <el-form-item :label="$t('config.system.basic.systemName')" prop="system_name">
+                <el-input v-model="basic.system_name"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.basic.curUrl')" prop="current_site_url">
+                <el-input v-model="basic.current_site_url"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.basic.alertApi')" prop="alert_api">
+                <el-input v-model="basic.alert_api"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.basic.assetPingSwith')" prop="asset_ping_switch">
+                <el-switch v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)"  :active-value='1' :inactive-value='0'>
+                </el-switch>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
+                <el-input v-model.number="basic.asset_ping_interval" :disabled="basic.asset_ping_switch == 0"></el-input><span class="nz-input-append">s</span>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.basic.exporterTarget')" prop="node_exporter_target_path">
+                <el-input v-model="basic.node_exporter_target_path"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="scrape_interval">
+                <el-input v-model.number="basic.scrape_interval" ></el-input><span class="nz-input-append">s</span>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.basic.storageRetention')" prop="storage_local_retention">
+                <el-input v-model.number="basic.storage_local_retention" ></el-input><span class="nz-input-append">h</span>
+              </el-form-item>
+              <el-form-item>
+                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('basicForm')" style="top:2px">{{$t('overall.reset')}}</el-button>
+                <el-button type="primary" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('config.system.email.email')" name="email">
+          <div class="system-config-form">
+            <el-form :model="email"  label-width="180px" size="small" ref="emailForm" :rules="emailRules">
+              <el-form-item :label="$t('config.system.email.smtpHost')" prop="email_smtp_host">
+                <el-input v-model="email.email_smtp_host"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.email.smtpPort')" prop="email_smtp_port">
+                <el-input v-model="email.email_smtp_port"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_smtp_account">
+                <el-input v-model="email.email_smtp_account"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.email.smtpPwd')" prop="email_smtp_password">
+                <el-input v-model="email.email_smtp_password" type="password" :show-password="false"></el-input>
+                <div><span>{{$t('config.system.email.pwdTip')}}</span></div>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.email.sendAccount')" prop="email_send_account">
+                <el-input v-model="email.email_send_account"></el-input>
+                <div><span>{{$t('config.system.email.sendAccountTip')}}</span></div>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.email.testAccount')" prop="email_test_reciver">
+                <el-input v-model="email.email_test_reciver"></el-input>
+                <div><span>{{$t('config.system.email.testAccountTip')}}</span></div>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.email.useSSL')" prop="email_ssl_flag">
+                <el-row :gutter="10">
+                  <el-col :span="5"><el-checkbox v-model="email.email_ssl_flag" :true-label="1" :false-label="0"></el-checkbox></el-col>
+                  <el-col :span="15"><div><span>{{$t('config.system.email.sslTip')}}</span></div></el-col>
+                </el-row>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.email.useTLS')" prop="email_tls_flag">
+                <el-row :gutter="10">
+                  <el-col :span="5"><el-checkbox v-model="email.email_tls_flag" :true-label="1" :false-label="0"></el-checkbox></el-col>
+                  <el-col :span="16"><span>{{$t('config.system.email.tlsTip')}}</span></el-col>
+                </el-row>
+              </el-form-item>
+              <el-form-item>
+                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('emailForm')" style="top:2px">{{$t('overall.reset')}}</el-button>
+                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
+                <el-button type="primary" @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('config.system.terminal.terminal')" name="terminal">
+          <div class="system-config-form">
+            <el-form :model="terminal"  label-width="180px" size="small" ref="terminalForm" :rules="terminalRules">
+              <el-form-item :label="$t('config.system.terminal.terminalNum')" prop="max_terminal_num">
+                <el-input v-model="terminal.max_terminal_num"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap">
+          <div class="system-config-form">
+            <el-form :model="ldap"  label-width="180px" size="small" ref="ldapForm" :rules="ldapRules">
+              <el-form-item :label="$t('config.system.ldap.address')" prop="ldap_address">
+                <el-input v-model="ldap.ldap_address"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.ldap.dn')" prop="ldap_dn">
+                <el-input v-model="ldap.ldap_dn"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.ldap.pwd')" prop="ldap_password">
+                <el-input v-model="ldap.ldap_password" type="password"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.ldap.ou')" prop="ldap_ou">
+                <el-input v-model="ldap.ldap_ou"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.ldap.filter')" prop="ldap_user_filter">
+                <el-input v-model="ldap.ldap_user_filter"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.ldap.map')" prop="ldap_mapping">
+                <el-input v-model="ldap.ldap_mapping"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
+                <el-checkbox v-model="ldap.ldap_enable" :true-label="1" :false-label="0"></el-checkbox>
+              </el-form-item>
+              <el-form-item>
+                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('ldapForm')" style="top:2px">{{$t('overall.reset')}}</el-button>
+                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
+                <el-button type="primary" @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
+          <div class="system-config-form">
+            <el-form :model="reset"  label-width="180px" size="small" ref="resetForm" :rules="resetRules">
+              <el-form-item :label="$t('config.system.reset.type')" prop="type">
+                <el-select v-model="reset.type" size="small">
+                  <el-option v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.reset.pwd')" prop="password">
+                <el-input v-model="reset.password" type="password"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" @click="resetSys()" style="top:2px">{{$t('overall.reset')}}</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+    import {positiveInteger} from '../../common/js/validate'
+    import {url} from '../../common/js/validate'
+    import {port} from '../../common/js/validate'
+
+    export default {
+        name: "system",
+        data(){
+          return {
+            basic:{
+              alert_api:'',
+              asset_ping_switch:1,//主机连通性检查开关，1：开启，0：关闭
+              asset_ping_interval:null,//检查周期，单位：s
+              node_exporter_target_path:'',
+              scrape_interval:15,
+              storage_local_retention:15*24,
+              system_name:'',
+              current_site_url:'',
+            },
+            basicRules:{
+              system_name:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+              node_exporter_target_path:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+              alert_api:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+              asset_ping_interval:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
+              scrape_interval:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
+              storage_local_retention:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
+              current_site_url:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:url,trigger:'blur'}],
+            },
+            email:{
+              email_enable: 1,
+              email_smtp_host: '',
+              email_smtp_port: 25,
+              email_smtp_account: "",
+              email_smtp_password: "",
+              email_send_account: "",
+              email_test_reciver: "",
+              email_ssl_flag: 0,
+              email_tls_flag: 0,
+            },
+            emailRules:{
+              email_smtp_host: [
+                {required:true,message:this.$t('validate.required'),trigger:'blur'},
+              ],
+              email_smtp_port: [
+                {required:true,message:this.$t('validate.required'),trigger:'blur'},
+                {validator:port,trigger:'blur'}
+              ],
+              email_smtp_account: [
+                {required:true,message:this.$t('validate.required'),trigger:'blur'},
+                { type: 'email', message: this.$t('validate.email'), trigger: 'blur' }
+              ],
+              email_send_account:[{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }],
+              email_test_reciver: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }],
+            },
+            terminal:{
+              max_terminal_num:10
+            },
+            terminalRules:{
+              max_terminal_num:[
+                {required:true,message:this.$t('validate.required'),trigger:'blur'},
+                {validator:positiveInteger,trigger:'blur'}
+              ]
+            },
+            ldap:{
+              ldap_address:'',
+              ldap_dn:'',
+              ldap_password:'',
+              ldap_ou:'',
+              ldap_user_filter:'',
+              ldap_mapping:'',
+              ldap_enable:0,
+            },
+            ldapRules:{
+              ldap_address:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+              ldap_user_filter:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+              ldap_mapping:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+
+            },
+            reset:{
+              type:'',
+              password:'',
+            },
+            resetRules:{
+              type:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+              password:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+            },
+            resetOptions:[
+              {
+                label:this.$t('config.system.reset.metric'),
+                value:'metric',
+              },
+              {
+                label:this.$t('config.system.reset.alert'),
+                value:'alert',
+              },
+              {
+                label:this.$t('config.system.reset.sysConfig'),
+                value:'sysConfig',
+              },
+            ],
+            activeTab:'basic'
+          }
+        },
+        methods:{
+          selectTab:function(tab){
+            this.querySetInfo(tab.name)
+          },
+          querySetInfo:function(type){
+            if(!type){
+              console.error('type is required')
+              return
+            }
+            if(type == 'reset'){
+              return ;
+            }
+            this.$get('sysConfig?type='+type).then(response=>{
+              if(response.code == 200){
+                let sets=response.data[type];
+                for(let key in sets){
+                  this[type][key]=sets[key];
+                }
+              }
+            })
+          },
+          saveSetInfo:function(type,formName){
+            this.$refs[formName].validate((valid) => {
+              if (valid) {
+                let param={};
+                param[type]=this[type];
+                this.$put('/sysConfig',param).then(response=>{
+                  if(response.code == 200){
+                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
+                    this.resetForm(formName);
+                    setTimeout(()=>{
+                      this.querySetInfo(type);
+                    },200)
+                  }else{
+                    this.$message.error(response.msg);
+                  }
+                })
+              }
+            });
+          },
+          resetSys:function(){
+            this.$refs['resetForm'].validate(valid=>{
+              if(valid){
+                this.$delete('/sysConfig/reset',this.reset).then(response=>{
+                  if(response.code == 200){
+                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
+                  }else{
+                    this.$message.error(response.msg);
+                  }
+                })
+              }
+            })
+          },
+          resetForm(formName){
+            this.$refs[formName].resetFields();
+            switch (formName) {
+              case 'basic':
+                this.basic.scrape_interval=15;
+                this.basic.storage_local_retention=15*24;
+                break;
+              case 'email':
+                this.email.email_smtp_port=25;
+                break;
+              case 'terminal':
+                this.terminal.max_terminal_num=10;
+                break;
+            }
+          },
+          jumpTo(data, id) {
+            this.$router.push({
+              path: "/" + data,
+              query: {
+                t: +new Date()
+              }
+            });
+          },
+        },
+        mounted() {
+          this.querySetInfo('basic')
+        }
+    }
+</script>
+
+<style scoped>
+  .system{
+    height: 100%;
+  }
+  .system-config-form{
+    width: 61.8% !important;
+    position: relative;
+  }
+</style>
+<style>
+  .system-config-form .el-form-item__content{
+    width: 512px;
+  }
+  .system-config-form .el-input{
+    width:512px
+  }
+  .system-config-form .el-input__inner{
+    height: 28px;
+    line-height: 28px;
+    width: 512px;
+  }
+</style>

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -16,7 +16,6 @@
   import loading from "../../../common/loading";
   import uuidv1 from "uuid/v1";
   import chartConfig from './chartConfig'
-  import json from "./geoJson";
   export default {
     name: "chart",
     components:{
@@ -25,6 +24,7 @@
     props:{
       chartTitle:{type:String},
       chartType:{type:String,default:'line'},
+      map:{}
     },
     data(){
       return {
@@ -107,8 +107,13 @@
         }
         this.series=series;
         if(this.chartType == 'map'){
-          echarts.registerMap('map',json);
+          if(this.map){
-          chartConfig.setMap('map');
+            echarts.registerMap(this.map.name,this.map.geoJson);
+            chartConfig.setMap(this.map.name);
+          }else{
+            console.error('map chart need map data');
+          }
+
         }
         this.option=chartConfig.getOption(this.chartType);
         this.$set(this.option,'series',this.series);

nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue

@@ -1,6 +1,5 @@
 <script>
     import chartDataFormat from "../../../charts/chartDataFormat";
-    import json from './geoJson'
     const commonOption={
       title:{
         show:false,

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

@@ -47,7 +47,7 @@
                       <table-box :pop-data="dataCenterStatData" ref="dataCenterTab" ></table-box>
                     </div>
                     <div style="flex: 3;">
-                      <chart-box chart-title="DataCenter" chart-type="map" ref="dataCenterMap"></chart-box>
+                      <chart-box chart-title="DataCenter" chart-type="map" :map="map" ref="dataCenterMap"></chart-box>
                     </div>
                   </div>
                 </div>
@@ -93,7 +93,6 @@
   import tableBox from "./tableBox";
   import chart from "./chart";
   import axios from 'axios';
-  import json from './geoJson'
   export default {
     name: "overview",
     components:{
@@ -130,6 +129,7 @@
         sysTime:'',
         sysDate:'',
         sysWeek:'',
+        map:null,
       }
     },
     created() {
@@ -144,7 +144,8 @@
         this.topNChange();
         this.queryAlertRuleStatData();
         this.queryAlertTrendData();
-        this.queryDataCenterMapData();
+        // this.queryDataCenterMapData();
+        this.queryMapChartGeoJson();
       },
       queryAssetData:function(){
         this.$refs.assetTab.startLoading();
@@ -758,6 +759,20 @@
           }
         })
       },
+      queryMapChartGeoJson:function(){
+        this.$get('/sysConfig?paramKey=geoJson').then(response=>{
+          if(response.code == 200){
+            this.map={
+              name:'Kazakhstan',
+              geoJson:response.data.paramKey
+            }
+            setTimeout(()=>{this.queryDataCenterMapData();},200)
+          }else{
+            console.error('loading map info faild')
+          }
+        })
+
+      },
       queryDataCenterMapData:function(){
         this.dataCenterMapSeries=[{
           name: 'DataCenter',
@@ -777,9 +792,9 @@
             }
           },
           data:[
-            {name:'Alabama', value: [-85.058981, 32.13674,40000.34]},
+            {name:'Astana', value: [5591, 8316,56]},
-            {name:'xxx', value: [-71.799309, 41.414677,38000]},
+            {name:'Atyrau', value: [762,6740,88]},
-            {name:'Arizona', value:[-114.470151, 32.843265,18000]},
+            {name:'Almaty', value:[6760, 5586,102]},
           ]
         }]
         this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
@@ -965,7 +980,6 @@
       this.initData();
       window.onresize = () => {
         setTimeout(()=>{this.isFullScreen=this.judgeFullScreen();},200)
-        console.log('resize')
         //解决flex排版错乱问题
         document.querySelectorAll(".content-row-box").forEach((item,index)=>{
           item.style.display = "none";

nezha-fronted/src/router/index.js

@@ -72,6 +72,10 @@ export default new Router({
           path: '/mib',
           component: resolve => require(['../components/page/config/mib.vue'], resolve),
         },
+        {
+          path: '/system',
+          component: resolve => require(['../components/page/config/system.vue'], resolve),
+        },
         {
           path: '/alertList',
           component: resolve => require(['../components/page/alert/list.vue'], resolve),