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

fix:处理系统时区

Browse Source
This commit is contained in:
wangwenrui
2020-10-16 19:26:50 +08:00
parent dff9bd4f02
commit 5efaa21baf
16 changed files with 492 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/components/common/alert/alertMessageTable.vue
View File

@@ -84,6 +84,8 @@
<span v-if="scope.row[item.prop] == 'P3'" class="P3">P3</span> <span v-if="scope.row[item.prop] == 'P3'" class="P3">P3</span>
<!--<i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}--> <!--<i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}-->
</span> </span>
<span v-else-if="item.prop == 'startAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<span v-else-if="item.prop == 'endAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<template v-else-if="item.prop == 'labels'" class="labels"> <template v-else-if="item.prop == 'labels'" class="labels">
<span v-for="(item,i) in labelsSort(scope.row.labels)"> <span v-for="(item,i) in labelsSort(scope.row.labels)">
<span <span
@@ -231,6 +233,7 @@
'alertRuleInfo':alertRuleInfo, 'alertRuleInfo':alertRuleInfo,
'alertLabel':alertLabel, 'alertLabel':alertLabel,
}, },
mixins:[bus],
props:{ props:{
tableData:{}, tableData:{},
loading:{}, loading:{},

3
nezha-fronted/src/components/common/alert/alertRuleInfo.vue
View File

@@ -11,8 +11,7 @@
<!--</div>--> <!--</div>-->
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">Expression</div> <div class="alert-rule-title">Expression</div>
<div class="alert-rule-value" v-if="alertRuleData.buildIn!==1">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):'-'}}</div> <div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
<div class="alert-rule-value" v-if="alertRuleData.buildIn===1">-</div>
</div> </div>
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">Level</div> <div class="alert-rule-title">Level</div>

4
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -476,8 +476,8 @@
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
if(this.searchTime&& this.searchTime.length>1){ if(this.searchTime&& this.searchTime.length>1){
this.$set(this.searchLabel, "startAt", bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')); this.$set(this.searchLabel, "startAt", this.timezoneToUtcTimeStr(this.searchTime[0]));
this.$set(this.searchLabel, "endAt", bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')); this.$set(this.searchLabel, "endAt", this.timezoneToUtcTimeStr(this.searchTime[1]));
}else{ }else{
delete this.searchLabel.startAt delete this.searchLabel.startAt
delete this.searchLabel.endAt delete this.searchLabel.endAt

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

@@ -887,6 +887,17 @@ const cn = {
requiredName:'名称不能为空' requiredName:'名称不能为空'
}, },
}, },
date:{
week:{
one:'星期一',
two:'星期二',
three:'星期三',
four:'星期四',
five:'星期五',
six:'星期六',
seven:'星期日',
}
},
el: { el: {
colorpicker: { colorpicker: {
confirm: "确定", confirm: "确定",

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

@@ -894,6 +894,17 @@ const en = {
requiredName:'The name of the required' requiredName:'The name of the required'
}, },
}, },
date:{
week:{
one:'MON',
two:'TUE',
three:'WED',
four:'THU',
five:'FRI',
six:'SAT',
seven:'SUN',
}
},
...enLocale ...enLocale
} }

