From aab6601b109530bdb06841888304e41c82d869bc Mon Sep 17 00:00:00 2001 From: Lei OT Date: Thu, 28 Sep 2023 17:03:21 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=88=86=E5=B8=83:=20?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=90=8C=E6=AF=94,=20=E7=8E=AF=E6=AF=94.=20t?= =?UTF-8?q?odo:=20=E8=BE=93=E5=85=A5=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Data.jsx | 12 ++++++-- src/stores/Distribution.js | 39 ++++++++++++++++++++++++-- src/views/Distribution.jsx | 56 ++++++++++++++++++++++++++++++++++---- 3 files changed, 96 insertions(+), 11 deletions(-) diff --git a/src/components/Data.jsx b/src/components/Data.jsx index d503f07..0dda6ff 100644 --- a/src/components/Data.jsx +++ b/src/components/Data.jsx @@ -1,6 +1,12 @@ import { Tag } from 'antd'; import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; +/** + * @property diffPercent + * @property diffData + * @property data1 + * @property data2 + */ export const VSTag = (props) => { const { diffPercent, diffData, data1, data2 } = props; const CaretIcon = parseInt(diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined; @@ -9,11 +15,11 @@ export const VSTag = (props) => { '-' ) : ( -
+ {/*
{data1} vs {data2} -
+
*/} } color={tagColor}> - {diffPercent} {diffData} + {diffPercent} % ); diff --git a/src/stores/Distribution.js b/src/stores/Distribution.js index 52e8f48..3afff20 100644 --- a/src/stores/Distribution.js +++ b/src/stores/Distribution.js @@ -1,6 +1,6 @@ import { makeAutoObservable, runInAction, toJS } from 'mobx'; import * as req from '../utils/request'; -import { isEmpty, pick, sortBy } from '../utils/commons'; +import { isEmpty, pick, sortBy, fixTo2Decimals } from '../utils/commons'; const modelMapper = { 'tourDays': { url: '/service-Analyse2/GetTradeApartByTourDays' }, @@ -25,13 +25,19 @@ class Distribution { this.pageLoading = true; const mkey = this.curTab; this[mkey] = { loading: true, dataSource: [] }; + param.operator = param?.operator || -1; + param.DateToY1 = '2022-08-01'; // todo: 同比, 环比的参数 + param.DateToY2 = '2022-08-31 23:59:59'; + param.DateToQ1 = '2023-07-01'; // todo: 同比, 环比的参数 + param.DateToQ2 = '2023-07-31 23:59:59'; const json = await req.fetchJSON(modelMapper[mkey].url, param); if (json.errcode === 0) { runInAction(() => { const dataLength = json.result.length; this[mkey].loading = false; this[mkey].originData = json.result; - this[mkey].dataSource = dataLength > 20 ? json.result.slice(0, 30) : json.result; + const pickResult = dataLength > 20 ? json.result.slice(0, 30) : json.result; + this[mkey].dataSource = calcDiff({ result: pickResult, resultToY: json.resultToY, resultToQ: json.resultToQ}); this.pageLoading = false; }); } @@ -88,4 +94,33 @@ class Distribution { GlobalDestination = { loading: false, dataSource: [] }; destinationCountry = { loading: false, dataSource: [] }; } + +/** + * 计算 同比, 环比 + */ +const calcDiff = ({ result, resultToY, resultToQ }) => { + if (isEmpty(resultToY) || isEmpty(resultToQ)) { + // return result; + } + const resultMapped = result.reduce((r,v) => ({...r, [v.key]: v}), {}); + const resultToYMapped = resultToY.reduce((r,v) => ({...r, [v.key]: v}), {}); + const resultToQMapped = resultToQ.reduce((r,v) => ({...r, [v.key]: v}), {}); + const afterCalc = result.map(row => { + const diff = { + SumMLY: resultToYMapped?.[row.key]?.SumML || 0, + SumMLToY: resultToYMapped?.[row.key]?.SumML ? fixTo2Decimals((row.SumML-(resultToYMapped[row.key].SumML))/(resultToYMapped[row.key].SumML)*100) : 0, + SumMLQ: resultToQMapped?.[row.key]?.SumML || 0, + SumMLToQ: resultToQMapped?.[row.key]?.SumML ? fixTo2Decimals((row.SumML-(resultToQMapped[row.key].SumML))/(resultToQMapped[row.key].SumML)*100) : 0, + + ConfirmOrderY: resultToYMapped?.[row.key]?.ConfirmOrder || 0, + ConfirmOrderToY: resultToYMapped?.[row.key]?.ConfirmOrder ? fixTo2Decimals((row.ConfirmOrder-(resultToYMapped[row.key].ConfirmOrder))/(resultToYMapped[row.key].ConfirmOrder)*100) : 0, + ConfirmOrderQ: resultToQMapped?.[row.key]?.ConfirmOrder || 0, + ConfirmOrderToQ: resultToQMapped?.[row.key]?.ConfirmOrder ? fixTo2Decimals((row.ConfirmOrder-(resultToQMapped[row.key].ConfirmOrder))/(resultToQMapped[row.key].ConfirmOrder)*100) : 0, + }; + return {...row, ...diff}; + }); + console.log(afterCalc, '=================='); + return afterCalc; +}; + export default Distribution; diff --git a/src/views/Distribution.jsx b/src/views/Distribution.jsx index 1131b4a..fd7e10b 100644 --- a/src/views/Distribution.jsx +++ b/src/views/Distribution.jsx @@ -1,14 +1,17 @@ import { useContext, useEffect } from 'react'; import { observer } from 'mobx-react'; import { stores_Context } from '../config'; -import { Row, Col, Spin, Tabs, Table } from 'antd'; +import { Row, Col, Spin, Tabs, Table, Space, Typography } from 'antd'; import { RingProgress } from '@ant-design/plots'; import SearchForm from './../components/search/SearchForm'; import { empty } from '../utils/commons'; import { dataFieldAlias } from '../libs/ht'; +import { VSTag } from './../components/Data'; import './kpi.css'; +const { Text } = Typography; + const apartOptions = [ { key: 'tourDays', value: 'tourDays', label: '团天数' }, { key: 'PML', value: 'PML', label: '单团毛利' }, @@ -53,10 +56,51 @@ export default observer(() => { }; const columns = [ { title: '', dataIndex: 'label' }, - { title: '团数', dataIndex: 'ConfirmOrder' }, - { title: '业绩', dataIndex: 'SumML', render: (v) => dataFieldAlias.SumML.formatter(v) }, - { title: '团数占比', dataIndex: 'ConfirmOrderPercent', render: (v) => }, - { title: '业绩占比', dataIndex: 'SumMLPercent', render: (v) => }, + { title: '团数', dataIndex: 'ConfirmOrder', render: (v, r) => ( + <> + + {v} + + + 同比: + + + 环比: + + + + + + ) }, + { + title: '业绩', + dataIndex: 'SumML', + render: (v, r) => ( + <> + + {dataFieldAlias.SumML.formatter(v)} + + + 同比: + + + 环比: + + + + + ), + }, + { + title: '团数占比', + dataIndex: 'ConfirmOrderPercent', + render: (v, r) => , + }, + { + title: '业绩占比', + dataIndex: 'SumMLPercent', + render: (v, r) => , + }, ]; return ( <> @@ -67,7 +111,7 @@ export default observer(() => { initialValue: { ...formValues, }, - shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'], + shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates', 'operator'], fieldProps: { DepartmentList: { show_all: true }, WebCode: { show_all: true },