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

NEZ-3157 feat：时间选择器支持选择更多相对时间（60%）

Browse Source
This commit is contained in:
zhangyu
2023-09-01 15:01:31 +08:00
parent 4dd72ae03f
commit aca9e2ad87
7 changed files with 225 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
nezha-fronted/src/assets/css/components/common/timePicker.scss
View File

@@ -167,7 +167,7 @@
}
.date-range-panel {
// height: 460px;
width: 500px;
width: 570px;
background: $--background-color-empty;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
position: absolute;
@@ -176,6 +176,7 @@
z-index: 1;
cursor: default;
.date-range-panel-content-left {
width: 335px;
padding-left: 10px;
display: flex;
flex-direction: column;
@@ -264,13 +265,10 @@
}
.date-range-panel-content-right {
width: 235px;
display: flex;
flex-direction: column;
overflow: hidden;
.date-range-item {
height: 353px;
overflow-y: auto;
}
ul {
flex: 1;
padding: 0;
@@ -279,6 +277,7 @@
margin: 0;
li {
box-sizing: border-box;
width: 100%;
flex: 1;
display: flex;
@@ -311,6 +310,11 @@
}
}
.date-range-item {
height: 353px;
overflow-y: auto;
flex: unset;
}
}
}
@media (max-height: 900px) {

2
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -341,7 +341,7 @@ export default {
minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
if (minTime !== null && maxTime !== null) {
const diffSec = (maxTime - minTime)
const secOneDay = 24 * 60 * 60// 1天的秒数
const secOneDay = 12 * 60 * 60// 0.5天的秒数
const secOneMonth = secOneDay * 30// 30天的秒数
const dateFormatStr = self.timeFormatMain.split(' ')[0]
let str = ''

16
nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
View File

@@ -312,7 +312,15 @@ export default {
{ id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
{ id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
{ id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 },
{ id: 13, text: 'today', type: 'relative', value: 0 },
{ id: 14, text: 'Yesterday ', type: 'relative', value: 1 },
{ id: 15, text: 'The day before yesterday', type: 'relative', value: 2 },
{ id: 16, text: 'This day last week', type: 'relative', value: 7 },
{ id: 17, text: 'This week', type: 'relative', value: 0 },
{ id: 18, text: 'Previous week', type: 'relative', value: 1 },
{ id: 19, text: 'This month', type: 'relative', value: 0 },
{ id: 20, text: 'Previous month', type: 'relative', value: 1 }
],
intervalList: [
{ value: 0, label: this.$t('dashboard.dashboard.chartForm.lockList.off') },
@@ -621,7 +629,7 @@ export default {
if (this.$refs.pickTime) {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.setSearchTime('searchTime', this.storeDispatchPanelTime)
this.setSearchTime('searchTime',nowTimeType, this.storeDispatchPanelTime)
this.filter.dashboardId = this.showPanel.id
this.getData(this.filter)
this.$store.dispatch('dispatchPanelTime', {
@@ -888,7 +896,7 @@ export default {
this.nowTimeType = this.$lodash.cloneDeep(nowTimeType)
// 刷新时间范围
this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
this.setSearchTime('searchTime', this.storeDispatchPanelTime)
this.setSearchTime('searchTime',this.nowTimeType, this.storeDispatchPanelTime)
this.$store.dispatch('dispatchPanelTime', {
time: this.searchTime,
nowTimeType: this.nowTimeType
@@ -907,7 +915,7 @@ export default {
const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
this.searchTime = this.timePickerRange.time
this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.searchTime)
this.setSearchTime('searchTime', this.storeDispatchPanelTime)
this.setSearchTime('searchTime',nowTimeType, this.storeDispatchPanelTime)
})
},
// 设置默认刷新

96
nezha-fronted/src/components/common/mixin/mainMixinFun.js
View File

@@ -91,6 +91,20 @@ export default {
const date = moment.tz(str, format, offset).valueOf()
return date
},
momentDays (timestamp) { // 只接受时间戳
const offset = localStorage.getItem('nz-sys-timezone')
return moment.tz(timestamp, offset).day()
},
momentSetDay (timestamp, day, fmt) { // 只接受时间戳
const offset = localStorage.getItem('nz-sys-timezone')
const format = fmt || localStorage.getItem('nz-default-dateFormat')
return moment.tz(timestamp, offset).day(day).format(format)
},
momentSetMonthDate (timestamp, date = 1, fmt) { // 只接受时间戳
const offset = localStorage.getItem('nz-sys-timezone')
const format = fmt || localStorage.getItem('nz-default-dateFormat')
return moment.tz(timestamp, offset).date(date).format(format)
},
onCopy (txt) {
this.$copyText(txt).then(() => {
this.$message.success({ message: this.$t('overall.copySuccess') })
@@ -154,24 +168,94 @@ export default {
}
},
/* 时间条件查询--end */
setSearchTime (key, cb) { // 设置searchTime
setSearchTime (key, nowType, cb) { // 设置searchTime
if (this.$refs.pickTime) {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
const nowTimeType = nowType || this.$refs.pickTime.$refs.timePicker.nowTimeType
this.nowTimeType = nowType || this.$refs.pickTime.$refs.timePicker.nowTimeType
const type = nowTimeType.type
const val = nowTimeType.value
const oneDTimestamp = 24 * 60 * 60 * 1000
if (type === 'relative') {
const now = new Date(bus.computeTimezone(new Date().getTime()))
let start = bus.timeFormate(now, 'YYYY-MM-DD')
let start = bus.timeFormate(now, 'YYYY-MM-DD') // 使用固定时间格式 方便添加 00:00:00 23:59:59
let end = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
let unit = ''
if (nowTimeType.id === 13) { // today
unit = 't'
start += '00:00:00'
end += ''
end = start + ' 23:59:59'
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
}
if (nowTimeType.id === 14) { // Yesterday
unit = 't'
end = start + ' 23:59:59'
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss') - oneDTimestamp)
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss') - oneDTimestamp)
}
if (nowTimeType.id === 15) { // The day before yesterday
unit = 't'
end = start + ' 23:59:59'
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss') - 2 * oneDTimestamp)
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss') - 2 * oneDTimestamp)
}
if (nowTimeType.id === 16) { // This day last week
unit = 't'
end = start + ' 23:59:59'
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss') - 7 * oneDTimestamp)
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss') - 7 * oneDTimestamp)
}
if (nowTimeType.id === 17) { // This week
unit = 'w'
const noTime = this.momentStrToTimestamp(start + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss')
const nowDay = this.momentDays(noTime)
end = start + ' 23:59:59'
if (nowDay == 0) {
start = this.momentSetDay(noTime, -6, 'YYYY-MM-DD')
} else {
start = this.momentSetDay(noTime, 1, 'YYYY-MM-DD')
}
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
}
if (nowTimeType.id === 18) { // Previous week
unit = 'w'
let noTime = this.momentStrToTimestamp(start + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss')
noTime = noTime - 7 * oneDTimestamp
const nowDay = this.momentDays(noTime)
if (nowDay == 0) { // 判断当前是否是周天 周天则为 -6 - 0 非周天 则是 1 - 7
start = this.momentSetDay(noTime, -6, 'YYYY-MM-DD')
end = this.momentSetDay(noTime, 0, 'YYYY-MM-DD')
} else {
start = this.momentSetDay(noTime, 1, 'YYYY-MM-DD')
end = this.momentSetDay(noTime, 7, 'YYYY-MM-DD')
}
start += ' 00:00:00'
end += ' 23:59:59'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
}
if (nowTimeType.id === 19) { // this month
unit = 'm'
const noTime = this.momentStrToTimestamp(start + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss')
end = start + ' 23:59:59'
start = this.momentSetMonthDate(noTime, 1)
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
}
if (nowTimeType.id === 20) { // Previous month 需要判断当前是否是 1号
unit = 'm'
const noTime = this.momentStrToTimestamp(start + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss')
end = this.momentStrToTimestamp(this.momentSetMonthDate(noTime, 1)) - 1000 // 当月1号 00:00:00 减1s 则是上月最后一天 23:59:59
console.log(end, '1')
start = this.momentSetMonthDate(end, 1, 'YYYY-MM-DD') + ' 00:00:00'
console.log(start, '1')
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
end = this.momentTz(end)
}
this.$set(this[key], 0, start)
this.$set(this[key], 1, end)
this.$set(this[key], 2, val + unit)

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

@@ -40,7 +40,6 @@
<div v-if="dropdownFlag" class="date-range-panel popper-z-index" :class="timeBoxClass">
<el-row class="date-range-panel-top" style="position: relative">
<el-col
:span="16"
class="date-range-panel-content date-range-panel-content-left"
>
<div class="date-range-title" style="padding-left: 0">
@@ -105,7 +104,6 @@
</div>
</el-col>
<el-col
:span="8"
class="date-range-panel-content date-range-panel-content-right"
style="border-left: 1px solid rgba(0, 0, 0, 0.09)"
>
@@ -202,13 +200,17 @@ export default {
{ id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
{ id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
{ id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
],
relativeData: [
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 },
{ id: 13, text: 'today', type: 'relative', value: 0 },
{ id: 14, text: 'Yesterday ', type: 'relative', value: 1 },
{ id: 15, text: 'The day before yesterday', type: 'relative', value: 2 },
{ id: 16, text: 'This day last week', type: 'relative', value: 7 }
{ id: 16, text: 'This day last week', type: 'relative', value: 7 },
{ id: 17, text: 'This week', type: 'relative', value: 0 },
{ id: 18, text: 'Previous week', type: 'relative', value: 1 },
{ id: 19, text: 'This month', type: 'relative', value: 0 },
{ id: 20, text: 'Previous month', type: 'relative', value: 1 }
],
relativeData: [
],
timeShowData: [],
nowTimeType: {
@@ -537,19 +539,90 @@ export default {
setSearchTime (type, val, time) {
if (type === 'relative') {
const now = new Date(bus.computeTimezone(new Date().getTime()))
let start = bus.timeFormate(now, 'YYYY-MM-DD')
const nowTimeType = this.nowTimeType
const oneDTimestamp = 24 * 60 * 60 * 1000
let start = bus.timeFormate(now, 'YYYY-MM-DD') // 使用固定时间格式 方便添加 00:00:00 23:59:59
let end = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
console.log(start, end, val)
if (this.nowTimeType.id === 13) { // today
start += '00:00:00'
end += ''
let unit = ''
if (nowTimeType.id === 13) { // today
unit = 't'
end = start + ' 23:59:59'
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
}
console.log(start, end)
if (nowTimeType.id === 14) { // Yesterday
unit = 't'
end = start + ' 23:59:59'
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss') - oneDTimestamp)
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss') - oneDTimestamp)
}
if (nowTimeType.id === 15) { // The day before yesterday
unit = 't'
end = start + ' 23:59:59'
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss') - 2 * oneDTimestamp)
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss') - 2 * oneDTimestamp)
}
if (nowTimeType.id === 16) { // This day last week
unit = 't'
end = start + ' 23:59:59'
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss') - 7 * oneDTimestamp)
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss') - 7 * oneDTimestamp)
}
if (nowTimeType.id === 17) { // This week
unit = 'w'
const noTime = this.momentStrToTimestamp(start + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss')
const nowDay = this.momentDays(noTime)
end = start + ' 23:59:59'
if (nowDay == 0) {
start = this.momentSetDay(noTime, -6, 'YYYY-MM-DD')
} else {
start = this.momentSetDay(noTime, 1, 'YYYY-MM-DD')
}
start += ' 00:00:00'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
}
if (nowTimeType.id === 18) { // Previous week
unit = 'w'
let noTime = this.momentStrToTimestamp(start + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss')
noTime = noTime - 7 * oneDTimestamp
const nowDay = this.momentDays(noTime)
if (nowDay == 0) { // 判断当前是否是周天 周天则为 -6 - 0 非周天 则是 1 - 7
start = this.momentSetDay(noTime, -6, 'YYYY-MM-DD')
end = this.momentSetDay(noTime, 0, 'YYYY-MM-DD')
} else {
start = this.momentSetDay(noTime, 1, 'YYYY-MM-DD')
end = this.momentSetDay(noTime, 7, 'YYYY-MM-DD')
}
start += ' 00:00:00'
end += ' 23:59:59'
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
}
if (nowTimeType.id === 19) { // this month
unit = 'm'
const noTime = this.momentStrToTimestamp(start + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss')
end = start + ' 23:59:59'
start = this.momentSetMonthDate(noTime, 1)
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
}
if (nowTimeType.id === 20) { // Previous month 需要判断当前是否是 1号
unit = 'm'
const noTime = this.momentStrToTimestamp(start + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss')
end = this.momentStrToTimestamp(this.momentSetMonthDate(noTime, 1)) - 1000 // 当月1号 00:00:00 减1s 则是上月最后一天 23:59:59
console.log(end, '1')
start = this.momentSetMonthDate(end, 1, 'YYYY-MM-DD') + ' 00:00:00'
console.log(start, '1')
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
end = this.momentTz(end)
}
this.$set(this.searchTime, 0, start)
this.$set(this.searchTime, 1, end)
this.$set(this.searchTime, 2, this.nowTimeType.id)
this.$set(this.searchTime, 2, val + unit)
} else if (type === 'minute') {
const startTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())).setMinutes(

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

@@ -344,7 +344,15 @@ export default {
{ id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
{ id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
{ id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 },
{ id: 13, text: 'today', type: 'relative', value: 0 },
{ id: 14, text: 'Yesterday ', type: 'relative', value: 1 },
{ id: 15, text: 'The day before yesterday', type: 'relative', value: 2 },
{ id: 16, text: 'This day last week', type: 'relative', value: 7 },
{ id: 17, text: 'This week', type: 'relative', value: 0 },
{ id: 18, text: 'Previous week', type: 'relative', value: 1 },
{ id: 19, text: 'This month', type: 'relative', value: 0 },
{ id: 20, text: 'Previous month', type: 'relative', value: 1 }
],
intervalList: [
{ value: 0, label: this.$t('dashboard.dashboard.chartForm.lockList.off') },
@@ -1170,7 +1178,9 @@ export default {
// 时间选择器设置默认时间范围
setDefaultTimeRange () {
this.$nextTick(() => {
console.log(this.$route.query.searchTime)
if (this.$route.query.searchTime) return
console.log(213123213)
let nowTimeType = this.$lodash.cloneDeep(this.timeData[3])
const defaultTimeRange = this.$lodash.get(this.showPanel, 'param.defaultTimeRange')
if (defaultTimeRange) {
@@ -1237,7 +1247,7 @@ export default {
this.$store.commit('setMode', this.mode)
await this.getTableData()
if (this.nowTimeType.type) {
this.setSearchTime('searchTime')
this.setSearchTime('searchTime',this.nowTimeType)
}
if (this.nowTimeType) {
this.nowTimeType.start_time = this.searchTime[0]

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

@@ -91,14 +91,26 @@ export default new Vue({
const oneDay = 86400000
const sevenDay = 604800000
const thirtyDay = 2592000000
if (numInterval < oneDay) { // 小于1天，step为15s
if (numInterval < oneDay / 2) { // 小于12小时
step = '15s'
} else if (numInterval < oneDay) { // 小于1天，step为15s
step = '30s'
} else if (numInterval < oneDay * 2) { // 小于2天，step为15s
step = '1m'
} else if (numInterval < sevenDay) { // 小于7天，step为5m
step = '5m'
} else if (numInterval < thirtyDay) { // 小于30天，step为10m
step = '10m'
} else {
step = '30m'
} else if (numInterval < thirtyDay * 2) {
step = '45m'
} else if (numInterval < thirtyDay * 3) {
step = '1h'
} else if (numInterval < thirtyDay * 6) {
step = '3h'
} else if (numInterval < thirtyDay * 12) {
step = '5h'
} else {
step = '24h'
}
return step
},