优化

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

@@ -9,14 +9,14 @@
                 class="line-top"
                 :style="{ opacity: index == 0 ? 0 : 1 }"
               ></div>
-              <div class="first-box">
-                <div class="content">{{ item.id }}</div>
+              <div class="first-box" @click="handleNodeClick(item)">
+                <div class="content">{{ item.nodeName }}</div>
                 <div
                   class="status-box"
-                  :class="getStatus(item.status)"
-                  v-if="item.status"
+                  :class="getStatus(item.state)"
+                  v-if="item.state"
                 >
-                  {{ item.status }}
+                  {{ item.state }}
                 </div>
               </div>
               <div
@@ -25,7 +25,7 @@
               ></div>
             </div>
 
-            <DisposalChildBox :data="item" />
+            <DisposalChildBox :data="item" @nodeClick="handleNodeClick" />
             <div
               class="node-data"
               v-if="!item.children || item.children?.length == 0"
@@ -51,75 +51,70 @@ const getStatus = (status) => {
   return "status-no";
 };
 
+//点击节点
+const handleNodeClick = (item) => {
+  console.log(item);
+};
+
 const nodeData = [
   {
-    id: "发现报告",
-    status: "已完成",
+    nodeId: 1,
+    nodeName: "发现报告",
+    state: "已完成",
     children: [
-      { id: "信息接报", status: "已完成" },
-      { id: "信息核实", status: "已完成" },
-      { id: "快速评估", status: "已完成" },
-      { id: "信息上报", status: "已完成" },
+      { nodeId: "1-1", nodeName: "信息接报", state: "已完成" },
+      { nodeId: "1-2", nodeName: "信息核实", state: "已完成" },
+      { nodeId: "1-3", nodeName: "快速评估", state: "已完成" },
+      { nodeId: "1-4", nodeName: "信息上报", state: "已完成" },
     ],
   },
   {
-    id: "个案调查处置",
-    status: "进行中",
+    nodeId: 2,
+    nodeName: "个案调查处置",
+    state: "进行中",
     children: [
-      { id: "李梦康", status: "已完成" },
       {
-        id: "毛超",
-        status: "已完成",
+        nodeId: "2-1",
+        nodeName: "李梦康",
+        state: "已完成",
+      },
+      {
+        nodeId: "2-2",
+        nodeName: "毛超",
+        state: "已完成",
         children: [
-          {
-            id: "病例管理",
-          },
-          {
-            id: "流行病学调查",
-          },
-          {
-            id: "实验室检测",
-          },
-          {
-            id: "风险评估",
-          },
+          { nodeId: "2-2-1", nodeName: "病例管理", state: "已完成" },
+          { nodeId: "2-2-2", nodeName: "流行病学调查", state: "已完成" },
+          { nodeId: "2-2-3", nodeName: "实验室检测", state: "已完成" },
+          { nodeId: "2-2-4", nodeName: "风险评估", state: "已完成" },
         ],
       },
-      { id: "贾子敏" },
+      { nodeId: "2-3", nodeName: "贾子敏", state: "进行中" },
     ],
   },
   {
-    id: "风险人员和环境排查管控",
-    status: "进行中",
+    nodeId: 3,
+    nodeName: "风险人员和环境排查管控",
+    state: "进行中",
     children: [
-      { id: "李梦康" },
+      { nodeId: "3-1", nodeName: "段伟", state: "已完成" },
+      { nodeId: "3-2", nodeName: "陆成奇", state: "已完成" },
       {
-        id: "毛超",
+        nodeId: "3-3",
+        nodeName: "曾强",
+        state: "进行中",
         children: [
-          {
-            id: "病例管理",
-          },
-          {
-            id: "流行病学调查",
-          },
-          {
-            id: "实验室检测",
-          },
-          {
-            id: "风险评估",
-          },
+          { nodeId: "3-3-1", nodeName: "病例管理", state: "已完成" },
+          { nodeId: "3-3-2", nodeName: "流行病学调查", state: "已完成" },
+          { nodeId: "3-3-3", nodeName: "实验室检测", state: "进行中" },
+          { nodeId: "3-3-4", nodeName: "风险人员管控", state: "进行中" },
+          { nodeId: "3-3-5", nodeName: "风险场所管控", state: "进行中" },
         ],
       },
-      { id: "贾子敏" },
     ],
   },
-  {
-    id: "区域风险排查管控",
-    status: "未开始",
-  },
-  {
-    id: "结案",
-  },
+  { nodeId: 4, nodeName: "区域风险排查管控", state: "未开始" },
+  { nodeId: 5, nodeName: "结案" },
 ];
 
 // **画布**
@@ -238,6 +233,7 @@ onMounted(() => {});
     border-radius: 6px 6px 6px 6px;
     border: 1px solid #10fcff;
     z-index: 9;
