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

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) {

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 = ''

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)
       })
     },
     // 设置默认刷新

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
+        const nowTimeType = nowType || this.$refs.pickTime.$refs.timePicker.nowTimeType
-        this.nowTimeType = 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'
+            end = start + ' 23:59:59'
             start += ' 00:00:00'
-            end += ''
             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)

nezha-fronted/src/components/common/timePicker.vue

@@ -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 }
+        { id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 },
-      ],
-      relativeData: [
         { 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)
+        let unit = ''
-        if (this.nowTimeType.id === 13) { // today
+        if (nowTimeType.id === 13) { // today
+          unit = 't'
+          end = start + ' 23:59:59'
           start += ' 00:00:00'
-          end += ''
           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(

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]

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