From d272cf680699c4ae62b944ce2015915d6a146948 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Tue, 2 Jan 2024 13:38:08 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AF=BC=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Data.jsx | 29 ++++-- src/components/MapCountry.jsx | 13 +++ src/views/Distribution.jsx | 4 + src/views/Orders.jsx | 178 ++++++++++++++++++++-------------- 4 files changed, 143 insertions(+), 81 deletions(-) diff --git a/src/components/Data.jsx b/src/components/Data.jsx index 5d1904d..b931c0b 100644 --- a/src/components/Data.jsx +++ b/src/components/Data.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import React, { useState, useEffect } from "react"; import { Tag, Button, message } from 'antd'; import { CaretUpOutlined, CaretDownOutlined, DownloadOutlined } from '@ant-design/icons'; import { utils, writeFile } from "xlsx"; @@ -34,10 +34,26 @@ export const VSTag = (props) => { export const TableExportBtn = (props) => { const output_name = `${props.label}`; const [columnsMap, setColumnsMap] = useState([]); + const [summaryRow, setSummaryRow] = useState({}); useEffect(() => { - const flatCols = props.columns.flatMap((v, k) => (v.children ? v.children.map((vc) => ({ ...vc, title: `${v?.titleX || v.title}-${vc.title || ''}` })) : v)).filter(c => c.title); - // console.log('flatCols', flatCols); + const r1 = props.columns.reduce((r, v) => ({ + ...r, + ...(v.children ? v.children.reduce((rc, vc) => ({ + ...rc, + ...(vc?.titleX ? {[`${v?.titleX || v.title},${vc.titleX}`]: vc.titleX } : {[v?.titleX || v.title]: `${vc?.titleX || vc?.title || ''}`}), + }), {}) : {}) + }), {}); + const flatCols = props.columns.flatMap((v, k) => + v.children ? v.children.map((vc) => ({ ...vc, title: `${v?.titleX || v.title}` + (vc?.titleX ? `,${vc.titleX}` : '') })) : v + ); + // .filter((c) => c.dataIndex) + // !['string', 'number'].includes(typeof vc.title) ? `${v?.titleX || v.title}` : `${v?.titleX || v.title}-${vc.title || ''}` + ; setColumnsMap(flatCols); + // console.log('flatCols', flatCols); + + setSummaryRow(r1); + // console.log('summaryRow', r1); return () => {}; }, [props.columns]); @@ -51,13 +67,14 @@ export const TableExportBtn = (props) => { const itemMapped = columnsMap.reduce((sv, kset) => { const render_val = typeof kset?.render === 'function' ? kset.render('', item) : null; const data_val = kset?.dataIndex ? (Array.isArray(kset.dataIndex) ? getNestedValue(item, kset.dataIndex) : item[kset.dataIndex]) : undefined; - const v = { [kset.title]: data_val || render_val }; + const x_val = item[`${kset.dataIndex}_X`]; + // const _title = kset.title.replace('-[object Object]', ''); + const v = { [kset.title]: x_val || data_val || render_val }; return { ...sv, ...v }; }, {}); return itemMapped; }); - // console.log('data', data); - const ws = utils.json_to_sheet(data, { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) }); + const ws = utils.json_to_sheet([summaryRow, ...data], { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) }); const wb = utils.book_new(); utils.book_append_sheet(wb, ws, 'sheet'); writeFile(wb, `${output_name}.xlsx`); diff --git a/src/components/MapCountry.jsx b/src/components/MapCountry.jsx index 144c68f..ab44db3 100644 --- a/src/components/MapCountry.jsx +++ b/src/components/MapCountry.jsx @@ -61,6 +61,19 @@ export default observer((props) => { '#f5e7e8', '#fde7ea', + // '#8a1313', + // '#ad1818', + // '#b52f2f', + // '#bd4646', + // '#c55d5d', + // '#cd7474', + // '#d68b8b', + // '#dea2a2', + // '#e6b9b9', + // '#eed0d0', + // '#f6e7e7', + // '#fde7ea', + // '#001D70', // '#0047A5', // '#1A4397', diff --git a/src/views/Distribution.jsx b/src/views/Distribution.jsx index 4494e80..124100d 100644 --- a/src/views/Distribution.jsx +++ b/src/views/Distribution.jsx @@ -164,12 +164,14 @@ export default observer(() => { children: [ { title: '团数占比', + titleX: '团数占比', width: 90, dataIndex: ['resultToY', 'ConfirmOrderPercent'], // 'ConfirmOrderPercent', render: (v, r) => r.resultToY.ConfirmOrderPercent ? : '-', }, { title: '业绩占比', + titleX: '业绩占比', width: 90, dataIndex: ['resultToY', 'SumMLPercent'], // 'SumMLPercent', render: (v, r) => r.resultToY.SumMLPercent ? : '-', @@ -183,12 +185,14 @@ export default observer(() => { children: [ { title: '团数占比', + titleX: '团数占比', width: 90, dataIndex: ['resultToQ', 'ConfirmOrderPercent'], // 'ConfirmOrderPercent', render: (v, r) => r.resultToQ.ConfirmOrderPercent ? : '-', }, { title: '业绩占比', + titleX: '业绩占比', width: 90, dataIndex: ['resultToQ', 'SumMLPercent'], // 'SumMLPercent', render: (v, r) => r.resultToQ.SumMLPercent ? : '-', diff --git a/src/views/Orders.jsx b/src/views/Orders.jsx index 73ee94a..a100128 100644 --- a/src/views/Orders.jsx +++ b/src/views/Orders.jsx @@ -28,83 +28,92 @@ class Orders extends Component { if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { // 有比较的数据 result.columns = [ - { - title: "", + { + 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)} -
- - ), - dataIndex: "OrderType", + 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: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount), - dataIndex: "OrderCount", - }, - ], - }, - { - title: "成交数", - children: [ - { - title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount), - dataIndex: "CJCount", - }, - ], - }, - { - title: "成交人数", - children: [ - { - title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum), - dataIndex: "CJPersonNum", - }, - ], - }, - { - title: "成交率", - children: [ - { - title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate), - dataIndex: "CJrate", - }, - ], - }, - { - title: "成交毛利（预计）", - children: [ - { - title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY), - dataIndex: "YJLY", - }, - ], - }, + render: (text, record) => {text}, + }, + ], + }, + { + title: '数量', + children: [ + { + title: comm.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: comm.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: comm.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: comm.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: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY), + titleX: [ordercountTotal1.YJLY, ordercountTotal2.YJLY].join(' vs '), + dataIndex: 'YJLY', + }, + ], + }, - { - title: "单个订单价值", - children: [ - { - title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue), - dataIndex: "Ordervalue", - }, - ], - }, - ]; + { + title: '单个订单价值', + children: [ + { + title: comm.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) { @@ -118,11 +127,17 @@ class Orders extends Component { OrderType: item.OrderType, OrderTypeSN: item.OrderTypeSN, OrderCount: comm.show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount), + OrderCount_X: ([item.OrderCount, item2.OrderCount].join(' vs ')), CJCount: comm.show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount), + CJCount_X: ([item.CJCount, item2.CJCount].join(' vs ')), CJPersonNum: comm.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum), + CJPersonNum_X: ([item.CJPersonNum, item2.CJPersonNum].join(' vs ')), CJrate: comm.show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate), + CJrate_X: ([item.CJrate, item2.CJrate].join(' vs ')), YJLY: comm.show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY), + YJLY_X: ([item.YJLY, item2.YJLY].join(' vs ')), Ordervalue: comm.show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue), + Ordervalue_X: ([item.Ordervalue, item2.Ordervalue].join(' vs ')), }); } } @@ -133,11 +148,17 @@ class Orders extends Component { OrderType: item.OrderType, OrderTypeSN: item.OrderTypeSN, OrderCount: comm.show_vs_tag(comm.formatPercent(item.OrderCount), item.OrderCount, item.OrderCount, 0), + OrderCount_X: ([item.OrderCount, 0].join(' vs ')), CJCount: comm.show_vs_tag(comm.formatPercent(item.CJCount), item.CJCount, item.CJCount, 0), + CJCount_X: ([item.CJCount, 0].join(' vs ')), CJPersonNum: comm.show_vs_tag(comm.formatPercent(item.CJPersonNum), item.CJPersonNum, item.CJPersonNum, 0), + CJPersonNum_X: ([item.CJPersonNum, 0].join(' vs ')), CJrate: comm.show_vs_tag(item.CJrate, item.CJrate, item.CJrate, 0), + CJrate_X: ([item.CJrate, 0].join(' vs ')), YJLY: comm.show_vs_tag(comm.formatPercent(item.YJLY), item.YJLY, item.YJLY, 0), + YJLY_X: ([item.YJLY, 0].join(' vs ')), Ordervalue: comm.show_vs_tag(comm.formatPercent(item.Ordervalue), item.Ordervalue, item.Ordervalue, 0), + Ordervalue_X: ([item.Ordervalue, 0].join(' vs ')), }); } } @@ -155,18 +176,24 @@ class Orders extends Component { OrderType: item2.OrderType, OrderTypeSN: item2.OrderTypeSN, OrderCount: comm.show_vs_tag(comm.formatPercent(-item2.OrderCount), -item2.OrderCount, 0, item2.OrderCount), + OrderCount_X: ([ 0, item2.OrderCount].join(' vs ')), CJCount: comm.show_vs_tag(comm.formatPercent(-item2.CJCount), -item2.CJCount, 0, item2.CJCount), + CJCount_X: ([ 0, item2.CJCount].join(' vs ')), CJPersonNum: comm.show_vs_tag(comm.formatPercent(-item2.CJPersonNum), -item2.CJPersonNum, 0, item2.CJPersonNum), + CJPersonNum_X: ([0, item2.CJPersonNum].join(' vs ')), CJrate: comm.show_vs_tag(-item2.CJrate, -item2.CJrate, 0, item2.CJrate), + CJrate_X: ([ 0, item2.CJrate].join(' vs ')), YJLY: comm.show_vs_tag(comm.formatPercent(-item2.YJLY), -item2.YJLY, 0, item2.YJLY), + YJLY_X: ([0, item2.YJLY].join(' vs ')), Ordervalue: comm.show_vs_tag(comm.formatPercent(-item2.Ordervalue), -item2.Ordervalue, 0, item2.Ordervalue), + Ordervalue_X: ([ 0, item2.Ordervalue].join(' vs ')), }); } } } else { result.columns = [ { - title: "", + title: "#", fixed: 'left', children: [ { @@ -177,6 +204,7 @@ class Orders extends Component { ), + 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},