From 70ac7ba177991c12bf4a25c676a4ee5f1439189c Mon Sep 17 00:00:00 2001
From: JIANG <huarch97@gmail.com>
Date: Wed, 26 Nov 2025 11:44:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E6=97=B6=E9=97=B4=E8=BD=B4=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20draggable=20=E7=89=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                   |  29 +-
 package.json                        |   1 +
 src/app/OlMap/Controls/Timeline.tsx | 503 ++++++++++++++--------------
 src/app/OlMap/MapComponent.tsx      |  13 +-
 4 files changed, 280 insertions(+), 266 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0799e81..3c5a585 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "postcss": "^8.5.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-draggable": "^4.5.0",
         "react-icons": "^5.5.0",
         "react-window": "^1.8.10",
         "tailwindcss": "^4.1.13"
@@ -3752,20 +3753,6 @@
         }
       }
     },
-    "node_modules/@mui/base/node_modules/@mui/types": {
-      "version": "7.2.24",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
-      "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.5.0.tgz",
@@ -16388,6 +16375,20 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.5.0.tgz",
+      "integrity": "sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.63.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
diff --git a/package.json b/package.json
index 1b68913..a73be85 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-draggable": "^4.5.0",
     "react-icons": "^5.5.0",
     "react-window": "^1.8.10",
     "tailwindcss": "^4.1.13"
diff --git a/src/app/OlMap/Controls/Timeline.tsx b/src/app/OlMap/Controls/Timeline.tsx
index a7334b0..b9735d0 100644
--- a/src/app/OlMap/Controls/Timeline.tsx
+++ b/src/app/OlMap/Controls/Timeline.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useNotification } from "@refinedev/core";
+import Draggable from "react-draggable";
 
 import {
   Box,
@@ -84,6 +85,9 @@ const Timeline: React.FC<TimelineProps> = ({
       setSelectedDate(schemeDate);
     }
   }, [schemeDate]);
