#

Junjie

2024-03-13 7049a9a623d3eb4cf589ad07f42db0a483df71ea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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>
            </>
        );
    }
}