Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 仪表盘update

Browse Source
This commit is contained in:
landaiqing
2024-07-03 16:32:01 +08:00
parent 21ff0416a3
commit 2b2b944e40
3 changed files with 348 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Main/Home/index.module.less
View File

@@ -1,20 +1,32 @@
.home_content_main{ .home_content_main {
display: flex;
flex-direction: column;
}
.home_content_head {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.home_content_head_left {
height: 51vh;
width: 31vw;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-around;
flex-wrap: wrap;
.home_content_head_left {
height: 51vh;
width: 31vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
} }
.home_content_list {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 30px;
}

452
src/components/Main/Home/index.tsx
View File

@@ -1,17 +1,46 @@
/** @format */ /** @format */
import { FunctionComponent, useEffect, useState } from "react"; import { FunctionComponent, useEffect, useState } from "react";
import { Avatar, Card, Skeleton, Space } from "antd"; import { Avatar, Card, Skeleton, Space, Tag } from "antd";
import Meta from "antd/es/card/Meta"; import Meta from "antd/es/card/Meta";
import styles from "./index.module.less"; import styles from "./index.module.less";
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
// import * as echarts from "echarts/core"; import { ProCard, ProList } from "@ant-design/pro-components";
import { ProCard } from "@ant-design/pro-components";
import storage from "@/assets/icons/storage.svg"; import storage from "@/assets/icons/storage.svg";
import bucket from "@/assets/icons/bucket.svg"; import bucket from "@/assets/icons/bucket.svg";
import file from "@/assets/icons/file.svg"; import file from "@/assets/icons/file.svg";
import flux from "@/assets/icons/flux.svg"; import flux from "@/assets/icons/flux.svg";
import * as echarts from "echarts/core";
const defaultData = [
{
id: "1",
name: "语雀的天空",
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
desc: "我是一条测试的描述",
},
{
id: "2",
name: "Ant Design",
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
desc: "我是一条测试的描述",
},
{
id: "3",
name: "蚂蚁金服体验科技",
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
desc: "我是一条测试的描述",
},
{
id: "4",
name: "TechUI",
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
desc: "我是一条测试的描述",
},
];
type DataItem = (typeof defaultData)[number];
const MainHome: FunctionComponent = () => { const MainHome: FunctionComponent = () => {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
const option = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@@ -68,40 +97,36 @@ const MainHome: FunctionComponent = () => {
data: [800, 900, 220, 130, 660, 289], data: [800, 900, 220, 130, 660, 289],
color: "#F58080", color: "#F58080",
lineStyle: { lineStyle: {
normal: { width: 5,
width: 5, color: {
color: { type: "linear",
type: "linear",
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#FFCAD4", // 0% 处的颜色 color: "#FFCAD4", // 0% 处的颜色
}, },
{ {
offset: 0.4, offset: 0.4,
color: "#F58080", // 100% 处的颜色 color: "#F58080", // 100% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "#F58080", // 100% 处的颜色 color: "#F58080", // 100% 处的颜色
}, },
], ],
globalCoord: false, // 缺省为 false globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(245,128,128, 0.5)",
shadowBlur: 10,
shadowOffsetY: 7,
}, },
shadowColor: "rgba(245,128,128, 0.5)",
shadowBlur: 10,
shadowOffsetY: 7,
}, },
itemStyle: { itemStyle: {
normal: { color: "#F58080",
color: "#F58080", borderWidth: 10,
borderWidth: 10, /*shadowColor: 'rgba(72,216,191, 0.3)',
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/ shadowBlur: 100,*/
borderColor: "#F58080", borderColor: "#F58080",
},
}, },
smooth: true, smooth: true,
}, },
@@ -110,40 +135,36 @@ const MainHome: FunctionComponent = () => {
type: "line", type: "line",
data: [123, 568, 111, 222, 123, 56], data: [123, 568, 111, 222, 123, 56],
lineStyle: { lineStyle: {
normal: { width: 5,
width: 5, color: {
color: { type: "linear",
type: "linear",
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#AAF487", // 0% 处的颜色 color: "#AAF487", // 0% 处的颜色
}, },
{ {
offset: 0.4, offset: 0.4,
color: "#47D8BE", // 100% 处的颜色 color: "#47D8BE", // 100% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "#47D8BE", // 100% 处的颜色 color: "#47D8BE", // 100% 处的颜色
}, },
], ],
globalCoord: false, // 缺省为 false globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(71,216,190, 0.5)",
shadowBlur: 10,
shadowOffsetY: 7,
}, },
shadowColor: "rgba(71,216,190, 0.5)",
shadowBlur: 10,
shadowOffsetY: 7,
}, },
itemStyle: { itemStyle: {
normal: { color: "#AAF487",
color: "#AAF487", borderWidth: 10,
borderWidth: 10, /*shadowColor: 'rgba(72,216,191, 0.3)',
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/ shadowBlur: 100,*/
borderColor: "#AAF487", borderColor: "#AAF487",
},
}, },
smooth: true, smooth: true,
}, },
@@ -152,45 +173,89 @@ const MainHome: FunctionComponent = () => {
type: "line", type: "line",
data: [125, 568, 25, 36, 784, 56], data: [125, 568, 25, 36, 784, 56],
lineStyle: { lineStyle: {
normal: { width: 5,
width: 5, color: {
color: { type: "linear",
type: "linear",
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#F6D06F", // 0% 处的颜色 color: "#F6D06F", // 0% 处的颜色
}, },
{ {
offset: 0.4, offset: 0.4,
color: "#F9A589", // 100% 处的颜色 color: "#F9A589", // 100% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "#F9A589", // 100% 处的颜色 color: "#F9A589", // 100% 处的颜色
}, },
], ],
globalCoord: false, // 缺省为 false globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(249,165,137, 0.5)",
shadowBlur: 10,
shadowOffsetY: 7,
}, },
shadowColor: "rgba(249,165,137, 0.5)",
shadowBlur: 10,
shadowOffsetY: 7,
}, },
itemStyle: { itemStyle: {
normal: { color: "#F6D06F",
color: "#F6D06F", borderWidth: 10,
borderWidth: 10, /*shadowColor: 'rgba(72,216,191, 0.3)',
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/ shadowBlur: 100,*/
borderColor: "#F6D06F", borderColor: "#F6D06F",
},
}, },
smooth: true, smooth: true,
}, },
], ],
}; };
function getVirtulData() {
const today: any = echarts.number.parseDate(new Date());
const dayTime: any = 3600 * 24 * 1000;
const thatday: any = today - dayTime * 365;
const data = [];
for (let time = thatday; time < today; time += dayTime) {
data.push([
echarts.format.formatTime("yyyy-MM-dd", time),
Math.floor(Math.random() * 10000),
]);
}
return {
data,
today: echarts.format.formatTime("yyyy-MM-dd", today),
thatday: echarts.format.formatTime("yyyy-MM-dd", thatday),
};
}
const option2 = {
visualMap: {
min: 0,
max: 10000,
inRange: {
color: ["#ebedf0", "#c6e48b", "#7bc96f", "#239a3b", "#196027"],
},
show: false,
},
backgroundColor: "#fff",
calendar: {
cellSize: [18, 18],
range: [getVirtulData()["thatday"], getVirtulData()["today"]],
itemStyle: {
borderColor: "#fff",
borderWidth: 4,
},
splitLine: {
show: false,
},
yearLabel: { show: false },
},
series: {
type: "heatmap",
coordinateSystem: "calendar",
data: getVirtulData()["data"],
},
};
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setLoading(false); setLoading(false);
@@ -198,71 +263,160 @@ const MainHome: FunctionComponent = () => {
}, []); }, []);
return ( return (
<> <>
<Space className={styles.home_content_main}> <div className={styles.home_content_main}>
<div className={styles.home_content_head_left}> <div className={styles.home_content_head}>
<Card <div className={styles.home_content_head_left}>
style={{ width: "14.5vw", height: "21vh" }} <Card
loading={false} style={{ width: "13.5vw", height: "21vh" }}
bordered loading={false}
hoverable> bordered
<Skeleton loading={loading} active avatar> hoverable>
<Meta <Skeleton loading={loading} active avatar>
avatar={<Avatar shape="square" size="large" src={storage} />} <Meta
title="存储" avatar={<Avatar shape="square" size="large" src={storage} />}
description="This is the description" title="存储"
description="This is the description"
/>
</Skeleton>
</Card>
<Card
style={{ width: "13.5vw", height: "21vh" }}
loading={false}
bordered
hoverable>
<Skeleton loading={loading} active avatar>
<Meta
avatar={<Avatar shape="square" size="large" src={bucket} />}
title="存储桶"
description="This is the description"
/>
</Skeleton>
</Card>
<Card
style={{ width: "13.5vw", height: "21vh" }}
loading={false}
bordered
hoverable>
<Skeleton loading={loading} active avatar>
<Meta
avatar={<Avatar shape="square" size="large" src={file} />}
title="文件"
description="This is the description"
/>
</Skeleton>
</Card>
<Card
style={{ width: "13.5vw", height: "21vh" }}
loading={false}
bordered
hoverable>
<Skeleton loading={loading} active avatar>
<Meta
avatar={<Avatar shape="square" size="large" src={flux} />}
title="总量"
description="This is the description"
/>
</Skeleton>
</Card>
</div>
<div>
<ProCard bordered boxShadow>
<ReactECharts
option={option}
style={{ width: "39vw", height: "42vh" }}
showLoading={loading}
/> />
</Skeleton> </ProCard>
</Card> </div>
<Card
style={{ width: "14.5vw", height: "21vh" }}
loading={false}
bordered
hoverable>
<Skeleton loading={loading} active avatar>
<Meta
avatar={<Avatar shape="square" size="large" src={bucket} />}
title="存储桶"
description="This is the description"
/>
</Skeleton>
</Card>
<Card
style={{ width: "14.5vw", height: "21vh" }}
loading={false}
bordered
hoverable>
<Skeleton loading={loading} active avatar>
<Meta
avatar={<Avatar shape="square" size="large" src={file} />}
title="文件"
description="This is the description"
/>
</Skeleton>
</Card>
<Card
style={{ width: "14.5vw", height: "21vh" }}
loading={false}
bordered
hoverable>
<Skeleton loading={loading} active avatar>
<Meta
avatar={<Avatar shape="square" size="large" src={flux} />}
title="总量"
description="This is the description"
/>
</Skeleton>
</Card>
</div> </div>
<div> <div>
<ProCard bordered boxShadow> <ProCard
<ReactECharts bordered
option={option} boxShadow
style={{ width: "39vw", height: "42vh" }} style={{
showLoading={loading} marginTop: "30px",
}}
title={"文件上传热力图"}>
<ReactECharts option={option2} style={{ height: 200 }} />
</ProCard>
</div>
<div className={styles.home_content_list}>
<ProCard bordered boxShadow style={{ width: "49%" }}>
<ProList<DataItem>
rowKey="id"
headerTitle="最近上传文件"
dataSource={dataSource}
showActions="hover"
editable={{
onSave: async (key, record, originRow) => {
console.log(key, record, originRow);
return true;
},
}}
onDataSourceChange={setDataSource}
metas={{
title: {
dataIndex: "name",
},
avatar: {
dataIndex: "image",
editable: false,
},
description: {
dataIndex: "desc",
},
subTitle: {
render: () => {
return (
<Space size={0}>
<Tag color="blue">Ant Design</Tag>
<Tag color="#5BD8A6">TechUI</Tag>
</Space>
);
},
},
}}
/>
</ProCard>
<ProCard bordered boxShadow style={{ width: "49%" }}>
<ProList<DataItem>
rowKey="id"
headerTitle="最近浏览文件"
dataSource={dataSource}
showActions="hover"
editable={{
onSave: async (key, record, originRow) => {
console.log(key, record, originRow);
return true;
},
}}
onDataSourceChange={setDataSource}
metas={{
title: {
dataIndex: "name",
},
avatar: {
dataIndex: "image",
editable: false,
},
description: {
dataIndex: "desc",
},
subTitle: {
render: () => {
return (
<Space size={0}>
<Tag color="blue">Ant Design</Tag>
<Tag color="#5BD8A6">TechUI</Tag>
</Space>
);
},
},
}}
/> />
</ProCard> </ProCard>
</div> </div>
</Space> </div>
</> </>
); );
}; };

