add duration in filters

src/components/Graph.vue

@@ -49,12 +49,16 @@ import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { EventParams } from "@/types/app";
 import { useECharts } from "@/hooks/useEcharts";
+import { useAppStoreWithOut } from "@/store/modules/app";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
 import Trace from "@/views/dashboard/controls/Trace.vue";
+import dateFormatStep from "@/utils/dateFormat";
+import getLocalTime from "@/utils/localtime";
 
 /*global Nullable, defineProps, defineEmits*/
 const emits = defineEmits(["select"]);
 const { t } = useI18n();
+const appStore = useAppStoreWithOut();
 const chartRef = ref<Nullable<HTMLDivElement>>(null);
 const menus = ref<Nullable<HTMLDivElement>>(null);
 const visMenus = ref<boolean>(false);
@@ -156,8 +160,27 @@ function updateOptions() {
 }
 
 function viewTrace() {
-  console.log(currentParams.value);
+  if (!currentParams.value) {
-  const item = {};
+    return;
+  }
+  const start = appStore.intervalUnix[currentParams.value.dataIndex];
+  const end = start;
+  const { step } = appStore.durationRow;
+  const item = {
+    duration: {
+      start: dateFormatStep(
+        getLocalTime(appStore.utc, new Date(start)),
+        step,
+        true
+      ),
+      end: dateFormatStep(
+        getLocalTime(appStore.utc, new Date(end)),
+        step,
+        true
+      ),
+      step,
+    },
+  };
   traceOptions.value = {
     ...traceOptions.value,
     filters: item,

src/store/modules/app.ts

@@ -71,7 +71,7 @@ export const appStore = defineStore({
         step: this.duration.step,
       };
     },
-    intervalTime(): string[] {
+    intervalUnix(): number[] {
       let interval = 946080000000;
       switch (this.duration.step) {
         case "MINUTE":
@@ -97,12 +97,17 @@ export const appStore = defineStore({
         this.utcMin * 60000;
       const startUnix: number = this.duration.start.getTime();
       const endUnix: number = this.duration.end.getTime();
-      const timeIntervals: string[] = [];
+      const timeIntervals: number[] = [];
       for (let i = 0; i <= endUnix - startUnix; i += interval) {
-        const temp: string = dateFormatTime(
+        timeIntervals.push(startUnix + i - utcSpace);
-          new Date(startUnix + i - utcSpace),
+      }
-          this.duration.step
+      return timeIntervals;
-        );
+    },
+    intervalTime(): string[] {
+      const arr = this.intervalUnix;
+      const timeIntervals: string[] = [];
+      for (const item of arr) {
+        const temp: string = dateFormatTime(new Date(item), this.duration.step);
         timeIntervals.push(temp);
       }
       return timeIntervals;

src/types/app.d.ts

@@ -45,4 +45,5 @@ export type EventParams = {
   value: number | Array;
   color: string;
   event: any;
+  dataIndex: number;
 };