+    cursor: pointer;
 
     .content {
       width: 119px;
@@ -254,24 +250,34 @@ onMounted(() => {});
       -webkit-text-fill-color: transparent;
     }
     .status-box {
-      margin-top: 5px;
-      padding: 3px 20px;
+      margin-top: 10px;
+      padding: 0px 15px;
+      font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+      font-weight: normal;
+      font-size: 14px;
+      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
     }
     .status-green {
       background-image: url("../../../../assets/img/Component 247.png");
       background-size: 100% 100%;
       background-repeat: no-repeat;
+      color: #9de05a;
     }
     .status-red {
       background-image: url("../../../../assets/img/Component 246.png");
       background-size: 150% 100%;
       background-position-x: 50%;
       background-repeat: no-repeat;
+      color: #ff4a4a;
     }
     .status-no {
       background-image: url("../../../../assets/img/Component 245.png");
       background-size: 100% 100%;
       background-repeat: no-repeat;
+      color: #c9c9c9;
     }
   }
 }

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

@@ -2,22 +2,26 @@
   <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="child-box"
+        :class="{ first: index == 0, last: index == data.children?.length - 1 }"
+      >
         <div class="left-line"></div>
 
-        <div class="child-content">
-          <div>{{ item.id }}</div>
+        <div class="child-content" @click="handleNodeClick(item)">
+          <div class="content">{{ item.nodeName }}</div>
           <div
             class="status-box"
-            v-if="item.status"
-            :class="getStatus(item.status)"
+            v-if="item.state"
+            :class="getStatus(item.state)"
           >
-            {{ item.status }}
+            {{ item.state }}
           </div>
         </div>
         <DisposalChildBox
           v-if="item?.children?.length > 0"
           :data="item"
+          @nodeClick="handleNodeClick"
         ></DisposalChildBox>
       </div>
     </template>
@@ -25,7 +29,7 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
+import { defineProps, defineEmits } from "vue";
 const props = defineProps({
   data: {
     type: Object,
@@ -35,6 +39,12 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(["nodeClick"]);
+
+const handleNodeClick = (item) => {
+  emit("nodeClick", item);
+};
+
 const getStatus = (status) => {
   if (status == "已完成") {
     return "status-green";
@@ -77,25 +87,50 @@ const getStatus = (status) => {
       border-radius: 6px 6px 6px 6px;
       border: 1px solid #109aff;
       padding: 10px 0;
+      cursor: pointer;
+      .content {
+        width: 96px;
+        height: 16px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 16px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        background: linear-gradient(to bottom, #ffffff 0%, #6ec2ff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
       .status-box {
-        margin-top: 5px;
-        padding: 3px 20px;
+        margin-top: 10px;
+        padding: 0px 15px;
+        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+        font-weight: normal;
+        font-size: 14px;
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
       }
       .status-green {
         background-image: url("../../../../../assets/img/Component 247.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
+        color: #9de05a;
       }
       .status-red {
         background-image: url("../../../../../assets/img/Component 246.png");
         background-size: 150% 100%;
         background-position-x: 50%;
         background-repeat: no-repeat;
+        color: #ff4a4a;
       }
       .status-no {
         background-image: url("../../../../../assets/img/Component 245.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
+        color: #c9c9c9;
       }
     }
     .left-line {
@@ -108,7 +143,7 @@ const getStatus = (status) => {
       border-right: 2px dashed #3fa7b6;
     }
     &.first {
-      .left-line {
+      > .left-line {
         position: absolute;
         content: "";
         width: 1px;
@@ -118,8 +153,8 @@ const getStatus = (status) => {
         border-right: 2px dashed #3fa7b6;
       }
     }
-    &:last-child {
-      .left-line {
+    &.last {
+      > .left-line {
         position: absolute;
         content: "";
         width: 1px;

src/views/right/components/common/StepsTool.vue

@@ -31,15 +31,18 @@
         </slot>
       </div>
       <div class="right-box">
-        <slot name="title" :index="index" :data="step">
-          <div class="title-info">
-            <div class="title">{{ step.title || "" }}</div>
-            <div class="right-item">
-              <div class="depart">{{ step.depart || "" }}</div>
-              <div class="name">{{ step.name || "" }}</div>
+        <div style="cursor: pointer;">
+          <slot name="title" :index="index" :data="step">
+            <div class="title-info">
+              <div class="title">{{ step.title || "" }}</div>
+              <div class="right-item">
+                <div class="depart">{{ step.depart || "" }}</div>
+                <div class="name">{{ step.name || "" }}</div>
+              </div>
             </div>
-          </div>
-        </slot>
+          </slot>
+        </div>
+
         <slot
           v-if="step.describeSlot"
           :name="step.describeSlot"
@@ -98,6 +101,7 @@ const props = defineProps({
       width: 40px;
       margin-left: 10px;
       margin-top: 5px;
+      cursor: pointer;
       .icon-content {
         height: 100%;
         width: 100%;