update

src/components/Graph.vue

@@ -66,7 +66,6 @@ const visMenus = ref<boolean>(false);
 const { setOptions, resize, getInstance } = useECharts(
   chartRef as Ref<HTMLDivElement>
 );
-const { eventAssociate } = associateProcessor();
 const currentParams = ref<Nullable<EventParams>>(null);
 const showTrace = ref<boolean>(false);
 const traceOptions = ref<{ type: string; filters?: unknown }>({
@@ -154,6 +153,7 @@ function updateOptions() {
     return;
   }
   if (props.filters.isRange) {
+    const { eventAssociate } = associateProcessor();
     const options = eventAssociate(props);
     setOptions(options || props.option);
   } else {
@@ -166,27 +166,8 @@ function updateOptions() {
 }
 
 function viewTrace() {
-  if (!currentParams.value) {
-    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,
-    },
-  };
+  const item = associateProcessor().traceFilters(currentParams.value);
+
   traceOptions.value = {
     ...traceOptions.value,
     filters: item,
@@ -205,6 +186,7 @@ watch(
     }
     let options;
     if (props.filters && props.filters.isRange) {
+      const { eventAssociate } = associateProcessor();
       options = eventAssociate(props);
     }
     setOptions(options || props.option);

src/hooks/useAssociateProcessor.ts

@@ -14,6 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { useAppStoreWithOut } from "@/store/modules/app";
+import dateFormatStep from "@/utils/dateFormat";
+import getLocalTime from "@/utils/localtime";
+
 export default function associateProcessor() {
   function eventAssociate(props: any) {
     if (!props.filters) {
@@ -59,5 +63,31 @@ export default function associateProcessor() {
     };
     return options;
   }
-  return { eventAssociate };
+  function traceFilters(currentParams: any) {
+    const appStore = useAppStoreWithOut();
+
+    if (!currentParams.value) {
+      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,
+      },
+    };
+    return item;
+  }
+  return { eventAssociate, traceFilters };
 }