gt_client_pad/src/pages/Home/ChemCostComparison.js

// 药耗监测
import ChartModule from '@/components/ManagementPage/chartModule';
import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import {
  getChemicalAgents,
  getComparisonData,
} from '@/services/OperationManagement';
import { queryConditionSnapshot } from '@/services/SmartOps';
import { UnityAction } from '@/utils/utils';
import { useParams, useRequest } from '@umijs/max';
import { Tabs, message } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import styles from './manage.less';

const { TabPane } = Tabs;

const referencePriceTable = {
  阻垢剂: '30.088元',
  盐酸: '0.531元',
  非氧化杀菌剂: '26.549元',
  次氯酸钠: '1.001元',
  氢氧化纳: '1.527元',
  还原剂: '4.956元',
};

const typeParams = [
  {
    // 计划吨水药耗
    type: '3',
    flag: '0',
  },
  {
    // 实际吨水药耗
    type: '3',
    flag: '1',
  },
  {
    // 计划用药量
    type: '4',
    flag: '0',
  },
  {
    // 实际用药量
    type: '4',
    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: 10 }}
          className={`password-eye ${open ? 'open' : ''}`}
        ></div>
      </PageTitle>
      <ChemCost open={open} showTip />
    </PageContent>
  );
};

export default CostComparison;

