Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf:老客户:增加对比折线

Browse Source
main
ZJYHX 2 months ago
parent be31c3983d
commit 1b86ab1192
3 changed files with 75 additions and 44 deletions
Show Stats Download Patch File Download Diff File

6
src/charts/Customer_care_regular.jsx
Unescape Escape View File

@ -33,14 +33,15 @@ const Customer_care_regular = () => {
onSubmit={async (_err, obj, form, str) => {
customer_store.setSearchValues(obj, form, 'regular_data');
regular_data.data_compare=[];
regular_data.isRenderCount=0;
if (obj.DateDiff1 && obj.DateDiff2){
regular_data.showSum=false;
await customer_store.regular_customer_order();
customer_store.regular_customer_order(false,true);
customer_store.regular_customer_order(true,false,true);
customer_store.regular_customer_order(true,true,true);
}
else{
regular_data.showSum=true;
customer_store.regular_customer_order();
customer_store.regular_customer_order(true);
}
@ -111,7 +112,8 @@ const Customer_care_regular = () => {
</Col>
<Col span={24}>
<LineWithAvg dataSource={regular_data.pivotData} loading={regular_data.detail_loading} xField={regular_data.pivotX} yField={regular_data.pivotY} seriesField='_ylabel' showSUM={true} />
<LineWithAvg dataSource={regular_data.pivotData} loading={regular_data.detail_loading} xField={regular_data.pivotX} yField={regular_data.pivotY}
seriesField='_ylabel' showSUM={regular_data.showSum} />
</Col>
<Col span={24}>

23
src/components/LineWithAvg.jsx
Unescape Escape View File

@ -25,6 +25,10 @@ export default observer((props) => {
// xAxis: {
// type: 'timeCat',
// },
point: {
size: 4,
shape: "cicle",
},
yAxis: {
min: 0,
maxTickInterval: 5,
@ -79,12 +83,13 @@ export default observer((props) => {
// 初始化`平均`线, `总计`线
const byDays = groupBy(rawData, xField);
const sumY = rawData.reduce((a, b) => a + b[yField], 0);
const avgVal = Math.round(sumY / (Object.keys(byDays).length));
const avgLine = [
{ type: 'text', position: ['start', avgVal], content: avgVal, offsetX: -15, style: { fill: '#F4664A', textBaseline: 'bottom' } },
{ type: 'line', start: [-10, avgVal], end: ['max', avgVal], style: { stroke: '#F4664A', lineDash: [2, 2] } },
];
setLineConfig({ ...lineConfig, yField, xField, annotations: avgLine });
// const avgVal = Math.round(sumY / (Object.keys(byDays).length));
// const avgLine = [
// { type: 'text', position: ['start', avgVal], content: avgVal, offsetX: -15, style: { fill: '#F4664A', textBaseline: 'bottom' } },
// { type: 'line', start: [-10, avgVal], end: ['max', avgVal], style: { stroke: '#F4664A', lineDash: [2, 2] } },
// ];
// setLineConfig({ ...lineConfig, yField, xField, annotations: avgLine });
setLineConfig({ ...lineConfig, yField, xField,});
if (showSUM) {
const _sumLine = Object.keys(byDays).reduce((r, _d) => {
const summaryVal = byDays[_d].reduce((rows, row) => rows + row[yField], 0);
@ -94,6 +99,9 @@ export default observer((props) => {
// console.log(_sumLine.map((ele) => ele[yField]));
setSumSeries(_sumLine);
}
else{
setSumSeries([]);
}
};
const onChangeXDateFieldGroup = (value, data, avg1) => {
@ -129,6 +137,9 @@ export default observer((props) => {
if (showSUM) {
setSumSeries(_sumLine);
}
else{
setSumSeries([]);
}
// setAvgLine1(avg1);
const avg1Int = Math.round(avg1);

90
src/stores/CustomerStore.js
Unescape Escape View File

@ -145,41 +145,63 @@ class CustomerStore {
if (!isCompare){
this.regular_data.data_detail = json;
}
if (this.regular_data.data_compare.length===0){
this.regular_data.data_compare = json;
}
else{
const fistCompareDetail = this.regular_data.data_compare;
json.push(...fistCompareDetail);
}
if (isRender){
if (this.regular_data.isRenderCount===0){
this.regular_data.isRenderCount=1;
this.regular_data.detail_loading = false;
const dump_l = (json || []).filter(ele => ele.COLI_IsOld !== '' && ele.COLI_IsCusCommend !== '').length;
this.regular_data.total_data_tips = dump_l > 0 ? `包含 ${dump_l} 条同时勾选的数据` : '';
/** 使用明细数据画图 */
const data_detail = (json || []).map((ele) => ({
...ele,
key: ele.COLI_ID,
orderState: ele.OrderState,
applyDate: moment(ele.COLI_ApplyDate).format('YYYY-MM-DD'),
startDate: ele.COLI_OrderStartDate,
confirmDate: moment(ele.COLI_ConfirmDate).format('YYYY-MM-DD'),
}));
const { data: IsOldData, } = pivotBy(data_detail.filter(ele => ele.COLI_IsOld === '是'), [['COLI_IsOld', ], [], pivotByDate]);
const { data: isCusCommendData, } = pivotBy(data_detail.filter(ele => ele.COLI_IsCusCommend === '是'), [['COLI_IsCusCommend', ], [], pivotByDate]);
// console.log('IsOldData====', IsOldData, '\nisCusCommend', isCusCommendData);
// 合并成两个系列
const seriesData = [].concat(IsOldData.map(ele => ({...ele, _ylabel: '老客户'})), isCusCommendData.map(ele => ({...ele, _ylabel: '老客户推荐'})),).sort(sortBy(pivotByDate));
const seriesNewData = seriesData.map(item => {
if (isCompare){
return {
...item,
_ylabel: date_picker_store.start_date_cp.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date_cp.format(config.SMALL_DATETIME_FORMAT) + item._ylabel
};
}
else{
return {
...item,
_ylabel: date_picker_store.start_date.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date.format(config.SMALL_DATETIME_FORMAT) + item._ylabel
};
}
});
// console.log('seriesData====', seriesNewData);
if (this.regular_data.data_compare.length===0){
this.regular_data.data_compare=seriesNewData;
}
else{
this.regular_data.detail_loading = false;
const dump_l = (json || []).filter(ele => ele.COLI_IsOld !== '' && ele.COLI_IsCusCommend !== '').length;
this.regular_data.total_data_tips = dump_l > 0 ? `包含 ${dump_l} 条同时勾选的数据` : '';
/** 使用明细数据画图 */
const data_detail = (json || []).map((ele) => ({
...ele,
key: ele.COLI_ID,
orderState: ele.OrderState,
applyDate: moment(ele.COLI_ApplyDate).format('YYYY-MM-DD'),
startDate: ele.COLI_OrderStartDate,
confirmDate: moment(ele.COLI_ConfirmDate).format('YYYY-MM-DD'),
}));
const { data: IsOldData, } = pivotBy(data_detail.filter(ele => ele.COLI_IsOld === '是'), [['COLI_IsOld', ], [], pivotByDate]);
const { data: isCusCommendData, } = pivotBy(data_detail.filter(ele => ele.COLI_IsCusCommend === '是'), [['COLI_IsCusCommend', ], [], pivotByDate]);
// console.log('IsOldData====', IsOldData, '\nisCusCommend', isCusCommendData);
// 合并成两个系列
const seriesData = [].concat(IsOldData.map(ele => ({...ele, _ylabel: '老客户'})), isCusCommendData.map(ele => ({...ele, _ylabel: '老客户推荐'})),).sort(sortBy(pivotByDate));
// console.log('seriesData====', seriesData);
this.regular_data.pivotData = seriesData; // { IsOldData, isCusCommendData, };
let seriesCompareData = [];
const fistCompareDetail = this.regular_data.data_compare;
if (fistCompareDetail.length>seriesNewData.length){
seriesCompareData = fistCompareDetail;
for (let i = 0; i < seriesNewData.length; i++) {
seriesNewData[i].applyDate = fistCompareDetail[i].applyDate;
}
seriesCompareData.push(...seriesNewData);
}
else{
seriesCompareData=seriesNewData;
for (let i = 0; i < fistCompareDetail.length; i++) {
fistCompareDetail[i].applyDate = seriesNewData[i].applyDate;
}
seriesCompareData.push(...fistCompareDetail);
}
this.regular_data.pivotData = seriesCompareData; // { IsOldData, isCusCommendData, };
this.regular_data.pivotY = pivotByOrder;
this.regular_data.pivotX = pivotByDate;
}
}
}
else{
this.regular_data.detail_loading = false;
@ -199,14 +221,10 @@ class CustomerStore {
// console.log('IsOldData====', IsOldData, '\nisCusCommend', isCusCommendData);
// 合并成两个系列
const seriesData = [].concat(IsOldData.map(ele => ({...ele, _ylabel: '老客户'})), isCusCommendData.map(ele => ({...ele, _ylabel: '老客户推荐'})),).sort(sortBy(pivotByDate));
// console.log('seriesData====', seriesData);
this.regular_data.pivotData = seriesData; // { IsOldData, isCusCommendData, };
this.regular_data.pivotY = pivotByOrder;
this.regular_data.pivotX = pivotByDate;
}
}
} else {
if (isCompare){
const result = [];
@ -269,7 +287,7 @@ class CustomerStore {
data: [],
data_detail: [],
data_compare: [],
isRenderCount:0,
showSum:true,
total_data_tips: '',
webcode: 'ALL',
site_select_mode: 'multiple',// 站点是否多选

Write Preview
Loading…
Cancel
Save