feat: chart in welcome page
Dawn1Ocean
parent
58719b709b
commit
29fa1341d8
32
doc/api.md
32
doc/api.md
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
## 主页面
|
||||
|
||||
### 统计数据 `GET /admin/stats`
|
||||
### 统计数据 `GET /stats`
|
||||
|
||||
data:
|
||||
|
||||
|
|
@ -43,13 +43,32 @@ data:
|
|||
"success": true,
|
||||
"data": {
|
||||
"notInOreo": 114,
|
||||
"total": 514
|
||||
"totalPT": 514, // 所有预填写工单
|
||||
"allSuccess": 1919, // 所有成功工单（包括 Oreo 内）
|
||||
"all": 2024 // 所有工单（包括 Oreo 内）
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 当前值班信息 `GET /admin/duty/current`
|
||||
|
||||
#### 正常值班
|
||||
|
||||
data:
|
||||
|
||||
```json
|
||||
{
|
||||
"isNormalDuty": true,
|
||||
"inDutyCnt": 3,
|
||||
"otherDutyTime": "",
|
||||
"offDutyReason": "",
|
||||
"place": "204",
|
||||
"dutyRecoverTime": ""
|
||||
}
|
||||
```
|
||||
|
||||
#### 其他值班
|
||||
|
||||
data:
|
||||
|
||||
```json
|
||||
|
|
@ -93,7 +112,6 @@ request:
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
#### 更新值班表 `POST /admin/sheet/update`
|
||||
|
||||
request:
|
||||
|
|
@ -202,7 +220,7 @@ data:
|
|||
|
||||
无关项返回空字符串，后端手动校验
|
||||
|
||||
request:
|
||||
request:
|
||||
|
||||
```json
|
||||
{
|
||||
|
|
@ -227,7 +245,7 @@ request:
|
|||
"current": 1,
|
||||
"pageSize": 10,
|
||||
"name?": "西西弗", // 如果不筛选则不出现在 request-body 内
|
||||
"phone?": "18888888888", // 如果不筛选则不出现在 request-body 内
|
||||
"phone?": "18888888888" // 如果不筛选则不出现在 request-body 内
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -244,7 +262,7 @@ data:
|
|||
"phone": "13333333333",
|
||||
"time": "2024-03-07T17:52:48.523303",
|
||||
"text": "你们为什么修不好天选3的PD充电？"
|
||||
},
|
||||
}
|
||||
// ...
|
||||
]
|
||||
}
|
||||
|
|
@ -288,7 +306,7 @@ data:
|
|||
"id": 514,
|
||||
"info": "何君琳"
|
||||
}
|
||||
},
|
||||
}
|
||||
// ...
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
"not ie <= 10"
|
||||
],
|
||||
"dependencies": {
|
||||
"@ant-design/charts": "^2.0.3",
|
||||
"@ant-design/icons": "^4.8.1",
|
||||
"@ant-design/pro-components": "^2.7.0",
|
||||
"@umijs/route-utils": "^2.2.2",
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const Logs: React.FC = () => {
|
|||
},
|
||||
extra: {
|
||||
dataIndex: 'time',
|
||||
render: (_, row) => {
|
||||
render: (_: React.ReactNode, row: ReportItem) => {
|
||||
return (
|
||||
<div style={{ marginLeft: '3vh' }}>
|
||||
{moment(row.time).format('YYYY-M-D HH:mm:ss')}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,35 @@
|
|||
import { PageContainer, ProCard } from '@ant-design/pro-components';
|
||||
import { Tiny } from '@ant-design/charts';
|
||||
import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
|
||||
import { Card, Statistic } from 'antd';
|
||||
import RcResizeObserver from 'rc-resize-observer';
|
||||
import { useState } from 'react';
|
||||
|
||||
const { Divider } = ProCard;
|
||||
|
||||
const percentRing = (percent: number, frontColor: string): React.JSX.Element => {
|
||||
const config = {
|
||||
percent,
|
||||
width: 120,
|
||||
height: 120,
|
||||
color: ['#E8EFF5', frontColor],
|
||||
annotations: [
|
||||
{
|
||||
type: 'text',
|
||||
style: {
|
||||
text: `${percent * 100}%`,
|
||||
x: '50%',
|
||||
y: '50%',
|
||||
textAlign: 'center',
|
||||
fontSize: 16,
|
||||
fontStyle: 'bold',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return <Tiny.Ring {...config} />;
|
||||
};
|
||||
|
||||
const Logs: React.FC = () => {
|
||||
const [responsive, setResponsive] = useState(false);
|
||||
return (
|
||||
|
|
@ -18,24 +43,52 @@ const Logs: React.FC = () => {
|
|||
>
|
||||
<ProCard.Group direction={responsive ? 'column' : 'row'}>
|
||||
<ProCard>
|
||||
<Statistic title="今日UV" value={79.0} precision={2} />
|
||||
<Statistic title="今日预填写工单数" value={13} />
|
||||
</ProCard>
|
||||
<Divider type={responsive ? 'horizontal' : 'vertical'} />
|
||||
<ProCard>
|
||||
<Statistic title="冻结金额" value={112893.0} precision={2} />
|
||||
</ProCard>
|
||||
<Divider type={responsive ? 'horizontal' : 'vertical'} />
|
||||
<ProCard>
|
||||
<Statistic title="信息完整度" value={93} suffix="/ 100" />
|
||||
</ProCard>
|
||||
<Divider type={responsive ? 'horizontal' : 'vertical'} />
|
||||
<ProCard>
|
||||
<Statistic title="冻结金额" value={112893.0} />
|
||||
</ProCard>
|
||||
<StatisticCard
|
||||
chart={percentRing(0.372, '#00CC66')}
|
||||
statistic={{
|
||||
title: '加入 Oreo 工单数',
|
||||
value: 93,
|
||||
description: (
|
||||
<>
|
||||
<Statistic title="预填写工单总数" value={1145} />
|
||||
</>
|
||||
),
|
||||
}}
|
||||
chartPlacement="left"
|
||||
/>
|
||||
</ProCard.Group>
|
||||
</RcResizeObserver>
|
||||
<RcResizeObserver
|
||||
key="resize-observer"
|
||||
onResize={(offset) => {
|
||||
setResponsive(offset.width < 596);
|
||||
}}
|
||||
>
|
||||
<StatisticCard.Group direction={responsive ? 'column' : 'row'}>
|
||||
<ProCard>
|
||||
<Statistic title="今日反馈数" value={8} />
|
||||
</ProCard>
|
||||
<Divider type={responsive ? 'horizontal' : 'vertical'} />
|
||||
<StatisticCard
|
||||
chart={percentRing(0.642, '#66AFF4')}
|
||||
statistic={{
|
||||
title: '维修成功次数',
|
||||
value: 1818,
|
||||
description: (
|
||||
<>
|
||||
<Statistic title="Oreo、ETA 总工单数" value={1919} />
|
||||
</>
|
||||
),
|
||||
}}
|
||||
chartPlacement="left"
|
||||
/>
|
||||
</StatisticCard.Group>
|
||||
</RcResizeObserver>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
export default Logs;
|
||||
export default Logs;
|
||||
|
|
|
|||
Loading…
Reference in New Issue