You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.9 KiB
JavaScript
89 lines
2.9 KiB
JavaScript
import { useContext, useState } from 'react';
|
|
import { observer } from 'mobx-react';
|
|
import { StatisticCard } from '@ant-design/pro-components';
|
|
import { RingProgress, Progress, Bullet } from '@ant-design/plots';
|
|
import RcResizeObserver from 'rc-resize-observer';
|
|
import { stores_Context } from '../config';
|
|
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
|
|
import { Table, Space } from 'antd';
|
|
|
|
const { Statistic, Divider } = StatisticCard;
|
|
|
|
export default observer((props) => {
|
|
const { icon, traditional, biz, kpiVal, originVal, diff, ...extProps } = props;
|
|
const ValueIcon = props.icon;
|
|
const valueStyle = { color: '#3f8600' };
|
|
// const valueStyle = { color: (props?.VSrate || -1) < 0 ? '#3f8600' : '#cf1322' };
|
|
// const VSIcon = () => ((props?.VSrate || -1) < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />);
|
|
// console.log(props, ';;;;');
|
|
const [responsive, setResponsive] = useState(false);
|
|
const showMulti = traditional.value && biz.value;
|
|
const rangeMax = Math.max(originVal, kpiVal);
|
|
const bulletData = [
|
|
{
|
|
title: '',
|
|
ranges: [0, Math.ceil(rangeMax / 0.95)], // 留一点进度条, 不填满
|
|
measures: [traditional.value, biz.value],
|
|
target: kpiVal || 0,
|
|
},
|
|
];
|
|
|
|
const bulletConfig = {
|
|
measureField: 'measures',
|
|
rangeField: 'ranges',
|
|
targetField: 'target',
|
|
xField: 'title',
|
|
height: 60,
|
|
color: {
|
|
range: ['#E8EDF3', '#FFF3E1'],
|
|
// range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
|
|
measure: ['#5B8FF9', '#61DDAA'],
|
|
target: kpiVal ? '#FF9845' : '#5B8FF9',
|
|
},
|
|
label: {
|
|
measure: {
|
|
position: 'middle',
|
|
style: {
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
line: null,
|
|
label: false,
|
|
},
|
|
yAxis: false,
|
|
tooltip: false,
|
|
// 自定义 legend
|
|
legend: false,
|
|
};
|
|
return (
|
|
<RcResizeObserver
|
|
key="resize-observer"
|
|
onResize={(offset) => {
|
|
setResponsive(offset.width < 596);
|
|
}}
|
|
>
|
|
<StatisticCard.Group direction={responsive ? 'column' : 'row'}>
|
|
<StatisticCard
|
|
statistic={{
|
|
className: '__hn-sta-wrapper',
|
|
valueStyle,
|
|
...extProps,
|
|
value: props.valueSuffix ? `${props.value} ${props.valueSuffix}` : props.value,
|
|
prefix: <ValueIcon twoToneColor={"#89B67F"} />,
|
|
description: (
|
|
<Space>
|
|
<Statistic title={diff.label} value={` ${diff.value}`} />
|
|
{diff.VSrate && <Statistic title="同比" value={`${diff.VSrate}%`} trend={diff.VSrate > 0 ? 'up' : 'down'} />}
|
|
</Space>
|
|
),
|
|
}}
|
|
chart={showMulti ? <Bullet data={bulletData} {...bulletConfig} layout={'horizontal'} />: false}
|
|
footer={null}
|
|
/>
|
|
</StatisticCard.Group>
|
|
</RcResizeObserver>
|
|
);
|
|
});
|