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:
@changcode
2021-12-30 19:17:22 +08:00
parent 5d895aa09a
commit 3f4c65fc67
11 changed files with 111 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
nezha-fronted/src/components/chart/chart/options/chartClock.js
View File

@@ -9,39 +9,27 @@ const chartClockOption = {
max: 12, max: 12,
splitNumber: 12, splitNumber: 12,
clockwise: true, clockwise: true,
radius: '88%',
center: ['50%', '50%'],
axisLine: { axisLine: {
lineStyle: { show: false
width: 15, },
color: [[1, 'rgba(0,0,0,0.7)']], axisLabel: {
shadowColor: 'rgba(0, 0, 0, 0.5)', show: false
shadowBlur: 15
}
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
shadowColor: 'rgba(0, 0, 0, 0.3)', shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 3, width: 5
shadowOffsetX: 1,
shadowOffsetY: 2
}
},
axisLabel: {
fontSize: 14,
distance: 25,
formatter: function (value) {
if (value === 0) {
return ''
}
return value + ''
} }
}, },
pointer: { pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 12, width: 9,
length: '55%', length: '55%',
offsetCenter: [0, '8%'], offsetCenter: [0, '8%'],
itemStyle: { itemStyle: {
color: '#C0911F', color: '#202f3f',
shadowColor: 'rgba(0, 0, 0, 0.3)', shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8, shadowBlur: 8,
shadowOffsetX: 2, shadowOffsetX: 2,
@@ -51,9 +39,6 @@ const chartClockOption = {
detail: { detail: {
show: false show: false
}, },
title: {
offsetCenter: [0, '30%']
},
data: [ data: [
{ {
value: 0 value: 0
@@ -82,24 +67,11 @@ const chartClockOption = {
}, },
pointer: { pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 8, width: 6,
length: '70%', length: '70%',
offsetCenter: [0, '8%'], offsetCenter: [0, '8%'],
itemStyle: { itemStyle: {
color: '#C0911F', color: '#202f3f',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
anchor: {
show: true,
size: 20,
showAbove: false,
itemStyle: {
borderWidth: 15,
borderColor: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)', shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8, shadowBlur: 8,
shadowOffsetX: 2, shadowOffsetX: 2,
@@ -109,9 +81,6 @@ const chartClockOption = {
detail: { detail: {
show: false show: false
}, },
title: {
offsetCenter: ['0%', '-40%']
},
data: [ data: [
{ {
value: 0 value: 0
@@ -125,7 +94,6 @@ const chartClockOption = {
endAngle: -270, endAngle: -270,
min: 0, min: 0,
max: 60, max: 60,
animationEasingUpdate: 'bounceOut',
clockwise: true, clockwise: true,
axisLine: { axisLine: {
show: false show: false
@@ -141,11 +109,11 @@ const chartClockOption = {
}, },
pointer: { pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 4, width: 3,
length: '85%', length: '85%',
offsetCenter: [0, '8%'], offsetCenter: [0, '8%'],
itemStyle: { itemStyle: {
color: '#C0911F', color: '#fa901c',
shadowColor: 'rgba(0, 0, 0, 0.3)', shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8, shadowBlur: 8,
shadowOffsetX: 2, shadowOffsetX: 2,
@@ -157,7 +125,7 @@ const chartClockOption = {
size: 15, size: 15,
showAbove: true, showAbove: true,
itemStyle: { itemStyle: {
color: '#C0911F', color: '#fa901c',
shadowColor: 'rgba(0, 0, 0, 0.3)', shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8, shadowBlur: 8,
shadowOffsetX: 2, shadowOffsetX: 2,
@@ -167,9 +135,6 @@ const chartClockOption = {
detail: { detail: {
show: false show: false
}, },
title: {
offsetCenter: ['0%', '-40%']
},
data: [ data: [
{ {
value: 0 value: 0

6
nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
View File

@@ -30,7 +30,8 @@
clearable clearable
:time-arrow-control="true" :time-arrow-control="true"
placeholder="Moment" placeholder="Moment"
value-format="yyyy-MM-dd HH:mm:ss" :value-format="endpointQueryTime"
:format="endpointQueryTime"
> >
</my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button> </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
</div> </div>
@@ -125,7 +126,8 @@ export default {
dropdownShow: false, dropdownShow: false,
timeout: null, timeout: null,
formatTime: '', formatTime: '',
hideSameLabels: true hideSameLabels: true,
endpointQueryTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
} }
}, },
methods: { methods: {

6
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -40,7 +40,8 @@
clearable clearable
:time-arrow-control="true" :time-arrow-control="true"
placeholder="Moment" placeholder="Moment"
value-format="yyyy-MM-dd HH:mm:ss" :value-format="endpointQueryTabTime"
:format="endpointQueryTabTime"
@change="pickTime" @change="pickTime"
> >
</my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button> </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
@@ -173,7 +174,8 @@ export default {
plTableSHow: true, plTableSHow: true,
scrollTop: 0, scrollTop: 0,
scrollbarWrap: null, scrollbarWrap: null,
minusTime: 0 minusTime: 0,
endpointQueryTabTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
} }
}, },
methods: { methods: {

25
nezha-fronted/src/components/common/multipleTime.vue
View File

@@ -4,7 +4,7 @@
<transition> <transition>
<div v-show="showDropdown" id="panel-calender" class="calendar"> <div v-show="showDropdown" id="panel-calender" class="calendar">
<my-date-picker prefix-icon=" " size="mini" ref="calendar" <my-date-picker prefix-icon=" " size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm:ss" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime" :format="multipleTime" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime"
popper-class="panel-time-picker-popper" popper-class="panel-time-picker-popper"
align="right"> align="right">
</my-date-picker> </my-date-picker>
@@ -159,7 +159,8 @@ export default {
}, },
isPopoverDisabled: false, isPopoverDisabled: false,
isCustom: false, isCustom: false,
valueArr: [] valueArr: [],
multipleTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
} }
}, },
watch: { watch: {
@@ -170,8 +171,8 @@ export default {
if (this.showTime.value) { if (this.showTime.value) {
this.setSearchTime(this.showTime.type, this.showTime.value) this.setSearchTime(this.showTime.type, this.showTime.value)
} else { } else {
const startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(this.searchTime[0], this.multipleTime)
const endTime = bus.timeFormate(new Date(this.searchTime[0]).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(this.searchTime[0]).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), this.multipleTime)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
} }
@@ -197,8 +198,8 @@ export default {
}, },
methods: { methods: {
dateChange (val) { dateChange (val) {
const startTime = bus.timeFormate(val, 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(val, this.multipleTime)
const endTime = bus.timeFormate(new Date(val).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(val).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), this.multipleTime)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
@@ -268,20 +269,20 @@ export default {
}, },
setSearchTime (type, val) { setSearchTime (type, val) {
if (type === 'minute') { if (type === 'minute') {
const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 1000, this.multipleTime)
const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 1000, this.multipleTime)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'm') this.$set(this.searchTime, 2, val + 'm')
} else if (type === 'hour') { } else if (type === 'hour') {
const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 60 * 1000, this.multipleTime)
const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 60 * 1000, this.multipleTime)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'h') this.$set(this.searchTime, 2, val + 'h')
} else if (type === 'date') { } else if (type === 'date') {
const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 24 * 60 * 60 * 1000, this.multipleTime)
const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 24 * 60 * 60 * 1000, this.multipleTime)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'd') this.$set(this.searchTime, 2, val + 'd')

13
nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
View File

@@ -38,7 +38,7 @@
<div class="datepicker-box"> <div class="datepicker-box">
<span class="datepicker-title">{{ $t("overall.startTime") }}</span> <span class="datepicker-title">{{ $t("overall.startTime") }}</span>
<my-date-picker ref="calendar" v-model="editAlertSilence.startAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')" <my-date-picker ref="calendar" v-model="editAlertSilence.startAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
align="right" class=" " format="yyyy/MM/dd HH:mm:ss" align="right" class=" " :format="alertSilenceTime"
popper-class="panel-time-picker-popper right-box-select-top" popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" " prefix-icon=" "
size="mini" size="mini"
@@ -50,7 +50,7 @@
<div class="datepicker-box"> <div class="datepicker-box">
<span class="datepicker-title">{{ $t("overall.endTime") }}</span> <span class="datepicker-title">{{ $t("overall.endTime") }}</span>
<my-date-picker ref="calendar" v-model="editAlertSilence.endAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')" <my-date-picker ref="calendar" v-model="editAlertSilence.endAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
align="right" class=" " format="yyyy/MM/dd HH:mm:ss" align="right" class=" " :format="alertSilenceTime"
popper-class="panel-time-picker-popper right-box-select-top" popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" " prefix-icon=" "
size="mini" size="mini"
@@ -209,7 +209,8 @@ export default {
moduleData: null, moduleData: null,
endpointData: null, endpointData: null,
startAtTamp: '', startAtTamp: '',
endAtTamp: '' endAtTamp: '',
alertSilenceTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
} }
}, },
mounted () { mounted () {
@@ -294,10 +295,10 @@ export default {
}, },
dateChange (val, type) { dateChange (val, type) {
if (type === 'startAt') { if (type === 'startAt') {
this.editAlertSilence.startAt = bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss') this.editAlertSilence.startAt = bus.timeFormate(new Date(val), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
this.startAtTamp = new Date(val).getTime() this.startAtTamp = new Date(val).getTime()
} else if (type === 'endAt') { } else if (type === 'endAt') {
this.editAlertSilence.endAt = bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss') this.editAlertSilence.endAt = bus.timeFormate(new Date(val), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
this.endAtTamp = new Date(val).getTime() this.endAtTamp = new Date(val).getTime()
} }
this.$forceUpdate() this.$forceUpdate()
@@ -312,7 +313,7 @@ export default {
} }
}, },
rangeTimeChange (val) { rangeTimeChange (val) {
const arr = [bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss'), bus.timeFormate(bus.getOffsetTimezoneData(val * 1), 'yyyy-MM-dd hh:mm:ss')] const arr = [bus.timeFormate(bus.getOffsetTimezoneData(), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'), bus.timeFormate(bus.getOffsetTimezoneData(val * 1), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')]
this.$set(this.editAlertSilence, 'startAt', arr[0]) this.$set(this.editAlertSilence, 'startAt', arr[0])
this.$set(this.editAlertSilence, 'endAt', arr[1]) this.$set(this.editAlertSilence, 'endAt', arr[1])
this.startAtTamp = new Date(this.editAlertSilence.startAt).getTime() this.startAtTamp = new Date(this.editAlertSilence.startAt).getTime()

49
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div id="panel-calender" :class="{'calendar--small': size === 'small'}" class="calendar"> <div id="panel-calender" :class="{'calendar--small': size === 'small'}" class="calendar">
<my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar" <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm:ss" @change="dateChange" v-model="searchTime" type="datetimerange" :format="timePicker" @change="dateChange" v-model="searchTime" type="datetimerange"
popper-class="panel-time-picker-popper time-picker-popover__select-top" popper-class="panel-time-picker-popper time-picker-popover__select-top"
:default-time="['00:00:00', '23:59:59']" :default-time="['00:00:00', '23:59:59']"
:range-separator="$t('dashboard.panel.to')" :range-separator="$t('dashboard.panel.to')"
@@ -67,10 +67,8 @@ export default {
return { return {
isPopoverDisabled: false, isPopoverDisabled: false,
isCustom: false, isCustom: false,
searchTime: [ timePicker: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss',
bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'), searchTime: [],
bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
],
showTime: { showTime: {
id: 4, id: 4,
text: this.$t('dashboard.panel.lastOneHour') text: this.$t('dashboard.panel.lastOneHour')
@@ -163,8 +161,8 @@ export default {
}, },
methods: { methods: {
dateChange (val) { dateChange (val) {
const startTime = bus.timeFormate(val[0], 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(val[0], this.timePicker)
const endTime = bus.timeFormate(val[1], 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(val[1], this.timePicker)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
@@ -188,11 +186,11 @@ export default {
} }
const time = bus.getTimezontDateRange() const time = bus.getTimezontDateRange()
if (timeGroup.start_time) { if (timeGroup.start_time) {
this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time, 'yyyy-MM-dd hh:mm:ss')) this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time, this.timePicker))
this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time, 'yyyy-MM-dd hh:mm:ss')) this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time, this.timePicker))
} else { } else {
this.$set(this.searchTime, 0, bus.timeFormate(time[0], 'yyyy-MM-dd hh:mm:ss')) this.$set(this.searchTime, 0, bus.timeFormate(time[0], this.timePicker))
this.$set(this.searchTime, 1, bus.timeFormate(time[1], 'yyyy-MM-dd hh:mm:ss')) this.$set(this.searchTime, 1, bus.timeFormate(time[1], this.timePicker))
} }
} }
} else { } else {
@@ -261,20 +259,20 @@ export default {
}, },
setSearchTime (type, val) { setSearchTime (type, val) {
if (type === 'minute') { if (type === 'minute') {
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), this.timePicker)
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.timePicker)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'm') this.$set(this.searchTime, 2, val + 'm')
} else if (type === 'hour') { } else if (type === 'hour') {
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), this.timePicker)
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.timePicker)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'h') this.$set(this.searchTime, 2, val + 'h')
} else if (type === 'date') { } else if (type === 'date') {
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), this.timePicker)
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.timePicker)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'd') this.$set(this.searchTime, 2, val + 'd')
@@ -310,7 +308,22 @@ export default {
} }
} }
} }
} },
stepSearchTime: {
immediate: true,
handler (n, o) {
if (n && this.searchTime[0]) {
if (this.showTime.value) {
this.setSearchTime(this.showTime.type, this.showTime.value)
} else {
const startTime = bus.timeFormate(this.searchTime[0], this.timePicker)
const endTime = bus.timeFormate(new Date(this.searchTime[0]).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), this.timePicker)
this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime)
}
}
}
},
} }
} }
</script> </script>

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

