feat: 仪表盘update
This commit is contained in:
landaiqing
@@ -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;
|
||||
flex-direction: row;
|
||||
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;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1,17 +1,46 @@
|
||||
/** @format */
|
||||
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 styles from "./index.module.less";
|
||||
import ReactECharts from "echarts-for-react";
|
||||
// import * as echarts from "echarts/core";
|
||||
import { ProCard } from "@ant-design/pro-components";
|
||||
import { ProCard, ProList } from "@ant-design/pro-components";
|
||||
import storage from "@/assets/icons/storage.svg";
|
||||
import bucket from "@/assets/icons/bucket.svg";
|
||||
import file from "@/assets/icons/file.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 [loading, setLoading] = useState(true);
|
||||
const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
@@ -68,40 +97,36 @@ const MainHome: FunctionComponent = () => {
|
||||
data: [800, 900, 220, 130, 660, 289],
|
||||
color: "#F58080",
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#FFCAD4", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#F58080", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F58080", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(245,128,128, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#FFCAD4", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#F58080", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F58080", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(245,128,128, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F58080",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
color: "#F58080",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#F58080",
|
||||
},
|
||||
borderColor: "#F58080",
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
@@ -110,40 +135,36 @@ const MainHome: FunctionComponent = () => {
|
||||
type: "line",
|
||||
data: [123, 568, 111, 222, 123, 56],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#AAF487", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#47D8BE", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#47D8BE", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(71,216,190, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#AAF487", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#47D8BE", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#47D8BE", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(71,216,190, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#AAF487",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
color: "#AAF487",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#AAF487",
|
||||
},
|
||||
borderColor: "#AAF487",
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
@@ -152,45 +173,89 @@ const MainHome: FunctionComponent = () => {
|
||||
type: "line",
|
||||
data: [125, 568, 25, 36, 784, 56],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#F6D06F", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#F9A589", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F9A589", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(249,165,137, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#F6D06F", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#F9A589", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F9A589", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(249,165,137, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F6D06F",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
color: "#F6D06F",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#F6D06F",
|
||||
},
|
||||
borderColor: "#F6D06F",
|
||||
},
|
||||
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(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
@@ -198,71 +263,160 @@ const MainHome: FunctionComponent = () => {
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<Space className={styles.home_content_main}>
|
||||
<div className={styles.home_content_head_left}>
|
||||
<Card
|
||||
style={{ width: "14.5vw", height: "21vh" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={<Avatar shape="square" size="large" src={storage} />}
|
||||
title="存储"
|
||||
description="This is the description"
|
||||
<div className={styles.home_content_main}>
|
||||
<div className={styles.home_content_head}>
|
||||
<div className={styles.home_content_head_left}>
|
||||
<Card
|
||||
style={{ width: "13.5vw", height: "21vh" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={<Avatar shape="square" size="large" src={storage} />}
|
||||
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>
|
||||
</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={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>
|
||||
</ProCard>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ProCard bordered boxShadow>
|
||||
<ReactECharts
|
||||
option={option}
|
||||
style={{ width: "39vw", height: "42vh" }}
|
||||
showLoading={loading}
|
||||
<ProCard
|
||||
bordered
|
||||
boxShadow
|
||||
style={{
|
||||
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>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/** @format */
|
||||
|
||||
import { GithubFilled, InfoCircleFilled, QuestionCircleFilled } from "@ant-design/icons";
|
||||
import { GithubFilled, InfoCircleFilled, LogoutOutlined, QuestionCircleFilled } from "@ant-design/icons";
|
||||
import {
|
||||
DefaultFooter,
|
||||
PageContainer,
|
||||
@@ -11,6 +11,7 @@ import defaultProps from "./defaultSettings.tsx";
|
||||
import { Link, Outlet, useLocation } from "react-router-dom";
|
||||
import logo from "@/assets/images/logo.png";
|
||||
import { Suspense } from "react";
|
||||
import { Dropdown } from "antd";
|
||||
|
||||
export default function Layout() {
|
||||
const location: any = useLocation();
|
||||
@@ -46,6 +47,24 @@ export default function Layout() {
|
||||
src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||
title: "七妮妮",
|
||||
size: "small",
|
||||
// @ts-ignore
|
||||
render: (props, dom) => {
|
||||
return (
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: 'logout',
|
||||
icon: <LogoutOutlined />,
|
||||
label: '退出登录',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
{dom}
|
||||
</Dropdown>
|
||||
);
|
||||
},
|
||||
}}
|
||||
actionsRender={(props: any) => {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
|
||||
Reference in New Issue
Block a user