perf:老客户:添加总计对比折线；修改折线颜色

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 = () => {
 
         <Col span={24}>
           <LineWithAvg dataSource={regular_data.pivotData} loading={regular_data.detail_loading} xField={regular_data.pivotX} yField={regular_data.pivotY} 
-          seriesField='_ylabel' showSUM={regular_data.showSum} solidLineTime={regular_data.solidLineTime} solidLineDash={regular_data.solidLineDash} isCompareLine={regular_data.isCompareLine}/>
+          seriesField='_ylabel' showCompareSum={regular_data.showCompareSum} solidLineTime={regular_data.solidLineTime} solidLineCompareTime={regular_data.solidLineCompareTime}
+          solidLineDash={regular_data.solidLineDash} isCompareLine={regular_data.isCompareLine}/>
         </Col>
 
         <Col span={24}>

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) => {
+      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([]);
-    }
 
     // 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 (
     <section>

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: '',