From 9f4a1cf5f91f85c49d3e609f19c9e833a08ca8ee Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 22 三月 2024 08:29:48 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/components/Flow/GraphTools.jsx | 399 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 261 insertions(+), 138 deletions(-)
diff --git a/zy-asrs-flow/src/components/Flow/GraphTools.jsx b/zy-asrs-flow/src/components/Flow/GraphTools.jsx
index e8d6518..701fdec 100644
--- a/zy-asrs-flow/src/components/Flow/GraphTools.jsx
+++ b/zy-asrs-flow/src/components/Flow/GraphTools.jsx
@@ -1,13 +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 './GraphTools.less'
+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);
@@ -15,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 = () => {
@@ -76,15 +103,31 @@
return;
}
- console.log(getDescendants(rootNode, nodes, graph));
+ let id = null;
+ if (currentFlow != null) {
+ id = currentFlow.id;
+ }
- const codeContent = transCode(rootNode, nodes, graph)
- console.log(codeContent);
+ let result = sortNodes(rootNode, nodes, graph);
+ exportDataToServer({
+ originData: JSON.stringify(data),
+ data: result,
+ name: flowName,
+ memo: flowMemo,
+ id: id
+ }).then((res) => {
+ if (res.code == 200) {
+ message.success('淇濆瓨鎴愬姛');
+ updateFlowList();
+ } else {
+ message.warning(res.msg);
+ }
+ setSaveIsModalOpen(false);
+ })
}
}
- const transCode = (rootNode, nodes, graph) => {
- let codeContent = "";
+ const sortNodes = (rootNode, nodes, graph) => {
let values = nodeDFS(rootNode, nodes, graph);
const searchNode = {
id: 1,
@@ -93,7 +136,6 @@
};
let cpValues = JSON.parse(JSON.stringify(values))
- console.log(cpValues);
let searchIndex = 0;
cpValues.forEach((value) => {
@@ -131,6 +173,56 @@
}
})
+ return cpValues;
+ }
+
+ const transCode = (rootNode, nodes, graph) => {
+ let codeContent = "";
+
+ let values = nodeDFS(rootNode, nodes, graph);
+ const searchNode = {
+ id: 1,
+ parent: null,
+ logicBool: true
+ };
+
+ let cpValues = JSON.parse(JSON.stringify(values))
+
+ let searchIndex = 0;
+ cpValues.forEach((value) => {
+ if (value.data.isLogic) {
+ value.data.searchLogicId = searchNode.id;
+ value.data.searchLogicBool = searchNode.logicBool;
+ value.data.searchIndex = searchIndex++;
+
+ let tmpSearchNode = JSON.parse(JSON.stringify(searchNode))
+ searchNode.parent = tmpSearchNode;
+ searchNode.id = value.id;
+ searchNode.logicBool = null;
+ searchIndex = 0;
+ } else {
+ let id = searchNode.id;
+ let logicBool = searchNode.logicBool;
+
+ const connectedEdges = graph.getConnectedEdges(value);//鍙栬竟
+ connectedEdges.forEach((edge) => {
+ let tmpSearchNode = JSON.parse(JSON.stringify(searchNode));
+ while (tmpSearchNode.parent != null) {
+ if (edge.source.cell == tmpSearchNode.id) {
+ logicBool = edge.data.logicBool;//鏇存柊鏂瑰悜
+ searchNode.logicBool = edge.data.logicBool;
+ id = tmpSearchNode.id;
+ break;
+ }
+ tmpSearchNode = tmpSearchNode.parent;
+ }
+ })
+
+ value.data.searchLogicId = id;
+ value.data.searchLogicBool = logicBool;
+ value.data.searchIndex = searchIndex++;
+ }
+ })
console.log(cpValues);
console.log(searchNode);
@@ -197,6 +289,8 @@
obj.id = key;
sortTmp[tmp[key].index] = obj;
}
+
+ console.log(sortTmp);
// 鍚堝苟True鍜孎alse
sortTmp.forEach((item) => {
@@ -287,104 +381,13 @@
return formattedCode;
}
- // const transCode = (rootNode, nodes, graph) => {
- // let codeContent = "";
- // const descendants = [];
- // let stack = [rootNode];
-
- // let count = 0;
- // while (stack.length > 0) {
- // const current = stack.pop();
- // descendants.push(current);
-
- // const children = getChildren(current, nodes, graph);
- // stack.push(...children);
-
- // // 杈撳嚭浠ｇ爜
- // if (!current.data.isLogic) {
- // const connectedEdges = graph.getConnectedEdges(current);//鍙栬竟
- // connectedEdges.forEach((edge) => {
- // //杩囨护浠庤嚜韬妭鐐瑰嚭鍘荤殑杈�
- // if(edge.source.cell != current.id){
- // //鍙栦笂涓�鑺傜偣
- // let lastNode = null;
- // nodes.forEach((node) => {
- // if(node.id == edge.source.cell){
- // lastNode = node;
- // }
- // })
-
- // if(lastNode != null) {
- // //鍒ゆ柇鑺傜偣鏄惁閫昏緫鑺傜偣
- // if(lastNode.data.isLogic){
- // console.log(lastNode);
- // let nestedIfCode = "";
- // if(lastNode.data.logicBool == 'true') {
- // nestedIfCode = `
- // if (${lastNode.data.codeContent}) {
- // ${current.data.codeContent}
- // }
- // `;
- // }else{
- // nestedIfCode = `
- // if (!(${lastNode.data.codeContent})) {
- // ${current.data.codeContent}
- // }
- // `;
- // }
-
-
- // codeContent += "\n" + nestedIfCode;
- // console.log(codeContent);
- // }else{
- // if (current.data.codeContent != null) {
- // codeContent += "\n" + current.data.codeContent;
- // }
- // }
- // }
- // }
- // console.log(current);
- // })
- // } else {
- // // if (current.data.codeContent != null) {
- // // codeContent += "\n" + current.data.codeContent;
- // // }
-
- // // const connectedEdges = graph.getConnectedEdges(current);
- // // console.log(connectedEdges);
- // // stack = []
- // // let test = []
- // // connectedEdges.forEach((edge) => {
- // // nodes.forEach((item) => {
- // // if (item.id === edge.target.cell && item.id != current.id) {
- // // test.push(item);
- // // }
- // // })
- // // });
- // // console.log(test);
- // // console.log();
- // // let nestedIfCode = `
- // // if (true}) {
- // // ${current.data.codeContent}
- // // }
- // // `;
-
- // // codeContent += "\n" + nestedIfCode;
- // // console.log(codeContent);
- // }
-
- // }
-
- // console.log(codeContent);
- // }
-
const nodeDFS = (node, nodes, graph) => {
let values = [];
if (graph) {
const connectedEdges = graph.getConnectedEdges(node);
const children = [];
- console.log(node);
+ // console.log(node);
connectedEdges.forEach((edge) => {
nodes.forEach((item) => {
if (item.id === edge.target.cell && item.id != node.id) {
@@ -393,11 +396,11 @@
})
});
- console.log(connectedEdges);
+ // console.log(connectedEdges);
if (children.length != 0) {
- console.log(children);
+ // console.log(children);
children.forEach((node) => {
- console.log(node);
+ // console.log(node);
values.push(node);
values = values.concat(nodeDFS(node, nodes, graph))
})
@@ -407,54 +410,174 @@
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="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+ <Modal title="棰勮浠ｇ爜" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
<SyntaxHighlighter language="java" style={solarizedlight}>
{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>
</>
);
}
\ No newline at end of file
--
Gitblit v1.9.1