canrd-main / canrd-erp-front · Files

import { DualAxes } from '@ant-design/charts';

const OrderDualAxes = ({ data, statisticMethod, onXValueClick }) => {

  let yFiledString = 'curTime';

  if (statisticMethod === '0') {

    yFiledString = 'curMonth';

  } else {
    yFiledString = 'curTime';

  }

  const targetData = data?.targetAndTotalPaymentDtoList || [];
  const orderData = data?.orderNumberDtoList || [];

  const config = {

    data: [targetData, orderData],

    xField: yFiledString,

    yField: ['curDayTotalPayment', 'curDayTotalOrderNumber'],

    geometryOptions: [
      {
        geometry: 'line',
        seriesField: 'type',
        lineStyle: {
          lineWidth: 3,
          lineDash: [5, 5],
        },
        smooth: true,

        point: {
          shape: 'circle',
        },

      },
      {
        geometry: 'line',
        seriesField: 'name',

        point: {
          shape: 'circle',
        },

      },
    ],
  };

  const handleClick = (event) => {
    // 获取当前点击点的数据
    const pointData = event?.data?.data;

    if (pointData) {

      // 解析年份和月份
      if (yFiledString === 'curMonth') {
        const xValue = pointData['curMonth']; // 格式类似 "2025-01"
        if (typeof xValue === 'string' && xValue.includes('-')) {
          const [yearFromXValue] = xValue?.split('-'); // 提取年份部分 "2025"

          if (!yearFromXValue) {
            return;
          }

          // // 减 1 获得目标年份
          // const targetYear = String(Number(yearFromXValue) - 1); // "2024"

          // // 检查 pointData.type 是否包含目标年份
          // if (
          //   pointData?.type?.includes(targetYear) ||
          //   pointData?.name?.includes(targetYear)
          // ) {
          // 调用父组件传递的回调

          if (pointData?.name) {
            onXValueClick?.(xValue, pointData?.name);
          } else if (pointData?.type) {
            onXValueClick?.(xValue, pointData?.type);
          }

          // // 合并两个数据源
          // const allData = [...targetData, ...orderData];

          // // 筛选出当前列的所有数据
          // const columnData = allData.filter(
          //   (item) => item[yFiledString] === xValue,
          // );

          // 可选择将筛选出的数据展示到页面或以其他方式处理
          // alert(`当前列数据: ${JSON.stringify(columnData, null, 2)}`);
          // } else {
          // }

        }
      } else {
        console.warn('点击事件未携带有效数据');

      }
    }
  };

  const handleReady = (plot) => {
    // 绑定点击事件
    plot.on('element:click', handleClick);
  };

  return <DualAxes {...config} onReady={handleReady} />;

};

export default OrderDualAxes;