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 { UnityAction } from '@/utils/utils';
import { useParams } 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 = (props) => {
  const { projectId } = useParams();

  const [open, setOpen] = useState(false);
  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().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 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/t' };
      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 (
    <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>
      <div className={styles.curEnergyCost}>
        <div className={styles.item}>
          <div className={styles.value}>
            {open ? topValues.chemPer : '***'}
            <span className={styles.unit}>kg/t</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>
      <div className="card-box" style={{ padding: '0.2rem' }}>
        {/* 使用Tabs来展示所有药的标签 */}
        <div className="tabs">
          {chemList?.map((item) => (
            <div
              key={item}
              onClick={() => {
                setCurrentChem(item);
                handleChemChange(item);
              }}
              className={`tabs-item ${currentChem == item ? 'active' : ''}`}
            >
              {item}
            </div>
          ))}
        </div>
        <div className={styles.curEnergyCost}>
          <div className={styles.item}>
            <div style={{ fontSize: '0.18rem', color: 'gray' }}>
              药剂参考价格：{referencePriceTable[`${currentChem}`]}
            </div>
            <div className={styles.value}>
              {open ? topValues.chemPer : '***'}
              <span className={styles.unit}>kg/t</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={{
              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>
    </PageContent>
  );
};

export default CostComparison;