修改样式的bug

src/views/produceOrder/components/details/dotLineDetail.vue

@@ -1,5 +1,20 @@
 <template>
   <div class="plan-dot-line">
+    <div class="plan-time-bar">
+      <span class="plan-time-item">
+        <span class="plan-time-label">计划开始时间：</span>
+        <span class="plan-time-value">{{ planStartDisplay }}</span>
+      </span>
+      <span class="plan-time-item">
+        <span class="plan-time-label">计划结束时间：</span>
+        <span class="plan-time-value">{{ planEndDisplay }}</span>
+      </span>
+
+      <span class="plan-time-item">
+        <span class="plan-time-label">计划数量：</span>
+        <span class="plan-time-value">{{ planNumDisplay }}</span>
+      </span>
+    </div>
     <div class="top-route">
       <div class="panel-title">工艺路线</div>
       <el-empty
@@ -42,8 +57,8 @@
             label="序号"
             width="60"
             align="center"
-            class-name="process-name-cell"
-            label-class-name="config-execution-team-header"
+            class-name="config-index-cell"
+            label-class-name="config-index-header"
           />
           <el-table-column
             label="工序名称"
@@ -106,6 +121,18 @@
 <script>
   import { getPlanDotLine } from '@/api/produceOrder/index';
   const EXEC_TYPE_MAP = { 0: '自制', 1: '请托', 2: '委外' };
+
+  function formatDateTime(val) {
+    if (val == null || val === '') return '';
+    const str = String(val).trim();
+    if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(str)) return str;
+    const d = new Date(val);
+    if (Number.isNaN(d.getTime())) return '';
+    const p = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(
+      d.getHours()
+    )}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+  }
   export default {
     props: {
       workOrderInfo: {
@@ -140,6 +167,18 @@
         if (!list.length) return -1;
         const a = this.dotLineRouteStepsActive;
         return a >= list.length ? list.length - 1 : a;
+      },
+      planStartDisplay() {
+        const t = this.workOrderInfo?.planStartTime;
+        return t ? formatDateTime(t) || String(t) : '—';
+      },
+      planEndDisplay() {
+        const t = this.workOrderInfo?.planCompleteTime;
+        return t ? formatDateTime(t) || String(t) : '—';
+      },
+      planNumDisplay() {
+        const t = this.workOrderInfo?.formingNum + this.workOrderInfo?.unit;
+        return t ? t : '—';
       }
     },
 
@@ -268,6 +307,35 @@
     min-height: 360px;
   }
 
+  .plan-time-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px 28px;
+    margin-bottom: 12px;
+    padding: 10px 12px;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    background: #fafafa;
+    font-size: 14px;
+  }
+
+  .plan-time-item {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 4px;
+  }
+
+  .plan-time-label {
+    color: #606266;
+    white-space: nowrap;
+  }
+
+  .plan-time-value {
+    color: #303133;
+    font-weight: 500;
+  }
+
   .top-route,
   .config-panel {
     border: 1px solid #ebeef5;
@@ -317,16 +385,29 @@
       word-break: break-all;
     }
     .el-step.active .el-step__title {
-      color: #409eff;
+      color: #157a2c;
       font-weight: 600;
     }
+    .el-step__head.is-process {
+      color: #157a2c;
+      border-color: #157a2c;
+    }
+    .el-step__title.is-process {
+      color: #157a2c;
+    }
     .el-step__head.is-success {
-      color: #0c7741;
-      border-color: #0c7741;
+      color: #157a2c;
+      border-color: #157a2c;
     }
     .el-step__title.is-success,
     .el-step__description.is-success {
-      color: #0c7741;
+      color: #157a2c;
+    }
+    .el-step__head.is-success .el-step__line {
+      background-color: #157a2c;
+    }
+    .el-step__head.is-success .el-step__line-inner {
+      border-color: #157a2c;
     }
     .el-step__line {
       top: 14px;
@@ -378,5 +459,9 @@
       font-weight: 500;
       line-height: 1.4;
     }
+    th.config-index-header > .cell,
+    td.config-index-cell > .cell {
+      font-size: 14px;
+    }
   }
 </style>