From dfc651502949433c6fe59a0d6fab04165b9657d6 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Mon, 12 Jan 2026 10:41:26 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=20`VSDataTag`.=20=E9=83=A8?= =?UTF-8?q?=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Data.jsx | 8 +-- src/utils/commons.js | 5 ++ src/views/biz/BizOrder.jsx | 93 +++++++++++++++++++------- src/views/biz/reports/TrainsUpsell.jsx | 21 ++++-- 4 files changed, 91 insertions(+), 36 deletions(-) diff --git a/src/components/Data.jsx b/src/components/Data.jsx index bfd2d52..1cd4732 100644 --- a/src/components/Data.jsx +++ b/src/components/Data.jsx @@ -36,8 +36,9 @@ export const VSTag = (props) => { * @property {string} dataSuffix */ export const VSDataTag = ({ diffPercent=0, diffData=0, data1=0, data2=0, dataSuffix='' }) => { - const _diffPercent = diffPercent || (data2) ? fixTo2Decimals((data1-data2)/data2*100) : 100; - const _diffData = diffData || isNaN(data2) ? fixTo2Decimals(data1-0) : (fixTo2Decimals(data1-data2)); + const _diffPercent = diffPercent || ((data2) ? fixTo2Decimals((data1-data2)/data2*100) : 100); + const _diffPercentSuffix = String(_diffPercent).includes('%') ? '' : '%'; + const _diffData = diffData || (isNaN(data2) ? fixTo2Decimals(data1-0) : (fixTo2Decimals(data1-data2))); const CaretIcon = parseInt(_diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined; const tagColor = parseInt(_diffPercent) < 0 ? 'gold' : 'lime'; // parseInt(_diffPercent) === 0 ? ( @@ -50,8 +51,7 @@ export const VSDataTag = ({ diffPercent=0, diffData=0, data1=0, data2=0, dataSuf {_diffData !== 0 && ( } color={tagColor}> - {_diffPercent} - %  {_diffData}{dataSuffix} + {_diffPercent}{_diffPercentSuffix}  {_diffData}{dataSuffix} )} diff --git a/src/utils/commons.js b/src/utils/commons.js index 7c5fffa..4bc91ba 100644 --- a/src/utils/commons.js +++ b/src/utils/commons.js @@ -1,6 +1,11 @@ import { Tag } from "antd"; import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons"; +/** + * 显示对比标签 + * @deprecated + * 使用 VSTag 或 VSDataTag 组件 + */ export function show_vs_tag(vs, vs_diff, data1, data2) { let tag = "-"; if (parseInt(vs) < 0) { diff --git a/src/views/biz/BizOrder.jsx b/src/views/biz/BizOrder.jsx index 4edaaee..9db0a6e 100644 --- a/src/views/biz/BizOrder.jsx +++ b/src/views/biz/BizOrder.jsx @@ -4,10 +4,10 @@ import { ContainerOutlined, BlockOutlined, SmileOutlined, MobileOutlined, Custom import { Line, Pie } from '@ant-design/charts'; import { NavLink } from 'react-router-dom'; import * as comm from '@haina/utils-commons'; -import { show_vs_tag } from './../../utils/commons'; import DateGroupRadio from '../../components/DateGroupRadio'; import SearchForm from '../../components/search/SearchForm'; import { TableExportBtn } from '../../components/Data'; +import { VSDataTag, } from './../../components/Data'; import { observer } from 'mobx-react'; import { toJS } from 'mobx'; @@ -15,6 +15,13 @@ import { stores_Context } from '../../config'; import { useShallow } from 'zustand/shallow'; import useBizOrderStore, { orderCountDataMapper, orderCountDataFieldMapper } from '../../zustand/BizOrder'; +const DataRenderCell = ({ data1, data2, dataSuffix = '', showDiffData, ...props }) => { + if (showDiffData) { + return ; + } + return
{data1}{dataSuffix}
; +}; + const BizOrder = observer(() => { const { date_picker_store: searchFormStore } = useContext(stores_Context); @@ -143,12 +150,18 @@ const BizOrder = observer(() => { title: '数量', children: [ { - title: !showDiff - ? result.ordercountTotal1?.OrderCount - : show_vs_tag(result.ordercountTotal1?.OrderCount_vs, result.ordercountTotal1?.OrderCount_diff, result.ordercountTotal1?.OrderCount, result.ordercountTotal2?.OrderCount), + title: ( + + ), titleX: [result.ordercountTotal1?.OrderCount, result.ordercountTotal2?.OrderCount].join(' vs '), dataIndex: 'OrderCount', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.OrderCount_vs, r.OrderCount_diff, r.OrderCount, r.diff?.OrderCount)), + render: (text, r) => , }, ], }, @@ -156,12 +169,18 @@ const BizOrder = observer(() => { title: '成交数', children: [ { - title: !showDiff - ? result.ordercountTotal1?.CJCount - : show_vs_tag(result.ordercountTotal1?.CJCount_vs, result.ordercountTotal1?.CJCount_diff, result.ordercountTotal1?.CJCount, result.ordercountTotal2?.CJCount), + title: ( + + ), titleX: [result.ordercountTotal1?.CJCount, result.ordercountTotal2?.CJCount].join(' vs '), dataIndex: 'CJCount', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJCount_vs, r.CJCount_diff, r.CJCount, r.diff?.CJCount)), + render: (text, r) => , }, ], }, @@ -169,12 +188,18 @@ const BizOrder = observer(() => { title: '成交人数', children: [ { - title: !showDiff - ? result.ordercountTotal1?.CJPersonNum - : show_vs_tag(result.ordercountTotal1?.CJPersonNum_vs, result.ordercountTotal1?.CJPersonNum_diff, result.ordercountTotal1?.CJPersonNum, result.ordercountTotal2?.CJPersonNum), + title: ( + + ), titleX: [result.ordercountTotal1?.CJPersonNum, result.ordercountTotal2?.CJPersonNum].join(' vs '), dataIndex: 'CJPersonNum', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJPersonNum_vs, r.CJPersonNum_diff, r.CJPersonNum, r.diff?.CJPersonNum)), + render: (text, r) => , }, ], }, @@ -182,12 +207,18 @@ const BizOrder = observer(() => { title: '成交率', children: [ { - title: !showDiff - ? result.ordercountTotal1?.CJrate - : show_vs_tag(result.ordercountTotal1?.CJrate_vs, result.ordercountTotal1?.CJrate_diff, result.ordercountTotal1?.CJrate, result.ordercountTotal2?.CJrate), + title: ( + + ), titleX: [result.ordercountTotal1?.CJrate, result.ordercountTotal2?.CJrate].join(' vs '), dataIndex: 'CJrate', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJrate_vs, r.CJrate_diff, r.CJrate, r.diff?.CJrate)), + render: (text, r) => , }, ], }, @@ -195,12 +226,18 @@ const BizOrder = observer(() => { title: '成交毛利（预计）', children: [ { - title: !showDiff - ? result.ordercountTotal1?.YJLY - : show_vs_tag(result.ordercountTotal1?.YJLY_vs, result.ordercountTotal1?.YJLY_diff, result.ordercountTotal1?.YJLY, result.ordercountTotal2?.YJLY), + title: ( + + ), titleX: [result.ordercountTotal1?.YJLY, result.ordercountTotal2?.YJLY].join(' vs '), dataIndex: 'YJLY', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.YJLY_vs, r.YJLY_diff, r.YJLY, r.diff?.YJLY)), + render: (text, r) => , }, ], }, @@ -209,12 +246,18 @@ const BizOrder = observer(() => { title: '单个订单价值', children: [ { - title: !showDiff - ? result.ordercountTotal1?.Ordervalue - : show_vs_tag(result.ordercountTotal1?.Ordervalue_vs, result.ordercountTotal1?.Ordervalue_diff, result.ordercountTotal1?.Ordervalue, result.ordercountTotal2?.Ordervalue), + title: ( + + ), titleX: [result.ordercountTotal1?.Ordervalue, result.ordercountTotal2?.Ordervalue].join(' vs '), dataIndex: 'Ordervalue', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.Ordervalue_vs, r.Ordervalue_diff, r.Ordervalue, r.diff?.Ordervalue)), + render: (text, r) => , }, ], }, diff --git a/src/views/biz/reports/TrainsUpsell.jsx b/src/views/biz/reports/TrainsUpsell.jsx index 13e7ac4..75d3fc5 100644 --- a/src/views/biz/reports/TrainsUpsell.jsx +++ b/src/views/biz/reports/TrainsUpsell.jsx @@ -3,8 +3,8 @@ import { Row, Col, Table, Spin, Space, Divider } from 'antd'; import { Funnel, Pie, Sunburst } from '@ant-design/charts'; import { isEmpty } from '@haina/utils-commons'; -import { show_vs_tag } from '../../../utils/commons'; import SearchForm from '../../../components/search/SearchForm'; +import { VSDataTag, } from './../../../components/Data'; import { observer } from 'mobx-react'; import { toJS } from 'mobx'; @@ -63,6 +63,13 @@ const buildPieData = (data1, data2) => { return data01.concat(data02); }; +const DataRenderCell = ({ data1, data2, dataSuffix = '', showDiffData, ...props }) => { + if (showDiffData) { + return ; + } + return
{data1}{dataSuffix}
; +}; + const TrainsUpsell = observer(({ ...props }) => { const { date_picker_store: searchFormStore } = useContext(stores_Context); const [searchValues, setSearchValues] = useTrainsStore(useShallow((state) => [state.searchValues, state.setSearchValues])); @@ -168,33 +175,33 @@ const TrainsUpsell = observer(({ ...props }) => { { title: '数量', dataIndex: 'OrderCount', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.OrderCount_vs, r.OrderCount_diff, r.OrderCount, r.diff?.OrderCount)), + render: (text, r) => , }, { title: '成交数', dataIndex: 'CJCount', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJCount_vs, r.CJCount_diff, r.CJCount, r.diff?.CJCount)), + render: (text, r) => , }, { title: '成交人数', dataIndex: 'CJPersonNum', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJPersonNum_vs, r.CJPersonNum_diff, r.CJPersonNum, r.diff?.CJPersonNum)), + render: (text, r) => , }, { title: '成交率', dataIndex: 'CJrate', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.CJrate_vs, r.CJrate_diff, r.CJrate, r.diff?.CJrate)), + render: (text, r) => , }, { title: '成交毛利（预计）', dataIndex: 'YJLY', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.YJLY_vs, r.YJLY_diff, r.YJLY, r.diff?.YJLY)), + render: (text, r) => , }, { title: '单个订单价值', dataIndex: 'Ordervalue', - render: (text, r) => (!showDiff ? text : show_vs_tag(r.Ordervalue_vs, r.Ordervalue_diff, r.Ordervalue, r.diff?.Ordervalue)), + render: (text, r) => , }, ]; return (