fix: 时间组件右侧快捷面板添加时间范围参数

src/components/common/TimeRange/DateTimeRange.vue

@@ -86,9 +86,9 @@ import { ref, computed, watch, reactive } from 'vue'
 import { EN, storageKey, ZH } from '@/utils/constants'
 import { getMillisecond, millTimestampDiffFromTz, timestampToList } from '@/utils/date-util'
 import { useStore } from 'vuex'
-import ElConfigProvider from 'element-plus'
 import cn from 'element-plus/lib/locale/lang/zh-cn'
 import en from 'element-plus/lib/locale/lang/en'
+import i18n from '@/i18n'
 
 export default {
   name: 'DateTimeRange',
@@ -113,24 +113,16 @@ export default {
     showPosition: {
       type: String,
       default: 'right'
+    },
+    noMinutes: {
+      type: Boolean,
+      default: false
+    },
+    dateRangeArr: {
+      type: Array
     }
   },
   emits: ['change'],
-  data () {
-    return {
-      dateRangeArr: [
-        { value: 5, name: this.$t('dateTime.last5Mins') }, // 'last 5 mins'
-        { value: 15, name: this.$t('dateTime.last15Mins') },
-        { value: 30, name: this.$t('dateTime.last30Mins') },
-        { value: 60, name: this.$t('dateTime.last1Hour') }, // dateTime.last1Hour
-        { value: 180, name: this.$t('dateTime.last3Hours') },
-        { value: 360, name: this.$t('dateTime.last6Hours') },
-        { value: 720, name: this.$t('dateTime.last12Hours') },
-        { value: 1440, name: this.$t('dateTime.last1Day') }, // dateTime.last2Days
-        { value: 2880, name: this.$t('dateTime.last2Days') }
-      ]
-    }
-  },
   computed: {
     showDetail () {
       let str = ''
@@ -183,6 +175,31 @@ export default {
     const datePickerRightStyle = 'position: absolute;top: -53px;left: -536px;'
     const datePickerLeftStyle = 'position: absolute;top: -53px;left: -536px;'
     const leftStyle = ref('position: absolute;top: 32px;left: 0px;')
+    const dateRangeArr = ref([
+      { value: 5, name: i18n.global.t('dateTime.last5Mins') }, // 'last 5 mins'
+      { value: 15, name: i18n.global.t('dateTime.last15Mins') },
+      { value: 30, name: i18n.global.t('dateTime.last30Mins') },
+      { value: 60, name: i18n.global.t('dateTime.last1Hour') }, // dateTime.last1Hour
+      { value: 180, name: i18n.global.t('dateTime.last3Hours') },
+      { value: 360, name: i18n.global.t('dateTime.last6Hours') },
+      { value: 720, name: i18n.global.t('dateTime.last12Hours') },
+      { value: 1440, name: i18n.global.t('dateTime.last1Day') }, // dateTime.last2Days
+      { value: 2880, name: i18n.global.t('dateTime.last2Days') }
+    ])
+    if (props.noMinutes) {
+      dateRangeArr.value = [
+        { value: 60, name: i18n.global.t('dateTime.last1Hour') }, // dateTime.last1Hour
+        { value: 180, name: i18n.global.t('dateTime.last3Hours') },
+        { value: 360, name: i18n.global.t('dateTime.last6Hours') },
+        { value: 720, name: i18n.global.t('dateTime.last12Hours') },
+        { value: 1440, name: i18n.global.t('dateTime.last1Day') }, // dateTime.last2Days
+        { value: 2880, name: i18n.global.t('dateTime.last2Days') }
+      ]
+    }
+    if (props && props.dateRangeArr) {
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      dateRangeArr.value = props.dateRangeArr
+    }
     // computed
     const utcStr = computed(() => {
       let str = 'UTC '
@@ -371,7 +388,9 @@ export default {
       returnValue,
       quickChange,
       historyChange,
-      locale
+      locale,
+      // eslint-disable-next-line vue/no-dupe-keys
+      dateRangeArr
     }
   }
 }

src/components/table/tag/TagTable.vue

@@ -49,6 +49,7 @@
                 :start-time="timeFilter.startTime"
                 :end-time="timeFilter.endTime"
                 :date-range="timeFilter.dateRangeValue"
+                noMinutes
                 ref="dateTimeRange"
                 @change="reload"
             />