新增统计饼图显示；调整组件结构

src/components/olmap/HealthRiskAnalysis/HealthRiskContext.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import React, { createContext, useContext, useState, ReactNode, Dispatch, SetStateAction } from "react";
+import { PredictionResult } from "./types";
+
+interface HealthRiskContextType {
+  predictionResults: PredictionResult[];
+  setPredictionResults: Dispatch<SetStateAction<PredictionResult[]>>;
+  currentYear: number;
+  setCurrentYear: Dispatch<SetStateAction<number>>;
+}
+
+const HealthRiskContext = createContext<HealthRiskContextType | undefined>(undefined);
+
+export const HealthRiskProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [predictionResults, setPredictionResults] = useState<PredictionResult[]>([]);
+  const [currentYear, setCurrentYear] = useState<number>(4);
+
+  return (
+    <HealthRiskContext.Provider
+      value={{
+        predictionResults,
+        setPredictionResults,
+        currentYear,
+        setCurrentYear,
+      }}
+    >
+      {children}
+    </HealthRiskContext.Provider>
+  );
+};
+
+export const useHealthRisk = () => {
+  const context = useContext(HealthRiskContext);
+  if (context === undefined) {
+    throw new Error("useHealthRisk must be used within a HealthRiskProvider");
+  }
+  return context;
+};

