gt_client_pad/src/pages/SmartOps/operationManage/CostAnalysis/CostAnalysis.js

import ChartModule from '@/components/ManagementPage/chartModule';
import {
  queryEnergyChartList,
  queryProcessSection,
} from '@/services/OperationManagement';
import { useParams, useRequest } from '@umijs/max';
import { Button, DatePicker, Table } from 'antd';
import dayjs from 'dayjs';
import SubTitle from '../../components/SubTitle';
import styles from './CostAnalysis.less';

const { RangePicker } = DatePicker;

const CostAnalysis = () => {
  const { projectId } = useParams();

  const defaultTime = {
    s_time: dayjs().subtract(7, 'day').format('YYYY-MM-DD 00:00:00'),
    e_time: dayjs().format('YYYY-MM-DD 23:59:59'),
  };

  const columns = [
    {
      title: '时间',
      dataIndex: 'data_time',
    },
    {
      title: '能耗(kWh)',
      dataIndex: 'electric',
    },
    {
      title: '药耗(kg)',
      dataIndex: 'medicine',
    },
    {
      title: '进水水量(t)',
      dataIndex: 'waterIn',
    },
    {
      title: '出水水量(t)',
      dataIndex: 'waterOut',
    },
  ];

  const { data, loading, run } = useRequest(
    (date) =>
      queryEnergyChartList({
        project_id: Number(projectId),
        start_time: date.s_time,
        end_time: date.e_time,
        order: 1,
      }),
    {
      defaultParams: [{ ...defaultTime }],
      formatResult: (data) => {
        const tempData = data.data;
        const arr = Object.values(tempData).find((arr) => arr);

        return {
          chartData: {
            yName: ['药耗(kg)', '能耗(kWh)', '水量(t)'],
            xData: arr?.map((item) => item.data_time),
            dataList: [
              {
                type: 0,
                name: '能耗',
                yIndex: 1,
                data: tempData.electric?.map((item) => item.value),
              },
              {
                type: 0,
                name: '药耗',
                data: tempData.medicine?.map((item) => item.value),
              },
              {
                type: 0,
                name: '进水水量',
                yIndex: 2,
                data: tempData.waterIn?.map((item) => item.value),
              },
              {
                type: 2,
                name: '出水水量',
                yIndex: 2,
                data: tempData.waterOut?.map((item) => item.value),
              },
            ],
          },
          tableData: tempData?.electric?.map((item, idx) => {
            return {
              key: `analy_table_${idx}`,
              // value: item.value?.toFixed(2) | '-',
              data_time: item.data_time,
              electric: formatElcData(tempData?.electric, item?.data_time),
              medicine:
                tempData.medicine
                  ?.find((cur) => cur.data_time === item.data_time)
                  ?.value?.toFixed(2) || '-',
              waterIn:
                tempData.waterIn
                  ?.find((cur) => cur.data_time === item.data_time)
                  ?.value?.toFixed(2) || '-',
              waterOut:
                tempData.waterOut
                  ?.find((cur) => cur.data_time === item.data_time)
                  ?.value?.toFixed(2) || '-',
            };
          }),
        };
      },
    },
  );

  const ProcessSectionRequest = useRequest(queryProcessSection, {
    manual: true,
    onSuccess: (data) => {
      if (data.length > 0) {
        let section;
        section = data[0];
        setTitle(section.name);
      }
    },
  });

  const formatElcData = (data, data_time) => {
    const value = data?.find((cur) => cur.data_time == data_time)?.value;
    return value === 0 ? '-' : value.toFixed(2);
  };

  const handleTimeRangeChange = (range) => {
    if (range?.length === 2) {
      run({
        s_time: dayjs(range[0]).format('YYYY-MM-DD 00:00:00'),
        e_time: dayjs(range[1]).format('YYYY-MM-DD HH:mm:ss'),
      });
    } else {
      run(defaultTime);
    }
  };

  const handleTimeBTNClick = (unit) => {
    run({
      s_time: dayjs().subtract(1, unit).format('YYYY-MM-DD 00:00:00'),
      e_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    });
  };

  return (
    <div className="card-box" style={{ padding: '0.2rem' }}>
      <div>
        <SubTitle title={'数据曲线'} fontSize="0.26rem" />
        <div className={styles.timeBtn}>
          <RangePicker inputReadOnly onChange={handleTimeRangeChange} />
          <Button
            type="primary"
            shape="round"
            onClick={() => {
              handleTimeBTNClick('day');
            }}
          >
            近一天
          </Button>
          <Button
            type="primary"
            shape="round"
            onClick={() => {
              handleTimeBTNClick('week');
            }}
          >
            近一周
          </Button>
          <Button
            type="primary"
            shape="round"
            onClick={() => {
              handleTimeBTNClick('month');
            }}
          >
            近一个月
          </Button>
        </div>
        <div
          style={{
            height: '3.5rem',
            marginBottom: '0.1rem',
            padding: '0.2rem 0',
          }}
        >
          {data?.chartData && (
            <ChartModule {...data.chartData} legend={{ right: '30%' }} />
          )}
        </div>
      </div>
      <div style={{ marginTop: '0.2rem' }}>
        <SubTitle title={'数据列表'} fontSize="0.26rem" />
        <Table
          loading={loading}
          columns={columns}
          dataSource={data?.tableData?.sort((a, b) =>
            b?.data_time?.localeCompare(a?.data_time),
          )}
        />
      </div>
    </div>
  );
};

export default CostAnalysis;