diff --git a/README.md b/README.md index cda9c70..1e23e6e 100644 --- a/README.md +++ b/README.md @@ -42,3 +42,7 @@ $ yarn dev $ pnpm i $ pnpm dev ``` + +## 新功能迭代 + +- [x] 首屏动画交互 diff --git a/src/components/GlobalStyles/index.tsx b/src/components/GlobalStyles/index.tsx new file mode 100644 index 0000000..fc6e097 --- /dev/null +++ b/src/components/GlobalStyles/index.tsx @@ -0,0 +1,14 @@ +import { styled, Box } from "@mui/material"; + +export const FlexBox = styled(Box)(({ theme }) => ({ + display: "flex", + height: "100%", +})); + +export const ColumnBox = styled(FlexBox)(({ theme }) => ({ + flexDirection: "column", +})); + +export const RowBox = styled(FlexBox)(({ theme }) => ({ + flexDirection: "row", +})); diff --git a/src/components/Pages/Dashboard/components/Styles.tsx b/src/components/Pages/Dashboard/components/Styles.tsx index 619a185..0f910f9 100644 --- a/src/components/Pages/Dashboard/components/Styles.tsx +++ b/src/components/Pages/Dashboard/components/Styles.tsx @@ -1,4 +1,4 @@ -import { styled, Box } from "@mui/material"; +import { styled, Box, Stack } from "@mui/material"; import { keyframes } from "@emotion/react"; import { animated } from "@react-spring/web"; export const StyleBox = styled(Box)(({ theme }) => ({ @@ -130,3 +130,84 @@ export const RadioBox = styled(Box)(({ theme, active }) => ({ }, }, })); +type LoadingProp = { + width?: string; +}; + +export const ExecutingIcon = styled("div")( + ({ theme, width = "10px" }) => ({ + width: width, + aspectRatio: 1, + borderRadius: "50%", + background: "#fff", + display: "grid", + animation: `l22_0 2s infinite linear`, + "&:before, &:after": { + content: "''", + gridArea: "1/1", + margin: "15%", + borderRadius: "50%", + background: "inherit", + transform: "rotate(0deg) translate(150%)", + animation: `l22 1s infinite`, + }, + "&:after": { + animationDelay: "-.5s", + }, + "@keyframes l22": { + "100%": { + transform: "rotate(1turn) translate(150%)", + }, + }, + "@keyframes l22_0": { + "100%": { + transform: "rotate(1turn)", + }, + }, + }) +); +export const LoadingIcon = styled("div")( + ({ theme, width = "30px" }) => ({ + width: width, + aspectRatio: 1, + display: "grid", + borderRadius: "50%", + background: + "linear-gradient(0deg ,rgb(255 255 255/50%) 30%,#0000 0 70%,rgb(255 255 255/100%) 0) 50%/8% 100%,linear-gradient(90deg,rgb(255 255 255/25%) 30%,#0000 0 70%,rgb(255 255 255/75% ) 0) 50%/100% 8%", + backgroundRepeat: "no-repeat", + animation: "l23 1s infinite steps(12)", + "@keyframes l23": { + "100%": { + transform: "rotate(1turn)", + }, + }, + "&:before, &:after": { + content: "''", + gridArea: "1/1", + borderRadius: "50%", + background: "inherit", + opacity: 0.915, + transform: "rotate(30deg)", + }, + "&:after": { + opacity: 0.83, + transform: "rotate(60deg)", + }, + }) +); + +export const AlignStack = styled(Stack)(({ theme }) => ({ + textAlign: "center", + justifyContent: "space-around", + "& .MuiTypography-root": { + flex: 1, + display: "flex", + justifyContent: "space-evenly", + }, +})); + +export const ListStack = styled(AlignStack)(({ theme }) => ({ + backgroundColor: "#D8D8D820", + borderRadius: "5px", + marginBottom: "10px", +})); diff --git a/src/components/Pages/Dashboard/components/TaskStatus.tsx b/src/components/Pages/Dashboard/components/TaskStatus.tsx new file mode 100644 index 0000000..932c0c3 --- /dev/null +++ b/src/components/Pages/Dashboard/components/TaskStatus.tsx @@ -0,0 +1,168 @@ +import { memo, useState } from "react"; +import { Typography, Box, Stack, Divider } from "@mui/material"; +import { ColumnBox, RowBox } from "@/components/GlobalStyles"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import { ExecutingIcon, LoadingIcon, AlignStack, ListStack } from "./Styles"; +const TaskStatus = memo((props: any) => { + const [List, setList] = useState([ + { + rroute: "3121", + state: 1, + forkTeeth: 1, + }, + { + rroute: "241", + state: 2, + forkTeeth: 1, + }, + { + rroute: "241", + state: 1, + forkTeeth: 2, + }, + { + rroute: "3121", + state: 1, + forkTeeth: 1, + }, + { + rroute: "241", + state: 2, + forkTeeth: 1, + }, + { + rroute: "241", + state: 1, + forkTeeth: 2, + }, + { + rroute: "3121", + state: 1, + forkTeeth: 1, + }, + { + rroute: "241", + state: 2, + forkTeeth: 1, + }, + { + rroute: "241", + state: 1, + forkTeeth: 2, + }, + { + rroute: "241", + state: 1, + forkTeeth: 2, + }, + { + rroute: "3121", + state: 1, + forkTeeth: 1, + }, + { + rroute: "241", + state: 2, + forkTeeth: 1, + }, + { + rroute: "241", + state: 1, + forkTeeth: 2, + }, + ]); + return ( + + + Tasks and Status + + + + + Executing + + + + 5766 + + No.1 + + + + 345 + + Point + + + + GET + + Type + + + + + {/* 底部列表 */} + + + + Route + + + State + + + Fork Teeth + + + + + {List.map((item, index) => { + return ( + + + + {item.rroute} + + + {item.state === 1 ? ( + + ) : ( + + )} + + + {item.forkTeeth === 1 ? ( + + ) : ( + + )} + + + + ); + })} + + + + ); +}); +export default TaskStatus; diff --git a/src/components/Pages/Dashboard/components/ThreeColumn.tsx b/src/components/Pages/Dashboard/components/ThreeColumn.tsx new file mode 100644 index 0000000..2f766c2 --- /dev/null +++ b/src/components/Pages/Dashboard/components/ThreeColumn.tsx @@ -0,0 +1,136 @@ +import { memo } from "react"; +import { Stack, Typography, Box, Divider } from "@mui/material"; +import GlobalPanel from "@/components/GlobalPanel"; +import { RowBox } from "@/components/GlobalStyles"; +import CarNumberIcon from "@/components/SvgIcon/CarNumberIcon"; +import RunTimeIcon from "@/components/SvgIcon/RunTimeIcon"; +import SpeedsIcon from "@/components/SvgIcon/SpeedsIcon"; +export default memo(() => { + return ( + + + + Goods + + + + 345 + + Quantuty (Pieces) + + + + 36 + + Weight (KG) + + + + + + + Fork Position + + (Unit: mm) + + + + + 5 + + Horizon (mm) + + + + 36 + + Forward (mm) + + + + 36 + + Rise (mm) + + + + + + } + > + + + + 566 + + Car number + + + + + + + + 2 + + /km + + + + Operating mileage + + + + + + + + 193 + + /h + + + + Running time + + + + + + + ); +}); diff --git a/src/components/Pages/Dashboard/components/VehicleStatus.tsx b/src/components/Pages/Dashboard/components/VehicleStatus.tsx index 79a81b3..6c0c313 100644 --- a/src/components/Pages/Dashboard/components/VehicleStatus.tsx +++ b/src/components/Pages/Dashboard/components/VehicleStatus.tsx @@ -9,6 +9,8 @@ import { animated, useSpring } from "@react-spring/web"; import AutoIcon from "@/components/SvgIcon/AutoIcon"; import SemiAutoIcon from "@/components/SvgIcon/SemiAutoIcon"; import HandMoveIcon from "@/components/SvgIcon/HandMoveIcon"; +import WarmingIcon from "@/components/SvgIcon/WarmingIcon"; +import ErrorIcon from "@/components/SvgIcon/ErrorIcon"; const VehicleStatus = memo(() => { const rotateZ = useRef(0); @@ -55,14 +57,18 @@ const VehicleStatus = memo(() => {

0.234 m/s

-

车速

+

+ +

0.234 m/s

-

车速

+

+ +

diff --git a/src/components/Pages/Dashboard/index.tsx b/src/components/Pages/Dashboard/index.tsx index 334af86..3e34259 100644 --- a/src/components/Pages/Dashboard/index.tsx +++ b/src/components/Pages/Dashboard/index.tsx @@ -3,261 +3,33 @@ import React from "react"; import GlobalPanel from "../../GlobalPanel"; -import CarNumberIcon from "../../SvgIcon/CarNumberIcon"; -import SpeedsIcon from "../../SvgIcon/SpeedsIcon"; -import RunTimeIcon from "../../SvgIcon/RunTimeIcon"; - import VehicleStatus from "./components/VehicleStatus"; +import TaskStatus from "./components/TaskStatus"; +import ThreeColumn from "./components/ThreeColumn"; const Dashboard = () => { - const Itemxs12 = styled(Paper)(({ theme }) => ({ - backgroundColor: "rgb(68 82 96 / 90%)", - boxShadow: "none", - borderRadius: "20px", - padding: "20px", - textAlign: "center", - color: "#fff", - overflow: "hidden", - height: "100%", - width: "100%", - })); - const ItemTitle = styled("div")(({ theme }) => ({ - padding: "0px", - margin: "0px", - textAlign: "center", - color: "white", - fontSize: "20px", - display: "flex", - justifyContent: "space-between", - alignItems: "center", - "&& p": { - margin: "0px", - }, - "&& span": { - fontSize: "18px", - opacity: 0.5, - }, - })); - const ItemContent = styled("div")(({ theme }) => ({ - display: "flex", - justifyContent: "space-evenly", - alignItems: "center", - "&& div": { - marginTop: "25px", - }, - "&& p": { - margin: "0px", - fontSize: "36px", - display: "flex", - flexDirection: "row", - flexWrap: "nowrap", - alignItems: "center", - justifyContent: "center", - }, - "&& svg": { - marginRight: "10px", - }, - "&& span": { - fontSize: "18px", - opacity: 0.5, - }, - })); - const ItemContents = styled("div")(({ theme }) => ({ - display: "flex", - justifyContent: "space-evenly", - alignItems: "center", - overflow: "auto", - "&& div": { - marginTop: "0px", - }, - "&& p": { - margin: "0px", - fontSize: "36px", - display: "flex", - flexDirection: "row", - flexWrap: "nowrap", - alignItems: "center", - justifyContent: "center", - }, - "&& svg": { - marginRight: "10px", - }, - "&& span": { - fontSize: "18px", - opacity: 0.5, - }, - })); return ( - + - + + + - - - - -

货物

- - -
-

5

- 货物数量(件) -
-
-

36

- 货物重量(千克) -
- - - - - - -

叉牙位置

- (单位:毫米) - - -
-

5

- 平移 -
-
-

36

- 前移 -
-
-

36

- 升高 -
- - - - - - -
-
- -
-

- 137 -

- 车号 -
-
-
- -
-

- 2 /km -

- 已行驶公里数 -
-
-
- -
-

- 193 /h -

- 已运行时间 -
-
-
- - - - + diff --git a/src/components/SvgIcon/ErrorIcon.tsx b/src/components/SvgIcon/ErrorIcon.tsx index 7d489ef..6f3405c 100644 --- a/src/components/SvgIcon/ErrorIcon.tsx +++ b/src/components/SvgIcon/ErrorIcon.tsx @@ -18,7 +18,7 @@ function ErrorIcon({ isActive = false, fontSize = 45 }: IActionIconProps) { diff --git a/src/components/SvgIcon/WarmingIcon.tsx b/src/components/SvgIcon/WarmingIcon.tsx new file mode 100644 index 0000000..c6ae928 --- /dev/null +++ b/src/components/SvgIcon/WarmingIcon.tsx @@ -0,0 +1,30 @@ +import SvgIcon from "@mui/material/SvgIcon"; + +import { IActionIconProps } from "./ActionIconProps"; +// 新增的icon +function Icon({ isActive = false, fontSize = 45 }: IActionIconProps) { + return ( + + + + + + + + ); +} + +export default Icon;