Merge branch 'main' of github.com:hainatravel-it/dashboard
ybc
3 months ago
commit
cb994aff29
@ -0,0 +1,366 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import { Row, Col, Tabs, Table, Divider, Spin, Checkbox, Space } from 'antd';
|
||||||
|
import { ContainerOutlined, BlockOutlined, SmileOutlined, MobileOutlined, CustomerServiceOutlined, IeOutlined } from '@ant-design/icons';
|
||||||
|
import { Line, Pie } from '@ant-design/charts';
|
||||||
|
import { NavLink } from 'react-router-dom';
|
||||||
|
import * as comm from '@haina/utils-commons';
|
||||||
|
import DateGroupRadio from '../../components/DateGroupRadio';
|
||||||
|
import SearchForm from '../../components/search/SearchForm';
|
||||||
|
import { TableExportBtn } from '../../components/Data';
|
||||||
|
import { RenderVSDataCell } from './../../components/Data';
|
||||||
|
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { toJS } from 'mobx';
|
||||||
|
import { stores_Context } from '../../config';
|
||||||
|
import { useShallow } from 'zustand/shallow';
|
||||||
|
import useToBOrderStore, { orderCountDataMapper, orderCountDataFieldMapper } from '../../zustand/ToBOrder';
|
||||||
|
|
||||||
|
|
||||||
|
const ToBOrder = observer(() => {
|
||||||
|
const { date_picker_store: searchFormStore } = useContext(stores_Context);
|
||||||
|
|
||||||
|
const [searchValues, setSearchValues] = useToBOrderStore(useShallow((state) => [state.searchValues, state.setSearchValues]));
|
||||||
|
const [activeTab, setActiveTab] = useToBOrderStore(useShallow((state) => [state.activeTab, state.setActiveTab]));
|
||||||
|
const [loading, typeLoading, onTabChange] = useToBOrderStore(useShallow((state) => [state.loading, state.typeLoading,state.onTabChange]));
|
||||||
|
|
||||||
|
const orderCountDataRaw = useToBOrderStore((state) => state.orderCountDataRaw);
|
||||||
|
const [orderCountDataLines, avgLineValue] = useToBOrderStore(useShallow((state) => [state.orderCountDataLines, state.avgLineValue]));
|
||||||
|
const [onChangeDateGroup, activeDateGroupRadio] = useToBOrderStore(useShallow((state) => [state.onChangeDateGroup, state.activeDateGroupRadio]));
|
||||||
|
|
||||||
|
const orderCountDataByType = useToBOrderStore((state) => state.orderCountDataByType);
|
||||||
|
const result = orderCountDataByType[activeTab] || {};
|
||||||
|
|
||||||
|
const getToBOrderCount = useToBOrderStore((state) => state.getToBOrderCount);
|
||||||
|
|
||||||
|
const showDiff = !comm.isEmpty(searchFormStore.start_date_cp);
|
||||||
|
|
||||||
|
const avg_line_y = Math.round(avgLineValue);
|
||||||
|
const lineConfig = {
|
||||||
|
data: orderCountDataLines,
|
||||||
|
padding: 'auto',
|
||||||
|
xField: 'xField',
|
||||||
|
yField: 'yField',
|
||||||
|
seriesField: 'seriesField',
|
||||||
|
// xAxis: {
|
||||||
|
// type: "timeCat",
|
||||||
|
// },
|
||||||
|
point: {
|
||||||
|
size: 4,
|
||||||
|
shape: 'cicle',
|
||||||
|
},
|
||||||
|
annotations: [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
position: ['start', avg_line_y],
|
||||||
|
content: avg_line_y,
|
||||||
|
offsetX: -15,
|
||||||
|
style: {
|
||||||
|
fill: '#F4664A',
|
||||||
|
textBaseline: 'bottom',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
start: [-10, avg_line_y],
|
||||||
|
end: ['max', avg_line_y],
|
||||||
|
style: {
|
||||||
|
stroke: '#F4664A',
|
||||||
|
lineDash: [2, 2],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {}, // 显示标签
|
||||||
|
legend: {
|
||||||
|
itemValue: {
|
||||||
|
formatter: (text, item) => {
|
||||||
|
const items = orderCountDataLines.filter((d) => d.seriesField === item.value); // 按站点筛选
|
||||||
|
return items.length ? items.reduce((a, b) => a + b.yField, 0) : ''; // 计算总数
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
customItems: (originalItems) => {
|
||||||
|
// process originalItems,
|
||||||
|
return originalItems.map((ele) => ({ ...ele, name: ele.data?.seriesField || ele.data?.xField }));
|
||||||
|
},
|
||||||
|
title: (title, datum) => {
|
||||||
|
let ret = title;
|
||||||
|
switch (activeDateGroupRadio) {
|
||||||
|
case 'day':
|
||||||
|
ret = `${title} ${comm.getWeek(datum.xField)}`; // 显示周几
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// smooth: true,
|
||||||
|
};
|
||||||
|
const pieConfig = {
|
||||||
|
appendPadding: 10,
|
||||||
|
data: [],
|
||||||
|
angleField: 'OrderCount',
|
||||||
|
colorField: 'OrderType',
|
||||||
|
radius: 0.8,
|
||||||
|
label: {
|
||||||
|
type: 'outer',
|
||||||
|
content: '{name} {value} \t {percentage}',
|
||||||
|
},
|
||||||
|
legend: false, // 不显示图例
|
||||||
|
interactions: [
|
||||||
|
{
|
||||||
|
type: 'element-selected',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'element-active',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const tableProps = {
|
||||||
|
dataSource: result?.ordercount1 || [], // table_data.dataSource,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '#',
|
||||||
|
fixed: 'left',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<span>
|
||||||
|
<div>{result.ordercountTotal1?.groups}</div>
|
||||||
|
{showDiff ? <div>{result.ordercountTotal2?.groups}</div> : null}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
titleX: `${result.ordercountTotal1?.groups}` + (showDiff ? ` vs ${result.ordercountTotal2?.groups}` : ''),
|
||||||
|
dataIndex: 'OrderType',
|
||||||
|
fixed: 'left',
|
||||||
|
render: (text, record) => <NavLink to={`/tob_orders_sub/${activeTab}/${record.OrderTypeSN}/${encodeURIComponent(record.OrderType)}`}>{text}</NavLink>,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数量',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<RenderVSDataCell
|
||||||
|
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 '),
|
||||||
|
dataIndex: 'OrderCount',
|
||||||
|
render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.OrderCount} diffPercent={r.OrderCount_vs} diffData={r.OrderCount_diff} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '成交数',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<RenderVSDataCell
|
||||||
|
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 '),
|
||||||
|
dataIndex: 'CJCount',
|
||||||
|
render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.CJCount} diffPercent={r.CJCount_vs} diffData={r.CJCount_diff} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '成交人数',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<RenderVSDataCell
|
||||||
|
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 '),
|
||||||
|
dataIndex: 'CJPersonNum',
|
||||||
|
render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.CJPersonNum} diffPercent={r.CJPersonNum_vs} diffData={r.CJPersonNum_diff} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '成交率',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<RenderVSDataCell
|
||||||
|
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 '),
|
||||||
|
dataIndex: 'CJrate',
|
||||||
|
render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.CJrate} diffPercent={r.CJrate_vs} diffData={r.CJrate_diff} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '成交毛利（预计）',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<RenderVSDataCell
|
||||||
|
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 '),
|
||||||
|
dataIndex: 'YJLY',
|
||||||
|
render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.YJLY} diffPercent={r.YJLY_vs} diffData={r.YJLY_diff} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '单个订单价值',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<RenderVSDataCell
|
||||||
|
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 '),
|
||||||
|
dataIndex: 'Ordervalue',
|
||||||
|
render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.Ordervalue} diffPercent={r.Ordervalue_vs} diffData={r.Ordervalue_diff} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
size: 'small',
|
||||||
|
pagination: false,
|
||||||
|
scroll: { x: 100 * 7 },
|
||||||
|
loading,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Row gutter={16} className={toJS(searchFormStore.siderBroken) ? '' : 'sticky-top'}>
|
||||||
|
<Col className="gutter-row" span={24}>
|
||||||
|
<SearchForm
|
||||||
|
defaultValue={{
|
||||||
|
initialValue: {
|
||||||
|
...toJS(searchFormStore.formValues),
|
||||||
|
...searchValues,
|
||||||
|
},
|
||||||
|
//
|
||||||
|
shows: ['DateType', 'WebCode','IncludeTickets', 'DepartmentList', 'dates'],
|
||||||
|
fieldProps: {
|
||||||
|
DepartmentList: { show_all: false, mode: 'multiple' },
|
||||||
|
WebCode: { show_all: false, mode: 'multiple' },
|
||||||
|
years: { hide_vs: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onSubmit={(_err, obj, form, str) => {
|
||||||
|
setSearchValues(obj, form);
|
||||||
|
getToBOrderCount(obj);
|
||||||
|
onTabChange(activeTab);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={[16, { sm: 16, lg: 32 }]}>
|
||||||
|
<Col span={24} style={{ textAlign: 'right' }}>
|
||||||
|
<DateGroupRadio
|
||||||
|
visible={orderCountDataLines.length !== 0}
|
||||||
|
dataRaw={orderCountDataRaw}
|
||||||
|
onChange={onChangeDateGroup}
|
||||||
|
value={activeDateGroupRadio}
|
||||||
|
dataMapper={orderCountDataMapper}
|
||||||
|
fieldMapper={orderCountDataFieldMapper}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={24}>
|
||||||
|
<Spin spinning={loading}>
|
||||||
|
<Line {...lineConfig} />
|
||||||
|
</Spin>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col span={24}>
|
||||||
|
<Tabs
|
||||||
|
activeKey={activeTab}
|
||||||
|
onChange={(active_key) => onTabChange(active_key)}
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
key: 'customer_types',
|
||||||
|
label: (
|
||||||
|
<span>
|
||||||
|
<CustomerServiceOutlined />
|
||||||
|
分销客户
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
].map((ele) => {
|
||||||
|
return {
|
||||||
|
...ele,
|
||||||
|
children: (
|
||||||
|
<>
|
||||||
|
<Table sticky key={`table_to_xlsx_${ele.key}`} {...tableProps} loading={typeLoading} />
|
||||||
|
<Divider orientation="right" plain>
|
||||||
|
<TableExportBtn label={ele.key} {...{ columns: tableProps.columns, dataSource: tableProps.dataSource }} />
|
||||||
|
</Divider>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3>各项占比</h3>
|
||||||
|
{/* <Checkbox
|
||||||
|
checked={true}
|
||||||
|
// onChange={(e) => setIsShowEmpty(e.target.checked)}
|
||||||
|
>
|
||||||
|
包含空值
|
||||||
|
</Checkbox> */}
|
||||||
|
</div>
|
||||||
|
<Spin spinning={typeLoading}>
|
||||||
|
<Row>
|
||||||
|
<Col sm={24} lg={12}>
|
||||||
|
<Pie {...pieConfig} data={result?.ordercount1 || []} innerRadius={0.6} statistic={{title: false,content:{content:'数量'}}} />
|
||||||
|
<Pie {...pieConfig} data={result?.ordercount1 || []} angleField='YJLYx' innerRadius={0.6} statistic={{title: false,content:{content:'预计毛利'}}} />
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
{showDiff && <Col sm={24} lg={12}>
|
||||||
|
<Pie {...pieConfig} data={result?.ordercount2 || []} innerRadius={0.6} statistic={{title: false,content:{content:'数量'}}} />
|
||||||
|
<Pie {...pieConfig} data={result?.ordercount2 || []} angleField='YJLYx' innerRadius={0.6} statistic={{title: false,content:{content:'预计毛利'}}} />
|
||||||
|
</Col>}
|
||||||
|
</Row>
|
||||||
|
</Spin>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
export default ToBOrder;
|
||||||
@ -0,0 +1,172 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import { devtools } from 'zustand/middleware';
|
||||||
|
import { immer } from 'zustand/middleware/immer';
|
||||||
|
import { fetchJSON } from '@haina/utils-request';
|
||||||
|
import { HT_HOST } from '../config';
|
||||||
|
import { formatDate, isEmpty, sortBy } from '@haina/utils-commons';
|
||||||
|
import { groupsMappedByKey, sitesMappedByCode, pivotBy } from './../libs/ht';
|
||||||
|
|
||||||
|
const defaultParams = {};
|
||||||
|
|
||||||
|
export const fetchRegularCustomer = async (params) => {
|
||||||
|
const _params = {
|
||||||
|
Website: params.WebCode || '', // CHT,AH,JH,GH,ZWQD,GH_ZWQD_HW,GHKYZG,GHKYHW,HTravel
|
||||||
|
DEI_SNList: params.DepartmentList || '', // 1,2,28,7
|
||||||
|
ApplydateCheck: params.DateType === 'applyDate' ? 1 : 0, //
|
||||||
|
EntrancedateCheck: params.DateType === 'startDate' ? 1 : 0, //
|
||||||
|
ConfirmDateCheck: params.DateType === 'confirmDate' ? 1 : 0, //
|
||||||
|
ApplydateStart: params.Date1 || '',
|
||||||
|
ApplydateEnd: params.Date2 || '',
|
||||||
|
EntrancedateStart: params.Date1 || '',
|
||||||
|
EntrancedateEnd: params.Date2 || '',
|
||||||
|
ConfirmdateStart: params.Date1 || '',
|
||||||
|
ConfirmdateEnd: params.Date2 || '',
|
||||||
|
IsDetail: '', //
|
||||||
|
IncludeTickets: '', //
|
||||||
|
...params,
|
||||||
|
};
|
||||||
|
const { WebCode, DepartmentList, DateType, Date1, Date2, ...readyParams } = _params;
|
||||||
|
const [result1=[], result2=[]] = await Promise.all([
|
||||||
|
fetchJSON(HT_HOST + '/service-tourdesign/RegularCusOrder', { ...defaultParams, ...readyParams }),
|
||||||
|
...(params.DateDiff1 && params.IsDetail === 0
|
||||||
|
? [
|
||||||
|
fetchJSON(HT_HOST + '/service-tourdesign/RegularCusOrder', {
|
||||||
|
...defaultParams,
|
||||||
|
...readyParams,
|
||||||
|
ApplydateStart: params.DateDiff1 || '',
|
||||||
|
ApplydateEnd: params.DateDiff2 || '',
|
||||||
|
EntrancedateStart: params.DateDiff1 || '',
|
||||||
|
EntrancedateEnd: params.DateDiff2 || '',
|
||||||
|
ConfirmdateStart: params.DateDiff1 || '',
|
||||||
|
ConfirmdateEnd: params.DateDiff2 || '',
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
]);
|
||||||
|
if (params.IsDetail === 1) {
|
||||||
|
return { result1, result2 };
|
||||||
|
}
|
||||||
|
const ret = {};
|
||||||
|
const result1Mapped = result1.reduce((r, v) => ({ ...r, [v.ItemName]: v }), {});
|
||||||
|
const allKeys = [...new Set([...result1.map((e) => e.ItemName), ...result2.map((e) => e.ItemName)])];
|
||||||
|
const result2Mapped = result2.reduce((r, v) => ({ ...r, [v.ItemName]: v }), {});
|
||||||
|
const x = {};
|
||||||
|
allKeys.forEach((key) => {
|
||||||
|
x[key] = { ...(result1Mapped?.[key] || { ItemName: key }), diff: result2Mapped[key] || {} };
|
||||||
|
});
|
||||||
|
ret.result1 = Object.values(x);
|
||||||
|
return { result1: ret.result1 }; // { result1, result2 };
|
||||||
|
};
|
||||||
|
|
||||||
|
// 老客户: 日期对应的数据字段
|
||||||
|
const dateTypeDataHelper = {
|
||||||
|
applyDate: 'SumOrder',
|
||||||
|
startDate: 'ConfirmOrder',
|
||||||
|
confirmDate: 'ConfirmOrder',
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 构建 老客户系列数据
|
||||||
|
* * 用明细数据计算
|
||||||
|
* @param {[]} details
|
||||||
|
* @param {string} pivotByOrder
|
||||||
|
* @param {string} pivotByDate
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
const buildSeriesDataFromDetails = (details, pivotByOrder, pivotByDate) => {
|
||||||
|
const dataDetail = (details || []).map((ele) => ({
|
||||||
|
...ele,
|
||||||
|
key: ele.COLI_ID,
|
||||||
|
orderState: ele.OrderState,
|
||||||
|
applyDate: formatDate(new Date(ele.COLI_ApplyDate)),
|
||||||
|
startDate: ele.COLI_OrderStartDate,
|
||||||
|
confirmDate: formatDate(new Date(ele.COLI_ConfirmDate)),
|
||||||
|
}));
|
||||||
|
const { data: IsOldData } = pivotBy(
|
||||||
|
dataDetail.filter((ele) => ele.COLI_IsOld === '是'),
|
||||||
|
[['COLI_IsOld'], [], pivotByDate]
|
||||||
|
);
|
||||||
|
const { data: isCusCommendData } = pivotBy(
|
||||||
|
dataDetail.filter((ele) => ele.COLI_IsCusCommend === '是'),
|
||||||
|
[['COLI_IsCusCommend'], [], pivotByDate]
|
||||||
|
);
|
||||||
|
// console.log('IsOldData====', IsOldData, '\nisCusCommend', isCusCommendData);
|
||||||
|
// 合并成两个系列
|
||||||
|
const seriesData = []
|
||||||
|
.concat(
|
||||||
|
IsOldData.map((ele) => ({ ...ele, _ylabel: '老客户' })),
|
||||||
|
isCusCommendData.map((ele) => ({ ...ele, _ylabel: '老客户推荐' }))
|
||||||
|
)
|
||||||
|
.sort(sortBy(pivotByDate));
|
||||||
|
return seriesData;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* --------------------------------------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
const initialState = {
|
||||||
|
loading: false,
|
||||||
|
loading2: false,
|
||||||
|
searchValues: {
|
||||||
|
DepartmentList: ['1', '2', '28', '7', '33'].map((kk) => groupsMappedByKey[kk]),
|
||||||
|
WebCode: ['CHT', 'AH', 'JH', 'GH', 'ZWQD', 'GH_ZWQD_HW', 'GHKYZG', 'GHKYHW', 'HTravel'].map((kk) => sitesMappedByCode[kk]),
|
||||||
|
DateType: { key: 'applyDate', label: '提交日期' },
|
||||||
|
IncludeTickets: { key: '0', label: '不含门票' },
|
||||||
|
},
|
||||||
|
searchValuesToSub: {},
|
||||||
|
|
||||||
|
regular: { data: [], details: [], total_data_tips: '', pivotData: [], pivotY: 'SumOrder', pivotX: '' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const useCustomerRelationsStore = create(
|
||||||
|
devtools(
|
||||||
|
immer((set, get) => ({
|
||||||
|
...initialState,
|
||||||
|
reset: () => set(initialState),
|
||||||
|
|
||||||
|
setLoading: (loading) => set({ loading }),
|
||||||
|
setLoading2: (loading2) => set({ loading2 }),
|
||||||
|
setSearchValues: (obj, values) => set((state) => ({ searchValues: values, searchValuesToSub: obj })),
|
||||||
|
setSearchValuesToSub: (values) => set((state) => ({ searchValuesToSub: values })),
|
||||||
|
|
||||||
|
// 获取数据 ---------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// 老客户
|
||||||
|
getRegularCustomer: async (params) => {
|
||||||
|
const { setLoading, setLoading2 } = get();
|
||||||
|
const { IsDetail } = params;
|
||||||
|
setLoading(true);
|
||||||
|
setLoading2(IsDetail === 1);
|
||||||
|
const pivotByOrder = dateTypeDataHelper[params.DateType];
|
||||||
|
const pivotByDate = params.DateType;
|
||||||
|
try {
|
||||||
|
const {result1, result2} = await fetchRegularCustomer(params);
|
||||||
|
set((state) => {
|
||||||
|
if (IsDetail === 1) {
|
||||||
|
state.regular.details = result1;
|
||||||
|
|
||||||
|
const dump_l = (result1 || []).filter((ele) => ele.COLI_IsOld !== '' && ele.COLI_IsCusCommend !== '').length;
|
||||||
|
state.regular.total_data_tips = dump_l > 0 ? `包含 ${dump_l} 条同时勾选的数据` : '';
|
||||||
|
/** 使用明细数据画图 */
|
||||||
|
const seriesData = buildSeriesDataFromDetails(result1, pivotByOrder, pivotByDate);
|
||||||
|
state.regular.pivotData = seriesData;
|
||||||
|
state.regular.pivotX = pivotByDate;
|
||||||
|
state.regular.pivotY = pivotByOrder;
|
||||||
|
} else {
|
||||||
|
console.log('0000');
|
||||||
|
state.regular.data = result1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
IsDetail === 1 && setLoading2(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
{ name: 'CustomerRelations' }
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
export default useCustomerRelationsStore;
|
||||||
@ -0,0 +1,241 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import { devtools } from 'zustand/middleware';
|
||||||
|
import { immer } from 'zustand/middleware/immer';
|
||||||
|
import { groupsMappedByCode } from '../libs/ht';
|
||||||
|
import { fetchJSON } from '@haina/utils-request';
|
||||||
|
import { HT_HOST } from '../config';
|
||||||
|
import { resultDataCb } from '../components/DateGroupRadio/date';
|
||||||
|
import { isEmpty, price_to_number } from '@haina/utils-commons';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 分销(ToB)订单
|
||||||
|
*/
|
||||||
|
|
||||||
|
const defaultParams = {};
|
||||||
|
|
||||||
|
export const fetchToBOrderCount = async (params, type = '', typeVal = '') => {
|
||||||
|
const { errcode, errmsg, ...result } = await fetchJSON(HT_HOST + '/service-web/QueryData/GetOrderCount_FX', {
|
||||||
|
...defaultParams,
|
||||||
|
...params,
|
||||||
|
COLI_ApplyDate1: params.Date1,
|
||||||
|
COLI_ApplyDate2: params.Date2,
|
||||||
|
COLI_ApplyDateOld1: params.DateDiff1 || '',
|
||||||
|
COLI_ApplyDateOld2: params.DateDiff2 || '',
|
||||||
|
OrderType: type,
|
||||||
|
OrderType_val: typeVal,
|
||||||
|
});
|
||||||
|
return errcode !== 0 ? {} : (result || {});
|
||||||
|
};
|
||||||
|
|
||||||
|
const _typeRes = {
|
||||||
|
'ordercount1': [],
|
||||||
|
'ordercount2': [],
|
||||||
|
'ordercountTotal1': {
|
||||||
|
'OrderType': '合计',
|
||||||
|
'OrderCount': 0,
|
||||||
|
'CJCount': 0,
|
||||||
|
'CJPersonNum': 0,
|
||||||
|
'YJLY': '',
|
||||||
|
'CJrate': '0%',
|
||||||
|
'Ordervalue': '',
|
||||||
|
'groups': '',
|
||||||
|
'key': 1,
|
||||||
|
},
|
||||||
|
'ordercountTotal2': {},
|
||||||
|
};
|
||||||
|
export const fetchToBOrderCountByType = async (type, params) => {
|
||||||
|
const { errcode, errmsg, ...result } = await fetchJSON(HT_HOST + '/service-web/QueryData/GetOrderCountByType_FX', {
|
||||||
|
...defaultParams,
|
||||||
|
...params,
|
||||||
|
COLI_ApplyDate1: params.Date1,
|
||||||
|
COLI_ApplyDate2: params.Date2,
|
||||||
|
COLI_ApplyDateOld1: params.DateDiff1 || '',
|
||||||
|
COLI_ApplyDateOld2: params.DateDiff2 || '',
|
||||||
|
OrderType: type,
|
||||||
|
});
|
||||||
|
const res = errcode !== 0 ? _typeRes : (result || _typeRes);
|
||||||
|
const rows1Map = res.ordercount1.reduce((a, row1) => ({ ...a, [row1.OrderTypeSN]: {...row1, YJLYx: price_to_number(row1.YJLY)} }), {});
|
||||||
|
const rows2Map = res.ordercount2.reduce((a, row2) => ({ ...a, [row2.OrderTypeSN]: {...row2, YJLYx: price_to_number(row2.YJLY)} }), {});
|
||||||
|
|
||||||
|
const mixRow1 = res.ordercount1.map((row1) => ({ ...row1, YJLYx: price_to_number(row1.YJLY), diff: rows2Map[row1.OrderTypeSN] || {} }));
|
||||||
|
// Diff: elements in rows2 but not in rows1
|
||||||
|
const diff = [...new Set(Object.keys(rows2Map).filter((x) => !new Set(Object.keys(rows1Map)).has(x)))];
|
||||||
|
mixRow1.push(...diff.map((sn) => ({ diff: rows2Map[sn], OrderType: rows2Map[sn].OrderType, OrderTypeSN: rows2Map[sn].OrderTypeSN })));
|
||||||
|
|
||||||
|
return { ...res, ordercount1: mixRow1, ordercount2: res.ordercount2.map((row1) => ({ ...row1, YJLYx: price_to_number(row1.YJLY), })) };
|
||||||
|
};
|
||||||
|
|
||||||
|
const _detailRes = { ordercount1: [], ordercount2: [] };
|
||||||
|
export const fetchToBOrderDetailByType = async (params, type = '', typeVal = '', orderContent = 'detail') => {
|
||||||
|
const { errcode, errmsg, ...result } = await fetchJSON(HT_HOST + '/service-web/QueryData/GetOrderCountByType_Sub_FX', {
|
||||||
|
...defaultParams,
|
||||||
|
SubOrderType: orderContent,
|
||||||
|
...params,
|
||||||
|
COLI_ApplyDate1: params.Date1,
|
||||||
|
COLI_ApplyDate2: params.Date2,
|
||||||
|
COLI_ApplyDateOld1: params.DateDiff1 || '',
|
||||||
|
COLI_ApplyDateOld2: params.DateDiff2 || '',
|
||||||
|
OrderType: type,
|
||||||
|
OrderType_val: typeVal,
|
||||||
|
});
|
||||||
|
const res = errcode !== 0 ? _detailRes : (result || _detailRes);
|
||||||
|
const dateStr = [params.Date1, params.Date2].map((d) => d.substring(0, 10)).join('~');
|
||||||
|
const dateDiffStr = isEmpty(params.DateDiff1) ? '' : [params.DateDiff1, params.DateDiff2].map((d) => d.substring(0, 10)).join('~');
|
||||||
|
const ret = [
|
||||||
|
{ dateRangeStr: dateStr, data: res.ordercount1 },
|
||||||
|
{ dateRangeStr: dateDiffStr, data: res.ordercount2 },
|
||||||
|
];
|
||||||
|
return ret;
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateLineData = (value, data, avg1) => {
|
||||||
|
const groupByDate = data.reduce((r, v) => {
|
||||||
|
(r[v.ApplyDate] || (r[v.ApplyDate] = [])).push(v);
|
||||||
|
return r;
|
||||||
|
}, {});
|
||||||
|
const _data = Object.keys(groupByDate)
|
||||||
|
.reduce((r, _d) => {
|
||||||
|
const xAxisGroup = groupByDate[_d].reduce((a, v) => {
|
||||||
|
(a[v.groups] || (a[v.groups] = [])).push(v);
|
||||||
|
return a;
|
||||||
|
}, {});
|
||||||
|
Object.keys(xAxisGroup).map((_group) => {
|
||||||
|
const summaryVal = xAxisGroup[_group].reduce((rows, row) => rows + row.orderCount, 0);
|
||||||
|
r.push({ ...xAxisGroup[_group][0], orderCount: summaryVal });
|
||||||
|
return _group;
|
||||||
|
});
|
||||||
|
return r;
|
||||||
|
}, [])
|
||||||
|
.map((row) => ({ xField: row.ApplyDate, yField: row.orderCount, seriesField: row.groups }));
|
||||||
|
return { lines: _data, dateRadioValue: value, avgLineValue: avg1 };
|
||||||
|
};
|
||||||
|
|
||||||
|
export const orderCountDataMapper = { 'data1': 'ordercount1', data2: 'ordercount2' };
|
||||||
|
export const orderCountDataFieldMapper = { 'dateKey': 'ApplyDate', 'valueKey': 'orderCount', 'seriesKey': 'id', _f: 'sum' };
|
||||||
|
|
||||||
|
/**
|
||||||
|
* --------------------------------------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
const initialState = {
|
||||||
|
loading: false,
|
||||||
|
typeLoading: false,
|
||||||
|
searchValues: {
|
||||||
|
DateType: { key: 'applyDate', label: '提交日期' },
|
||||||
|
WebCode: { key: 'all', label: '所有来源' },
|
||||||
|
IncludeTickets: { key: '1', label: '含门票' },
|
||||||
|
DepartmentList: groupsMappedByCode.GH, // { key: 'All', label: '所有来源' }, //
|
||||||
|
},
|
||||||
|
searchValuesToSub: {
|
||||||
|
DateType: 'applyDate',
|
||||||
|
WebCode: 'all',
|
||||||
|
IncludeTickets: '1',
|
||||||
|
DepartmentList: -1, // -1: All
|
||||||
|
},
|
||||||
|
|
||||||
|
activeTab: 'customer_types',
|
||||||
|
activeDateGroupRadio: 'day',
|
||||||
|
|
||||||
|
orderCountDataRaw: {},
|
||||||
|
orderCountDataLines: [],
|
||||||
|
avgLineValue: 0,
|
||||||
|
|
||||||
|
orderCountDataByType: {},
|
||||||
|
|
||||||
|
// 二级页面
|
||||||
|
orderCountDataRawSub: {},
|
||||||
|
orderCountDataLinesSub: [],
|
||||||
|
avgLineValueSub: 0,
|
||||||
|
activeDateGroupRadioSub: 'day',
|
||||||
|
orderDetails: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
const useToBOrderStore = create(
|
||||||
|
devtools(
|
||||||
|
immer((set, get) => ({
|
||||||
|
...initialState,
|
||||||
|
reset: () => set(initialState),
|
||||||
|
|
||||||
|
setLoading: (loading) => set({ loading }),
|
||||||
|
setTypeLoading: (typeLoading) => set({ typeLoading }),
|
||||||
|
|
||||||
|
setSearchValues: (obj, values) => set((state) => ({ searchValues: values, searchValuesToSub: obj })),
|
||||||
|
setSearchValuesToSub: (values) => set((state) => ({ searchValuesToSub: values })),
|
||||||
|
setActiveTab: (tab) => set({ activeTab: tab }),
|
||||||
|
|
||||||
|
setOrderCountDataLines: (data) => set({ orderCountDataLines: data }),
|
||||||
|
setOrderCountDataByType: (type, data) =>
|
||||||
|
set((state) => {
|
||||||
|
state.orderCountDataByType[type] = data;
|
||||||
|
}),
|
||||||
|
|
||||||
|
// data ----
|
||||||
|
onChangeDateGroup: (value, data, avg1) => {
|
||||||
|
const { lines, dateRadioValue, avgLineValue } = calculateLineData(value, data, avg1);
|
||||||
|
set({ orderCountDataLines: lines, avgLineValue, activeDateGroupRadio: dateRadioValue });
|
||||||
|
},
|
||||||
|
onChangeDateGroupSub: (value, data, avg1) => {
|
||||||
|
const { lines, dateRadioValue, avgLineValue } = calculateLineData(value, data, avg1);
|
||||||
|
set({ orderCountDataLinesSub: lines, avgLineValueSub: avgLineValue, activeDateGroupRadioSub: dateRadioValue });
|
||||||
|
},
|
||||||
|
|
||||||
|
// site effects
|
||||||
|
getToBOrderCount: async (params, type, typeVal) => {
|
||||||
|
const { setLoading } = get();
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await fetchToBOrderCount(params, type, typeVal);
|
||||||
|
// 第一次得到数据
|
||||||
|
const { lines, dateRadioValue, avgLineValue } = resultDataCb(res, 'day', orderCountDataMapper, orderCountDataFieldMapper, calculateLineData);
|
||||||
|
if (isEmpty(type)) {
|
||||||
|
// index page
|
||||||
|
set({ orderCountDataRaw: res });
|
||||||
|
set({ orderCountDataLines: lines, avgLineValue, activeDateGroupRadio: dateRadioValue });
|
||||||
|
} else {
|
||||||
|
// sub page
|
||||||
|
set({ orderCountDataRawSub: res });
|
||||||
|
set({ orderCountDataLinesSub: lines, avgLineValueSub: avgLineValue, activeDateGroupRadioSub: dateRadioValue });
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getToBOrderCount_type: async (type) => {
|
||||||
|
const { setTypeLoading, searchValuesToSub, setOrderCountDataByType } = get();
|
||||||
|
setTypeLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await fetchToBOrderCountByType(type, searchValuesToSub);
|
||||||
|
setOrderCountDataByType(type, res);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setTypeLoading(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onTabChange: async (tab) => {
|
||||||
|
const { setActiveTab, getToBOrderCount_type } = get();
|
||||||
|
setActiveTab(tab);
|
||||||
|
await getToBOrderCount_type(tab);
|
||||||
|
},
|
||||||
|
|
||||||
|
// sub
|
||||||
|
getToBOrderDetailByType: async (params, type, typeVal) => {
|
||||||
|
const { setTypeLoading } = get();
|
||||||
|
try {
|
||||||
|
setTypeLoading(true);
|
||||||
|
const res = await fetchToBOrderDetailByType(params, type, typeVal, 'detail');
|
||||||
|
set({ orderDetails: res });
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setTypeLoading(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
{ name: 'ToBOrder' }
|
||||||
|
)
|
||||||
|
);
|
||||||
|
export default useToBOrderStore;
|
||||||
Loading…
Reference in New Issue