feat:优化工单自动化预览流程显示

src/pages/bsmanager/workOrder/autoCase/components/CaseModify/index.js

@@ -19,14 +19,24 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
 import moment from 'moment/moment';
 import RuleConfig from '@/components/RuleConfig';
 import PeopleSelector from '@/components/PeopleSelector';
-import { WFGetAllFlow, GetFormDataSource } from '@/services/workflow/workflow';
+import { WFGetAllFlow, GetFormDataSource, GetFlowNode } from '@/services/workflow/workflow';
 import { GetScheduledConfigFlowNode, GetConditionConfigFlowNode } from '@/services/flow/flow';
 import { GetSubEventFlows } from '@/services/workflow/workflow';
+import imgEnd from '@/assets/images/workFlow/nodeEnd.png';
+import gatewayConfluence from '@/assets/images/workFlow/gatewayParallel.png';
+import gatewayExclusive from '@/assets/images/workFlow/gatewayCondition.png';
+import gatewayInclude from '@/assets/images/workFlow/gatewayJoin.png';
+import imgGeneral from '@/assets/images/workFlow/nodeGeneral.png';
+import imgStart from '@/assets/images/workFlow/nodeStart.png';
+import styles  from './index.less'
+import * as go from 'gojs';
 const days = moment().daysInMonth();
 const allDays = [...Array.from({ length: days + 1 }, (_, i) => i + 1)];
 const weeks = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
 const weeks1 = ['第一周', '第二周', '第三周', '第四周', '最后一周'];
