kd-aiot-frontend-apsv2/src/views/productionPlan/components/detail/planDotLineDetail.vue

<template>
  <div v-loading="loading" class="pane-box plan-dot-line-detail">
    <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="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="config-index-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 }">
                {{ row.isParallelism ? '是' : '否' }}
              </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"
              label-class-name="config-execution-team-header"
              class-name="config-meta-cell"
            >
              <template slot-scope="{ row }">
                {{ executionObjectDisplay(row) }}
              </template>
            </el-table-column>
            <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: '委外' };
  /** 与 planDotLine.vue 一致：0 自制、1 请托、2 委外 */
  const EXEC_TYPE = Object.freeze({ HOMEMADE: 0, ENTRUST: 1, OUTSOURCE: 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 {
    name: 'PlanDotLineDetail',
    props: {
      /** 生产计划 id，无则展示空状态 */
      planId: {
        type: [Number, String],
        default: null
      },
      infoData: {
        type: Object,
        default: () => {}
      }
    },
    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;
      },
      planStartDisplay() {
        const t = this.infoData?.productionPlan?.startTime;
        return t ? formatDateTime(t) || String(t) : '—';
      },
      planEndDisplay() {
        const t = this.infoData?.productionPlan?.endTime;
        return t ? formatDateTime(t) || String(t) : '—';
      },
      planNumDisplay() {
        const t =
          this.infoData?.productionPlan?.productNum +
          this.infoData?.productionPlan?.measuringUnit;
        return t ? t : '—';
      }
    },
    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] ?? '';
      },
      executionObjectDisplay(row) {
        const t =
          row.executionType != null ? Number(row.executionType) : undefined;
        if (t === EXEC_TYPE.HOMEMADE) return row.executionTeamName ?? '';
        if (t === EXEC_TYPE.ENTRUST) return row.executionFactoryName ?? '';
        return '';
      },
      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-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;
  }

  .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: #157a2c;
      font-weight: 600;
    }
    .el-step__line {
      top: 14px;
    }
    .el-step__head.is-success {
      color: #157a2c;
      border-color: #157a2c;
    }
    .el-step__head.is-success .el-step__line {
      background-color: #157a2c;
    }
    .el-step__head.is-success .el-step__icon {
      color: #157a2c;
      border-color: #157a2c;
    }
    .el-step__head.is-success .el-step__line-inner {
      background-color: #157a2c;
      border-color: #157a2c;
    }
    .el-step__title.is-success,
    .el-step__description.is-success {
      color: #157a2c;
    }
    .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;
    }
    td.config-index-cell > .cell {
      font-size: 14px;
    }
    .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>