引入日期选择中文包，更新部分样式

src/app/OlMap/Controls/Timeline.tsx

@@ -19,8 +19,9 @@ import {
 } from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { zhCN } from "date-fns/locale";
+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 { TbRewindBackward15, TbRewindForward15 } from "react-icons/tb";
 import { FiSkipBack, FiSkipForward } from "react-icons/fi";
@@ -106,7 +107,6 @@ const Timeline: React.FC<TimelineProps> = ({
     // 检查node缓存
     if (junctionProperties !== "") {
       const nodeCacheKey = `${query_time}_${junctionProperties}_${schemeName}`;
-      console.log("Node Cache Key:", nodeCacheKey);
       if (nodeCacheRef.current.has(nodeCacheKey)) {
         nodeRecords = nodeCacheRef.current.get(nodeCacheKey)!;
       } else {
@@ -528,7 +528,7 @@ const Timeline: React.FC<TimelineProps> = ({
 
   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={AdapterDateFns} adapterLocale={zhCN}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
         <Paper
           elevation={3}
           sx={{
@@ -563,18 +563,12 @@ const Timeline: React.FC<TimelineProps> = ({
               {/* 日期选择器 */}
               <DatePicker
                 label="模拟数据日期选择"
-                value={selectedDate}
-                onChange={(newValue) =>
-                  handleDateChange(
-                    newValue && "toDate" in newValue
-                      ? newValue.toDate()
-                      : (newValue as Date | null)
-                  )
-                }
+                value={dayjs(selectedDate)}
+                onChange={(value) => value && handleDateChange(value.toDate())}
                 enableAccessibleFieldDOMStructure={false}
-                format="yyyy-MM-dd"
+                format="YYYY-MM-DD"
                 sx={{ width: 180, "& .MuiInputBase-root": { height: 40 } }}
-                maxDate={new Date()} // 禁止选取未来的日期
+                maxDate={dayjs(new Date())} // 禁止选取未来的日期
                 disabled={disableDateSelection}
               />
               <Tooltip title="前进一天">

src/app/OlMap/MapComponent.tsx

@@ -130,8 +130,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [showPipeText, setShowPipeText] = useState(false); // 控制管道文本显示
   const [showJunctionTextLayer, setShowJunctionTextLayer] = useState(true); // 控制节点文本图层显示
   const [showPipeTextLayer, setShowPipeTextLayer] = useState(true); // 控制管道文本图层显示
-  const [junctionText, setJunctionText] = useState("");
-  const [pipeText, setPipeText] = useState("");
+  const [junctionText, setJunctionText] = useState("pressure");
+  const [pipeText, setPipeText] = useState("flow");
   const flowAnimation = useRef(false); // 添加动画控制标志
   const [currentZoom, setCurrentZoom] = useState(12); // 当前缩放级别
 
@@ -657,14 +657,14 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     junctionText,
     pipeText,
   ]);
-
+  // 控制流动动画开关
   useEffect(() => {
-    if (pipeText === "flow") {
+    if (pipeText === "flow" && currentPipeCalData.length > 0) {
       flowAnimation.current = true;
     } else {
       flowAnimation.current = false;
     }
-  }, [pipeText]);
+  }, [currentPipeCalData, pipeText]);
   // 计算值更新时，更新 junctionData 和 pipeData
   useEffect(() => {
     const junctionProperties = junctionText;