diff --git a/src/app/OlMap/Controls/Timeline.tsx b/src/app/OlMap/Controls/Timeline.tsx index 096e6f1..a5902b4 100644 --- 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 = ({ // 检查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 = ({ return (
- + = ({ {/* 日期选择器 */} - 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} /> diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx index 2e294fb..942669a 100644 --- a/src/app/OlMap/MapComponent.tsx +++ b/src/app/OlMap/MapComponent.tsx @@ -130,8 +130,8 @@ const MapComponent: React.FC = ({ 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 = ({ 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; diff --git a/src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx b/src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx index 25e5ee5..7bb9675 100644 --- 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"; diff --git a/src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx b/src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx index 3ef6ef5..187a17e 100644 --- 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"; diff --git a/src/components/olmap/BurstPipeAnalysisPanel.tsx b/src/components/olmap/BurstPipeAnalysisPanel.tsx index aa1cf4c..1cf181f 100644 --- a/src/components/olmap/BurstPipeAnalysisPanel.tsx +++ b/src/components/olmap/BurstPipeAnalysisPanel.tsx @@ -97,7 +97,7 @@ const BurstPipeAnalysisPanel: React.FC = ({ diff --git a/src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx b/src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx index 43be43a..f0f7b05 100644 --- 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"; diff --git a/src/components/olmap/MonitoringPlaceOptimizationPanel.tsx b/src/components/olmap/MonitoringPlaceOptimizationPanel.tsx index eb75de5..4be86a1 100644 --- a/src/components/olmap/MonitoringPlaceOptimizationPanel.tsx +++ b/src/components/olmap/MonitoringPlaceOptimizationPanel.tsx @@ -87,7 +87,7 @@ const MonitoringPlaceOptimizationPanel: React.FC< diff --git a/src/components/olmap/SCADADataPanel.tsx b/src/components/olmap/SCADADataPanel.tsx index adad948..aec3d5a 100644 --- 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 = ({ = ({ ]} yAxis={[ { - label: "数值", + label: "压力/流量值", labelStyle: { fontSize: 13, fill: "#333", @@ -1077,7 +1078,10 @@ const SCADADataPanel: React.FC = ({ {/* Controls */} - + = ({ 请选择要清洗数据的时间段,最长不超过两周(14天)。 - +