diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue index 89969c06..38d4f4c1 100644 --- a/src/components/common/TimeRange/DateTimeRange.vue +++ b/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 } } } diff --git a/src/components/table/tag/TagTable.vue b/src/components/table/tag/TagTable.vue index c9f714dc..87e4811e 100644 --- a/src/components/table/tag/TagTable.vue +++ b/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" />