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 },