gt_client_pad/src/pages/SystemDaily/index.js

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { queryDailyWorkReport } from '@/services/user';
import { useParams, useRequest } from '@umijs/max';
import { Spin } from 'antd';
import dayjs from 'dayjs';
import styles from './index.less';
const SystemDaily = (props) => {
  const { projectId } = useParams();

  const { data = {}, loading } = useRequest(queryDailyWorkReport, {
    defaultParams: [projectId],
    formatResult: (res) => {
      const data = res.data;
      const result = {
        ...data,
        task_percent:
          data.push_task !== 0 ? data.push_complete_task / data.push_task : 0,
        work_percent:
          data.work_order_task !== 0
            ? data.work_order_complete_task / data.work_order_task
            : 0,
      };
      return result;
    },
  });
  const {
    automatic_task = 0,
    push_optimize_task = 0,
    self_inspection_task = 0,
    self_inspection_normal_task = 0,
    self_inspection_abnormal_task = 0,
    push_task = 0,
    task_percent = 0,
    work_order_task = 0,
    work_percent = 0,
    user_name = '',
    user_name_count = 0,
  } = data;
  const handleOnClick = () => {
    history.back();
  };
  const renderItem = (value, unit) => {
    return (
      <>
        <span className={styles.value}>{value || 0}</span>
        <span className={styles.unit}>{unit}</span>
      </>
    );
  };
  return (
    <PageContent closeable={false}>
      <Spin spinning={loading}>
        {/* <div> */}
        <PageTitle children="系统工作日报" returnable />
        <div className={styles.time}>{dayjs().format('MM月DD日')}</div>
        {/* </div> */}
        <div className={styles.box}>
          <div className={styles.main_in}>
            <div className={styles.titleContent}>日报</div>
            <div className={styles.content}>
              <div className={styles.text}>
                执行自控指令次数：{renderItem(automatic_task, '次')}
              </div>
              <div className={styles.text}>
                推送优化建议：{renderItem(push_optimize_task, '条')}
              </div>
              <div className={styles.text}>
                系统自检次数：
                {renderItem(self_inspection_task, '条')}
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <br />
                <div className={styles.textFlex}>
                  <div className={styles.textItem}>
                    正常次数：
                    {renderItem(self_inspection_normal_task, '条')}
                  </div>
                  <div className={styles.textItem}>
                    异常次数：
                    {renderItem(self_inspection_abnormal_task, '条')}
                  </div>
                </div>
              </div>
              <div className={styles.textTwo}>
                <div className={styles.textItem}>
                  推送任务：
                  {renderItem(push_task, '条')}
                </div>
                <div className={styles.textItem}>
                  任务完成率：
                  {renderItem(task_percent, '%')}
                </div>
              </div>
              <div className={styles.textTwo}>
                <div className={styles.textItem}>
                  工单数量：
                  {renderItem(work_order_task, '条')}
                </div>{' '}
                <div className={styles.textItem}>
                  工单完成率：
                  {renderItem(work_percent, '%')}
                </div>
              </div>
              <div className={styles.text}>
                工单完成人员第一名：
                {/* <span className={styles.value}> */}
                {user_name
                  ? `${user_name}完成${user_name_count}个工单`
                  : '暂无'}
                {/* </span> */}
              </div>
            </div>
          </div>
        </div>
      </Spin>
    </PageContent>
  );
};
export default SystemDaily;