OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整时间轴样式
Build Push and Deploy / docker-image (push) Successful in 2m0s
Details
Build Push and Deploy / deploy-fallback-log (push) Has been skipped
Details

Browse Source
This commit is contained in:
Huarch
2026-05-28 17:11:08 +08:00
parent 9dc8549f31
commit a4f0ffcd32
2 changed files with 48 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/olmap/HealthRiskAnalysis/Timeline.tsx
+24 -1
View File
@@ -59,6 +59,23 @@ interface TimelineProps {
schemeName?: string;
}
const timelineIconButtonSx = {
width: 32,
height: 32,
borderRadius: "50%",
flexShrink: 0,
overflow: "hidden",
"&:hover": {
borderRadius: "50%",
},
"&.Mui-focusVisible": {
borderRadius: "50%",
},
"& .MuiTouchRipple-root": {
borderRadius: "50%",
},
} as const;
const Timeline: React.FC<TimelineProps> = ({
disableDateSelection = false,
}) => {
@@ -445,7 +462,7 @@ 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">
<div className="absolute bottom-4 left-1/2 z-10 w-[950px] max-w-[calc(100vw-2rem)] -translate-x-1/2 opacity-90 transition-opacity duration-300 hover:opacity-100">
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale="zh-cn"
@@ -481,6 +498,7 @@ const Timeline: React.FC<TimelineProps> = ({
onClick={handleDayStepBackward}
size="small"
disabled={disableDateSelection}
sx={timelineIconButtonSx}
>
<FiSkipBack />
</IconButton>
@@ -517,6 +535,7 @@ const Timeline: React.FC<TimelineProps> = ({
selectedDateTime.toDateString() ===
new Date().toDateString()
}
sx={timelineIconButtonSx}
>
<FiSkipForward />
</IconButton>
@@ -545,6 +564,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary"
onClick={handleStepBackward}
size="small"
sx={timelineIconButtonSx}
>
<TbArrowBackUp />
</IconButton>
@@ -555,6 +575,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary"
onClick={isPlaying ? handlePause : handlePlay}
size="small"
sx={timelineIconButtonSx}
>
{isPlaying ? <Pause /> : <PlayArrow />}
</IconButton>
@@ -565,6 +586,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary"
onClick={handleStepForward}
size="small"
sx={timelineIconButtonSx}
>
<TbArrowForwardUp />
</IconButton>
@@ -575,6 +597,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="secondary"
onClick={handleStop}
size="small"
sx={timelineIconButtonSx}
>
<Stop />
</IconButton>
src/components/olmap/core/Controls/Timeline.tsx
+24 -1
View File
@@ -39,6 +39,23 @@ interface TimelineProps {
schemeType?: string;
}
const timelineIconButtonSx = {
width: 32,
height: 32,
borderRadius: "50%",
flexShrink: 0,
overflow: "hidden",
"&:hover": {
borderRadius: "50%",
},
"&.Mui-focusVisible": {
borderRadius: "50%",
},
"& .MuiTouchRipple-root": {
borderRadius: "50%",
},
} as const;
const NOOP_SET_CURRENT_TIME = (_: any) => undefined;
const NOOP_SET_SELECTED_DATE = (_: any) => undefined;
@@ -665,7 +682,7 @@ const Timeline: React.FC<TimelineProps> = ({
<Draggable nodeRef={draggableRef} handle=".drag-handle">
<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"
className="absolute bottom-4 left-1/2 z-10 w-[950px] max-w-[calc(100vw-2rem)] -translate-x-1/2 opacity-90 transition-opacity duration-300 hover:opacity-100"
>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
<Paper
@@ -723,6 +740,7 @@ const Timeline: React.FC<TimelineProps> = ({
onClick={handleDayStepBackward}
size="small"
disabled={disableDateSelection}
sx={timelineIconButtonSx}
>
<FiSkipBack />
</IconButton>
@@ -757,6 +775,7 @@ const Timeline: React.FC<TimelineProps> = ({
selectedDate.toDateString() ===
new Date().toDateString()
}
sx={timelineIconButtonSx}
>
<FiSkipForward />
</IconButton>
@@ -785,6 +804,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary"
onClick={handleStepBackward}
size="small"
sx={timelineIconButtonSx}
>
<TbRewindBackward15 />
</IconButton>
@@ -795,6 +815,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary"
onClick={isPlaying ? handlePause : handlePlay}
size="small"
sx={timelineIconButtonSx}
>
{isPlaying ? <Pause /> : <PlayArrow />}
</IconButton>
@@ -805,6 +826,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="primary"
onClick={handleStepForward}
size="small"
sx={timelineIconButtonSx}
>
<TbRewindForward15 />
</IconButton>
@@ -815,6 +837,7 @@ const Timeline: React.FC<TimelineProps> = ({
color="secondary"
onClick={handleStop}
size="small"
sx={timelineIconButtonSx}
>
<Stop />
</IconButton>