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 GraphDrawerShuttle = ({ 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 [shuttleOper, setShuttleOper] = useState([]);
|
|
const classList = [
|
{ value: 'ShuttleThread', label: '四向穿梭车' },
|
];
|
|
const apiList = [
|
{ value: 'load', label: '取货' },
|
{ value: 'unload', label: '放货' },
|
{ value: 'loadAndUnload', label: '取放货' },
|
];
|
|
const shuttleOptions = [
|
{
|
label: '无',
|
value: 'none'
|
},
|
{
|
label: '搜索空闲车',
|
value: 'searchIdleShuttle'
|
},
|
{
|
label: '判断小车是否在任务楼层',
|
value: 'judgeShuttleCurrentTaskLev'
|
},
|
];
|
|
const shuttleOptionsChange = (event) => {
|
setShuttleOper(event);
|
nodeData.data.shuttleType.shuttleOper = event;
|
};
|
|
const showNodeDrawer = (graph, node) => {
|
if (node.data.type == "shuttle") {
|
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.shuttleType == null) {
|
node.data.shuttleType = {
|
shuttleOper: '',//操作方法
|
}
|
} else {
|
const shuttleType = node.data.shuttleType;
|
setShuttleOper(shuttleType.shuttleOper);
|
}
|
|
}
|
};
|
|
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>
|
操作方法：
|
<Select
|
style={{ width: 240 }}
|
options={shuttleOptions}
|
value={shuttleOper}
|
onChange={shuttleOptionsChange}
|
/>
|
</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>
|
</>
|
);
|
}
|
}
|
