From 2b2b944e40b9e3620af8384fe921e8fd032a2e42 Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Wed, 3 Jul 2024 16:32:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=AA=E8=A1=A8=E7=9B=98update?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Main/Home/index.module.less | 38 +- src/components/Main/Home/index.tsx | 452 ++++++++++++++------- src/views/Main/index.tsx | 21 +- 3 files changed, 348 insertions(+), 163 deletions(-) diff --git a/src/components/Main/Home/index.module.less b/src/components/Main/Home/index.module.less index dfa5e97..1ce9e96 100644 --- a/src/components/Main/Home/index.module.less +++ b/src/components/Main/Home/index.module.less @@ -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; - +} diff --git a/src/components/Main/Home/index.tsx b/src/components/Main/Home/index.tsx index 2b69eec..7fc0fa8 100644 --- a/src/components/Main/Home/index.tsx +++ b/src/components/Main/Home/index.tsx @@ -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(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 ( <> - -
- - - } - title="存储" - description="This is the description" +
+
+
+ + + } + title="存储" + description="This is the description" + /> + + + + + } + title="存储桶" + description="This is the description" + /> + + + + + } + title="文件" + description="This is the description" + /> + + + + + } + title="总量" + description="This is the description" + /> + + +
+
+ + - - - - - } - title="存储桶" - description="This is the description" - /> - - - - - } - title="文件" - description="This is the description" - /> - - - - - } - title="总量" - description="This is the description" - /> - - + +
- - + + +
+
+ + + 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 ( + + Ant Design + TechUI + + ); + }, + }, + }} + /> + + + + 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 ( + + Ant Design + TechUI + + ); + }, + }, + }} />
- +
); }; diff --git a/src/views/Main/index.tsx b/src/views/Main/index.tsx index 31ee377..9e5b928 100644 --- a/src/views/Main/index.tsx +++ b/src/views/Main/index.tsx @@ -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 ( + , + label: '退出登录', + }, + ], + }} + > + {dom} + + ); + }, }} actionsRender={(props: any) => { // eslint-disable-next-line react/prop-types