4
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -334,8 +334,8 @@
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
if(this.searchTime&& this.searchTime.length>1){ if(this.searchTime&& this.searchTime.length>1){
this.$set(this.searchLabel, "startAt", bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')); this.$set(this.searchLabel, "startAt", this.timezoneToUtcTimeStr(this.searchTime[0]));
this.$set(this.searchLabel, "endAt", bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')); this.$set(this.searchLabel, "endAt", this.timezoneToUtcTimeStr(this.searchTime[1]));
}else{ }else{
delete this.searchLabel.startAt delete this.searchLabel.startAt
delete this.searchLabel.endAt delete this.searchLabel.endAt

2
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -628,7 +628,7 @@
} }
let ds='-'; let ds='-';
let ts=':'; let ts=':';
let time=new Date(str); let time=new Date(bus.UTCTimeToConfigTimezone(str));
let year=time.getFullYear(); let year=time.getFullYear();
let month=time.getMonth()+1 > 9 ? time.getMonth()+1 : ('0'+(time.getMonth()+1)); let month=time.getMonth()+1 > 9 ? time.getMonth()+1 : ('0'+(time.getMonth()+1));
let day=time.getDate() > 9 ? time.getDate():('0'+time.getDate()); let day=time.getDate() > 9 ? time.getDate():('0'+time.getDate());

1
nezha-fronted/src/components/page/config/account.vue
View File

@@ -79,6 +79,7 @@
@change="(val)=>{statusChange(scope.row)}"> @change="(val)=>{statusChange(scope.row)}">
</el-switch> </el-switch>
</span> </span>
<span v-else-if="item.prop == 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<span v-else>{{scope.row[item.prop]}}</span> <span v-else>{{scope.row[item.prop]}}</span>
</template> </template>
</el-table-column> </el-table-column>

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

@@ -73,6 +73,7 @@
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
<span v-else-if="item.prop == 'updateAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<div v-else-if="item.prop == 'option'" class="content-right-options"> <div v-else-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.download')" @click="downloadMib(scope.row)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="nz-icon nz-icon-download1"></i></span> <span :title="$t('overall.download')" @click="downloadMib(scope.row)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="nz-icon nz-icon-download1"></i></span>
&nbsp; &nbsp;

1
nezha-fronted/src/components/page/config/operationlog.vue
View File

@@ -50,6 +50,7 @@
<span v-if="item.prop == 'time'"> <span v-if="item.prop == 'time'">
{{scope.row[item.prop]}} ms {{scope.row[item.prop]}} ms
</span> </span>
<span v-else-if="item.prop == 'createDate'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<span v-else>{{scope.row[item.prop]}}</span> <span v-else>{{scope.row[item.prop]}}</span>
</template> </template>
</el-table-column> </el-table-column>

3
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -48,8 +48,9 @@
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}--> {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}-->
{{findServerType(scope.row[item.prop]).text}} {{findServerType(scope.row[item.prop]).text}}
</span> </span>
<span v-else-if="item.prop == 'checkTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<span v-else-if="item.prop == 'status'"> <span v-else-if="item.prop == 'status'">
<el-popover placement="right" width="200" trigger="hover" :content="$t('asset.assetStatPre')+(scope.row.checkTime?scope.row.checkTime:$t('asset.assetStatDown'))"> <el-popover placement="right" width="200" trigger="hover" :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))">
<div slot="reference" style="width: 20px"> <div slot="reference" style="width: 20px">
<div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div> <div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
</div> </div>

3
nezha-fronted/src/components/page/config/terminallog.vue
View File

@@ -51,6 +51,7 @@
{{scope.row[item.prop] == 'zh' ? '中文' : ''}} {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
{{scope.row[item.prop] == 'ru' ? 'русский' : ''}} {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
</span> </span>
<span v-else-if="item.prop == 'time'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<template v-else-if="item.prop == 'status'"> <template v-else-if="item.prop == 'status'">
<span>{{scope.row.status==='1' ? $t("config.terminallog.success") : $t("config.terminallog.fail")}}</span> <span>{{scope.row.status==='1' ? $t("config.terminallog.success") : $t("config.terminallog.fail")}}</span>
</template> </template>
@@ -92,7 +93,7 @@
show: false, show: false,
isEdit: false, //false查看，true编辑 isEdit: false, //false查看，true编辑
title: '' title: ''
}, },
rightBoxResize: { //resize弹出框相关 rightBoxResize: { //resize弹出框相关
show: false, show: false,

11
nezha-fronted/src/components/page/dashboard/overview/overview2.scss
View File

@@ -356,4 +356,13 @@
top: 50%; top: 50%;
transform: translate(100%, -50%); transform: translate(100%, -50%);
} }
.overview-loading{
width: 35px;
height: 35px;
position: relative;
}
.overview-loading .el-loading-spinner{
transform: scale(0.5);
top: -5px;
left: 0px;
}

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

