refactor: request in DutyInfo & Welcome

mgy
Dawn_Ocean 2024-04-20 21:57:50 +08:00
parent 311d67a1b1
commit 9fc19a3ebd
5 changed files with 187 additions and 125 deletions

View File

@ -1,7 +1,14 @@
import { PageContainer, ProForm, ProFormRadio, ProFormText } from '@ant-design/pro-components';
import { getDutyInfo } from '@/services/api';
import {
PageContainer,
ProForm,
ProFormDateTimeRangePicker,
ProFormDigit,
ProFormRadio,
ProFormText,
} from '@ant-design/pro-components';
import { Card, Col, Row, Space, message } from 'antd';
// import { useState } from 'react';
import request from 'umi-request';
import { useEffect, useState } from 'react';
import { Info } from './info';
const waitTime = (time: number = 100) => {
@ -13,10 +20,30 @@ const waitTime = (time: number = 100) => {
};
const DutyInfo: React.FC = () => {
// const [isNormalDuty, setIsNormalDuty] = useState(true);
const [dutyInfo, setDutyInfo] = useState<Info>();
const [loading, setLoading] = useState(true);
const [messageApi, contextHolder] = message.useMessage();
useEffect(() => {
getDutyInfo()
.then((res) => {
setDutyInfo(res.data);
setLoading(false);
})
.catch((err) => {
messageApi.open({
type: 'error',
content: '获取失败!' + err,
});
});
});
// const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
// defaultData.map((item) => item.id),
// );
return (
<PageContainer>
{contextHolder}
<Card>
{!loading && (
<ProForm<Info>
submitter={{
render: (props, doms) => {
@ -34,24 +61,20 @@ const DutyInfo: React.FC = () => {
console.log(values);
message.success('提交成功');
}}
params={{}}
request={async (params = {} as Record<string, any>) =>
request<Info>('/admin/duty/current', {
params,
})
}
initialValues={dutyInfo}
>
<ProFormRadio.Group
style={{
margin: 16,
}}
/>
<ProFormText
width="md"
name="inDutyCnt"
<ProFormDigit
label="值班人数"
tooltip="请输入数字"
name="inDutyCnt"
placeholder="请输入值班人数"
width="sm"
min={0}
max={10}
/>
<ProFormText
width="md"
@ -59,13 +82,45 @@ const DutyInfo: React.FC = () => {
label="暂停值班原因"
placeholder="请输入暂停值班的原因"
/>
<ProFormText
width="md"
name="place"
label="其他值班地点"
placeholder="请输入特殊值班地点"
/>
<ProFormText
name="dutyRecoverTime"
width="md"
label="值班恢复时间"
placeholder="请输入值班恢复的时间"
/>
<ProForm.Item label="值班时间" name="dataSource" trigger="onValuesChange">
{/* <EditableProTable<DataSourceType>
rowKey="id"
toolBarRender={false}
columns={columns}
recordCreatorProps={{
newRecordType: 'dataSource',
position: 'top',
record: () => ({
id: Date.now(),
addonBefore: 'ccccccc',
decs: 'testdesc',
}),
}}
editable={{
type: 'multiple',
editableKeys,
onChange: setEditableRowKeys,
actionRender: (row, _, dom) => {
return [dom.delete];
},
}}
/> */}
</ProForm.Item>
<ProFormDateTimeRangePicker name="dateTimeRange" label="值班时间" />
</ProForm>
)}
</Card>
</PageContainer>
);

View File

@ -5,6 +5,7 @@ import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-component
import { Card, Statistic, message } from 'antd';
import RcResizeObserver from 'rc-resize-observer';
import { useLayoutEffect, useState } from 'react';
import { Stat } from './stat';
const percentRing = (percent: number, frontColor: string): React.JSX.Element => {
const TinyRing = Tiny.Ring as (props: TinyRingConfig) => JSX.Element;
@ -34,24 +35,21 @@ const percentRing = (percent: number, frontColor: string): React.JSX.Element =>
const Logs: React.FC = () => {
const [responsive, setResponsive] = useState(false);
const [messageApi, contextHolder] = message.useMessage();
const [todayPT, setTodayPT] = useState(0);
const [report, setReport] = useState(0);
const [oreo, setOreo] = useState(0);
const [totalPT, setTotalPT] = useState(0);
const [allSuccess, setAllSuccess] = useState(0);
const [all, setAll] = useState(0);
const [stat, setStat] = useState<Stat>({
todayPT: 0,
totalPT: 0,
oreo: 0,
report: 0,
allSuccess: 0,
all: 0,
});
const [loading, setLoading] = useState(true);
useLayoutEffect(() => {
getStat()
.then((res) => {
const data = res.data;
setTodayPT(data.todayPT);
setReport(data.report);
setOreo(data.oreo);
setTotalPT(data.totalPT);
setAllSuccess(data.allSuccess);
setAll(data.all);
setStat(res.data);
setLoading(false);
})
.catch((err) => {
messageApi.open({
@ -63,6 +61,7 @@ const Logs: React.FC = () => {
return (
<PageContainer>
{contextHolder}
{!loading && (
<Card style={{ color: '#f5f5f5' }}>
<RcResizeObserver
key="resize-observer"
@ -80,12 +79,12 @@ const Logs: React.FC = () => {
style={{ marginTop: '0vh' }}
statistic={{
title: '今日预填写工单数',
value: todayPT,
value: stat.todayPT,
description: (
<Statistic
style={{ marginTop: '15vh', marginBottom: '8vh' }}
title="今日反馈数"
value={report}
value={stat.report}
/>
),
}}
@ -95,22 +94,28 @@ const Logs: React.FC = () => {
<StatisticCard.Group direction={responsive ? 'row' : 'column'}>
<StatisticCard
hoverable
chart={percentRing(Math.round(((oreo / totalPT) * 1000) / 10), '#00CC66')}
chart={percentRing(
Math.round(((stat.oreo / stat.totalPT) * 1000) / 10),
'#00CC66',
)}
statistic={{
title: '加入 Oreo 工单数',
value: oreo,
description: <Statistic title="预填写工单总数" value={totalPT} />,
value: stat.oreo,
description: <Statistic title="预填写工单总数" value={stat.totalPT} />,
}}
chartPlacement="left"
/>
<StatisticCard
hoverable
style={{ marginTop: '3vh' }}
chart={percentRing(Math.round((allSuccess / all) * 1000) / 10, '#66AFF4')}
chart={percentRing(
Math.round((stat.allSuccess / stat.all) * 1000) / 10,
'#66AFF4',
)}
statistic={{
title: '维修成功次数',
value: allSuccess,
description: <Statistic title="Oreo、ETA 总工单数" value={all} />,
value: stat.allSuccess,
description: <Statistic title="Oreo、ETA 总工单数" value={stat.all} />,
}}
chartPlacement="left"
/>
@ -119,6 +124,7 @@ const Logs: React.FC = () => {
</ProCard>
</RcResizeObserver>
</Card>
)}
</PageContainer>
);
};

View File

@ -0,0 +1,8 @@
export type Stat = {
todayPT: number;
totalPT: number;
oreo: number;
report: number;
allSuccess: number;
all: number;
};

View File

@ -1,6 +1,7 @@
// @ts-ignore
/* eslint-disable */
import { Info } from '@/pages/Admin/DutyInfo/info';
import { Stat } from '@/pages/Welcome/stat';
import { request } from '@umijs/max';
import { API } from './typings';
@ -37,7 +38,7 @@ export async function login(body: API.LoginParams, options?: { [key: string]: an
/** 获取首页信息 GET /stats */
export async function getStat(options?: { [key: string]: any }) {
return request<{
data: API.Stat;
data: Stat;
}>('/stats', {
method: 'GET',
...(options || {}),

View File

@ -41,12 +41,4 @@ declare namespace API {
size: number;
data: LogsItem[];
};
type Stat = {
todayPT: number;
totalPT: number;
oreo: number;
report: number;
allSuccess: number;
all: number;
};
}