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 GraphDrawerLift = ({ graphRef, isReady }) => {
|
|
const [open, setOpen] = useState(false);
|
const [init, setInit] = useState(false);
|
const [nodeData, setNodeData] = useState(null);
|
const [codeContent, setCodeContent] = useState(null);
|
const [execClass, setExecClass] = useState(null);
|
const [execApi, setExecApi] = useState(null);
|
const [liftOper, setLiftOper] = useState([]);
|
const [sourceLev, setSourceLev] = useState(null);
|
const [targetLev, setTargetLev] = useState(null);
|
|
const classList = [
|
{ value: 'ShuttleThread', label: '提升机' },
|
];
|
|
const apiList = [
|
{ value: 'load', label: '取货' },
|
{ value: 'unload', label: '放货' },
|
{ value: 'loadAndUnload', label: '取放货' },
|
];
|
|
const liftOptions = [
|
{
|
label: '无',
|
value: 'none'
|
},
|
{
|
label: '升降',
|
value: 'move'
|
},
|
];
|
|
const sourceLevChange = (e) => {
|
setSourceLev(e.target.value);
|
nodeData.data.liftType.sourceLev = e.target.value;
|
}
|
|
const targetLevChange = (e) => {
|
setTargetLev(e.target.value);
|
nodeData.data.liftType.targetLev = e.target.value;
|
}
|
|
const liftOptionsChange = (event) => {
|
setLiftOper(event);
|
nodeData.data.liftType.liftOper = event;
|
};
|
|
const showNodeDrawer = (graph, node) => {
|
if (node.data.type == "lift") {
|
setOpen(true);
|
setNodeData(node);
|
if (node.data == null) {
|
node.data = initNodeData;
|
}
|
|
if (node.data.codeContent != null) {
|
setCodeContent(node.data.codeContent);
|
}
|
|
if (node.data.execClass != null) {
|
setExecClass(node.data.execClass);
|
} else {
|
setExecClass(null);
|
}
|
|
if (node.data.execApi != null) {
|
setExecApi(node.data.execApi);
|
} else {
|
setExecApi(null);
|
}
|
|
if (node.data.liftType == null) {
|
node.data.liftType = {
|
liftOper: '',//操作方法
|
}
|
} else {
|
const liftType = node.data.liftType;
|
setLiftOper(liftType.liftOper);
|
}
|
|
}
|
};
|
|
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 classListChange = (e) => {
|
setExecClass(e);
|
nodeData.data.execClass = e;
|
}
|
|
const apiListChange = (e) => {
|
setExecApi(e);
|
nodeData.data.execApi = e;
|
}
|
|
useEffect(() => {
|
if (isReady) {
|
const graph = graphRef.current;
|
|
if (!init) {
|
graph.on("node:dblclick", ({ node }) => {
|
showNodeDrawer(graph, node);
|
})
|
setInit(true);
|
}
|
}
|
}, [apiList])
|
|
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>
|
源层：<Input defaultValue={sourceLev} onChange={sourceLevChange} />
|
</div>
|
<div>
|
目标层：<Input defaultValue={targetLev} onChange={targetLevChange} />
|
</div>
|
<div>
|
操作方法：
|
<Select
|
style={{ width: 240 }}
|
options={liftOptions}
|
value={liftOper}
|
onChange={liftOptionsChange}
|
/>
|
</div>
|
<div>
|
执行类：
|
<Select
|
style={{ width: 120 }}
|
options={classList}
|
onChange={classListChange}
|
defaultValue={execClass}
|
/>
|
</div>
|
<div>
|
执行接口：
|
<Select
|
style={{ width: 120 }}
|
options={apiList}
|
onChange={apiListChange}
|
defaultValue={execApi}
|
/>
|
</div>
|
<div>可执行代码：</div>
|
<TextArea value={codeContent} onChange={nodeTextAreaChange} rows={10} />
|
</div>
|
</Drawer>
|
</>
|
);
|
}
|
}
|
