标准处置流程

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@antv/g6": "^5.0.44",
     "@antv/layout": "^1.2.14-beta.8",
     "@antv/x6": "^2.18.1",
     "@antv/x6-vue-shape": "^2.1.2",

src/views/left/dialog/components/DisposalProgressContentSecond.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="container">
+    <div class="graph-box">
+      <template v-for="(item, index) in nodeData" :key="index">
+        <div class="graph-container">
+          <div class="first-box">{{ item.id }}</div>
+          <div class="second-container">
+            <template
+              v-for="(secondItem, index1) in item.children"
+              :key="index1"
+            >
+              <div class="second-box">{{ secondItem.id }}</div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { Graph, treeToGraphData } from "@antv/g6";
+import { id } from "element-plus/es/locales.mjs";
+
+const nodeData = [
+  {
+    id: "发现报告",
+    children: [
+      { id: "信息接报" },
+      { id: "信息核实" },
+      { id: "快速评估" },
+      { id: "信息上报" },
+    ],
+  },
+  {
+    id: "个案调查处置",
+    children: [
+      { id: "李梦康" },
+      {
+        id: "毛超",
+        children: [
+          {
+            id: "病例管理",
+          },
+          {
+            id: "流行病学调查",
+          },
+          {
+            id: "实验室检测",
+          },
+          {
+            id: "风险评估",
+          },
+        ],
+      },
+      { id: "贾子敏" },
+    ],
+  },
+  {
+    id: "风险人员和环境排查管控",
+    children: [
+      { id: "李梦康" },
+      {
+        id: "毛超",
+        children: [
+          {
+            id: "病例管理",
+          },
+          {
+            id: "流行病学调查",
+          },
+          {
+            id: "实验室检测",
+          },
+          {
+            id: "风险评估",
+          },
+        ],
+      },
+      { id: "贾子敏" },
+    ],
+  },
+  {
+    id: "区域风险排查管控",
+  },
+  {
+    id: "结案",
+  },
+];
+
+// **画布**
+const graphRef = ref(null);
+
+function isLeafNode(d) {
+  return !d.children || d.children.length === 0;
+}
+
+// **初始化 X6 画布**
+onMounted(() => {});
+</script>
+
+<style land="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+#graph_container {
+  width: 100%;
+  height: 100%;
+}
+
+.graph-container {
+  display: flex;
+  align-items: center;
+  margin: 45px;
+  .first-box {
+    width: 100px;
+    height: 50px;
+    margin-right: 45px;
+    background-color: rgba(0, 4, 255, 0.288);
+  }
+  .second-container {
+    .second-box {
+      position: relative;
+      width: 100px;
+      height: 50px;
+      background-color: rgba(0, 60, 255, 0.406);
+      &::after {
+        position: absolute;
+        width: 30px;
+        height: 1px;
+        left: -30px;
+        background-color: rgba(0, 60, 255, 0.406);
+      }
+    }
+  }
+}
+</style>