From 96a7133c6503f75fbcc0a2f4e5d1c3214bf45568 Mon Sep 17 00:00:00 2001 From: Fine Date: Tue, 13 May 2025 17:52:08 +0800 Subject: [PATCH] add max range for time picker --- src/components/DateCalendar.vue | 12 ++++++- src/components/TimePicker.vue | 5 ++- src/layout/components/NavBar.vue | 34 +++++++++++++++++--- src/store/modules/app.ts | 5 +++ src/views/dashboard/related/trace/Filter.vue | 3 +- 5 files changed, 51 insertions(+), 8 deletions(-) diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index 69716bf7..1678e805 100755 --- a/src/components/DateCalendar.vue +++ b/src/components/DateCalendar.vue @@ -175,6 +175,7 @@ limitations under the License. --> type: String, default: "YYYY-MM-DD", }, + maxRange: { type: Array as PropType, default: () => [] }, }); const state = reactive({ pre: "", @@ -241,6 +242,12 @@ limitations under the License. --> const end = computed(() => { return parse(Number(props.dates[1])); }); + const minStart = computed(() => { + return parse(Number(props.maxRange[0])); + }); + const maxEnd = computed(() => { + return parse(Number(props.maxRange[1])); + }); const ys = computed(() => { return Math.floor(state.year / 10) * 10; }); @@ -369,7 +376,10 @@ limitations under the License. --> flag = tf(props.value, format) === tf(time, format); } classObj[`${state.pre}-date`] = true; - classObj[`${state.pre}-date-disabled`] = (props.right && t < start.value) || props.disabledDate(time, format); + classObj[`${state.pre}-date-disabled`] = + (props.right && (t < start.value || t > maxEnd.value)) || + (props.left && t < minStart.value) || + props.disabledDate(time, format); classObj[`${state.pre}-date-on`] = (props.left && t > start.value) || (props.right && t < end.value); classObj[`${state.pre}-date-selected`] = flag; return classObj; diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue index a598c2a2..75559d26 100755 --- a/src/components/TimePicker.vue +++ b/src/components/TimePicker.vue @@ -68,6 +68,7 @@ limitations under the License. --> :left="true" :disabledDate="disabledDate" :format="format" + :maxRange="maxRange" @ok="ok" @setDates="setDates" /> @@ -78,6 +79,7 @@ limitations under the License. --> :right="true" :disabledDate="disabledDate" :format="format" + :maxRange="maxRange" @ok="ok" @setDates="setDates" /> @@ -112,7 +114,7 @@ limitations under the License. --> import { useI18n } from "vue-i18n"; import DateCalendar from "./DateCalendar.vue"; import { useTimeoutFn } from "@/hooks/useTimeout"; - /*global defineProps, defineEmits*/ + /*global PropType, defineProps, defineEmits*/ const datepicker = ref(null); const { t } = useI18n(); const show = ref(false); @@ -149,6 +151,7 @@ limitations under the License. --> type: Boolean, default: false, }, + maxRange: { type: Array as PropType, default: () => [] }, }); const emit = defineEmits(["clear", "input", "confirm", "cancel"]); const local = computed(() => { diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index 85dcf760..88afa829 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -43,6 +43,7 @@ limitations under the License. --> {{ t("timeTips") }} } async function getMetricsTTL() { - const resp = await appStore.queryMetricsTTL(); - // const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime(); - // const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()]; - // appStore.setDuration(timeFormat(dates)); + // const resp = await appStore.queryMetricsTTL(); + // mock data + const data = { + minute: 20, + hour: 2, + day: 3, + coldMinute: 10, + coldHour: 10, + coldDay: 9, + }; + if (coldStage.value) { + handleMetricsTTL({ + minute: data.coldMinute, + hour: data.coldHour, + day: data.coldDay, + }); + } else { + handleMetricsTTL({ + minute: data.minute, + hour: data.hour, + day: data.day, + }); + } + } + + function handleMetricsTTL(params: { minute: number; hour: number; day: number }) { + const gap = (params.day + 1) * 24 * 60 * 60 * 1000 + params.hour * 60 * 60 * 1000 + params.minute * 60 * 1000; + const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()]; + appStore.setMaxRange(dates); } function getNavPaths() { diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index ec4b6a0b..452ffa34 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -38,6 +38,7 @@ interface AppState { allMenus: MenuOptions[]; theme: string; coldStageMode: boolean; + maxRange: Date[]; } export const appStore = defineStore({ @@ -60,6 +61,7 @@ export const appStore = defineStore({ allMenus: [], theme: Themes.Dark, coldStageMode: false, + maxRange: [], }), getters: { duration(): Duration { @@ -124,6 +126,9 @@ export const appStore = defineStore({ updateDurationRow(data: Duration) { this.durationRow = data; }, + setMaxRange(times: Date[]) { + this.maxRange = times; + }, setTheme(data: string) { this.theme = data; }, diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue index 48884708..a564338a 100644 --- a/src/views/dashboard/related/trace/Filter.vue +++ b/src/views/dashboard/related/trace/Filter.vue @@ -94,7 +94,6 @@ limitations under the License. --> import { useDashboardStore } from "@/store/modules/dashboard"; import { useAppStoreWithOut } from "@/store/modules/app"; import { useSelectorStore } from "@/store/modules/selectors"; - import timeFormat from "@/utils/timeFormat"; import ConditionTags from "@/views/components/ConditionTags.vue"; import { ElMessage } from "element-plus"; import { EntityType, QueryOrders, Status } from "../../data"; @@ -265,7 +264,7 @@ limitations under the License. --> ElMessage.error(resp.errors); } } - function changeTimeRange(val: Date[]) { + function changeTimeRange() { // duration.value = timeFormat(val); } onUnmounted(() => {