fix(timeline): use backend timestep

src/components/olmap/HealthRiskAnalysis/Timeline.tsx

@@ -30,6 +30,7 @@ import { FiSkipBack, FiSkipForward } from "react-icons/fi";
 import { config, NETWORK_NAME } from "@/config/config";
 import { apiFetch } from "@/lib/apiFetch";
 import { useMap } from "@components/olmap/core/MapComponent";
+import { useTimelineTimeConfig } from "@components/olmap/core/Controls/useTimelineTimeConfig";
 import { useHealthRisk } from "./HealthRiskContext";
 import {
   PredictionResult,
@@ -38,10 +39,11 @@ import {
   RISK_BREAKS,
 } from "./types";
 
-// 辅助函数：将日期向下取整到最近的15分钟
-const getRoundedDate = (date: Date): Date => {
+// 辅助函数：将日期向下取整到配置的水力时间步长
+const getRoundedDate = (date: Date, stepMinutes: number): Date => {
+  const safeStep = stepMinutes > 0 ? stepMinutes : 15;
   const minutes = date.getHours() * 60 + date.getMinutes();
-  const roundedMinutes = Math.floor(minutes / 15) * 15;
+  const roundedMinutes = Math.floor(minutes / safeStep) * safeStep;
   const roundedDate = new Date(date);
   roundedDate.setHours(
     Math.floor(roundedMinutes / 60),
@@ -91,6 +93,7 @@ const Timeline: React.FC<TimelineProps> = ({
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [playInterval, setPlayInterval] = useState<number>(5000); // 毫秒
   const [isPredicting, setIsPredicting] = useState<boolean>(false);
+  const { stepMinutes } = useTimelineTimeConfig();
 
   // 使用 ref 存储当前的健康数据，供事件监听器读取，避免重复绑定
   const healthDataRef = useRef<Map<string, number>>(new Map());
@@ -200,11 +203,14 @@ const Timeline: React.FC<TimelineProps> = ({
   }, [minTime, maxTime, setCurrentYear]);
 
   // 日期时间选择处理
-  const handleDateTimeChange = useCallback((newDate: Date | null) => {
-    if (newDate) {
-      setSelectedDateTime(getRoundedDate(newDate));
-    }
-  }, []);
+  const handleDateTimeChange = useCallback(
+    (newDate: Date | null) => {
+      if (newDate) {
+        setSelectedDateTime(getRoundedDate(newDate, stepMinutes));
+      }
+    },
+    [stepMinutes],
+  );
 
   // 播放间隔改变处理
   const handleIntervalChange = useCallback(
@@ -227,9 +233,9 @@ const Timeline: React.FC<TimelineProps> = ({
     [isPlaying, maxTime, minTime, setCurrentYear],
   );
 
-  // 组件加载时设置初始时间为当前时间的最近15分钟
+  // 组件加载时设置初始时间为当前时间的配置时间步长
   useEffect(() => {
-    setSelectedDateTime(getRoundedDate(new Date()));
+    setSelectedDateTime(getRoundedDate(new Date(), stepMinutes));
 
     return () => {
       if (intervalRef.current) {
@@ -239,7 +245,7 @@ const Timeline: React.FC<TimelineProps> = ({
         clearTimeout(debounceRef.current);
       }
     };
-  }, []);
+  }, [stepMinutes]);
 
   // 获取地图实例
   const map = useMap();
@@ -513,7 +519,7 @@ const Timeline: React.FC<TimelineProps> = ({
                 }
                 format="YYYY-MM-DD HH:mm"
                 views={["year", "month", "day", "hours", "minutes"]}
-                minutesStep={15}
+                minutesStep={stepMinutes}
                 sx={{ width: 200 }}
                 slotProps={{
                   textField: {