更新地图样式；调整时间轴，新增前进/后退一天按钮；新增爆管分析页面

src/app/OlMap/Controls/Timeline.tsx

@@ -23,6 +23,7 @@ import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { zhCN } from "date-fns/locale";
 import { PlayArrow, Pause, Stop, Refresh } from "@mui/icons-material";
 import { TbRewindBackward15, TbRewindForward15 } from "react-icons/tb";
+import { FiSkipBack, FiSkipForward } from "react-icons/fi";
 import { useData } from "../MapComponent";
 import { config } from "@/config/config";
 import { useMap } from "../MapComponent";
@@ -210,7 +211,7 @@ const Timeline: React.FC = () => {
           type: "error",
           message: "请至少设定并应用一个图层的样式。",
         });
-        return;
+        // return;
       }
       setIsPlaying(true);
 
@@ -233,7 +234,10 @@ const Timeline: React.FC = () => {
 
   const handleStop = useCallback(() => {
     setIsPlaying(false);
-    setCurrentTime(0);
+    // 设置为当前时间
+    const currentTime = new Date();
+    const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
+    setCurrentTime(minutes); // 组件卸载时重置时间
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
@@ -241,6 +245,20 @@ const Timeline: React.FC = () => {
   }, []);
 
   // 步进控制
+  const handleDayStepBackward = useCallback(() => {
+    setSelectedDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setDate(newDate.getDate() - 1);
+      return newDate;
+    });
+  }, []);
+  const handleDayStepForward = useCallback(() => {
+    setSelectedDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setDate(newDate.getDate() + 1);
+      return newDate;
+    });
+  }, []);
   const handleStepBackward = useCallback(() => {
     setCurrentTime((prev) => {
       const next = prev <= 0 ? 1440 : prev - 15;
@@ -299,7 +317,7 @@ const Timeline: React.FC = () => {
           type: "error",
           message: "请至少设定并应用一个图层的样式。",
         });
-        return;
+        // return;
       }
       fetchFrameData(
         currentTimeToDate(selectedDate, currentTime),
@@ -311,7 +329,12 @@ const Timeline: React.FC = () => {
 
   // 组件卸载时清理定时器和防抖
   useEffect(() => {
-    setCurrentTime(0); // 组件卸载时重置时间
+    // 设置为当前时间
+    const currentTime = new Date();
+    const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
+    // 找到最近的前15分钟刻度
+    const roundedMinutes = Math.floor(minutes / 15) * 15;
+    setCurrentTime(roundedMinutes); // 组件卸载时重置时间
 
     return () => {
       if (intervalRef.current) {
@@ -363,6 +386,15 @@ const Timeline: React.FC = () => {
             alignItems="center"
             sx={{ mb: 2, flexWrap: "wrap", gap: 1 }}
           >
+            <Tooltip title="后退一天">
+              <IconButton
+                color="primary"
+                onClick={handleDayStepBackward}
+                size="small"
+              >
+                <FiSkipBack />
+              </IconButton>
+            </Tooltip>
             {/* 日期选择器 */}
             <DatePicker
               label="模拟数据日期选择"
@@ -379,9 +411,20 @@ const Timeline: React.FC = () => {
               sx={{ width: 180, "& .MuiInputBase-root": { height: 40 } }}
               maxDate={new Date()} // 禁止选取未来的日期
             />
-
+            <Tooltip title="前进一天">
+              <IconButton
+                color="primary"
+                onClick={handleDayStepForward}
+                size="small"
+                disabled={
+                  selectedDate.toDateString() === new Date().toDateString()
+                }
+              >
+                <FiSkipForward />
+              </IconButton>
+            </Tooltip>
             {/* 播放控制按钮 */}
-            <Box sx={{ display: "flex", gap: 1 }}>
+            <Box sx={{ display: "flex", gap: 1 }} className="ml-4">
               {/* 播放间隔选择 */}
               <FormControl size="small" sx={{ minWidth: 100 }}>
                 <InputLabel>播放间隔</InputLabel>
@@ -434,7 +477,7 @@ const Timeline: React.FC = () => {
                 </IconButton>
               </Tooltip>
             </Box>
-            <Box sx={{ display: "flex", gap: 1 }}>
+            <Box sx={{ display: "flex", gap: 1 }} className="ml-4">
               {/* 强制计算时间段 */}
               <FormControl size="small" sx={{ minWidth: 100 }}>
                 <InputLabel>计算时间段</InputLabel>