From edd65ab28a52d4a52a23e50af1eefb1e6051c18e Mon Sep 17 00:00:00 2001
From: Junjie <xjj@123>
Date: 星期三, 17 四月 2024 10:33:01 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/components/Flow/GraphDrawer.jsx | 2
zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerShuttle.jsx | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 154 insertions(+), 0 deletions(-)
diff --git a/zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerShuttle.jsx b/zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerShuttle.jsx
new file mode 100644
index 0000000..38f6b3f
--- /dev/null
+++ b/zy-asrs-flow/src/components/Flow/Drawer/GraphDrawerShuttle.jsx
@@ -0,0 +1,152 @@
+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 GraphDrawerShuttle = ({ graphRef, isReady }) => {
+
+ const [open, setOpen] = useState(false);
+ const [init, setInit] = useState(false);
+ const [nodeData, setNodeData] = useState(null);
+ const [codeContent, setCodeContent] = useState(null);
+ const [execClass, setExecClass] = useState(null);
+ const [execApi, setExecApi] = useState(null);
+ const [shuttleOper, setShuttleOper] = useState([]);
+
+ const classList = [
+ { value: 'ShuttleThread', label: '鍥涘悜绌挎杞�' },
+ ];
+
+ const apiList = [
+ { value: 'load', label: '鍙栬揣' },
+ { value: 'unload', label: '鏀捐揣' },
+ { value: 'loadAndUnload', label: '鍙栨斁璐�' },
+ ];
+
+ const shuttleOptions = [
+ {
+ label: '鎼滅储绌洪棽杞�',
+ value: 'searchIdleShuttle'
+ },
+ ];
+
+ const shuttleOptionsChange = (list) => {
+ setShuttleOper(list);
+ nodeData.data.shuttleType.shuttleOper = list;
+ };
+
+ const showNodeDrawer = (graph, node) => {
+ if (node.data.type == "shuttle") {
+ setOpen(true);
+ setNodeData(node);
+ if (node.data == null) {
+ node.data = initNodeData;
+ }
+
+ if (node.data.codeContent != null) {
+ setCodeContent(node.data.codeContent);
+ }
+
+ if (node.data.execClass != null) {
+ setExecClass(node.data.execClass);
+ } else {
+ setExecClass(null);
+ }
+
+ if (node.data.execApi != null) {
+ setExecApi(node.data.execApi);
+ } else {
+ setExecApi(null);
+ }
+
+ if (node.data.shuttleType == null) {
+ node.data.shuttleType = {
+ shuttleOper: [],//鎿嶄綔鏂规硶
+ }
+ } else {
+ const shuttleType = node.data.shuttleType;
+ setShuttleOper(shuttleType.shuttleOper);
+ }
+
+ }
+ };
+
+ const onNodeClose = (e) => {
+ setOpen(false);
+ setNodeData(null);
+ setCodeContent(null);
+ };
+
+ const nodeTextAreaChange = (e) => {
+ setCodeContent(e.target.value);
+ nodeData.data.codeContent = e.target.value;
+ }
+
+ const nodeDataInputChange = (e) => {
+ nodeData.label = e.target.value;
+ }
+
+ const classListChange = (e) => {
+ setExecClass(e);
+ nodeData.data.execClass = e;
+ }
+
+ const apiListChange = (e) => {
+ setExecApi(e);
+ nodeData.data.execApi = e;
+ }
+
+ useEffect(() => {
+ if (isReady) {
+ const graph = graphRef.current;
+
+ if (!init) {
+ graph.on("node:dblclick", ({ node }) => {
+ showNodeDrawer(graph, node);
+ })
+ setInit(true);
+ }
+ }
+ }, [apiList])
+
+ if (nodeData) {
+ return (
+ <>
+ <Drawer title={nodeData.label} onClose={onNodeClose} open={open} size="large">
+ <div className="graphDrawerContainer">
+ <div>鍥涘悜绌挎杞︾粍浠�</div>
+ <div>ID锛歿nodeData.id}</div>
+ <div>缁勪欢鍚嶏細<Input defaultValue={nodeData.label} onChange={nodeDataInputChange} /></div>
+ <div>鏍硅妭鐐癸細<Switch checkedChildren="鏄�" unCheckedChildren="鍚�" checked={nodeData.data.root} /></div>
+ <div>
+ 鎿嶄綔鏂规硶锛�
+ <CheckboxGroup options={shuttleOptions} value={shuttleOper} onChange={shuttleOptionsChange} />
+ </div>
+ <div>
+ 鎵ц绫伙細
+ <Select
+ style={{ width: 120 }}
+ options={classList}
+ onChange={classListChange}
+ defaultValue={execClass}
+ />
+ </div>
+ <div>
+ 鎵ц鎺ュ彛锛�
+ <Select
+ style={{ width: 120 }}
+ options={apiList}
+ onChange={apiListChange}
+ defaultValue={execApi}
+ />
+ </div>
+ <div>鍙墽琛屼唬鐮侊細</div>
+ <TextArea value={codeContent} onChange={nodeTextAreaChange} rows={10} />
+ </div>
+ </Drawer>
+ </>
+ );
+ }
+}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx b/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx
index b07de64..0ee1d07 100644
--- a/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx
+++ b/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx
@@ -3,6 +3,7 @@
import { GraphDrawerEdge } from "./Drawer/GraphDrawerEdge";
import { GraphDrawerCrn } from "./Drawer/GraphDrawerCrn";
import { GraphDrawerDevp } from "./Drawer/GraphDrawerDevp";
+import { GraphDrawerShuttle } from "./Drawer/GraphDrawerShuttle";
import './css/GrapDrawer.less';
export const GraphDrawer = ({ graphRef, isReady }) => {
@@ -13,6 +14,7 @@
<GraphDrawerEdge graphRef={graphRef} isReady={isReady} />
<GraphDrawerCrn graphRef={graphRef} isReady={isReady} />
<GraphDrawerDevp graphRef={graphRef} isReady={isReady} />
+ <GraphDrawerShuttle graphRef={graphRef} isReady={isReady} />
</>
);
}
\ No newline at end of file
--
Gitblit v1.9.1