121 lines
3.6 KiB
TypeScript
121 lines
3.6 KiB
TypeScript
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 } from 'antd';
|
|
import RcResizeObserver from 'rc-resize-observer';
|
|
import { useState } from 'react';
|
|
|
|
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} />;
|
|
};
|
|
|
|
interface IndexData {
|
|
todayPT: number;
|
|
report: number;
|
|
oreo: number;
|
|
totalPT: number;
|
|
allSuccess: number;
|
|
all: number;
|
|
}
|
|
|
|
const indexData: IndexData = {
|
|
todayPT: 14,
|
|
report: 8,
|
|
oreo: 93,
|
|
totalPT: 1145,
|
|
allSuccess: 1818,
|
|
all: 1919,
|
|
};
|
|
|
|
const Logs: React.FC = () => {
|
|
const [responsive, setResponsive] = useState(false);
|
|
return (
|
|
<PageContainer>
|
|
<Card style={{ color: '#f5f5f5' }}>
|
|
<RcResizeObserver
|
|
key="resize-observer"
|
|
onResize={(offset) => {
|
|
setResponsive(offset.width < 596);
|
|
}}
|
|
>
|
|
<ProCard split={responsive ? 'horizontal' : 'vertical'}>
|
|
<ProCard colSpan="45%">
|
|
<ProCard hoverable>左侧内容</ProCard>
|
|
</ProCard>
|
|
<ProCard colSpan="20%">
|
|
<StatisticCard
|
|
hoverable
|
|
style={{ marginTop: '0vh' }}
|
|
statistic={{
|
|
title: '今日预填写工单数',
|
|
value: indexData.todayPT,
|
|
description: (
|
|
<Statistic
|
|
style={{ marginTop: '15vh', marginBottom: '8vh' }}
|
|
title="今日反馈数"
|
|
value={indexData.report}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
</ProCard>
|
|
<ProCard>
|
|
<StatisticCard.Group direction={responsive ? 'row' : 'column'}>
|
|
<StatisticCard
|
|
hoverable
|
|
chart={percentRing(
|
|
Math.round(((indexData.oreo / indexData.totalPT) * 1000) / 10),
|
|
'#00CC66',
|
|
)}
|
|
statistic={{
|
|
title: '加入 Oreo 工单数',
|
|
value: indexData.oreo,
|
|
description: <Statistic title="预填写工单总数" value={indexData.totalPT} />,
|
|
}}
|
|
chartPlacement="left"
|
|
/>
|
|
<StatisticCard
|
|
hoverable
|
|
style={{ marginTop: '3vh' }}
|
|
chart={percentRing(
|
|
Math.round((indexData.allSuccess / indexData.all) * 1000) / 10,
|
|
'#66AFF4',
|
|
)}
|
|
statistic={{
|
|
title: '维修成功次数',
|
|
value: indexData.allSuccess,
|
|
description: <Statistic title="Oreo、ETA 总工单数" value={indexData.all} />,
|
|
}}
|
|
chartPlacement="left"
|
|
/>
|
|
</StatisticCard.Group>
|
|
</ProCard>
|
|
</ProCard>
|
|
</RcResizeObserver>
|
|
</Card>
|
|
</PageContainer>
|
|
);
|
|
};
|
|
export default Logs;
|