gt_client_pad/src/pages/Home/EnergyCostComparison.js

// 能耗监测
import ChartModule from '@/components/ManagementPage/chartModule';
import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { getComparisonData } from '@/services/OperationManagement';
import { queryConditionSnapshot } from '@/services/SmartOps';
import { UnityAction } from '@/utils/utils';
import { LineChartOutlined } from '@ant-design/icons';
import { history, useParams, useRequest } from '@umijs/max';
import { message } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import styles from './manage.less';

const typeParams = [
  {
    // 计划吨水电耗
    type: '5',
    flag: '0',
  },
  {
    // 实际吨水电耗
    type: '5',
    flag: '1',
  },
  {
    // 计划用电量
    type: '6',
    flag: '0',
  },
  {
    // 实际用电量
    type: '6',
    flag: '1',
  },
];

const CostComparison = () => {
  const [open, setOpen] = useState(false);

  return (
    <PageContent closeable={false}>
      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
        能耗数据
        <div
          onClick={(e) => {
            e.stopPropagation();
            setOpen(!open);
          }}
          style={{ marginLeft: '0.1rem' }}
          className={`password-eye ${open ? 'open' : ''}`}
        />
      </PageTitle>
      <EnergyCost open={open} />
    </PageContent>
  );
};

export default CostComparison;

