feat: 新增mock数据

src/api/interface/case.ts

@@ -0,0 +1,24 @@
+/**
+ * 查询参数
+ */
+export interface CaseQuery extends PageQuery {
+  name?: string
+}
+
+/**
+ * 接收后端返回信息
+ */
+export interface CaseVO extends BaseEntity {
+  id: string
+  name: string
+  type: string
+}
+
+/**
+ * 传入后端的表单信息
+ */
+export interface CaseBO {
+  id: string
+  name: string
+  type: string
+}

src/assets/images/login_bg.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">
+
+  <rect x="1300" y="400" rx="40" ry="40" width="150" height="150" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
+  </rect>
+
+  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" fill="#a2b3ff">
+    <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="150" cy="150" r="180" stroke="#85FFBD" fill="#85FFBD">
+    <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- 三角形 -->
+  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580"  fill="#a2b3ff">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
+  </path>
+
+<!--  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">-->
+<!--    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>-->
+<!--  </circle>-->
+
+  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" fill="#3054EB">
+    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="#3054EB">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
+  </rect>
+</svg>

src/assets/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/layouts/index.vue

@@ -3,7 +3,7 @@
     <el-header>
       <div>
         <el-button color="#626aef" @click="handleClickMenu('/')">测试用例</el-button>
-        <el-button color="#626aef" @click="handleClickMenu('/flow')">用例设计</el-button>
+        <!-- <el-button color="#626aef" @click="handleClickMenu('/flow')">用例设计</el-button> -->
       </div>
       <div>
         <el-button @click="reload">刷新</el-button>

src/router/index.ts

@@ -29,13 +29,27 @@ const asyncRoutes: Array<RouteRecordRaw> = [
     meta: {},
     children: [
       {
-        path: '/flow',
+        path: '/flow/:id',
         name: 'Flow',
         meta: { hidden: false, title: '用例设计' },
         component: () => import('@/views/test/flow.vue')
       }
     ]
   },
+  {
+    path: '/test',
+    name: 'test',
+    component: Layout,
+    meta: {},
+    children: [
+      {
+        path: '/detail/:id',
+        name: 'FlowDetail',
+        meta: { hidden: false, title: '用例查看' },
+        component: () => import('@/views/test/detail.vue')
+      }
+    ]
+  },
   {
     path: '/:pathMatch(.*)*',
     name: 'NoFound',
@@ -61,7 +75,6 @@ export const addRouter = (routes: any) => {
 export function setupRouter(app: any) {
   // 开发路由
   addRouter(asyncRoutes)
-  console.log(router.getRoutes())
   app.use(router)
   return router
 }

src/views/data/index.ts

@@ -0,0 +1,14 @@
+export default {
+  list: [
+    {
+      id: '76575g76t-8g678g-hu9we89-1212',
+      name: 'XX用例设计001',
+      type: '故障注入'
+    },
+    {
+      id: 'teg345g34-435634tg-2346245t-234tf345',
+      name: 'XX用例设计002',
+      type: '故障注入'
+    }
+  ]
+}

src/views/error/404.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex-center wh-full">
-    <img src="@/assets/images/404.png" class="h-[50vh]" alt="404" />
+  <div class="flx-center">
+    <img src="@/assets/images/404.png" alt="404" />
     <div class="flex flex-col">
       <h2>404</h2>
       <h4>抱歉，您访问的页面不存在~😂😂</h4>
-      <t-button @click="router.back"> 返回上一页 </t-button>
+      <el-button @click="router.back"> 返回上一页 </el-button>
     </div>
   </div>
 </template>

src/views/graph/data/data.ts

@@ -1,6 +1,5 @@
 export default {
-  id: 'teg345g34-435634tg-2346245t-234tf345',
-  cells: {
+  '76575g76t-8g678g-hu9we89-1212': {
     cells: [
       {
         position: {
@@ -325,5 +324,541 @@ export default {
         }
       }
     ]
+  },
+  'teg345g34-435634tg-2346245t-234tf345': {
+    cells: [
+      {
+        position: {
+          x: 340,
+          y: 150
+        },
+        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'
+                  }
+                }
+              }
+            },
+            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'
+                  }
+                }
+              }
+            }
+          },
+          items: [
+            {
+              group: 'top',
+              id: 'f0b911c3-18a6-4b4e-95cb-f43f358c32ab'
+            },
+            {
+              group: 'right',
+              id: '61162dc4-d323-45b5-a2a4-266022a96b5c'
+            },
+            {
+              group: 'bottom',
+              id: 'c2677c81-6baf-4cdb-9f72-60b288f543ff'
+            },
+            {
+              group: 'left',
+              id: '69c6da1b-64c5-4d28-869a-7709209f22d3'
+            }
+          ]
+        },
+        id: '3f9692c6-32e8-4aa6-80f5-103f49a7e680',
+        zIndex: 1,
+        data: {
+          status: '0',
+          pointCode: '52',
+          fieldName: 'fieldName1'
+        },
+        tools: {
+          items: [],
+          name: null
+        }
+      },
+      {
+        shape: 'edge',
+        attrs: {
+          line: {
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            targetMarker: {
+              name: 'classic',
+              size: 8
+            }
+          }
+        },
+        id: '6c100db1-0b67-4cbc-a4d9-7da9655659a1',
+        router: {
+          name: 'manhattan'
+        },
+        source: {
+          cell: '3f9692c6-32e8-4aa6-80f5-103f49a7e680',
+          port: 'c2677c81-6baf-4cdb-9f72-60b288f543ff'
+        },
+        target: {
+          cell: '734eccdb-3772-418b-a8a5-9ec2c4a2545d',
+          port: 'e04e03d5-f14a-4adb-b05d-63ba362eda40'
+        },
+        zIndex: 1
+      },
+      {
+        position: {
+          x: 340,
+          y: 56
+        },
+        size: {
+          width: 80,
+          height: 42
+        },
+        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'
+                  }
+                }
+              }
+            },
+            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'
+                  }
+                }
+              }
+            }
+          },
+          items: [
+            {
+              group: 'top',
+              id: '1534952e-9a67-415f-900c-aa8b2e52f531'
+            },
+            {
+              group: 'right',
+              id: '9e941fba-702f-4d30-a10c-ba8d6edbe152'
+            },
+            {
+              group: 'bottom',
+              id: '4fc9f932-a58a-42d3-855e-5c527d3b5e3a'
+            },
+            {
+              group: 'left',
+              id: 'f113795c-3774-401e-a93d-f5f86217bcf6'
+            }
+          ]
+        },
+        id: '1a02a27d-d9f5-4d7f-a878-be6c9dd2c991',
+        zIndex: 2,
+        data: {
+          status: '0',
+          pointCode: '52',
+          fieldName: 'fieldName1'
+        },
+        tools: {
+          items: [],
+          name: null
+        }
+      },
+      {
+        angle: 45,
+        position: {
+          x: 354,
+          y: 234
+        },
+        size: {
+          width: 52,
+          height: 52
+        },
+        attrs: {
+          text: {
+            text: '判断',
+            transform: 'rotate(-45deg)'
+          }
+        },
+        visible: true,
+        shape: 'flow-chart-rect',
+        ports: {
+          groups: {
+            top: {
+              position: {
+                name: 'top',
+                args: {
+                  dx: -26
+                }
+              },
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
+                }
+              }
+            },
+            right: {
+              position: {
+                name: 'right',
+                args: {
+                  dy: -26
+                }
+              },
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
+                }
+              }
+            },
+            bottom: {
+              position: {
+                name: 'bottom',
+                args: {
+                  dx: 26
+                }
+              },
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
+                }
+              }
+            },
+            left: {
+              position: {
+                name: 'left',
+                args: {
+                  dy: 26
+                }
+              },
+              attrs: {
+                circle: {
+                  r: 4,
+                  magnet: true,
+                  stroke: '#5F95FF',
+                  strokeWidth: 1,
+                  fill: '#fff',
+                  style: {
+                    visibility: 'hidden'
+                  }
+                }
+              }
+            }
+          },
+          items: [
+            {
+              group: 'top',
+              id: '550b8226-4e15-41d5-9cf8-f4b9ad7c2e74'
+            },
+            {
+              group: 'right',
+              id: '69c160f7-6d0b-49c5-bf37-8be5abaa003b'
+            },
+            {
+              group: 'bottom',
+              id: '90eb295d-25c4-4b42-82ca-6e8965bc2b89'
+            },
+            {
+              group: 'left',
+              id: 'a5422984-96ca-4bf9-9101-95c94e38575e'
+            }
+          ]
+        },
+        id: 'ae309caf-3a78-4abc-9e76-d3864f93fc6d',
+        zIndex: 3
+      },
+      {
+        position: {
+          x: 280,
+          y: 359
+        },
+        size: {
+          width: 200,
+          height: 60
+        },
+        attrs: {
+          text: {
+            text: '测试xx流程'
+          },
+          title: {
+            text: 'XX子流程'
+          },
+          lip: {
+            transform: 'scale(0.01)'
+          }
+        },
+        visible: true,
+        shape: 'sub-flow-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'
+                  }
+                }
+              }
+            },
+            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'
+                  }
+                }
+              }
+            }
+          },
+          items: [
+            {
+              group: 'top',
+              id: '08bd3d75-92be-46c7-be66-c9d567bdf104'
+            },
+            {
+              group: 'right',
+              id: 'e04e03d5-f14a-4adb-b05d-63ba362eda40'
+            },
+            {
+              group: 'bottom',
+              id: '9f273323-7696-450d-9504-7d07907e3590'
+            },
+            {
+              group: 'left',
+              id: 'd29ef11d-34fe-43ba-92af-29cc40949ccd'
+            }
+          ]
+        },
+        id: '734eccdb-3772-418b-a8a5-9ec2c4a2545d',
+        zIndex: 4
+      },
+      {
+        shape: 'edge',
+        attrs: {
+          line: {
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            targetMarker: {
+              name: 'classic',
+              size: 8
+            }
+          }
+        },
+        id: '079a74cc-262b-443e-b4d9-9acbf2f81948',
+        router: {
+          name: 'manhattan'
+        },
+        source: {
+          cell: 'ae309caf-3a78-4abc-9e76-d3864f93fc6d',
+          port: '90eb295d-25c4-4b42-82ca-6e8965bc2b89'
+        },
+        target: {
+          cell: '734eccdb-3772-418b-a8a5-9ec2c4a2545d',
+          port: '08bd3d75-92be-46c7-be66-c9d567bdf104'
+        },
+        zIndex: 5
+      },
+      {
+        shape: 'edge',
+        attrs: {
+          line: {
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            targetMarker: {
+              name: 'classic',
+              size: 8
+            }
+          }
+        },
+        id: '244bf36e-c3bb-4213-a4cd-aa898273426f',
+        router: {
+          name: 'manhattan'
+        },
+        source: {
+          cell: '1a02a27d-d9f5-4d7f-a878-be6c9dd2c991',
+          port: '4fc9f932-a58a-42d3-855e-5c527d3b5e3a'
+        },
+        target: {
+          cell: '3f9692c6-32e8-4aa6-80f5-103f49a7e680',
+          port: 'f0b911c3-18a6-4b4e-95cb-f43f358c32ab'
+        },
+        zIndex: 6
+      }
+    ]
   }
 }

src/views/graph/data/data1.ts

@@ -0,0 +1,329 @@
+export default {
+  id: 'teg345g34-435634tg-2346245t-234tf345',
+  cells: {
+    cells: [
+      {
+        position: {
+          x: 630,
+          y: 60
+        },
+        size: {
+          width: 210,
+          height: 520
+        },
+        attrs: {
+          text: {
+            text: '开始1111111111'
+          },
+          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'
+                  }
+                }
+              }
+            },
+            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'
+                  }
+                }
+              }
+            }
+          },
+          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: '流程'
+          }
+        },
+        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'
+                  }
+                }
+              }
+            },
+            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'
+                  }
+                }
+              }
+            }
+          },
+          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: '流程'
+          }
+        },
+        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'
+                  }
+                }
+              }
+            },
+            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'
+                  }
+                }
+              }
+            }
+          },
+          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

@@ -2,7 +2,6 @@ import { Graph, FunctionExt, Shape, Addon } from '@antv/x6'
 
 import insertCss from 'insert-css'
 import './shape'
-import graphData from './data/data'
 ;(insertCss as any)(`
   @keyframes ant-line {
     to {
@@ -174,7 +173,7 @@ export default class FlowGraph {
     }
     this.initStencil()
     this.initShape()
-    this.initGraphShape()
+    // this.initGraphShape()
     this.initEvent()
     return this.graph
   }
@@ -376,7 +375,7 @@ export default class FlowGraph {
   }
 
   // 根据json渲染节点和边
-  public static initGraphShape(gd: any = graphData.cells) {
+  public static initGraphShape(gd: any) {
     this.graph.fromJSON(gd)
   }
 

src/views/test/detail.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="index">
+    <div id="flow-image">
+      <el-button
+        style="position: absolute; top: 2px; right: 2px; z-index: 9999"
+        @click="$router.push('/index')">
+        返回
+      </el-button>
+      <!-- <el-button
+        style="position: absolute; top: 2px; right: 60px; z-index: 9999"
+        @click="editFlowData"
+        >Edit Data</el-button
+      > -->
+      <div id="flow-container"></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { Graph } from '@antv/x6'
+import FlowGraph from '../graph'
+// import { Edit } from '@element-plus/icons-vue'
+
+import { $, getContainerSize } from '@/utils'
+
+const router = useRouter()
+
+let graph: Graph
+
+onMounted(() => {
+  getFlowJson()
+})
+
+onUnmounted(() => {
+  // 销毁画布，资源回收
+  if (graph) graph.dispose()
+  // 移除监听
+  window.removeEventListener('resize', resizeFn)
+})
+
+// 去后台拿json
+const getFlowJson = () => {
+  // 使用setTimeout模拟一下
+  setTimeout(() => {
+    const graphJson = JSON.parse(window.localStorage.getItem('graphJson') || '{}')
+    if (graphJson && JSON.stringify(graphJson) !== '{}') {
+      initFlowImage(graphJson)
+    } else {
+      router.push('/flow')
+    }
+  }, 200)
+}
+
+// 根据json渲染
+function initFlowImage(graphJson: any) {
+  // 初始化画板
+  graph = FlowGraph.init(
+    $('#flow-container'),
+    $('#flow-container').getBoundingClientRect().width,
+    $('#flow-container').getBoundingClientRect().height,
+    false
+  )
+  // 渲染操作
+  graph.fromJSON(graphJson)
+
+  // 监听数据改变事件
+  graph.getNodes().forEach(node => {
+    if (node.getData()) {
+      node.on('change:data', ({ cell, current }) => {
+        // current 就是我们绑定的 业务属性data
+        if (current.status == 0) {
+          cell.attr('body/fill', 'red')
+          cell.attr('text/fill', '#fff')
+          cell.attr('text/text', '100℃')
+        } else {
+          cell.attr('body/fill', 'green')
+          cell.attr('text/fill', '#080808')
+          cell.attr('text/text', '150℃')
+        }
+      })
+    }
+  })
+  window.addEventListener('resize', resizeFn)
+}
+
+// 改变状态
+// function editFlowData() {
+//   graph.getNodes().forEach(node => {
+//     if (node.getData()) {
+//       let curStatus = node.getData().status
+//       node.setData({
+//         status: curStatus == 0 ? 1 : 0
+//       })
+//     }
+//   })
+// }
+
+const resizeFn = () => {
+  setTimeout(() => {
+    const { width, height } = getContainerSize($('#flow-image'))
+    graph.resize(width, height)
+  }, 100)
+}
+</script>
+<style scoped>
+.index {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#flow-image {
+  width: 80%;
+  height: 90%;
+  position: relative;
+}
+#flow-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

src/views/test/flow.vue

@@ -25,8 +25,10 @@ import { $, getContainerSize } from '@/utils'
 import FlowGraph from '../graph'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import SubFlowDialog from './components/subFlow.vue'
-
+import graphData from '../graph/data/data'
 import { Graph } from '@antv/x6'
+const router = useRouter()
+const route = useRoute()
 let isReady = ref(false)
 let destroyFn = ref<Function>(() => {})
 onMounted(() => {
@@ -52,6 +54,8 @@ const initGraph = () => {
     }
     handleContextmenu(e, cell)
   })
+  const id = route.params.id as string
+  FlowGraph.initGraphShape(graphData[id].cells)
   isReady.value = true
   const resizeFn = () => {
     const { width, height } = getContainerSize($('.panel'))
@@ -67,6 +71,7 @@ const initGraph = () => {
 
 // 右键菜单
 const handleContextmenu = (e: { pageX: any; pageY: any }, cell) => {
+  debugger
   const cells = graph.value?.getSelectedCells() || []
   ContextMenu.showContextMenu({
     x: e.pageX,
@@ -76,7 +81,7 @@ const handleContextmenu = (e: { pageX: any; pageY: any }, cell) => {
         label: '编辑子流程',
         onClick: () => {
           if (cell) {
-            openDialog('编辑子流程', null)
+            openEdit(cell.id)
           }
         }
       },
@@ -110,13 +115,8 @@ const handleContextmenu = (e: { pageX: any; pageY: any }, cell) => {
 
 // 打开 dialog
 const dialogRef = ref<InstanceType<typeof SubFlowDialog> | null>(null)
-const openDialog = (title: string, row) => {
-  const params = {
-    title,
-    row: { ...row },
-    isView: title === '查看'
-  }
-  dialogRef.value?.acceptParams(params)
+const openEdit = (id: string) => {
+  router.push(`/flow/${id}`)
 }
 </script>
 <style lang="scss" scoped>

src/views/test/index.vue

@@ -42,8 +42,10 @@
             <el-button link type="primary" size="small" @click="openDialog('编辑', row)"
               >详情
             </el-button>
-            <el-button link type="primary" size="small">流程查看</el-button>
-            <el-button link type="primary" size="small">流程设计</el-button>
+            <el-button link type="primary" size="small" @click="detail(row)">流程查看</el-button>
+            <el-button link type="primary" size="small" @click="designFlow(row)">
+              流程设计
+            </el-button>
             <el-button link type="primary" size="small" @click="openDialog('编辑', row)"
               >编辑</el-button
             >
@@ -67,8 +69,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ConfigVO } from '@/api/interface/config'
+import { CaseVO } from '@/api/interface/case'
 import AddDialog from './components/index.vue'
+import data from '../data'
+const router = useRouter()
 const tableRef = ref()
 const pageable = {
   // 当前页数
@@ -101,22 +105,11 @@ const handleCurrentChange = (_val: number) => {}
 const onSubmit = () => {
   console.log('submit!')
 }
-const tableData: ConfigVO[] = [
-  {
-    id: '76575g76t-8g678g-hu9we89-89dsc',
-    name: 'XX用例设计',
-    type: '故障注入'
-  },
-  {
-    id: 'teg345g34-435634tg-2346245t-234tf345',
-    name: 'XX用例设计',
-    type: '故障注入'
-  }
-]
+const tableData: CaseVO[] = data.list
 
 // 打开 dialog(新增、查看、编辑)
 const dialogRef = ref<InstanceType<typeof AddDialog> | null>(null)
-const openDialog = (title: string, row: Partial<ConfigVO> = {}) => {
+const openDialog = (title: string, row: Partial<CaseVO> = {}) => {
   const params = {
     title,
     row: { ...row },
@@ -124,5 +117,12 @@ const openDialog = (title: string, row: Partial<ConfigVO> = {}) => {
   }
   dialogRef.value?.acceptParams(params)
 }
+
+const designFlow = (row: Partial<CaseVO> = {}) => {
+  router.push(`/flow/${row.id}`)
+}
+const detail = (row: Partial<CaseVO> = {}) => {
+  router.push(`/detail/${row.id}`)
+}
 </script>
 <style lang="scss" scoped></style>