diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss index c5a0e88f7..12fd5abb8 100644 --- a/nezha-fronted/src/assets/css/components/common/timePicker.scss +++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss @@ -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) { diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 6bf376e37..495ac48b2 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -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 = '' diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue index 63d14bfc2..a492deb62 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue @@ -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) }) }, // 设置默认刷新 diff --git a/nezha-fronted/src/components/common/mixin/mainMixinFun.js b/nezha-fronted/src/components/common/mixin/mainMixinFun.js index afb3ad632..cd533d9d0 100644 --- a/nezha-fronted/src/components/common/mixin/mainMixinFun.js +++ b/nezha-fronted/src/components/common/mixin/mainMixinFun.js @@ -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) diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue index e6bc9a05a..9b25d5ee6 100644 --- a/nezha-fronted/src/components/common/timePicker.vue +++ b/nezha-fronted/src/components/common/timePicker.vue @@ -40,7 +40,6 @@
@@ -105,7 +104,6 @@
@@ -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( diff --git a/nezha-fronted/src/components/page/dashboard/dashboard.vue b/nezha-fronted/src/components/page/dashboard/dashboard.vue index 209e61a4d..d46910692 100644 --- a/nezha-fronted/src/components/page/dashboard/dashboard.vue +++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue @@ -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] diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js index 642066f9a..9243abbf9 100644 --- a/nezha-fronted/src/libs/bus.js +++ b/nezha-fronted/src/libs/bus.js @@ -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 },