132 lines
4.1 KiB
TypeScript
132 lines
4.1 KiB
TypeScript
import { getStat } from '@/services/api';
|
|
import type { TinyRingConfig } from '@ant-design/charts';
|
|
import { Tiny } from '@ant-design/charts';
|
|
import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
|
|
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;
|
|
const config: TinyRingConfig = {
|
|
percent: percent / 100,
|
|
width: 120,
|
|
height: 120,
|
|
color: ['#E8EFF5', frontColor],
|
|
annotations: [
|
|
{
|
|
type: 'text',
|
|
style: {
|
|
text: `${percent}%`,
|
|
x: '50%',
|
|
y: '50%',
|
|
textAlign: 'center',
|
|
fontSize: 16,
|
|
fontStyle: 'bold',
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
return <TinyRing {...config} />;
|
|
};
|
|
|
|
const Logs: React.FC = () => {
|
|
const [responsive, setResponsive] = useState(false);
|
|
const [messageApi, contextHolder] = message.useMessage();
|
|
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) => {
|
|
setStat(res.data);
|
|
setLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
messageApi.open({
|
|
type: 'error',
|
|
content: '获取失败！' + err,
|
|
});
|
|
});
|
|
}, []);
|
|
return (
|
|
<PageContainer>
|
|
{contextHolder}
|
|
{!loading && (
|
|
<Card style={{ color: '#f5f5f5' }}>
|
|
<RcResizeObserver
|
|
key="resize-observer"
|
|
onResize={(offset) => {
|
|
setResponsive(offset.width < 596);
|
|
}}
|
|
>
|
|
<ProCard split={responsive ? 'horizontal' : 'vertical'}>
|
|
<ProCard colSpan="Auto">
|
|
<ProCard hoverable>左侧内容</ProCard>
|
|
</ProCard>
|
|
<ProCard colSpan="170px">
|
|
<StatisticCard
|
|
hoverable
|
|
style={{ marginTop: '0vh' }}
|
|
statistic={{
|
|
title: '今日预填写工单数',
|
|
value: stat.todayPT,
|
|
description: (
|
|
<Statistic
|
|
style={{ marginTop: '15vh', marginBottom: '8vh' }}
|
|
title="今日反馈数"
|
|
value={stat.report}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
</ProCard>
|
|
<ProCard colSpan="360px">
|
|
<StatisticCard.Group direction={responsive ? 'row' : 'column'}>
|
|
<StatisticCard
|
|
hoverable
|
|
chart={percentRing(
|
|
Math.round(((stat.oreo / stat.totalPT) * 1000) / 10),
|
|
'#00CC66',
|
|
)}
|
|
statistic={{
|
|
title: '加入 Oreo 工单数',
|
|
value: stat.oreo,
|
|
description: <Statistic title="预填写工单总数" value={stat.totalPT} />,
|
|
}}
|
|
chartPlacement="left"
|
|
/>
|
|
<StatisticCard
|
|
hoverable
|
|
style={{ marginTop: '3vh' }}
|
|
chart={percentRing(
|
|
Math.round((stat.allSuccess / stat.all) * 1000) / 10,
|
|
'#66AFF4',
|
|
)}
|
|
statistic={{
|
|
title: '维修成功次数',
|
|
value: stat.allSuccess,
|
|
description: <Statistic title="Oreo、ETA 总工单数" value={stat.all} />,
|
|
}}
|
|
chartPlacement="left"
|
|
/>
|
|
</StatisticCard.Group>
|
|
</ProCard>
|
|
</ProCard>
|
|
</RcResizeObserver>
|
|
</Card>
|
|
)}
|
|
</PageContainer>
|
|
);
|
|
};
|
|
export default Logs;
|