From f53e89f4aed323cde82b7707da29b7bd6f26d718 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Fri, 13 Oct 2023 15:44:30 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=BE=E9=97=AE=E4=B8=9A=E7=BB=A9=E8=B7=9F?= =?UTF-8?q?=E8=B8=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stores/SaleStore.js | 60 ++++++++++++++++++++++++++++ src/views/Sale_KPI.jsx | 86 +++++++++++++++++++++++++++++++++++++++-- 2 files changed, 142 insertions(+), 4 deletions(-) diff --git a/src/stores/SaleStore.js b/src/stores/SaleStore.js index e8ddbd0..6c4b692 100644 --- a/src/stores/SaleStore.js +++ b/src/stores/SaleStore.js @@ -4,6 +4,7 @@ import * as config from '../config'; import * as comm from '../utils/commons'; import { NavLink } from 'react-router-dom'; import { groupsMappedByCode, dataFieldAlias } from './../libs/ht'; +import * as req from '../utils/request'; // 销售数据 class SaleStore { @@ -29,6 +30,8 @@ class SaleStore { type_data_sub = []; // 类型的子维度数据 date_title = 'date_title'; // 日期段，只用于显示，防止日期选择控件的变化导致页面刷新 + salesTrade = { loading: false, operator: [], dept: [], overview: [] }; + // 是否包含门票 handleChange_include_tickets = (value) => { this.include_tickets = value; @@ -489,6 +492,38 @@ class SaleStore { console.log('fetch data failed', error); }); } + + async fetchOperatorTradeData(groupType, queryData) { + this.salesTrade.loading = true; + const param1 = Object.assign(queryData, {groupType, groupDateType: 'year' }); + const yearData = await this.fetchTradeData(param1); + const yData = parseSaleData(yearData, ['groupsKey', 'groupDateType']); + const param2 = Object.assign(queryData, {groupType, groupDateType: 'month' }); + const monthData = await this.fetchTradeData(param2); + const mData = parseSaleData(monthData, ['groupsKey', 'groupDateType']); + const mergeYearMonth = Object.keys(yData).map(ykey => ({ + ...yData[ykey], + mData: mData[ykey].data, + yData: Object.values(yData[ykey].data)[0], + data: undefined, + })); + console.log(mergeYearMonth, ';;;;;;;;;;'); + runInAction(() => { + this.salesTrade.loading = false; + this.salesTrade[groupType] = mergeYearMonth; + }); + } + + /** + * 获取业绩数据 + */ + async fetchTradeData(queryData) { + const json = await req.fetchJSON('/service-Analyse2/GetTradeProcess', queryData); + if (json.errcode === 0) { + return json.result1; + } + return []; + } } const calcDiff = ({ result1 , result2 }) => { @@ -512,4 +547,29 @@ const calcDiff = ({ result1 , result2 }) => { return afterCalc; }; +const parseSaleData = (res, keyArr = []) => { + const result = res.map((row) => ({ + ...row, + yearIndex: moment(row.start_date).year(), + })); + const byYear = comm.groupBy(result, (ele) => ele.yearIndex); + let ret = {}; + const [key0, key1] = keyArr; + Object.keys(byYear).map((_yearVal) => { + const _subjectRet = comm.groupBy(byYear[_yearVal], (ele) => `${ele[key0]}`); + const afterGroup = Object.keys(_subjectRet).reduce((r, oID) => { + const isYear = _subjectRet[oID][0].groupDateType === 'year'; + const data = (_subjectRet[oID] || []).map((ele) => ({ ...ele, 'dateVal': isYear ? ele.groupDateVal : moment(ele.groupDateVal).format('MM') })); + // const mappedData = comm.groupBy(data, ele => `${ele.groupDateType}_${ele.dateVal}`); + const mappedData = data.reduce((rd, ele) => ({...rd, [`${ele.groupDateType}_${ele.dateVal}`]: ele}), {}); + const row = comm.pick(_subjectRet[oID][0], ['groupDateType', 'groupType', 'groupsKey', 'groupsLabel']); + // return {...row, data}; + return { ...r, [oID]: { ...row, data: mappedData } }; + }, {}); + ret = afterGroup; + return afterGroup; + }); + return ret; +}; + export default SaleStore; diff --git a/src/views/Sale_KPI.jsx b/src/views/Sale_KPI.jsx index 5584dbb..eb62b27 100644 --- a/src/views/Sale_KPI.jsx +++ b/src/views/Sale_KPI.jsx @@ -1,5 +1,5 @@ -import React, { useContext, useEffect } from 'react'; -import { Row, Col, Button, Tabs, Table, Divider, Radio, Select } from 'antd'; +import React, { useContext, useEffect, useState } from 'react'; +import { Row, Col, Button, Tabs, Table, Divider, Radio, Select, Space, Typography, Progress } from 'antd'; import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from '@ant-design/icons'; import { stores_Context } from '../config'; import { observer } from 'mobx-react'; @@ -8,15 +8,81 @@ import * as comm from '../utils/commons'; import * as config from '../config'; import { utils, writeFileXLSX } from 'xlsx'; import SearchForm from './../components/search/SearchForm'; +import { dataFieldAlias } from '../libs/ht'; + +const { Text } = Typography; const Sale_KPI = () => { const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context); const { formValues } = searchFormStore; + const { loading, operator } = sale_store.salesTrade; + + const [groupType, setGroupType] = useState('dept'); + const dataSource = [].concat(sale_store.salesTrade[groupType], operator); const pageRefresh = (queryData) => { const overviewFlag = queryData.DepartmentList.toLowerCase() === 'all' || queryData.DepartmentList.toLowerCase().includes(','); - queryData.groupType = overviewFlag ? 'overview' : 'dept'; + const _groupType = overviewFlag ? 'overview' : 'dept'; + setGroupType(_groupType); + sale_store.fetchOperatorTradeData(_groupType, { ...queryData, groupDateType: 'year' }); + sale_store.fetchOperatorTradeData('operator', { ...queryData, groupDateType: 'year' }); }; + const monthCol = new Array(12).fill(1).map((_, index) => { + return { + title: `${index + 1}月`, + dataIndex: `M${index + 1}Percent`, + valueType: 'digit', + width: '7.5em', + render: (_, row) => ( + +
+ + {dataFieldAlias.SumML.formatter(row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.MLKPIvalue || 0)} + +
+
{dataFieldAlias.SumML.formatter(row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.SumML || 0)}
+ {row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.MLKPIrates || 0 ? ( + `${row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.MLKPIrates || 0}%`} + /> + ) : ( + '-' + )} + + ), + }; + }); + const columns = [ + { + title: ``, + dataIndex: 'groupsLabel', + editable: false, + width: '7.5em', + }, + { + title: '年度', + dataIndex: 'yearValue', + width: '10em', + render: (_, row) => ( + +
+ + 目标 + {dataFieldAlias.SumML.formatter(row.yData?.MLKPIvalue || 0)} + +
+
+ 完成 + {dataFieldAlias.SumML.formatter(row.yData?.SumML || 0)} +
+ {row.yData?.MLKPIrates || 0 ? `${row.yData?.MLKPIrates || 0}%`} /> : '-'} + + ), + }, + ...monthCol, + ]; return (
@@ -41,7 +107,19 @@ const Sale_KPI = () => { - + + + );