src/components/olmap/HealthRiskAnalysis/HealthRiskPieChart.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import React, { useMemo } from "react";
+import ReactECharts from "echarts-for-react";
+import { Paper, Typography, Box, Chip, IconButton, Tooltip, Stack } from "@mui/material";
+import { ChevronLeft, ChevronRight, PieChart } from "@mui/icons-material";
+import { RAINBOW_COLORS, RISK_BREAKS, RISK_LABELS } from "./types";
+import { useHealthRisk } from "./HealthRiskContext";
+
+const HealthRiskPieChart: React.FC = () => {
+  const { predictionResults, currentYear } = useHealthRisk();
+  const [isExpanded, setIsExpanded] = React.useState<boolean>(true);
+  const [hoveredYearIndex, setHoveredYearIndex] = React.useState<number | null>(
+    null
+  );
+
+  const datasetSource = useMemo(() => {
+    if (!predictionResults || predictionResults.length === 0) return [];
+
+    const years = Array.from({ length: 70 }, (_, i) => 4 + i); // 4 to 73
+    const header = ["Risk Level", ...years.map(String)];
+
+    const rows = RISK_LABELS.map((label, riskIdx) => {
+      const row: (string | number)[] = [label];
+      years.forEach((year) => {
+        let count = 0;
+        predictionResults.forEach((result) => {
+          const { y } = result.survival_function;
+          const index = year - 4;
+          if (index >= 0 && index < y.length) {
+            const probability = y[index];
+            if (
+              probability >= RISK_BREAKS[riskIdx] &&
+              probability < RISK_BREAKS[riskIdx + 1]
+            ) {
+              count++;
+            } else if (riskIdx === 9 && probability === 1.0) {
+              count++;
+            }
+          }
+        });
+        row.push(count);
+      });
+      return row;
+    });
+
+    return [header, ...rows];
+  }, [predictionResults]);
+
+  const displayDimension = useMemo(() => {
+    if (hoveredYearIndex !== null) {
+      return hoveredYearIndex + 1;
+    }
+    // 默认显示当前时间轴年份
+    return Math.max(1, Math.min(70, currentYear - 3));
+  }, [hoveredYearIndex, currentYear]);
+
+  const option = {
+    legend: {
+      top: "48%",
+      left: "center",
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        fontSize: 10,
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      showContent: true,
+      confine: true,
+    },
+    dataset: {
+      source: datasetSource,
+    },
+    xAxis: {
+      type: "category",
+      axisLabel: {
+        fontSize: 10,
+      },
+    },
+    yAxis: {
+      gridIndex: 0,
+      axisLabel: {
+        fontSize: 10,
+      },
+    },
+    grid: {
+      top: "62%",
+      bottom: "8%",
+      left: "12%",
+      right: "5%",
+    },
+    series: [
+      ...RISK_LABELS.map((_, i) => ({
+        type: "line",
+        smooth: true,
+        seriesLayoutBy: "row",
+        emphasis: { focus: "series" },
+        itemStyle: { color: RAINBOW_COLORS[i] },
+        symbol: "none",
+      })),
+      {
+        type: "pie",
+        id: "pie",
+        radius: "35%",
+        center: ["50%", "24%"],
+        emphasis: {
+          focus: "self",
+        },
+        label: {
+          formatter: "{b}: {@[" + displayDimension + "]} ({d}%)",
+          fontSize: 10,
+        },
+        encode: {
+          itemName: "Risk Level",
+          value: displayDimension,
+          tooltip: displayDimension,
+        },
+      },
+    ],
+  };
+
+  const onEvents = {
+    updateAxisPointer: (event: any) => {
+      const xAxisInfo = event.axesInfo[0];
+      if (xAxisInfo) {
+        setHoveredYearIndex(xAxisInfo.value);
+      }
+    },
+    finished: () => {
+      // 可以在这里处理一些渲染完成后的逻辑
+    },
+  };
+
+  const chartRef = React.useRef<any>(null);
+
+  // 监听鼠标离开图表容器，恢复到当前年份
+  const handleMouseLeave = () => {
+    setHoveredYearIndex(null);
+  };
+
+  if (!predictionResults || predictionResults.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-120 flex flex-col backdrop-blur-sm z-[1000] opacity-95 hover:opacity-100 transition-all duration-300">
+      {/* 头部 */}
+      <div className="flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white">
+        <div className="flex items-center gap-2">
+          <svg
+            className="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
+            />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"
+            />
+          </svg>
+          <h3 className="text-lg font-semibold">管道健康风险分布</h3>
+          <Chip
+            size="small"
+            label={`${predictionResults.length}`}
+            sx={{
+              backgroundColor: "rgba(255,255,255,0.2)",
+              color: "white",
+              fontWeight: "bold",
+              ml: 1,
+            }}
+          />
+        </div>
+      </div>
+
+      {/* 内容区域 */}
+      <div className="p-2 h-[550px]" onMouseLeave={handleMouseLeave}>
+        <ReactECharts
+          ref={(e) => {
+            chartRef.current = e;
+          }}
+          option={option}
+          onEvents={onEvents}
+          style={{ height: "100%", width: "100%" }}
+          opts={{ renderer: "canvas" }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HealthRiskPieChart;

src/components/olmap/HealthRiskAnalysis/Timeline.tsx

@@ -0,0 +1,699 @@
+"use client";
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { useNotification } from "@refinedev/core";
+import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
+import { parseColor } from "@/utils/parseColor";
+
+import {
+  Box,
+  Button,
+  Slider,
+  Typography,
+  Paper,
+  MenuItem,
+  Select,
+  FormControl,
+  InputLabel,
+  IconButton,
+  Stack,
+  Tooltip,
+} from "@mui/material";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import "dayjs/locale/zh-cn"; // 引入中文包
+import dayjs from "dayjs";
+import { PlayArrow, Pause, Stop, Refresh } from "@mui/icons-material";
+import { TbArrowBackUp, TbArrowForwardUp } from "react-icons/tb";
+import { FiSkipBack, FiSkipForward } from "react-icons/fi";
+import { useData } from "../../../app/OlMap/MapComponent";
+import { config, NETWORK_NAME } from "@/config/config";
+import { useMap } from "../../../app/OlMap/MapComponent";
+import { useHealthRisk } from "./HealthRiskContext";
+import {
+  PredictionResult,
+  SurvivalFunction,
+  RAINBOW_COLORS,
+  RISK_BREAKS,
+} from "./types";
+
+const backendUrl = config.BACKEND_URL;
+
+interface TimelineProps {
+  schemeDate?: Date;
+  timeRange?: { start: Date; end: Date };
+  disableDateSelection?: boolean;
+  schemeName?: string;
+}
+
+const Timeline: React.FC<TimelineProps> = ({
+  disableDateSelection = false,
+}) => {
+  const data = useData();
+  if (!data) {
+    return <div>Loading...</div>; // 或其他占位符
+  }
+  const { open } = useNotification();
+  const {
+    predictionResults,
+    setPredictionResults,
+    currentYear,
+    setCurrentYear,
+  } = useHealthRisk();
+
+  const [selectedDateTime, setSelectedDateTime] = useState<Date>(new Date());
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [playInterval, setPlayInterval] = useState<number>(15000); // 毫秒
+  const [isPredicting, setIsPredicting] = useState<boolean>(false);
+  const [pipeLayer, setPipeLayer] = useState<WebGLVectorTileLayer | null>(null);
+
+  // 使用 ref 存储当前的健康数据，供事件监听器读取，避免重复绑定
+  const healthDataRef = useRef<Map<string, number>>(new Map());
+
+  // 计算时间轴范围 (4-73)
+  const minTime = 4;
+  const maxTime = 73;
+
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const timelineRef = useRef<HTMLDivElement>(null);
+
+  // 添加防抖引用
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 时间刻度数组 (4-73，每3个单位一个刻度)
+  const valueMarks = Array.from({ length: 24 }, (_, i) => ({
+    value: 4 + i * 3,
+    label: `${4 + i * 3}`,
+  }));
+
+  // 播放时间间隔选项
+  const intervalOptions = [
+    { value: 5000, label: "5秒" },
+    { value: 10000, label: "10秒" },
+    { value: 15000, label: "15秒" },
+    { value: 20000, label: "20秒" },
+  ];
+
+  // 处理时间轴滑动
+  const handleSliderChange = useCallback(
+    (event: Event, newValue: number | number[]) => {
+      const value = Array.isArray(newValue) ? newValue[0] : newValue;
+      // 如果有时间范围限制，只允许在范围内拖动
+      if (value < minTime || value > maxTime) {
+        return;
+      }
+      // 防抖设置currentYear，避免频繁触发数据获取
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      debounceRef.current = setTimeout(() => {
+        setCurrentYear(value);
+      }, 500); // 500ms 防抖延迟
+    },
+    [minTime, maxTime]
+  );
+
+  // 播放控制
+  const handlePlay = useCallback(() => {
+    if (!isPlaying) {
+      setIsPlaying(true);
+
+      intervalRef.current = setInterval(() => {
+        setCurrentYear((prev: number) => {
+          let next = prev + 1;
+          if (next > maxTime) next = minTime;
+          return next;
+        });
+      }, playInterval);
+    }
+  }, [isPlaying, playInterval]);
+
+  const handlePause = useCallback(() => {
+    setIsPlaying(false);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const handleStop = useCallback(() => {
+    setIsPlaying(false);
+    setSelectedDateTime(new Date());
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  // 步进控制
+  const handleDayStepBackward = useCallback(() => {
+    setSelectedDateTime((prev: Date) => {
+      const newDate = new Date(prev);
+      newDate.setDate(newDate.getDate() - 1);
+      return newDate;
+    });
+  }, []);
+  const handleDayStepForward = useCallback(() => {
+    setSelectedDateTime((prev: Date) => {
+      const newDate = new Date(prev);
+      newDate.setDate(newDate.getDate() + 1);
+      return newDate;
+    });
+  }, []);
+  const handleStepBackward = useCallback(() => {
+    setCurrentYear((prev: number) => {
+      let next = prev - 1;
+      if (next < minTime) next = maxTime;
+      return next;
+    });
+  }, [minTime, maxTime]);
+
+  const handleStepForward = useCallback(() => {
+    setCurrentYear((prev: number) => {
+      let next = prev + 1;
+      if (next > maxTime) next = minTime;
+      return next;
+    });
+  }, [minTime, maxTime]);
+
+  // 日期时间选择处理
+  const handleDateTimeChange = useCallback((newDate: Date | null) => {
+    if (newDate) {
+      // 将时间向下取整到最近的15分钟
+      const minutes = newDate.getHours() * 60 + newDate.getMinutes();
+      const roundedMinutes = Math.floor(minutes / 15) * 15;
+      const roundedDate = new Date(newDate);
+      roundedDate.setHours(
+        Math.floor(roundedMinutes / 60),
+        roundedMinutes % 60,
+        0,
+        0
+      );
+
+      setSelectedDateTime(roundedDate);
+    }
+  }, []);
+
+  // 播放间隔改变处理
+  const handleIntervalChange = useCallback(
+    (event: any) => {
+      const newInterval = event.target.value;
+      setPlayInterval(newInterval);
+
+      // 如果正在播放，重新启动定时器
+      if (isPlaying && intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = setInterval(() => {
+          setCurrentYear((prev: number) => {
+            let next = prev + 1;
+            if (next > maxTime) next = minTime;
+            return next;
+          });
+        }, newInterval);
+      }
+    },
+    [isPlaying]
+  );
+
+  // 组件加载时设置初始时间为当前时间的最近15分钟
+  useEffect(() => {
+    const now = new Date();
+    const minutes = now.getHours() * 60 + now.getMinutes();
+    // 向下取整到最近的15分钟刻度
+    const roundedMinutes = Math.floor(minutes / 15) * 15;
+    const roundedDate = new Date(now);
+    roundedDate.setHours(
+      Math.floor(roundedMinutes / 60),
+      roundedMinutes % 60,
+      0,
+      0
+    );
+    setSelectedDateTime(roundedDate);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [pipeLayer]);
+
+  // 获取地图实例
+  const map = useMap();
+
+  // 根据索引从 survival_function 中获取生存概率
+  const getSurvivalProbabilityAtYear = useCallback(
+    (survivalFunc: SurvivalFunction, index: number): number => {
+      const { y } = survivalFunc;
+      if (y.length === 0) return 1;
+
+      // 确保索引在范围内
+      const safeIndex = Math.max(0, Math.min(index, y.length - 1));
+      return y[safeIndex];
+    },
+    []
+  );
+
+  // 更新管道图层中的 healthRisk 属性
+  const updatePipeHealthData = useCallback(
+    (healthData: Map<string, number>) => {
+      if (!pipeLayer) return;
+      const source = pipeLayer.getSource() as any;
+      if (!source) return;
+
+      const sourceTiles = source.sourceTiles_;
+      if (!sourceTiles) return;
+
+      Object.values(sourceTiles).forEach((vectorTile: any) => {
+        const renderFeatures = vectorTile.getFeatures();
+        if (!renderFeatures || renderFeatures.length === 0) return;
+        renderFeatures.forEach((renderFeature: any) => {
+          const featureId = renderFeature.get("id");
+          const value = healthData.get(featureId);
+          if (value !== undefined) {
+            renderFeature.properties_["healthRisk"] = value;
+          }
+        });
+      });
+    },
+    [pipeLayer]
+  );
+
+  // 监听瓦片加载，为新瓦片设置 healthRisk 属性
+  // 只在 pipeLayer 变化时绑定一次，通过 ref 获取最新数据
+  useEffect(() => {
+    if (!pipeLayer) return;
+    const source = pipeLayer.getSource() as any;
+    if (!source) return;
+
+    const listener = (event: any) => {
+      const vectorTile = event.tile;
+      const renderFeatures = vectorTile.getFeatures();
+      if (!renderFeatures || renderFeatures.length === 0) return;
+
+      const healthData = healthDataRef.current;
+      let i = 0;
+      renderFeatures.forEach((renderFeature: any) => {
+        const featureId = renderFeature.get("id");
+        const value = healthData.get(featureId);
+        if (value !== undefined) {
+          renderFeature.properties_["healthRisk"] = value;
+          // 输出前10个点的信息以供调试
+          if (i < 10) {
+            console.log(
+              `瓦片加载 - 设置特征 ${featureId} 的 healthRisk 为 ${value}`
+            );
+            i++;
+          }
+        }
+      });
+    };
+
+    source.on("tileloadend", listener);
+
+    return () => {
+      source.un("tileloadend", listener);
+    };
+  }, [pipeLayer]);
+
+  // 应用样式到管道图层
+  const applyPipeHealthStyle = useCallback(() => {
+    if (!pipeLayer || predictionResults.length === 0) {
+      return;
+    }
+
+    // 为每条管道计算当前年份的生存概率
+    const pipeHealthData = new Map<string, number>();
+    predictionResults.forEach((result) => {
+      const probability = getSurvivalProbabilityAtYear(
+        result.survival_function,
+        currentYear - 4 // 使用索引 (0-based)
+      );
+      pipeHealthData.set(result.link_id, probability);
+    });
+
+    // 更新 ref 数据
+    healthDataRef.current = pipeHealthData;
+    // 输出前 10 条数据以供调试
+    console.log(
+      `更新健康数据，年份: ${currentYear}`,
+      Array.from(pipeHealthData.entries()).slice(0, 10)
+    );
+
+    // 更新图层数据
+    updatePipeHealthData(pipeHealthData);
+
+    // 获取所有概率值用于分类
+    const probabilities = Array.from(pipeHealthData.values());
+    if (probabilities.length === 0) return;
+
+    // 使用等距分段，从0-1分为十类
+    const breaks = RISK_BREAKS;
+
+    // 生成彩虹色（从紫色到红色，低生存概率=高风险=红色）
+    const colors = RAINBOW_COLORS;
+
+    // 构建 WebGL 样式表达式
+    const colorCases: any[] = [];
+    const widthCases: any[] = [];
+
+    breaks.forEach((breakValue, index) => {
+      if (index < breaks.length - 1) {
+        const colorIndex = Math.floor(
+          (index / (breaks.length - 1)) * (colors.length - 1)
+        );
+        const color = parseColor(colors[colorIndex]);
+
+        // 线宽根据健康风险调整：低生存概率（高风险）用粗线
+        const width = 2 + (1 - index / (breaks.length - 1)) * 4;
+
+        colorCases.push(
+          ["between", ["get", "healthRisk"], breakValue, breaks[index + 1]],
+          [color.r / 255, color.g / 255, color.b / 255, 1]
+        );
+        widthCases.push(
+          ["between", ["get", "healthRisk"], breakValue, breaks[index + 1]],
+          width
+        );
+      }
+    });
+
+    // 应用样式到图层
+    pipeLayer.setStyle({
+      "stroke-color": ["case", ...colorCases, [0.5, 0.5, 0.5, 1]],
+      "stroke-width": ["case", ...widthCases, 2],
+    });
+
+    console.log(
+      `已应用健康风险样式，年份: ${currentYear}, 分段: ${breaks.length}`
+    );
+  }, [
+    pipeLayer,
+    predictionResults,
+    currentYear,
+    getSurvivalProbabilityAtYear,
+    updatePipeHealthData,
+  ]);
+
+  // 初始化管道图层
+  useEffect(() => {
+    if (!map) return;
+
+    const layers = map.getLayers().getArray();
+    const pipesLayer = layers.find(
+      (layer) =>
+        layer instanceof WebGLVectorTileLayer && layer.get("value") === "pipes"
+    ) as WebGLVectorTileLayer | undefined;
+
+    if (pipesLayer) {
+      setPipeLayer(pipesLayer);
+    }
+  }, [map]);
+
+  // 监听依赖变化，更新样式
+  useEffect(() => {
+    if (predictionResults.length > 0 && pipeLayer) {
+      applyPipeHealthStyle();
+    }
+  }, [applyPipeHealthStyle]);
+
+  // 这里防止地图缩放时，瓦片重新加载引起的属性更新出错
+  useEffect(() => {
+    // 监听地图缩放事件，缩放时停止播放
+    if (map) {
+      const onZoom = () => {
+        handlePause();
+      };
+      map.getView().on("change:resolution", onZoom);
+
+      // 清理事件监听
+      return () => {
+        map.getView().un("change:resolution", onZoom);
+      };
+    }
+  }, [map, handlePause]);
+
+  const handleSimulatePrediction = async () => {
+    if (!NETWORK_NAME) {
+      open?.({
+        type: "error",
+        message: "管网名称缺失，无法进行模拟预测。",
+      });
+      return;
+    }
+
+    // 提前提取日期和时间值，避免异步操作期间被拖动改变
+    const calculationDateTime = selectedDateTime;
+
+    // 从日期时间选择器获取完整的日期时间，并转换为UTC时间
+    const query_time = calculationDateTime.toISOString().slice(0, 19) + "Z";
+
+    setIsPredicting(true);
+    // 显示处理中的通知
+    open?.({
+      type: "progress",
+      message: "正在模拟预测，请稍候...",
+      undoableTimeout: 3,
+    });
+    try {
+      const response = await fetch(
+        `${backendUrl}/timescaledb/composite/pipeline-health-prediction?query_time=${query_time}&network_name=${NETWORK_NAME}`
+      );
+
+      if (response.ok) {
+        const results: PredictionResult[] = await response.json();
+        setPredictionResults(results);
+        console.log("预测结果:", results[0], results[1], results.length);
+        open?.({
+          type: "success",
+          message: `模拟预测完成，获取到 ${results.length} 条管道数据`,
+        });
+      } else {
+        open?.({
+          type: "error",
+          message: "模拟预测失败",
+        });
+      }
+    } catch (error) {
+      console.error("Simulation prediction failed:", error);
+      open?.({
+        type: "error",
+        message: "模拟预测时发生错误",
+      });
+    } finally {
+      setIsPredicting(false);
+    }
+  };
+
+  return (
+    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300">
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
+        <Paper
+          elevation={3}
+          sx={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1000,
+            p: 2,
+            backgroundColor: "rgba(255, 255, 255, 0.95)",
+            backdropFilter: "blur(10px)",
+          }}
+        >
+          <Box sx={{ width: "100%" }}>
+            {/* 控制按钮栏 */}
+            <Stack
+              direction="row"
+              spacing={2}
+              alignItems="center"
+              sx={{ mb: 2, flexWrap: "wrap", gap: 1 }}
+            >
+              <Tooltip title="后退一天">
+                <IconButton
+                  color="primary"
+                  onClick={handleDayStepBackward}
+                  size="small"
+                  disabled={disableDateSelection}
+                >
+                  <FiSkipBack />
+                </IconButton>
+              </Tooltip>
+              {/* 日期时间选择器 */}
+              <DateTimePicker
+                label="模拟数据日期时间"
+                value={dayjs(selectedDateTime)}
+                onChange={(value) =>
+                  value && handleDateTimeChange(value.toDate())
+                }
+                format="YYYY-MM-DD HH:mm"
+                views={["year", "month", "day", "hours", "minutes"]}
+                minutesStep={15}
+                sx={{ width: 200 }}
+                slotProps={{
+                  textField: {
+                    size: "small",
+                  },
+                }}
+                maxDateTime={dayjs(new Date())} // 禁止选取未来的日期时间
+                disabled={disableDateSelection}
+                ampm={false}
+              />
+              <Tooltip title="前进一天">
+                <IconButton
+                  color="primary"
+                  onClick={handleDayStepForward}
+                  size="small"
+                  disabled={
+                    disableDateSelection ||
+                    selectedDateTime.toDateString() ===
+                      new Date().toDateString()
+                  }
+                >
+                  <FiSkipForward />
+                </IconButton>
+              </Tooltip>
+              {/* 播放控制按钮 */}
+              <Box sx={{ display: "flex", gap: 1 }} className="ml-4">
+                {/* 播放间隔选择 */}
+                <FormControl size="small" sx={{ minWidth: 100 }}>
+                  <InputLabel>播放间隔</InputLabel>
+                  <Select
+                    value={playInterval}
+                    label="播放间隔"
+                    onChange={handleIntervalChange}
+                  >
+                    {intervalOptions.map((option) => (
+                      <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+
+                <Tooltip title="后退一步">
+                  <IconButton
+                    color="primary"
+                    onClick={handleStepBackward}
+                    size="small"
+                  >
+                    <TbArrowBackUp />
+                  </IconButton>
+                </Tooltip>
+
+                <Tooltip title={isPlaying ? "暂停" : "播放"}>
+                  <IconButton
+                    color="primary"
+                    onClick={isPlaying ? handlePause : handlePlay}
+                    size="small"
+                  >
+                    {isPlaying ? <Pause /> : <PlayArrow />}
+                  </IconButton>
+                </Tooltip>
+
+                <Tooltip title="前进一步">
+                  <IconButton
+                    color="primary"
+                    onClick={handleStepForward}
+                    size="small"
+                  >
+                    <TbArrowForwardUp />
+                  </IconButton>
+                </Tooltip>
+
+                <Tooltip title="停止">
+                  <IconButton
+                    color="secondary"
+                    onClick={handleStop}
+                    size="small"
+                  >
+                    <Stop />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <Box sx={{ display: "flex", gap: 1 }} className="ml-4">
+                {/* 功能按钮 */}
+                <Tooltip title="模拟预测">
+                  <Button
+                    variant="outlined"
+                    startIcon={<Refresh />}
+                    onClick={handleSimulatePrediction}
+                    disabled={isPredicting}
+                    sx={{ height: 40 }}
+                  >
+                    模拟预测
+                  </Button>
+                </Tooltip>
+              </Box>
+
+              {/* 当前时间显示 */}
+              <Typography
+                variant="h6"
+                sx={{
+                  ml: "auto",
+                  fontSize: "1.2rem",
+                  fontWeight: "bold",
+                  color: "primary.main",
+                }}
+              >
+                预测年份：{currentYear}
+              </Typography>
+            </Stack>
+
+            <Box ref={timelineRef} sx={{ px: 2, position: "relative" }}>
+              <Slider
+                value={currentYear}
+                min={minTime}
+                max={maxTime} // 4-73的范围
+                step={1} // 每1个单位一个步进
+                marks={valueMarks} // 显示刻度
+                onChange={handleSliderChange}
+                valueLabelDisplay="auto"
+                sx={{
+                  zIndex: 10,
+                  height: 8,
+                  "& .MuiSlider-track": {
+                    backgroundColor: "primary.main",
+                    height: 6,
+                    display: "block",
+                  },
+                  "& .MuiSlider-rail": {
+                    backgroundColor: "grey.300",
+                    height: 6,
+                  },
+                  "& .MuiSlider-thumb": {
+                    height: 20,
+                    width: 20,
+                    backgroundColor: "primary.main",
+                    border: "2px solid #fff",
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+                    "&:hover": {
+                      boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+                    },
+                  },
+                  "& .MuiSlider-mark": {
+                    backgroundColor: "grey.400",
+                    height: 4,
+                    width: 2,
+                  },
+                  "& .MuiSlider-markActive": {
+                    backgroundColor: "primary.main",
+                  },
+                  "& .MuiSlider-markLabel": {
+                    fontSize: "0.75rem",
+                    color: "grey.600",
+                  },
+                }}
+              />
+            </Box>
+          </Box>
+        </Paper>
+      </LocalizationProvider>
+    </div>
+  );
+};
+
+export default Timeline;

src/components/olmap/HealthRiskAnalysis/types.ts

@@ -0,0 +1,42 @@
+export interface SurvivalFunction {
+  x: number[]; // 时间点（年）
+  y: number[]; // 生存概率
+  a: number;
+  b: number;
+}
+
+export interface PredictionResult {
+  link_id: string;
+  diameter: number;
+  velocity: number;
+  pressure: number;
+  survival_function: SurvivalFunction;
+}
+
+export const RAINBOW_COLORS = [
+  "rgba(255, 0, 0, 0.9)", // 红 (0.0 - 0.1) - 高风险
+  "rgba(255, 127, 0, 0.9)", // 橙
+  "rgba(255, 215, 0, 0.9)", // 金黄
+  "rgba(199, 224, 0, 0.9)", // 黄绿
+  "rgba(76, 175, 80, 0.9)", // 中绿
+  "rgba(0, 158, 115, 0.9)", // 青绿
+  "rgba(0, 188, 212, 0.9)", // 青色
+  "rgba(33, 150, 243, 0.9)", // 天蓝
+  "rgba(63, 81, 181, 0.9)", // 靛青
+  "rgba(142, 68, 173, 0.9)", // 紫 (0.9 - 1.0) - 低风险
+];
+
+export const RISK_BREAKS = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
+
+export const RISK_LABELS = [
+  "0.0 - 0.1 (极高风险)",
+  "0.1 - 0.2",
+  "0.2 - 0.3",
+  "0.3 - 0.4",
+  "0.4 - 0.5",
+  "0.5 - 0.6",
+  "0.6 - 0.7",
+  "0.7 - 0.8",
+  "0.8 - 0.9",
+  "0.9 - 1.0 (极低风险)",
+];