Compare commits
2 Commits
3b52792917
...
2731f5560f
| Author | SHA1 | Date |
|---|---|---|
|
|
2731f5560f | |
|
|
0604a3dfbf |
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue