为时间轴新增 draggable 特性
This commit is contained in:
JIANG
29
package-lock.json
generated
29
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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) =>
|
||||
|
||||
Reference in New Issue
Block a user