index.jsx

import React, { useEffect, useReducer, useRef } from "react";
import {
  Button,
  Drawer,
  Steps,
  Form,
  Popconfirm,
  Switch,
  Tabs,
  Tooltip,
  Row,
  Col,
  message,
  Card,
} from "antd";
import AutoTable from "@/components/AutoTable";
import getPrem from "@/utils/getPrem"; //权限判断fn
import InitForm from "@/components/InitForm";
import { useRequest, useModel } from "umi";
import { useInterval } from "ahooks";
import moment from "moment";
import Coltext from "@/components/Coltext";
const topleft = {
    collectionSitName: "采集站点",
    workingProcedureName: "工序名称",
  },
  middleright = {
    jobOrderNo: "派工单编号",
    scheduledProductionNum: "排产数量",
    materieCode: "物料编号",
    qualifiedNum: "合格数量",
    productionOrderNo: "生产订单编号",
    noQualifiedNum: "不合格数量",
    f1: "当前SN号/批次号",
    f2: "上线数量",
    current: "当前工序",
    status: "当前状态",
  };

const initState = {
  topleftData: {},
  time: moment().format("YYYY-MM-DD HH:mm:ss"),
  snorbatch: "",
  middlerightData: {},
  timepage: moment().format("YYYY-MM-DD HH:mm:ss"),
};
function reducer(state, action) {
  let { type } = action,
    newState = {};
  switch (type) {
    case "changeTopleft":
      newState = {
        ...state,
        topleftData: { ...action.topleftData },
      };
      break;
    case "changeTopright":
      newState = {
        ...state,
        topRightData: { ...action.topRightData },
      };
      break;
    case "changeTime":
      newState = {
        ...state,
        time: action.time,
      };
      break;
    case "close":
      newState = {
        topleftData: {},
        user: "",
        time: moment().format("YYYY-MM-DD HH:mm:ss"),
        snorbatch: "",
        middlerightData: {},
      };
      break;
  }

  return newState;
}
const Gatherprocess = (props) => {
  const {
    initialState: { currentUser },
    setInitialState,
  } = useModel("@@initialState");
  const [state, dispatch] = useReducer(reducer, initState),
    { topleftData, time, snorbatch, middlerightData, timepage } = state;
  useInterval(() => {
    dispatch({
      type: "changeTime",
      time: moment().add(1, "seconds").format("YYYY-MM-DD HH:mm:ss"),
    });
  }, 1000);
  return (
    <Card title={props.route.name}>
      <div className="spread">
        <div style={{ flex: 1, marginRight: 15 }}>
          <Row gutter={[16, 10]}>
            {Object.keys(topleft).map((item) => {
              return (
                <Coltext
                  label={topleft[item]}
                  value={topleftData[item]}
                  key={item}
                  col={{ span: 20 }}
                />
              );
            })}
            <Col>
              <Button type="primary">选择</Button>
            </Col>
          </Row>
        </div>
        <div style={{ flex: 1, textAlign: "right" }}>
          <div style={{ marginBottom: 6 }}>当前时间：{time}</div>
          <div>当前采集人：{currentUser.userName}</div>
        </div>
      </div>
      <div className="spread"></div>
      <div></div>
    </Card>
  );
};

export default Gatherprocess;