import React, { useRef, useEffect, useState } from "react";
|
import { Button, Drawer, Input, Switch, Select, Checkbox } from 'antd';
|
import { initNodeData } from "../GraphConfig";
|
|
const { TextArea } = Input;
|
const CheckboxGroup = Checkbox.Group;
|
|
export const GraphDrawerDevp = ({ graphRef, isReady }) => {
|
|
const [open, setOpen] = useState(false);
|
const [init, setInit] = useState(false);
|
const [nodeData, setNodeData] = useState(null);
|
const [codeContent, setCodeContent] = useState(null);
|
const [staStatus, setStaStatus] = useState([]);
|
const [enableStaStatus, setEnableStaStatus] = useState(false);
|
const [staHasWorkNo, setStaHasWorkNo] = useState(false);
|
const [devpWorkNo, setDevpWorkNo] = useState(null);
|
const [workNoJudgement, setWorkNoJudgement] = useState(null);
|
const [staJudgementFailExecute, setStaJudgementFailExecute] = useState(false);
|
const [writeStaNoStatus, setWriteStaNoStatus] = useState(false);
|
const [writeWorkNoStatus, setWriteWorkNoStatus] = useState(false);
|
const [writeStaNo, setWriteStaNo] = useState("");
|
const [writeWorkNo, setWriteWorkNo] = useState("");
|
const [staNo, setStaNo] = useState("");
|
const [devpNo, setDevpNo] = useState("");
|
|
const devpOptions = [
|
{
|
label: '自动',
|
value: 'auto'
|
},
|
{
|
label: '有物',
|
value: 'loading'
|
},
|
{
|
label: '可入',
|
value: 'in'
|
},
|
{
|
label: '可出',
|
value: 'out'
|
},
|
{
|
label: '工作号',
|
value: 'workNo'
|
}
|
];
|
|
const staStatusChange = (list) => {
|
setStaStatus(list);
|
nodeData.data.devpType.staStatus = list;
|
|
let hasWorkNo = false;
|
list.forEach((item) => {
|
if (item == "workNo") {
|
//存在工作号
|
hasWorkNo = true;
|
}
|
})
|
|
setStaHasWorkNo(hasWorkNo);
|
nodeData.data.devpType.hasWorkNo = hasWorkNo;
|
};
|
|
const devpWorkNoChange = (e) => {
|
setDevpWorkNo(e.target.value);
|
nodeData.data.devpType.devpWorkNo = e.target.value;
|
}
|
|
const staJudgementFailExecuteChange = (status) => {
|
setStaJudgementFailExecute(status);
|
nodeData.data.devpType.staJudgementFailExecute = status ? 'execute' : 'stop';
|
}
|
|
const writeStaNoStatusChange = (status) => {
|
setWriteStaNoStatus(status);
|
nodeData.data.devpType.writeStaNoStatus = status;
|
}
|
|
const writeWorkNoStatusChange = (status) => {
|
setWriteWorkNoStatus(status);
|
nodeData.data.devpType.writeWorkNoStatus = status;
|
}
|
|
const enableStaStatusChange = (status) => {
|
setEnableStaStatus(status);
|
nodeData.data.devpType.enableStaStatus = status;
|
}
|
|
const workNoJudgementChange = (data) => {
|
setWorkNoJudgement(data)
|
nodeData.data.devpType.workNoJudgement = data;
|
}
|
|
const staNoChange = (e) => {
|
setStaNo(e.target.value);
|
nodeData.data.devpType.staNo = e.target.value;
|
}
|
|
const showNodeDrawer = (graph, node) => {
|
if (node.data.type == "devp") {
|
setOpen(true);
|
setNodeData(node);
|
if (node.data == null) {
|
node.data = initNodeData;
|
}
|
|
if (node.data.codeContent != null) {
|
setCodeContent(node.data.codeContent);
|
}
|
|
if (node.data.devpType == null) {
|
node.data.devpType = {
|
devpNo: "",//输送线PLC
|
staNo: "",//站号
|
enableStaStatus: false,//默认关闭判断站点状态
|
staStatus: [],//判断站点状态列表
|
hasWorkNo: false,//是否存在工作号判断
|
workNoJudgement: '>',//默认判断工作号 大于号
|
devpWorkNo: 0,//默认工作号
|
staJudgementFailExecute: false,//判断失败后是否继续执行流程
|
writeStaNoStatus: false,//是否写入目标站
|
writeWorkNoStatus: false,//是否写入工作号
|
writeStaNo: "",//写入目标站数据
|
writeWorkNo: "",//写入工作号数据
|
}
|
} else {
|
const devpType = node.data.devpType;
|
setDevpNo(devpType.devpNo);
|
setStaNo(devpType.staNo);
|
setEnableStaStatus(devpType.enableStaStatus);
|
setStaStatus(devpType.staStatus);
|
setStaHasWorkNo(devpType.hasWorkNo);
|
setDevpWorkNo(devpType.devpWorkNo);
|
setWorkNoJudgement(devpType.workNoJudgement);
|
setStaJudgementFailExecute(devpType.staJudgementFailExecute);
|
setWriteWorkNoStatus(devpType.writeWorkNoStatus);
|
setWriteStaNoStatus(devpType.writeStaNoStatus);
|
setWriteWorkNo(devpType.writeWorkNo);
|
setWriteStaNo(devpType.writeStaNo);
|
}
|
}
|
};
|
|
const onNodeClose = (e) => {
|
setOpen(false);
|
setNodeData(null);
|
setCodeContent(null);
|
};
|
|
const nodeTextAreaChange = (e) => {
|
setCodeContent(e.target.value);
|
nodeData.data.codeContent = e.target.value;
|
}
|
|
const nodeDataInputChange = (e) => {
|
nodeData.label = e.target.value;
|
}
|
|
const writeWorkNoChange = (e) => {
|
setWriteWorkNo(e.target.value);
|
nodeData.data.devpType.writeWorkNo = e.target.value;
|
}
|
|
const writeStaNoChange = (e) => {
|
setWriteStaNo(e.target.value);
|
nodeData.data.devpType.writeStaNo = e.target.value;
|
}
|
|
const devpNoChange = (e) => {
|
setDevpNo(e.target.value);
|
nodeData.data.devpType.devpNo = e.target.value;
|
}
|
|
useEffect(() => {
|
if (isReady) {
|
const graph = graphRef.current;
|
|
if (!init) {
|
graph.on("node:dblclick", ({ node }) => {
|
showNodeDrawer(graph, node);
|
})
|
setInit(true);
|
}
|
}
|
})
|
|
if (nodeData) {
|
return (
|
<>
|
<Drawer title={nodeData.label} onClose={onNodeClose} open={open} size="large">
|
<div className="graphDrawerContainer">
|
<div>输送线组件</div>
|
<div>ID：{nodeData.id}</div>
|
<div>组件名：<Input defaultValue={nodeData.label} onChange={nodeDataInputChange} /></div>
|
<div>根节点：<Switch checkedChildren="是" unCheckedChildren="否" checked={nodeData.data.root} /></div>
|
<div>
|
输送线PLC：
|
<Input value={devpNo} onChange={devpNoChange} placeholder="输送线PLC" />
|
</div>
|
<div>
|
站号：
|
<Input value={staNo} onChange={staNoChange} placeholder="站号" />
|
</div>
|
<div>
|
判断站点状态：
|
<Switch value={enableStaStatus} checkedChildren="开启" unCheckedChildren="关闭" onChange={enableStaStatusChange} />
|
</div>
|
{
|
enableStaStatus ?
|
<div>
|
站点状态：
|
<CheckboxGroup options={devpOptions} value={staStatus} onChange={staStatusChange} />
|
</div>
|
|
: ''
|
}
|
|
{
|
enableStaStatus && staHasWorkNo ?
|
<div>
|
工作号判断：
|
|
<Input
|
value={devpWorkNo}
|
onChange={devpWorkNoChange}
|
addonBefore={<Select
|
onChange={workNoJudgementChange}
|
value={workNoJudgement}
|
defaultValue=">"
|
options={[
|
{ value: '>', label: '>' },
|
{ value: '>=', label: '>=' },
|
{ value: '=', label: '=' },
|
{ value: '!=', label: '!=' },
|
{ value: '<', label: '<' },
|
{ value: '<=', label: '<=' },
|
]}
|
/>} placeholder="工作号" />
|
</div>
|
: ''
|
}
|
|
{
|
enableStaStatus ?
|
<div>
|
站点判断失败：<Switch value={staJudgementFailExecute} checkedChildren="继续执行" unCheckedChildren="阻止执行" onChange={staJudgementFailExecuteChange} />
|
</div>
|
|
: ''
|
}
|
|
<div>
|
写入工作号：<Switch value={writeWorkNoStatus} checkedChildren="写入" unCheckedChildren="不写入" onChange={writeWorkNoStatusChange} />
|
{
|
writeWorkNoStatus ?
|
<Input
|
value={writeWorkNo}
|
onChange={writeWorkNoChange}
|
placeholder="工作号" />
|
: ''
|
}
|
</div>
|
|
<div>
|
写入目标站：<Switch value={writeStaNoStatus} checkedChildren="写入" unCheckedChildren="不写入" onChange={writeStaNoStatusChange} />
|
{
|
writeStaNoStatus ?
|
<Input
|
value={writeStaNo}
|
onChange={writeStaNoChange}
|
placeholder="目标站" />
|
: ''
|
}
|
</div>
|
|
{/* <div>可执行代码：</div>
|
<TextArea value={codeContent} onChange={nodeTextAreaChange} rows={10} /> */}
|
</div>
|
</Drawer>
|
</>
|
);
|
}
|
}
|
