主页: 总额: +商务数据
Lei OT
2 years ago
parent
4c3d8d3046
commit
ddace149b1
@ -0,0 +1,128 @@
|
||||
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 } from 'antd';
|
||||
|
||||
const { Statistic, Divider } = StatisticCard;
|
||||
|
||||
export default observer((props) => {
|
||||
const { icon, traditional, biz, kpiVal, originVal, ...extProps } = props;
|
||||
const ValueIcon = props.icon;
|
||||
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 bulletData = [
|
||||
{
|
||||
title: '',
|
||||
// ranges: [0, kpiVal || (traditional.value + biz.value + 100 )],
|
||||
ranges: [0, Math.ceil(originVal*1.1)],
|
||||
measures: [traditional.value, biz.value],
|
||||
target: kpiVal || 0,
|
||||
},
|
||||
];
|
||||
console.log(bulletData, 'bbbbbbbbb');
|
||||
|
||||
const RingProgressConfigBlue = {
|
||||
height: 60,
|
||||
width: 60,
|
||||
autoFit: false,
|
||||
color: ['#5B8FF9', '#E8EDF3'],
|
||||
label: false,
|
||||
};
|
||||
const RingProgressConfigGreen = {
|
||||
height: 50,
|
||||
width: 50,
|
||||
autoFit: false,
|
||||
// color: ['#f6bd16', '#E8EDF3'],
|
||||
color: ['#61ddaa', '#E8EDF3'], // #7cb305
|
||||
// innerRadius: 0.90,
|
||||
};
|
||||
|
||||
const bulletConfig = {
|
||||
// data,
|
||||
measureField: 'measures',
|
||||
rangeField: 'ranges',
|
||||
targetField: 'target',
|
||||
xField: 'title',
|
||||
// autoFit: false,
|
||||
// width: 20,
|
||||
height: 60,
|
||||
// renderer: 'svg',
|
||||
color: {
|
||||
range: [ '#E8EDF3', '#FFF3E1'],
|
||||
// range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
|
||||
measure: ['#5B8FF9', '#61DDAA'],
|
||||
target: '#39a3f4',
|
||||
},
|
||||
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" />,
|
||||
}}
|
||||
chart={<Bullet data={bulletData} {...bulletConfig} layout={'horizontal'} />}
|
||||
/>
|
||||
{false && <>
|
||||
{/* {props.childrenVisible && <> */}
|
||||
<Divider type={responsive ? 'horizontal' : 'vertical'} />
|
||||
<StatisticCard
|
||||
statistic={{
|
||||
className: '__hn-sta-wrapper',
|
||||
valueStyle,
|
||||
// title: '付费流量',
|
||||
// value: 3701928,
|
||||
value: props.traditional.value,
|
||||
// description: <Statistic title="占比" value="61.5%" />,
|
||||
}}
|
||||
chart={<RingProgress {...RingProgressConfigBlue} percent={0.7} statistic={{title: false,}} />}
|
||||
chartPlacement="left"
|
||||
/>
|
||||
<StatisticCard
|
||||
statistic={{
|
||||
className: '__hn-sta-wrapper',
|
||||
valueStyle,
|
||||
value: props.biz.value,
|
||||
// title: '免费流量',
|
||||
// value: 1806062,
|
||||
description: <Statistic title="占比" value="38.5%" />,
|
||||
}}
|
||||
chart={<img src="https://gw.alipayobjects.com/zos/alicdn/6YR18tCxJ/huanlv.svg" alt="百分比" width="100%" />}
|
||||
chartPlacement="left"
|
||||
/>
|
||||
</>}
|
||||
</StatisticCard.Group>
|
||||
</RcResizeObserver>
|
||||
);
|
||||
});
|
||||
Loading…
Reference in New Issue