@@ -55,8 +55,8 @@
style="width: 100%;" style="width: 100%;"
v-model="scope.row[item.prop]" v-model="scope.row[item.prop]"
prefix-icon=" " size="small" ref="calendar" prefix-icon=" " size="small" ref="calendar"
format="yyyy-MM-dd HH:mm:ss" :format="apiKeyTableTime"
value-format="yyyy-MM-dd HH:mm:ss" :value-format="apiKeyTableTime"
type="datetime" type="datetime"
popper-class="item-system-table right-public-box-dropdown-top right-box-select-top" popper-class="item-system-table right-public-box-dropdown-top right-box-select-top"
:picker-options="pickerOptions" :picker-options="pickerOptions"
@@ -165,7 +165,8 @@ export default {
disabledDate (time) { disabledDate (time) {
return time.getTime() < Date.now() - 24 * 60 * 60 * 1000 return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
} }
} },
apiKeyTableTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
} }
}, },
methods: { methods: {

8
nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
View File

@@ -131,7 +131,13 @@
:resizable="false" :resizable="false"
min-width="110px" min-width="110px"
show-overflow-tooltip show-overflow-tooltip
></el-table-column> >
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'time'">{{utcTimeToTimezoneStr(scope.row.time)}}</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
</el-table-column>
<template slot="empty"> <template slot="empty">
<div v-if="!tools.loading" class="table-no-data"> <div v-if="!tools.loading" class="table-no-data">
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">

35
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -276,7 +276,8 @@ export default {
// ---图表相关参数--end // ---图表相关参数--end
scrollbarWrap: null, scrollbarWrap: null,
batchDeleteObjs: [], batchDeleteObjs: [],
nowTimeType: {} nowTimeType: {},
panelDateFormatTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
} }
}, },
components: { components: {
@@ -300,8 +301,8 @@ export default {
// 刷新 // 刷新
Refresh () { Refresh () {
const curTime = this.$refs.calendarPanel.getCurrentTime() const curTime = this.$refs.calendarPanel.getCurrentTime()
this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss') this.filter.start_time = bus.timeFormate(curTime[0], this.panelDateFormatTime)
this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss') this.filter.end_time = bus.timeFormate(curTime[1], this.panelDateFormatTime)
this.getTableData() this.getTableData()
}, },
// 面板相关操作 // 面板相关操作
@@ -532,8 +533,8 @@ export default {
this.chartListLoading = true this.chartListLoading = true
if (params.start_time === '' || params.end_time === '') { if (params.start_time === '' || params.end_time === '') {
const now = bus.getTimezontDateRange() const now = bus.getTimezontDateRange()
const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss') const endTimeTmp = bus.timeFormate(now[1].getTime(), this.panelDateFormatTime)
const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss') const startTimeTmp = bus.timeFormate(now[0].getTime(), this.panelDateFormatTime)
params.start_time = startTimeTmp params.start_time = startTimeTmp
params.end_time = endTimeTmp params.end_time = endTimeTmp
} }
@@ -559,9 +560,9 @@ export default {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType) this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss') this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss') this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss') this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
this.filter.value = this.searchTime[2] this.filter.value = this.searchTime[2]
this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
// this.getTableData() // this.getTableData()
@@ -580,20 +581,20 @@ export default {
}, },
setSearchTime (type, val, nowTimeType) { // 设置searchTime setSearchTime (type, val, nowTimeType) { // 设置searchTime
if (type === 'minute') { if (type === 'minute') {
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), this.panelDateFormatTime)
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'm') this.$set(this.searchTime, 2, val + 'm')
} else if (type === 'hour') { } else if (type === 'hour') {
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), this.panelDateFormatTime)
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'h') this.$set(this.searchTime, 2, val + 'h')
} else if (type === 'date') { } else if (type === 'date') {
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss') const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), this.panelDateFormatTime)
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss') const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'd') this.$set(this.searchTime, 2, val + 'd')
@@ -828,9 +829,9 @@ export default {
}) })
if (this.nowTimeType.type) { if (this.nowTimeType.type) {
this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType) this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss') this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss') this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss') this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
this.filter.value = this.searchTime[2] this.filter.value = this.searchTime[2]
} }
this.getTableData() this.getTableData()

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

