Compare commits

...

2 Commits

Author SHA1 Message Date
Dawn1Ocean 2731f5560f fix welcome layout 2024-04-07 13:19:01 +08:00
Dawn1Ocean 0604a3dfbf fix welcome layout 2024-04-07 13:18:32 +08:00
2 changed files with 75 additions and 11 deletions

View File

@ -1,12 +1,73 @@
import { Todo } from '@/components'; import { PageContainer, ProForm, ProFormRadio, ProFormText } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-components'; import { Card, Col, Row, Space, message } from 'antd';
import { Card } from 'antd';
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
const Logs: React.FC = () => { const Logs: React.FC = () => {
return ( return (
<PageContainer> <PageContainer>
<Card> <Card>
<Todo /> <ProForm<{
name: string;
company?: string;
useMode?: string;
}>
submitter={{
render: (props, doms) => {
return (
<Row>
<Col span={14} offset={4}>
<Space>{doms}</Space>
</Col>
</Row>);
},
}}
onFinish={async (values) => {
await waitTime(2000);
console.log(values);
message.success('提交成功');
}}
params={{}}
request={async () => {
await waitTime(100);
return {
name: '蚂蚁设计有限公司',
useMode: 'chapter',
};
}}
>
<ProFormRadio.Group
style={{
margin: 16,
}}
/>
<ProFormText
width="md"
name="name"
label="签约客户名称"
tooltip="最长为 24 位"
placeholder="请输入名称"
/>
<ProFormText
width="md"
name="company"
label="我方公司名称"
placeholder="请输入名称"
/>
<ProFormText
name={['contract', 'name']}
width="md"
label="合同名称"
placeholder="请输入名称"
/>
</ProForm>
</Card> </Card>
</PageContainer> </PageContainer>
); );

View File

@ -1,12 +1,12 @@
import type { TinyRingConfig } from '@ant-design/charts';
import { Tiny } from '@ant-design/charts'; import { Tiny } from '@ant-design/charts';
import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components'; import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
import { Card, Statistic } from 'antd'; import { Card, Statistic } from 'antd';
import RcResizeObserver from 'rc-resize-observer'; import RcResizeObserver from 'rc-resize-observer';
import { useState } from 'react'; import { useState } from 'react';
import type { TinyRingConfig } from '@ant-design/charts';
const percentRing = (percent: number, frontColor: string): React.JSX.Element => { const percentRing = (percent: number, frontColor: string): React.JSX.Element => {
const TinyRing = Tiny.Ring; const TinyRing = Tiny.Ring as (props: TinyRingConfig) => JSX.Element;
const config: TinyRingConfig = { const config: TinyRingConfig = {
percent: percent / 100, percent: percent / 100,
width: 120, width: 120,
@ -52,7 +52,7 @@ const Logs: React.FC = () => {
const [responsive, setResponsive] = useState(false); const [responsive, setResponsive] = useState(false);
return ( return (
<PageContainer> <PageContainer>
<Card> <Card style={{ color: '#f5f5f5' }}>
<RcResizeObserver <RcResizeObserver
key="resize-observer" key="resize-observer"
onResize={(offset) => { onResize={(offset) => {
@ -60,18 +60,19 @@ const Logs: React.FC = () => {
}} }}
> >
<ProCard split={responsive ? 'horizontal' : 'vertical'}> <ProCard split={responsive ? 'horizontal' : 'vertical'}>
<ProCard title="左侧详情" colSpan="48%"> <ProCard colSpan="45%">
<ProCard hoverable></ProCard>
</ProCard> </ProCard>
<ProCard colSpan="20%"> <ProCard colSpan="20%">
<StatisticCard <StatisticCard
style={{ marginTop: '2vh' }} hoverable
style={{ marginTop: '0vh' }}
statistic={{ statistic={{
title: '今日预填写工单数', title: '今日预填写工单数',
value: indexData.todayPT, value: indexData.todayPT,
description: ( description: (
<Statistic <Statistic
style={{ marginTop: '15vh' }} style={{ marginTop: '15vh', marginBottom: '8vh' }}
title="今日反馈数" title="今日反馈数"
value={indexData.report} value={indexData.report}
/> />
@ -82,6 +83,7 @@ const Logs: React.FC = () => {
<ProCard> <ProCard>
<StatisticCard.Group direction={responsive ? 'row' : 'column'}> <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
<StatisticCard <StatisticCard
hoverable
chart={percentRing( chart={percentRing(
Math.round(((indexData.oreo / indexData.totalPT) * 1000) / 10), Math.round(((indexData.oreo / indexData.totalPT) * 1000) / 10),
'#00CC66', '#00CC66',
@ -94,6 +96,7 @@ const Logs: React.FC = () => {
chartPlacement="left" chartPlacement="left"
/> />
<StatisticCard <StatisticCard
hoverable
style={{ marginTop: '3vh' }} style={{ marginTop: '3vh' }}
chart={percentRing( chart={percentRing(
Math.round((indexData.allSuccess / indexData.all) * 1000) / 10, Math.round((indexData.allSuccess / indexData.all) * 1000) / 10,