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 @keyup.enter="handleQuery" />
        <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-wrapper" @click="handleProcessClick">
        <img class="process-img" :src="mixTireFull" alt="轮胎工艺流程" />
      </div>
    </el-card>

    <el-card class="tree-card" shadow="never">
      <template #header>
        <div class="blue-header">
          <span class="header-title">批次列表</span>
        </div>
      </template>
      <el-tree
        ref="treeRef"
        :data="treeData"
        :props="treeProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        highlight-current
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <el-icon v-if="!data.children"><Document /></el-icon>
            <el-icon v-else><Folder /></el-icon>
            <span class="label-text">{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="MixTraceTire1">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Document, Folder } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import tireData from './data/tire1.json';
import mixTireFull from './mixTire.png';

const router = useRouter();
const source = tireData as any;

const tireNo = ref(source.tireNo || '');
const queryTireNo = ref(tireNo.value);
const treeData = ref<any[]>(source.treeData || []);
const treeProps = { children: 'children', label: 'label' };
const treeRef = ref();

/**
 * 流程图各节点在图片中的水平位置比例（基于 mixTire.png 实际布局）
 * 半制品(~8%) → 半制品质检(~20%) → 成型(~31%) → 成型质检(~39%) → 硫化(~47%)
 * → 质检区[外观/X光/动平衡/均匀性](~62%) → 成品入库(~80%) → 成品出库(~92%)
 *
 * 硫化左侧 = 反向追溯（上游工序）；硫化右侧 = 正向追溯（下游质检/入库/出库）
 */
const REGIONS = {
  // 成型节点区域：点击后跳反向追溯（barcodeType=3 成型号）
  molding: { left: 0.25, right: 0.37 },
  // 质检区域（外观/X光/动平衡/均匀性）：点击后跳正向追溯（barcodeType=5 成品胎）
  qualityCheck: { left: 0.52, right: 0.73 }
};

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

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

/**
 * 点击流程图节点，根据坐标判断所属区域并跳转
 * 反向追溯条码类型：1-架子号 2-半制品卡号 3-成型号 4-硫化号
 * 正向追溯条码类型：1-原材料 2-胶料 3-半制品 4-胎胚 5-成品胎 6-小料
 */
const handleProcessClick = (event: MouseEvent) => {
  if (!tireNo.value) {
    ElMessage.warning('请先输入胎号并查询');
    return;
  }

  const target = event.currentTarget as HTMLElement;
  const rect = target.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const ratio = x / rect.width;

  if (ratio >= REGIONS.molding.left && ratio <= REGIONS.molding.right) {
    // 点击"成型"节点 → 反向追溯，条码类型=3(成型号)
    router.push({
      path: '/mes/mixTrace/show/backward1',
      query: { barcodeType: '3', barcodeNo: tireNo.value }
    });
  } else if (ratio >= REGIONS.qualityCheck.left && ratio <= REGIONS.qualityCheck.right) {
    // 点击"质检区"（外观/X光/动平衡/均匀性）→ 正向追溯，条码类型=5(成品胎)
    router.push({
      path: '/mes/mixTrace/show/forward1',
      query: { barcodeType: '5', barcodeNo: tireNo.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: white;
    :deep(.el-card__body) {
      padding: 24px 16px;
    }
  }

  .process-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .process-img {
    display: block;
    width: 100%;
    height: 50vh;
    user-select: none;
    object-fit: contain;
  }

  .tree-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;
    }
  }

  .custom-tree-node {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;

    .el-icon {
      color: #2f6ea5;
    }
    .label-text {
      color: #303133;
    }
  }
}
</style>