export const ChemCost = ({ open, showTip = false }) => {
  const { projectId } = useParams();

  const [chartData, setChartData] = useState([]);
  const [chemList, setChemList] = useState([]);
  const [currentChem, setCurrentChem] = useState();

  const [topValues, setTopValues] = useState({
    chemPer: 0,
    chemUser: 0,
  });
  const curMonth = dayjs().format('YYYY-MM');

  const defaultTime = {
    s_time: dayjs().subtract(1, 'years').format('YYYY-MM'),
    e_time: dayjs().format('YYYY-MM'),
  };

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

  const { data } = useRequest(getComparisonData, {
    defaultParams: [
      {
        project_id: projectId,
        start: curMonth,
        end: curMonth,
        type: 1,
        flag: 1,
      },
    ],
    formatResult(res) {
      return res[0];
    },
  });
  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 otcCost = Number(getValue(result.data.otc_cost_unit));
      let resultText = `当前药耗持平理论值 (${
        result?.data?.otc_unit_theory || 0
      }kg/m³)`;
      if (otcCost) {
        if (otcCost > result.data.otc_unit_theory) {
          resultText = `当前药耗高于理论值 (${result.data.otc_unit_theory}kg/m³)`;
        }
        if (otcCost === result.data.otc_unit_theory) {
          resultText = `当前药耗持平理论值 (${result.data.otc_unit_theory}kg/m³)`;
        }
        if (otcCost < result.data.otc_unit_theory) {
          resultText = `当前药耗低于理论值 (${result.data.otc_unit_theory}kg/m³)`;
        }
      }
      console.log({ ...result.data, resultText });
      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，不保留
    let fixed = 0;
    if (maxValue === 0) {
      return 2;
    }
    if (maxValue === 0) return fixed;
    if (maxValue < 1) {
      //maxValue + 1 防止maxValue过小自动转科学计数法
      const decimal = (maxValue + 1).toString().split('.')[1];
      const num = decimal.split('').findIndex((num) => num > 0);
      fixed = num + 3;
    } 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 [planChemPerCost, actualChemPerCost, planChem, actualChem] = result;
      const chemPerCost = { yName: 'kg/m³' };
      const chemUsed = { yName: 'kg' };
      chemPerCost.xData = [
        ...new Set(
          [
            ...planChemPerCost.map((item) => item.month),
            ...actualChemPerCost.map((item) => item.month),
          ].map((item) => item),
        ),
      ].sort();

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

      let topVals = { ...topValues };

      // 确定保留的小数点
      const chemPerCostMaxValue = [...planChemPerCost, ...actualChemPerCost]
        .map((item) => item.value)
        .reduce((a, b) => Math.max(a, b));
      const chemPerCostFixed = getFixed(chemPerCostMaxValue);
      chemPerCost.dataList = [
        {
          type: 0,
          yIndex: 1,
          name: '计划吨水药耗',
          data: chemPerCost.xData.map((month) => {
            const pItem = planChemPerCost.find((item) => item.month === month);
            if (pItem) {
              return pItem.value?.toFixed(chemPerCostFixed);
            }
            return 0;
          }),
        },
        {
          type: 0,
          yIndex: 1,
          name: '实际吨水药耗',
          data: chemPerCost.xData.map((month) => {
            const aItem = actualChemPerCost.find(
              (item) => item.month === month,
            );
            if (aItem) {
              if (month == curMonth)
                topVals.chemPer = aItem.value.toFixed(chemPerCostFixed);
              return aItem.value.toFixed(chemPerCostFixed);
            }
            return 0;
          }),
        },
      ];
      // 合并+去重+排序 两组数据中所有月份
      chemUsed.xData = [
        ...new Set(
          [
            ...planChem.map((item) => item.month),
            ...actualChem.map((item) => item.month),
          ].map((item) => item),
        ),
      ].sort();

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

      // 确定保留的小数点
      const chemUsedMaxValue = [...planChem, ...actualChem]
        .map((item) => item.value)
        .reduce((a, b) => Math.max(a, b));
      const chemUsedFixed = getFixed(chemUsedMaxValue);
      chemUsed.dataList = [
        {
          type: 3,
          yIndex: 1,
          name: '计划用药量',
          // 根据月份是否在xData内返回数据
          data: chemUsed.xData.map((month) => {
            const pItem = planChem.find((item) => item.month === month);
            if (pItem) {
              return pItem.value.toFixed(chemUsedFixed);
            }
            return 0;
          }),
        },
        {
          type: 3,
          yIndex: 1,
          name: '实际用药量',
          data: chemUsed.xData.map((month) => {
            const aItem = actualChem.find((item) => item.month === month);
            if (aItem) {
              if (month == curMonth)
                topVals.chemUser = aItem.value.toFixed(chemUsedFixed);
              return aItem.value.toFixed(chemUsedFixed);
            }
            return 0;
          }),
        },
      ];
      chemUsed.chartType = 'bar';
      setTopValues(topVals);
      setChartData([chemPerCost, chemUsed]);
    } else {
      setChartData([]);
    }
  };

  const getChemList = async () => {
    const list = await getChemicalAgents(projectId).catch(() => {
      message.error('获取数据失败');
    });
    setChemList([...list]);
    setCurrentChem(list[0]);
    typeParams.forEach((item) => {
      item.chemical_agents = list[0];
    });
  };

  const handleChemChange = (type) => {
    typeParams.forEach((item) => {
      item.chemical_agents = type;
    });
    createChartData();
  };

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

  return (
    <div className="content-tab">
      {showTip && <div className={styles.pageTip}>{snapshot?.resultText}</div>}
      <div style={{ padding: '0.2rem 0rem' }}>
        <div className="card-box">
          <div className={styles.curEnergyCost}>
            <div className={styles.item}>
              <div className={styles.value}>
                {open ? getValue(snapshot?.otc_unit || '') : '***'}
                <span className={styles.unit}>元/m³</span>
              </div>
              <div className={styles.name}>近一天吨水药成本</div>
            </div>
            <div className={styles.item}>
              <div className={styles.value}>
                {open ? data?.value.toFixed(2) : '***'}
                <span className={styles.unit}>元/m³</span>
              </div>
              <div className={styles.name}>当月吨水药成本</div>
            </div>
          </div>
        </div>

        <div className="card-box" style={{ marginTop: '0.4rem' }}>
          {/* 使用Tabs来展示所有药的标签 */}
          <div style={{ padding: '0.2rem 0.1rem' }}>
            <div className="tabs">
              {chemList?.map((item) => (
                <div
                  key={item}
                  onClick={() => {
                    setCurrentChem(item);
                    handleChemChange(item);
                  }}
                  className={`tabs-item ${currentChem == item ? 'active' : ''}`}
                >
                  {item}
                </div>
              ))}
            </div>
          </div>
          <div className={styles.curEnergyCost}>
            <div className={styles.item}>
              <div style={{ fontSize: '0.22rem', color: 'gray' }}>
                药剂参考价格：
                {open ? referencePriceTable[`${currentChem}`] : '***元'}
              </div>
              <div className={styles.value}>
                {open ? topValues.chemPer : '***'}
                <span className={styles.unit}>kg/m³</span>
              </div>
              <div className={styles.name}>当月吨水药耗</div>
            </div>
            <div className={styles.item}>
              <div className={styles.value}>
                {open ? topValues.chemUser : '***'}
                <span className={styles.unit}>kg</span>
              </div>
              <div className={styles.name}>当月药量</div>
            </div>
          </div>

          {chartData.length !== 0 && (
            <div
              style={{
                marginTop: '0.2rem',
                height: '8.8rem',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                padding: '0.4rem 0',
              }}
            >
              <div style={{ height: '3.5rem' }}>
                <ChartModule {...chartData[0]} />
              </div>

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