@@ -3,6 +3,7 @@
<!--标题--> <!--标题-->
<div class="overview-content-header"> <div class="overview-content-header">
<div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div> <div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
<div class="overview-loading"><loading ref="overviewLoading" ></loading></div>
<div class="header-tool"> <div class="header-tool">
<div class="tool-container"> <div class="tool-container">
<div class="time">{{sysTime}}</div> <div class="time">{{sysTime}}</div>
@@ -187,7 +188,7 @@
<script> <script>
import chart from "./chart"; import chart from "./chart";
import chartDataFormat from "../../../charts/chartDataFormat"; import i18n from '../../../../components/common/i18n'
import axios from 'axios'; import axios from 'axios';
import bus from '../../../../libs/bus'; import bus from '../../../../libs/bus';
import timePicker from '../../../common/timePicker'; import timePicker from '../../../common/timePicker';
@@ -257,6 +258,9 @@
asset: 10, asset: 10,
module: 10 module: 10
}, },
system_server_time:null,
freshDateTimer:null,
freshDataTimer:null
} }
}, },
filters: { filters: {
@@ -299,240 +303,290 @@
methods: { methods: {
/*初始化数据 start*/ /*初始化数据 start*/
initData() { initData() {
this.queryAssetData(); return [
this.queryProjectData(); this.querySystemState(),
this.queryModuleData(); this.queryAssetData(),
this.queryEndpointData(); this.queryProjectData(),
this.queryAlertMessageData(); this.queryModuleData(),
this.queryAlertRuleData(); this.queryEndpointData(),
this.queryAlertTrendData(); this.queryAlertMessageData(),
// this.queryMapChartGeoJson(); this.queryAlertRuleData(),
this.initMap(); this.queryAlertTrendData(),
this.queryAlertStatByRule(); // this.queryMapChartGeoJson();
this.queryAlertStatByAsset(); this.initMap(),
this.getDcTrafficData(); this.queryAlertStatByRule(),
this.queryAlertStatByAsset(),
this.getDcTrafficData()
]
},
setFreshDataTimer:function(){
this.freshDataTimer=setInterval(()=>{
if(this.$refs.overviewLoading){
this.$refs.overviewLoading.startLoading();
}
Promise.all(this.initData()).then(()=>{
if(this.$refs.overviewLoading){
this.$refs.overviewLoading.endLoading();
}
})
},60*1000)
},
querySystemState:function(){
return new Promise(resolve => {
this.$get('/healthy').then(response=>{
if(response.code==200){
this.system_server_time=this.utcTimeToTimezone(response.time)
}else{
this.system_server_time=bus.computeTimezone(new Date().getTime())
}
resolve();
})
})
}, },
queryAssetData() { queryAssetData() {
this.assetLoading = true; return new Promise(resolve => {
this.$refs.assetTypePie.startLoading(); this.assetLoading = true;
this.$get('overview/assetStat').then(response => { this.$refs.assetTypePie.startLoading();
this.assetLoading = false; this.$get('overview/assetStat').then(response => {
if (response.code === 200) { this.assetLoading = false;
this.assetData = response.data; if (response.code === 200) {
this.assetData = response.data;
/*饼图*/ /*饼图*/
let legendData = []; let legendData = [];
let typeSeriesData = []; let typeSeriesData = [];
let vm = this; let vm = this;
let assetTotalCount = function() { let assetTotalCount = function() {
let count = 0; let count = 0;
vm.assetData.typeStat.forEach(item => { vm.assetData.typeStat.forEach(item => {
count += item.total; count += item.total;
});
return count;
}();
this.assetData.typeStat.forEach(item => {
legendData.push([item.name, (item.total*100/assetTotalCount).toFixed(2)]);
typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown});
}); });
return count; let series = [{
}(); name: 'Type',
data: typeSeriesData.sort((a, b) => {return a.value > b.value ? -1 : 1}),
this.assetData.typeStat.forEach(item => { type: 'pie',
legendData.push([item.name, (item.total*100/assetTotalCount).toFixed(2)]); radius: ["43%", "55%"],
typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown}); center: ["40%", "50%"],
}); minAngle: 15,
let series = [{ itemStyle: {
name: 'Type', borderColor: "#fff",
data: typeSeriesData.sort((a, b) => {return a.value > b.value ? -1 : 1}), borderWidth: 1,
type: 'pie', },
radius: ["43%", "55%"], label: {show: false},
center: ["40%", "50%"], tooltip: {
minAngle: 15, backgroundColor: "rgba(255, 255, 255, 0.66)",
itemStyle: { extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
borderColor: "#fff", textStyle: {color: "#333333"},
borderWidth: 1, renderMode: 'html',
}, formatter: function(params) {
label: {show: false}, return `
tooltip: {
backgroundColor: "rgba(255, 255, 255, 0.66)",
extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
textStyle: {color: "#333333"},
renderMode: 'html',
formatter: function(params) {
return `
<div class="overview-tooltip-box"> <div class="overview-tooltip-box">
<div class="tooltip-item"><div class="item-status red"></div>${params.data.down}</div> <div class="tooltip-item"><div class="item-status red"></div>${params.data.down}</div>
<div class="tooltip-item"><div class="item-status green"></div>${params.data.up}</div> <div class="tooltip-item"><div class="item-status green"></div>${params.data.up}</div>
</div>`; </div>`;
}
},
label: {
normal: {
show: false,
position: 'center',
formatter: function(param){ // 设置圆饼图中间文字排版
return ['{name|' + param.name + '}',
'{percent|(' + param.percent + '%)}']
.join("\n");
},
rich: {
name: {
textAlign: 'center',
color: "#333",
fontSize: 19,
padding: 10
},
percent: {
textAlign: 'center',
color: "#333",
fontSize: 12,
padding: 10
}
} }
}, },
emphasis: { label: {
show: true, //文字至于中间时，这里需为true normal: {
show: false,
position: 'center',
formatter: function(param){ // 设置圆饼图中间文字排版
return ['{name|' + param.name + '}',
'{percent|(' + param.percent + '%)}']
.join("\n");
},
rich: {
name: {
textAlign: 'center',
color: "#333",
fontSize: 19,
padding: 10
},
percent: {
textAlign: 'center',
color: "#333",
fontSize: 12,
padding: 10
}
}
},
emphasis: {
show: true, //文字至于中间时，这里需为true
},
}, },
}, }];
}]; let legend = {
let legend = { show: true,
show: true, orient: "vertical",
orient: "vertical", top: "30%",
top: "30%", right: 25,
right: 25, icon: "circle",
icon: "circle", };
}; this.$refs.assetTypePie.setSeries(series, legend, legendData);
this.$refs.assetTypePie.setSeries(series, legend, legendData); this.$refs.assetTypePie.endLoading();
this.$refs.assetTypePie.endLoading(); }
} resolve()
})
}) })
}, },
queryProjectData() { queryProjectData() {
this.projectLoading = true; return new Promise(resolve => {
this.$get('overview/projectStat').then(response => { this.projectLoading = true;
this.projectLoading = false; this.$get('overview/projectStat').then(response => {
if (response.code === 200) { this.projectLoading = false;
this.projectData = response.data; if (response.code === 200) {
} this.projectData = response.data;
}
resolve();
})
}) })
}, },
queryModuleData() { queryModuleData() {
this.moduleLoading = true; return new Promise(resolve => {
this.$get('overview/moduleStat').then(response => { this.moduleLoading = true;
this.moduleLoading = false; this.$get('overview/moduleStat').then(response => {
if (response.code === 200) { this.moduleLoading = false;
this.moduleData = response.data; if (response.code === 200) {
} this.moduleData = response.data;
}
resolve();
})
}) })
}, },
queryEndpointData() { queryEndpointData() {
this.endpointLoading = true; return new Promise(resolve => {
this.$get('overview/endpointStat').then(response => { this.endpointLoading = true;
this.endpointLoading = false; this.$get('overview/endpointStat').then(response => {
if (response.code === 200) { this.endpointLoading = false;
this.endpointData = response.data; if (response.code === 200) {
} this.endpointData = response.data;
}
resolve();
})
}) })
}, },
queryAlertMessageData() { queryAlertMessageData() {
this.alertMessageLoading = true; return new Promise(resolve => {
this.$get('overview/alertMessageStat').then(response => { this.alertMessageLoading = true;
this.alertMessageLoading = false; this.$get('overview/alertMessageStat').then(response => {
if (response.code === 200) { this.alertMessageLoading = false;
this.alertMessageData = response.data; if (response.code === 200) {
} this.alertMessageData = response.data;
}
resolve();
})
}) })
}, },
queryAlertRuleData() { queryAlertRuleData() {
this.$get('overview/alertRuleStat').then(response => { return new Promise(resolve => {
if (response.code === 200) { this.$get('overview/alertRuleStat').then(response => {
this.alertRuleData = response.data; if (response.code === 200) {
} this.alertRuleData = response.data;
}
resolve();
})
}) })
}, },
queryAlertTrendData() { queryAlertTrendData() {
this.$refs.chartbox.startLoading(); return new Promise(res => {
this.chartSeries = [];
let rxPromise = new Promise((resolve, reject) => { this.$refs.chartbox.startLoading();
this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response=>{ this.chartSeries = [];
if(response.status == 'success'){ let rxPromise = new Promise((resolve, reject) => {
if(response.data.result){ this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response=>{
let series={ if(response.status == 'success'){
name: 'RX', if(response.data.result){
symbol:'none', //去掉点 let series={
smooth:0.2, //曲线变平滑 name: 'RX',
data: [], symbol:'none', //去掉点
type:'line', smooth:0.2, //曲线变平滑
lineStyle: { data: [],
width: 1, type:'line',
opacity: 0.9 lineStyle: {
}, width: 1,
}; opacity: 0.9
if (response.data.result.length > 0) { },
series.data=response.data.result[0].values.map((item)=>{ };
return [item[0]*1000,item[1]]; if (response.data.result.length > 0) {
}); series.data=response.data.result[0].values.map((item)=>{
} return [item[0]*1000,item[1]];
this.chartSeries.push(series); });
if (this.chartSeries.length == 2) { }
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)"); this.chartSeries.push(series);
this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);"); if (this.chartSeries.length == 2) {
this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"}); this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
this.$refs.chartbox.modifyOption("grid", "top", 40); this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
this.$refs.chartbox.modifyOption("grid", "left", 10); this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.chartbox.modifyOption("grid", "right", 40); this.$refs.chartbox.modifyOption("grid", "top", 40);
this.$refs.chartbox.modifyOption("grid", "bottom", 18); this.$refs.chartbox.modifyOption("grid", "left", 10);
this.$refs.chartbox.modifyOption("grid", "containLabel", true); this.$refs.chartbox.modifyOption("grid", "right", 40);
this.$refs.chartbox.setSeries(this.chartSeries); this.$refs.chartbox.modifyOption("grid", "bottom", 18);
this.$refs.chartbox.modifyOption("grid", "containLabel", true);
this.$refs.chartbox.setSeries(this.chartSeries);
}
} }
resolve(true);
}else{
console.error(response);
resolve(false);
} }
resolve(true); });
}else{
console.error(response);
resolve(false);
}
}); });
}); let txPromise = new Promise((resolve, reject) => {
let txPromise = new Promise((resolve, reject) => { this.$get('/prom/api/v1/query_range', this.trendParamHandle('tx')).then(response=>{
this.$get('/prom/api/v1/query_range', this.trendParamHandle('tx')).then(response=>{ if(response.status == 'success'){
if(response.status == 'success'){ if(response.data.result){
if(response.data.result){ let series={
let series={ name: 'TX',
name: 'TX', symbol:'none', //去掉点
symbol:'none', //去掉点 smooth:0.2, //曲线变平滑
smooth:0.2, //曲线变平滑 data: [],
data: [], type:'line',
type:'line', lineStyle: {
lineStyle: { width: 1,
width: 1, opacity: 0.9
opacity: 0.9 },
}, };
}; if (response.data.result.length > 0) {
if (response.data.result.length > 0) { series.data=response.data.result[0].values.map((item)=>{
series.data=response.data.result[0].values.map((item)=>{ return [item[0]*1000,item[1]];
return [item[0]*1000,item[1]]; });
}); }
} this.chartSeries.push(series);
this.chartSeries.push(series); if (this.chartSeries.length == 2) {
if (this.chartSeries.length == 2) { this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)"); this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);"); this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"}); this.$refs.chartbox.modifyOption("grid", "top", 40);
this.$refs.chartbox.modifyOption("grid", "top", 40); this.$refs.chartbox.modifyOption("grid", "left", 10);
this.$refs.chartbox.modifyOption("grid", "left", 10); this.$refs.chartbox.modifyOption("grid", "right", 40);
this.$refs.chartbox.modifyOption("grid", "right", 40); this.$refs.chartbox.modifyOption("grid", "bottom", 18);
this.$refs.chartbox.modifyOption("grid", "bottom", 18); this.$refs.chartbox.setSeries(this.chartSeries);
this.$refs.chartbox.setSeries(this.chartSeries); }
} }
resolve(true);
}else{
console.error(response)
resolve(false);
} }
resolve(true); });
}else{
console.error(response)
resolve(false);
}
}); });
}); Promise.all([rxPromise, txPromise]).then(resolve => {
Promise.all([rxPromise, txPromise]).then(resolve => { this.$refs.chartbox.endLoading();
this.$refs.chartbox.endLoading(); res()
}, reject => { }, reject => {
this.$refs.chartbox.endLoading(); this.$refs.chartbox.endLoading();
}); res()
});
})
}, },
trendParamHandle(t) { trendParamHandle(t) {
let before; let before;
@@ -667,11 +721,13 @@
return params; return params;
}, },
initMap() { initMap() {
let loadPromise;
this.loadMapConfig().then((mapConfig)=>{ this.loadMapConfig().then((mapConfig)=>{
if(mapConfig&&this.map){ if(mapConfig&&this.map){
this.loadDataCenterMapData() loadPromise=this.loadDataCenterMapData()
} }
}) })
return loadPromise;
}, },
loadMapConfig:function(){ loadMapConfig:function(){
return new Promise(resolve => { return new Promise(resolve => {
@@ -685,8 +741,8 @@
if(response.code == 200){ if(response.code == 200){
let mapConfig=JSON.parse(response.data.paramKey.map_center_config); let mapConfig=JSON.parse(response.data.paramKey.map_center_config);
let map = L.map("map",{ let map = L.map("map",{
minZoom:2, minZoom:mapConfig.minZoom,
maxZoom:7, maxZoom:mapConfig.maxZoom,
attributionControl:false, attributionControl:false,
zoomControl:false, zoomControl:false,
}).setView([mapConfig.longitude,mapConfig.latitude],mapConfig.zoom); }).setView([mapConfig.longitude,mapConfig.latitude],mapConfig.zoom);
@@ -744,9 +800,11 @@
setTimeout(()=>{this.queryDataCenterMapData();},1500) setTimeout(()=>{this.queryDataCenterMapData();},1500)
}, },
loadDataCenterMapData:function(){ loadDataCenterMapData:function(){
let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en'; return new Promise(res=>{
let requests=[axios.get('/idc?pageSize=-1'),axios.get('/overview/datacenterStat')];
axios.all(requests).then((result)=>{ 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) { if(result) {
let idcInfos = null; let idcInfos = null;
let dcStats = null; let dcStats = null;
@@ -802,7 +860,9 @@
} }
} }
} }
res();
}); });
})
}, },
queryDataCenterMapData() { queryDataCenterMapData() {
let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en'; let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
@@ -888,93 +948,105 @@
}) })
}, },
queryAlertStatByRule() { queryAlertStatByRule() {
this.$refs.ruleMessage.startLoading(); return new Promise(resolve=>{
this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
if (response.code === 200) { this.$refs.ruleMessage.startLoading();
let seriesData = []; this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
let categoryData = []; if (response.code === 200) {
response.data.list.forEach(item => { let seriesData = [];
seriesData.splice(0, 0, item.nums); let categoryData = [];
categoryData.splice(0, 0, item.alertName); response.data.list.forEach(item => {
}); seriesData.splice(0, 0, item.nums);
this.messageByRuleSeries = { categoryData.splice(0, 0, item.alertName);
name: 'alertStatByRule', });
data: seriesData, this.messageByRuleSeries = {
type: 'bar', name: 'alertStatByRule',
barMaxWidth: 15, data: seriesData,
itemStyle: { type: 'bar',
color: function(params) { barMaxWidth: 15,
let colorList = ["#FAd4ab", "#d0e8d0"]; itemStyle: {
if(params.dataIndex % 2 == 0){ color: function(params) {
return colorList[0] let colorList = ["#FAd4ab", "#d0e8d0"];
}else{ if(params.dataIndex % 2 == 0){
return colorList[1] return colorList[0]
} }else{
return colorList[1]
}
},
}, },
}, category: categoryData, //自定义，用来判断N/A是否显示
category: categoryData, //自定义，用来判断N/A是否显示 };
}; this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData); this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
this.$refs.ruleMessage.setSeries(this.messageByRuleSeries); this.$refs.ruleMessage.endLoading();
this.$refs.ruleMessage.endLoading(); }
} resolve()
}); });
})
}, },
queryAlertStatByAsset() { queryAlertStatByAsset() {
this.$refs.assetMessage.startLoading(); return new Promise(resolve => {
this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
if (response.code === 200) { this.$refs.assetMessage.startLoading();
let seriesData = []; this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
let categoryData = []; if (response.code === 200) {
response.data.list.forEach(item => { let seriesData = [];
seriesData.splice(0, 0, item.nums); let categoryData = [];
categoryData.splice(0, 0, item.host); response.data.list.forEach(item => {
}); seriesData.splice(0, 0, item.nums);
this.messageByAssetSeries = { categoryData.splice(0, 0, item.host);
name: 'alertStatByAsset', });
data: seriesData, this.messageByAssetSeries = {
type: 'bar', name: 'alertStatByAsset',
barMaxWidth: 15, data: seriesData,
category: categoryData, type: 'bar',
itemStyle: { barMaxWidth: 15,
color: function(params) { category: categoryData,
let colorList = ["#FAd4ab", "#d0e8d0"];; itemStyle: {
if(params.dataIndex % 2 == 0){ color: function(params) {
return colorList[0] let colorList = ["#FAd4ab", "#d0e8d0"];;
}else{ if(params.dataIndex % 2 == 0){
return colorList[1] return colorList[0]
} }else{
return colorList[1]
}
},
}, },
}, };
}; this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData);
this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData); this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
this.$refs.assetMessage.setSeries(this.messageByAssetSeries); this.$refs.assetMessage.endLoading();
this.$refs.assetMessage.endLoading(); }
} resolve();
}); });
})
}, },
queryAlertStatByModule() { queryAlertStatByModule() {
this.$refs.moduleMessage.startLoading(); return new Promise(resolve => {
this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
if (response.code === 200) { this.$refs.moduleMessage.startLoading();
let seriesData = []; this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
let categoryData = []; if (response.code === 200) {
response.data.list.forEach(item => { let seriesData = [];
seriesData.splice(0, 0, item.nums); let categoryData = [];
categoryData.splice(0, 0, item.module); response.data.list.forEach(item => {
}); seriesData.splice(0, 0, item.nums);
this.messageByModuleSeries = { categoryData.splice(0, 0, item.module);
name: 'alertStatByModule', });
data: seriesData, this.messageByModuleSeries = {
type: 'bar', name: 'alertStatByModule',
barMaxWidth: 30, data: seriesData,
category: categoryData type: 'bar',
}; barMaxWidth: 30,
this.$refs.moduleMessage.modifyOption('xAxis', 'data', categoryData); category: categoryData
this.$refs.moduleMessage.setSeries(this.messageByModuleSeries); };
this.$refs.moduleMessage.endLoading(); this.$refs.moduleMessage.modifyOption('xAxis', 'data', categoryData);
} this.$refs.moduleMessage.setSeries(this.messageByModuleSeries);
}); this.$refs.moduleMessage.endLoading();
}
resolve();
});
})
}, },
getDcTrafficData() { getDcTrafficData() {
this.$get('idc/trafficSetting', {pageSize: -1}).then(response => { this.$get('idc/trafficSetting', {pageSize: -1}).then(response => {
@@ -1194,46 +1266,43 @@
}, },
/*header 时间处理 start*/ /*header 时间处理 start*/
initDate:function(){ initDate:function(){
this.sysTime=this.getTime(); this.sysTime=this.getTime(0);
this.sysDate=this.getDate(); this.sysDate=this.getDate(0);
this.sysWeek=this.getWeek(); this.sysWeek=this.getWeek(0);
this.freshTime(); this.freshTime();
}, },
freshTime:function(){ freshTime:function(){
let $temp=this; let $temp=this;
setInterval(function(){ let counter=0;
$temp.sysTime=$temp.getTime() this.freshDateTimer=setInterval(function(){
$temp.sysDate=$temp.getDate(); counter ++;
$temp.sysWeek=$temp.getWeek(); $temp.sysTime=$temp.getTime(counter)
$temp.sysDate=$temp.getDate(counter);
$temp.sysWeek=$temp.getWeek(counter);
},1000) },1000)
}, },
getTime:function(){ getTime:function(counter){
let date=new Date(); let date=new Date(this.system_server_time);
date.setSeconds(date.getSeconds()+counter)
let hours=date.getHours()>9?date.getHours():'0'+date.getHours(); let hours=date.getHours()>9?date.getHours():'0'+date.getHours();
let minutes=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes(); let minutes=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
let seconds=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds(); let seconds=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
return hours+':'+minutes+':'+seconds; return hours+':'+minutes+':'+seconds;
}, },
getDate:function(){ getDate:function(counter){
let date=new Date(); let date=new Date(this.system_server_time);
date.setSeconds(date.getSeconds()+counter)
let years=date.getFullYear(); let years=date.getFullYear();
let months=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1); let months=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
let days=date.getDate()>9?date.getDate():'0'+date.getDate(); let days=date.getDate()>9?date.getDate():'0'+date.getDate();
return years+'-'+months+'-'+days; return years+'-'+months+'-'+days;
}, },
getWeek:function(){ getWeek:function(counter){
let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en'; let weeks=[i18n.t('date.week.seven'),i18n.t('date.week.one'),i18n.t('date.week.two'),i18n.t('date.week.three'),i18n.t('date.week.four'),i18n.t('date.week.five'),i18n.t('date.week.six')]
let enWeeks=['SUN','MON','TUE','WED','THU','FRI','SAT']; let date=new Date(this.system_server_time);
let cnWeeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; date.setSeconds(date.getSeconds()+counter)
let date=new Date();
let day=date.getDay(); let day=date.getDay();
if(language == 'en'){ return weeks[day]
return enWeeks[day];
}else if(language == 'cn'){
return cnWeeks[day];
}else{
return enWeeks[day];
}
}, },
dateFormat:function(fmt, date) { dateFormat:function(fmt, date) {
let ret; let ret;
@@ -1454,16 +1523,21 @@
}, },
mounted() { mounted() {
this.initData(); this.initData();
this.initDate(); this.querySystemState().then(()=>{
this.initDate();
this.setFreshDataTimer();
})
/*window.onresize = () => { /*window.onresize = () => {
setTimeout(() => { setTimeout(() => {
this.$parent.$parent.update(); this.$parent.$parent.update();
}, 100); }, 100);
}*/ }*/
}, },
/*destroyed() { destroyed() {
window.onresize = null; clearInterval(this.freshDataTimer)
}*/ clearInterval(this.freshDateTimer)
}
} }
</script> </script>

