From 81ee6594c03ccc8996fc8b9bb781f90f7b8ee690 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Tue, 23 Apr 2024 15:16:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20GH=20=E5=B8=82=E5=9C=BA=E4=BE=8B?= =?UTF-8?q?=E4=BC=9A=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 7 +- src/stores/Index.js | 2 + src/stores/MeetingData.js | 149 +++++++++++++++++++++++++++++++++++ src/utils/commons.js | 1 + src/views/Meeting2024-GH.jsx | 74 +++++++++++++++++ 5 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 src/stores/MeetingData.js create mode 100644 src/views/Meeting2024-GH.jsx diff --git a/src/App.jsx b/src/App.jsx index 539a406..4ce97e9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -45,6 +45,7 @@ import Detail from './views/Detail'; import ServicePersonNum from './views/ServicePersonNum'; import DataPivot from './views/DataPivot'; import Welcome from './views/Welcome'; +import Meeting2024GH from './views/Meeting2024-GH'; import { stores_Context, APP_VERSION } from './config'; import { WaterMark } from '@ant-design/pro-components'; @@ -75,7 +76,10 @@ const App = () => { { key: 'orders-pivot', label: 数据透视, - // icon: , + }, + { + key: 'meeting-2024-GH', + label: 例会数据2024-GH, }, ], }, @@ -208,6 +212,7 @@ const App = () => { } /> } /> } /> + } /> }> } /> diff --git a/src/stores/Index.js b/src/stores/Index.js index 947763c..d8161f6 100644 --- a/src/stores/Index.js +++ b/src/stores/Index.js @@ -15,6 +15,7 @@ import KPI from "./KPI"; import DictData from "./DictData"; import Distribution from "./Distribution"; import DataPivot from './DataPivot'; +import MeetingData from './MeetingData'; class Index { constructor() { this.dashboard_store = new DashboardStore(this); @@ -33,6 +34,7 @@ class Index { this.DictDataStore = new DictData(this); this.DistributionStore = new Distribution(this); this.DataPivotStore = new DataPivot(this); + this.MeetingDataStore = new MeetingData(this); makeAutoObservable(this); } diff --git a/src/stores/MeetingData.js b/src/stores/MeetingData.js new file mode 100644 index 0000000..29752a6 --- /dev/null +++ b/src/stores/MeetingData.js @@ -0,0 +1,149 @@ +import { makeAutoObservable, runInAction } from 'mobx'; +import { fetchJSON } from '../utils/request'; +import { objectMapper } from '../utils/commons'; +import { pivotBy } from './../libs/ht'; + +/** + * 用于透视的数据 + */ +const getDetailData = async (param) => { + const json = await fetchJSON('/service-Analyse2/GetTradeApartDetail', param); + return json.errcode === 0 ? json.result : []; +}; +/** + * + */ +const getOrderCountByType = async (param) => { + const paramBody = objectMapper(param, { + WebCode: 'WebCode', + OrderType: 'OrderType', + IncludeTickets: 'IncludeTickets', + DateType: 'DateType', + DepartmentList: 'DepartmentList', // { key: 'DepartmentList', transform: (v) => v.join(',') }, + Date1: 'COLI_ApplyDate1', + Date2: 'COLI_ApplyDate2', + }); + const url = '/service-web/QueryData/GetOrderCountByType'; + const json = await fetchJSON(url, paramBody); + return json.errcode === 0 ? json : {}; +}; +const GHproductTypeListSetting = { + ja: ['日本', '东亚跨国'], + se: ['东南亚跨国', '泰国', '越南', '印度尼西亚', '水灯节'], + in: ['印度', '次大陆跨国', '尼泊尔', '不丹', '斯里兰卡'], +}; + +const rowItem = (filterData) => { + const { data: dataByLineClass, summaryMix: summaryByLineClass } = pivotBy(filterData, [['COLI_LineClass'], [], []]); + const LineClass_Origin = dataByLineClass.filter((ele) => ele.COLI_LineClass.toLocaleLowerCase().indexOf('网前自然订单') !== -1).reduce((r, c) => r + c.SumOrder, 0); + const LineClass_PPC = dataByLineClass.filter((ele) => ele.COLI_LineClass.toLocaleLowerCase().indexOf('ppc') !== -1).reduce((r, c) => r + c.SumOrder, 0); + + const { data: dataByWebCode, summaryMix: summaryByWebCode } = pivotBy(filterData, [['WebCode'], [], []]); + const toB = dataByWebCode.filter((ele) => ele.WebCode.toLocaleLowerCase().indexOf('to b') !== -1).reduce((r, c) => r + c.SumOrder, 0); + + const { data: dataByIsOld, summaryMix: summaryByIsOld } = pivotBy(filterData, [['IsOld', 'isCusCommend'], [], []]); + const isOld1 = dataByIsOld.filter((ele) => ele.rowLabel.indexOf('1') !== -1).reduce((r, c) => r + c.SumOrder, 0); + + const total = LineClass_Origin + LineClass_PPC + toB + isOld1; + return { LineClass_Origin, LineClass_PPC, toB, isOld1, total }; +}; +// 日本+: 日本+东亚跨国 +const dataJA = (rawData, yearData) => { + const productTypeList = GHproductTypeListSetting.ja; + const filterData = rawData.filter((ele) => productTypeList.some((item) => ele.productType.toLocaleLowerCase().indexOf(item) !== -1)); + const filterDataYear = yearData.filter((ele) => productTypeList.some((item) => ele.OrderType.toLocaleLowerCase().indexOf(item) !== -1)); + const rowYear = filterDataYear.reduce((r, c) => r + c.OrderCount, 0); + return { ...rowItem(filterData), rowYear }; +}; + +// 东南亚+: 东南亚跨国+泰国+越南+印尼+水灯节线路 +const dataSE = (rawData, yearData) => { + const productTypeList = GHproductTypeListSetting.se; + const filterData = rawData.filter((ele) => productTypeList.some((item) => ele.productType.toLocaleLowerCase().indexOf(item) !== -1)); + const filterDataYear = yearData.filter((ele) => productTypeList.some((item) => ele.OrderType.toLocaleLowerCase().indexOf(item) !== -1)); + const rowYear = filterDataYear.reduce((r, c) => r + c.OrderCount, 0); + return { ...rowItem(filterData), rowYear }; +}; + +// 印度+: 印度+次大陆跨国+尼泊尔+不丹+斯里兰卡 +const dataIN = (rawData, yearData) => { + const productTypeList = GHproductTypeListSetting.in; + const filterData = rawData.filter((ele) => productTypeList.some((item) => ele.productType.toLocaleLowerCase().indexOf(item) !== -1)); + const filterDataYear = yearData.filter((ele) => productTypeList.some((item) => ele.OrderType.toLocaleLowerCase().indexOf(item) !== -1)); + const rowYear = filterDataYear.reduce((r, c) => r + c.OrderCount, 0); + return { ...rowItem(filterData), rowYear }; +}; + +// 其他GH +const dataGHOther = (rawData, yearData) => { + const exceptProduct = Object.values(GHproductTypeListSetting).reduce((r, c) => r.concat(c), []); + const filterData = rawData.filter((ele) => exceptProduct.every((item) => ele.productType.toLocaleLowerCase().indexOf(item) === -1)); + const filterDataYear = yearData.filter((ele) => exceptProduct.every((item) => ele.OrderType.toLocaleLowerCase().indexOf(item) === -1)); + const rowYear = filterDataYear.reduce((r, c) => r + c.OrderCount, 0); + return { ...rowItem(filterData), rowYear }; +}; + +class MeetingData { + constructor(rootStore) { + this.rootStore = rootStore; + makeAutoObservable(this); + } + + searchValues = { + DateType: { key: 'applyDate', value: 'applyDate', label: '提交日期' }, + }; + + setSearchValues(body) { + this.searchValues = body; + } + + GHTableData = []; + GHLoading = false; + + dataGH = async (param) => { + // console.log('dataGH', param); + this.GHLoading = true; + // 本周 + const CHData = await getDetailData({ ...param, 'DepartmentList': '1', 'WebCode': 'All' }); + const exceptCHData = await getDetailData({ ...param, 'DepartmentList': '28,33', 'WebCode': 'All' }); + /** 截至今年 - 行 */ + const { ordercountTotal1: CHDataYear } = await getOrderCountByType({ ...param, Date1: '2024-01-01', 'DepartmentList': '1', 'WebCode': 'All', OrderType: 'LineClass' }); + const { ordercount1: exceptCHDataYear } = await getOrderCountByType({ ...param, Date1: '2024-01-01', 'DepartmentList': '28,33', 'WebCode': 'All', OrderType: 'Product' }); + /** 截至今年 - 列 */ + const { ordercount1: ColLineClassDataYear } = await getOrderCountByType({ ...param, Date1: '2024-01-01', 'DepartmentList': '1,2,28,7,33', 'WebCode': 'All', OrderType: 'LineClass' }); + const { ordercountTotal1: ColToBDataYear } = await getOrderCountByType({ ...param, Date1: '2024-01-01', 'DepartmentList': '1,2,28,7,33', 'WebCode': 'GHTOBHW,GHTOBZG', OrderType: 'LineClass' }); + // 老客户 + const yearDetail = await getDetailData({ ...param, Date1: '2024-01-01', 'DepartmentList': '1,2,28,7,33', 'WebCode': 'All' }); + const { isOld1: isOld1Year } = rowItem(yearDetail); + + const colYearRow = { + LineClass_Origin: ColLineClassDataYear.filter((ele) => ele.OrderType.toLocaleLowerCase().indexOf('网前自然订单') !== -1).reduce((r, c) => r + c.OrderCount, 0), + LineClass_PPC: ColLineClassDataYear.filter((ele) => ele.OrderType.toLocaleLowerCase().indexOf('ppc') !== -1).reduce((r, c) => r + c.OrderCount, 0), + toB: ColToBDataYear.OrderCount, + isOld1: isOld1Year, + }; + + const rows = [ + { key: 'ch', label: '中国', ...rowItem(CHData), rowYear: CHDataYear.OrderCount }, + { key: 'ja', label: '日本+', ...dataJA(exceptCHData, exceptCHDataYear) }, + { key: 'se', label: '东南亚+', ...dataSE(exceptCHData, exceptCHDataYear) }, + { key: 'in', label: '印度+', ...dataIN(exceptCHData, exceptCHDataYear) }, + { key: 'other', label: '其他GH', ...dataGHOther(exceptCHData, exceptCHDataYear) }, + ]; + const columnsSum = ['LineClass_Origin', 'LineClass_PPC', 'toB', 'isOld1', 'total', 'rowYear'].reduce( + (r, col) => ({ + ...r, + [col]: rows.reduce((rr, row) => rr + row[col], 0), + }), + {} + ); + rows.push({ key: 'columnSum', label: '合计', ...columnsSum }); + rows.push({ key: 'colYearRow', label: '截至', ...colYearRow }); + // console.log(rows); + runInAction(() => { + this.GHTableData = rows; + this.GHLoading = false; + }); + }; +} +export default MeetingData; diff --git a/src/utils/commons.js b/src/utils/commons.js index 271e6c7..e5e32fb 100644 --- a/src/utils/commons.js +++ b/src/utils/commons.js @@ -481,6 +481,7 @@ export function objectMapper(input, keyMap) { if (map) { let value = input[key]; if (map.transform) value = map.transform(value); + if (typeof map === 'string') mappedObj[map] = value; mappedObj[map.key || key] = value; } } diff --git a/src/views/Meeting2024-GH.jsx b/src/views/Meeting2024-GH.jsx new file mode 100644 index 0000000..cb3aa87 --- /dev/null +++ b/src/views/Meeting2024-GH.jsx @@ -0,0 +1,74 @@ +import { useContext } from 'react'; +import { observer } from 'mobx-react'; +import { stores_Context } from '../config'; +import { Table, Row, Col, Divider } from 'antd'; +import SearchForm from '../components/search/SearchForm'; +import { TableExportBtn } from './../components/Data'; + +// 注意TdCell要提到DataTable作用域外声明 +const TdCell = (tdprops) => { + // onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能 + const { onMouseEnter, onMouseLeave, ...restProps } = tdprops; + return ; +}; + +export default observer((props) => { + const { date_picker_store: searchFormStore, MeetingDataStore } = useContext(stores_Context); + const { formValues, formValuesToSub, siderBroken } = searchFormStore; + + const dataRefresh = async (obj) => { + await MeetingDataStore.dataGH({ + ...(obj || formValuesToSub), + }); + }; + + const targetTableProps = { + loading: MeetingDataStore.GHLoading, + // sticky: true, + scroll: { x: 1000, y: 400 }, + pagination: false, + columns: [ + { key: 'label', title: '', dataIndex: 'label' }, + { key: 'LineClass_Origin', title: '网站', dataIndex: 'LineClass_Origin' }, + { key: 'LineClass_PPC', title: 'PPC', dataIndex: 'LineClass_PPC' }, + { key: 'toB', title: 'To B', dataIndex: 'toB' }, + { key: 'isOld1', title: '老客户', dataIndex: 'isOld1' }, + { key: 'total', title: '合计', dataIndex: 'total' }, + { key: 'rowYear', title: '截至年订单数', dataIndex: 'rowYear' }, + // { key: 'groupsLabel2', title: '年订单目标', dataIndex: 'groupsLabel2' }, + // { key: 'groupsLabel2', title: '进度', dataIndex: 'groupsLabel2' }, + ], + }; + + return ( + <> + + + { + MeetingDataStore.setSearchValues(form); + dataRefresh(obj); + }} + /> + + + + + 2024-GH + + + + + ); +});