+let myDiagram = null;
 const CaseModify = props => {
+   let _$ = go.GraphObject.make;
   const { visible, mode, onClose, onOk, flowConfigDetail } = props;
   const [planType, setPlanType] = useState('ByLoop'); // ByLoop：循环 ByDay：每天 ByWeek：每周 ByMonth：每月
   const [timeType, setTimeType] = useState('');
@@ -81,6 +91,8 @@ const CaseModify = props => {
   let ruleField = useRef([]);
   let flowData = useRef([]);
   let imgUrl = useRef('');
+  let flowTree = useRef([])
+  let flowDataList = useRef({})
   let postData = useRef({
     id: null,
     schemeName: '',
@@ -399,23 +411,23 @@ const CaseModify = props => {
       message.error(msg);
     }
   };
-
-  const getPrewViewImage = flowId =>
-    WFGetAllFlow().then(res => {
-      if (res.code === 0) {
-        const data = res.data
-          .map(v => v.children)
-          .flat()
-          .find(v => v.FlowID == flowId);
-        console.log(data, res.data.map(v => v.children).flat(), ' datadatadata');
-        if (data) {
-          imgUrl.current = `/PandaOMS/OMS/FileCenter/DownLoadFiles?module=熊猫智慧水务平台\\WorkFlowImage&filePath=${
-            data.PreviewImage
-          }`;
-          setIsPreView(true);
-        }
-      }
-    });
+  const getPrewViewImage = async (flowId) =>{
+    let res = await  GetFlowNode({ flowID: flowId });
+    if (res.code === 0) {
+      res.data.Nodes.forEach(item => {
+        item.nodeDetail = JSON.stringify(item);
+        item.key = item.NodeName
+      });
+      res.data.Lines.forEach(item => {
+        item.lineDetail = JSON.stringify(item);
+      });
+      flowDataList.current = { ...res.data, flowName: postData.current.flowName }
+      initMap(flowDataList.current)
+    } else {
+      message.error(res.msg);
+    }
+    setIsPreView(true)
+  }
 
   //计算循环的下次执行时间
   const handleTimeInfo = (timeUnit, num) => {
@@ -1124,8 +1136,8 @@ const CaseModify = props => {
   };
 
   const handlePreviewImg = () => {
-    if (configInfo.flowId) {
-      getPrewViewImage(configInfo.flowId);
+    if (postData.current.flowId) {
+      getPrewViewImage(postData.current.flowId);
     }
   };
 
@@ -1195,6 +1207,360 @@ const CaseModify = props => {
     setShowPersonSelect(true);
   };
 
+  
+  const initMap = (data) => {
+    setTimeout(() => {
+      if (myDiagram) {
+        myDiagram.div = null; // 断开现有 Diagram 的 div 绑定
+        myDiagram = null;
+      }
+      myDiagram = _$(go.Diagram, 'myDiagramDiv', {
+        // isReadOnly: true,
+        // 禁止编辑
+        // allowVerticalScroll: false,
+        'undoManager.isEnabled': true,
+        allowDragOut: false,
+        'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone, //鼠标滚轮事件禁止
+        'dragSelectingTool.isEnabled': false,
+        // 禁止多选
+        allowCopy: false,
+        isReadOnly: false,
+        allowMove: false,
+        // 禁止复制
+        nodeSelectionAdornmentTemplate: _$(
+          go.Adornment,
+          'Auto',
+          _$(go.Shape, 'Rectangle', {
+            fill: 'white',
+            stroke: null,
+          }),
+        ),
+        scale: '0.8',
+      });
+      // 节点配置
+      myDiagram.nodeTemplate = _$(
+        go.Node,
+        'Auto',
+        // { deletable: false, toolTip: tooltiptemplate },
+        new go.Binding('location', 'points', go.Point.parse).makeTwoWay(
+          go.Point.stringify,
+        ),
+        // 节点样式配置
+        _$(
+          go.Panel,
+          nodeBoxStyle('width'),
+          nodeBoxStyle('height'),
+          _$(
+            go.Picture,
+            new go.Binding('source', 'nodeDetail', (v) => {
+              const obj = JSON.parse(v);
+              console.log(obj, 'vvvvvvv');
+              switch (obj.NodeType) {
+                case '1':
+                  return imgStart;
+                case '2':
+                  return imgEnd;
+                case '0':
+                  return imgGeneral;
+                case '4':
+                  return cc;
+                case '20':
+                  return gatewayExclusive;
+                case '21':
+                  return gatewayInclude;
+                case '22':
+                  return gatewayConfluence;
+                case '30':
+                  return require('@/assets/images/workFlow/cc.png');
+                default:
+                  return null;
+              }
+            }),
+            nodeBoxStyle('width'),
+            nodeBoxStyle('height'),
+          ),
+          // 节点文案
+          _$(
+            go.Panel,
+            'Horizontal',
+            nodeBoxStyle('height'),
+            {
+              alignment: go.Spot.Center,
+            },
+            _$(
+              go.Panel,
+              'Vertical',
+              nodeBoxStyle('width'),
+              _$(
+                go.TextBlock,
+                {
+                  maxSize: new go.Size(120, NaN),
+                  maxLines: 1,
+                  alignment: go.Spot.Center,
+                  margin: new go.Margin(20, 10, 0, 10),
+                  overflow: go.TextBlock.OverflowEllipsis,
+                  font: 'normal 12pt Microsoft YaHei',
+                },
+                new go.Binding('text', 'nodeDetail', (v) => {
+                  const obj = JSON.parse(v);
+                  if (
+                    obj.NodeType === '20' ||
+                    obj.NodeType === '21' ||
+                    obj.NodeType === '22'
+                  ) {
+                    return '';
+                  }
+                  return obj.NodeName.slice(0, 6);
+                }),
+                nodeBoxStyle('stroke', 'nodeStyle'),
+              ),
+              _$(
+                go.TextBlock,
+                {
+                  alignment: go.Spot.Center,
+                  maxLines: 2,
+                  overflow: go.TextBlock.OverflowEllipsis,
+                  font: 'normal 12pt Microsoft YaHei',
+                },
+                new go.Binding('spacingAbove', 'undertakeman', (v) =>
+                  v?.length > 0 ? 5 : 0,
+                ),
+                new go.Binding('height', 'undertakeman', (v) =>
+                  v?.length > 0 ? 30 : 0,
+                ),
+                new go.Binding('margin', 'undertakeman', (v) =>
+                  v?.length > 0 ? new go.Margin(10, 10, 0, 10) : 0,
+                ),
+                new go.Binding('text', 'nodeDetail', (v) => {
+                  const obj = JSON.parse(v);
+                  if (
+                    obj.NodeType === '20' ||
+                    obj.NodeType === '21' ||
+                    obj.NodeType === '22'
+                  ) {
+                    return '';
+                  }
+                  if (obj.RoleList?.length === 0) {
+                    return '';
+                  }
+                  return obj.undertakeman.join(',');
+                }),
+                nodeBoxStyle('stroke', 'nodeStyle'),
+              ),
+            ),
+          ),
+        ),
+
+        {
+          // 处理鼠标进入/离开事件以显示/隐藏端口
+          mouseEnter(e, node) {
+            // console.log(e, node);
+          },
+          mouseLeave(e, node) { },
+          // 处理双击
+          doubleClick(e, node) { },
+
+          // define a tooltip for each node that displays the color as text
+          // define a tooltip for each node that displays the color as text
+          toolTip: _$(
+            'ToolTip',
+            _$(go.TextBlock, { margin: 4 }, new go.Binding('text', 'tip')),
+          ), // end of Adornment
+        },
+      );
+      // 链接设置
+      myDiagram.linkTemplate = _$(
+        go.Link,
+        {
+          routing: go.Link.Orthogonal,
+          curve: go.Link.JumpOver,
+          corner: 5,
+          toShortLength: 4,
+        },
+        new go.Binding('points').makeTwoWay(),
+        _$(
+          go.Shape, // 链接路径形状
+          { isPanelMain: true, strokeWidth: 3, stroke: '#1685FF' },
+          new go.Binding('stroke', 'lineType', (v) => {
+            // 未完成
+            if (v === 0) {
+              return '#342e2e11';
+            }
+            // 已完成
+            if (v === 1) {
+              return '#299af0';
+            }
+            return '';
+          }),
+          new go.Binding('strokeDashArray', 'lineType', (v) => {
+            // 未完成
+            if (v === 0) {
+              return [6, 3];
+            }
+            // 已完成
+            if (v === 1) {
+              return null;
+            }
+            return null;
+          }),
+        ),
+        _$(
+          go.Shape, // 箭头
+          { toArrow: 'Standard', stroke: '#1685FF', fill: '#1685FF' },
+          new go.Binding('fill', 'lineType', (v) => {
+            // 未完成
+            if (v === 0) {
+              return '#342e2e11';
+            }
+            // 已完成
+            if (v === 1) {
+              return '#1685FF';
+            }
+            return '';
+          }),
+          new go.Binding('stroke', 'lineType', (v) => {
+            // 未完成
+            if (v === 0) {
+              return '#342e2e11';
+            }
+            // 已完成
+            if (v === 1) {
+              return '#1685FF';
+            }
+            return '';
+          }),
+        ),
+        _$(
+          go.Panel,
+          'Auto',
+          // _$(
+          //   go.Shape, // 标签背景，在边缘变得透明
+          //   // { fill: 'transparent' },
+          //   new go.Binding('fill', 'lineDetail', (v) => lineTextStyle(v)),
+          //   new go.Binding('stroke', 'lineDetail', (v) => lineTextStyle(v)),
+          // ),
+          _$(
+            go.TextBlock,
+            {
+              textAlign: 'center',
+              font: '10pt helvetica, arial, Microsoft YaHei',
+              margin: 4,
+            },
+            new go.Binding('stroke', 'lineType', (v) => {
+              // 未完成
+              if (v === 0) {
+                return '#d2d2d2';
+              }
+              // 已完成
+              if (v === 1) {
+                return '#555555';
+              }
+              return '';
+            }),
+            new go.Binding('text', 'lineDetail', (v) => lineText(v)),
+          ),
+        ),
+      );
+      let model = _$(go.GraphLinksModel);
+      model.nodeDataArray = data.Nodes;
+      model.linkDataArray = data.Lines;
+      myDiagram.model = model;
+    }, 0);
+  };
+  // 节点样式
+  const nodeBoxStyle = (atr, classname) => {
+    switch (atr) {
+      case 'width':
+        return new go.Binding('width', 'NodeType', (v) => {
+          switch (v) {
+            case '1':
+              return 140;
+            case '2':
+              return 140;
+            case '0':
+              return 220;
+            case '4':
+              return 220;
+            case '20':
+              return 60;
+            case '21':
+              return 60;
+            case '22':
+              return 60;
+            case '30':
+              return 220;
+            default:
+              return null;
+          }
+        });
+      case 'height':
+        return new go.Binding('height', 'NodeType', (v) => {
+          switch (v) {
+            case '1':
+              return 140;
+            case '2':
+              return 140;
+            case '0':
+              return 120;
+            case '4':
+              return 120;
+            case '20':
+              return 60;
+            case '21':
+              return 60;
+            case '22':
+              return 60;
+            case '30':
+              return 120;
+            default:
+              return null;
+          }
+        });
+      case 'stroke':
+        return new go.Binding('stroke', 'nodeDetail', (v) => {
+          const obj = JSON.parse(v);
+          switch (obj.NodeType) {
+            case '1':
+              return '#999999';
+            case '2':
+              return '#51C21A';
+            case '0':
+              return '#1685FF';
+            case '30':
+              return '#9850F6';
+
+            default:
+              return null;
+          }
+        });
+      default:
+        return null;
+    }
+  };
+ // 线上文案样式
+ const lineTextStyle = v => {
+  let obj = JSON.parse(v);
+
+  let nodeData = myDiagram.model.findNodeDataForKey(obj.from);
+  if (nodeData.NodeType === '20' || nodeData.NodeType === '21') {
+    // if(nodeData.)
+    if (nodeData.RuleList.some(ele => ele.NextNodeId === obj.to)) {
+      return '#EFF8FA';
+    }
+    return 'transparent';
+  }
+  return 'transparent';
+};
+// 线上的文案
+const lineText = v => {
+  let obj = JSON.parse(v);
+  let nodeData = myDiagram.model.findNodeDataForKey(obj.from);
+  if (nodeData.NodeType === '20' || nodeData.NodeType === '21') {
+    return nodeData.RuleList.find(ele => ele.NextNodeId === obj.to).RuleName;
+  }
+  return '';
+};
+
   const validContent = <span style={{ color: 'red', fontSize: '18px' }}>*</span>;
   return (
     <Modal
@@ -1563,9 +1929,9 @@ const CaseModify = props => {
           onCancel={() => setIsPreView(false)}
           footer={null}
         >
-          <div style={{ width: '100%', height: '100%', textAlign: 'center' }}>
-            <img src={imgUrl.current} />
-          </div>
+           <div className={styles.map}>
+            {isPreview && <div id="myDiagramDiv" className={styles.diagram}></div>}
+        </div>
         </Modal>
         <RuleConfig
           RuleContent={ruleContent.current}

src/pages/bsmanager/workOrder/autoCase/components/CaseModify/index.less

+.map {
+    width: 100%;
+    height: 400px;
+    background: #F5F7FB;
+    border-radius: 10px;
+    border: 1px solid #EEF0F4;
+    .diagram {
+      width: 100%;
+      height: 400px;
+      background: #F5F7FB;
+      border-radius: 10px;
+      border: 1px solid #EEF0F4;
+    }
+  }
\ No newline at end of file