#
Junjie
2024-03-19 eca8b5481ab1c8bad8d031416a9d106585fa429c
#
3个文件已添加
7个文件已修改
2432 ■■■■■ 已修改文件
zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerCrn.jsx 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerDevp.jsx 285 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/components/Flow/GraphComponent.jsx 1376 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/components/Flow/GraphDrawer.jsx 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/components/Flow/GraphTools.jsx 237 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/components/Flow/css/GraphTools.less 12 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/pages/asrs/flowGraph/components/edit.jsx 109 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/pages/asrs/flowGraph/index.jsx 373 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/services/flow/api.js 33 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/services/route.js 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerCrn.jsx
@@ -14,13 +14,13 @@
    const [execApi, setExecApi] = useState(null);
    const classList = [
        { value: 'crnClass', label: '堆垛机类' },
        { value: 'CrnThread', label: '堆垛机类' },
    ];
    const apiList = [
        { value: 'load', label: '取货' },
        { value: 'unload', label: '放货' },
        { value: 'load_unload', label: '取放货' },
        { value: 'loadAndUnload', label: '取放货' },
    ];
    const showNodeDrawer = (graph, node) => {
zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerDevp.jsx
New file
@@ -0,0 +1,285 @@
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 GraphDrawerDevp = ({ graphRef, isReady }) => {
    const [open, setOpen] = useState(false);
    const [init, setInit] = useState(false);
    const [nodeData, setNodeData] = useState(null);
    const [codeContent, setCodeContent] = useState(null);
    const [staStatus, setStaStatus] = useState([]);
    const [enableStaStatus, setEnableStaStatus] = useState(false);
    const [staHasWorkNo, setStaHasWorkNo] = useState(false);
    const [devpWorkNo, setDevpWorkNo] = useState(null);
    const [workNoJudgement, setWorkNoJudgement] = useState(null);
    const [staJudgementFailExecute, setStaJudgementFailExecute] = useState(false);
    const [writeStaNoStatus, setWriteStaNoStatus] = useState(false);
    const [writeWorkNoStatus, setWriteWorkNoStatus] = useState(false);
    const [writeStaNo, setWriteStaNo] = useState("");
    const [writeWorkNo, setWriteWorkNo] = useState("");
    const [staNo, setStaNo] = useState("");
    const [devpNo, setDevpNo] = useState("");
    const devpOptions = [
        {
            label: '自动',
            value: 'auto'
        },
        {
            label: '有物',
            value: 'loading'
        },
        {
            label: '可入',
            value: 'in'
        },
        {
            label: '可出',
            value: 'out'
        },
        {
            label: '工作号',
            value: 'workNo'
        }
    ];
    const staStatusChange = (list) => {
        setStaStatus(list);
        nodeData.data.devpType.staStatus = list;
        let hasWorkNo = false;
        list.forEach((item) => {
            if (item == "workNo") {
                //存在工作号
                hasWorkNo = true;
            }
        })
        setStaHasWorkNo(hasWorkNo);
        nodeData.data.devpType.hasWorkNo = hasWorkNo;
    };
    const devpWorkNoChange = (e) => {
        setDevpWorkNo(e.target.value);
        nodeData.data.devpType.devpWorkNo = e.target.value;
    }
    const staJudgementFailExecuteChange = (status) => {
        setStaJudgementFailExecute(status);
        nodeData.data.devpType.staJudgementFailExecute = status ? 'execute' : 'stop';
    }
    const writeStaNoStatusChange = (status) => {
        setWriteStaNoStatus(status);
        nodeData.data.devpType.writeStaNoStatus = status;
    }
    const writeWorkNoStatusChange = (status) => {
        setWriteWorkNoStatus(status);
        nodeData.data.devpType.writeWorkNoStatus = status;
    }
    const enableStaStatusChange = (status) => {
        setEnableStaStatus(status);
        nodeData.data.devpType.enableStaStatus = status;
    }
    const workNoJudgementChange = (data) => {
        setWorkNoJudgement(data)
        nodeData.data.devpType.workNoJudgement = data;
    }
    const staNoChange = (e) => {
        setStaNo(e.target.value);
        nodeData.data.devpType.staNo = e.target.value;
    }
    const showNodeDrawer = (graph, node) => {
        if (node.data.type == "devp") {
            setOpen(true);
            setNodeData(node);
            if (node.data == null) {
                node.data = initNodeData;
            }
            if (node.data.codeContent != null) {
                setCodeContent(node.data.codeContent);
            }
            if (node.data.devpType == null) {
                node.data.devpType = {
                    devpNo: "",//输送线PLC
                    staNo: "",//站号
                    enableStaStatus: false,//默认关闭判断站点状态
                    staStatus: [],//判断站点状态列表
                    hasWorkNo: false,//是否存在工作号判断
                    workNoJudgement: '>',//默认判断工作号 大于号
                    devpWorkNo: 0,//默认工作号
                    staJudgementFailExecute: false,//判断失败后是否继续执行流程
                    writeStaNoStatus: false,//是否写入目标站
                    writeWorkNoStatus: false,//是否写入工作号
                    writeStaNo: "",//写入目标站数据
                    writeWorkNo: "",//写入工作号数据
                }
            } else {
                const devpType = node.data.devpType;
                setDevpNo(devpType.devpNo);
                setStaNo(devpType.staNo);
                setEnableStaStatus(devpType.enableStaStatus);
                setStaStatus(devpType.staStatus);
                setStaHasWorkNo(devpType.hasWorkNo);
                setDevpWorkNo(devpType.devpWorkNo);
                setWorkNoJudgement(devpType.workNoJudgement);
                setStaJudgementFailExecute(devpType.staJudgementFailExecute);
                setWriteWorkNoStatus(devpType.writeWorkNoStatus);
                setWriteStaNoStatus(devpType.writeStaNoStatus);
                setWriteWorkNo(devpType.writeWorkNo);
                setWriteStaNo(devpType.writeStaNo);
            }
        }
    };
    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 writeWorkNoChange = (e) => {
        setWriteWorkNo(e.target.value);
        nodeData.data.devpType.writeWorkNo = e.target.value;
    }
    const writeStaNoChange = (e) => {
        setWriteStaNo(e.target.value);
        nodeData.data.devpType.writeStaNo = e.target.value;
    }
    const devpNoChange = (e) => {
        setDevpNo(e.target.value);
        nodeData.data.devpType.devpNo = 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>输送线组件</div>
                        <div>ID:{nodeData.id}</div>
                        <div>组件名:<Input defaultValue={nodeData.label} onChange={nodeDataInputChange} /></div>
                        <div>根节点:<Switch checkedChildren="是" unCheckedChildren="否" checked={nodeData.data.root} /></div>
                        <div>
                            输送线PLC:
                            <Input value={devpNo} onChange={devpNoChange} placeholder="输送线PLC" />
                        </div>
                        <div>
                            站号:
                            <Input value={staNo} onChange={staNoChange} placeholder="站号" />
                        </div>
                        <div>
                            判断站点状态:
                            <Switch value={enableStaStatus} checkedChildren="开启" unCheckedChildren="关闭" onChange={enableStaStatusChange} />
                        </div>
                        {
                            enableStaStatus ?
                                <div>
                                    站点状态:
                                    <CheckboxGroup options={devpOptions} value={staStatus} onChange={staStatusChange} />
                                </div>
                                : ''
                        }
                        {
                            enableStaStatus && staHasWorkNo ?
                                <div>
                                    工作号判断:
                                    <Input
                                        value={devpWorkNo}
                                        onChange={devpWorkNoChange}
                                        addonBefore={<Select
                                            onChange={workNoJudgementChange}
                                            value={workNoJudgement}
                                            defaultValue=">"
                                            options={[
                                                { value: '>', label: '>' },
                                                { value: '>=', label: '>=' },
                                                { value: '=', label: '=' },
                                                { value: '!=', label: '!=' },
                                                { value: '<', label: '<' },
                                                { value: '<=', label: '<=' },
                                            ]}
                                        />} placeholder="工作号" />
                                </div>
                                : ''
                        }
                        {
                            enableStaStatus ?
                                <div>
                                    站点判断失败:<Switch value={staJudgementFailExecute} checkedChildren="继续执行" unCheckedChildren="阻止执行" onChange={staJudgementFailExecuteChange} />
                                </div>
                                : ''
                        }
                        <div>
                            写入工作号:<Switch value={writeWorkNoStatus} checkedChildren="写入" unCheckedChildren="不写入" onChange={writeWorkNoStatusChange} />
                            {
                                writeWorkNoStatus ?
                                    <Input
                                        value={writeWorkNo}
                                        onChange={writeWorkNoChange}
                                        placeholder="工作号" />
                                    : ''
                            }
                        </div>
                        <div>
                            写入目标站:<Switch value={writeStaNoStatus} checkedChildren="写入" unCheckedChildren="不写入" onChange={writeStaNoStatusChange} />
                            {
                                writeStaNoStatus ?
                                    <Input
                                        value={writeStaNo}
                                        onChange={writeStaNoChange}
                                        placeholder="目标站" />
                                    : ''
                            }
                        </div>
                        {/* <div>可执行代码:</div>
                        <TextArea value={codeContent} onChange={nodeTextAreaChange} rows={10} /> */}
                    </div>
                </Drawer>
            </>
        );
    }
}
zy-asrs-flow/src/components/Flow/GraphComponent.jsx
@@ -33,27 +33,27 @@
        const graph = ref.current;
        const rect = graph.addNode({
            x: 60,
            y: 60,
            width: 120,
            height: 40,
            label: '订单管理',
            ports: commonGraphPorts,
            attrs: commonGraphAttrs,
            data: initNodeData,
        });
        // const rect = graph.addNode({
        //     x: 60,
        //     y: 60,
        //     width: 120,
        //     height: 40,
        //     label: '订单管理',
        //     ports: commonGraphPorts,
        //     attrs: commonGraphAttrs,
        //     data: initNodeData,
        // });
        const rect2 = graph.addNode({
            x: 240,
            y: 240,
            width: 120,
            height: 40,
            label: '库存管理',
            ports: commonGraphPorts,
            attrs: commonGraphAttrs,
            data: initNodeData,
        });
        // const rect2 = graph.addNode({
        //     x: 240,
        //     y: 240,
        //     width: 120,
        //     height: 40,
        //     label: '库存管理',
        //     ports: commonGraphPorts,
        //     attrs: commonGraphAttrs,
        //     data: initNodeData,
        // });
        graph.use(
            new Snapline({
@@ -84,1342 +84,6 @@
                },
            }),
        )
        graph.fromJSON({
            "cells": [
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "2475ea4f-f0e3-4b44-add4-7d4950ddea45",
                    "zIndex": 0,
                    "source": {
                        "cell": "71d8bc90-558f-489f-b432-a03d7af27cdc",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "c5798537-a8a0-4d79-bd76-a4f663492126",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": ""
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "2c3744b4-45ce-44a6-b169-402eaec24174",
                    "zIndex": 0,
                    "source": {
                        "cell": "c5798537-a8a0-4d79-bd76-a4f663492126",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": ""
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "56181ccf-a41c-4cd8-82d6-e2a4bde31ba9",
                    "zIndex": 0,
                    "source": {
                        "cell": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "63db5ce0-b916-44e4-a924-a79b35afe1d1",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": true,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": "true"
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "73ca24ef-e9d4-4f18-9f06-ca49ac65962a",
                    "zIndex": 0,
                    "source": {
                        "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
                        "port": "port4"
                    },
                    "target": {
                        "cell": "06d450fc-474e-4b23-b40d-c89fde446b28",
                        "port": "port3"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": "false"
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "84a3a77c-79e8-4cf8-9bab-a72bbfc77f1d",
                    "zIndex": 0,
                    "source": {
                        "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "cd9da0a4-5c2d-4f1b-9c51-403b32f1ad51",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": true,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": "true"
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "93d65ae7-f170-466a-92ea-f69614002800",
                    "zIndex": 0,
                    "source": {
                        "cell": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": ""
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "de85103e-80ac-4c88-92de-5bb1a131788c",
                    "zIndex": 0,
                    "source": {
                        "cell": "63db5ce0-b916-44e4-a924-a79b35afe1d1",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": ""
                                }
                            }
                        }
                    ]
                },
                {
                    "position": {
                        "x": 60,
                        "y": 60
                    },
                    "size": {
                        "width": 120,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "订单管理"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "a4962b5d-6ef0-4217-bbf8-742652ffc0ee",
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 1,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 260,
                        "y": 390
                    },
                    "size": {
                        "width": 120,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "库存管理"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "63db5ce0-b916-44e4-a924-a79b35afe1d1",
                    "data": {
                        "codeContent": "2222",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 2,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 270,
                        "y": 265
                    },
                    "size": {
                        "width": 100,
                        "height": 60
                    },
                    "attrs": {
                        "text": {
                            "text": "逻辑判断1"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "path",
                    "id": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6",
                    "data": {
                        "codeContent": "逻辑判断1",
                        "root": false,
                        "isLogic": true,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 3,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 300,
                        "y": 30
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "程序入口"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "71d8bc90-558f-489f-b432-a03d7af27cdc",
                    "data": {
                        "codeContent": null,
                        "root": true,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 4,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 300,
                        "y": 110
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "常用组件"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "c5798537-a8a0-4d79-bd76-a4f663492126",
                    "data": {
                        "codeContent": "1111",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 5,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 280,
                        "y": 511
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "常用组件2"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c",
                    "data": {
                        "codeContent": "常用组件2",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 6,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 270,
                        "y": 620
                    },
                    "size": {
                        "width": 100,
                        "height": 60
                    },
                    "attrs": {
                        "text": {
                            "text": "逻辑判断2"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "path",
                    "id": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
                    "data": {
                        "codeContent": "逻辑判断2",
                        "root": false,
                        "isLogic": true,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 7,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 280,
                        "y": 781
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "常用组件3"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "cd9da0a4-5c2d-4f1b-9c51-403b32f1ad51",
                    "data": {
                        "codeContent": "常用组件3",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 8,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 472,
                        "y": 640
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "常用组件4"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "06d450fc-474e-4b23-b40d-c89fde446b28",
                    "data": {
                        "codeContent": "常用组件4",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 9,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                }
            ]
        })
        props.initHandle();//通知父组件初始化完成
        return graph;
zy-asrs-flow/src/components/Flow/GraphDrawer.jsx
@@ -2,6 +2,7 @@
import { GraphDrawerNode } from "./Drawer/GraphDrawerNode";
import { GraphDrawerEdge } from "./Drawer/GraphDrawerEdge";
import { GraphDrawerCrn } from "./Drawer/GraphDrawerCrn";
import { GraphDrawerDevp } from "./Drawer/GraphDrawerDevp";
import './css/GrapDrawer.less';
export const GraphDrawer = ({ graphRef, isReady }) => {
@@ -11,6 +12,7 @@
            <GraphDrawerNode graphRef={graphRef} isReady={isReady} />
            <GraphDrawerEdge graphRef={graphRef} isReady={isReady} />
            <GraphDrawerCrn graphRef={graphRef} isReady={isReady} />
            <GraphDrawerDevp graphRef={graphRef} isReady={isReady} />
        </>
    );
}
zy-asrs-flow/src/components/Flow/GraphTools.jsx
@@ -1,14 +1,23 @@
import React, { useRef, useEffect, useState } from "react";
import { Button, message, Modal } from 'antd';
import { Button, message, Modal, Divider, List, Typography, Input, Popconfirm } from 'antd';
import { DeleteFilled, ApiOutlined } from '@ant-design/icons';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { exportDataToServer } from "../../services/flow/api";
import { exportDataToServer, getFlowList, deleteFlowById, updateFlowStatus, mockRun } from "../../services/flow/api";
import './css/GraphTools.less'
import { flow, remove } from "lodash";
export const GraphTools = ({ graphRef, isReady }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [saveIsModalOpen, setSaveIsModalOpen] = useState(false);
    const [preCode, setPreCode] = useState(null);
    const [flowListData, setFlowListData] = useState([]);
    const [currentFlow, setCurrentFlow] = useState(null);
    const [flowName, setFlowName] = useState(null);
    const [flowMemo, setFlowMemo] = useState(null);
    let flowId = -1;
    const handleOk = () => {
        setIsModalOpen(false);
@@ -16,7 +25,24 @@
    const handleCancel = () => {
        setIsModalOpen(false);
        setSaveIsModalOpen(false);
    };
    const flowNameInputChange = (e) => {
        setFlowName(e.target.value)
    }
    const memoInputChange = (e) => {
        setFlowMemo(e.target.value)
    }
    const saveData = () => {
        if (currentFlow == null) {
            flowId = -1;
        }
        setSaveIsModalOpen(true);
    }
    //预览代码
    const prewCode = () => {
@@ -77,11 +103,26 @@
                return;
            }
            let id = null;
            if (currentFlow != null) {
                id = currentFlow.id;
            }
            let result = sortNodes(rootNode, nodes, graph);
            exportDataToServer({
                data: result
                originData: JSON.stringify(data),
                data: result,
                name: flowName,
                memo: flowMemo,
                id: id
            }).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    message.success('保存成功');
                    updateFlowList();
                } else {
                    message.warning(res.msg);
                }
                setSaveIsModalOpen(false);
            })
        }
    }
@@ -369,47 +410,158 @@
        return values;
    }
    const getChildren = (node, nodes, graph) => {
        const connectedEdges = graph.getConnectedEdges(node);
        const children = [];
        connectedEdges.forEach((edge) => {
            nodes.forEach((item) => {
                if (item.id === edge.target.cell && item.id != node.id) {
                    children.push(item);
                }
            })
        });
        return children;
    }
    const getDescendants = (node, nodes, graph) => {
        const descendants = [];
        const stack = [node];
        let count = 0;
        while (stack.length > 0) {
            const current = stack.pop();
            descendants.push(current);
            const children = getChildren(current, nodes, graph);
            stack.push(...children);
    const setFlowActive = () => {
        if (currentFlow == null) {
            message.warning("请选择要激活使用的流程图!");
            return;
        }
        return descendants;
        const status = currentFlow.status == 1 ? 0 : 1;
        updateFlowStatus(currentFlow.id, status).then((res) => {
            if (res.code == 200) {
                message.success(status == 1 ? "激活成功" : "已取消激活");
                currentFlow.status = status;
            } else {
                message.warning(res.msg);
            }
            updateFlowList();
        })
    }
    const removeFlow = () => {
        if (currentFlow == null) {
            message.warning("请选择要删除的流程图!");
            return;
        }
        deleteFlowById(currentFlow.id).then((res) => {
            if (res.code == 200) {
                message.success("删除成功");
            } else {
                message.warning(res.msg);
            }
            updateFlowList();
        })
    }
    const updateFlowList = () => {
        getFlowList().then((res) => {
            setFlowListData(res.data);
        })
    }
    const createNewBlank = () => {
        const graph = graphRef.current;
        if (graph) {
            graph.clearCells();
            setCurrentFlow(null);
            setFlowName(null);
            setFlowMemo(null);
        }
    }
    const switchFlowBlank = (flow) => {
        const graph = graphRef.current;
        if (graph) {
            graph.fromJSON(JSON.parse(flow.originData));
            setCurrentFlow(flow)
            setFlowName(flow.name);
            setFlowMemo(flow.memo);
        }
    }
    const testRun = () => {//模拟运行
        if (currentFlow == null) {
            message.warning("请选择流程图");
            return;
        }
        mockRun(currentFlow.id).then((res) => {
            if (res.code == 200) {
                message.success("运行成功");
            } else {
                message.warning(res.msg);
            }
        })
    }
    useEffect(() => {
        updateFlowList();
    }, [])
    return (
        <>
            <div className="container">
                <Button type="primary" onClick={exportData}>
                    导出数据
                </Button>
            <div>
                <div className="container">
                    <div className="containerButton">
                        <Button type="primary" onClick={createNewBlank}>
                            新建
                        </Button>
                    </div>
                <Button type="primary" onClick={prewCode}>
                    预览代码
                </Button>
                    <div className="containerButton">
                        <Button type="primary" onClick={saveData}>
                            保存
                        </Button>
                    </div>
                    <div className="containerButton">
                        <Button type="primary" onClick={setFlowActive}>
                            激活使用
                        </Button>
                    </div>
                    <div className="containerButton">
                        <Button type="primary" onClick={prewCode}>
                            预览代码
                        </Button>
                    </div>
                    <div className="containerButton">
                        <Button type="primary" onClick={testRun}>
                            模拟运行
                        </Button>
                    </div>
                </div>
                <div className="flowList">
                    <List
                        header={
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <div><Typography.Text mark>[数据]</Typography.Text> 流程图列表</div>
                                <div>
                                    <Button type="primary" size="small" onClick={updateFlowList}>
                                        刷新
                                    </Button>
                                    <Popconfirm
                                        title="删除流程图"
                                        description="确认删除?"
                                        okText="删除"
                                        cancelText="取消"
                                        onConfirm={removeFlow}
                                    >
                                        <Button style={{ marginLeft: '5px' }} type="primary" danger size="small">
                                            <DeleteFilled />
                                        </Button>
                                    </Popconfirm>
                                </div>
                            </div>
                        }
                        dataSource={flowListData}
                        renderItem={(item) => (
                            <List.Item>
                                <Button type={currentFlow != null && item.id == currentFlow.id ? 'primary' : 'dashed'} style={{ width: '100%' }} onClick={() => switchFlowBlank(item)}>
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <div>{item.name}</div>
                                        {item.status == 1 ? <div><ApiOutlined /></div> : ''}
                                    </div>
                                </Button>
                            </List.Item>
                        )}
                    />
                </div>
            </div>
            <Modal title="预览代码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
@@ -417,6 +569,15 @@
                    {preCode}
                </SyntaxHighlighter>
            </Modal>
            <Modal title="保存流程图" open={saveIsModalOpen} onOk={exportData} onCancel={handleCancel}>
                <div style={{ marginTop: '10px' }}>
                    <Input placeholder="流程图名称" value={flowName} onChange={flowNameInputChange} />
                </div>
                <div style={{ marginTop: '10px' }}>
                    <Input placeholder="备注" value={flowMemo} onChange={memoInputChange} />
                </div>
            </Modal>
        </>
    );
}
zy-asrs-flow/src/components/Flow/css/GraphTools.less
@@ -1,6 +1,16 @@
.container {
    width: 200px;
    width: 240px;
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    flex-wrap: wrap;
}
.container .containerButton {
    width: 100px;
    margin-top: 10px;
}
.flowList {
    padding: 10px;
}
zy-asrs-flow/src/pages/asrs/flowGraph/components/edit.jsx
New file
@@ -0,0 +1,109 @@
import React, { useState, useRef, useEffect } from 'react';
import {
    ProForm,
    ProFormDigit,
    ProFormText,
    ProFormSelect,
    ProFormDateTimePicker
} from '@ant-design/pro-components';
import { Form, Modal } from 'antd';
import { FormattedMessage, useIntl } from '@umijs/max';
import moment from 'moment';
import Http from '@/utils/http';
const Edit = (props) => {
    const intl = useIntl();
    const [form] = Form.useForm();
    const { } = props;
    useEffect(() => {
        form.resetFields();
        form.setFieldsValue({
            ...props.values
        })
    }, [form, props])
    const handleCancel = () => {
        props.onCancel();
    };
    const handleOk = () => {
        form.submit();
    }
    const handleFinish = async (values) => {
        props.onSubmit({ ...values });
    }
    return (
        <>
            <Modal
                title={
                    Object.keys(props.values).length > 0
                        ? intl.formatMessage({ id: 'page.edit', defaultMessage: '编辑' })
                        : intl.formatMessage({ id: 'page.add', defaultMessage: '添加' })
                }
                width={640}
                forceRender
                destroyOnClose
                open={props.open}
                onCancel={handleCancel}
                onOk={handleOk}
            >
                <ProForm
                    form={form}
                    submitter={false}
                    onFinish={handleFinish}
                    layout="horizontal"
                    grid={true}
                >
                    <ProFormDigit
                        name="id"
                        disabled
                        hidden={true}
                    />
                    <ProForm.Group>
                        <ProFormText
                            name="originData"
                            label="原始数据"
                            colProps={{ md: 12, xl: 12 }}
                        />
                        <ProFormText
                            name="processData"
                            label="处理后的数据"
                            colProps={{ md: 12, xl: 12 }}
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormDateTimePicker
                            name="createTime"
                            label=""
                            colProps={{ md: 12, xl: 12 }}
                            transform={(value) => moment(value).toISOString()}
                        />
                        <ProFormDateTimePicker
                            name="updateTime"
                            label=""
                            colProps={{ md: 12, xl: 12 }}
                            transform={(value) => moment(value).toISOString()}
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormSelect
                            name="status"
                            label="是否启用"
                            colProps={{ md: 12, xl: 12 }}
                            options={[
                                { label: '否', value: 0 },
                                { label: '是', value: 1 },
                            ]}
                        />
                    </ProForm.Group>
                </ProForm>
            </Modal>
        </>
    )
}
export default Edit;
zy-asrs-flow/src/pages/asrs/flowGraph/index.jsx
New file
@@ -0,0 +1,373 @@
import React, { useState, useRef, useEffect } from 'react';
import { Button, message, Modal, Tag  } from 'antd';
import {
    FooterToolbar,
    PageContainer,
    ProTable,
    LightFilter,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { PlusOutlined, ExportOutlined } from '@ant-design/icons';
import Http from '@/utils/http';
import Edit from './components/edit'
import { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter } from '@/components/TableSearch'
import { statusMap } from '@/utils/enum-util'
import { repairBug } from '@/utils/common-util';
const TABLE_KEY = 'pro-table-flowGraph';
const handleSave = async (val, intl) => {
    const hide = message.loading(intl.formatMessage({ id: 'page.adding', defaultMessage: '正在添加' }));
    try {
        const resp = await Http.doPost('api/flowGraph/save', val);
        if (resp.code === 200) {
            message.success(intl.formatMessage({ id: 'page.add.success', defaultMessage: '添加成功' }));
            return true;
        } else {
            message.error(resp.msg);
            return false;
        }
    } catch (error) {
        message.error(intl.formatMessage({ id: 'page.add.fail', defaultMessage: '添加失败请重试!' }));
        return false;
    } finally {
        hide();
    }
};
const handleUpdate = async (val, intl) => {
    const hide = message.loading(intl.formatMessage({ id: 'page.updating', defaultMessage: '正在更新' }));
    try {
        const resp = await Http.doPost('api/flowGraph/update', val);
        if (resp.code === 200) {
            message.success(intl.formatMessage({ id: 'page.update.success', defaultMessage: '更新成功' }));
            return true;
        } else {
            message.error(resp.msg);
            return false;
        }
    } catch (error) {
        message.error(intl.formatMessage({ id: 'page.update.fail', defaultMessage: '更新失败请重试!' }));
        return false;
    } finally {
        hide();
    }
};
const handleRemove = async (rows, intl) => {
    if (!rows) return true;
    const hide = message.loading(intl.formatMessage({ id: 'page.deleting', defaultMessage: '正在删除' }));
    try {
        const resp = await Http.doPost('api/flowGraph/remove/' + rows.map((row) => row.id).join(','));
        if (resp.code === 200) {
            message.success(intl.formatMessage({ id: 'page.delete.success', defaultMessage: '删除成功' }));
            return true;
        } else {
            message.error(resp.msg);
            return false;
        }
    } catch (error) {
        message.error(intl.formatMessage({ id: 'page.delete.fail', defaultMessage: '删除失败,请重试!' }));
        return false;
    } finally {
        hide();
    }
};
const handleExport = async (intl) => {
    const hide = message.loading(intl.formatMessage({ id: 'page.exporting', defaultMessage: '正在导出' }));
    try {
        const resp = await Http.doPostBlob('api/flowGraph/export');
        const blob = new Blob([resp], { type: 'application/vnd.ms-excel' });
        window.location.href = window.URL.createObjectURL(blob);
        message.success(intl.formatMessage({ id: 'page.export.success', defaultMessage: '导出成功' }));
        return true;
    } catch (error) {
        message.error(intl.formatMessage({ id: 'page.export.fail', defaultMessage: '导出失败,请重试' }));
        return false;
    } finally {
        hide();
    }
};
const Main = () => {
    const intl = useIntl();
    const formTableRef = useRef();
    const actionRef = useRef();
    const [selectedRows, setSelectedRows] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [currentRow, setCurrentRow] = useState();
    const [searchParam, setSearchParam] = useState({});
    useEffect(() => {
    }, []);
    const columns = [
        {
            title: intl.formatMessage({
                id: 'page.table.no',
                defaultMessage: 'No'
            }),
            dataIndex: 'index',
            valueType: 'indexBorder',
            width: 48,
        },
        {
            title: '原始数据',
            dataIndex: 'originData',
            valueType: 'text',
            hidden: false,
            width: 140,
            filterDropdown: (props) => <TextFilter
                name='originData'
                {...props}
                actionRef={actionRef}
                setSearchParam={setSearchParam}
            />,
        },
        {
            title: '处理后的数据',
            dataIndex: 'processData',
            valueType: 'text',
            hidden: false,
            width: 140,
            filterDropdown: (props) => <TextFilter
                name='processData'
                {...props}
                actionRef={actionRef}
                setSearchParam={setSearchParam}
            />,
        },
        {
            title: '',
            dataIndex: 'createTime$',
            valueType: 'text',
            hidden: false,
            width: 140,
            filterDropdown: (props) => <DatetimeRangeFilter
                name='createTime'
                {...props}
                actionRef={actionRef}
                setSearchParam={setSearchParam}
            />,
        },
        {
            title: '',
            dataIndex: 'updateTime$',
            valueType: 'text',
            hidden: false,
            width: 140,
            filterDropdown: (props) => <DatetimeRangeFilter
                name='updateTime'
                {...props}
                actionRef={actionRef}
                setSearchParam={setSearchParam}
            />,
        },
        {
            title: '是否启用',
            dataIndex: 'status$',
            valueType: 'text',
            hidden: false,
            width: 140,
            filterDropdown: (props) => <SelectFilter
                name='status'
                {...props}
                actionRef={actionRef}
                setSearchParam={setSearchParam}
                data={[
                    { label: '否', value: 0 },
                    { label: '是', value: 1 },
                ]}
            />,
        },
        {
            title: '操作',
            dataIndex: 'option',
            width: 140,
            valueType: 'option',
            render: (_, record) => [
                <Button
                    type="link"
                    key="edit"
                    onClick={() => {
                        setModalVisible(true);
                        setCurrentRow(record);
                    }}
                >
                    <FormattedMessage id='page.edit' defaultMessage='编辑' />
                </Button>,
                <Button
                    type="link"
                    danger
                    key="batchRemove"
                    onClick={async () => {
                        Modal.confirm({
                            title: intl.formatMessage({ id: 'page.delete', defaultMessage: '删除' }),
                            content: intl.formatMessage({ id: 'page.delete.confirm', defaultMessage: '确定删除该项吗?' }),
                            onOk: async () => {
                                const success = await handleRemove([record], intl);
                                if (success) {
                                    if (actionRef.current) {
                                        actionRef.current.reload();
                                    }
                                }
                            },
                        });
                    }}
                >
                    <FormattedMessage id='page.delete' defaultMessage='删除' />
                </Button>,
            ],
        },
    ];
    return (
        <PageContainer
            header={{
                breadcrumb: {},
            }}
        >
            <div style={{ width: '100%', float: 'right' }}>
                <ProTable
                    key="flowGraph"
                    rowKey="id"
                    actionRef={actionRef}
                    formRef={formTableRef}
                    columns={columns}
                    cardBordered
                    scroll={{ x: 1300 }}
                    dateFormatter="string"
                    pagination={{ pageSize: 16 }}
                    search={false}
                    toolbar={{
                        search: {
                            onSearch: (value) => {
                                setSearchParam(prevState => ({
                                    ...prevState,
                                    condition: value
                                }));
                                actionRef.current?.reload();
                            },
                        },
                        filter: (
                            <LightFilter
                                onValuesChange={(val) => {
                                }}
                            >
                            </LightFilter>
                        ),
                        actions: [
                            <Button
                                type="primary"
                                key="save"
                                onClick={async () => {
                                    setModalVisible(true)
                                }}
                            >
                                <PlusOutlined />
                                <FormattedMessage id='page.add' defaultMessage='添加' />
                            </Button>,
                            <Button
                                key="export"
                                onClick={async () => {
                                    handleExport(intl);
                                }}
                            >
                                <ExportOutlined />
                                <FormattedMessage id='page.export' defaultMessage='导出' />
                            </Button>,
                        ],
                    }}
                    request={(params, sorter, filter) =>
                        Http.doPostPromise('/api/flowGraph/page', { ...params, ...searchParam }, (res) => {
                            return {
                                data: res.data.records,
                                total: res.data.total,
                                success: true,
                            }
                        })
                    }
                    rowSelection={{
                        onChange: (ids, rows) => {
                            setSelectedRows(rows);
                        }
                    }}
                    columnsState={{
                        persistenceKey: TABLE_KEY,
                        persistenceType: 'localStorage',
                        defaultValue: {
                            // memo: { show: repairBug(TABLE_KEY, 'memo', false) },
                            option: { fixed: 'right', disable: true },
                        },
                        onChange(value) {
                        },
                    }}
                />
            </div>
            {selectedRows?.length > 0 && (
                <FooterToolbar
                    extra={
                        <div>
                            <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
                            <FormattedMessage id='page.selected' defaultMessage=' 项已选择' />
                        </div>
                    }
                >
                    <Button
                        key="remove"
                        danger
                        onClick={async () => {
                            Modal.confirm({
                                title: intl.formatMessage({ id: 'page.delete', defaultMessage: '删除' }),
                                content: intl.formatMessage({ id: 'page.delete.confirm', defaultMessage: '确定删除该项吗?' }),
                                onOk: async () => {
                                    const success = await handleRemove(selectedRows, intl);
                                    if (success) {
                                        setSelectedRows([]);
                                        actionRef.current?.reloadAndRest?.();
                                    }
                                },
                            });
                        }}
                    >
                        <FormattedMessage id='page.delete.batch' defaultMessage='批量删除' />
                    </Button>
                </FooterToolbar>
            )}
            <Edit
                open={modalVisible}
                values={currentRow || {}}
                onCancel={
                    () => {
                        setModalVisible(false);
                        setCurrentRow(undefined);
                    }
                }
                onSubmit={async (values) => {
                    let ok = false;
                    if (values.id) {
                        ok = await handleUpdate({ ...values }, intl)
                    } else {
                        ok = await handleSave({ ...values }, intl)
                    }
                    if (ok) {
                        setModalVisible(false);
                        setCurrentRow(undefined);
                        if (actionRef.current) {
                            actionRef.current.reload();
                        }
                    }
                }}
            />
        </PageContainer>
    );
};
export default Main;
zy-asrs-flow/src/services/flow/api.js
@@ -2,8 +2,39 @@
import React from 'react';
export function exportDataToServer(data) {
    return request('/flow/analysisExportData', {
    return request('/api/flow/analysisExportData', {
        data: data,
        method: 'POST'
    });
}
export function getFlowList() {
    return request('/api/flowGraph/list', {
        method: 'POST'
    })
}
export function deleteFlowById(id) {
    return request('/api/flowGraph/remove/' + [id], {
        method: 'POST'
    })
}
export function updateFlowStatus(id, status) {
    return request('/api/flowGraph/updateFlowStatus', {
        method: 'POST',
        data: {
            id: id,
            status: status
        }
    })
}
export function mockRun(id) {//模拟运行
    return request('/api/flow/mockRun', {
        method: 'POST',
        data: {
            id: id
        }
    })
}
zy-asrs-flow/src/services/route.js
@@ -26,7 +26,6 @@
export async function getRoutersInfo() {
    return getRouters().then((res) => {
        console.log(res);
        if (res.code === 200) {
            // return res.data;
            const routersInfo = convertCompatRouters(res.data);