@@ -39,8 +39,8 @@ export default new Vue({
end.setEnd() end.setEnd()
// let start = this.getHoursTime(-1); // let start = this.getHoursTime(-1);
// let end = this.getHoursTime(0); // let end = this.getHoursTime(0);
start = this.timeFormate(start, 'yyyy-MM-dd hh:mm:ss') start = this.timeFormate(start, localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
end = this.timeFormate(end, 'yyyy-MM-dd hh:mm:ss') end = this.timeFormate(end, localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
this.selectDate = [start, end] this.selectDate = [start, end]
}, },
getHoursTime (hours) { getHoursTime (hours) {

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

@@ -102,9 +102,9 @@ Vue.mixin({
return bus.UTCTimeToConfigTimezone(time) return bus.UTCTimeToConfigTimezone(time)
} }
}, },
utcTimeToTimezoneStr: function (time, format = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss') { utcTimeToTimezoneStr: function (time) {
if (time) { if (time) {
return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), format) return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
} else { } else {
return '-' return '-'
} }
@@ -114,18 +114,17 @@ Vue.mixin({
return bus.configTimezoneToUTCTime(time) return bus.configTimezoneToUTCTime(time)
} }
}, },
timezoneToUtcTimeStr: function (time, format = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss') { timezoneToUtcTimeStr: function (time) {
if (time) { if (time) {
return bus.timeFormate(this.timezoneToUtcTime(time), format) return bus.timeFormate(this.timezoneToUtcTime(time), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
} }
}, },
timestampStr: function (time, format = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss') { timestampStr: function (time) {
const date = new Date(time) const date = new Date(time)
const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果 const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
let dateStr = new Date(time).getTime() + localOffset const dateStr = new Date(time).getTime() + localOffset
dateStr = bus.timeFormate(dateStr, format)
if (time) { if (time) {
return bus.timeFormate(bus.UTCTimeToConfigTimezone(dateStr), format) return bus.timeFormate(bus.UTCTimeToConfigTimezone(dateStr), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
} else { } else {
return '-' return '-'
} }