Просмотр исходного кода

fix(workReport): 优化连接线和节点显示逻辑,调整样式以提升可读性

xieyong 3 дней назад
Родитель
Сommit
75191fe619
1 измененных файлов с 51 добавлено и 36 удалено
  1. 51 36
      src/views/produceOrder/workReport.vue

+ 51 - 36
src/views/produceOrder/workReport.vue

@@ -71,32 +71,14 @@
                     :viewBox="`0 0 ${connectorViewW} ${stepsRowHeight}`"
                     preserveAspectRatio="none"
                   >
-                    <defs>
-                      <marker
-                        id="route-flow-arrow"
-                        viewBox="0 0 10 10"
-                        refX="9"
-                        refY="5"
-                        markerWidth="7"
-                        markerHeight="7"
-                        markerUnits="userSpaceOnUse"
-                        orient="auto-start-reverse"
-                      >
-                        <path d="M 0 0 L 10 5 L 0 10 z" fill="#909399" />
-                      </marker>
-                    </defs>
-                    <line
+                    <path
                       v-for="(line, li) in connectorLines(
                         stepColumns[colIndex - 1],
                         col
                       )"
                       :key="li"
-                      :x1="line.x1"
-                      :y1="line.y1"
-                      :x2="line.x2"
-                      :y2="line.y2"
+                      :d="line.d"
                       class="route-connector-line"
-                      marker-end="url(#route-flow-arrow)"
                     />
                   </svg>
                 </div>
@@ -462,7 +444,7 @@
         desIndex: 0,
         errorIndex: 10000,
         stepNodeH: 50, // 每个工序节点的行高
-        stepConnectorW: 56, // 列间箭头连接区最小宽度
+        stepConnectorW: 12, // 列间连接线 SVG 的最小宽度
         connectorViewW: 56, // 连接线 SVG 的实际宽度(自适应测量)
         drawer: false,
         workData: {},
@@ -592,6 +574,8 @@
       connectorLines(leftCol, rightCol) {
         const total = this.stepsRowHeight;
         const h = this.stepNodeH;
+        const w = this.connectorViewW;
+        const midX = w / 2;
         const centers = (n) => {
           const offset = (total - n * h) / 2;
           return Array.from({ length: n }, (_, i) => offset + (i + 0.5) * h);
@@ -601,11 +585,9 @@
         const lines = [];
         leftYs.forEach((y1) => {
           rightYs.forEach((y2) => {
+            // 直角折线:水平 → 垂直 → 水平;同行时垂直段退化为直线
             lines.push({
-              x1: 0,
-              y1,
-              x2: Math.max(this.connectorViewW - 8, 8),
-              y2
+              d: `M 0 ${y1} L ${midX} ${y1} L ${midX} ${y2} L ${w} ${y2}`
             });
           });
         });
@@ -804,8 +786,35 @@
           workOrderIds: [value.id]
         });
 
-        const title1 = res.data.map((item) => item.taskTypeName).toString();
-        this.title1 = title1 ? title1 : '';
+        const names = Array.isArray(res?.data)
+          ? res.data.map((item) => item.taskTypeName).filter(Boolean)
+          : [];
+
+        if (names.length) {
+          this.title1 = names.toString();
+          return;
+        }
+
+        // 接口未返回(如并行工序),从本地 routeList 取下一道非并行工序作为兜底
+        this.title1 = this.getLocalNextTaskName();
+      },
+      getLocalNextTaskName() {
+        const list = Array.isArray(this.routeList) ? this.routeList : [];
+        const idx = this.desIndex;
+        if (typeof idx !== 'number' || idx < 0 || idx >= list.length - 1) {
+          return '';
+        }
+        for (let i = idx + 1; i < list.length; i++) {
+          const item = list[i];
+          const isParallel =
+            item?.isParallel === 1 ||
+            item?.isParallel === '1' ||
+            item?.isParallel === true;
+          if (!isParallel) {
+            return item?.taskTypeName || '';
+          }
+        }
+        return '';
       },
       handleSearch() {
         let obj = {
@@ -1860,7 +1869,7 @@
     display: flex;
     align-items: center;
     min-height: 88px;
-    padding: 12px 8px 16px;
+    padding: 12px 0 16px;
     box-sizing: border-box;
     overflow-x: auto;
   }
@@ -1873,11 +1882,12 @@
     min-width: 140px;
   }
   .route-flow-unit:nth-of-type(1){
-    flex:0 !important;
+    flex: 0 0 auto !important;
+    min-width: 0 !important;
   }
   .route-connector {
-    flex: 1 1 40px;
-    min-width: 40px;
+    flex: 1 1 0;
+    min-width: 0;
     display: flex;
     align-items: center;
     height: 100%;
@@ -1892,6 +1902,7 @@
   .route-connector-line {
     stroke: #909399;
     stroke-width: 1.5;
+    fill: none;
     vector-effect: non-scaling-stroke;
   }
 
@@ -1921,7 +1932,7 @@
     padding: 3px 12px;
     background: #ffffff;
     border: 2px solid #c0c4cc;
-    border-radius: 999px;
+    border-radius: 2px;
     cursor: pointer;
     box-sizing: border-box;
     transition: border-color 0.2s, box-shadow 0.2s;
@@ -1940,11 +1951,10 @@
   }
 
   .route-node.is-current {
-    border-color: #ffa929;
-    box-shadow: 0 0 6px rgba(255, 169, 41, 0.45);
+    border-color: #1890ff;
 
     .route-node-name {
-      color: #ffa929;
+      color: #1890ff;
       font-weight: 700;
     }
   }
@@ -1971,6 +1981,11 @@
     .route-node-team {
       font-size: 10px;
     }
+
+    // 并行节点激活时不显示"此处"标签,避免撑高
+    .route-node-tag {
+      display: none;
+    }
   }
 
   .route-node-name {
@@ -1998,7 +2013,7 @@
     font-size: 11px;
     line-height: 16px;
     color: #ffffff;
-    background: #ffa929;
+    background: #1890ff;
     border-radius: 8px;
     vertical-align: middle;
   }