feat: 调整源数据结构

src/views/graph/data/data.ts

@@ -1,326 +1,329 @@
 export default {
-  cells: [
-    {
-      position: {
-        x: 630,
-        y: 60
-      },
-      size: {
-        width: 210,
-        height: 520
-      },
-      attrs: {
-        text: {
-          text: '开始'
+  id: 'teg345g34-435634tg-2346245t-234tf345',
+  cells: {
+    cells: [
+      {
+        position: {
+          x: 630,
+          y: 60
         },
-        body: {
-          rx: 24,
-          ry: 24
-        }
-      },
-      visible: true,
-      shape: 'flow-chart-rect',
-      ports: {
-        groups: {
-          top: {
-            position: 'top',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+        size: {
+          width: 210,
+          height: 520
+        },
+        attrs: {
+          text: {
+            text: '开始'
+          },
+          body: {
+            rx: 24,
+            ry: 24
+          }
+        },
+        visible: true,
+        shape: 'flow-chart-rect',
+        ports: {
+          groups: {
+            top: {
+              position: 'top',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
-            }
-          },
-          right: {
-            position: 'right',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+            },
+            right: {
+              position: 'right',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
-            }
-          },
-          bottom: {
-            position: 'bottom',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+            },
+            bottom: {
+              position: 'bottom',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
-            }
-          },
-          left: {
-            position: 'left',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+            },
+            left: {
+              position: 'left',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
             }
-          }
-        },
-        items: [
-          {
-            group: 'top',
-            id: '064fcc7a-27bf-4854-a17b-45b7f87d9a64'
-          },
-          {
-            group: 'right',
-            id: 'db613d17-17fe-48f2-817f-02c563e81cf9'
           },
-          {
-            group: 'bottom',
-            id: 'fefee393-cb33-4357-828e-4351bd063e7f'
-          },
-          {
-            group: 'left',
-            id: '41d1d144-729f-4174-b7e1-c5d3468f4e48'
-          }
-        ]
-      },
-      id: '42b21d5d-1ef0-4e72-8c5b-940bde80b98a',
-      zIndex: 5,
-      data: {
-        status: '0',
-        pointCode: '52',
-        fieldName: 'fieldName1'
-      }
-    },
-    {
-      position: {
-        x: 670,
-        y: 190
-      },
-      size: {
-        width: 80,
-        height: 42
-      },
-      attrs: {
-        text: {
-          text: '流程'
+          items: [
+            {
+              group: 'top',
+              id: '064fcc7a-27bf-4854-a17b-45b7f87d9a64'
+            },
+            {
+              group: 'right',
+              id: 'db613d17-17fe-48f2-817f-02c563e81cf9'
+            },
+            {
+              group: 'bottom',
+              id: 'fefee393-cb33-4357-828e-4351bd063e7f'
+            },
+            {
+              group: 'left',
+              id: '41d1d144-729f-4174-b7e1-c5d3468f4e48'
+            }
+          ]
+        },
+        id: '42b21d5d-1ef0-4e72-8c5b-940bde80b98a',
+        zIndex: 5,
+        data: {
+          status: '0',
+          pointCode: '52',
+          fieldName: 'fieldName1'
         }
       },
-      visible: true,
-      shape: 'flow-chart-rect',
-      ports: {
-        groups: {
-          top: {
-            position: 'top',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+      {
+        position: {
+          x: 670,
+          y: 190
+        },
+        size: {
+          width: 80,
+          height: 42
+        },
+        attrs: {
+          text: {
+            text: '流程'
+          }
+        },
+        visible: true,
+        shape: 'flow-chart-rect',
+        ports: {
+          groups: {
+            top: {
+              position: 'top',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
-            }
-          },
-          right: {
-            position: 'right',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+            },
+            right: {
+              position: 'right',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
-            }
-          },
-          bottom: {
-            position: 'bottom',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+            },
+            bottom: {
+              position: 'bottom',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
-            }
-          },
-          left: {
-            position: 'left',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+            },
+            left: {
+              position: 'left',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
             }
-          }
-        },
-        items: [
-          {
-            group: 'top',
-            id: '1fe61800-0c92-4856-bc2b-60a15a5c3fa3'
           },
-          {
-            group: 'right',
-            id: '80fcb40d-932c-45c2-8534-6bfb911ad425'
-          },
-          {
-            group: 'bottom',
-            id: '397fa708-eef8-49dc-a838-1b05c6671d48'
-          },
-          {
-            group: 'left',
-            id: 'bf781b79-37cd-48f2-b720-1ac39dd51a75'
-          }
-        ]
-      },
-      id: '3da368fb-d138-48e5-91bd-5786a88aab92',
-      zIndex: 6,
-      data: {
-        status: '0',
-        pointCode: '52',
-        fieldName: 'fieldName1'
-      }
-    },
-    {
-      position: {
-        x: 670,
-        y: 260
-      },
-      size: {
-        width: 80,
-        height: 42
-      },
-      attrs: {
-        text: {
-          text: '流程'
+          items: [
+            {
+              group: 'top',
+              id: '1fe61800-0c92-4856-bc2b-60a15a5c3fa3'
+            },
+            {
+              group: 'right',
+              id: '80fcb40d-932c-45c2-8534-6bfb911ad425'
+            },
+            {
+              group: 'bottom',
+              id: '397fa708-eef8-49dc-a838-1b05c6671d48'
+            },
+            {
+              group: 'left',
+              id: 'bf781b79-37cd-48f2-b720-1ac39dd51a75'
+            }
+          ]
+        },
+        id: '3da368fb-d138-48e5-91bd-5786a88aab92',
+        zIndex: 6,
+        data: {
+          status: '0',
+          pointCode: '52',
+          fieldName: 'fieldName1'
         }
       },
-      visible: true,
-      shape: 'flow-chart-rect',
-      ports: {
-        groups: {
-          top: {
-            position: 'top',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+      {
+        position: {
+          x: 670,
+          y: 260
+        },
+        size: {
+          width: 80,
+          height: 42
+        },
+        attrs: {
+          text: {
+            text: '流程'
+          }
+        },
+        visible: true,
+        shape: 'flow-chart-rect',
+        ports: {
+          groups: {
+            top: {
+              position: 'top',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
-            }
-          },
-          right: {
-            position: 'right',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+            },
+            right: {
+              position: 'right',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
-            }
-          },
-          bottom: {
-            position: 'bottom',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+            },
+            bottom: {
+              position: 'bottom',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
-            }
-          },
-          left: {
-            position: 'left',
-            attrs: {
-              circle: {
-                r: 4,
-                magnet: true,
-                stroke: '#5F95FF',
-                strokeWidth: 1,
-                fill: '#fff',
-                style: {
-                  visibility: 'hidden'
+            },
+            left: {
+              position: 'left',
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
                 }
               }
             }
-          }
-        },
-        items: [
-          {
-            group: 'top',
-            id: '1fe61800-0c92-4856-bc2b-60a15a5c3fa3'
-          },
-          {
-            group: 'right',
-            id: '80fcb40d-932c-45c2-8534-6bfb911ad425'
           },
-          {
-            group: 'bottom',
-            id: '397fa708-eef8-49dc-a838-1b05c6671d48'
-          },
-          {
-            group: 'left',
-            id: 'bf781b79-37cd-48f2-b720-1ac39dd51a75'
-          }
-        ]
-      },
-      id: '109863ec-a695-4fb7-998b-dab3b40dee56',
-      zIndex: 7,
-      data: {
-        status: '0',
-        pointCode: '52',
-        fieldName: 'fieldName1'
+          items: [
+            {
+              group: 'top',
+              id: '1fe61800-0c92-4856-bc2b-60a15a5c3fa3'
+            },
+            {
+              group: 'right',
+              id: '80fcb40d-932c-45c2-8534-6bfb911ad425'
+            },
+            {
+              group: 'bottom',
+              id: '397fa708-eef8-49dc-a838-1b05c6671d48'
+            },
+            {
+              group: 'left',
+              id: 'bf781b79-37cd-48f2-b720-1ac39dd51a75'
+            }
+          ]
+        },
+        id: '109863ec-a695-4fb7-998b-dab3b40dee56',
+        zIndex: 7,
+        data: {
+          status: '0',
+          pointCode: '52',
+          fieldName: 'fieldName1'
+        }
       }
-    }
-  ]
+    ]
+  }
 }

src/views/graph/index.ts

@@ -377,7 +377,7 @@ export default class FlowGraph {
   }
 
   // 根据json渲染节点和边
-  public static initGraphShape(gd: any = graphData) {
+  public static initGraphShape(gd: any = graphData.cells) {
     this.graph.fromJSON(gd)
   }