From 6317c24a75431fab79b819cda913c6a9fbc55cdb Mon Sep 17 00:00:00 2001 From: ZJYHX Date: Wed, 23 Apr 2025 12:01:29 +0800 Subject: [PATCH] =?UTF-8?q?perf:=E8=80=81=E5=AE=A2=E6=88=B7:=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=80=BB=E8=AE=A1=E5=AF=B9=E6=AF=94=E6=8A=98=E7=BA=BF?= =?UTF-8?q?=EF=BC=9B=E4=BF=AE=E6=94=B9=E6=8A=98=E7=BA=BF=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/charts/Customer_care_regular.jsx | 7 +- src/components/LineWithAvg.jsx | 96 +++++++++++++++++++++------- src/stores/CustomerStore.js | 4 +- 3 files changed, 80 insertions(+), 27 deletions(-) diff --git a/src/charts/Customer_care_regular.jsx b/src/charts/Customer_care_regular.jsx index 84950a4..4f79c9a 100644 --- a/src/charts/Customer_care_regular.jsx +++ b/src/charts/Customer_care_regular.jsx @@ -36,7 +36,7 @@ const Customer_care_regular = () => { regular_data.data_compare=[]; if (obj.DateDiff1 && obj.DateDiff2){ regular_data.isCompareLine=true; - regular_data.showSum=false; + regular_data.showCompareSum=true; await customer_store.regular_customer_order(); customer_store.regular_customer_order(false,true); customer_store.regular_customer_order(true,false,true); @@ -44,7 +44,7 @@ const Customer_care_regular = () => { } else{ regular_data.isCompareLine=false; - regular_data.showSum=true; + regular_data.showCompareSum=false; customer_store.regular_customer_order(); customer_store.regular_customer_order(true); } @@ -116,7 +116,8 @@ const Customer_care_regular = () => { + seriesField='_ylabel' showCompareSum={regular_data.showCompareSum} solidLineTime={regular_data.solidLineTime} solidLineCompareTime={regular_data.solidLineCompareTime} + solidLineDash={regular_data.solidLineDash} isCompareLine={regular_data.isCompareLine}/> diff --git a/src/components/LineWithAvg.jsx b/src/components/LineWithAvg.jsx index 6e11f58..f4e0432 100644 --- a/src/components/LineWithAvg.jsx +++ b/src/components/LineWithAvg.jsx @@ -7,7 +7,8 @@ import DateGroupRadio from '../components/DateGroupRadio'; import { cloneDeep, groupBy, sortBy } from '../utils/commons'; export default observer((props) => { - const { dataSource: rawData, showAVG, showSUM, loading, solidLineTime, solidLineDash, isCompareLine, ...config } = props; + const { dataSource: rawData, showAVG, showCompareSum, loading, solidLineTime, + solidLineDash, isCompareLine,solidLineCompareTime, ...config } = props; const { xField, yField, yFieldAlias, seriesField } = config; const [dataBeforeXChange, setDataBeforeXChange] = useState([]); @@ -25,14 +26,15 @@ export default observer((props) => { // xAxis: { // type: 'timeCat', // }, + color: isCompareLine?['#17f485', '#1890ff','#17f485', '#1890ff',"#181414","#181414"]:undefined, point: { size: 4, shape: "cicle", }, lineStyle: (datum) => { return { - stroke: isCompareLine?datum._ylabel.includes(solidLineTime) ? 'red' : 'blue':undefined, // 设置颜色 - lineDash: isCompareLine?datum._ylabel.includes(solidLineDash) ? [4, 4] : undefined:undefined, // 设置虚线 + stroke: isCompareLine?datum._ylabel.includes("总计")?"#181414":datum._ylabel.includes(solidLineDash) ? '#1890ff':'#17f485' : undefined, // 设置颜色 + lineDash: isCompareLine?datum._ylabel.includes(solidLineTime) ? undefined:[4, 4] : undefined, // 设置虚线 }; }, yAxis: { @@ -101,7 +103,35 @@ export default observer((props) => { // ]; // setLineConfig({ ...lineConfig, yField, xField, annotations: avgLine }); setLineConfig({ ...lineConfig, yField, xField,}); - if (showSUM) { + if (showCompareSum) { + const _sumLine = Object.keys(byDays).reduce((r, _d) => { + const summaryVal = byDays[_d].reduce((rows, row) => + { + if (row[seriesField].includes(solidLineTime)){ + return rows + row[yField]; + } + else{ + return rows; + } + } + , 0); + const summaryCompareVal = byDays[_d].reduce((rows, row) => + { + if (row[seriesField].includes(solidLineCompareTime)){ + return rows + row[yField]; + } + else{ + return rows; + } + } + , 0); + r.push({ ...byDays[_d][0], [yField]: summaryVal, [seriesField]: solidLineTime+'总计' }); + r.push({ ...byDays[_d][0], [yField]: summaryCompareVal, [seriesField]: solidLineCompareTime+'总计' }); + return r; + }, []); + setSumSeries(_sumLine); + } + else{ const _sumLine = Object.keys(byDays).reduce((r, _d) => { const summaryVal = byDays[_d].reduce((rows, row) => rows + row[yField], 0); r.push({ ...byDays[_d][0], [yField]: summaryVal, [seriesField]: '总计' }); @@ -110,9 +140,6 @@ export default observer((props) => { // console.log(_sumLine.map((ele) => ele[yField])); setSumSeries(_sumLine); } - else{ - setSumSeries([]); - } }; const onChangeXDateFieldGroup = (value, data, avg1) => { @@ -125,8 +152,35 @@ export default observer((props) => { }, {}); // console.log(groupByDate); const _data = Object.keys(groupByDate).reduce((r, _d) => { - const summaryVal = groupByDate[_d].reduce((rows, row) => rows + row[yField], 0); - _sumLine.push({ ...groupByDate[_d][0], [yField]: summaryVal, [seriesField]: '总计' }); + if (showCompareSum) { + const summaryVal = groupByDate[_d].reduce((rows, row) => + { + if (row[seriesField].includes(solidLineTime)){ + return rows + row[yField]; + } + else{ + return rows; + } + } + , 0); + const summaryCompareVal = groupByDate[_d].reduce((rows, row) => + { + if (row[seriesField].includes(solidLineCompareTime)){ + return rows + row[yField]; + } + else{ + return rows; + } + } + , 0); + _sumLine.push({ ...groupByDate[_d][0], [yField]: summaryVal, [seriesField]: solidLineTime+'总计' }); + _sumLine.push({ ...groupByDate[_d][0], [yField]: summaryCompareVal, [seriesField]: solidLineCompareTime+'总计' }); + } + else{ + const summaryVal = groupByDate[_d].reduce((rows, row) => rows + row[yField], 0); + _sumLine.push({ ...groupByDate[_d][0], [yField]: summaryVal, [seriesField]: '总计' }); + } + const xAxisGroup = groupByDate[_d].reduce((a, v) => { (a[v[seriesField]] || (a[v[seriesField]] = [])).push(v); @@ -145,23 +199,19 @@ export default observer((props) => { // console.log('date source=====', _data); setLineChartX(value); setDataSource(_data); - if (showSUM) { - setSumSeries(_sumLine); - } - else{ - setSumSeries([]); - } + setSumSeries(_sumLine); // setAvgLine1(avg1); - const avg1Int = Math.round(avg1); - const mergedConfig = { ...lineConfig, - annotations: [ - { type: 'text', position: ['start', avg1Int], content: avg1Int, offsetX: -15, style: { fill: '#F4664A', textBaseline: 'bottom' } }, - { type: 'line', start: [-10, avg1Int], end: ['max', avg1Int], style: { stroke: '#F4664A', lineDash: [2, 2] } }, - ], - }; + // const avg1Int = Math.round(avg1); + // const mergedConfig = { ...lineConfig, + // annotations: [ + // { type: 'text', position: ['start', avg1Int], content: avg1Int, offsetX: -15, style: { fill: '#F4664A', textBaseline: 'bottom' } }, + // { type: 'line', start: [-10, avg1Int], end: ['max', avg1Int], style: { stroke: '#F4664A', lineDash: [2, 2] } }, + // ], + // }; // console.log(mergedConfig); - setLineConfig(mergedConfig); + // setLineConfig(mergedConfig); + setLineConfig(cloneDeep(line_config)); }; return (
diff --git a/src/stores/CustomerStore.js b/src/stores/CustomerStore.js index 552cdf5..6e3ed7c 100644 --- a/src/stores/CustomerStore.js +++ b/src/stores/CustomerStore.js @@ -148,6 +148,7 @@ class CustomerStore { if (isCompareRender){ this.regular_data.detail_loading = false; this.regular_data.solidLineTime=date_picker_store.start_date.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date.format(config.SMALL_DATETIME_FORMAT); + this.regular_data.solidLineCompareTime=date_picker_store.start_date_cp.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date_cp.format(config.SMALL_DATETIME_FORMAT); const dump_l = (json || []).filter(ele => ele.COLI_IsOld !== '' && ele.COLI_IsCusCommend !== '').length; this.regular_data.total_data_tips = dump_l > 0 ? `包含 ${dump_l} 条同时勾选的数据` : ''; /** 使用明细数据画图 */ @@ -288,8 +289,9 @@ class CustomerStore { data: [], data_detail: [], data_compare: [], - showSum:true, + showCompareSum:false, solidLineTime:'', + solidLineCompareTime:'', solidLineDash:'老客户推荐', isCompareLine:false, total_data_tips: '',