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) }));