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

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 { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { zhCN } from "date-fns/locale";
+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}
+                value={dayjs(selectedDate)}
-                onChange={(newValue) =>
+                onChange={(value) => value && handleDateChange(value.toDate())}
-                  handleDateChange(
-                    newValue && "toDate" in newValue
-                      ? newValue.toDate()
-                      : (newValue as Date | null)
-                  )
-                }
                 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 [junctionText, setJunctionText] = useState("pressure");
-  const [pipeText, setPipeText] = useState("");
+  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;

src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx

@@ -13,8 +13,8 @@ import { Close as CloseIcon } from "@mui/icons-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, { Dayjs } from "dayjs";
-import "dayjs/locale/zh-cn";
 import { useMap } from "@app/OlMap/MapComponent";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";

src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx

@@ -24,8 +24,8 @@ import {
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import "dayjs/locale/zh-cn"; // 引入中文包
 import dayjs, { Dayjs } from "dayjs";
-import "dayjs/locale/zh-cn";
 import axios from "axios";
 import moment from "moment";
 import { config, NETWORK_NAME } from "@config/config";

src/components/olmap/BurstPipeAnalysisPanel.tsx

@@ -97,7 +97,7 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
         <Box
           className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
           onClick={handleToggle}
-          sx={{ zIndex: 1300 }}
+          // sx={{ zIndex: 1300 }}
         >
           <Box className="flex flex-col items-center py-3 px-3 gap-1">
             <AnalyticsIcon className="text-[#257DD4] w-5 h-5" />

src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx

@@ -22,8 +22,8 @@ import {
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import "dayjs/locale/zh-cn"; // 引入中文包
 import dayjs, { Dayjs } from "dayjs";
-import "dayjs/locale/zh-cn";
 import axios from "axios";
 import moment from "moment";
 import { config, NETWORK_NAME } from "@config/config";

src/components/olmap/MonitoringPlaceOptimizationPanel.tsx

@@ -87,7 +87,7 @@ const MonitoringPlaceOptimizationPanel: React.FC<
         <Box
           className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
           onClick={handleToggle}
-          sx={{ zIndex: 1300 }}
+          // sx={{ zIndex: 1300 }}
         >
           <Box className="flex flex-col items-center py-3 px-3 gap-1">
             <SensorsIcon className="text-[#257DD4] w-5 h-5" />

src/components/olmap/SCADADataPanel.tsx

@@ -26,6 +26,7 @@ import {
 } from "@mui/icons-material";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { LineChart } from "@mui/x-charts";
+import "dayjs/locale/zh-cn"; // 引入中文包
 import dayjs, { Dayjs } from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
@@ -704,7 +705,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
         <Box sx={{ flex: 1 }}>
           <LineChart
             dataset={filteredDataset}
-            height={480}
+            height={520}
             margin={{ left: 70, right: 40, top: 30, bottom: 90 }}
             xAxis={[
               {
@@ -724,7 +725,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
             ]}
             yAxis={[
               {
-                label: "数值",
+                label: "压力/流量值",
                 labelStyle: {
                   fontSize: 13,
                   fill: "#333",
@@ -1077,7 +1078,10 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
 
           {/* Controls */}
           <Box sx={{ p: 2, backgroundColor: "grey.50" }}>
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <LocalizationProvider
+              dateAdapter={AdapterDayjs}
+              adapterLocale="zh-cn"
+            >
               <Stack spacing={1.5}>
                 <Stack direction="row" spacing={1} alignItems="center">
                   <DateTimePicker

src/components/olmap/SCADADeviceList.tsx

@@ -62,6 +62,7 @@ import Feature from "ol/Feature";
 import { Point } from "ol/geom";
 import { getVectorContext } from "ol/render";
 import { unByKey } from "ol/Observable";
+import "dayjs/locale/zh-cn"; // 引入中文包
 import dayjs, { Dayjs } from "dayjs";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
@@ -1218,7 +1219,10 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
                 请选择要清洗数据的时间段，最长不超过两周（14天）。
               </Alert>
 
-              <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <LocalizationProvider
+                dateAdapter={AdapterDayjs}
+                adapterLocale="zh-cn"
+              >
                 <DateTimePicker
                   label="开始时间"
                   value={cleanStartTime}