From 11e0684edf3aae9d1d70322b04f58c414552ef6d Mon Sep 17 00:00:00 2001 From: Lei OT Date: Thu, 21 Sep 2023 10:52:54 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=20=E5=B9=B4=E5=BA=A6=20?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=BD=B4=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...{DateFieldRadio.jsx => DataFieldRadio.jsx} | 4 +- src/components/DateGroupRadio/date.js | 4 +- src/components/DateGroupRadio/index.jsx | 4 ++ src/components/StatisticCard.jsx | 11 ++-- src/stores/Trade.js | 19 +++--- src/views/Home.jsx | 61 ++++++++++++------- 6 files changed, 63 insertions(+), 40 deletions(-) rename src/components/{DateFieldRadio.jsx => DataFieldRadio.jsx} (87%) diff --git a/src/components/DateFieldRadio.jsx b/src/components/DataFieldRadio.jsx similarity index 87% rename from src/components/DateFieldRadio.jsx rename to src/components/DataFieldRadio.jsx index b14047f..773ec5d 100644 --- a/src/components/DateFieldRadio.jsx +++ b/src/components/DataFieldRadio.jsx @@ -1,11 +1,11 @@ import { observer } from 'mobx-react'; import { Radio, Select } from 'antd'; -import { dataFieldOptions } from './../libs/ht'; +import { dataFieldOptions } from '../libs/ht'; export default observer((props) => { const { visible, dataRaw, dataMapper, fieldMapper, onChange, ...extProps } = props; const handleChange = (value) => { - console.log('handleChange', value); + // console.log('handleChange', value); if (typeof onChange === 'function') { onChange(value); } diff --git a/src/components/DateGroupRadio/date.js b/src/components/DateGroupRadio/date.js index 4e367f9..adb75fb 100644 --- a/src/components/DateGroupRadio/date.js +++ b/src/components/DateGroupRadio/date.js @@ -4,7 +4,7 @@ export const datePartOptions = [ { label: '日', value: 'day' }, { label: '周', value: 'week' }, { label: '月', value: 'month' }, - { label: '季', value: 'quarter' }, + { label: '季', value: 'season' }, { label: '年', value: 'year' }, ]; export const datePartMethod = { @@ -20,7 +20,7 @@ export const datePartMethod = { const dateKey = `${year}-W${String(week).padStart(2, '0')}`; return { dateKey, 'groupKey': dateKey, date }; }, - 'quarter': (date) => { + 'season': (date) => { const dateO = moment(date); // const key = dateO.format('YYYY-Q'); const key = `${dateO.year()}-${String(dateO.quarter()).padStart(2, 'Q')}`; diff --git a/src/components/DateGroupRadio/index.jsx b/src/components/DateGroupRadio/index.jsx index e8b1fd2..16a325f 100644 --- a/src/components/DateGroupRadio/index.jsx +++ b/src/components/DateGroupRadio/index.jsx @@ -2,6 +2,10 @@ import { Radio } from 'antd'; import { observer } from 'mobx-react'; import { datePartOptions, resultDataCb } from './date'; +/** + * 仅前端转换数据 + * 把按天的数据转换成 按周,季,月,年 + */ export default observer((props) => { const { visible, dataRaw, dataMapper, fieldMapper, onChange, ...extProps } = props; const _dataMapper = dataMapper || { 'data1': null, data2: null }; diff --git a/src/components/StatisticCard.jsx b/src/components/StatisticCard.jsx index 9a771f8..5847223 100644 --- a/src/components/StatisticCard.jsx +++ b/src/components/StatisticCard.jsx @@ -1,13 +1,15 @@ -import { observer } from "mobx-react"; +import { observer } from 'mobx-react'; import { Card, Statistic, Progress } from 'antd'; import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'; export default observer((props) => { - const valueStyle = { color: props.VSrate < 0 ? '#3f8600' : '#cf1322' }; - const VSIcon = () => (props.VSrate < 0 ? : ); + const ValueIcon = props.icon; + const valueStyle = { color: (props?.VSrate || -1) < 0 ? '#3f8600' : '#cf1322' }; + const VSIcon = () => ((props?.VSrate || -1) < 0 ? : ); return ( { ) } - {...props} + prefix={} + // title={{props.title}} /> {props.showProgress !== false && `${props.KPIrate}%`} />} diff --git a/src/stores/Trade.js b/src/stores/Trade.js index a726e92..e165dae 100644 --- a/src/stores/Trade.js +++ b/src/stores/Trade.js @@ -28,7 +28,8 @@ class Trade { value: summary?.ConfirmOrder, // VSrate: summary?.ConfirmOrderrate, KPIrate: summary?.[dataFieldAlias.ConfirmOrder.nestkey.p], - hasKPI: !isEmpty(summary?.[dataFieldAlias.ConfirmOrder.nestkey.p]), + // hasKPI: !isEmpty(summary?.[dataFieldAlias.ConfirmOrder.nestkey.p]), + hasKPI: false }, { title: '毛利', value: summary?.SumML, KPIrate: summary?.[dataFieldAlias.SumML.nestkey.p], hasKPI: false }, { title: '完成率', value: `${summary?.[dataFieldAlias.SumML.nestkey.p] || ''}%`, hasKPI: false }, @@ -54,7 +55,8 @@ class Trade { */ fetchTradeDataByDate(queryData) { this.timeData.loading = true; - Object.assign(queryData, { groupType: 'overview', groupDateType: 'week' }); + queryData = queryData || this.searchPayloadHome; + Object.assign(queryData, { groupType: 'overview', groupDateType: this.timeLineKey }); this.fetchTradeData(queryData).then((json) => { if (json.errcode === 0) { runInAction(() => { @@ -92,16 +94,11 @@ class Trade { */ fetchTradeDataByMonth(queryData) { this.sideData.loading = true; - // todo: groupType: bizarea - // Object.assign(queryData, { groupType: 'bu', groupDateType: 'month' }); Object.assign(queryData, { groupType: 'bizarea', groupDateType: 'month' }); this.fetchTradeData(queryData).then((json) => { if (json.errcode === 0) { runInAction(() => { const sortResult = json.result1.sort(sortBy('groupDateVal')); - /** - * test: '91006' - */ const groupsData = sortResult.reduce((r, v) => { if (v.groupsLabel ) { // && ['91001', '91006'].includes(v.groupsKey) (r[v.groupsLabel] || (r[v.groupsLabel] = [])).push(v); @@ -111,8 +108,6 @@ class Trade { this.sideData.loading = false; this.sideData.dataSource = groupsData; this.sideData.monthData = sortResult; - // const kpi = { label: '', value: 1200000 }; // 标注KPI - // this.sideData.kpi = kpi; }); } }); @@ -149,13 +144,17 @@ class Trade { this.searchPayloadHome = body; } + timeLineKey = 'week'; + setTimeLineKey(v) { + this.timeLineKey = v; + } + summaryData = { loading: false, dataSource: [], kpi: {}, }; timeData = { loading: false, dataSource: [] }; BuData = { loading: false, dataSource: [] }; sideData = { loading: false, dataSource: {}, monthData: [] }; dataForSort = {}; topData = {}; - defaultDataSubject = 'CJCount'; searchPayloadHome = {}; } diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 9109c48..07a9b72 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -1,30 +1,36 @@ import { useContext, useEffect, useState } from 'react'; import { observer } from 'mobx-react'; -import { Row, Col, Spin, Space } from 'antd'; +import { Row, Col, Spin, Space, Radio } from 'antd'; +import { CheckCircleTwoTone, MoneyCollectTwoTone, FlagTwoTone, SmileTwoTone, } from '@ant-design/icons'; import { stores_Context } from '../config'; import { useNavigate } from 'react-router-dom'; import StatisticCard from '../components/StatisticCard'; import Bullet from '../components/BulletWithSort'; import Waterfall from '../components/Waterfall'; -import DataFieldRadio from './../components/DateFieldRadio'; +import DataFieldRadio from '../components/DataFieldRadio'; +import { datePartOptions } from './../components/DateGroupRadio/date'; import SearchForm from './../components/search/SearchForm'; -import { empty, cloneDeep } from './../utils/commons'; +import { empty, cloneDeep, isEmpty } from './../utils/commons'; import { dataFieldAlias } from './../libs/ht'; import { Line } from '@ant-design/charts'; import './home.css'; -export default observer(() => { - const navigate = useNavigate(); - const { TradeStore } = useContext(stores_Context); - const { searchPayloadHome, sideData, summaryData, BuData, topData, timeData } = TradeStore; +const topSeries = [ + { key: 'country', label: '国籍' }, + { key: 'dept', label: '小组' }, + { key: 'operator', label: '顾问' }, + { key: 'destination', label: '目的地' }, + // { key: 'GuestGroupType', label: '客群类别' }, +]; + +// const iconSets = [CheckCircleTwoTone, , , , ,,]; +const iconSets = [CheckCircleTwoTone, MoneyCollectTwoTone, FlagTwoTone, SmileTwoTone]; - const topSeries = [ - { key: 'country', label: '国籍' }, - { key: 'dept', label: '小组' }, - { key: 'operator', label: '顾问' }, - { key: 'destination', label: '目的地' }, - // { key: 'GuestGroupType', label: '客群类别' }, - ]; +export default observer(() => { + // const navigate = useNavigate(); + const { TradeStore, date_picker_store: searchFormStore } = useContext(stores_Context); + const { sideData, summaryData, BuData, topData, timeData, timeLineKey } = TradeStore; + const { formValues, } = searchFormStore; useEffect(() => { if (empty(summaryData.dataSource)) { @@ -137,6 +143,14 @@ export default observer(() => { }, }); }; + const [dateField, setDateField] = useState(timeLineKey); + const handleChangeDateType = ({target: {value}}) => { + setDateField(value); + TradeStore.setTimeLineKey(value); + if (!isEmpty(TradeStore.searchPayloadHome)) { + TradeStore.fetchTradeDataByDate(); + } + }; return ( <> @@ -145,7 +159,7 @@ export default observer(() => { { }, }} onSubmit={(_err, obj, form, str) => { - TradeStore.setStateSearch(form); + TradeStore.setStateSearch(obj); pageRefresh(obj); }} /> @@ -167,9 +181,9 @@ export default observer(() => { - {summaryData.dataSource.map((item) => ( + {summaryData.dataSource.map((item, i) => ( - + ))} @@ -177,11 +191,13 @@ export default observer(() => {
-

趋势

+

走势

-
周
+ - + + +

市场进度

@@ -189,11 +205,12 @@ export default observer(() => { +

{`各事业部总业绩`}

{Object.keys(sideData.dataSource).map((key) => ( -

{key}

+

{`${key}每月业绩`}

))}