diff --git a/src/components/LineWithKPI.jsx b/src/components/LineWithKPI.jsx index 50d196a..f2d6c43 100644 --- a/src/components/LineWithKPI.jsx +++ b/src/components/LineWithKPI.jsx @@ -1,6 +1,6 @@ import { observer } from 'mobx-react'; import { Line } from '@ant-design/plots'; -import { merge, isEmpty } from '../utils/commons'; +import { merge, isEmpty, groupBy } from '../utils/commons'; import { dataFieldAlias } from '../libs/ht'; const uniqueByKey = (array, key, pickLast) => { @@ -26,15 +26,22 @@ const uniqueByKey = (array, key, pickLast) => { export default observer((props) => { const { dataSource, ...config } = props; const kpiKey = dataFieldAlias[config.yField]?.nestkey?.v; - const _data = dataSource.reduce((r, v) => { - r.push(v); + const seriesData = groupBy(dataSource, ele => ele[config.seriesField]); + const pickKey4KPI = Object.keys(seriesData)[0]; + const KPIData = (seriesData?.[pickKey4KPI] || []).reduce((r, v) => { if ( ! isEmpty(v[kpiKey])) { // 有设目标才多显示一条虚线 颜色: #F4664A r.push({...v, [config.yField]: v[kpiKey], [config.seriesField]: dataFieldAlias[kpiKey].label, extraLine: true,}); } return r; }, []); + const dataColors = ['#598cf3', '#69deae', '#FAAD14']; + const colorSets = Object.keys(seriesData).sort().reduce((obj, k, i) => ({...obj, [k]: dataColors[i]}), {}); const mergeLineConfig = merge({ - color: ['#598cf3', '#F4664A', '#FAAD14'], + // color: ['#598cf3', '#69deae', '#F4664A', '#FAAD14'], + color: (item) => { + const thisSeries = item[config.seriesField]; + return thisSeries.includes('目标') ? '#F4664A' : colorSets[thisSeries]; + }, lineStyle: (data) => { // console.log(data); if (data[config.seriesField].includes('目标')) { @@ -49,5 +56,5 @@ export default observer((props) => { }; }, }, config); - return ; + return ; }); diff --git a/src/components/StatisticCard2.jsx b/src/components/StatisticCard2.jsx index ac6a624..a625377 100644 --- a/src/components/StatisticCard2.jsx +++ b/src/components/StatisticCard2.jsx @@ -14,7 +14,7 @@ export default observer((props) => { const ValueIcon = props.icon; const valueStyle = { color: (props?.VSrate || -1) < 0 ? '#3f8600' : '#cf1322' }; const VSIcon = () => ((props?.VSrate || -1) < 0 ? : ); - console.log(props, ';;;;'); + // console.log(props, ';;;;'); const [responsive, setResponsive] = useState(false); const bulletData = [ { @@ -25,7 +25,7 @@ export default observer((props) => { target: kpiVal || 0, }, ]; - console.log(bulletData, 'bbbbbbbbb'); + // console.log(bulletData, 'bbbbbbbbb'); const RingProgressConfigBlue = { height: 60, diff --git a/src/stores/Trade.js b/src/stores/Trade.js index 5dab423..c386d90 100644 --- a/src/stores/Trade.js +++ b/src/stores/Trade.js @@ -1,6 +1,6 @@ import { makeAutoObservable, runInAction, toJS } from 'mobx'; import * as req from '../utils/request'; -import { isEmpty, sortBy, pick, merge, fixTo2Decimals } from '../utils/commons'; +import { isEmpty, sortBy, pick, merge, fixTo2Decimals, groupBy, sortKeys } from '../utils/commons'; import { dataFieldAlias } from './../libs/ht'; class Trade { @@ -17,9 +17,8 @@ class Trade { queryData.groupType = queryData?.groupType || 'overview'; queryData.groupDateType = 'year'; const multiData = await this.fetchTradeDataAll(queryData); - console.log(multiData, 'mmmmmmmm', queryData); - // this.fetchTradeData(queryData).then((json) => { const { summary, traditional, biz } = multiData.result1; + // console.log(JSON.stringify(summary), 'mmmmmmmmmmm'); const summaryData = { loading: false, dataSource: [ @@ -77,26 +76,27 @@ class Trade { const kpi = { label: '', value: summary?.[0]?.MLKPIvalue }; this.summaryData.kpi = kpi; }); - // }); } /** * 时间轴 */ - fetchTradeDataByDate(queryData = {}) { + async fetchTradeDataByDate(queryData = {}) { this.timeData.loading = true; queryData = Object.assign({}, this.searchPayloadHome, queryData); // queryData || this.searchPayloadHome; queryData.groupType = queryData?.groupType || 'overview'; Object.assign(queryData, { groupDateType: this.timeLineKey }); - this.fetchTradeData(queryData).then((json) => { - if (json.errcode === 0) { - const data = json.result1.sort(sortBy('groupDateVal')); - runInAction(() => { - // 标注KPI - this.timeData.loading = false; - this.timeData.dataSource = data; - }); - } + const multiData = await this.fetchTradeDataAll(queryData); + const { traditional, biz } = multiData.result1; + // console.log(biz, 'mmmmmmmm', queryData); + const dataT = traditional.map(ele => ({...ele, groupsLabel: '传统'})); + const dataB = biz.map(ele => ({...ele, groupsLabel: '商务'})); + const mergeData = [].concat(dataT, dataB); + const dateKeyData = groupBy(mergeData, ele => ele.groupDateVal); + const sortByDateKey = Object.values(sortKeys(dateKeyData)).reduce( (a, b) => a.concat(b), []); + runInAction(() => { + this.timeData.loading = false; + this.timeData.dataSource = sortByDateKey; }); } @@ -229,8 +229,8 @@ class Trade { groupsData[groupsKey]?.[0] || {} ); }).map(row => ({...row, - ConfirmRates: fixTo2Decimals((row.ConfirmOrder/row.SumOrder)*100), - MLKPIrates: fixTo2Decimals((row.SumML/row.MLKPIvalue)*100), + ConfirmRates: row.SumOrder ? fixTo2Decimals((row.ConfirmOrder/row.SumOrder)*100) : 0, + MLKPIrates: row.MLKPIvalue ? fixTo2Decimals((row.SumML/row.MLKPIvalue)*100) : 0, // todo: })); return Object.assign(res, { [resKey]: Object.assign({}, mergeItem, { summary }) }); diff --git a/src/utils/commons.js b/src/utils/commons.js index 7baf2e9..c65f069 100644 --- a/src/utils/commons.js +++ b/src/utils/commons.js @@ -283,6 +283,11 @@ export const sortBy = (key) => { return (a, b) => (a[key] > b[key]) ? 1 : ((b[key] > a[key]) ? -1 : 0); }; +export const sortKeys = (obj) => + Object.keys(obj) + .sort() + .reduce((a, k2) => ({...a, [k2]: obj[k2]}), {}); + /** * 合并Object, 递归地 */ diff --git a/src/views/Home.jsx b/src/views/Home.jsx index c60c94a..a8f4660 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -53,7 +53,7 @@ export default observer(() => { TradeStore.resetData(); TradeStore.fetchSummaryData(Object.assign({}, queryData, { groupType })); TradeStore.fetchTradeDataByDate(queryData); - TradeStore.fetchTradeDataByBU(queryData); + // TradeStore.fetchTradeDataByBU(queryData); TradeStore.fetchTradeDataByMonth(queryData); const topSeriesF = _overviewFlag ? topSeries : topSeries.filter((ele) => ele.key !== 'dept'); setTopSeriesSet(topSeriesF); @@ -155,7 +155,7 @@ export default observer(() => { tooltip: { customItems: (originalItems) => { // process originalItems, - const items = originalItems.map((ele) => ({ ...ele, name: ele.data?.extraLine ? ele.name : dataFieldAlias[key]?.alias || key })); + const items = originalItems.map((ele) => ({ ...ele, name: ele.data?.extraLine ? ele.name : `${ele.name} ${dataFieldAlias[key]?.alias || key}` })); return items; }, }, @@ -224,7 +224,7 @@ export default observer(() => {
-

市场

+

市场 (仅传统订单)