优化

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

@@ -1,27 +1,25 @@
 <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>
+    <el-scrollbar class="scrollbox">
+      <div class="graph-box">
+        <template v-for="(item, index) in nodeData" :key="index">
+          <div class="graph-container">
+            <div class="first-box">
+              <div class="content">{{ item.id }}</div>
+              <div class="status-box">进行中</div>
+            </div>
+            <DisposalChildBox :data="item" />
           </div>
-        </div>
-      </template>
-    </div>
+        </template>
+      </div>
+    </el-scrollbar>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
 import { Graph, treeToGraphData } from "@antv/g6";
-import { id } from "element-plus/es/locales.mjs";
+import DisposalChildBox from "./common/DisposalChildBox.vue";
 
 const nodeData = [
   {
@@ -104,6 +102,9 @@ onMounted(() => {});
 .container {
   width: 100%;
   height: 100%;
+  .scrollbox {
+    height: calc(100% - 10px);
+  }
 }
 
 #graph_container {
@@ -112,28 +113,75 @@ onMounted(() => {});
 }
 
 .graph-container {
+  position: relative;
   display: flex;
   align-items: center;
-  margin: 45px;
-  .first-box {
-    width: 100px;
-    height: 50px;
-    margin-right: 45px;
-    background-color: rgba(0, 4, 255, 0.288);
+  margin: 30px 15px;
+  margin-right: 0;
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 1px;
+    top: -15px;
+    height: calc(50% - 18px);
+    left: 60px;
+    border-left: 2px dashed #3fa7b6;
+    z-index: 1;
+  }
+  &:first-child {
+    margin-top: 15px;
+    &::before {
+      display: none;
+    }
+  }
+  &::after {
+    position: absolute;
+    content: "";
+    width: 1px;
+    height: calc(50% - 18px);
+    bottom: -15px;
+    left: 60px;
+    border-left: 2px dashed #3fa7b6;
+    z-index: 1;
   }
-  .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);
-      }
+  &:last-child {
+    margin-top: 15px;
+    &::after {
+      display: none;
+    }
+  }
+  .first-box {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    min-height: 73px;
+    padding: 5px 0;
+    flex-shrink: 0;
+    background: rgba(16, 252, 255, 0.25);
+    border-radius: 6px 6px 6px 6px;
+    border: 1px solid #10fcff;
+    z-index: 9;
+
+    .content {
+      width: 119px;
+      white-space: wrap;
+      font-family: Alibaba PuHuiTi;
+      font-weight: normal;
+      font-size: 18px;
+      line-height: 24px;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+      background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .status-box{
+      margin-top: 5px;
     }
   }
 }

src/views/left/dialog/components/common/DisposalChildBox.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="child-container">
+    <div class="vertical-line" v-if="data?.children?.length > 0"></div>
+    <template v-for="(item, index) in data.children" :key="index">
+      <div class="child-box" :class="{ first: index == 0 }">
+        <div class="left-line"></div>
+
+        <div class="child-content">
+          <div>{{ item.id }}</div>
+          <div>进行中</div>
+        </div>
+        <DisposalChildBox
+          v-if="item?.children?.length > 0"
+          :data="item"
+        ></DisposalChildBox>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.child-container {
+  position: relative;
+  margin-left: 75px;
+
+  .vertical-line {
+    position: absolute;
+    width: 25px;
+    left: -78px;
+    top: calc(50% + 1px);
+    transform: translateY(-50%);
+    border-bottom: 2px dashed #3fa7b6;
+  }
+
+  .child-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    .child-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin: 5px 0;
+      width: 112px;
+      height: 46px;
+      background: rgba(16, 154, 255, 0.15);
+      border-radius: 6px 6px 6px 6px;
+      border: 1px solid #109aff;
+    }
+    .left-line {
+      position: absolute;
+      content: "";
+      width: 1px;
+      top: 0px;
+      bottom: 0px;
+      left: -50px;
+      border-right: 2px dashed #3fa7b6;
+    }
+    &.first {
+      .left-line {
+        position: absolute;
+        content: "";
+        width: 1px;
+        top: 50%;
+        bottom: 0px;
+        left: -50px;
+        border-right: 2px dashed #3fa7b6;
+      }
+    }
+    &:last-child {
+      .left-line {
+        position: absolute;
+        content: "";
+        width: 1px;
+        bottom: 50%;
+        top: 0px;
+        left: -50px;
+        border-right: 2px dashed #3fa7b6;
+      }
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      width: 40px;
+      height: 2px;
+      left: -50px;
+      top: 50%;
+      transform: translateY(-50%);
+      border-bottom: 2px dashed #3fa7b6;
+    }
+    &::before {
+      position: absolute;
+      content: "";
+      width: 25px;
+      height: 18px;
+      left: -30px;
+      top: 50%;
+      transform: translateY(-50%);
+      background-image: url("../../../../../assets/img/节点连线箭头.png");
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>