Merge branch 'master' of http://47.97.1.152:5880/r/zy-asrs-master
 
	
	
	
	
	
	
		
		3个文件已删除
	
		
		5个文件已修改
	
		
		2 文件已重命名
	
		
		6个文件已添加
	
	
 
	
	
	
	
	
	
	
	
| New file | 
 |  |  | 
 |  |  | import React, { useRef, useEffect, useState } from "react"; | 
 |  |  | import { Button, Drawer, Input, Switch, Select } from 'antd'; | 
 |  |  | import { initNodeData } from "../GraphConfig"; | 
 |  |  |  | 
 |  |  | const { TextArea } = Input; | 
 |  |  |  | 
 |  |  | export const GraphDrawerCrn = ({ 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 classList = [ | 
 |  |  |         { value: 'crnClass', label: '堆垛机类' }, | 
 |  |  |     ]; | 
 |  |  |  | 
 |  |  |     const apiList = [ | 
 |  |  |         { value: 'load', label: '取货' }, | 
 |  |  |         { value: 'unload', label: '放货' }, | 
 |  |  |         { value: 'load_unload', label: '取放货' }, | 
 |  |  |     ]; | 
 |  |  |  | 
 |  |  |     const showNodeDrawer = (graph, node) => { | 
 |  |  |         if (node.data.type == "crn") { | 
 |  |  |             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); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     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: 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> | 
 |  |  |             </> | 
 |  |  |         ); | 
 |  |  |     } | 
 |  |  | } | 
 
