From 42f4cbd134c3e81ba4f61cddc2e80fc8dcd83dc9 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Tue, 14 Nov 2023 09:11:17 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E9=94=80=E5=94=AE=E8=BF=9B=E5=BA=A6:?= =?UTF-8?q?=20=E5=AF=BC=E5=87=BA=E5=88=97=E8=A1=A8;=20=E5=B0=8F=E7=BB=84?= =?UTF-8?q?=E5=A4=9A=E9=80=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Data.jsx | 4 +-- src/utils/commons.js | 6 ++++ src/views/Sale_KPI.jsx | 70 ++++++++++++++++++++++++++++++++++++----- 3 files changed, 70 insertions(+), 10 deletions(-) diff --git a/src/components/Data.jsx b/src/components/Data.jsx index 12671c9..6aa12bd 100644 --- a/src/components/Data.jsx +++ b/src/components/Data.jsx @@ -2,7 +2,7 @@ import { useState, useEffect } from "react"; import { Tag, Button, message } from 'antd'; import { CaretUpOutlined, CaretDownOutlined, DownloadOutlined } from '@ant-design/icons'; import { utils, writeFile } from "xlsx"; -import { isEmpty } from "../utils/commons"; +import { isEmpty, getNestedValue } from "../utils/commons"; /** * @property diffPercent @@ -49,7 +49,7 @@ export const TableExportBtn = (props) => { const data = props.dataSource.map((item) => { const itemMapped = columnsMap.reduce((sv, kset) => { const render_val = typeof kset?.render === 'function' ? kset.render('', item) : null; - const data_val = kset?.dataIndex ? item[kset.dataIndex] : undefined; + const data_val = kset?.dataIndex ? (Array.isArray(kset.dataIndex) ? getNestedValue(item, kset.dataIndex) : item[kset.dataIndex]) : undefined; const v = { [kset.title]: render_val || data_val }; return { ...sv, ...v }; }, {}); diff --git a/src/utils/commons.js b/src/utils/commons.js index be8b8b8..0073b1c 100644 --- a/src/utils/commons.js +++ b/src/utils/commons.js @@ -527,3 +527,9 @@ export function flush(collection) { export const numberFormatter = (number) => { return new Intl.NumberFormat().format(number); }; + +export const getNestedValue = (obj, keyArr) => { + return keyArr.reduce((acc, curr) => { + return acc && acc[curr]; + }, obj); +}; diff --git a/src/views/Sale_KPI.jsx b/src/views/Sale_KPI.jsx index d8b48fd..0c83bb2 100644 --- a/src/views/Sale_KPI.jsx +++ b/src/views/Sale_KPI.jsx @@ -1,14 +1,16 @@ import React, { useContext } from 'react'; -import { Row, Col, Table, Select, Space, Typography, Progress, Spin } from 'antd'; +import { Row, Col, Table, Select, Space, Typography, Progress, Spin, Divider } from 'antd'; import { stores_Context } from '../config'; import { observer } from 'mobx-react'; import * as comm from '../utils/commons'; import SearchForm from './../components/search/SearchForm'; -import { dataFieldAlias } from '../libs/ht'; +import { dataFieldAlias, overviewGroup } from '../libs/ht'; import Donut from './../components/Donut'; import LineWithKPI from '../components/LineWithKPI'; +import { TableExportBtn } from './../components/Data'; const { Text } = Typography; +const overviewGroupKeys = overviewGroup.map(item => item.key); const Sale_KPI = () => { const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context); @@ -16,10 +18,11 @@ const Sale_KPI = () => { const { groupType, loading, operator, } = sale_store.salesTrade; const dataSource = [].concat(sale_store.salesTrade[groupType], operator); - const yearData = Object.values(sale_store.salesTrade[groupType]?.[0]?.mData || {}); + const yearData = sale_store.salesTrade[groupType].reduce((r, ele) => r.concat(Object.values(ele.mData)), []); const operatorObjects = operator.map((v) => ({ key: v.groupsKey, value: v.groupsKey, label: v.groupsLabel })); const pageRefresh = async (queryData) => { - const overviewFlag = queryData.DepartmentList.toLowerCase() === 'all' || queryData.DepartmentList.toLowerCase().includes(','); + const overviewFlag = queryData.DepartmentList.toLowerCase() === 'all' + || overviewGroupKeys.includes(queryData.DepartmentList.toLowerCase()); // queryData.DepartmentList.toLowerCase().includes(','); const _groupType = overviewFlag ? 'overview' : 'dept'; sale_store.setGroupType(_groupType); sale_store.fetchOperatorTradeData(_groupType, { ...queryData, groupDateType: 'year' }); @@ -102,24 +105,72 @@ const Sale_KPI = () => { }, ...monthCol, ]; + const columnsForExport = [ + { + title: `#`, + dataIndex: 'groupsLabel', + editable: false, + width: '7.5em', + fixed: 'left', + }, + { + title: '--', + dataIndex: 'rowLabel', + width: '10em', + fixed: 'left', + }, + { + title: '年度', + dataIndex: 'yearML', + width: '10em', + fixed: 'left', + }, + ...new Array(12).fill(1).map((_, index) => { + return { + title: `${index + 1}月`, + dataIndex: ['mData', `month_${String(index + 1).padStart(2, '0')}`], // , 'SumML' + valueType: 'digit', + width: '7.5em', + }; + }), + ]; + const dataForExport = dataSource.reduce((r, ele) => { + const targetRow = { + groupsLabel: ele.groupsLabel, + rowLabel: '目标', + yearML: ele.yData.MLKPIvalue, + mData: Object.values(ele.mData).reduce((rt, et) => ({ ...rt, [`month_${et.dateVal}`]: et.MLKPIvalue }), {}), + }; + const valRow = { groupsLabel: ele.groupsLabel, rowLabel: '完成', yearML: ele.yData.SumML, mData: Object.values(ele.mData).reduce((rt, et) => ({ ...rt, [`month_${et.dateVal}`]: et.SumML }), {}) }; + const processRow = { + groupsLabel: ele.groupsLabel, + rowLabel: '进度(%)', + yearML: ele.yData.MLKPIrates, + mData: Object.values(ele.mData).reduce((rt, et) => ({ ...rt, [`month_${et.dateVal}`]: et.MLKPIrates }), {}), + }; + r.push(targetRow, valRow, processRow); + return r; + }, []); const lineConfig = { appendPadding: 10, xField: 'groupDateVal', yField: 'SumML', seriesField: 'groupsLabel', isGroup: true, smooth: true, meta: comm.cloneDeep(dataFieldAlias), }; return (
- + { + sale_store.setSearchValues(obj, form); pageRefresh(obj); }} /> @@ -136,7 +187,7 @@ const Sale_KPI = () => { /> - + @@ -167,6 +218,9 @@ const Sale_KPI = () => { + + +