21
src/views/Main/index.tsx
View File

@@ -1,6 +1,6 @@
/** @format */ /** @format */
import { GithubFilled, InfoCircleFilled, QuestionCircleFilled } from "@ant-design/icons"; import { GithubFilled, InfoCircleFilled, LogoutOutlined, QuestionCircleFilled } from "@ant-design/icons";
import { import {
DefaultFooter, DefaultFooter,
PageContainer, PageContainer,
@@ -11,6 +11,7 @@ import defaultProps from "./defaultSettings.tsx";
import { Link, Outlet, useLocation } from "react-router-dom"; import { Link, Outlet, useLocation } from "react-router-dom";
import logo from "@/assets/images/logo.png"; import logo from "@/assets/images/logo.png";
import { Suspense } from "react"; import { Suspense } from "react";
import { Dropdown } from "antd";
export default function Layout() { export default function Layout() {
const location: any = useLocation(); const location: any = useLocation();
@@ -46,6 +47,24 @@ export default function Layout() {
src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg", src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
title: "七妮妮", title: "七妮妮",
size: "small", size: "small",
// @ts-ignore
render: (props, dom) => {
return (
<Dropdown
menu={{
items: [
{
key: 'logout',
icon: <LogoutOutlined />,
label: '退出登录',
},
],
}}
>
{dom}
</Dropdown>
);
},
}} }}
actionsRender={(props: any) => { actionsRender={(props: any) => {
// eslint-disable-next-line react/prop-types // eslint-disable-next-line react/prop-types