| New file | 
 |  |  | 
 |  |  | import React, { useRef, useEffect, useState } from "react"; | 
 |  |  | import { Button, Drawer, Input, Switch, AutoComplete } from 'antd'; | 
 |  |  | import { CloseSquareFilled } from '@ant-design/icons'; | 
 |  |  | import { initNodeData } from "../GraphConfig"; | 
 |  |  |  | 
 |  |  | const { TextArea } = Input; | 
 |  |  |  | 
 |  |  | export const GraphDrawerEdge = ({ graphRef, isReady }) => { | 
 |  |  |  | 
 |  |  |     const [open, setOpen] = useState(false); | 
 |  |  |     const [init, setInit] = useState(false); | 
 |  |  |     const [edgeData, setEdgeData] = useState(null); | 
 |  |  |     const [codeContent, setCodeContent] = useState(null); | 
 |  |  |  | 
 |  |  |     const options = [ | 
 |  |  |         { value: 'true' }, | 
 |  |  |         { value: 'false' }, | 
 |  |  |     ]; | 
 |  |  |  | 
 |  |  |     const showEdgeDrawer = (graph, edge) => { | 
 |  |  |         setOpen(true); | 
 |  |  |         setEdgeData(edge); | 
 |  |  |         if (edge.data == null) { | 
 |  |  |             edge.data = initNodeData; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         if (edge.data.codeContent != null) { | 
 |  |  |             setCodeContent(edge.data.codeContent); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         if (edge.labels.length == 0) { | 
 |  |  |             edge.appendLabel({ | 
 |  |  |                 attrs: { | 
 |  |  |                     label: { | 
 |  |  |                         text: "" | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             }) | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const onEdgeClose = (e) => { | 
 |  |  |         setOpen(false); | 
 |  |  |         setEdgeData(null); | 
 |  |  |         setCodeContent(null); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const edgeTextAreaChange = (e) => { | 
 |  |  |         setCodeContent(e.target.value); | 
 |  |  |         edgeData.data.codeContent = e.target.value; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const edgeDataInputChange = (value) => { | 
 |  |  |         edgeData.removeLabelAt(0); | 
 |  |  |         edgeData.appendLabel({ | 
 |  |  |             attrs: { | 
 |  |  |                 label: { | 
 |  |  |                     text: value | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |         edgeData.data.logicBool = value == 'true' ? true : false; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         if (isReady) { | 
 |  |  |             const graph = graphRef.current; | 
 |  |  |  | 
 |  |  |             if (!init) { | 
 |  |  |                 graph.on("edge:dblclick", ({ edge }) => { | 
 |  |  |                     showEdgeDrawer(graph, edge); | 
 |  |  |                 }) | 
 |  |  |                 setInit(true); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     if (edgeData) { | 
 |  |  |         return ( | 
 |  |  |             <> | 
 |  |  |                 <Drawer title={edgeData.label} onClose={onEdgeClose} open={open} size="large"> | 
 |  |  |                     <div className="graphDrawerContainer"> | 
 |  |  |                         <div>ID:{edgeData.id}</div> | 
 |  |  |                         <div> | 
 |  |  |                             属性详情: | 
 |  |  |                             <AutoComplete | 
 |  |  |                                 style={{ | 
 |  |  |                                     width: 200, | 
 |  |  |                                 }} | 
 |  |  |                                 options={options} | 
 |  |  |                                 filterOption={(inputValue, option) => | 
 |  |  |                                     option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 | 
 |  |  |                                 } | 
 |  |  |                                 allowClear={{ clearIcon: <CloseSquareFilled /> }} | 
 |  |  |                                 defaultValue={edgeData.labels[0].attrs.label.text} | 
 |  |  |                                 onChange={edgeDataInputChange} | 
 |  |  |                             /> | 
 |  |  |                         </div> | 
 |  |  |                         <div>根节点:<Switch checkedChildren="是" unCheckedChildren="否" checked={edgeData.data.root} /></div> | 
 |  |  |                         <div>可执行代码:</div> | 
 |  |  |                         <TextArea value={codeContent} onChange={edgeTextAreaChange} rows={10} /> | 
 |  |  |                     </div> | 
 |  |  |                 </Drawer> | 
 |  |  |             </> | 
 |  |  |         ); | 
 |  |  |     } | 
 |  |  | } | 
 
| New file | 
 |  |  | 
 |  |  | import React, { useRef, useEffect, useState } from "react"; | 
 |  |  | import { Button, Drawer, Input, Switch } from 'antd'; | 
 |  |  | import { initNodeData } from "../GraphConfig"; | 
 |  |  |  | 
 |  |  | const { TextArea } = Input; | 
 |  |  |  | 
 |  |  | export const GraphDrawerNode = ({ graphRef, isReady }) => { | 
 |  |  |  | 
 |  |  |     const [open, setOpen] = useState(false); | 
 |  |  |     const [init, setInit] = useState(false); | 
 |  |  |     const [nodeData, setNodeData] = useState(null); | 
 |  |  |     const [codeContent, setCodeContent] = useState(null); | 
 |  |  |  | 
 |  |  |     const showNodeDrawer = (graph, node) => { | 
 |  |  |         if (node.data.type == null || node.data.type == "none") { | 
 |  |  |             setOpen(true); | 
 |  |  |             setNodeData(node); | 
 |  |  |             if (node.data == null) { | 
 |  |  |                 node.data = initNodeData; | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             if (node.data.codeContent != null) { | 
 |  |  |                 setCodeContent(node.data.codeContent); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     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; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     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>ID:{nodeData.id}</div> | 
 |  |  |                         <div>组件名:<Input defaultValue={nodeData.label} onChange={nodeDataInputChange} /></div> | 
 |  |  |                         <div>根节点:<Switch checkedChildren="是" unCheckedChildren="否" checked={nodeData.data.root} /></div> | 
 |  |  |                         <div>可执行代码:</div> | 
 |  |  |                         <TextArea value={codeContent} onChange={nodeTextAreaChange} rows={10} /> | 
 |  |  |                     </div> | 
 |  |  |                 </Drawer> | 
 |  |  |             </> | 
 |  |  |         ); | 
 |  |  |     } | 
 |  |  | } | 
 
 |  |  | 
 |  |  |                 { | 
 |  |  |                     name: 'group1', | 
 |  |  |                     title: '常用组件', | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     name: 'group2', | 
 |  |  |                     title: '逻辑组件' | 
 |  |  |                 } | 
 |  |  |             ], | 
 |  |  |         }) | 
 |  |  | 
 |  |  |             data: initNodeData, | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         const n3Data = JSON.parse(JSON.stringify(initNodeData)) | 
 |  |  |         n3Data.isLogic = true;//逻辑判断 | 
 |  |  |         const n3 = graph.createNode({ | 
 |  |  |         const crnData = JSON.parse(JSON.stringify(initNodeData)) | 
 |  |  |         crnData.type = "crn"; | 
 |  |  |         const crnStencil = graph.createNode({ | 
 |  |  |             shape: "rect", | 
 |  |  |             width: 80, | 
 |  |  |             height: 40, | 
 |  |  |             label: "堆垛机组件", | 
 |  |  |             attrs: commonGraphAttrs, | 
 |  |  |             ports: commonGraphPorts, | 
 |  |  |             data: crnData, | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         const shuttleData = JSON.parse(JSON.stringify(initNodeData)) | 
 |  |  |         shuttleData.type = "shuttle"; | 
 |  |  |         const shuttleStencil = graph.createNode({ | 
 |  |  |             shape: "rect", | 
 |  |  |             width: 80, | 
 |  |  |             height: 40, | 
 |  |  |             label: "四向车组件", | 
 |  |  |             attrs: commonGraphAttrs, | 
 |  |  |             ports: commonGraphPorts, | 
 |  |  |             data: shuttleData, | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         const liftData = JSON.parse(JSON.stringify(initNodeData)) | 
 |  |  |         liftData.type = "lift"; | 
 |  |  |         const liftStencil = graph.createNode({ | 
 |  |  |             shape: "rect", | 
 |  |  |             width: 80, | 
 |  |  |             height: 40, | 
 |  |  |             label: "提升机组件", | 
 |  |  |             attrs: commonGraphAttrs, | 
 |  |  |             ports: commonGraphPorts, | 
 |  |  |             data: liftData, | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         const devpData = JSON.parse(JSON.stringify(initNodeData)) | 
 |  |  |         devpData.type = "devp"; | 
 |  |  |         const devpStencil = graph.createNode({ | 
 |  |  |             shape: "rect", | 
 |  |  |             width: 80, | 
 |  |  |             height: 40, | 
 |  |  |             label: "输送线组件", | 
 |  |  |             attrs: commonGraphAttrs, | 
 |  |  |             ports: commonGraphPorts, | 
 |  |  |             data: devpData, | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         const logicStencilData = JSON.parse(JSON.stringify(initNodeData)) | 
 |  |  |         logicStencilData.isLogic = true;//逻辑判断 | 
 |  |  |         const logicStencil = graph.createNode({ | 
 |  |  |             shape: 'path', | 
 |  |  |             width: 100, | 
 |  |  |             height: 60, | 
 |  |  | 
 |  |  |             attrs: commonGraphAttrs, | 
 |  |  |             label: '逻辑判断', | 
 |  |  |             ports: commonGraphPorts, | 
 |  |  |             data: n3Data, | 
 |  |  |             data: logicStencilData, | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         stencil.load([n1, n2, n3], 'group1') | 
 |  |  |         stencil.load([n1, n2, crnStencil, shuttleStencil, liftStencil, devpStencil], 'group1') | 
 |  |  |         stencil.load([logicStencil], 'group2') | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     function initBind(graph) { | 
 
 |  |  | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const initGraphConnecting = { | 
 |  |  |     router: 'manhattan', | 
 |  |  |     // router: 'manhattan', | 
 |  |  |     connector: { | 
 |  |  |         name: 'rounded', | 
 |  |  |         args: { | 
 |  |  | 
 |  |  |     searchLogicId: 1,//默认逻辑id | 
 |  |  |     searchLogicBool: true,//默认逻辑id方向 | 
 |  |  |     searchIndex: 0,//默认执行优先级 | 
 |  |  |     type: "none", //组件类型 | 
 |  |  |     execClass: null,//执行类 | 
 |  |  |     execApi: null,//执行接口 | 
 |  |  | } | 
 |  |  |  | 
 |  |  | export { commonGraphPorts, commonGraphAttrs, initGraphConnecting, initNodeData } | 
 
 |  |  | 
 |  |  | import React, { useRef, useEffect, useState } from "react"; | 
 |  |  | import { Button, Drawer, Input, Switch } from 'antd'; | 
 |  |  | import { initNodeData } from "./GraphConfig"; | 
 |  |  | import './GrapDrawer.less'; | 
 |  |  |  | 
 |  |  | const { TextArea } = Input; | 
 |  |  | import { GraphDrawerNode } from "./Drawer/GraphDrawerNode"; | 
 |  |  | import { GraphDrawerEdge } from "./Drawer/GraphDrawerEdge"; | 
 |  |  | import { GraphDrawerCrn } from "./Drawer/GraphDrawerCrn"; | 
 |  |  | import './css/GrapDrawer.less'; | 
 |  |  |  | 
 |  |  | export const GraphDrawer = ({ graphRef, isReady }) => { | 
 |  |  |  | 
 |  |  |     const [open, setOpen] = useState(false); | 
 |  |  |     const [init, setInit] = useState(false); | 
 |  |  |     const [nodeData, setNodeData] = useState(null); | 
 |  |  |     const [edgeData, setEdgeData] = useState(null); | 
 |  |  |     const [codeContent, setCodeContent] = useState(null); | 
 |  |  |  | 
 |  |  |     const showNodeDrawer = (graph, node) => { | 
 |  |  |         setOpen(true); | 
 |  |  |         setNodeData(node); | 
 |  |  |         if (node.data == null) { | 
 |  |  |             node.data = initNodeData; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         if (node.data.codeContent != null) { | 
 |  |  |             setCodeContent(node.data.codeContent); | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const showEdgeDrawer = (graph, edge) => { | 
 |  |  |         setOpen(true); | 
 |  |  |         setEdgeData(edge); | 
 |  |  |         if (edge.data == null) { | 
 |  |  |             edge.data = initNodeData; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         if (edge.data.codeContent != null) { | 
 |  |  |             setCodeContent(edge.data.codeContent); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         if (edge.labels.length == 0) { | 
 |  |  |             edge.appendLabel({ | 
 |  |  |                 attrs: { | 
 |  |  |                     label: { | 
 |  |  |                         text: "" | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             }) | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const onNodeClose = (e) => { | 
 |  |  |         setOpen(false); | 
 |  |  |         setNodeData(null); | 
 |  |  |         setCodeContent(null); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const onEdgeClose = (e) => { | 
 |  |  |         setOpen(false); | 
 |  |  |         setEdgeData(null); | 
 |  |  |         setCodeContent(null); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const nodeTextAreaChange = (e) => { | 
 |  |  |         setCodeContent(e.target.value); | 
 |  |  |         nodeData.data.codeContent = e.target.value; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const edgeTextAreaChange = (e) => { | 
 |  |  |         setCodeContent(e.target.value); | 
 |  |  |         edgeData.data.codeContent = e.target.value; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const nodeDataInputChange = (e) => { | 
 |  |  |         nodeData.label = e.target.value; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const edgeDataInputChange = (e) => { | 
 |  |  |         edgeData.removeLabelAt(0); | 
 |  |  |         edgeData.appendLabel({ | 
 |  |  |             attrs: { | 
 |  |  |                 label: { | 
 |  |  |                     text: e.target.value | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |         edgeData.data.logicBool = e.target.value == 'true' ? true : false; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         if (isReady) { | 
 |  |  |             const graph = graphRef.current; | 
 |  |  |  | 
 |  |  |             if (!init) { | 
 |  |  |                 graph.on("node:dblclick", ({ node }) => { | 
 |  |  |                     showNodeDrawer(graph, node); | 
 |  |  |                 }) | 
 |  |  |                 graph.on("edge:dblclick", ({ edge }) => { | 
 |  |  |                     showEdgeDrawer(graph, edge); | 
 |  |  |                 }) | 
 |  |  |                 setInit(true); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     if (nodeData) { | 
 |  |  |         return ( | 
 |  |  |             <> | 
 |  |  |                 <Drawer title={nodeData.label} onClose={onNodeClose} open={open} size="large"> | 
 |  |  |                     <div className="graphDrawerContainer"> | 
 |  |  |                         <div>ID:{nodeData.id}</div> | 
 |  |  |                         <div>组件名:<Input defaultValue={nodeData.label} onChange={nodeDataInputChange} /></div> | 
 |  |  |                         <div>根节点:<Switch checkedChildren="是" unCheckedChildren="否" checked={nodeData.data.root} /></div> | 
 |  |  |                         <div>可执行代码:</div> | 
 |  |  |                         <TextArea value={codeContent} onChange={nodeTextAreaChange} rows={10} /> | 
 |  |  |                     </div> | 
 |  |  |                 </Drawer> | 
 |  |  |             <GraphDrawerNode graphRef={graphRef} isReady={isReady} /> | 
 |  |  |             <GraphDrawerEdge graphRef={graphRef} isReady={isReady} /> | 
 |  |  |             <GraphDrawerCrn graphRef={graphRef} isReady={isReady} /> | 
 |  |  |             </> | 
 |  |  |         ); | 
 |  |  |     } else if (edgeData) { | 
 |  |  |         return ( | 
 |  |  |             <> | 
 |  |  |                 <Drawer title={edgeData.label} onClose={onEdgeClose} open={open} size="large"> | 
 |  |  |                     <div className="graphDrawerContainer"> | 
 |  |  |                         <div>ID:{edgeData.id}</div> | 
 |  |  |                         <div>属性详情:<Input defaultValue={edgeData.labels[0].attrs.label.text} onChange={edgeDataInputChange} /></div> | 
 |  |  |                         <div>根节点:<Switch checkedChildren="是" unCheckedChildren="否" checked={edgeData.data.root} /></div> | 
 |  |  |                         <div>可执行代码:</div> | 
 |  |  |                         <TextArea value={codeContent} onChange={edgeTextAreaChange} rows={10} /> | 
 |  |  |                     </div> | 
 |  |  |                 </Drawer> | 
 |  |  |             </> | 
 |  |  |         ); | 
 |  |  |     } | 
 |  |  | } | 
 
 |  |  | 
 |  |  | import { Button, message, Modal } from 'antd'; | 
 |  |  | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; | 
 |  |  | import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism'; | 
 |  |  | import './GraphTools.less' | 
 |  |  | import { exportDataToServer } from "../../services/flow/api"; | 
 |  |  | import './css/GraphTools.less' | 
 |  |  |  | 
 |  |  | export const GraphTools = ({ graphRef, isReady }) => { | 
 |  |  |  | 
 |  |  | 
 |  |  |                 return; | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             console.log(getDescendants(rootNode, nodes, graph)); | 
 |  |  |  | 
 |  |  |             const codeContent = transCode(rootNode, nodes, graph) | 
 |  |  |             console.log(codeContent); | 
 |  |  |             let result = sortNodes(rootNode, nodes, graph); | 
 |  |  |             exportDataToServer({ | 
 |  |  |                 data: result | 
 |  |  |             }).then((res) => { | 
 |  |  |                 console.log(res); | 
 |  |  |             }) | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const transCode = (rootNode, nodes, graph) => { | 
 |  |  |         let codeContent = ""; | 
 |  |  |     const sortNodes = (rootNode, nodes, graph) => { | 
 |  |  |         let values = nodeDFS(rootNode, nodes, graph); | 
 |  |  |         const searchNode = { | 
 |  |  |             id: 1, | 
 |  |  | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  |         let cpValues = JSON.parse(JSON.stringify(values)) | 
 |  |  |         console.log(cpValues); | 
 |  |  |  | 
 |  |  |         let searchIndex = 0; | 
 |  |  |         cpValues.forEach((value) => { | 
 |  |  | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         return cpValues; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const transCode = (rootNode, nodes, graph) => { | 
 |  |  |         let codeContent = ""; | 
 |  |  |  | 
 |  |  |         let values = nodeDFS(rootNode, nodes, graph); | 
 |  |  |         const searchNode = { | 
 |  |  |             id: 1, | 
 |  |  |             parent: null, | 
 |  |  |             logicBool: true | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  |         let cpValues = JSON.parse(JSON.stringify(values)) | 
 |  |  |  | 
 |  |  |         let searchIndex = 0; | 
 |  |  |         cpValues.forEach((value) => { | 
 |  |  |             if (value.data.isLogic) { | 
 |  |  |                 value.data.searchLogicId = searchNode.id; | 
 |  |  |                 value.data.searchLogicBool = searchNode.logicBool; | 
 |  |  |                 value.data.searchIndex = searchIndex++; | 
 |  |  |  | 
 |  |  |                 let tmpSearchNode = JSON.parse(JSON.stringify(searchNode)) | 
 |  |  |                 searchNode.parent = tmpSearchNode; | 
 |  |  |                 searchNode.id = value.id; | 
 |  |  |                 searchNode.logicBool = null; | 
 |  |  |                 searchIndex = 0; | 
 |  |  |             } else { | 
 |  |  |                 let id = searchNode.id; | 
 |  |  |                 let logicBool = searchNode.logicBool; | 
 |  |  |  | 
 |  |  |                 const connectedEdges = graph.getConnectedEdges(value);//取边 | 
 |  |  |                 connectedEdges.forEach((edge) => { | 
 |  |  |                     let tmpSearchNode = JSON.parse(JSON.stringify(searchNode)); | 
 |  |  |                     while (tmpSearchNode.parent != null) { | 
 |  |  |                         if (edge.source.cell == tmpSearchNode.id) { | 
 |  |  |                             logicBool = edge.data.logicBool;//更新方向 | 
 |  |  |                             searchNode.logicBool = edge.data.logicBool; | 
 |  |  |                             id = tmpSearchNode.id; | 
 |  |  |                             break; | 
 |  |  |                         } | 
 |  |  |                         tmpSearchNode = tmpSearchNode.parent; | 
 |  |  |                     } | 
 |  |  |                 }) | 
 |  |  |  | 
 |  |  |                 value.data.searchLogicId = id; | 
 |  |  |                 value.data.searchLogicBool = logicBool; | 
 |  |  |                 value.data.searchIndex = searchIndex++; | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |         console.log(cpValues); | 
 |  |  |         console.log(searchNode); | 
 |  |  |  | 
 |  |  | 
 |  |  |             obj.id = key; | 
 |  |  |             sortTmp[tmp[key].index] = obj; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         console.log(sortTmp); | 
 |  |  |  | 
 |  |  |         // 合并True和False | 
 |  |  |         sortTmp.forEach((item) => { | 
 |  |  | 
 |  |  |         return formattedCode; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // const transCode = (rootNode, nodes, graph) => { | 
 |  |  |     //     let codeContent = ""; | 
 |  |  |     //     const descendants = []; | 
 |  |  |     //     let stack = [rootNode]; | 
 |  |  |  | 
 |  |  |     //     let count = 0; | 
 |  |  |     //     while (stack.length > 0) { | 
 |  |  |     //         const current = stack.pop(); | 
 |  |  |     //         descendants.push(current); | 
 |  |  |  | 
 |  |  |     //         const children = getChildren(current, nodes, graph); | 
 |  |  |     //         stack.push(...children); | 
 |  |  |  | 
 |  |  |     //         // 输出代码 | 
 |  |  |     //         if (!current.data.isLogic) { | 
 |  |  |     //             const connectedEdges = graph.getConnectedEdges(current);//取边 | 
 |  |  |     //             connectedEdges.forEach((edge) => { | 
 |  |  |     //                 //过滤从自身节点出去的边 | 
 |  |  |     //                 if(edge.source.cell != current.id){ | 
 |  |  |     //                     //取上一节点 | 
 |  |  |     //                     let lastNode = null; | 
 |  |  |     //                     nodes.forEach((node) => { | 
 |  |  |     //                         if(node.id == edge.source.cell){ | 
 |  |  |     //                             lastNode = node; | 
 |  |  |     //                         } | 
 |  |  |     //                     }) | 
 |  |  |  | 
 |  |  |     //                     if(lastNode != null) { | 
 |  |  |     //                         //判断节点是否逻辑节点 | 
 |  |  |     //                         if(lastNode.data.isLogic){ | 
 |  |  |     //                             console.log(lastNode); | 
 |  |  |     //                             let nestedIfCode = ""; | 
 |  |  |     //                             if(lastNode.data.logicBool == 'true') { | 
 |  |  |     //                                 nestedIfCode = ` | 
 |  |  |     //                                 if (${lastNode.data.codeContent}) { | 
 |  |  |     //                                     ${current.data.codeContent} | 
 |  |  |     //                                 } | 
 |  |  |     //                                 `; | 
 |  |  |     //                             }else{ | 
 |  |  |     //                                 nestedIfCode = ` | 
 |  |  |     //                                 if (!(${lastNode.data.codeContent})) { | 
 |  |  |     //                                     ${current.data.codeContent} | 
 |  |  |     //                                 } | 
 |  |  |     //                                 `; | 
 |  |  |     //                             } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     //                             codeContent += "\n" + nestedIfCode; | 
 |  |  |     //                             console.log(codeContent); | 
 |  |  |     //                         }else{ | 
 |  |  |     //                             if (current.data.codeContent != null) { | 
 |  |  |     //                                 codeContent += "\n" + current.data.codeContent; | 
 |  |  |     //                             } | 
 |  |  |     //                         } | 
 |  |  |     //                     } | 
 |  |  |     //                 } | 
 |  |  |     //                 console.log(current); | 
 |  |  |     //             }) | 
 |  |  |     //         } else { | 
 |  |  |     //             // if (current.data.codeContent != null) { | 
 |  |  |     //             //     codeContent += "\n" + current.data.codeContent; | 
 |  |  |     //             // } | 
 |  |  |  | 
 |  |  |     //             // const connectedEdges = graph.getConnectedEdges(current); | 
 |  |  |     //             // console.log(connectedEdges); | 
 |  |  |     //             // stack = [] | 
 |  |  |     //             // let test = [] | 
 |  |  |     //             // connectedEdges.forEach((edge) => { | 
 |  |  |     //             //     nodes.forEach((item) => { | 
 |  |  |     //             //         if (item.id === edge.target.cell && item.id != current.id) { | 
 |  |  |     //             //             test.push(item); | 
 |  |  |     //             //         } | 
 |  |  |     //             //     }) | 
 |  |  |     //             // }); | 
 |  |  |     //             // console.log(test); | 
 |  |  |     //             // console.log(); | 
 |  |  |     //             // let nestedIfCode = ` | 
 |  |  |     //             // if (true}) { | 
 |  |  |     //             //     ${current.data.codeContent} | 
 |  |  |     //             // } | 
 |  |  |     //             // `; | 
 |  |  |  | 
 |  |  |     //             // codeContent += "\n" + nestedIfCode; | 
 |  |  |     //             // console.log(codeContent); | 
 |  |  |     //         } | 
 |  |  |  | 
 |  |  |     //     } | 
 |  |  |  | 
 |  |  |     //     console.log(codeContent); | 
 |  |  |     // } | 
 |  |  |  | 
 |  |  |     const nodeDFS = (node, nodes, graph) => { | 
 |  |  |         let values = []; | 
 |  |  |         if (graph) { | 
 |  |  |             const connectedEdges = graph.getConnectedEdges(node); | 
 |  |  |             const children = []; | 
 |  |  |  | 
 |  |  |             console.log(node); | 
 |  |  |             // console.log(node); | 
 |  |  |             connectedEdges.forEach((edge) => { | 
 |  |  |                 nodes.forEach((item) => { | 
 |  |  |                     if (item.id === edge.target.cell && item.id != node.id) { | 
 |  |  | 
 |  |  |                 }) | 
 |  |  |             }); | 
 |  |  |  | 
 |  |  |             console.log(connectedEdges); | 
 |  |  |             // console.log(connectedEdges); | 
 |  |  |             if (children.length != 0) { | 
 |  |  |                 console.log(children); | 
 |  |  |                 // console.log(children); | 
 |  |  |                 children.forEach((node) => { | 
 |  |  |                     console.log(node); | 
 |  |  |                     // console.log(node); | 
 |  |  |                     values.push(node); | 
 |  |  |                     values = values.concat(nodeDFS(node, nodes, graph)) | 
 |  |  |                 }) | 
 |  |  | 
 |  |  |                 </Button> | 
 |  |  |             </div> | 
 |  |  |  | 
 |  |  |             <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}> | 
 |  |  |             <Modal title="预览代码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}> | 
 |  |  |                 <SyntaxHighlighter language="java" style={solarizedlight}> | 
 |  |  |                     {preCode} | 
 |  |  |                 </SyntaxHighlighter> | 
 
| New file | 
 |  |  | 
 |  |  | import { request } from '@umijs/max'; | 
 |  |  | import React from 'react'; | 
 |  |  |  | 
 |  |  | export function exportDataToServer(data) { | 
 |  |  |     return request('/flow/analysisExportData', { | 
 |  |  |         data: data, | 
 |  |  |         method: 'POST' | 
 |  |  |     }); | 
 |  |  | } | 
 
 |  |  | 
 |  |  |  | 
 |  |  | export async function getRoutersInfo() { | 
 |  |  |     return getRouters().then((res) => { | 
 |  |  |         console.log(res); | 
 |  |  |         if (res.code === 200) { | 
 |  |  |             // return res.data; | 
 |  |  |             const routersInfo = convertCompatRouters(res.data); | 
 
| New file | 
 |  |  | 
 |  |  | package com.zy.asrs.wcs.asrs.controller; | 
 |  |  |  | 
 |  |  | import com.alibaba.fastjson.JSON; | 
 |  |  | import com.alibaba.fastjson.JSONArray; | 
 |  |  | import com.alibaba.fastjson.JSONObject; | 
 |  |  | import com.zy.asrs.framework.common.R; | 
 |  |  | import com.zy.asrs.wcs.asrs.entity.param.FlowLogicCodeParam; | 
 |  |  | import org.springframework.web.bind.annotation.*; | 
 |  |  |  | 
 |  |  | import java.util.ArrayList; | 
 |  |  | import java.util.HashMap; | 
 |  |  | import java.util.LinkedHashMap; | 
 |  |  | import java.util.List; | 
 |  |  |  | 
 |  |  | @RestController | 
 |  |  | @RequestMapping("/flow") | 
 |  |  | public class FlowController { | 
 |  |  |  | 
 |  |  |     @PostMapping("/analysisExportData") | 
 |  |  |     public R analysisExportData(@RequestBody HashMap<String, Object> param) { | 
 |  |  |         System.out.println(param); | 
 |  |  |         List<LinkedHashMap<String, Object>> data = (List<LinkedHashMap<String, Object>>) param.get("data"); | 
 |  |  |  | 
 |  |  |         ArrayList<FlowLogicCodeParam> list = new ArrayList<>(); | 
 |  |  |  | 
 |  |  |         FlowLogicCodeParam first = new FlowLogicCodeParam(); | 
 |  |  |         first.setId("1"); | 
 |  |  |         list.add(first); | 
 |  |  |         for (LinkedHashMap<String, Object> map : data) { | 
 |  |  |             LinkedHashMap<String, Object> mapData = (LinkedHashMap<String, Object>) map.get("data"); | 
 |  |  |             String id = map.get("id").toString(); | 
 |  |  |             Boolean isLogic = Boolean.parseBoolean(mapData.get("isLogic").toString()); | 
 |  |  |             String searchLogicId = mapData.get("searchLogicId").toString(); | 
 |  |  |             Boolean searchLogicBool = Boolean.parseBoolean(mapData.get("searchLogicBool").toString()); | 
 |  |  |             String codeContent = mapData.get("codeContent").toString(); | 
 |  |  |             if (isLogic) { | 
 |  |  |                 FlowLogicCodeParam flowLogicCodeParam = new FlowLogicCodeParam(); | 
 |  |  |                 flowLogicCodeParam.setId(id); | 
 |  |  |                 flowLogicCodeParam.setLogic(codeContent); | 
 |  |  |  | 
 |  |  |                 FlowLogicCodeParam last = list.get(list.size() - 1); | 
 |  |  |                 if (searchLogicBool) { | 
 |  |  |                     last.getLogicTrue().add(map); | 
 |  |  |                 }else { | 
 |  |  |                     last.getLogicFalse().add(map); | 
 |  |  |                 } | 
 |  |  |  | 
 |  |  |                 list.add(flowLogicCodeParam); | 
 |  |  |             }else { | 
 |  |  |                 for (FlowLogicCodeParam codeParam : list) { | 
 |  |  |                     if (codeParam.getId().equals(searchLogicId)) { | 
 |  |  |                         if (searchLogicBool) { | 
 |  |  |                             codeParam.getLogicTrue().add(map); | 
 |  |  |                         }else { | 
 |  |  |                             codeParam.getLogicFalse().add(map); | 
 |  |  |                         } | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         System.out.println(list); | 
 |  |  |  | 
 |  |  |         return R.ok(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  | } | 
 
| New file | 
 |  |  | 
 |  |  | package com.zy.asrs.wcs.asrs.entity.param; | 
 |  |  |  | 
 |  |  | import lombok.Data; | 
 |  |  |  | 
 |  |  | import java.util.ArrayList; | 
 |  |  | import java.util.List; | 
 |  |  | import java.util.Map; | 
 |  |  |  | 
 |  |  | @Data | 
 |  |  | public class FlowLogicCodeParam { | 
 |  |  |  | 
 |  |  |     private String id; | 
 |  |  |  | 
 |  |  |     private String logic; | 
 |  |  |  | 
 |  |  |     private List<Map<String, Object>> logicTrue = new ArrayList<>(); | 
 |  |  |  | 
 |  |  |     private List<Map<String, Object>> logicFalse = new ArrayList<>(); | 
 |  |  |  | 
 |  |  | } |