gt_client_pad/src/pages/SmartReport/index.js

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { queryWorkReport } from '@/services/smartReport';
import { useNavigate, useParams, useRequest } from '@umijs/max';
import { ConfigProvider, DatePicker, Select, Spin } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import dayjs from 'dayjs';
import * as echarts from 'echarts';
import { useEffect, useRef, useState } from 'react';
import styles from './index.less';

const { RangePicker } = DatePicker;

const SmartReport = () => {
  const navigate = useNavigate();
  const { projectId } = useParams();
  const FORMAT = 'YYYY-MM-DD';

  const [showRange, setShowRange] = useState(false);
  const [date, setDate] = useState({
    stime: dayjs().subtract(7, 'day').format(FORMAT),
    etime: dayjs().subtract(1, 'day').format(FORMAT),
  });

  const eqDomRef = useRef(null);
  const eqChartRef = useRef(null);

  const taskDomRef = useRef(null);
  const taskChartRef = useRef(null);

  const workDomRef = useRef(null);
  const workChartRef = useRef(null);

  const workScoreDomRef = useRef(null);
  const workScoreChartRef = useRef(null);

  const {
    data = {},
    run,
    loading,
  } = useRequest(
    (date) =>
      queryWorkReport({
        project_id: projectId,
        ...date,
      }),
    {
      defaultParams: [{ project_id: projectId, ...date }],
      formatResult: (res) => {
        const data = res.data;
        return {
          ...data,
          eqData: [
            { name: '安全隐患', value: data.patrol_safe },
            { name: '工艺异常', value: data.patrol_section },
            { name: '设备异常', value: data.push_complete_task },
          ],
          taskData: [
            { name: '工况任务', value: data.mandate_type_con },
            { name: '集团任务', value: data.mandate_type_group },
            { name: '系统自检', value: data.mandate_type_pat },
            { name: '生产任务', value: data.mandate_type_pro },
          ],
          workOrderData: [
            { name: '盘点', value: data.chart_check },
            { name: '备品备件', value: data.chart_part },
            { name: '工艺工单', value: data.chart_section },
            { name: '维修工单', value: data.repair_record },
            { name: '保养工单', value: data.maintain_record },
            { name: '巡检工单', value: data.patrol_mandate_record },
            { name: '加药工单', value: data.reagent_record },
          ],
          workScoreData: [
            { name: '较差', value: data.con_level_five },
            { name: '一般', value: data.con_level_four },
            { name: '优秀', value: data.con_level_one },
            { name: '较好', value: data.con_level_three },
            { name: '良好', value: data.con_level_two },
          ],
        };
      },
    },
  );

  const handleChange = (value) => {
    const date = { ...date };
    switch (value) {
      case '1':
        date.stime = dayjs().subtract(7, 'day').format(FORMAT);
        date.etime = dayjs().subtract(1, 'day').format(FORMAT);
        setDate(date);
        setShowRange(false);
        run(date);
        break;
      case '2':
        date.stime = dayjs().subtract(1, 'month').format(FORMAT);
        date.etime = dayjs().subtract(1, 'day').format(FORMAT);
        setDate(date);
        setShowRange(false);
        run(date);
        break;
      case '3':
        setShowRange(true);
        break;
    }
  };

  const {
    ele_65,
    ele_66,
    electricity,
    in_water,
    maintain_record,
    medicine,
    out_water,
    push_optimize_task,
    push_complete_task,
    push_complete_task_per,
    push_task,
    repair_record,
    self_inspection_abnormal_task,
    self_inspection_normal_task,
    self_inspection_task,
    water_electricity,
    water_medicine,
    work_order_complete_task,
    work_order_complete_task_per,
    work_order_task,
  } = data;

  useEffect(() => {
    initData();
  }, [data]);

  useEffect(() => {
    eqChartRef.current = echarts.init(eqDomRef.current);
    taskChartRef.current = echarts.init(taskDomRef.current);
    workChartRef.current = echarts.init(workDomRef.current);
    workScoreChartRef.current = echarts.init(workScoreDomRef.current);

    return () => {
      eqChartRef.current.dispose();
      taskChartRef.current.dispose();
      workChartRef.current.dispose();
      workScoreChartRef.current.dispose();
    };
  }, []);

  const initData = () => {
    const eqOption = getPieOption(data.eqData, '异常类型统计');
    if (eqChartRef.current) eqChartRef.current.setOption(eqOption);

    const taskOption = getPieOption(data.taskData, '任务类型统计');
    if (taskChartRef.current) taskChartRef.current.setOption(taskOption);

    const workOption = getPieOption(data.workOrderData, '工况评估统计');
    if (workChartRef.current) workChartRef.current.setOption(workOption);

    const workScoreOption = getPieOption(data.workScoreData, '工况评估统计');
    if (workScoreChartRef.current)
      workScoreChartRef.current.setOption(workScoreOption);
  };

  const onChange = (value) => {
    if (!value) return;
    const date = { ...date };
    date.stime = value[0].format(FORMAT);
    date.etime = value[1].format(FORMAT);
    run(date);
    setDate(date);
  };

  const handleOnClick = () => {
    history.back();
  };

  const Box = ({ title, children }) => {
    return (
      <div className={styles.box}>
        <div className={styles.main_in}>
          <div className={styles.titleContent}>{title}</div>
          {children}
        </div>
      </div>
    );
  };

  return (
    <PageContent closeable={false}>
      <ConfigProvider locale={zhCN}>
        <PageTitle children="智慧运营报告" returnable />
        <div className={styles.head}>
          {/* <div className={styles.name}>智慧运营报告</div> */}
          <div className={styles.photo}>
            {dayjs(date.stime).format('MM月DD日')}-
            {dayjs(date.etime).format('MM月DD日')}
          </div>
          <div className={styles.headRight}>
            <div>
              时间：
              <Select
                className={styles.headRightSelect}
                defaultValue="1"
                style={{ width: 180 }}
                onChange={handleChange}
                popupClassName={styles.headRightSelect}
                options={[
                  {
                    value: '1',
                    label: '近7天',
                  },
                  {
                    value: '2',
                    label: '近30天',
                  },
                  {
                    value: '3',
                    label: '自定义时间',
                  },
                ]}
              />
            </div>
            <div>
              {showRange && <RangePicker inputReadOnly onChange={onChange} />}
            </div>
          </div>
        </div>

        <div className={styles.title}>无锡锡山水厂</div>

        <Spin spinning={loading}>
          <Box title="概览">
            <div className={styles.content}>
              <div className={styles.longWhiteBox}>
                <div className={styles.longWhiteBoxIn}>
                  累计进水：<span className={styles.value}>{in_water}</span>
                </div>
              </div>
              <div className={styles.longWhiteBox}>
                <div className={styles.longWhiteBoxIn}>
                  累计出水：<span className={styles.value}>{out_water}</span>
                </div>
              </div>
              <div className={styles.threeContent}>
                <div className={styles.threeItem}>
                  <div className={styles.value}>
                    {water_electricity}
                    <span className={styles.unit}>kwh</span>
                  </div>
                  吨水能耗
                </div>
                <div className={styles.threeItem}>
                  <div className={styles.value}>
                    {water_medicine}
                    <span className={styles.unit}>kg/m³</span>
                  </div>
                  吨水药耗
                </div>
                <div className={styles.threeItem}>
                  <div className={styles.value}>
                    {self_inspection_task}
                    <span className={styles.unit}>次</span>
                  </div>
                  系统自检次数
                </div>
              </div>
              <div className={styles.longWhiteBox}>
                <div className={styles.longWhiteBoxIn}>
                  优化建议：
                  <span className={styles.value}>
                    {push_optimize_task}
                    <span className={styles.unit}>条</span>
                  </span>
                </div>
              </div>
              <div className={styles.longWhiteBox}>
                <div className={styles.longWhiteBoxIn}>
                  任务完成：
                  <span className={styles.value}>
                    {push_complete_task}
                    <span className={styles.unit}>个</span>
                  </span>
                </div>
              </div>
              {/* <div className={styles.item}>
                优化建议： {push_optimize_task}条
              </div> */}
              {/* <div className={styles.item}>
                任务完成：{push_complete_task}个
              </div> */}
              <div className={styles.item}>
                工单完成：{work_order_complete_task}个
              </div>
              <div className={styles.item}>设备维修：{repair_record}个</div>
              <div className={styles.item}>设备保养：{maintain_record}个</div>
            </div>
          </Box>
          <Box title="水量">
            <div className={styles.content}>
              <div className={styles.item}>累计进水：{in_water}</div>
              <div className={styles.item}>累计出水：{out_water}</div>
            </div>
          </Box>

          <Box title="能耗">
            <div className={styles.content}>
              <div className={styles.item}>吨水能耗：{water_electricity}</div>
              <div className={styles.item}>累计耗电量：{electricity}kwh</div>
            </div>
          </Box>

          <Box title="药耗">
            <div className={styles.content}>
              <div className={styles.item}>吨水药耗：{water_medicine}kg/m³</div>
              <div className={styles.item}>累计用药量：{medicine}</div>
            </div>
          </Box>

          <div className={styles.box}>
            <div className={styles.main_in}>
              <div className={styles.titleContent}>系统自检</div>

              <div className={styles.threeContent}>
                <div className={styles.numItem}>
                  <div>{self_inspection_task}</div>
                  <div>自检次数</div>
                </div>
                <div className={styles.numItem}>
                  <div>{self_inspection_abnormal_task}</div>
                  <div>异常次数</div>
                </div>
                <div className={styles.numItem}>
                  <div>{self_inspection_normal_task}</div>
                  <div>正常次数</div>
                </div>
              </div>
              <div
                ref={eqDomRef}
                style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
              ></div>
              {/* <div>异常类型统计（设备异常、工艺异常、安全隐患异常）</div> */}
            </div>
          </div>

          <div className={styles.box}>
            <div className={styles.main_in}>
              <div className={styles.titleContent}>智慧运营</div>
              <div style={{ padding: '0.2rem 0.2rem 0 0.2rem' }}>
                <div className={styles.smartText}>
                  优化条数:{push_optimize_task}条
                </div>
                <div className={styles.smartText}>超滤能耗：{ele_65}</div>
                <div className={styles.smartText}>反渗透能耗：{ele_66}</div>
              </div>
              <div
                ref={workScoreDomRef}
                style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
              ></div>
            </div>
          </div>
          <div className={styles.box}>
            <div className={styles.main_in}>
              <div className={styles.titleContent}>任务工单</div>
              <div className={styles.content}>
                <div className={styles.item}>任务数量：{push_task}</div>
                <div className={styles.item}>工单数量：{work_order_task}</div>
                <div className={styles.item}>
                  任务完成数量：{push_complete_task}
                </div>
                <div className={styles.item}>
                  工单完成数量：{work_order_complete_task}
                </div>
                <div className={styles.item}>
                  任务完成率：{Number(push_complete_task_per)}%
                </div>
                <div className={styles.item}>
                  工单完成率：{Number(work_order_complete_task_per)}%
                </div>
                <div className={styles.item}>
                  <div ref={taskDomRef} style={{ height: '4rem' }}></div>
                </div>
                <div className={styles.item}>
                  <div ref={workDomRef} style={{ height: '4rem' }}></div>
                </div>
              </div>
            </div>
          </div>
          <Box title="设备维修保养">
            <div className={styles.content}>
              <div className={styles.item}>维修数量：{repair_record}</div>
              <div className={styles.item}>保养数量：{maintain_record}</div>
            </div>
          </Box>
        </Spin>
      </ConfigProvider>
    </PageContent>
  );
};
export default SmartReport;
const getPieOption = (chartData, name) => {
  const option = {
    title: {
      text: name,
      top: '92%',
      left: '50%',
      textAlign: 'center',
      textStyle: {
        color: '#000000',
        fontWeight: 'normal',
        fontSize: 18,
      },
    },
    color: [
      '#5470c6',
      '#91cc75',
      '#fac858',
      '#ee6666',
      '#73c0de',
      '#3ba272',
      '#fc8452',
      '#9a60b4',
      '#ea7ccc',
    ],
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'horizontal',
      // left: 'left',
      textStyle: {
        color: '#000000',
        fontSize: 18,
      },
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: chartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };
  return option;
};