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

2025-11-07 11:18:50 +08:00
parent 4f0714b5f6
commit 594d40fe52
9 changed files with 30 additions and 28 deletions
--- a/src/app/OlMap/Controls/Timeline.tsx
+++ b/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="前进一天">
--- a/src/app/OlMap/MapComponent.tsx
+++ b/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;
--- a/src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx
+++ b/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";
--- a/src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx
+++ b/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";
--- a/src/components/olmap/BurstPipeAnalysisPanel.tsx
+++ b/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" />
--- a/src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx
+++ b/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";
--- a/src/components/olmap/MonitoringPlaceOptimizationPanel.tsx
+++ b/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" />
--- a/src/components/olmap/SCADADataPanel.tsx
+++ b/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
--- a/src/components/olmap/SCADADeviceList.tsx
+++ b/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}