620 lines
17 KiB
JavaScript
620 lines
17 KiB
JavaScript
import React, {
|
||
useCallback,
|
||
useRef,
|
||
useReducer,
|
||
useEffect,
|
||
useState,
|
||
useMemo,
|
||
} from "react";
|
||
import { message } from "antd";
|
||
import moment from "moment";
|
||
import Decimal from "decimal.js"
|
||
import Row from "../../../components/screen/Row";
|
||
import { FormItem } from "../FormItem";
|
||
import { Button } from "../Button";
|
||
import {
|
||
ModelSetting,
|
||
ModelBreak,
|
||
ModelOverproductionBatch,
|
||
ModelFinish,
|
||
ModelOverPrint,
|
||
} from "./ModalClient";
|
||
import { logo } from "./logo";
|
||
import { request } from "../utils";
|
||
import {
|
||
useEquipKey,
|
||
useSetting,
|
||
useMetaInfo,
|
||
useWsInfo,
|
||
useUser,
|
||
isDev,
|
||
} from "./hooks";
|
||
|
||
const headerHeight = 56;
|
||
|
||
/**
|
||
* url获取token
|
||
* 获取用户信息
|
||
* 获取权限信息
|
||
*
|
||
* url获取ip
|
||
* ip - 设置信息
|
||
* 设置信息 - 产品信息
|
||
* 设置信息 - socket 重量信息
|
||
*
|
||
* 任务状态:
|
||
* 无任务 待包装 包装中 中断 包装完成
|
||
*/
|
||
|
||
function formReducer(state, action) {
|
||
let { type, value } = action;
|
||
// console.log("action", action);
|
||
if (type === "FROM_INIT") return value;
|
||
if (type === "FROM_CHANGE") return Object.assign({}, state, value);
|
||
return state;
|
||
}
|
||
|
||
function PackagingOperation(props) {
|
||
const ModelSettingRef = useRef();
|
||
const ModelBreakRef = useRef();
|
||
const ModelOverproductionBatchRef = useRef();
|
||
const ModelFinishRef = useRef();
|
||
|
||
const [isEdit, setIsEdit] = useState(false);
|
||
|
||
const { equipKey, getEquipKey } = useEquipKey();
|
||
const { settingData, getSettingData } = useSetting(equipKey);
|
||
const [metaInfo, getMetaInfo] = useMetaInfo(settingData?.equipCode);
|
||
const [wsData] = useWsInfo(settingData?.equipCode, isEdit);
|
||
const [user, getUser] = useUser();
|
||
|
||
// 页面表单变化
|
||
const [form, dispatch] = useReducer(formReducer, {});
|
||
const onFormChange = useCallback((type, value) => {
|
||
dispatch({ type: "FROM_CHANGE", value: { [type]: value } });
|
||
}, []);
|
||
|
||
// 更新当前登录用户
|
||
useEffect(() => {
|
||
dispatch({ type: "FROM_CHANGE", value: { userName: user?.userName } });
|
||
}, [user]);
|
||
|
||
// 初始化表单
|
||
useEffect(() => {
|
||
dispatch({ type: "FROM_INIT", value: metaInfo });
|
||
getUser();
|
||
}, [metaInfo, getUser]);
|
||
|
||
// ws更新表单
|
||
useEffect(() => {
|
||
let { czzl, fczl } = wsData || {};
|
||
dispatch({ type: "FROM_CHANGE", value: { czzl, fczl } });
|
||
}, [wsData]);
|
||
|
||
// 更新净重
|
||
const netWeight = useMemo(() => {
|
||
let { bagWeight } = settingData;
|
||
let { fczl } = form;
|
||
if (isNaN(parseFloat(fczl))) return "";
|
||
if (isNaN(parseFloat(bagWeight))) return "";
|
||
let res = Decimal(fczl).sub(Decimal(bagWeight)).toNumber();
|
||
if (isNaN(res)) return "";
|
||
return res;
|
||
}, [form, settingData]);
|
||
|
||
// 更新持续时长
|
||
const [durationTime, setDurationTime] = useState(0);
|
||
useEffect(() => {
|
||
let getTime = () => {
|
||
let {
|
||
startTime,
|
||
status,
|
||
recoverDate,
|
||
interruptDate,
|
||
intrptDuration = 0,
|
||
} = metaInfo;
|
||
// console.log("metaInfo", metaInfo, {startTime, status, recoverDate, interruptDate, intrptDuration })
|
||
/**
|
||
* 无任务 “”
|
||
* 待包装 “”
|
||
* 包装中 currentDate - startTime - intrptDuration
|
||
* 中断 interruptDate - startTime - intrptDuration
|
||
* 包装完成 endTime - startTime - intrptDuration
|
||
*/
|
||
if (["no_job", "TO_BE_PACKAGED"].includes(status)) return "";
|
||
let dif = new Date(startTime).getTime() + intrptDuration * 1000;
|
||
if (status === "IN_PACKAGING") return new Date().getTime() - dif;
|
||
if (status === "INTERRUPT")
|
||
return new Date(interruptDate).getTime() - dif;
|
||
if (status === "PACKAGING_COMPLETED")
|
||
return new Date(endTime).getTime() - dif;
|
||
};
|
||
let timmer;
|
||
let run = () => {
|
||
setDurationTime(getTime());
|
||
timmer = setTimeout(() => {
|
||
run();
|
||
}, 1000);
|
||
};
|
||
run();
|
||
return () => {
|
||
clearTimeout(timmer);
|
||
};
|
||
}, [metaInfo]);
|
||
const durationTimeStr = useMemo(() => {
|
||
let time = moment.duration(durationTime);
|
||
let res = "";
|
||
let sec = time.seconds();
|
||
let min = time.minutes();
|
||
let hor = time.hours();
|
||
let day = time.days();
|
||
let m = time.months();
|
||
let y = time.years();
|
||
let flag = false;
|
||
let arr = [y, m, day, hor, min, sec];
|
||
let unt = ["年", "月", "日", "时", "分", "秒"];
|
||
arr.forEach((val, index) => {
|
||
if (val) {
|
||
flag = true;
|
||
res += val + unt[index];
|
||
} else if (flag) {
|
||
res += 0 + unt[index];
|
||
}
|
||
});
|
||
return res;
|
||
}, [durationTime]);
|
||
|
||
// 包装袋数
|
||
const [realBagNo, setRealBagNo] = useState(1);
|
||
useEffect(() => {
|
||
let { bagNo, outBagNo, outBatch } = form;
|
||
let res = 0;
|
||
if (outBatch) {
|
||
res = parseFloat(outBagNo) + 1;
|
||
} else {
|
||
res = parseFloat(bagNo) + 1;
|
||
}
|
||
setRealBagNo(isNaN(res) ? 0 : res);
|
||
}, [form.bagNo, form.outBagNo, form.outBatch]);
|
||
|
||
// 设备状态
|
||
const equipStatus = useMemo(() => {
|
||
if (form.status === "no_job") return "无任务";
|
||
if (form.status === "INTERRUPT") return "中断";
|
||
if (form.status === "TO_BE_PACKAGED") return "待包装";
|
||
if (form.status === "IN_PACKAGING") return "包装中";
|
||
if (form.status === "PACKAGING_COMPLETED") return "包装完成";
|
||
return "-";
|
||
}, [form.status]);
|
||
|
||
// 按钮启用禁用
|
||
const btnEnable = useMemo(() => {
|
||
/**
|
||
* 超产批号 ？
|
||
* 设置 - 权限
|
||
* 历史记录 - 非无任务
|
||
* 开始 - 待包装
|
||
* 打印 - 包装中
|
||
* 结束 - 包装中 中断
|
||
* 中断 - 包装中
|
||
* 编辑 - 权限 包装中
|
||
* 编辑完成 - 权限 包装中
|
||
*/
|
||
return {
|
||
overPro: true,
|
||
setting: true,
|
||
history: ["中断", "待包装", "包装中", "包装完成"].includes(equipStatus),
|
||
start: ["待包装"].includes(equipStatus),
|
||
print: ["包装中"].includes(equipStatus),
|
||
finish: ["包装中", "中断"].includes(equipStatus),
|
||
break: ["包装中"].includes(equipStatus),
|
||
edit: ["包装中"].includes(equipStatus),
|
||
};
|
||
}, [equipStatus]);
|
||
|
||
// 退出
|
||
const handleCancel = useCallback(() => {
|
||
window.parent.postMessage({ type: "logOut" }, window.config.mesHost);
|
||
}, []);
|
||
|
||
// 设置
|
||
const handleSetting = useCallback(() => {
|
||
if (equipKey) {
|
||
let settingRes = Object.assign({}, settingData || {}, { equipKey });
|
||
ModelSettingRef.current.show(settingRes, getSettingData);
|
||
}
|
||
}, [equipKey, getSettingData, settingData]);
|
||
|
||
// 超产批号
|
||
const handleOverproduct = useCallback(() => {
|
||
ModelOverproductionBatchRef.current.show(
|
||
metaInfo.workOrderCode,
|
||
(outBatch) => {
|
||
onFormChange("outBatch", outBatch);
|
||
}
|
||
);
|
||
}, [metaInfo.workOrderCode, onFormChange]);
|
||
|
||
// 历史记录
|
||
const handleHistory = useCallback(() => {
|
||
window.parent.postMessage(
|
||
{ type: "history", data: metaInfo },
|
||
window.config.mesHost
|
||
);
|
||
}, [metaInfo]);
|
||
|
||
// 开始
|
||
const handleStart = useCallback(() => {
|
||
if (metaInfo.gid)
|
||
return new Promise((resolve, reject) => {
|
||
request({
|
||
url: `${window.config.mesUrl}/prodexec/prodexec/packageEquipment/startPack`,
|
||
bodys: { gid: metaInfo.gid },
|
||
})
|
||
.then((res) => {
|
||
if (res.success) {
|
||
message.success("开始成功！");
|
||
getMetaInfo();
|
||
}
|
||
})
|
||
.finally(() => {
|
||
resolve();
|
||
});
|
||
});
|
||
}, [metaInfo.gid, getMetaInfo]);
|
||
|
||
// 打印
|
||
const ModelOverPrintRef = useRef();
|
||
const [isGT, setIsGT] = useState(false)
|
||
const handlePrint = useCallback((GT, callback) => {
|
||
if (GT === undefined) GT = isGT;
|
||
let { gid: recordGid } = metaInfo;
|
||
let { gid: setInfoGid, bagWeight } = settingData;
|
||
let {
|
||
fczl,
|
||
czzl,
|
||
outBatch,
|
||
materialCode,
|
||
productLevel,
|
||
startTime,
|
||
materialName,
|
||
workOrderCode,
|
||
} = form;
|
||
// collectValue 页面可见数据 除自定义字段外的 对象json 字符串
|
||
let collectValue = {
|
||
materialCode,
|
||
productLevel,
|
||
startTime,
|
||
materialName,
|
||
workOrderCode,
|
||
czzl,
|
||
fczl,
|
||
bagWeight,
|
||
yetWeight: netWeight,
|
||
bagNo: realBagNo,
|
||
};
|
||
let data = {
|
||
recordGid,
|
||
mark: GT? "GT": undefined,
|
||
fczl,
|
||
bagNo: realBagNo,
|
||
setInfoGid,
|
||
yetWeight: netWeight,
|
||
outBatch,
|
||
collectValue: JSON.stringify(collectValue),
|
||
};
|
||
if (recordGid)
|
||
return new Promise((resolve, reject) => {
|
||
request({
|
||
url: `${window.config.mesUrl}/prodexec/prodexec/packageEquipment/print`,
|
||
bodys: data,
|
||
})
|
||
.then((res) => {
|
||
// if (isDev) {
|
||
// if (res.message.indexOf('打印命令发送失败') > -1) {
|
||
// res = {
|
||
// success: false,
|
||
// data: "GT",
|
||
// message: "message text"
|
||
// }
|
||
// }
|
||
// }
|
||
if (res && res.success) {
|
||
message.success("打印成功！");
|
||
setRealBagNo(parseFloat(realBagNo) + 1);
|
||
} else {
|
||
if (res?.data === "GT") {
|
||
ModelOverPrintRef.current.show(res.message, (close) => {
|
||
setIsGT(true);
|
||
return handlePrint(true, close);
|
||
})
|
||
}else message.error(res?.message);
|
||
}
|
||
})
|
||
.finally(() => {
|
||
resolve();
|
||
callback && callback();
|
||
});
|
||
});
|
||
}, [metaInfo, settingData, form, netWeight, realBagNo, isGT]);
|
||
|
||
// 结束
|
||
const handleFinish = useCallback(() => {
|
||
ModelFinishRef.current.show({ gid: metaInfo.gid }, getMetaInfo);
|
||
}, [metaInfo.gid, getMetaInfo]);
|
||
|
||
// 中断
|
||
const handleBreak = useCallback(() => {
|
||
ModelBreakRef.current.show({ gid: metaInfo.gid }, getMetaInfo);
|
||
}, [metaInfo.gid, getMetaInfo]);
|
||
|
||
// 编辑
|
||
const handleEdit = useCallback(() => {
|
||
// console.log("handleEdit");
|
||
if (isEdit) {
|
||
setIsEdit(false);
|
||
} else {
|
||
setIsEdit(true);
|
||
}
|
||
}, [isEdit]);
|
||
|
||
return (
|
||
<div className="client-content">
|
||
<div className="client-content-header">
|
||
<div className="logo-box">
|
||
<img src={logo} alt="logo" className="logo-img" />
|
||
</div>
|
||
<div className="btn-box">
|
||
<div className="btn link-btn" onClick={handleCancel}>
|
||
退出
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="client-content-body">
|
||
<div className="card">
|
||
<div className="card-header">
|
||
<span className="title">产品信息</span>
|
||
<div className="extra">
|
||
<Button
|
||
title="超产批号"
|
||
ghost
|
||
onClick={handleOverproduct}
|
||
enable={btnEnable.overPro}
|
||
/>
|
||
<ModelOverproductionBatch ref={ModelOverproductionBatchRef} />
|
||
<Button
|
||
title="设置"
|
||
ghost
|
||
ruleCode="set_pack_info"
|
||
onClick={handleSetting}
|
||
enable={btnEnable.setting}
|
||
/>
|
||
<ModelSetting ref={ModelSettingRef} />
|
||
</div>
|
||
</div>
|
||
<div className="card-body">
|
||
<div className="statu-box">{equipStatus}</div>
|
||
<div className="statu-content">
|
||
<Row gutter={32}>
|
||
<Row.Col span={8}>
|
||
<FormItem value={form.materialCode} title={"产品编码"} />
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem value={form.productLevel} title={"产品型号"} />
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem value={form.startTime} title={"开始时间"} />
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem value={form.materialName} title={"产品名称"} />
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem value={form.workOrderCode} title={"产品批次号"} />
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem value={durationTimeStr} title={"持续时长"} />
|
||
</Row.Col>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="card">
|
||
<div className="card-header">
|
||
<span className="title">生产信息</span>
|
||
<div className="extra">
|
||
<Button
|
||
title="历史记录"
|
||
ghost={true}
|
||
onClick={handleHistory}
|
||
enable={btnEnable.history}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="card-body">
|
||
<Row gutter={32}>
|
||
<Row.Col span={8}>
|
||
<FormItem
|
||
value={form.czzl}
|
||
title={"毛重吨包/KG"}
|
||
horizontal={false}
|
||
type="number"
|
||
readonly={!isEdit}
|
||
onChange={(val) => onFormChange("czzl", val)}
|
||
/>
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem
|
||
value={form.fczl}
|
||
title={"复称重量吨包/KG"}
|
||
horizontal={false}
|
||
type="number"
|
||
readonly={!isEdit}
|
||
onChange={(val) => onFormChange("fczl", val)}
|
||
/>
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem
|
||
value={form.userName}
|
||
title={"复称人"}
|
||
horizontal={false}
|
||
/>
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem
|
||
value={settingData.bagWeight}
|
||
title={"包装袋重量/KG"}
|
||
horizontal={false}
|
||
/>
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem
|
||
value={netWeight}
|
||
title={"净重/KG"}
|
||
horizontal={false}
|
||
/>
|
||
</Row.Col>
|
||
<Row.Col span={8}>
|
||
<FormItem
|
||
value={realBagNo}
|
||
title={"包装袋数"}
|
||
horizontal={false}
|
||
type="number"
|
||
readonly={false}
|
||
min={1}
|
||
onChange={(val) => setRealBagNo(val)}
|
||
/>
|
||
</Row.Col>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="client-content-footer">
|
||
<Button
|
||
title="开始"
|
||
type="success"
|
||
size="large"
|
||
ruleCode="startPack"
|
||
onClick={handleStart}
|
||
enable={btnEnable.start}
|
||
/>
|
||
<Button
|
||
title="确认打印"
|
||
size="large"
|
||
ruleCode="print_pack"
|
||
onClick={handlePrint}
|
||
enable={btnEnable.print}
|
||
/>
|
||
<ModelOverPrint ref={ModelOverPrintRef}/>
|
||
<Button
|
||
title="结束"
|
||
type="danger"
|
||
size="large"
|
||
ruleCode="end_pack"
|
||
enable={btnEnable.finish}
|
||
onClick={handleFinish}
|
||
/>
|
||
<ModelFinish ref={ModelFinishRef} />
|
||
<Button
|
||
title="中断"
|
||
type="warning"
|
||
size="large"
|
||
ruleCode="interrupt_pack"
|
||
enable={btnEnable.break}
|
||
onClick={handleBreak}
|
||
/>
|
||
<ModelBreak ref={ModelBreakRef} />
|
||
<Button
|
||
title={!isEdit ? "编辑" : "编辑完成"}
|
||
type="info"
|
||
size="large"
|
||
ruleCode="eidt_fczl"
|
||
onClick={handleEdit}
|
||
enable={btnEnable.edit}
|
||
/>
|
||
</div>
|
||
<style jsx>{`
|
||
.client-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
}
|
||
.client-content-header {
|
||
height: ${headerHeight}px;
|
||
padding: 0 16px;
|
||
background: #272f3e;
|
||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
.logo-box {
|
||
float: left;
|
||
line-height: ${headerHeight}px;
|
||
}
|
||
.logo-img {
|
||
width: 175px;
|
||
height: 28px;
|
||
display: inline-block;
|
||
}
|
||
.btn-box {
|
||
float: right;
|
||
}
|
||
.btn.link-btn {
|
||
display: inline-block;
|
||
line-height: ${headerHeight}px;
|
||
padding: 0 24px;
|
||
color: white;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.client-content-footer {
|
||
background: white;
|
||
height: 96px;
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
}
|
||
.client-content-body {
|
||
background: rgb(243, 243, 243);
|
||
flex: 1;
|
||
overflow: auto;
|
||
padding: 18px 16px 0;
|
||
}
|
||
.card {
|
||
background: #ffffff;
|
||
border-radius: 4px;
|
||
margin-bottom: 16px;
|
||
padding: 24px 32px;
|
||
}
|
||
.card-header {
|
||
overflow: hidden;
|
||
}
|
||
.card-header .title {
|
||
font-size: 28px;
|
||
color: #000000 85%;
|
||
}
|
||
.card-header .extra {
|
||
float: right;
|
||
}
|
||
.card-body {
|
||
padding: 20px 0;
|
||
overflow: hidden;
|
||
}
|
||
.statu-box {
|
||
height: 112px;
|
||
width: 112px;
|
||
background: #fff7e8;
|
||
border: 1px solid #f16704;
|
||
border-radius: 6px;
|
||
line-height: 112px;
|
||
font-size: 24px;
|
||
text-align: center;
|
||
color: #faab0c;
|
||
float: left;
|
||
}
|
||
.statu-content {
|
||
margin-left: ${112 + 32}px;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default PackagingOperation;
|