qiangmj / ebc-Mes

/*
 * @Author: Sakura
 * @LastEditors: Sakura
 * @FilePath: \ebc-mes\src\mes\common\siderInfoComponent\index.js
 * @Description: 生产执行内容块 --- 左侧收缩组件
 */
import React, { useEffect, useRef, useState, useContext } from "react";
import { Carousel, Row, Col, Spin, Button, Tooltip } from "antd";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import classNames from "classnames/bind";
import moment from "moment";

import * as commonBusiness from "@/components/Common/commonBusiness";
import * as commonFunc from "@/components/Common/commonFunc";
import StaticEditTable from "@/components/Common/CommonTable";
import ShowType from "@/components/Common/CommonComponent";
import ClockComponent from "./clockComponent";
import * as commonUtils from "@/utils/utils";
import * as commonConfig from "@/utils/config";

import styles from "./index.less";
import { Space } from "antd";

const iocnObj = {
  taskIcon: require("./assets/facilityIcon.png"),
  facilityIcon: require("./assets/facilityIcon.png"),
  groupIcon: require("./assets/groupIcon.png"),
  userImg: require("./assets/user.jpg")
};

const { myContext } = commonUtils;
const cx = classNames.bind(styles);

const useSiderInfoComponentEvent = props => {
  const { formData = [], app, refreshMachineDataFlag } = props;
  const { userinfo = {} } = app;
  const { iInterface } = userinfo;
  const [pageloading1, setPagesLoading1] = useState(true);

  // 初始化事件
  useEffect(
    async () => {
      if (commonUtils.isEmptyArr(formData)) return;
      let addState = {};

      const list = [
        {
          sName: "workOrderInfo",
          sGrd: iInterface === 0 ? "qz_machinedata" : "machinedata"
        }, // 工单信息
        {
          sName: "deviceTargetInfo",
          sGrd:
            iInterface === 2
              ? "elemachine1"
              : iInterface === 9
                ? "elemachine2"
                : "elemachine"
        }, // 设备及目标信息
        { sName: "employee", sGrd: "teamInfo" }, // 班组信息
        { sName: "teamShiftInfo", sGrd: "teamShiftInfo" } // 机长班次信息
      ];

      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        const { sName, sGrd } = item;
        const config = formData.find(item => item.sGrd === sGrd);
        if (config) {
          addState = {
            execListExtra: list,
            ...addState,
            ...handleGetColumnData(config, sName),
            ...(await handleGetData(config, sName))
          };
        }
      }

      addState.bFinish1 = true;

      props.onSaveState(addState, () => {
        setPagesLoading1(false);
      });
    },
    [formData.length]
  );

  // 扫码后刷新工单信息
  const { productionTableList = [] } = props;
  useEffect(
    async () => {
      if (!refreshMachineDataFlag) return;
      const tempList = {
        sName: "workOrderInfo",
        sGrd: iInterface === 0 ? "qz_machinedata" : "machinedata"
      };

      const { sName, sGrd } = tempList;
      const config = formData.find(item => item.sGrd === sGrd);
      const addState = {
        ...(await handleGetData(config, sName)),
        refreshTableList: productionTableList
      };

      props.onSaveState(addState);
    },
    [refreshMachineDataFlag]
  );

  // 获取表头数据
  const handleGetColumnData = (config, name) => {
    const column = commonFunc.getHeaderConfig(config);
    return {
      [`${name}Column`]: column,
      [`${name}Config`]: config
    };
  };

  // 获取数据集
  const handleGetData = async (config, name) => {
    const conditonValues = props.onGetSqlConditionValues(config);

    // 如果是设备及目标信息，则异步加载
    if (name === "deviceTargetInfo") {
      props.onGetDataSet({
        name: name,
        configData: config,
        condition: { sSqlCondition: { ...conditonValues } },
        isWait: false
      });
      return {};
    }

    try {
      const addState =
        (await props.onGetDataSet({
          name: name,
          configData: config,
          condition: { sSqlCondition: { ...conditonValues } },
          isWait: true
        })) || {};
      return addState;
    } catch (error) {
      console.log("=====error", error);
      return {};
    }
  };

  useEffect(() => {
    window.bChangeMachineData = true;
    return () => {
      window.bChangeMachineData = false;
    };
  }, []);

  const [changeExecInfo, setChangeExecInfo] = useState({});
  const changeExecInfoRef = useRef({});
  useEffect(() => {
    const getValue = () => {
      const changeExecInfoNew = commonUtils.getAppData("changeExecInfo");
      const { sTime } = changeExecInfoNew;
      delete changeExecInfoNew.sTime;
      if (
        JSON.stringify(changeExecInfoNew) !==
        JSON.stringify(changeExecInfoRef.current)
      ) {
        changeExecInfoRef.current = changeExecInfoNew;
        setChangeExecInfo({ ...changeExecInfoNew, sTime });
      }
    };

    getValue();
    const timer = setInterval(() => {
      getValue();
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  // 将工单信息存到全局
  const { workOrderInfoData = [] } = props;
  const [workOrderInfoDataOne = {}] = workOrderInfoData;
  const currentWorkOrderInfo = commonUtils.getAppData(
    "globalData",
    "currentWorkOrderInfo"
  );
  useEffect(
    () => {
      const globalData = commonUtils.getAppData(globalData);
      globalData.currentWorkOrderInfo = {
        ...currentWorkOrderInfo,
        ...workOrderInfoDataOne,
        ...changeExecInfo
      };
      commonUtils.setAppData("globalData", globalData);
    },
    [JSON.stringify(workOrderInfoDataOne), changeExecInfo]
  );

  // 刷新设备及目标信息
  const { refreshDeviceTargetInfo } = props;
  useEffect(
    () => {
      if (refreshDeviceTargetInfo) {
        handleRefreshDeviceTargetInfo();
      }
    },
    [refreshDeviceTargetInfo]
  );

  const handleRefreshDeviceTargetInfo = async () => {
    const { deviceTargetInfoConfig, deviceTargetInfoData = [{}] } = props;
    const conditonValues = props.onGetSqlConditionValues(
      deviceTargetInfoConfig
    );

    const addState = await props.onGetDataSet({
      name: "deviceTargetInfo",
      configData: deviceTargetInfoConfig,
      condition: { sSqlCondition: { ...conditonValues } },
      isWait: true
    });

    addState.deviceTargetInfoData = [
      { ...deviceTargetInfoData[0], ...addState.deviceTargetInfoData[0] }
    ];

    addState.refreshDeviceTargetInfo = false;
    props.onSaveState(addState);
  };

  return {
    ...props,
    pageloading1,
    changeExecInfo
  };
};

const SiderInfoComponent = baseProps => {
  const props = useSiderInfoComponentEvent(baseProps);
  const workLoading = commonFunc.showLocalMessage(props, 'workLoading', '工单数据加载中...');
  const waitWorkLoading = commonFunc.showLocalMessage(props, 'waitWorkLoading', '工单数据加载中...');
  const leftClass = cx({
    siderInfoComponent: true
  });

  return (
    <myContext.Provider
      value={{
        props
      }}
    >
      <div className={leftClass}>
        {props.pageloading1 ? (
          <div className="mesPageloadingDiv">
            <Spin
              spinning={props.pageloading1}
              size="large"
              tip={workLoading}
            />
          </div>
        ) : (
          <CommonInfoComponent {...baseProps} />
        )}
      </div>
    </myContext.Provider>
  );
};

const CommonInfoComponent = props => {
  return (
    <div className="commonInfo">
      <WorkOrderTypeComponent />
      <DeviceTargetInfoComponent />
      {/* <TeamInfoComponent /> */}
    </div>
  );
};

// 工单类型
const WorkOrderTypeComponent = () => {
  const { props } = useContext(myContext);
  const {
    workOrderInfoConfig = {},
    workOrderInfoData = [],
    changeExecInfo = {}
  } = props;

  const ref = useRef(null);
  const carouselRef = useRef(null);
  const [contentHeight, setContentHeight] = useState(0);
  useEffect(() => {
    const handleSetHeight = () => {
      if (ref.current) {
        const oCarousel = ref.current.querySelector(".ant-carousel");
        const { height } = oCarousel.getBoundingClientRect();
        setContentHeight(height - 8);
      }
    };
    handleSetHeight();
    window.addEventListener("resize", handleSetHeight);
    return () => {
      window.removeEventListener("resize", handleSetHeight);
    };
  }, []);

  const timer = useRef(null);
  const [pageSize, setPageSize] = useState(1);
  useEffect(
    () => {
      clearTimeout(timer.current);
      timer.current = null;
      timer.current = setTimeout(() => {
        let pageSize = Math.floor(contentHeight / 36);
        pageSize = Math.max(pageSize, 1);
        setPageSize(pageSize);
      }, 200);
    },
    [contentHeight]
  );

  const [showConfig, setShowConfig] = useState([]);
  useEffect(
    () => {
      const { gdsconfigformslave = [] } = workOrderInfoConfig;
      const showConfig = gdsconfigformslave.filter(
        item =>
          item.sName && item.bControl && item.sControlName.indexOf("Btn") === -1
      );

      setShowConfig(showConfig);
    },
    [props.bFinish1]
  );

  const viewRowOld = workOrderInfoData[0] || {};
  const viewRow = { ...viewRowOld, ...changeExecInfo };

  const handleGetShowTypeProps = config => {
    // const viewRow = workOrderInfoData[dataIndex] || {};
    return {
      ...commonBusiness.getShowTypes("workOrderInfo", props),
      showConfig: config,
      dataValue: viewRow[config.sName],
      enabled: false,
      bSideInfo: true
    };
  };

  const productionRef = useRef(null);
  const [productionDivId] = useState(
    `productionDivId_${commonUtils.createSid()}`
  );
  const task = commonFunc.showLocalMessage(props, 'task', '任务：工单信息');
  const specialFocus = commonFunc.showLocalMessage(props, 'specialFocus', '任务：工单信息');

  return (
    <div className={styles.workOrdertype} ref={ref}>
      <div className="mesTitle">
        <img src={iocnObj.taskIcon} />
        {task}
      </div>
      <Carousel ref={carouselRef}>
        {/* {
                workOrderInfoData.map((item,index)=>{
                return(
                        <div>
                            { showConfig.map((e,i)=>{
                                const className = cx({ mesShowType: true,odd: i % 2 === 0 });
                                return (
                                    <div className={className}>
                                        <ShowType {...handleGetShowTypeProps( e, item[e.sName] )} />
                                    </div>
                                )
                            })}
                        </div>
                )
                })
            } */}

        {new Array(Math.ceil(showConfig.length / pageSize))
          .fill("")
          .map((_, page) => {
            return (
              <div>
                {new Array(pageSize).fill("").map((_, index) => {
                  const config = showConfig[page * pageSize + index];
                  if (commonUtils.isEmptyObject(config)) {
                    return "";
                  }

                  const className = cx({
                    mesShowType: true,
                    odd: index % 2 === 0
                  });
                  // 生产进度
                  if (config.sName === "sProduction") {
                    const productionArr = commonUtils.convertStrToObj(
                      viewRow[config.sName],
                      []
                    );
                    const showValue = productionArr.map((item, i) => {
                      const { sProcessName, sState } = item;
                      let colorValue;
                      switch (
                      Number(sState) // 根据状态显示颜色
                      ) {
                        case 2:
                          colorValue = "#FF7E37"; /* 2：等待:黄色 */
                          break;
                        case 4:
                          colorValue = "#52C41A"; /* 4：已完成:绿色 */
                          break;
                        case 1:
                        case 3:
                          colorValue = "#106abe"; /* 1、3：进行中:蓝色 */
                          break;
                        default:
                          colorValue = "#000000";
                      }
                      return (
                        <>
                          <span style={{ color: colorValue }}>
                            {sProcessName}
                          </span>
                          {i < productionArr.length - 1 ? (
                            <RightOutlined
                              style={{
                                color: [1, 3].includes(sState)
                                  ? "#000"
                                  : colorValue
                              }}
                            />
                          ) : (
                            ""
                          )}
                        </>
                      );
                    });

                    return (
                      <div className={className} ref={productionRef}>
                        <Row style={{ flexWrap: "nowrap" }}>
                          <Col
                            flex={"160px"}
                            className={styles.productionTitle}
                          >
                            生产进度：
                            {/* <Button
                              type="link"
                              icon={<LeftOutlined />}
                              className={styles.productionBtnLeft}
                              onClick={() => {
                                document.querySelector(
                                  `#${productionDivId}`
                                ).scrollLeft -= 100;
                              }}
                            />
                            <Button
                              type="link"
                              icon={<RightOutlined />}
                              className={styles.productionBtnRight}
                              onClick={() => {
                                document.querySelector(
                                  `#${productionDivId}`
                                ).scrollLeft += 100;
                              }}
                            /> */}
                          </Col>
                          <Col
                            flex={1}
                            className={styles.productionContent1}
                            id={productionDivId}
                          >
                            <Tooltip
                              title={showValue}
                              color="#fff"
                              overlayInnerStyle={{ fontSize: 18 }}
                            >
                              {showValue}
                            </Tooltip>
                          </Col>
                        </Row>
                      </div>
                    );
                  } else if (config.sName === "specialMemo") {
                    return (
                      <div className={className}>
                        <Row style={{ flexWrap: "nowrap" }}>
                          <Col
                            flex={"160px"}
                            className={styles.productionTitle}
                          >
                            {specialFocus}
                          </Col>
                          <Col
                            flex={1}
                            className={styles.productionContent}
                            style={{ cursor: "not-allowed", gap: 5 }}
                          >
                            {viewRow.specialMemo
                              ? viewRow.specialMemo
                                .split(",")
                                .map(item => (
                                  <div className={styles.mesSpecial}>
                                    {item}
                                  </div>
                                ))
                              : ""}
                          </Col>
                        </Row>
                      </div>
                    );
                  } else if (config.sName === "sLabelColor") {
                    const colorList = "白粉青蓝橙绿黄红".split("");
                    let colorIndex = colorList.findIndex(
                      item => item === viewRow.sLabelColor
                    );
                    colorIndex = colorIndex === -1 ? 0 : colorIndex;
                    return (
                      <div className={className}>
                        <Row style={{ flexWrap: "nowrap" }}>
                          <Col
                            flex={"160px"}
                            className={styles.productionTitle}
                          >
                            {config.showName}:
                          </Col>
                          <Col
                            flex={1}
                            className={styles.productionContent}
                            style={{ cursor: "not-allowed", gap: 5 }}
                          >
                            <span
                              className={`noInput ${viewRow.sLabelColor
                                ? styles[`mesColor${colorIndex}`]
                                : ""
                                }`}
                            >
                              <span>{viewRow.sLabelColor}</span>
                            </span>
                          </Col>
                        </Row>
                      </div>
                    );
                  } else {
                    const showTypeProps = handleGetShowTypeProps(config);
                    return (
                      <div className={className}>
                        <ShowType {...showTypeProps} />
                      </div>
                    );
                  }
                })}
              </div>
            );
          })}
      </Carousel>
      <div className="rightBottomBtns">
        <Space>
          <LeftOutlined
            onClick={() => {
              carouselRef.current && carouselRef.current.prev();
            }}
          />
          <RightOutlined
            onClick={() => {
              carouselRef.current && carouselRef.current.next();
            }}
          />
        </Space>
      </div>
    </div>
  );
};

// 设备及目标信息
const DeviceTargetInfoComponent = () => {
  const { props } = useContext(myContext);
  const {
    deviceTargetInfoConfig = {},
    deviceTargetInfoData = [],
    changeExecInfo = {}
  } = props;
  const { gdsconfigformslave = [] } = deviceTargetInfoConfig;
  const showConfig = gdsconfigformslave.filter(
    item =>
      item.sName && item.bControl && item.sControlName.indexOf("Btn") === -1
  );

  const viewRowOld = deviceTargetInfoData[0] || {};
  const viewRow = { ...viewRowOld, ...changeExecInfo };

  const {
    sStatusName,
    dProduceHour = 0,
    bPopup = false,
    iPopDuration = 0
  } = viewRow;

  const settingId = useRef(`settingId_${commonUtils.createSid()}`);
  const timer = useRef(null);

  useEffect(
    () => {
      if (sStatusName?.includes("停") && bPopup && iPopDuration) {
        const restTime = Math.max(
          iPopDuration * 60 * 1000 - dProduceHour * 1000,
          0
        );
        clearTimeout(timer.current);
        timer.current = null;
        timer.current = setTimeout(() => {
          window.deviceTargetInfoModalAutoShow = true;
          document.getElementById(settingId.current)?.click();
        }, restTime);
      }

      return () => {
        clearTimeout(timer.current);
      };
    },
    [sStatusName]
  );

  const handleGetShowTypeProps = config => {
    return {
      ...commonBusiness.getShowTypes("deviceTargetInfo", props),
      showConfig: config,
      dataValue: viewRow[config.sName],
      enabled: false
    };
  };
  const equipmentTargetInformation = commonFunc.showLocalMessage(props, 'equipmentTargetInformation', '设备及目标信息');
  const { workOrderInfoData = [] } = props;
  const sColumnConfig = JSON.parse(workOrderInfoData[0]?.sColumnConfig || '[]');
  const visibleFieldNames = new Set(
    sColumnConfig
      .slice(1)
      .filter(col => col?.bVisible === 1)
      .map(col => col.sName)
  );
  const result = showConfig.filter(field => visibleFieldNames.has(field.sName)); // 筛选数据
  return (

    <div className={styles.deviceTargetInfo}>
        <div className="mesTitle" style={{ padding: "10px 10px 5px" }}>
          <img src={iocnObj.facilityIcon} />
          {first.showName}
        </div>
        {result.map((config, index) => {
          // if (index > 4) return "";
          // bPushDiff
          const { bPushDiff = false } = props?.app?.userinfo
          const className = cx({
            mesShowType: true,
            odd: index % 2 === 0
          });
          const showTypeProps = handleGetShowTypeProps(config);
          // if (
          //   ['dPieceDefectAQty', 'dPieceDefectBQty'].includes(config?.sName) &&
          //   !bPushDiff
          // ) {
          //   return null; // 不满足条件，不渲染
          // }
          //   'dTotalAdjust', 'dSpeed'
          if (config?.sName?.endsWith("Qty")) {
            return (
              <div className={`${className} dynamicClock`}>
                <div className={styles.clock}>
                  <ClockComponent
                    num={viewRow[config.sName]}
                    sName={config.sName}
                    {...props}
                  />
                </div>
                <Row style={{ flexWrap: "nowrap" }}>
                  <Col flex={"160px"} className={styles.dynamicNumTitle}>
                    {config.showName}：
                  </Col>
                  <Col
                    flex={1}
                    className={styles.dynamicNumContent}
                    style={{ cursor: "not-allowed" }}
                  >
                    <div className={styles.mesDynamicNum}>
                      <MesDynamicNum
                        num={viewRow[config.sName]}
                        sName={config.sName}
                      />
                    </div>
                  </Col>
                </Row>
              </div>
            );
          } else if (false && config.showName === "更新时间") {
            return (
              <div className={`${className}`}>
                <Row style={{ flexWrap: "nowrap" }}>
                  <Col flex={"160px"} className={styles.dynamicNumTitle}>
                    {config.showName}：
                  </Col>
                  <Col
                    flex={1}
                    className={styles.dynamicNumContent}
                    style={{ cursor: "not-allowed" }}
                  >
                    <div className={styles.mesDynamicNum}>
                      <CurrentTimeComponent />
                    </div>
                  </Col>
                </Row>
              </div>
            );
          } else if (config.showName === "设备状态") {
            return (
              <div className={className}>
                <ShowType {...showTypeProps} />
                <div className={styles.statusSetting}>
                  <Button
                    type="link"
                    size="large"
                    id={settingId.current}
                    onClick={() => {
                      window.deviceTargetInfoModal = true;
                      props.onTableBtnClick({
                        name: "deviceTargetInfo",
                        record: viewRow,
                        config
                      });
                    }}
                  >
                    设置
                  </Button>
                </div>
              </div>
            );
          } else {
            return (
              <div className={className}>
                <ShowType {...showTypeProps} />
              </div>
            );
          }
        })}
      </div>
  );
};

// 班组信息
const TeamInfoComponent = () => {
  const { props } = useContext(myContext);
  const rowStyle = {
    height: "100%"
  };

  const tableProps = {
    ...commonBusiness.getTableTypes("employee", {
      ...props
    }),
    footer: "hidden", // 合计栏
    // setOpterationColumn: "Y", // 操作栏
    tableProps: {
      rowSelection: null, // 显示单选框还是复选框
      AutoTableHeight: "175px" // 表格高度
    }
  };

  const teamShiftInfo = props.teamShiftInfoData?.[0] || {};
  const { sEmployeeName = "", sEmployeeNo = "" } = teamShiftInfo;

  const teamInformation = commonFunc.showLocalMessage(props, 'teamInformation', '班组信息');

  const captain = commonFunc.showLocalMessage(props, 'captain', '机长');

  const shift = commonFunc.showLocalMessage(props, 'shift', '班次');

  const classGroup = commonFunc.showLocalMessage(props, 'classGroup', '班组');

  const userinfo = props.app.userinfo || {};
  const { sShift = "", sTeamNo = "" } = userinfo;
  return (
    <div className={styles.teamInfo}>
      <div className="mesTitle">
        <img src={iocnObj.groupIcon} />
        {teamInformation}
      </div>
      <Row gutter="5" wrap={false}>
        <Col flex={"160px"}>
          <Row style={rowStyle}>
            <Col flex={1}>
              {props.app.userinfo.sJzPicturePath ? (
                <img
                  src={`${commonConfig.file_host}file/download?savePathStr=${props.app.userinfo.sJzPicturePath}&sModelsId=100&token=${props.token}`}
                  onError={event => {
                    event.target.src = iocnObj.userImg;
                  }}
                />
              ) : (
                <img src={iocnObj.userImg} />
              )}
              <div className="user">
                <span>{captain}：</span>
                <span>{sEmployeeName}</span>
              </div>
              <div>
                <span>{classGroup}：</span>
                <span>{sTeamNo}</span>
              </div>
              <div>
                <span>{shift}：</span>
                <span>{sShift == 1 ? "白班" : "夜班"}</span>
              </div>
            </Col>
          </Row>
        </Col>
        <Col flex={1}>
          <StaticEditTable {...tableProps} />
        </Col>
      </Row>
    </div>
  );
};

const MesDynamicNum = ({ num: numNew = 0, sName }) => {
  const fontColor = () => {
    if (["dTrayQty"].includes(sName)) {
      return "red";
    }
    return "#1890FF";
  };

  // 将数字转换为字符串并分割成整数和小数部分
  const parts = numNew.toString().split(".");
  // 对整数部分应用逗号分隔
  const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  // 如果有小数部分，将其与格式化的整数部分重新组合
  const decimalPart = parts.length > 1 ? "." + parts[1] : "";
  const showNum = integerPart + decimalPart;

  return (
    <span
      style={{ fontSize: 22, fontWeight: 600, color: fontColor() }}
      className={styles.MesDynamicNumItem}
      id={`MesDynamicNum_${sName}`}
    >
      {showNum}
    </span>
  );
};

const CurrentTimeComponent = () => {
  const [time, setTime] = useState(moment().format("HH:mm:ss"));
  useEffect(() => {
    const getTime = () => {
      const currentTime = moment().format("HH:mm:ss");
      setTime(currentTime);
    };

    getTime();
    const timer = setInterval(() => {
      getTime();
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <span>{time}</span>;
};

export default SiderInfoComponent;