gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
1.系统设置页面校验调整
2.overview  地图图表使用接口数据
3.mib 列表调整
This commit is contained in:
wangwenrui
2020-03-31 20:08:33 +08:00
parent e3809a11dc
commit 203e977b87
7 changed files with 255 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
nezha-fronted/src/components/common/js/validate.js
View File

@@ -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){
let urlReg='';
let reg=new RegExp(urlReg)
export function domain(rule, value, callback){
let urlReg=/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
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)
}

8
nezha-fronted/src/components/common/language/en.js
View File

@@ -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',
}
}
},

22
nezha-fronted/src/components/page/config/mib.vue
View File

@@ -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">
<div style="height: 100px">
<template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
<div style="height: 100%">
<el-scrollbar style="height: 100%">
<div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" >
<el-popover trigger="hover" placement="right" >
<div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
<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>

120
nezha-fronted/src/components/page/config/system.vue
View File

@@ -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-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-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.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.curUrl')" 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-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-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-checkbox-group v-model="reset.type">
<el-checkbox v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-checkbox>
</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;
}

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

@@ -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;
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;
modifyOption:function(target,name,obj){
if(this.option){
this.option=chartConfig.getOption(this.chartType);
}
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);
this.$set(this.option[target],name,obj)
},
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)

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

@@ -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={

121
nezha-fronted/src/components/page/dashboard/overview/overview.vue
View File

@@ -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:[
{name:'Astana', value: [5591, 8316,56]},
{name:'Atyrau', value: [762,6740,88]},
{name:'Almaty', value:[6760, 5586,102]},
]
data:seriesDatas
}]
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":