fix welcome layout

mgy
Dawn1Ocean 2024-04-07 13:18:32 +08:00
parent 3b52792917
commit 0604a3dfbf
2 changed files with 74 additions and 10 deletions

View File

@ -1,12 +1,73 @@
import { Todo } from '@/components';
import { PageContainer } from '@ant-design/pro-components';
import { Card } from 'antd';
import { PageContainer, ProForm, ProFormRadio, ProFormText } from '@ant-design/pro-components';
import { Card, Col, Row, Space, message } from 'antd';
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
const Logs: React.FC = () => {
return (
<PageContainer>
<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>
</PageContainer>
);

View File

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