修改显示的颜色

src/views/productionPlan/components/detail/planDotLineDetail.vue

@@ -0,0 +1,349 @@
+<template>
+  <div v-loading="loading" class="pane-box plan-dot-line-detail">
+    <div class="plan-dot-line">
+      <div class="top-route">
+        <div class="panel-title">工艺路线</div>
+        <el-empty
+          v-if="taskList.length === 0"
+          description="暂无工艺路线"
+        ></el-empty>
+        <el-steps
+          v-else
+          :active="routeStepsActive"
+          space="20px"
+          align-center
+          finish-status="success"
+          class="route-steps"
+        >
+          <el-step
+            v-for="(item, index) in taskList"
+            :key="`route-step-${item._taskKey}`"
+            :title="routeStepTitle(item, index)"
+            :class="{ active: routeDesIndex === index }"
+          ></el-step>
+        </el-steps>
+      </div>
+      <div class="config-panel">
+        <div class="panel-title">工艺配置</div>
+        <el-empty v-if="taskList.length === 0" description="暂无工艺"></el-empty>
+        <div v-else class="task-config-table-wrap">
+          <el-table
+            :data="taskList"
+            border
+            size="small"
+            row-key="_taskKey"
+            max-height="420"
+            class="config-table"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="60"
+              align="center"
+              class-name="process-name-cell"
+              label-class-name="config-execution-team-header"
+            />
+            <el-table-column
+              label="工序名称"
+              min-width="100"
+              show-overflow-tooltip
+              class-name="process-name-cell"
+              label-class-name="config-execution-team-header"
+              align="center"
+            >
+              <template slot-scope="{ row, $index }">
+                <span class="task-name-text">{{
+                  taskName(row, $index)
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="执行模式"
+              min-width="100"
+              align="center"
+              label-class-name="config-execution-team-header"
+              class-name="config-meta-cell"
+            >
+              <template slot-scope="{ row }">
+                {{ executionTypeText(row.executionType) }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="执行班组"
+              min-width="130"
+              align="center"
+              prop="executionTeamName"
+              label-class-name="config-execution-team-header"
+              class-name="config-meta-cell"
+            />
+            <el-table-column
+              label="执行开始时间"
+              min-width="168"
+              align="center"
+              prop="executionStartTime"
+              label-class-name="config-execution-team-header"
+              class-name="config-meta-cell"
+            />
+            <el-table-column
+              label="执行结束时间"
+              min-width="168"
+              align="center"
+              prop="executionEndTime"
+              label-class-name="config-execution-team-header"
+              class-name="config-meta-cell"
+            />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getPlanDotLine } from '@/api/productionPlan/planDotLine';
+
+  const EXEC_TYPE_MAP = { 0: '自制', 1: '请托', 2: '委外' };
+
+  export default {
+    name: 'PlanDotLineDetail',
+    props: {
+      /** 生产计划 id，无则展示空状态 */
+      planId: {
+        type: [Number, String],
+        default: null
+      }
+    },
+    data() {
+      return {
+        loading: false,
+        taskList: []
+      };
+    },
+    computed: {
+      routeStepsActive() {
+        const list = this.taskList;
+        if (!list.length) return 0;
+        for (let i = 0; i < list.length; i++) {
+          if (!this.isTaskDone(list[i])) return i;
+        }
+        return list.length;
+      },
+      routeDesIndex() {
+        const list = this.taskList;
+        if (!list.length) return -1;
+        const a = this.routeStepsActive;
+        return a >= list.length ? list.length - 1 : a;
+      }
+    },
+    watch: {
+      planId(val) {
+        if (val == null || val === '') {
+          this.taskList = [];
+        }
+      }
+    },
+    methods: {
+      /** 父级在切换到「布点详情」页签时调用，拉取接口 */
+      async load() {
+        const planId = this.planId;
+        if (planId == null || planId === '') {
+          this.taskList = [];
+          return;
+        }
+        this.loading = true;
+        try {
+          const planData = await getPlanDotLine({ planId });
+          const details = planData?.detailList;
+          if (!Array.isArray(details) || details.length === 0) {
+            this.taskList = [];
+            return;
+          }
+          this.taskList = details
+            .slice()
+            .sort((a, b) => (a.taskSort ?? 0) - (b.taskSort ?? 0))
+            .map((item, i) => this.normalizeItem(item, i));
+        } catch {
+          this.taskList = [];
+        } finally {
+          this.loading = false;
+        }
+      },
+      normalizeItem(item, index) {
+        return {
+          ...item,
+          _taskKey: item.id ?? `detail-${item.taskId ?? index}`,
+          executionStartTime: this.formatTime(item.executionStartTime),
+          executionEndTime: this.formatTime(item.executionEndTime),
+          executionType:
+            item.executionType != null ? Number(item.executionType) : undefined
+        };
+      },
+      taskName(item, index) {
+        return item.taskName || item.name || `工艺${index + 1}`;
+      },
+      routeStepTitle(item, index) {
+        return (
+          item.taskTypeName || item.taskName || item.name || `工艺${index + 1}`
+        );
+      },
+      isTaskDone(item) {
+        return item.executionType != null && item.executionType !== '';
+      },
+      executionTypeText(val) {
+        return EXEC_TYPE_MAP[val] ?? '';
+      },
+      formatTime(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())}`;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .pane-box {
+    padding: 20px 0;
+  }
+
+  .plan-dot-line-detail .plan-dot-line,
+  .plan-dot-line-detail .top-route,
+  .plan-dot-line-detail .config-panel {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  .plan-dot-line-detail .plan-dot-line {
+    min-height: 360px;
+  }
+
+  .plan-dot-line-detail .top-route,
+  .plan-dot-line-detail .config-panel {
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    padding: 12px;
+    background: #fff;
+  }
+
+  .plan-dot-line-detail .top-route {
+    overflow: visible;
+  }
+
+  .plan-dot-line-detail .config-panel {
+    margin-top: 12px;
+  }
+
+  .plan-dot-line-detail .panel-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 10px;
+  }
+
+  .plan-dot-line-detail .route-steps {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 8px;
+    box-sizing: content-box;
+  }
+
+  .plan-dot-line-detail .route-steps ::v-deep {
+    .el-steps {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: flex-start;
+    }
+    .el-step {
+      flex-shrink: 0;
+    }
+    .el-step__title {
+      font-size: clamp(16px, 2.2vw, 16px);
+      line-height: 1.35;
+      max-width: 8em;
+      margin-left: auto;
+      margin-right: auto;
+      white-space: normal;
+      word-break: break-all;
+    }
+    .el-step.active .el-step__title {
+      color: #409eff;
+      font-weight: 600;
+    }
+    .el-step__line {
+      top: 14px;
+    }
+    .el-step__head.is-success {
+      color: #0c7741;
+      border-color: #0c7741;
+    }
+    .el-step__head.is-success .el-step__line {
+      background-color: #0c7741;
+    }
+    .el-step__head.is-success .el-step__icon {
+      color: #0c7741;
+      border-color: #0c7741;
+    }
+    .el-step__head.is-success .el-step__line-inner {
+      background-color: #0c7741;
+      border-color: #0c7741;
+    }
+    .el-step__title.is-success,
+    .el-step__description.is-success {
+      color: #0c7741;
+    }
+    .el-step__icon {
+      width: 30px;
+      height: 30px;
+    }
+    .el-step__main {
+      padding-top: 8px;
+      margin-top: 0;
+    }
+    .el-step__description {
+      margin-top: 0;
+      padding-right: 0;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .plan-dot-line-detail .top-route,
+    .plan-dot-line-detail .config-panel {
+      padding: 8px;
+    }
+  }
+
+  .plan-dot-line-detail .task-config-table-wrap {
+    width: 100%;
+  }
+
+  .plan-dot-line-detail .config-table ::v-deep {
+    .el-table th > .cell,
+    .el-table td > .cell {
+      font-size: 14px;
+      text-align: center;
+    }
+    th.config-execution-team-header > .cell,
+    td.config-meta-cell > .cell {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 1.4;
+    }
+    .el-table__body .cell {
+      padding-left: 6px;
+      padding-right: 6px;
+    }
+    td.process-name-cell .task-name-text {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 1.4;
+    }
+  }
+</style>

src/views/productionPlan/components/planDotLine.vue

@@ -689,6 +689,22 @@
     .el-step__line {
       top: 14px;
     }
+    /* 已完成步骤 success 色（默认绿）改为品牌绿 */
+    .el-step__head.is-success {
+      color: #0c7741;
+      border-color: #0c7741;
+    }
+    .el-step__head.is-success .el-step__line {
+      background-color: #0c7741;
+    }
+    .el-step__head.is-success .el-step__icon {
+      color: #0c7741;
+      border-color: #0c7741;
+    }
+    .el-step__head.is-success .el-step__line-inner {
+      background-color: #0c7741;
+      border-color: #0c7741;
+    }
     .el-step__icon {
       width: 30px;
       height: 30px;
@@ -753,5 +769,21 @@
       overflow: visible !important;
       max-height: none !important;
     }
+
+    .route-steps .el-step__head.is-success {
+      color: #0c7741;
+      border-color: #0c7741;
+    }
+    .route-steps .el-step__head.is-success .el-step__line {
+      background-color: #0c7741;
+    }
+    .route-steps .el-step__head.is-success .el-step__icon {
+      color: #0c7741;
+      border-color: #0c7741;
+    }
+    .route-steps .el-step__head.is-success .el-step__line-inner {
+      background-color: #0c7741;
+      border-color: #0c7741;
+    }
   }
 </style>

src/views/productionPlan/detail.vue

@@ -5,10 +5,16 @@
         <el-page-header @back="$router.go(-1)" content="计划详情">
         </el-page-header>
       </div>
-      <el-tabs v-model="activeName">
+      <el-tabs v-model="activeName" @tab-click="onTabClick">
         <el-tab-pane label="计划信息" name="plan">
           <plan :infoData="infoData" />
         </el-tab-pane>
+        <el-tab-pane label="布点详情" name="planDotLine">
+          <planDotLineDetail
+            ref="planDotLineDetailRef"
+            :plan-id="dotLinePlanId"
+          />
+        </el-tab-pane>
         <!-- <el-tab-pane label="物料信息表" name="material">
           <material
             :planId="infoData.productionPlan && infoData.productionPlan.id"
@@ -39,11 +45,13 @@
   import plan from './components/detail/plan.vue';
   import material from './components/detail/material.vue';
   import productionDetail from './components/detail/productionDetail.vue';
+  import planDotLineDetail from './components/detail/planDotLineDetail.vue';
   // import prod from './components/detail/prod.vue';
   import bpmDetail from '@/views/bpm/processInstance/detail.vue';
   import { getProductPlanDetail } from '@/api/productionPlan/index';
+
   export default {
-    components: { plan, material, productionDetail, bpmDetail },
+    components: { plan, material, productionDetail, bpmDetail, planDotLineDetail },
     data() {
       return {
         activeName: 'plan',
@@ -57,9 +65,20 @@
     computed: {
       clientEnvironmentId() {
         return this.$store.state.user.info.clientEnvironmentId;
+      },
+      dotLinePlanId() {
+        const p = this.infoData.productionPlan;
+        return p && p.id != null ? p.id : null;
       }
     },
     methods: {
+      onTabClick(tab) {
+        if (tab.name === 'planDotLine') {
+          this.$nextTick(() => {
+            this.$refs.planDotLineDetailRef?.load();
+          });
+        }
+      },
       async getDetail() {
         const data = await getProductPlanDetail(this.$route.query.id);
 
@@ -68,9 +87,3 @@
     }
   };
 </script>
-
-<style lang="scss" scoped>
-  .pane-box {
-    padding: 20px 0;
-  }
-</style>

src/views/workOrder/components/details.vue

@@ -955,6 +955,14 @@
       color: #409eff;
       font-weight: 600;
     }
+    .el-step__head.is-success {
+      color: #0c7741;
+      border-color: #0c7741;
+    }
+    .el-step__title.is-success,
+    .el-step__description.is-success {
+      color: #0c7741;
+    }
     .el-step__line {
       top: 14px;
     }