784 lines
25 KiB
TypeScript
784 lines
25 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||
import { useNotification } from "@refinedev/core";
|
||
|
||
import {
|
||
Box,
|
||
Button,
|
||
Slider,
|
||
Typography,
|
||
Paper,
|
||
MenuItem,
|
||
Select,
|
||
FormControl,
|
||
InputLabel,
|
||
IconButton,
|
||
Stack,
|
||
Tooltip,
|
||
} from "@mui/material";
|
||
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 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";
|
||
import { useData } from "../MapComponent";
|
||
import { config, NETWORK_NAME } from "@/config/config";
|
||
import { useMap } from "../MapComponent";
|
||
const backendUrl = config.BACKEND_URL;
|
||
|
||
interface TimelineProps {
|
||
schemeDate?: Date;
|
||
timeRange?: { start: Date; end: Date };
|
||
disableDateSelection?: boolean;
|
||
schemeName?: string;
|
||
}
|
||
|
||
const Timeline: React.FC<TimelineProps> = ({
|
||
schemeDate,
|
||
timeRange,
|
||
disableDateSelection = false,
|
||
schemeName = "",
|
||
}) => {
|
||
const data = useData();
|
||
if (!data) {
|
||
return <div>Loading...</div>; // 或其他占位符
|
||
}
|
||
const {
|
||
currentTime,
|
||
setCurrentTime,
|
||
selectedDate,
|
||
setSelectedDate,
|
||
setCurrentJunctionCalData,
|
||
setCurrentPipeCalData,
|
||
junctionText,
|
||
pipeText,
|
||
} = data;
|
||
if (
|
||
setCurrentTime === undefined ||
|
||
currentTime === undefined ||
|
||
selectedDate === undefined ||
|
||
setSelectedDate === undefined
|
||
) {
|
||
return <div>Loading...</div>; // 或其他占位符
|
||
}
|
||
const { open, close } = useNotification();
|
||
|
||
const [isPlaying, setIsPlaying] = useState<boolean>(false);
|
||
const [playInterval, setPlayInterval] = useState<number>(15000); // 毫秒
|
||
const [calculatedInterval, setCalculatedInterval] = useState<number>(15); // 分钟
|
||
const [isCalculating, setIsCalculating] = useState<boolean>(false);
|
||
|
||
// 计算时间轴范围
|
||
const minTime = timeRange
|
||
? timeRange.start.getHours() * 60 + timeRange.start.getMinutes()
|
||
: 0;
|
||
const maxTime = timeRange
|
||
? timeRange.end.getHours() * 60 + timeRange.end.getMinutes()
|
||
: 1440;
|
||
useEffect(() => {
|
||
if (schemeDate) {
|
||
setSelectedDate(schemeDate);
|
||
}
|
||
}, [schemeDate]);
|
||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
||
const timelineRef = useRef<HTMLDivElement>(null);
|
||
// 添加缓存引用
|
||
const nodeCacheRef = useRef<Map<string, any[]>>(new Map());
|
||
const linkCacheRef = useRef<Map<string, any[]>>(new Map());
|
||
// 添加防抖引用
|
||
const debounceRef = useRef<NodeJS.Timeout | null>(null);
|
||
|
||
const fetchFrameData = async (
|
||
queryTime: Date,
|
||
junctionProperties: string,
|
||
pipeProperties: string,
|
||
schemeName: string
|
||
) => {
|
||
const query_time = queryTime.toISOString();
|
||
let nodeRecords: any = { results: [] };
|
||
let linkRecords: any = { results: [] };
|
||
const requests: Promise<Response>[] = [];
|
||
let nodePromise: Promise<any> | null = null;
|
||
let linkPromise: Promise<any> | null = null;
|
||
// 检查node缓存
|
||
if (junctionProperties !== "") {
|
||
const nodeCacheKey = `${query_time}_${junctionProperties}_${schemeName}`;
|
||
if (nodeCacheRef.current.has(nodeCacheKey)) {
|
||
nodeRecords = nodeCacheRef.current.get(nodeCacheKey)!;
|
||
} else {
|
||
disableDateSelection && schemeName
|
||
? (nodePromise = fetch(
|
||
`${backendUrl}/queryallschemerecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}&schemename=${schemeName}`
|
||
))
|
||
: (nodePromise = fetch(
|
||
`${backendUrl}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}`
|
||
));
|
||
requests.push(nodePromise);
|
||
}
|
||
}
|
||
|
||
// 检查link缓存
|
||
if (pipeProperties !== "") {
|
||
const linkCacheKey = `${query_time}_${pipeProperties}_${schemeName}`;
|
||
if (linkCacheRef.current.has(linkCacheKey)) {
|
||
linkRecords = linkCacheRef.current.get(linkCacheKey)!;
|
||
} else {
|
||
disableDateSelection && schemeName
|
||
? (linkPromise = fetch(
|
||
`${backendUrl}/queryallschemerecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}&schemename=${schemeName}`
|
||
))
|
||
: (linkPromise = fetch(
|
||
`${backendUrl}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}`
|
||
));
|
||
requests.push(linkPromise);
|
||
}
|
||
}
|
||
|
||
// 等待所有有效请求
|
||
const responses = await Promise.all(requests);
|
||
|
||
if (nodePromise) {
|
||
const nodeResponse = responses.shift()!;
|
||
if (!nodeResponse.ok)
|
||
throw new Error(`Node fetch failed: ${nodeResponse.status}`);
|
||
nodeRecords = await nodeResponse.json();
|
||
// 缓存数据（修复键以包含 schemeName）
|
||
nodeCacheRef.current.set(
|
||
`${query_time}_${junctionProperties}_${schemeName}`,
|
||
nodeRecords || []
|
||
);
|
||
}
|
||
if (linkPromise) {
|
||
const linkResponse = responses.shift()!;
|
||
if (!linkResponse.ok)
|
||
throw new Error(`Link fetch failed: ${linkResponse.status}`);
|
||
linkRecords = await linkResponse.json();
|
||
// 缓存数据（修复键以包含 schemeName）
|
||
linkCacheRef.current.set(
|
||
`${query_time}_${pipeProperties}_${schemeName}`,
|
||
linkRecords || []
|
||
);
|
||
}
|
||
// 更新状态
|
||
updateDataStates(nodeRecords.results || [], linkRecords.results || []);
|
||
};
|
||
|
||
// 提取更新状态的逻辑
|
||
const updateDataStates = (nodeResults: any[], linkResults: any[]) => {
|
||
if (setCurrentJunctionCalData) {
|
||
setCurrentJunctionCalData(nodeResults);
|
||
} else {
|
||
console.log("setCurrentJunctionCalData is undefined");
|
||
}
|
||
if (setCurrentPipeCalData) {
|
||
setCurrentPipeCalData(linkResults);
|
||
} else {
|
||
console.log("setCurrentPipeCalData is undefined");
|
||
}
|
||
};
|
||
|
||
// 时间刻度数组 (每5分钟一个刻度)
|
||
const timeMarks = Array.from({ length: 288 }, (_, i) => ({
|
||
value: i * 5,
|
||
label: i % 24 === 0 ? formatTime(i * 5) : "",
|
||
}));
|
||
|
||
// 格式化时间显示
|
||
function formatTime(minutes: number): string {
|
||
const hours = Math.floor(minutes / 60);
|
||
const mins = minutes % 60;
|
||
return `${hours.toString().padStart(2, "0")}:${mins
|
||
.toString()
|
||
.padStart(2, "0")}`;
|
||
}
|
||
|
||
function currentTimeToDate(selectedDate: Date, minutes: number): Date {
|
||
const date = new Date(selectedDate);
|
||
const hours = Math.floor(minutes / 60);
|
||
const mins = minutes % 60;
|
||
date.setHours(hours, mins, 0, 0);
|
||
return date;
|
||
}
|
||
|
||
// 播放时间间隔选项
|
||
const intervalOptions = [
|
||
{ value: 10000, label: "10秒" },
|
||
{ value: 15000, label: "15秒" },
|
||
{ value: 20000, label: "20秒" },
|
||
];
|
||
// 强制计算时间段选项
|
||
const calculatedIntervalOptions = [
|
||
{ value: 1440, label: "1 天" },
|
||
{ value: 60, label: "1 小时" },
|
||
{ value: 30, label: "30 分钟" },
|
||
{ value: 15, label: "15 分钟" },
|
||
{ value: 5, label: "5 分钟" },
|
||
];
|
||
|
||
// 处理时间轴滑动
|
||
const handleSliderChange = useCallback(
|
||
(event: Event, newValue: number | number[]) => {
|
||
const value = Array.isArray(newValue) ? newValue[0] : newValue;
|
||
// 如果有时间范围限制，只允许在范围内拖动
|
||
if (timeRange && (value < minTime || value > maxTime)) {
|
||
return;
|
||
}
|
||
// 防抖设置currentTime，避免频繁触发数据获取
|
||
if (debounceRef.current) {
|
||
clearTimeout(debounceRef.current);
|
||
}
|
||
debounceRef.current = setTimeout(() => {
|
||
setCurrentTime(value);
|
||
}, 500); // 500ms 防抖延迟
|
||
},
|
||
[timeRange, minTime, maxTime]
|
||
);
|
||
|
||
// 播放控制
|
||
const handlePlay = useCallback(() => {
|
||
if (!isPlaying) {
|
||
if (junctionText === "" && pipeText === "") {
|
||
open?.({
|
||
type: "error",
|
||
message: "请至少设定并应用一个图层的样式。",
|
||
});
|
||
// return;
|
||
}
|
||
setIsPlaying(true);
|
||
|
||
intervalRef.current = setInterval(() => {
|
||
setCurrentTime((prev) => {
|
||
let next = prev + 15;
|
||
if (timeRange) {
|
||
if (next > maxTime) next = minTime;
|
||
} else {
|
||
if (next >= 1440) next = 0;
|
||
}
|
||
return next;
|
||
});
|
||
}, playInterval);
|
||
}
|
||
}, [isPlaying, playInterval]);
|
||
|
||
const handlePause = useCallback(() => {
|
||
setIsPlaying(false);
|
||
if (intervalRef.current) {
|
||
clearInterval(intervalRef.current);
|
||
intervalRef.current = null;
|
||
}
|
||
}, []);
|
||
|
||
const handleStop = useCallback(() => {
|
||
setIsPlaying(false);
|
||
// 设置为当前时间
|
||
const currentTime = new Date();
|
||
const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
|
||
setCurrentTime(minutes); // 组件卸载时重置时间
|
||
if (intervalRef.current) {
|
||
clearInterval(intervalRef.current);
|
||
intervalRef.current = null;
|
||
}
|
||
}, []);
|
||
|
||
// 步进控制
|
||
const handleDayStepBackward = useCallback(() => {
|
||
setSelectedDate((prev) => {
|
||
const newDate = new Date(prev);
|
||
newDate.setDate(newDate.getDate() - 1);
|
||
return newDate;
|
||
});
|
||
}, []);
|
||
const handleDayStepForward = useCallback(() => {
|
||
setSelectedDate((prev) => {
|
||
const newDate = new Date(prev);
|
||
newDate.setDate(newDate.getDate() + 1);
|
||
return newDate;
|
||
});
|
||
}, []);
|
||
const handleStepBackward = useCallback(() => {
|
||
setCurrentTime((prev) => {
|
||
let next = prev - 15;
|
||
if (timeRange) {
|
||
if (next < minTime) next = maxTime;
|
||
} else {
|
||
if (next <= 0) next = 1440;
|
||
}
|
||
return next;
|
||
});
|
||
}, [timeRange, minTime, maxTime]);
|
||
|
||
const handleStepForward = useCallback(() => {
|
||
setCurrentTime((prev) => {
|
||
let next = prev + 15;
|
||
if (timeRange) {
|
||
if (next > maxTime) next = minTime;
|
||
} else {
|
||
if (next >= 1440) next = 0;
|
||
}
|
||
return next;
|
||
});
|
||
}, [timeRange, minTime, maxTime]);
|
||
|
||
// 日期选择处理
|
||
const handleDateChange = useCallback((newDate: Date | null) => {
|
||
if (newDate) {
|
||
setSelectedDate(newDate);
|
||
}
|
||
}, []);
|
||
|
||
// 播放间隔改变处理
|
||
const handleIntervalChange = useCallback(
|
||
(event: any) => {
|
||
const newInterval = event.target.value;
|
||
setPlayInterval(newInterval);
|
||
|
||
// 如果正在播放，重新启动定时器
|
||
if (isPlaying && intervalRef.current) {
|
||
clearInterval(intervalRef.current);
|
||
intervalRef.current = setInterval(() => {
|
||
setCurrentTime((prev) => {
|
||
let next = prev + 15;
|
||
if (timeRange) {
|
||
if (next > maxTime) next = minTime;
|
||
} else {
|
||
if (next >= 1440) next = 0;
|
||
}
|
||
return next;
|
||
});
|
||
}, newInterval);
|
||
}
|
||
},
|
||
[isPlaying]
|
||
);
|
||
// 计算时间段改变处理
|
||
const handleCalculatedIntervalChange = useCallback((event: any) => {
|
||
const newInterval = event.target.value;
|
||
setCalculatedInterval(newInterval);
|
||
}, []);
|
||
|
||
// 添加 useEffect 来监听 currentTime 和 selectedDate 的变化，并获取数据
|
||
useEffect(() => {
|
||
// 首次加载时，如果 selectedDate 或 currentTime 未定义，则跳过执行，避免报错
|
||
if (selectedDate && currentTime !== undefined && currentTime !== -1) {
|
||
// 检查至少一个属性有值
|
||
const junctionProperties = junctionText;
|
||
const pipeProperties = pipeText;
|
||
if (junctionProperties === "" && pipeProperties === "") {
|
||
open?.({
|
||
type: "error",
|
||
message: "请至少设定并应用一个图层的样式。",
|
||
});
|
||
return;
|
||
}
|
||
fetchFrameData(
|
||
currentTimeToDate(selectedDate, currentTime),
|
||
junctionText,
|
||
pipeText,
|
||
schemeName
|
||
);
|
||
}
|
||
}, [junctionText, pipeText, currentTime, selectedDate]);
|
||
|
||
// 组件卸载时清理定时器和防抖
|
||
useEffect(() => {
|
||
// 设置为当前时间
|
||
const currentTime = new Date();
|
||
const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
|
||
// 找到最近的前15分钟刻度
|
||
const roundedMinutes = Math.floor(minutes / 15) * 15;
|
||
setCurrentTime(roundedMinutes); // 组件卸载时重置时间
|
||
|
||
return () => {
|
||
if (intervalRef.current) {
|
||
clearInterval(intervalRef.current);
|
||
}
|
||
if (debounceRef.current) {
|
||
clearTimeout(debounceRef.current);
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
// 当 timeRange 改变时，设置 currentTime 到 minTime
|
||
useEffect(() => {
|
||
if (timeRange) {
|
||
setCurrentTime(minTime);
|
||
}
|
||
}, [timeRange, minTime]);
|
||
// 获取地图实例
|
||
const map = useMap();
|
||
// 这里防止地图缩放时，瓦片重新加载引起的属性更新出错
|
||
useEffect(() => {
|
||
// 监听地图缩放事件，缩放时停止播放
|
||
if (map) {
|
||
const onZoom = () => {
|
||
handlePause();
|
||
};
|
||
map.getView().on("change:resolution", onZoom);
|
||
|
||
// 清理事件监听
|
||
return () => {
|
||
map.getView().un("change:resolution", onZoom);
|
||
};
|
||
}
|
||
}, [map, handlePause]);
|
||
// 清除当天当前时间点后的缓存并重新获取数据
|
||
const clearCacheAndRefetch = (date: Date, timeInMinutes: number) => {
|
||
const dateStr = date.toISOString().split("T")[0];
|
||
|
||
const clearCache = (
|
||
cacheRef: ReturnType<typeof useRef<Map<string, any[]>>>
|
||
) => {
|
||
if (!cacheRef.current) return;
|
||
const cacheKeys = Array.from(cacheRef.current.keys());
|
||
cacheKeys.forEach((key) => {
|
||
const keyParts = key.split("_");
|
||
const cacheDate = keyParts[0].split("T")[0];
|
||
const cacheTimeStr = keyParts[0].split("T")[1];
|
||
|
||
if (cacheDate === dateStr && cacheTimeStr) {
|
||
const [hours, minutes] = cacheTimeStr.split(":");
|
||
const cacheTimeInMinutes =
|
||
(parseInt(hours) + 8) * 60 + parseInt(minutes);
|
||
|
||
if (cacheTimeInMinutes >= timeInMinutes && cacheRef.current) {
|
||
cacheRef.current.delete(key);
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
clearCache(nodeCacheRef);
|
||
clearCache(linkCacheRef);
|
||
// 重新获取当前时刻的新数据
|
||
fetchFrameData(
|
||
currentTimeToDate(selectedDate, currentTime),
|
||
junctionText,
|
||
pipeText,
|
||
schemeName
|
||
);
|
||
};
|
||
|
||
const handleForceCalculate = async () => {
|
||
if (!NETWORK_NAME) {
|
||
open?.({
|
||
type: "error",
|
||
message: "方案名称未设置，无法进行强制计算。",
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 提前提取日期和时间值，避免异步操作期间被时间轴拖动改变
|
||
const calculationDate = selectedDate;
|
||
const calculationTime = currentTime;
|
||
const calculationDateStr = calculationDate.toISOString().split("T")[0];
|
||
|
||
setIsCalculating(true);
|
||
// 显示处理中的通知
|
||
open?.({
|
||
type: "progress",
|
||
message: "正在强制计算，请稍候...",
|
||
undoableTimeout: 3,
|
||
});
|
||
try {
|
||
const body = {
|
||
name: NETWORK_NAME,
|
||
simulation_date: calculationDateStr, // YYYY-MM-DD
|
||
start_time: `${formatTime(calculationTime)}:00`, // HH:MM:00
|
||
duration: calculatedInterval,
|
||
};
|
||
|
||
const response = await fetch(
|
||
`${backendUrl}/runsimulationmanuallybydate/`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(body),
|
||
}
|
||
);
|
||
|
||
if (response.ok) {
|
||
open?.({
|
||
type: "success",
|
||
message: "重新计算成功",
|
||
});
|
||
// 清空当天当前时刻及之后的缓存并重新获取数据
|
||
clearCacheAndRefetch(calculationDate, calculationTime);
|
||
} else {
|
||
open?.({
|
||
type: "error",
|
||
message: "重新计算失败",
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("Recalculation failed:", error);
|
||
open?.({
|
||
type: "error",
|
||
message: "重新计算时发生错误",
|
||
});
|
||
} finally {
|
||
setIsCalculating(false);
|
||
}
|
||
};
|
||
|
||
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",
|
||
}}
|
||
>
|
||
{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-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>
|
||
</Paper>
|
||
</LocalizationProvider>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Timeline;
|