+  // 新增：用于 Draggable 的 nodeRef
+  const draggableRef = useRef<HTMLDivElement>(null);
+
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   // 添加缓存引用
@@ -527,256 +531,263 @@ 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={AdapterDayjs} adapterLocale="zh-cn">
-        <Paper
-          elevation={3}
-          sx={{
-            position: "absolute",
-            bottom: 0,
-            left: 0,
-            right: 0,
-            zIndex: 1000,
-            p: 2,
-            backgroundColor: "rgba(255, 255, 255, 0.95)",
-            backdropFilter: "blur(10px)",
-          }}
-        >
-          <Box sx={{ width: "100%" }}>
-            {/* 控制按钮栏 */}
-            <Stack
-              direction="row"
-              spacing={2}
-              alignItems="center"
-              sx={{ mb: 2, flexWrap: "wrap", gap: 1 }}
-            >
-              <Tooltip title="后退一天">
-                <IconButton
-                  color="primary"
-                  onClick={handleDayStepBackward}
-                  size="small"
-                  disabled={disableDateSelection}
-                >
-                  <FiSkipBack />
-                </IconButton>
-              </Tooltip>
-              {/* 日期选择器 */}
-              <DatePicker
-                label="模拟数据日期选择"
-                value={dayjs(selectedDate)}
-                onChange={(value) => value && handleDateChange(value.toDate())}
-                enableAccessibleFieldDOMStructure={false}
-                format="YYYY-MM-DD"
-                sx={{ width: 180, "& .MuiInputBase-root": { height: 40 } }}
-                maxDate={dayjs(new Date())} // 禁止选取未来的日期
-                disabled={disableDateSelection}
-              />
-              <Tooltip title="前进一天">
-                <IconButton
-                  color="primary"
-                  onClick={handleDayStepForward}
-                  size="small"
-                  disabled={
-                    disableDateSelection ||
-                    selectedDate.toDateString() === new Date().toDateString()
-                  }
-                >
-                  <FiSkipForward />
-                </IconButton>
-              </Tooltip>
-              {/* 播放控制按钮 */}
-              <Box sx={{ display: "flex", gap: 1 }} className="ml-4">
-                {/* 播放间隔选择 */}
-                <FormControl size="small" sx={{ minWidth: 100 }}>
-                  <InputLabel>播放间隔</InputLabel>
-                  <Select
-                    value={playInterval}
-                    label="播放间隔"
-                    onChange={handleIntervalChange}
-                  >
-                    {intervalOptions.map((option) => (
-                      <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-
-                <Tooltip title="后退一步">
-                  <IconButton
-                    color="primary"
-                    onClick={handleStepBackward}
-                    size="small"
-                  >
-                    <TbRewindBackward15 />
-                  </IconButton>
-                </Tooltip>
-
-                <Tooltip title={isPlaying ? "暂停" : "播放"}>
-                  <IconButton
-                    color="primary"
-                    onClick={isPlaying ? handlePause : handlePlay}
-                    size="small"
-                  >
-                    {isPlaying ? <Pause /> : <PlayArrow />}
-                  </IconButton>
-                </Tooltip>
-
-                <Tooltip title="前进一步">
-                  <IconButton
-                    color="primary"
-                    onClick={handleStepForward}
-                    size="small"
-                  >
-                    <TbRewindForward15 />
-                  </IconButton>
-                </Tooltip>
-
-                <Tooltip title="停止">
-                  <IconButton
-                    color="secondary"
-                    onClick={handleStop}
-                    size="small"
-                  >
-                    <Stop />
-                  </IconButton>
-                </Tooltip>
-              </Box>
-              <Box sx={{ display: "flex", gap: 1 }} className="ml-4">
-                {/* 强制计算时间段 */}
-                <FormControl size="small" sx={{ minWidth: 100 }}>
-                  <InputLabel>计算时间段</InputLabel>
-                  <Select
-                    value={calculatedInterval}
-                    label="强制计算时间段"
-                    onChange={handleCalculatedIntervalChange}
-                  >
-                    {calculatedIntervalOptions.map((option) => (
-                      <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-
-                {/* 功能按钮 */}
-                <Tooltip title="强制计算">
-                  <Button
-                    variant="outlined"
-                    size="small"
-                    startIcon={<Refresh />}
-                    onClick={handleForceCalculate}
-                    disabled={isCalculating}
-                  >
-                    强制计算
-                  </Button>
-                </Tooltip>
-              </Box>
-
-              {/* 当前时间显示 */}
-              <Typography
-                variant="h6"
-                sx={{
-                  ml: "auto",
-                  fontWeight: "bold",
-                  color: "primary.main",
-                }}
+    <Draggable nodeRef={draggableRef}>
+      <div
+        ref={draggableRef}
+        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={AdapterDayjs} adapterLocale="zh-cn">
+          <Paper
+            elevation={3}
+            sx={{
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              zIndex: 1000,
+              p: 2,
+              backgroundColor: "rgba(255, 255, 255, 0.95)",
+              backdropFilter: "blur(10px)",
+            }}
+          >
+            <Box sx={{ width: "100%" }}>
+              {/* 控制按钮栏 */}
+              <Stack
+                direction="row"
+                spacing={2}
+                alignItems="center"
+                sx={{ mb: 2, flexWrap: "wrap", gap: 1 }}
               >
-                {formatTime(currentTime)}
-              </Typography>
-            </Stack>
+                <Tooltip title="后退一天">
+                  <IconButton
+                    color="primary"
+                    onClick={handleDayStepBackward}
+                    size="small"
+                    disabled={disableDateSelection}
+                  >
+                    <FiSkipBack />
+                  </IconButton>
+                </Tooltip>
+                {/* 日期选择器 */}
+                <DatePicker
+                  label="模拟数据日期选择"
+                  value={dayjs(selectedDate)}
+                  onChange={(value) =>
+                    value && handleDateChange(value.toDate())
+                  }
+                  enableAccessibleFieldDOMStructure={false}
+                  format="YYYY-MM-DD"
+                  sx={{ width: 180, "& .MuiInputBase-root": { height: 40 } }}
+                  maxDate={dayjs(new Date())} // 禁止选取未来的日期
+                  disabled={disableDateSelection}
+                />
+                <Tooltip title="前进一天">
+                  <IconButton
+                    color="primary"
+                    onClick={handleDayStepForward}
+                    size="small"
+                    disabled={
+                      disableDateSelection ||
+                      selectedDate.toDateString() === new Date().toDateString()
+                    }
+                  >
+                    <FiSkipForward />
+                  </IconButton>
+                </Tooltip>
+                {/* 播放控制按钮 */}
+                <Box sx={{ display: "flex", gap: 1 }} className="ml-4">
+                  {/* 播放间隔选择 */}
+                  <FormControl size="small" sx={{ minWidth: 100 }}>
+                    <InputLabel>播放间隔</InputLabel>
+                    <Select
+                      value={playInterval}
+                      label="播放间隔"
+                      onChange={handleIntervalChange}
+                    >
+                      {intervalOptions.map((option) => (
+                        <MenuItem key={option.value} value={option.value}>
+                          {option.label}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
 
-            <Box ref={timelineRef} sx={{ px: 2, position: "relative" }}>
-              <Slider
-                value={currentTime}
-                min={0}
-                max={1440} // 24:00 = 1440分钟
-                step={15} // 每15分钟一个步进
-                marks={timeMarks.filter((_, index) => index % 12 === 0)} // 每小时显示一个标记
-                onChange={handleSliderChange}
-                valueLabelDisplay="auto"
-                valueLabelFormat={formatTime}
-                sx={{
-                  zIndex: 10,
-                  height: 8,
-                  "& .MuiSlider-track": {
-                    backgroundColor: "primary.main",
-                    height: 6,
-                    display: timeRange ? "none" : "block",
-                  },
-                  "& .MuiSlider-rail": {
-                    backgroundColor: "grey.300",
-                    height: 6,
-                  },
-                  "& .MuiSlider-thumb": {
-                    height: 20,
-                    width: 20,
-                    backgroundColor: "primary.main",
-                    border: "2px solid #fff",
-                    boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
-                    "&:hover": {
-                      boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+                  <Tooltip title="后退一步">
+                    <IconButton
+                      color="primary"
+                      onClick={handleStepBackward}
+                      size="small"
+                    >
+                      <TbRewindBackward15 />
+                    </IconButton>
+                  </Tooltip>
+
+                  <Tooltip title={isPlaying ? "暂停" : "播放"}>
+                    <IconButton
+                      color="primary"
+                      onClick={isPlaying ? handlePause : handlePlay}
+                      size="small"
+                    >
+                      {isPlaying ? <Pause /> : <PlayArrow />}
+                    </IconButton>
+                  </Tooltip>
+
+                  <Tooltip title="前进一步">
+                    <IconButton
+                      color="primary"
+                      onClick={handleStepForward}
+                      size="small"
+                    >
+                      <TbRewindForward15 />
+                    </IconButton>
+                  </Tooltip>
+
+                  <Tooltip title="停止">
+                    <IconButton
+                      color="secondary"
+                      onClick={handleStop}
+                      size="small"
+                    >
+                      <Stop />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+                <Box sx={{ display: "flex", gap: 1 }} className="ml-4">
+                  {/* 强制计算时间段 */}
+                  <FormControl size="small" sx={{ minWidth: 100 }}>
+                    <InputLabel>计算时间段</InputLabel>
+                    <Select
+                      value={calculatedInterval}
+                      label="强制计算时间段"
+                      onChange={handleCalculatedIntervalChange}
+                    >
+                      {calculatedIntervalOptions.map((option) => (
+                        <MenuItem key={option.value} value={option.value}>
+                          {option.label}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+
+                  {/* 功能按钮 */}
+                  <Tooltip title="强制计算">
+                    <Button
+                      variant="outlined"
+                      size="small"
+                      startIcon={<Refresh />}
+                      onClick={handleForceCalculate}
+                      disabled={isCalculating}
+                    >
+                      强制计算
+                    </Button>
+                  </Tooltip>
+                </Box>
+
+                {/* 当前时间显示 */}
+                <Typography
+                  variant="h6"
+                  sx={{
+                    ml: "auto",
+                    fontWeight: "bold",
+                    color: "primary.main",
+                  }}
+                >
+                  {formatTime(currentTime)}
+                </Typography>
+              </Stack>
+
+              <Box ref={timelineRef} sx={{ px: 2, position: "relative" }}>
+                <Slider
+                  value={currentTime}
+                  min={0}
+                  max={1440} // 24:00 = 1440分钟
+                  step={15} // 每15分钟一个步进
+                  marks={timeMarks.filter((_, index) => index % 12 === 0)} // 每小时显示一个标记
+                  onChange={handleSliderChange}
+                  valueLabelDisplay="auto"
+                  valueLabelFormat={formatTime}
+                  sx={{
+                    zIndex: 10,
+                    height: 8,
+                    "& .MuiSlider-track": {
+                      backgroundColor: "primary.main",
+                      height: 6,
+                      display: timeRange ? "none" : "block",
                     },
-                  },
-                  "& .MuiSlider-mark": {
-                    backgroundColor: "grey.400",
-                    height: 4,
-                    width: 2,
-                  },
-                  "& .MuiSlider-markActive": {
-                    backgroundColor: "primary.main",
-                  },
-                  "& .MuiSlider-markLabel": {
-                    fontSize: "0.75rem",
-                    color: "grey.600",
-                  },
-                }}
-              />
-              {/* 禁用区域遮罩 */}
-              {timeRange && (
-                <>
-                  {/* 左侧禁用区域 */}
-                  {minTime > 0 && (
-                    <Box
-                      sx={{
-                        position: "absolute",
-                        left: "14px",
-                        top: "30%",
-                        transform: "translateY(-50%)",
-                        width: `${(minTime / 1440) * 856 + 2}px`,
-                        height: "20px",
-                        backgroundColor: "rgba(189, 189, 189, 0.4)",
-                        pointerEvents: "none",
-                        backdropFilter: "blur(1px)",
-                        borderRadius: "2.5px",
-                        rounded: "true",
-                      }}
-                    />
-                  )}
-                  {/* 右侧禁用区域 */}
-                  {maxTime < 1440 && (
-                    <Box
-                      sx={{
-                        position: "absolute",
-                        left: `${16 + (maxTime / 1440) * 856}px`,
-                        top: "30%",
-                        transform: "translateY(-50%)",
-                        width: `${((1440 - maxTime) / 1440) * 856}px`,
-                        height: "20px",
-                        backgroundColor: "rgba(189, 189, 189, 0.4)",
-                        pointerEvents: "none",
-                        backdropFilter: "blur(1px)",
-                        borderRadius: "2.5px",
-                      }}
-                    />
-                  )}
-                </>
-              )}
+                    "& .MuiSlider-rail": {
+                      backgroundColor: "grey.300",
+                      height: 6,
+                    },
+                    "& .MuiSlider-thumb": {
+                      height: 20,
+                      width: 20,
+                      backgroundColor: "primary.main",
+                      border: "2px solid #fff",
+                      boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+                      "&:hover": {
+                        boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+                      },
+                    },
+                    "& .MuiSlider-mark": {
+                      backgroundColor: "grey.400",
+                      height: 4,
+                      width: 2,
+                    },
+                    "& .MuiSlider-markActive": {
+                      backgroundColor: "primary.main",
+                    },
+                    "& .MuiSlider-markLabel": {
+                      fontSize: "0.75rem",
+                      color: "grey.600",
+                    },
+                  }}
+                />
+                {/* 禁用区域遮罩 */}
+                {timeRange && (
+                  <>
+                    {/* 左侧禁用区域 */}
+                    {minTime > 0 && (
+                      <Box
+                        sx={{
+                          position: "absolute",
+                          left: "14px",
+                          top: "30%",
+                          transform: "translateY(-50%)",
+                          width: `${(minTime / 1440) * 856 + 2}px`,
+                          height: "20px",
+                          backgroundColor: "rgba(189, 189, 189, 0.4)",
+                          pointerEvents: "none",
+                          backdropFilter: "blur(1px)",
+                          borderRadius: "2.5px",
+                          rounded: "true",
+                        }}
+                      />
+                    )}
+                    {/* 右侧禁用区域 */}
+                    {maxTime < 1440 && (
+                      <Box
+                        sx={{
+                          position: "absolute",
+                          left: `${16 + (maxTime / 1440) * 856}px`,
+                          top: "30%",
+                          transform: "translateY(-50%)",
+                          width: `${((1440 - maxTime) / 1440) * 856}px`,
+                          height: "20px",
+                          backgroundColor: "rgba(189, 189, 189, 0.4)",
+                          pointerEvents: "none",
+                          backdropFilter: "blur(1px)",
+                          borderRadius: "2.5px",
+                        }}
+                      />
+                    )}
+                  </>
+                )}
+              </Box>
             </Box>
-          </Box>
-        </Paper>
-      </LocalizationProvider>
-    </div>
+          </Paper>
+        </LocalizationProvider>
+      </div>
+    </Draggable>
   );
 };
 
diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx
index ef3416b..0886919 100644
--- a/src/app/OlMap/MapComponent.tsx
+++ b/src/app/OlMap/MapComponent.tsx
@@ -748,13 +748,14 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       id: "junctionContourLayer",
       name: "等值线",
       data: junctionData,
-      cellSize: 400,
+      aggregation: "MEAN",
+      cellSize: 200,
       contours: [
-        { threshold: [0, 10], color: [255, 0, 0] },
-        { threshold: [10, 20], color: [255, 127, 0] },
-        { threshold: [20, 30], color: [255, 215, 0] },
-        { threshold: [30, 40], color: [199, 224, 0] },
-        { threshold: [40, 9999], color: [142, 68, 173] },
+        { threshold: [0, 16], color: [255, 0, 0] },
+        { threshold: [16, 20], color: [255, 127, 0] },
+        { threshold: [20, 22], color: [255, 215, 0] },
+        { threshold: [22, 24], color: [199, 224, 0] },
+        { threshold: [24, 26], color: [76, 175, 80] },
       ],
       getPosition: (d) => d.position,
       getWeight: (d: any) =>