Skip to content

Commit

Permalink
feat: 新增GlobalPanel动画direction属性
Browse files Browse the repository at this point in the history
  • Loading branch information
@niyg-mw
niyg-mw committed Nov 14, 2023
1 parent 2450f7f commit c30055d
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 153 deletions.
21 changes: 18 additions & 3 deletions src/components/GlobalPanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,21 @@ import { useGlobaltore } from "../../store/global";

interface IProps extends BoxProps {
delay?: number;
direction?: string;
}
const StylePanel = styled(animated(Box))(({ theme }) => ({
backgroundColor: "#445260",
borderRadius: "20px",
padding: "20px",
height: "100%",
}));

const GlobalPanel = ({ delay = 3000, children, ...rest }: IProps) => {
const GlobalPanel = ({
delay = 3000,
direction = "left",
children,
...rest
}: IProps) => {
const { dialogOpen } = useGlobaltore((state) => state);
const [animated, setAnimated] = React.useState(false);
React.useEffect(() => {
Expand All @@ -22,8 +29,16 @@ const GlobalPanel = ({ delay = 3000, children, ...rest }: IProps) => {
const animate = useSpring({
opacity: animated ? 1 : 0,
transform: animated
? "translateX(0px) scale(1) rotateY(0deg)"
: "translateX(-100px) scale(0.9) rotateY(10deg)",
? `${
direction === "left"
? "translateX(0px) scale(1) rotateY(0deg)"
: "translateY(0px) scale(1) rotateY(0deg)"
}`
: `${
direction === "left"
? "translateX(100px) scale(0.9) rotateY(10deg)"
: "translateY(200px) scale(0.9) rotateY(10deg)"
}`,
delay,
config: { tension: 100, friction: 30 },
});
Expand Down
291 changes: 141 additions & 150 deletions src/components/Pages/About/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,14 @@
import {
Grid,
styled,
Paper,
CardHeader,
Avatar,
CardMedia,
CardContent,
Typography,
Skeleton,
IconButton,
Box,
} from "@mui/material";
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Grid, styled, Paper, Typography, Box } from "@mui/material";
import React, { useMemo } from "react";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Card, List } from "antd";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import GlobalPanel from "../../GlobalPanel";
import AboutLogoIcon from "../../SvgIcon/AboutLogoIcon";
import ErrorInfoIcon from "../../SvgIcon/ErrorInfoIcon";
import CommonChart from "./components/Chart";
import SecondaryPage from "@/components/SecondaryPage";
import { animated, useSpring } from "@react-spring/web";
import GlobalPanel from "@/components/GlobalPanel";

const StyleGrid = styled(animated(Grid))(({ open }) => ({
opacity: open ? 1 : 0.4,
Expand All @@ -33,10 +18,8 @@ const StyleGrid = styled(animated(Grid))(({ open }) => ({
transformOrigin: "left center",
transition: "all 0.5s ease",
}));
const Settings = () => {
const [loading, setLoading] = React.useState(true);

const Item = styled(Paper)(({ theme }) => ({
const About = () => {
const Item = styled(Box)(({ theme }) => ({
background: "#445260",
padding: "0px",
textAlign: "center",
Expand Down Expand Up @@ -158,146 +141,154 @@ const Settings = () => {
open={!startAnimate}
>
<Grid item xs={4} sx={{ height: "50%" }}>
<Item
sx={{
"&& .MuiSvgIcon-root": {
width: "240px!important",
height: "auto!important",
},
}}
>
<AboutLogoIcon></AboutLogoIcon>
<p
style={{
color: "#ffffff80",
marginTop: "20px",
}}
>
Multiway Robotics Co. Ltd.
</p>
<p
style={{
color: "#fff",
marginTop: "60px",
}}
>
序列号: MW7788802000666
</p>
<p
style={{
color: "#fff",
marginTop: "20px",
<GlobalPanel delay={100} direction="up">
<Item
sx={{
"&& .MuiSvgIcon-root": {
width: "240px!important",
height: "auto!important",
},
}}
>
出厂日期: 2023-12-25
</p>
</Item>
<AboutLogoIcon></AboutLogoIcon>
<p
style={{
color: "#ffffff80",
marginTop: "20px",
}}
>
Multiway Robotics Co. Ltd.
</p>
<p
style={{
color: "#fff",
marginTop: "60px",
}}
>
序列号: MW7788802000666
</p>
<p
style={{
color: "#fff",
marginTop: "20px",
}}
>
出厂日期: 2023-12-25
</p>
</Item>
</GlobalPanel>
</Grid>
<Grid item xs={8} sx={{ height: "50%" }}>
<Item
sx={{
flexDirection: "row",
flexWrap: "wrap",
alignContent: "stretch",
alignItems: "baseline",
padding: "20px",
}}
>
<p style={{ width: "100%", textAlign: "left" }}>信息统计及预警</p>

<Grid
xs={4}
<GlobalPanel delay={250} direction="up">
<Item
sx={{
position: "relative",
flexDirection: "row",
flexWrap: "wrap",
alignContent: "stretch",
alignItems: "baseline",
padding: "20px",
}}
>
{RenderOperationChart}
<PsBox>
<BottomTypography sx={{ fontSize: "20px", color: "#fff" }}>
{"运行时间"}
</BottomTypography>
<Typography
sx={{
fontSize: "16px!important",
color: "rgb(255 255 255)",
}}
>
Max {110} Hours
</Typography>
</PsBox>
</Grid>
<Grid
xs={4}
<p style={{ width: "100%", textAlign: "left" }}>信息统计及预警</p>

<Grid
xs={4}
sx={{
position: "relative",
}}
>
{RenderOperationChart}
<PsBox>
<BottomTypography sx={{ fontSize: "20px", color: "#fff" }}>
{"运行时间"}
</BottomTypography>
<Typography
sx={{
fontSize: "16px!important",
color: "rgb(255 255 255)",
}}
>
Max {110} Hours
</Typography>
</PsBox>
</Grid>
<Grid
xs={4}
sx={{
position: "relative",
}}
>
<CommonChart max={365} value={15} />
<PsBox>
<BottomTypography sx={{ fontSize: "20px", color: "#fff" }}>
{"系统天数"}
</BottomTypography>
<Typography
sx={{
fontSize: "16px!important",
color: "rgb(255 255 255)",
}}
>
Max {365} Days
</Typography>
</PsBox>
</Grid>
<Grid
xs={4}
sx={{
position: "relative",
}}
>
<CommonChart max={5000} value={1111} />
<PsBox>
<BottomTypography sx={{ fontSize: "20px", color: "#fff" }}>
{"公里数"}
</BottomTypography>
<Typography
sx={{
fontSize: "16px!important",
color: "rgb(255 255 255)",
}}
>
Max {5000} Km
</Typography>
</PsBox>
</Grid>
</Item>
</GlobalPanel>
</Grid>
<Grid item xs={8} sx={{ height: "50%" }}>
<GlobalPanel delay={350} direction="up">
<Item
sx={{
position: "relative",
padding: "20px",
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
}}
>
<CommonChart max={365} value={15} />
<PsBox>
<BottomTypography sx={{ fontSize: "20px", color: "#fff" }}>
{"系统天数"}
</BottomTypography>
<Typography
sx={{
fontSize: "16px!important",
color: "rgb(255 255 255)",
}}
>
Max {365} Days
</Typography>
</PsBox>
</Grid>
<Grid
xs={4}
{nodeListDom}
</Item>
</GlobalPanel>
</Grid>
<Grid item xs={4} sx={{ height: "50%" }}>
<GlobalPanel delay={450} direction="up">
<Item
sx={{
position: "relative",
"&& .MuiSvgIcon-root": {
width: "90px!important",
height: "auto!important",
},
}}
onClick={() => {
setOpen(true);
setStartAnimate(true);
}}
>
<CommonChart max={5000} value={1111} />
<PsBox>
<BottomTypography sx={{ fontSize: "20px", color: "#fff" }}>
{"公里数"}
</BottomTypography>
<Typography
sx={{
fontSize: "16px!important",
color: "rgb(255 255 255)",
}}
>
Max {5000} Km
</Typography>
</PsBox>
</Grid>
</Item>
</Grid>
<Grid item xs={8} sx={{ height: "50%" }}>
<Item
sx={{
padding: "20px",
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
}}
>
{nodeListDom}
</Item>
</Grid>
<Grid item xs={4} sx={{ height: "50%" }}>
<Item
sx={{
"&& .MuiSvgIcon-root": {
width: "90px!important",
height: "auto!important",
},
}}
onClick={() => {
setOpen(true);
setStartAnimate(true);
}}
>
<ErrorInfoIcon></ErrorInfoIcon>
<p style={{ fontSize: "30px", marginTop: "24px" }}>异常查询</p>
</Item>
<ErrorInfoIcon></ErrorInfoIcon>
<p style={{ fontSize: "30px", marginTop: "24px" }}>异常查询</p>
</Item>
</GlobalPanel>
</Grid>
</StyleGrid>
<SecondaryPage
Expand All @@ -309,4 +300,4 @@ const Settings = () => {
);
};

export default Settings;
export default About;

0 comments on commit c30055d

Please sign in to comment.