fix:系统设置页面调整 & overview地图图表数据使用接口数据

1.系统设置页面校验调整
2.overview  地图图表使用接口数据
3.mib 列表调整

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

@@ -1,7 +1,7 @@
 import vm from '../../../main'
 
 export function host(rule, value, callback) {
-  const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+  const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
   setTimeout(() => {
     if (hostReg.test(value)) {
       callback()
@@ -69,14 +69,13 @@ export function positiveInteger(rule, value, callback){
   }, 100)
 }
 
-export function url(rule, value, callback){
+export function domain(rule, value, callback){
-  let urlReg='';
+  let urlReg=/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
-  let reg=new RegExp(urlReg)
   setTimeout(() => {
-    if (reg.test(value)) {
+    if (urlReg.test(value)) {
       callback()
     } else {
-      callback(new Error(vm.$t('validate.url')))
+      callback(new Error(vm.$t('validate.domain')))
     }
   }, 100)
 }

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

@@ -243,6 +243,7 @@ const en = {
     email:'Invalid email',//'不合法的E-mail地址'
     tel:'Invalid phone number',//'不合法的电话号码'
     host:'Invalid IP',//'不合法的IP'
+    domain:'Invalid domain',
     fileSize:'文件过大',//File exceed max size.
     port:'Invalid Port',
     url:'Invalid URL',
@@ -527,10 +528,11 @@ const en = {
         scrapeInterval:'Scrape Interval',
         storageRetention:'Local Retention',
         systemName:'System Name',
-        curUrl:'Current URL'
+        curUrl:'Current site URL'
       },
       email:{
         email:'Email',
+        enable:'Enable Email',
         smtpHost:'SMTP Host',
         smtpPort:'SMTP Port',
         smtpAccount:'SMTP Account',
@@ -567,6 +569,10 @@ const en = {
         metric:'metric',
         alert:'alert',
         sysConfig:'system config',
+        pwdTip:'Please input your password',
+        promptTitle:'Confirm',
+        yes:'Yes',
+        no:'No',
       }
     }
   },

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

@@ -46,11 +46,11 @@
             <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
               <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">
+            <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
-              <div style="height: 100px">
+              <div style="height: 100%">
                 <el-scrollbar style="height: 100%">
-                  <div 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" class="detail-item-content">
-                  <el-popover trigger="hover" placement="right" >
+                  <el-popover trigger="hover" placement="top" >
                     <div>
                       <div>
                         <span>{{$t('overall.name')}}:</span>
@@ -66,7 +66,8 @@
                       </div>
                     </div>
                     <template slot="reference">
-                        <div  class="detail-item-content">{{n.name}}</div>
+                      <div  class="detail-item-content" v-if="i < scope.row['modelsDetail'].length-1">{{n.name}},</div>
+                      <div  class="detail-item-content" v-else>{{n.name}}</div>
                     </template>
                   </el-popover>
                 </div>
@@ -364,14 +365,17 @@
     margin:2px 0 !important;
   }
   .mib-table td .cell{
-    min-height: 80px !important;
+    min-height: 60px !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;
+    display: inline-block;
   }
+  .mib-table.el-table td .cell{
+    height: 20px !important;
+    line-height: 20px !important;
+  }
+
 </style>

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

@@ -25,22 +25,19 @@
       <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 :model="basic"  label-width="180px" size="small" ref="basicForm" :rules="basic.asset_ping_switch == 'on'?basicRules:basicRules2" :validate-on-rule-change="false">
-              <el-form-item :label="$t('config.system.basic.systemName')" prop="system_name">
+<!--              <el-form-item :label="$t('config.system.basic.curUrl')" prop="current_site_url">-->
-                <el-input v-model="basic.system_name"></el-input>
+<!--                <el-input v-model="basic.current_site_url"></el-input>-->
-              </el-form-item>
+<!--              </el-form-item>-->
-              <el-form-item :label="$t('config.system.basic.curUrl')" prop="current_site_url">
+              <el-form-item :label="$t('config.system.basic.curUrl')" prop="alert_api">
-                <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 v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)"  active-value='on' inactive-value='off'>
                 </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-input v-model.number="basic.asset_ping_interval" :disabled="basic.asset_ping_switch == 'off'"></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>
@@ -60,43 +57,46 @@
         </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 :model="email"  label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
+              <el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
+                <el-checkbox v-model="email.email_enable" true-label="on" false-label="off"></el-checkbox>
+              </el-form-item>
               <el-form-item :label="$t('config.system.email.smtpHost')" prop="email_smtp_host">
-                <el-input v-model="email.email_smtp_host"></el-input>
+                <el-input v-model="email.email_smtp_host" :disabled="email.email_enable == 'off'"></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-input v-model.number="email.email_smtp_port" :disabled="email.email_enable == 'off'"></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-input v-model="email.email_smtp_account" :disabled="email.email_enable == 'off'"></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>
+                <el-input v-model="email.email_smtp_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'"></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>
+                <el-input v-model="email.email_send_account" :disabled="email.email_enable == 'off'"></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>
+                <el-input v-model="email.email_test_reciver" :disabled="email.email_enable == 'off'"></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="5"><el-checkbox v-model="email.email_ssl_flag" true-label="on" false-label="off" :disabled="email.email_enable == 'off'"></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="5"><el-checkbox v-model="email.email_tls_flag" true-label='on' false-label='off' :disabled="email.email_enable == 'off'"></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 class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="testSetInfo('email','emailForm')" 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>
@@ -106,7 +106,7 @@
           <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-input v-model.number="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>
@@ -116,7 +116,7 @@
         </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 :model="ldap"  label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false">
               <el-form-item :label="$t('config.system.ldap.address')" prop="ldap_address">
                 <el-input v-model="ldap.ldap_address"></el-input>
               </el-form-item>
@@ -136,11 +136,11 @@
                 <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-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off'></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 class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="testSetInfo('ldap','ldapForm')" 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>
@@ -148,14 +148,14 @@
         </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 :model="reset"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false">
               <el-form-item :label="$t('config.system.reset.type')" prop="type">
-                <el-select v-model="reset.type" size="small">
+<!--                <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-option v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-option>-->
-                </el-select>
+<!--                </el-select>-->
-              </el-form-item>
+                <el-checkbox-group v-model="reset.type">
-              <el-form-item :label="$t('config.system.reset.pwd')" prop="password">
+                  <el-checkbox v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-checkbox>
-                <el-input v-model="reset.password" type="password"></el-input>
+                </el-checkbox-group>
               </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>
@@ -170,16 +170,18 @@
 
 <script>
     import {positiveInteger} from '../../common/js/validate'
-    import {url} from '../../common/js/validate'
     import {port} from '../../common/js/validate'
+    import {domain} from '../../common/js/validate'
+    import {host} from '../../common/js/validate'
 
     export default {
         name: "system",
         data(){
+
           return {
             basic:{
               alert_api:'',
-              asset_ping_switch:1,//主机连通性检查开关，1：开启，0：关闭
+              asset_ping_switch:'on',//主机连通性检查开关，'on'：开启，off：关闭
               asset_ping_interval:null,//检查周期，单位：s
               node_exporter_target_path:'',
               scrape_interval:15,
@@ -188,16 +190,20 @@
               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'},],
+              alert_api:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:host,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'}],
+            },
+            basicRules2:{
+              node_exporter_target_path:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+              alert_api:[{required:true,message:this.$t('validate.required'),trigger:'blur'},,{validator:host,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'}],
             },
             email:{
-              email_enable: 1,
+              email_enable: 'on',
               email_smtp_host: '',
               email_smtp_port: 25,
               email_smtp_account: "",
@@ -210,6 +216,7 @@
             emailRules:{
               email_smtp_host: [
                 {required:true,message:this.$t('validate.required'),trigger:'blur'},
+                {validator:domain,trigger: 'blur'}
               ],
               email_smtp_port: [
                 {required:true,message:this.$t('validate.required'),trigger:'blur'},
@@ -238,16 +245,15 @@
               ldap_ou:'',
               ldap_user_filter:'',
               ldap_mapping:'',
-              ldap_enable:0,
+              ldap_enable:'off',
             },
             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:'',
+              type:[],
               password:'',
             },
             resetRules:{
@@ -297,6 +303,25 @@
               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.saveSuccess")});
+                    this.resetForm(formName);
+                    setTimeout(()=>{
+                      this.querySetInfo(type);
+                    },200)
+                  }else{
+                    this.$message.error(response.msg);
+                  }
+                })
+              }
+            });
+          },
+          testSetInfo:function(type,formName){
+            this.$refs[formName].validate((valid) => {
+              if (valid) {
+                let param={test:true};
+                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")});
@@ -312,6 +337,12 @@
             });
           },
           resetSys:function(){
+            this.$prompt(this.$t('config.system.reset.pwdTip'), this.$t('config.system.reset.promptTitle'), {
+              confirmButtonText: this.$t('config.system.reset.yes'),
+              cancelButtonText: this.$t('config.system.reset.no'),
+              inputType:'password',
+            }).then(({ value }) => {
+              this.reset.password=value
               this.$refs['resetForm'].validate(valid=>{
                 if(valid){
                   this.$delete('/sysConfig/reset',this.reset).then(response=>{
@@ -323,18 +354,21 @@
                   })
                 }
               })
+            }).catch(() => {
+
+            });
           },
           resetForm(formName){
             this.$refs[formName].resetFields();
             switch (formName) {
-              case 'basic':
+              case 'basicForm':
                 this.basic.scrape_interval=15;
                 this.basic.storage_local_retention=15*24;
                 break;
-              case 'email':
+              case 'emailForm':
                 this.email.email_smtp_port=25;
                 break;
-              case 'terminal':
+              case 'terminalForm':
                 this.terminal.max_terminal_num=10;
                 break;
             }

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

@@ -37,69 +37,12 @@
 
     },
     methods:{
-      tooltipPosition:function(point,params,dom,rect,size){
-        dom.style.transform = "translateZ(0)";
-        //提示框位置
-        var x=0;
-        var y=0;
-        //当前鼠标位置
-        var pointX = point[0];
-        var pointY = point[1];
-        //外层div大小
-        var viewWidth = size.viewSize[0];
-        var viewHeight = size.viewSize[1];
-        //提示框大小
-        var boxWidth = size.contentSize[0];
-        var boxHeight = size.contentSize[1];
-        let chartDom = document.getElementById(this.chartId);
-        if(chartDom){
-          let parTop = chartDom.offsetTop;
-          let parLeft = chartDom.offsetLeft;
 
-          let parent = chartDom.parentElement;
+      modifyOption:function(target,name,obj){
-          let parClientHeight = parent.clientHeight;//可视高度
+        if(this.option){
-          let parClientWidth = parent.clientWidth;//可视宽度
+          this.option=chartConfig.getOption(this.chartType);
-          let parScrollTop = parent.scrollTop;
-          if((parClientWidth-pointX-parLeft-20)>=boxWidth){//说明鼠标在左边放不下提示框
-            x=pointX+10;
-          }else{
-            x = pointX - boxWidth;
         }
-          if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
+        this.$set(this.option[target],name,obj)
-            y = pointY+10;
-          }else {
-            y = pointY-boxHeight;
-          }
-          return [x,y];
-        }else {
-          x = pointX - boxWidth;
-          y = pointY+10;
-          return [x,y];
-        }
-      },
-      tooltipFormatter:function(params){
-        let str = `<div>`;
-        params.forEach((item, i) => {
-          if(i===0){
-            let t_date = new Date(item.data[0]);
-            str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-              + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-            str +=`<br/>`;
-          }
-          let val = Number(item.data[1]);
-          str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-          str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${item.seriesName}:  </div>`;
-          str += `<div style="padding-left: 10px;">`;
-          str += chartDataFormat.getUnit(5).compute(val,null,2);
-          str += `</div>`;
-          str += `</div>`;
-        });
-        str +=`</div>`;
-        return str;
-      },
-      yAxisFormatter:function(value,index){
-        let unit=chartDataFormat.getUnit(5);
-        return unit.compute(value,index);
       },
       setSeries:function(series){
         if(!this.chart){
@@ -115,13 +58,15 @@
           }
 
         }
+        if(this.option){
           this.option=chartConfig.getOption(this.chartType);
+        }
         this.$set(this.option,'series',this.series);
-        if(this.chartType == 'line'){
+        /*if(this.chartType == 'line'){
           this.$set(this.option.tooltip,'formatter',this.tooltipFormatter);
           this.$set(this.option.tooltip,'position',this.tooltipPosition);
           this.$set(this.option.yAxis,'formatter',this.yAxisFormatter);
-        }
+        }*/
 
         this.chart.clear();
         this.chart.setOption(this.option)

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

@@ -99,15 +99,6 @@
         borderRadius: 4,
         borderWidth: 1,
         padding: 0,
-        formatter(params){
-          var color = "orange";
-          var a = "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + params.data.name + "</div>";
-          a += "<div style='padding:3px;text-align: center'>";
-          a +=params.data.value[2] + "<br>";
-          a += "</div>";
-
-          return a;
-        }
       },
     }
     const chartTypes={

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

@@ -93,6 +93,7 @@
   import tableBox from "./tableBox";
   import chart from "./chart";
   import axios from 'axios';
+  import chartDataFormat from "../../../charts/chartDataFormat";
   export default {
     name: "overview",
     components:{
@@ -751,6 +752,9 @@
                 return [item[0]*1000,item[1]];
               })
               this.chartSeries=[series];
+              this.$refs.chartbox.modifyOption('tooltip','formatter',this.tooltipFormatter);
+              this.$refs.chartbox.modifyOption('tooltip','position',this.tooltipPosition);
+              this.$refs.chartbox.modifyOption('yAxis','formatter',this.yAxisFormatter);
               this.$refs.chartbox.setSeries(this.chartSeries);
               this.$refs.chartbox.endLoading();
             }
@@ -774,6 +778,39 @@
 
       },
       queryDataCenterMapData:function(){
+        let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
+        let requests=[axios.get('/idc?pageSize=-1'),axios.get('/overview/datacenterStat')];
+        axios.all(requests).then((result)=>{
+          if(result){
+            let seriesDatas=[];
+            this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
+            let idcInfos=null;
+            let dcStats=null;
+            if(result[0].data && result[0].data.code == 200){
+              idcInfos=result[0].data.data.list;
+            }
+            if(result[1].data && result[1].data.code == 200){
+              dcStats=result[1].data.data.dcStat;
+            }
+            if(idcInfos && dcStats){
+              for(let dcStat of dcStats){
+                let dcId=dcStat.id;
+                let dcInfo=idcInfos.find((item)=>{
+                  return item.id == dcId ;
+                })
+                let areaInfo=dcInfo.area;
+                if(areaInfo){
+                  let areaName='';
+                  if(areaInfo.i18n){
+                    areaName=JSON.parse(areaInfo.i18n)[language];
+                  }else{
+                    areaName=areaInfo.name;
+                  }
+                  seriesDatas.push({name:areaName,value:[areaInfo.longitude,areaInfo.latitude,dcStat.assetTotal,dcStat.alertTotal]})
+                }
+              }
+            }
+            this.$refs.dataCenterMap.modifyOption('tooltip','formatter',this.mapTooltipFormatter)
             this.dataCenterMapSeries=[{
               name: 'DataCenter',
               type: 'scatter',
@@ -784,22 +821,94 @@
                 show: false
               },
               itemStyle: {
-            color: 'grey'
+                color: 'orange'
               },
               emphasis: {
                 label: {
                   show: true
                 }
               },
-          data:[
+              data:seriesDatas
-            {name:'Astana', value: [5591, 8316,56]},
-            {name:'Atyrau', value: [762,6740,88]},
-            {name:'Almaty', value:[6760, 5586,102]},
-          ]
             }]
             this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
+          }
+        })
       },
       /*加载数据 end*/
+      mapTooltipFormatter(params){
+        var color = "orange";
+        var a = "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + params.data.name + "</div>";
+        a += "<div style='padding:3px;text-align: center'>";
+        a +=this.$t('dashboard.overview.asset.title')+': '+params.data.value[2] + "<br>";
+        a +=this.$t('dashboard.overview.asset.alert')+': '+params.data.value[3] + "<br>";
+        a += "</div>";
+
+        return a;
+      },
+      tooltipPosition:function(point,params,dom,rect,size){
+        dom.style.transform = "translateZ(0)";
+        //提示框位置
+        var x=0;
+        var y=0;
+        //当前鼠标位置
+        var pointX = point[0];
+        var pointY = point[1];
+        //外层div大小
+        var viewWidth = size.viewSize[0];
+        var viewHeight = size.viewSize[1];
+        //提示框大小
+        var boxWidth = size.contentSize[0];
+        var boxHeight = size.contentSize[1];
+        let chartDom = document.getElementById(this.chartId);
+        if(chartDom){
+          let parTop = chartDom.offsetTop;
+          let parLeft = chartDom.offsetLeft;
+
+          let parent = chartDom.parentElement;
+          let parClientHeight = parent.clientHeight;//可视高度
+          let parClientWidth = parent.clientWidth;//可视宽度
+          let parScrollTop = parent.scrollTop;
+          if((parClientWidth-pointX-parLeft-20)>=boxWidth){//说明鼠标在左边放不下提示框
+            x=pointX+10;
+          }else{
+            x = pointX - boxWidth;
+          }
+          if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
+            y = pointY+10;
+          }else {
+            y = pointY-boxHeight;
+          }
+          return [x,y];
+        }else {
+          x = pointX - boxWidth;
+          y = pointY+10;
+          return [x,y];
+        }
+      },
+      tooltipFormatter:function(params){
+        let str = `<div>`;
+        params.forEach((item, i) => {
+          if(i===0){
+            let t_date = new Date(item.data[0]);
+            str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+              + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
+            str +=`<br/>`;
+          }
+          let val = Number(item.data[1]);
+          str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
+          str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${item.seriesName}:  </div>`;
+          str += `<div style="padding-left: 10px;">`;
+          str += chartDataFormat.getUnit(5).compute(val,null,2);
+          str += `</div>`;
+          str += `</div>`;
+        });
+        str +=`</div>`;
+        return str;
+      },
+      yAxisFormatter:function(value,index){
+        let unit=chartDataFormat.getUnit(5);
+        return unit.compute(value,index);
+      },
       getAssetTabTitle:function(){
         switch (this.typeFilter) {
           case "typeStat":