fix welcome layout
parent
3b52792917
commit
0604a3dfbf
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue