蛇形。

src/hooks/vueflowHooks.ts

@@ -0,0 +1,38 @@
+export const useSnakeLayoutHook = (
+  nodes: any[],
+  canvasHeight: number,
+  spacingY: number = 150,
+  spacingX: number = 150
+) => {
+  const snakeNodes = [];
+
+  console.log("hook", nodes);
+  const nodesPerColumn = Math.floor(canvasHeight / spacingY);
+
+  // console.log(canvasHeight, canvasHeight / spacingY);
+
+  nodes.forEach((node, index) => {
+    const col = Math.floor(index / nodesPerColumn);
+    const row = index % nodesPerColumn;
+
+    // 根据行号计算位置，奇数列从下到上，偶数列从上到下
+    const adjustedRow = row;
+    // const adjustedRow = col % 2 === 0 ? row : nodesPerColumn - 1 - row;
+
+    node.position = {
+      x: col * spacingX,
+      y: adjustedRow * spacingY,
+    };
+
+    // 更新奇数列的 handle 处理
+    // if (col % 2 !== 0) {
+    //   // 奇数列的节点调整 handle 位置
+    //   node.data.handleDirection = 'toTop'; //如果是第二列 也就是奇数列 调整箭头向上
+    // } else {
+    //   node.data.handleDirection = 'toDown';
+    // }
+
+    snakeNodes.push(node);
+  });
+  return snakeNodes;
+};

src/views/base/craftManagement/route/bindProcess.vue

@@ -91,7 +91,7 @@
 
             <Panel class="process-panel" position="top-right">
               <div class="layout-panel">
-                <button title="蛇形排列" @click="layoutGraph('TB')">
+                <button title="蛇形排列" @click="convertToSnakeLayout">
                   <PannelIcon name="liucheng" />
                 </button>
                 <button title="撤回" @click="goBack">
@@ -278,6 +278,7 @@ import { ElMessage } from "element-plus";
 import { useScreenshot } from "./screenshot.ts";
 import { useLayout } from "@/hooks/useLayout";
 import { initialEdges, initialNodes } from "./initial-elements";
+import { useSnakeLayoutHook } from "@/hooks/vueflowHooks";
 defineOptions({
   name: "bindProcess/:id/:prodtCode",
 });
@@ -607,6 +608,10 @@ async function layoutGraph(direction) {
     fitView();
   });
 }
+// 转换为蛇形布局
+const convertToSnakeLayout = () => {
+  nodes.value = useSnakeLayoutHook(nodes.value);
+};
 </script>
 
 <style lang="scss" scoped>