#

Junjie

2024-04-19 496daedc76e96c8245c586337482b0e74e881409

#

 zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerLift.jsx

New file
@@ -0,0 +1,179 @@
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>
            </>
        );
    }
}

 zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerShuttle.jsx

@@ -27,14 +27,22 @@

    const shuttleOptions = [
        {
            label: '无',
            value: 'none'
        },
        {
            label: '搜索空闲车',
            value: 'searchIdleShuttle'
        },
        {
            label: '判断小车是否在任务楼层',
            value: 'judgeShuttleCurrentTaskLev'
        },
    ];

    const shuttleOptionsChange = (list) => {
        setShuttleOper(list);
        nodeData.data.shuttleType.shuttleOper = list;
    const shuttleOptionsChange = (event) => {
        setShuttleOper(event);
        nodeData.data.shuttleType.shuttleOper = event;
    };

    const showNodeDrawer = (graph, node) => {
@@ -63,7 +71,7 @@

            if (node.data.shuttleType == null) {
                node.data.shuttleType = {
                    shuttleOper: [],//操作方法
                    shuttleOper: '',//操作方法
                }
            } else {
                const shuttleType = node.data.shuttleType;
@@ -122,7 +130,12 @@
                        <div>根节点：<Switch checkedChildren="是" unCheckedChildren="否" checked={nodeData.data.root} /></div>
                        <div>
                            操作方法：
                            <CheckboxGroup options={shuttleOptions} value={shuttleOper} onChange={shuttleOptionsChange} />
                            <Select
                                style={{ width: 240 }}
                                options={shuttleOptions}
                                value={shuttleOper}
                                onChange={shuttleOptionsChange}
                            />
                        </div>
                        <div>
                            执行类：

 zy-asrs-flow/src/components/Flow/GraphDrawer.jsx

@@ -4,6 +4,7 @@
import { GraphDrawerCrn } from "./Drawer/GraphDrawerCrn";
import { GraphDrawerDevp } from "./Drawer/GraphDrawerDevp";
import { GraphDrawerShuttle } from "./Drawer/GraphDrawerShuttle";
import { GraphDrawerLift } from "./Drawer/GraphDrawerLift";
import './css/GrapDrawer.less';

export const GraphDrawer = ({ graphRef, isReady }) => {
@@ -15,6 +16,7 @@
            <GraphDrawerCrn graphRef={graphRef} isReady={isReady} />
            <GraphDrawerDevp graphRef={graphRef} isReady={isReady} />
            <GraphDrawerShuttle graphRef={graphRef} isReady={isReady} />
            <GraphDrawerLift graphRef={graphRef} isReady={isReady} />
        </>
    );
}