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(() => {