From 594d40fe5208415b49f325bb0460b874d7bffb7f Mon Sep 17 00:00:00 2001 From: JIANG Date: Fri, 7 Nov 2025 11:18:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5=E6=97=A5=E6=9C=9F=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E4=B8=AD=E6=96=87=E5=8C=85=EF=BC=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/OlMap/Controls/Timeline.tsx | 22 +++++++------------ src/app/OlMap/MapComponent.tsx | 10 ++++----- .../BurstPipeAnalysis/AnalysisParameters.tsx | 2 +- .../olmap/BurstPipeAnalysis/SchemeQuery.tsx | 2 +- .../olmap/BurstPipeAnalysisPanel.tsx | 2 +- .../SchemeQuery.tsx | 2 +- .../MonitoringPlaceOptimizationPanel.tsx | 2 +- src/components/olmap/SCADADataPanel.tsx | 10 ++++++--- src/components/olmap/SCADADeviceList.tsx | 6 ++++- 9 files changed, 30 insertions(+), 28 deletions(-) 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天）。 - +