28
nezha-fronted/src/libs/bus.js
View File

@@ -255,6 +255,7 @@ export default new Vue({
} }
return statisticsRlt; return statisticsRlt;
}, },
//将本地时区转为系统配置的时区
computeTimezone:function(sourceTime){ computeTimezone:function(sourceTime){
let offset=localStorage.getItem('nz-sys-timezone'); let offset=localStorage.getItem('nz-sys-timezone');
if(offset&& offset != 'undefined' && offset != null){ if(offset&& offset != 'undefined' && offset != null){
@@ -290,7 +291,34 @@ export default new Vue({
}, delay); }, delay);
} }
}, },
UTCTimeToConfigTimezone:function(utcTime){
let offset=localStorage.getItem('nz-sys-timezone');
if(offset&& offset != 'undefined' && offset != null){
let time = utcTime;
if(typeof time == 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)){
time = new Date(time).getTime();
}
offset=Number.parseInt(offset);
return time += offset * 60*60*1000
}else{
return utcTime;
}
},
configTimezoneToUTCTime:function(configTime){
let offset=localStorage.getItem('nz-sys-timezone');
if(offset&& offset != 'undefined' && offset != null){
let time = configTime;
if(typeof time == 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)){
time = new Date(time).getTime();
}
offset=Number.parseInt(offset);
return time -= offset * 60*60*1000
}else{
return configTime;
}
}
}, },
created() { created() {
this.getDefaultDate(); this.getDefaultDate();

29
nezha-fronted/src/main.js
View File

@@ -44,6 +44,7 @@ import loading from "./components/common/loading";
import mibBox from "./components/common/rightBox/mibBox"; import mibBox from "./components/common/rightBox/mibBox";
import leftMenu from "./components/common/leftMenu"; import leftMenu from "./components/common/leftMenu";
import pickTime from "./components/common/pickTime"; import pickTime from "./components/common/pickTime";
import bus from "./libs/bus";
Vue.component("Pagination", Pagination); Vue.component("Pagination", Pagination);
Vue.component("searchInput", searchInput); Vue.component("searchInput", searchInput);
@@ -88,6 +89,34 @@ Vue.prototype.$tableHeight = { //列表页表格的高度
noPagination: 'calc(100% - 60px)', //特例：没有翻页组件 noPagination: 'calc(100% - 60px)', //特例：没有翻页组件
}; };
Vue.mixin({
methods: {
utcTimeToTimezone:function(time){
if(time){
return bus.UTCTimeToConfigTimezone(time)
}
},
utcTimeToTimezoneStr:function(time,format='yyyy-MM-dd hh:mm:ss'){
if(time){
return bus.timeFormate(bus.UTCTimeToConfigTimezone(time),format)
}else{
return '-'
}
},
timezoneToUtcTime:function(time){
if(time){
return bus.configTimezoneToUTCTime(time)
}
},
timezoneToUtcTimeStr:function(time,format='yyyy-MM-dd hh:mm:ss'){
if(time){
return bus.timeFormate(this.timezoneToUtcTime(time),format)
}
}
}
})
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(Vuex); Vue.use(Vuex);