Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: `VSDataTag`. 部分

Browse Source
main
Lei OT 3 months ago
parent 7a9bd5531e
commit 407ac32e93
1 changed files with 184 additions and 226 deletions
Show Stats Download Patch File Download Diff File

410
src/views/Orders.jsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save