export const EnergyCost = ({ open, detailClick }) => {
  const { projectId } = useParams();

  const [chartData, setChartData] = useState([]);
  const [curElecPerCost, setElecPerCost] = useState(0); // 当前月实际吨水电耗
  const [curElecUsed, setCurElecUsed] = useState(0); // 当前月实际用电量

  const defaultTime = {
    s_time: `${dayjs().format('YYYY')}-${dayjs().startOf('year').format('MM')}`,
    e_time: `${dayjs().format('YYYY')}-${dayjs().endOf('year').format('MM')}`,
  };

  const defaultParams = {
    project_id: projectId,
    start: defaultTime.s_time,
    end: defaultTime.e_time,
  };

  const getValue = (str) => {
    const result = str?.match(/.*?(\d+(?:\.\d+)?)\D*$/);
    if (result && result[1]) return result[1];
    return 0;
  };

  const { data: snapshot } = useRequest(queryConditionSnapshot, {
    defaultParams: [{ project_id: projectId }],
    formatResult: (result) => {
      const elec = Number(getValue(result.data.elec_unit));
      let resultText = `当前电耗持平理论值 ${
        result?.data?.elec_unit_theory || 0
      }KWh/m³`;
      if (elec) {
        if (elec > result.data.elec_unit_theory) {
          resultText = `当前电耗高于理论值 ${result.data.elec_unit_theory}KWh/m³`;
        }
        if (elec === result.data.elec_unit_theory) {
          resultText = `当前电耗持平理论值 ${result.data.elec_unit_theory}KWh/m³`;
        }
        if (elec < result.data.elec_unit_theory) {
          resultText = `当前电耗低于理论值 ${result.data.elec_unit_theory}KWh/m³`;
        }
      }
      return { ...result.data, resultText };
    },
  });

  const getChartData = () => {
    // 构建请求列表
    const queryList = [];
    for (let index = 0; index < 4; index++) {
      queryList.push(
        getComparisonData({ ...defaultParams, ...typeParams[index] }),
      );
    }
    // 获取四组数据
    return Promise.all(queryList).catch(() => {
      message.error('请求数据失败');
    });
  };

  const getFixed = (maxValue) => {
    // 如果小于1，则保留最后两位不为0的数字
    // 如果大于1小于10，则保留三位
    // 大于10，保留两位
    // 大于100，保留一位
    // 大于1000，不保留
    if (maxValue === 0) {
      return 2;
    }
    let fixed = 0;
    if (maxValue < 1) {
      const decimal = maxValue.toFixed(100).toString().split('.')[1];
      const decimalArr = decimal.split('');
      for (let index = 0; index < decimalArr.length; index++) {
        if (decimalArr[index] === '0') {
          fixed++;
        } else {
          break;
        }
      }
      fixed += 2;
    } else if (maxValue < 10) {
      fixed = 3;
    } else if (maxValue < 100) {
      fixed = 2;
    } else if (maxValue < 1000) {
      fixed = 1;
    }
    return fixed;
  };

  const createChartData = async () => {
    const result = await getChartData().catch(() => {
      message.error('获取数据失败');
    });
    if (result && result.length) {
      const [planElecPerCost, actualElecPerCost, planElecUsed, actualElecUsed] =
        result;
      const elecPerCost = { yName: 'kwh/m³' };
      const elecUsed = { yName: 'kWh' };
      elecPerCost.xData = [
        ...new Set(
          [
            ...planElecPerCost.map((item) => item.month),
            ...actualElecPerCost.map((item) => item.month),
          ].map((item) => item),
        ),
      ].sort();

      let year = `${dayjs(elecPerCost.xData[0]).year()}`;
      elecPerCost.xData = [];
      for (let index = 0; index < 12; index++) {
        elecPerCost.xData.push(`${year}-${dayjs().month(index).format('MM')}`);
      }

      // 确定保留的小数点
      const elecPerCostValue = [...planElecPerCost, ...actualElecPerCost]
        .map((item) => item.value)
        .reduce((a, b) => Math.max(a, b));
      const elecPerCostFixed = getFixed(elecPerCostValue);
      elecPerCost.dataList = [
        {
          type: 0,
          yIndex: 1,
          name: '计划吨水电耗',
          data: elecPerCost.xData.map((month) => {
            const pItem = planElecPerCost.find((item) => item.month === month);
            if (pItem) {
              return pItem.value.toFixed(elecPerCostFixed);
            }
            return 0;
          }),
        },
        {
          type: 0,
          yIndex: 1,
          name: '实际吨水电耗',
          data: elecPerCost.xData.map((month) => {
            const aItem = actualElecPerCost.find(
              (item) => item.month === month,
            );
            if (aItem) {
              return aItem.value.toFixed(elecPerCostFixed);
            }
            return 0;
          }),
        },
      ];

      elecUsed.xData = [
        ...new Set(
          [
            ...planElecUsed.map((item) => item.month),
            ...actualElecUsed.map((item) => item.month),
          ].map((item) => item),
        ),
      ].sort();

      year = `${dayjs(elecUsed.xData[0]).year()}`;
      elecUsed.xData = [];
      for (let index = 0; index < 12; index++) {
        elecUsed.xData.push(`${year}-${dayjs().month(index).format('MM')}`);
      }

      // 确定保留的小数点
      const elecUsedMaxValue = [...planElecUsed, ...actualElecUsed]
        .map((item) => item.value)
        .reduce((a, b) => Math.max(a, b));
      const elecUsedFixed = getFixed(elecUsedMaxValue);
      elecUsed.dataList = [
        {
          type: 3,
          yIndex: 1,
          name: '计划用电量',
          data: elecUsed.xData.map((month) => {
            const pItem = planElecUsed.find((item) => item.month === month);
            if (pItem) {
              return pItem.value.toFixed(elecUsedFixed);
            }
            return 0;
          }),
        },
        {
          type: 3,
          yIndex: 1,
          name: '实际用电量',
          data: elecUsed.xData.map((month) => {
            const aItem = actualElecUsed.find((item) => item.month === month);
            if (aItem) {
              return aItem.value.toFixed(elecUsedFixed);
            }
            return 0;
          }),
        },
      ];
      elecUsed.chartType = 'bar';
      setChartData([elecPerCost, elecUsed]);

      let curElecPerCost = actualElecPerCost?.find((item) =>
        dayjs().isSame(item?.month, 'month'),
      );
      if (curElecPerCost)
        setElecPerCost(curElecPerCost?.value.toFixed(elecPerCostFixed));

      let curElecUsed = actualElecUsed?.find((item) =>
        dayjs().isSame(item?.month, 'month'),
      );
      if (curElecUsed)
        setCurElecUsed(curElecUsed?.value.toFixed(elecUsedFixed));
    } else {
      setChartData([]);
    }
  };

  useEffect(() => {
    createChartData();
  }, []);

  const goEnergyDetail = () => {
    if (detailClick) {
      detailClick();
    } else {
      history.push(`/home/energy/detail/${projectId}`);
    }
  };

  return (
    <div
      style={{ padding: '0.2rem', position: 'relative', marginTop: '0.1rem' }}
    >
      <div
        style={{
          fontSize: '0.28rem',
          position: 'absolute',
          top: '-0.6rem',
          right: '0.3rem',
          display: `${detailClick ? 'none' : ''}`,
        }}
      >
        {snapshot?.resultText}
      </div>
      <div className="card-box" style={{ padding: '0.1rem 0' }}>
        <LineChartOutlined
          style={{
            fontSize: '0.4rem',
            position: 'absolute',
            right: '0.3rem',
            color: '#0139f1',
          }}
          onClick={goEnergyDetail}
        />
        <div className={styles.curEnergyCost}>
          <div
            className={styles.item}
            style={{
              borderRight: '1px solid #eaeaea',
              borderBottom: '1px solid #eaeaea',
            }}
          >
            <div className={styles.value}>
              {open ? getValue(snapshot?.elec_unit || '') : '***'}
              <span className={styles.unit}>kWh/t</span>
            </div>
            <div className={styles.name}>近一小时吨水电耗</div>
          </div>
          <div
            className={styles.item}
            style={{
              borderBottom: '1px solid #eaeaea',
            }}
          >
            <div className={styles.value}>
              {open ? getValue(snapshot?.elec || '') : '***'}
              <span className={styles.unit}>kWh</span>
            </div>
            <div className={styles.name}>近一小时实际用电量</div>
          </div>
          <div
            className={styles.item}
            style={{
              borderRight: '1px solid #eaeaea',
            }}
          >
            <div className={styles.value}>
              {open ? curElecPerCost : '***'}
              <span className={styles.unit}>kWh/t</span>
            </div>
            <div className={styles.name}>当月吨水电耗</div>
          </div>
          <div className={styles.item}>
            <div className={styles.value}>
              {open ? curElecUsed : '***'}
              <span className={styles.unit}>kWh</span>
            </div>
            <div className={styles.name}>当月实际用电量</div>
          </div>
        </div>
      </div>

      {chartData.length !== 0 && (
        <div
          className="card-box"
          style={{
            height: '9.2rem',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            padding: '0.6rem 0 0.4rem',
            marginTop: '0.1rem',
          }}
        >
          <div style={{ height: '3.5rem' }}>
            <ChartModule {...chartData[0]} />
          </div>

          <div style={{ height: '3.5rem' }}>
            <ChartModule {...chartData[1]} />
          </div>
        </div>
      )}
    </div>
  );
};