diff --git a/src/views/Orders.jsx b/src/views/Orders.jsx index 9224ce0..49db59a 100644 --- a/src/views/Orders.jsx +++ b/src/views/Orders.jsx @@ -7,12 +7,18 @@ import { observer } from "mobx-react"; import * as config from "../config"; import { NavLink } from "react-router-dom"; import * as comm from '@haina/utils-commons'; -import { show_vs_tag } from './../utils/commons'; -import { utils, writeFileXLSX } from "xlsx"; import DateGroupRadio from '../components/DateGroupRadio'; import SearchForm from './../components/search/SearchForm'; -import { TableExportBtn } from './../components/Data'; +import { TableExportBtn, VSDataTag } from './../components/Data'; import ParetoChart from "../components/Pareto"; +import { toJS } from 'mobx'; + +const DataRenderCell = ({ data1, data2, dataSuffix = '', showDiffData, ...props }) => { + if (showDiffData) { + return ; + } + return
{data1}{dataSuffix}
; +}; class Orders extends Component { static contextType = stores_Context; @@ -24,229 +30,181 @@ class Orders extends Component { format_data(data) { const { date_picker_store, orders_store } = this.context; const result = { dataSource: [], columns: [] }; - if (!comm.emptyValue(data)) { - const ordercountTotal1 = data.ordercountTotal1; - const ordercountTotal2 = data.ordercountTotal2; - if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { - // 有比较的数据 - result.columns = [ - { - title: '#', - fixed: 'left', - children: [ - { - title: ( - -
- {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} -
-
- {date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)} -
-
- ), - titleX: `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)} vs ${date_picker_store.start_date_cp.format( - config.DATE_FORMAT - )}~${date_picker_store.end_date_cp.format(config.DATE_FORMAT)}`, - dataIndex: 'OrderType', - fixed: 'left', - render: (text, record) => {text}, - }, - ], - }, - { - title: '数量', - children: [ - { - title: show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount), - titleX: [ordercountTotal1.OrderCount, ordercountTotal2.OrderCount].join(' vs '), - dataIndex: 'OrderCount', - }, - ], - }, - { - title: '成交数', - children: [ - { - title: show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount), - titleX: [ordercountTotal1.CJCount, ordercountTotal2.CJCount].join(' vs '), - dataIndex: 'CJCount', - }, - ], - }, - { - title: '成交人数', - children: [ - { - title: show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum), - titleX: [ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum].join(' vs '), - dataIndex: 'CJPersonNum', - }, - ], - }, - { - title: '成交率', - children: [ - { - title: show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate), - titleX: [ordercountTotal1.CJrate, ordercountTotal2.CJrate].join(' vs '), - dataIndex: 'CJrate', - }, - ], - }, - { - title: '成交毛利(预计)', - children: [ - { - title: show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY), - titleX: [ordercountTotal1.YJLY, ordercountTotal2.YJLY].join(' vs '), - dataIndex: 'YJLY', - }, - ], - }, + if (!comm.isEmpty(data)) { + const rows1Map = data.ordercount1.reduce((a, row1) => ({ ...a, [row1.OrderTypeSN]: row1 }), {}); + const rows2Map = data.ordercount2.reduce((a, row2) => ({ ...a, [row2.OrderTypeSN]: row2 }), {}); + // Diff: elements in rows2 but not in rows1 + const diffKey = [...new Set(Object.keys(rows2Map).filter((x) => !new Set(Object.keys(rows1Map)).has(x)))]; + const withDiff1 = (structuredClone(toJS(data.ordercount1)) || []).map((r1) => ({ ...r1, diff: rows2Map[r1.OrderTypeSN] })); + withDiff1.push( + ...diffKey.map((key) => ({ + diff: rows2Map[key], + EOI_ObjSN: rows2Map[key].EOI_ObjSN, + OrderType: rows2Map[key].OrderType, + CJrate: 0, + CJCount_vs: -100, + CJPersonNum_vs: -100, + CJrate_vs: -100, + YJLY_vs: -100, + OrderCount_vs: -100, + CJCount_diff: -rows2Map[key].CJCount, + CJPersonNum_diff: -rows2Map[key].CJPersonNum, + CJrate_diff: -rows2Map[key].CJrate, + YJLY_diff: -rows2Map[key].YJLY, + OrderCount_diff: -rows2Map[key].OrderCount, + Ordervalue: 0, + Ordervalue_diff: -rows2Map[key].Ordervalue, + Ordervalue_vs: -100, + })) + ); + const showDiff = date_picker_store.start_date_cp && date_picker_store.end_date_cp; + result.dataSource = withDiff1; - { - title: '单个订单价值', - children: [ - { - title: show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue), - titleX: [ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue].join(' vs '), - dataIndex: 'Ordervalue', - }, - ], - }, - ]; - // 1.找出两个数组OrderType相同的数据做比较显示 2.找出两组数据OrderType都不相同的数据做显示 - let has_same_type = false; // 数组1在数组2中是否找到相同的类型 - for (const item of data.ordercount1) { - has_same_type = false; - // 数组1在数组2中相同的类型 - for (const item2 of data.ordercount2) { - if (item.OrderType === item2.OrderType) { - has_same_type = true; - result.dataSource.push({ - key: item.key, - OrderType: item.OrderType, - OrderTypeSN: item.OrderTypeSN, - OrderCount: show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount), - OrderCount_X: ([item.OrderCount, item2.OrderCount].join(' vs ')), - CJCount: show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount), - CJCount_X: ([item.CJCount, item2.CJCount].join(' vs ')), - CJPersonNum: show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum), - CJPersonNum_X: ([item.CJPersonNum, item2.CJPersonNum].join(' vs ')), - CJrate: show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate), - CJrate_X: ([item.CJrate, item2.CJrate].join(' vs ')), - YJLY: show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY), - YJLY_X: ([item.YJLY, item2.YJLY].join(' vs ')), - Ordervalue: show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue), - Ordervalue_X: ([item.Ordervalue, item2.Ordervalue].join(' vs ')), - }); - } - } - // 数组1中不在数组2的类型 - if (has_same_type === false) { - result.dataSource.push({ - key: item.key, - OrderType: item.OrderType, - OrderTypeSN: item.OrderTypeSN, - OrderCount: show_vs_tag(comm.formatPercent(item.OrderCount), item.OrderCount, item.OrderCount, 0), - OrderCount_X: ([item.OrderCount, 0].join(' vs ')), - CJCount: show_vs_tag(comm.formatPercent(item.CJCount), item.CJCount, item.CJCount, 0), - CJCount_X: ([item.CJCount, 0].join(' vs ')), - CJPersonNum: show_vs_tag(comm.formatPercent(item.CJPersonNum), item.CJPersonNum, item.CJPersonNum, 0), - CJPersonNum_X: ([item.CJPersonNum, 0].join(' vs ')), - CJrate: show_vs_tag(item.CJrate, item.CJrate, item.CJrate, 0), - CJrate_X: ([item.CJrate, 0].join(' vs ')), - YJLY: show_vs_tag(comm.formatPercent(item.YJLY), item.YJLY, item.YJLY, 0), - YJLY_X: ([item.YJLY, 0].join(' vs ')), - Ordervalue: show_vs_tag(comm.formatPercent(item.Ordervalue), item.Ordervalue, item.Ordervalue, 0), - Ordervalue_X: ([item.Ordervalue, 0].join(' vs ')), - }); - } - } - // 数组2中不在数组1的类型 - for (const item2 of data.ordercount2) { - has_same_type = false; - for (const item of data.ordercount1) { - if (item.OrderType === item2.OrderType) { - has_same_type = true; - } - } - if (has_same_type === false) { - result.dataSource.push({ - key: item2.key, - OrderType: item2.OrderType, - OrderTypeSN: item2.OrderTypeSN, - OrderCount: show_vs_tag(comm.formatPercent(-item2.OrderCount), -item2.OrderCount, 0, item2.OrderCount), - OrderCount_X: ([ 0, item2.OrderCount].join(' vs ')), - CJCount: show_vs_tag(comm.formatPercent(-item2.CJCount), -item2.CJCount, 0, item2.CJCount), - CJCount_X: ([ 0, item2.CJCount].join(' vs ')), - CJPersonNum: show_vs_tag(comm.formatPercent(-item2.CJPersonNum), -item2.CJPersonNum, 0, item2.CJPersonNum), - CJPersonNum_X: ([0, item2.CJPersonNum].join(' vs ')), - CJrate: show_vs_tag(-item2.CJrate, -item2.CJrate, 0, item2.CJrate), - CJrate_X: ([ 0, item2.CJrate].join(' vs ')), - YJLY: show_vs_tag(comm.formatPercent(-item2.YJLY), -item2.YJLY, 0, item2.YJLY), - YJLY_X: ([0, item2.YJLY].join(' vs ')), - Ordervalue: show_vs_tag(comm.formatPercent(-item2.Ordervalue), -item2.Ordervalue, 0, item2.Ordervalue), - Ordervalue_X: ([ 0, item2.Ordervalue].join(' vs ')), - }); - } - } - } else { - result.columns = [ - { - title: "#", - fixed: 'left', - children: [ - { - title: ( - -
- {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} -
-
- ), - titleX: `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)}`, - fixed: 'left', - dataIndex: "OrderType", - render: (text, record) => {text}, - }, - ], - }, - { - title: "数量", - children: [{ title: ordercountTotal1.OrderCount, dataIndex: "OrderCount" }], - sorter: (a, b) => b.OrderCount - a.OrderCount, - }, - { - title: "成交数", - children: [{ title: ordercountTotal1.CJCount, dataIndex: "CJCount" }], - sorter: (a, b) => b.CJCount - a.CJCount, - }, - { - title: "成交人数", - children: [{ title: ordercountTotal1.CJPersonNum, dataIndex: "CJPersonNum" }], - sorter: (a, b) => b.CJPersonNum - a.CJPersonNum, - }, - { - title: "成交率", - children: [{ title: ordercountTotal1.CJrate, dataIndex: "CJrate" }], - sorter: (a, b) => parseInt(b.CJrate) - parseInt(a.CJrate), - }, - { - title: "成交毛利(预计)", - children: [{ title: ordercountTotal1.YJLY, dataIndex: "YJLY" }], - sorter: (a, b) => parseFloat(b.YJLY.replace(/,/g, "")) - parseFloat(a.YJLY.replace(/,/g, "")), - }, + const ordercountTotal1 = data.ordercountTotal1; + const ordercountTotal2 = data.ordercountTotal2; + result.columns = [ + { + title: '#', + fixed: 'left', + children: [ + { + title: ( + +
+ {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)} +
+ {showDiff ?
+ {date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)} +
: null} +
+ ), + titleX: showDiff ? `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)} vs ${date_picker_store.start_date_cp.format( + config.DATE_FORMAT + )}~${date_picker_store.end_date_cp.format(config.DATE_FORMAT)}` : `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)}`, + dataIndex: 'OrderType', + fixed: 'left', + render: (text, record) => {text}, + }, + ], + }, + { + title: '数量', + children: [ + { + title: ( + + ), + titleX: [ordercountTotal1.OrderCount, ordercountTotal2.OrderCount].join(' vs '), + dataIndex: 'OrderCount', + render: (text, r) => , + }, + ], + }, + { + title: '成交数', + children: [ + { + title: ( + + ), + titleX: [ordercountTotal1.CJCount, ordercountTotal2.CJCount].join(' vs '), + dataIndex: 'CJCount', + render: (text, r) => , + }, + ], + }, + { + title: '成交人数', + children: [ + { + title: ( + + ), + titleX: [ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum].join(' vs '), + dataIndex: 'CJPersonNum', + render: (text, r) => , + }, + ], + }, + { + title: '成交率', + children: [ + { + title: ( + + ), + titleX: [ordercountTotal1.CJrate, ordercountTotal2.CJrate].join(' vs '), + dataIndex: 'CJrate', + render: (text, r) => , + }, + ], + }, + { + title: '成交毛利(预计)', + children: [ + { + title: ( + + ), + titleX: [ordercountTotal1.YJLY, ordercountTotal2.YJLY].join(' vs '), + dataIndex: 'YJLY', + render: (text, r) => , + }, + ], + }, + + { + title: '单个订单价值', + children: [ + { + title: ( + + ), + titleX: [ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue].join(' vs '), + dataIndex: 'Ordervalue', + render: (text, r) => , + }, + ], + }, + ]; + return result; - { - title: "单个订单价值", - children: [{ title: ordercountTotal1.Ordervalue, dataIndex: "Ordervalue" }], - sorter: (a, b) => parseFloat(b.Ordervalue.replace(/,/g, "")) - parseFloat(a.Ordervalue.replace(/,/g, "")), - }, - ]; - result.dataSource = data.ordercount1; - } } return result; } @@ -256,10 +214,10 @@ class Orders extends Component { const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : []; const data_source = orders_store.orderCountData ? orders_store.orderCountData : []; const avg_line_y = Math.round(orders_store.avgLine1); - const pie_data = comm.emptyValue(orders_store.orderCountData_Form) + const pie_data = comm.isEmpty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount1.map((ele) => ({ ...ele, YJLYx: comm.price_to_number(ele.YJLY) })); // 饼图的显示 - const pie_data2 = comm.emptyValue(orders_store.orderCountData_Form) + const pie_data2 = comm.isEmpty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount2.map((ele) => ({ ...ele, YJLYx: comm.price_to_number(ele.YJLY) }));