Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: `VSDataTag`. 部分

Browse Source
main
Lei OT 3 months ago
parent d5bc8a639f
commit dfc6515029
4 changed files with 91 additions and 36 deletions
Show Stats Download Patch File Download Diff File

8
src/components/Data.jsx
Unescape Escape View File

@ -36,8 +36,9 @@ export const VSTag = (props) => {
* @property {string} dataSuffix * @property {string} dataSuffix
*/ */
export const VSDataTag = ({ diffPercent=0, diffData=0, data1=0, data2=0, dataSuffix='' }) => { export const VSDataTag = ({ diffPercent=0, diffData=0, data1=0, data2=0, dataSuffix='' }) => {
const _diffPercent = diffPercent || (data2) ? fixTo2Decimals((data1-data2)/data2*100) : 100; const _diffPercent = diffPercent || ((data2) ? fixTo2Decimals((data1-data2)/data2*100) : 100);
const _diffData = diffData || isNaN(data2) ? fixTo2Decimals(data1-0) : (fixTo2Decimals(data1-data2)); const _diffPercentSuffix = String(_diffPercent).includes('%') ? '' : '%';
const _diffData = diffData || (isNaN(data2) ? fixTo2Decimals(data1-0) : (fixTo2Decimals(data1-data2)));
const CaretIcon = parseInt(_diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined; const CaretIcon = parseInt(_diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined;
const tagColor = parseInt(_diffPercent) < 0 ? 'gold' : 'lime'; const tagColor = parseInt(_diffPercent) < 0 ? 'gold' : 'lime';
// parseInt(_diffPercent) === 0 ? ( // parseInt(_diffPercent) === 0 ? (
@ -50,8 +51,7 @@ export const VSDataTag = ({ diffPercent=0, diffData=0, data1=0, data2=0, dataSuf
</div> </div>
{_diffData !== 0 && ( {_diffData !== 0 && (
<Tag icon={<CaretIcon />} color={tagColor}> <Tag icon={<CaretIcon />} color={tagColor}>
{_diffPercent} {_diffPercent}<span>{_diffPercentSuffix}</span>&nbsp;&nbsp;<span>{_diffData}{dataSuffix}</span>
<span>%</span>&nbsp;&nbsp;<span>{_diffData}{dataSuffix}</span>
</Tag> </Tag>
)} )}
</span> </span>

5
src/utils/commons.js
Unescape Escape View File

@ -1,6 +1,11 @@
import { Tag } from "antd"; import { Tag } from "antd";
import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons"; import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons";
/**
* 显示对比标签
* @deprecated
* 使用 VSTag 或 VSDataTag 组件
*/
export function show_vs_tag(vs, vs_diff, data1, data2) { export function show_vs_tag(vs, vs_diff, data1, data2) {
let tag = "-"; let tag = "-";
if (parseInt(vs) < 0) { if (parseInt(vs) < 0) {

93
src/views/biz/BizOrder.jsx
Unescape Escape View File

@ -4,10 +4,10 @@ import { ContainerOutlined, BlockOutlined, SmileOutlined, MobileOutlined, Custom
import { Line, Pie } from '@ant-design/charts'; import { Line, Pie } from '@ant-design/charts';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import * as comm from '@haina/utils-commons'; import * as comm from '@haina/utils-commons';
import { show_vs_tag } from './../../utils/commons';
import DateGroupRadio from '../../components/DateGroupRadio'; import DateGroupRadio from '../../components/DateGroupRadio';
import SearchForm from '../../components/search/SearchForm'; import SearchForm from '../../components/search/SearchForm';
import { TableExportBtn } from '../../components/Data'; import { TableExportBtn } from '../../components/Data';
import { VSDataTag, } from './../../components/Data';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { toJS } from 'mobx'; import { toJS } from 'mobx';
@ -15,6 +15,13 @@ import { stores_Context } from '../../config';
import { useShallow } from 'zustand/shallow'; import { useShallow } from 'zustand/shallow';
import useBizOrderStore, { orderCountDataMapper, orderCountDataFieldMapper } from '../../zustand/BizOrder'; import useBizOrderStore, { orderCountDataMapper, orderCountDataFieldMapper } from '../../zustand/BizOrder';
const DataRenderCell = ({ data1, data2, dataSuffix = '', showDiffData, ...props }) => {
if (showDiffData) {
return <VSDataTag data1={data1} data2={data2} dataSuffix={dataSuffix} {...props} />;
}
return <div>{data1}{dataSuffix}</div>;
};
const BizOrder = observer(() => { const BizOrder = observer(() => {
const { date_picker_store: searchFormStore } = useContext(stores_Context); const { date_picker_store: searchFormStore } = useContext(stores_Context);
@ -143,12 +150,18 @@ const BizOrder = observer(() => {
title: '数量', title: '数量',
children: [ children: [
{ {
title: !showDiff title: (
? result.ordercountTotal1?.OrderCount <DataRenderCell
: show_vs_tag(result.ordercountTotal1?.OrderCount_vs, result.ordercountTotal1?.OrderCount_diff, result.ordercountTotal1?.OrderCount, result.ordercountTotal2?.OrderCount), showDiffData={showDiff}
data1={result.ordercountTotal1?.OrderCount}
data2={result.ordercountTotal2?.OrderCount}
diffPercent={result.ordercountTotal1?.OrderCount_vs}
diffData={result.ordercountTotal1?.OrderCount_diff}
/>
),
titleX: [result.ordercountTotal1?.OrderCount, result.ordercountTotal2?.OrderCount].join(' vs '), titleX: [result.ordercountTotal1?.OrderCount, result.ordercountTotal2?.OrderCount].join(' vs '),
dataIndex: 'OrderCount', dataIndex: 'OrderCount',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.OrderCount_vs, r.OrderCount_diff, r.OrderCount, r.diff?.OrderCount)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.OrderCount} diffPercent={r.OrderCount_vs} diffData={r.OrderCount_diff} />,
}, },
], ],
}, },
@ -156,12 +169,18 @@ const BizOrder = observer(() => {
title: '成交数', title: '成交数',
children: [ children: [
{ {
title: !showDiff title: (
? result.ordercountTotal1?.CJCount <DataRenderCell
: show_vs_tag(result.ordercountTotal1?.CJCount_vs, result.ordercountTotal1?.CJCount_diff, result.ordercountTotal1?.CJCount, result.ordercountTotal2?.CJCount), showDiffData={showDiff}
data1={result.ordercountTotal1?.CJCount}
data2={result.ordercountTotal2?.CJCount}
diffPercent={result.ordercountTotal1?.CJCount_vs}
diffData={result.ordercountTotal1?.CJCount_diff}
/>
),
titleX: [result.ordercountTotal1?.CJCount, result.ordercountTotal2?.CJCount].join(' vs '), titleX: [result.ordercountTotal1?.CJCount, result.ordercountTotal2?.CJCount].join(' vs '),
dataIndex: 'CJCount', dataIndex: 'CJCount',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJCount_vs, r.CJCount_diff, r.CJCount, r.diff?.CJCount)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.CJCount} diffPercent={r.CJCount_vs} diffData={r.CJCount_diff} />,
}, },
], ],
}, },
@ -169,12 +188,18 @@ const BizOrder = observer(() => {
title: '成交人数', title: '成交人数',
children: [ children: [
{ {
title: !showDiff title: (
? result.ordercountTotal1?.CJPersonNum <DataRenderCell
: show_vs_tag(result.ordercountTotal1?.CJPersonNum_vs, result.ordercountTotal1?.CJPersonNum_diff, result.ordercountTotal1?.CJPersonNum, result.ordercountTotal2?.CJPersonNum), showDiffData={showDiff}
data1={result.ordercountTotal1?.CJPersonNum}
data2={result.ordercountTotal2?.CJPersonNum}
diffPercent={result.ordercountTotal1?.CJPersonNum_vs}
diffData={result.ordercountTotal1?.CJPersonNum_diff}
/>
),
titleX: [result.ordercountTotal1?.CJPersonNum, result.ordercountTotal2?.CJPersonNum].join(' vs '), titleX: [result.ordercountTotal1?.CJPersonNum, result.ordercountTotal2?.CJPersonNum].join(' vs '),
dataIndex: 'CJPersonNum', dataIndex: 'CJPersonNum',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJPersonNum_vs, r.CJPersonNum_diff, r.CJPersonNum, r.diff?.CJPersonNum)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.CJPersonNum} diffPercent={r.CJPersonNum_vs} diffData={r.CJPersonNum_diff} />,
}, },
], ],
}, },
@ -182,12 +207,18 @@ const BizOrder = observer(() => {
title: '成交率', title: '成交率',
children: [ children: [
{ {
title: !showDiff title: (
? result.ordercountTotal1?.CJrate <DataRenderCell
: show_vs_tag(result.ordercountTotal1?.CJrate_vs, result.ordercountTotal1?.CJrate_diff, result.ordercountTotal1?.CJrate, result.ordercountTotal2?.CJrate), showDiffData={showDiff}
data1={result.ordercountTotal1?.CJrate}
data2={result.ordercountTotal2?.CJrate}
diffPercent={result.ordercountTotal1?.CJrate_vs}
diffData={result.ordercountTotal1?.CJrate_diff}
/>
),
titleX: [result.ordercountTotal1?.CJrate, result.ordercountTotal2?.CJrate].join(' vs '), titleX: [result.ordercountTotal1?.CJrate, result.ordercountTotal2?.CJrate].join(' vs '),
dataIndex: 'CJrate', dataIndex: 'CJrate',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJrate_vs, r.CJrate_diff, r.CJrate, r.diff?.CJrate)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.CJrate} diffPercent={r.CJrate_vs} diffData={r.CJrate_diff} />,
}, },
], ],
}, },
@ -195,12 +226,18 @@ const BizOrder = observer(() => {
title: '成交毛利（预计）', title: '成交毛利（预计）',
children: [ children: [
{ {
title: !showDiff title: (
? result.ordercountTotal1?.YJLY <DataRenderCell
: show_vs_tag(result.ordercountTotal1?.YJLY_vs, result.ordercountTotal1?.YJLY_diff, result.ordercountTotal1?.YJLY, result.ordercountTotal2?.YJLY), showDiffData={showDiff}
data1={result.ordercountTotal1?.YJLY}
data2={result.ordercountTotal2?.YJLY}
diffPercent={result.ordercountTotal1?.YJLY_vs}
diffData={result.ordercountTotal1?.YJLY_diff}
/>
),
titleX: [result.ordercountTotal1?.YJLY, result.ordercountTotal2?.YJLY].join(' vs '), titleX: [result.ordercountTotal1?.YJLY, result.ordercountTotal2?.YJLY].join(' vs '),
dataIndex: 'YJLY', dataIndex: 'YJLY',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.YJLY_vs, r.YJLY_diff, r.YJLY, r.diff?.YJLY)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.YJLY} diffPercent={r.YJLY_vs} diffData={r.YJLY_diff} />,
}, },
], ],
}, },
@ -209,12 +246,18 @@ const BizOrder = observer(() => {
title: '单个订单价值', title: '单个订单价值',
children: [ children: [
{ {
title: !showDiff title: (
? result.ordercountTotal1?.Ordervalue <DataRenderCell
: show_vs_tag(result.ordercountTotal1?.Ordervalue_vs, result.ordercountTotal1?.Ordervalue_diff, result.ordercountTotal1?.Ordervalue, result.ordercountTotal2?.Ordervalue), showDiffData={showDiff}
data1={result.ordercountTotal1?.Ordervalue}
data2={result.ordercountTotal2?.Ordervalue}
diffPercent={result.ordercountTotal1?.Ordervalue_vs}
diffData={result.ordercountTotal1?.Ordervalue_diff}
/>
),
titleX: [result.ordercountTotal1?.Ordervalue, result.ordercountTotal2?.Ordervalue].join(' vs '), titleX: [result.ordercountTotal1?.Ordervalue, result.ordercountTotal2?.Ordervalue].join(' vs '),
dataIndex: 'Ordervalue', dataIndex: 'Ordervalue',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.Ordervalue_vs, r.Ordervalue_diff, r.Ordervalue, r.diff?.Ordervalue)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.Ordervalue} diffPercent={r.Ordervalue_vs} diffData={r.Ordervalue_diff} />,
}, },
], ],
}, },

21
src/views/biz/reports/TrainsUpsell.jsx
Unescape Escape View File

@ -3,8 +3,8 @@ import { Row, Col, Table, Spin, Space, Divider } from 'antd';
import { Funnel, Pie, Sunburst } from '@ant-design/charts'; import { Funnel, Pie, Sunburst } from '@ant-design/charts';
import { isEmpty } from '@haina/utils-commons'; import { isEmpty } from '@haina/utils-commons';
import { show_vs_tag } from '../../../utils/commons';
import SearchForm from '../../../components/search/SearchForm'; import SearchForm from '../../../components/search/SearchForm';
import { VSDataTag, } from './../../../components/Data';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { toJS } from 'mobx'; import { toJS } from 'mobx';
@ -63,6 +63,13 @@ const buildPieData = (data1, data2) => {
return data01.concat(data02); return data01.concat(data02);
}; };
const DataRenderCell = ({ data1, data2, dataSuffix = '', showDiffData, ...props }) => {
if (showDiffData) {
return <VSDataTag data1={data1} data2={data2} dataSuffix={dataSuffix} {...props} />;
}
return <div>{data1}{dataSuffix}</div>;
};
const TrainsUpsell = observer(({ ...props }) => { const TrainsUpsell = observer(({ ...props }) => {
const { date_picker_store: searchFormStore } = useContext(stores_Context); const { date_picker_store: searchFormStore } = useContext(stores_Context);
const [searchValues, setSearchValues] = useTrainsStore(useShallow((state) => [state.searchValues, state.setSearchValues])); const [searchValues, setSearchValues] = useTrainsStore(useShallow((state) => [state.searchValues, state.setSearchValues]));
@ -168,33 +175,33 @@ const TrainsUpsell = observer(({ ...props }) => {
{ {
title: '数量', title: '数量',
dataIndex: 'OrderCount', dataIndex: 'OrderCount',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.OrderCount_vs, r.OrderCount_diff, r.OrderCount, r.diff?.OrderCount)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.OrderCount} diffPercent={r.OrderCount_vs} diffData={r.OrderCount_diff} />,
}, },
{ {
title: '成交数', title: '成交数',
dataIndex: 'CJCount', dataIndex: 'CJCount',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJCount_vs, r.CJCount_diff, r.CJCount, r.diff?.CJCount)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.CJCount} diffPercent={r.CJCount_vs} diffData={r.CJCount_diff} />,
}, },
{ {
title: '成交人数', title: '成交人数',
dataIndex: 'CJPersonNum', dataIndex: 'CJPersonNum',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJPersonNum_vs, r.CJPersonNum_diff, r.CJPersonNum, r.diff?.CJPersonNum)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.CJPersonNum} diffPercent={r.CJPersonNum_vs} diffData={r.CJPersonNum_diff} />,
}, },
{ {
title: '成交率', title: '成交率',
dataIndex: 'CJrate', dataIndex: 'CJrate',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJrate_vs, r.CJrate_diff, r.CJrate, r.diff?.CJrate)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.CJrate} diffPercent={r.CJrate_vs} diffData={r.CJrate_diff} />,
}, },
{ {
title: '成交毛利（预计）', title: '成交毛利（预计）',
dataIndex: 'YJLY', dataIndex: 'YJLY',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.YJLY_vs, r.YJLY_diff, r.YJLY, r.diff?.YJLY)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.YJLY} diffPercent={r.YJLY_vs} diffData={r.YJLY_diff} />,
}, },
{ {
title: '单个订单价值', title: '单个订单价值',
dataIndex: 'Ordervalue', dataIndex: 'Ordervalue',
render: (text, r) => (!showDiff ? text : show_vs_tag(r.Ordervalue_vs, r.Ordervalue_diff, r.Ordervalue, r.diff?.Ordervalue)), render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.Ordervalue} diffPercent={r.Ordervalue_vs} diffData={r.Ordervalue_diff} />,
}, },
]; ];
return ( return (

Write Preview
Loading…
Cancel
Save