hwmom-ui/src/views/mes/mixTrace/show/tire1.vue

<template>
  <div class="tire1-container">
    <el-card class="header-card" shadow="never">
      <div class="header-row">
        <span class="label">胎号:</span>
        <el-input v-model="queryTireNo" style="width: 220px" clearable />
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="handleClear">清空</el-button>
      </div>
    </el-card>

    <el-card class="process-card" shadow="never">
      <div class="process-flow">
        <template v-for="(step, idx) in processSteps" :key="step.name">
          <div class="process-step">
            <div class="step-icon" :class="{ active: step.active }">
              <el-icon :size="28"><component :is="step.icon" /></el-icon>
            </div>
            <div class="step-label">{{ step.name }}</div>
          </div>
          <div v-if="idx < processSteps.length - 1" class="arrow">→</div>
        </template>
      </div>
    </el-card>

    <el-card class="info-card" shadow="never">
      <template #header>
        <div class="blue-header">
          <span class="header-title">轮胎产品: {{ tireNo }}</span>
        </div>
      </template>
      <div class="info-grid">
        <div class="info-item" v-for="item in tireInfoList" :key="`${item.label}-${item.value}`">
          <span class="item-label">{{ item.label }}:</span>
          <span class="item-value">{{ item.value }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="MixTraceTire1">
import { computed, ref } from 'vue';
import {
  Box,
  MagicStick,
  Odometer,
  Operation,
  Promotion,
  Select,
  View
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import tireData from './data/tire1.json';

const tireNo = ref((tireData as any).tireNo || '');
const queryTireNo = ref(tireNo.value);
const tireInfoList = ref<any[]>((tireData as any).tireInfoList || []);

const processSteps = computed(() => [
  { name: '半制品', icon: Operation, active: false },
  { name: '半制品质检', icon: Select, active: false },
  { name: '成型', icon: Operation, active: true },
  { name: '成型质检', icon: Select, active: true },
  { name: '硫化', icon: MagicStick, active: true },
  { name: '动平衡质检', icon: Odometer, active: false },
  { name: '外观质检', icon: View, active: false },
  { name: '成品入库', icon: Box, active: false },
  { name: '成品出库', icon: Promotion, active: false }
]);

const handleQuery = () => {
  if (!queryTireNo.value.trim()) {
    ElMessage.warning('请输入胎号');
    return;
  }
  tireNo.value = queryTireNo.value.trim();
  ElMessage.success(`已定位胎号: ${tireNo.value}`);
};

const handleClear = () => {
  queryTireNo.value = '';
};
</script>

<style scoped lang="scss">
.tire1-container {
  padding: 16px;

  .header-card {
    margin-bottom: 16px;
  }

  .header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    .label {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .process-card {
    margin-bottom: 16px;
    background: linear-gradient(135deg, #2f6ea5 0%, #3f88c5 100%);
    :deep(.el-card__body) {
      padding: 26px 16px;
    }
  }

  .process-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow-x: auto;
  }

  .process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 78px;

    .step-icon {
      width: 70px;
      height: 70px;
      border-radius: 12px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2f6ea5;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      &.active {
        background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
        color: #fff;
      }
    }

    .step-label {
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      text-align: center;
    }
  }

  .arrow {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
  }

  .info-card {
    :deep(.el-card__header) {
      padding: 0;
    }

    .blue-header {
      background-color: #2f6ea5;
      color: #fff;
      padding: 12px 16px;
      .header-title {
        font-size: 14px;
        font-weight: 600;
      }
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .info-item {
    background: #f7f9fc;
    border-left: 3px solid #2f6ea5;
    border-radius: 4px;
    padding: 10px;
    font-size: 13px;
    .item-label {
      font-weight: 600;
      color: #4b5563;
    }
    .item-value {
      margin-left: 4px;
      color: #1f2937;
    }
  }
}
</style>