顾问: 销售进度: 显示全年的KPI

src/components/LineWithKPI.jsx

@@ -22,7 +22,7 @@ export default observer((props) => {
   const colorSets = Object.keys(seriesData).sort().reduce((obj, k, i) => ({...obj, [k]: dataColors[i]}), {});
   const mergeLineConfig = merge({
     color: (item) => {
-      const thisSeries = item[config.seriesField].split(' ')?.[0];
+      const thisSeries = item[config.seriesField]?.split(' ')?.[0];
       return colorSets[thisSeries];
       // return thisSeries.includes('目标') ? '#F4664A' : colorSets[thisSeries];
     },

src/libs/ht.js

@@ -97,8 +97,8 @@ export const dateTypes = [
  * 结果字段
  */
 export const dataFieldOptions = [
-  { label: '营收', value: 'transactions', formatter: (v) => `${fixTo1Decimals(v / 10000)} 万`, nestkey: { p: 'transactionsKPIrates', v: 'transactionsKPIvalue' } },
+  { label: '营收', value: 'transactions', formatter: (v) => `${fixTo1Decimals((v || 0) / 10000)} 万`, nestkey: { p: 'transactionsKPIrates', v: 'transactionsKPIvalue' } },
-  { label: '毛利', value: 'SumML', formatter: (v) => `${fixTo1Decimals(v / 10000)} 万`, nestkey: { p: 'MLKPIrates', v: 'MLKPIvalue' } },
+  { label: '毛利', value: 'SumML', formatter: (v) => `${fixTo1Decimals((v || 0) / 10000)} 万`, nestkey: { p: 'MLKPIrates', v: 'MLKPIvalue' } },
   { label: '订单数', value: 'SumOrder', formatter: (v) => v, nestkey: { p: 'OrderKPIrates', v: 'OrderKPIvalue' } },
   { label: '成交数', value: 'ConfirmOrder', formatter: (v) => v, nestkey: { p: 'ConfirmOrderKPIrates', v: 'ConfirmOrderKPIvalue' } },
   { label: '成交率', value: 'ConfirmRates', formatter: (v) => `${v} %`, nestkey: { p: 'ConfirmRatesKPIrates', v: 'ConfirmRatesKPIvalue' } },

src/stores/SaleStore.js

@@ -5,6 +5,7 @@ import * as comm from '../utils/commons';
 import { NavLink } from 'react-router-dom';
 import { groupsMappedByCode, dataFieldAlias } from './../libs/ht';
 import * as req from '../utils/request';
+import { parseKPI } from './KPI';
 
 // 销售数据
 class SaleStore {
@@ -31,7 +32,8 @@ class SaleStore {
   date_title = 'date_title'; // 日期段，只用于显示，防止日期选择控件的变化导致页面刷新
 
   salesTrade = {
-    groupType: 'dept', loading: false, operator: [], dept: [], overview: [],
+    groupType: 'dept', loading: false,
+    operator: [], dept: [], overview: [],
     operatorMapped: {}, pickSales: [], pickSalesData: [],
   };
 
@@ -523,13 +525,52 @@ class SaleStore {
       data: undefined,
       yearML: Object.values(yData[ykey].data)[0]?.SumML || 0, // 整理排序用
     })).sort(comm.sortBy('yearML')).reverse();
+
+    const kpiObjects = mergeYearMonth.map(v => ({ key: v.groupsKey, value: v.groupsKey, label: v.groupsLabel }));
+    const kpiData = await this.getKPISettings(groupType, queryData, kpiObjects);
+    const salesTradeDataMapped = mergeYearMonth.reduce((ro, vo) => ({...ro, [vo.groupsKey]: vo}), {});
+    kpiData.map(ele => {
+      ele.kpiData.map((km) => {
+        const padM = String(km.monthIndex).padStart(2, '0');
+        const _monthMLKPI = { [dataFieldAlias.SumML.nestkey.v]: km.value, 'groupsKey': ele.object_id, 'groupsLabel': ele.object_name, 'groupDateVal': `${km.yearIndex}-${padM}-01`, };
+        if (comm.isEmpty(salesTradeDataMapped[ele.object_id])) {
+          return true;
+        }
+        if (comm.isEmpty(salesTradeDataMapped[ele.object_id].mData[`month_${padM}`])) {
+          salesTradeDataMapped[ele.object_id].mData[`month_${padM}`] = {};
+        }
+        Object.assign(salesTradeDataMapped[ele.object_id].mData[`month_${padM}`], _monthMLKPI);
+        return km;
+      });
+      return ele;
+    });
+
     runInAction(() => {
       this.salesTrade.loading = false;
-      this.salesTrade[groupType] = mergeYearMonth;
+      this.salesTrade[groupType] = Object.values(salesTradeDataMapped);
-      this.salesTrade[`${groupType}Mapped`] = mergeYearMonth.reduce((r, v) => ({...r, [v.groupsKey]: Object.values(v.mData)}), {});
+      this.salesTrade[`${groupType}Mapped`] = Object.values(salesTradeDataMapped).reduce((r, v) => ({...r, [v.groupsKey]: Object.values(v.mData)}), {});
     });
   }
 
+  async getKPISettings(curObject, queryData, objects) {
+    const getkpiParam = comm.objectMapper(queryData, {
+      DateType: { key: 'date_type' },
+      Date1: { key: 'start_date' },
+      Date2: { key: 'end_date' },
+      HTBusinessUnits: { key: 'object_id' },
+      DepartmentList: { key: 'object_id' },
+    });
+    Object.assign(getkpiParam, { object: curObject, subject: 'sum_profit' });
+    getkpiParam.object_id = curObject === 'overview' ? '' : objects.map((ele) => ele.key).join(',');
+    const json = await req.fetchJSON('/service-Analyse2/getkpi', getkpiParam);
+    if (json.errcode === 0) {
+      const yearData = parseKPI(json.result, ['subject', 'object_id']);
+      const year = moment(queryData.Date1).year();
+      return yearData?.[year]?.sum_profit || [];
+    }
+    return [];
+  };
+
   /**
    * 获取业绩数据
    */

src/views/Sale_KPI.jsx

@@ -1,29 +1,24 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
-import { Row, Col, Button, Tabs, Table, Divider, Radio, Select, Space, Typography, Progress, Spin } from 'antd';
+import { Row, Col, Table, Select, Space, Typography, Progress, Spin } from 'antd';
-import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from '@ant-design/icons';
 import { stores_Context } from '../config';
 import { observer } from 'mobx-react';
-import { NavLink, useParams } from 'react-router-dom';
 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';
 import Donut from './../components/Donut';
 import LineWithKPI from '../components/LineWithKPI';
-import { Line, DualAxes } from '@ant-design/plots';
 
 const { Text } = Typography;
 
 const Sale_KPI = () => {
   const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
   const { formValues } = searchFormStore;
-  const { groupType, loading, operator } = sale_store.salesTrade;
+  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 operatorObjects = operator.map((v) => ({ key: v.groupsKey, value: v.groupsKey, label: v.groupsLabel }));
-  const pageRefresh = (queryData) => {
+  const pageRefresh = async (queryData) => {
     const overviewFlag = queryData.DepartmentList.toLowerCase() === 'all' || queryData.DepartmentList.toLowerCase().includes(',');
     const _groupType = overviewFlag ? 'overview' : 'dept';
     sale_store.setGroupType(_groupType);
@@ -39,11 +34,13 @@ const Sale_KPI = () => {
       width: '7.5em',
       render: (_, row) => (
         <Space direction={'vertical'}>
+          {/* 目标 */}
           <div>
             <Text italic type={'secondary'}>
               {dataFieldAlias.SumML.formatter(row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.MLKPIvalue || 0)}
             </Text>
           </div>
+          {/* 完成 */}
           <div>{dataFieldAlias.SumML.formatter(row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.SumML || 0)}</div>
           {row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.MLKPIrates || 0 ? (
             <Progress