bj_power/bj_power_mes/frontend/src/pages/Trace.vue

<template>
  <el-card>
    <el-form inline>
      <el-form-item label="工件SN">
        <el-input v-model="sn" style="width:220px" placeholder="输入SN查询追溯" @keyup.enter="search" />
      </el-form-item>
      <el-form-item><el-button type="primary" @click="search">追溯查询</el-button></el-form-item>
      <el-form-item>
        <el-button type="warning" :disabled="!sn" @click="printCard">打印流程卡</el-button>
      </el-form-item>
    </el-form>

    <el-alert v-if="error" :title="error" type="error" show-icon closable style="margin-bottom:10px" />

    <template v-if="data">
      <el-descriptions :column="4" border style="margin-bottom:12px" title="工件信息">
        <el-descriptions-item label="工件SN">{{ data.workpiece?.sn }}</el-descriptions-item>
        <el-descriptions-item label="所属工单">{{ data.workpiece?.orderNo }}</el-descriptions-item>
        <el-descriptions-item v-if="data.workpiece?.productCode || data.order?.productCode" label="产品型号">
          {{ data.workpiece?.productCode || data.order?.productCode }}{{ (data.workpiece?.productName || data.order?.productName) ? '（' + (data.workpiece?.productName || data.order?.productName) + '）' : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">{{ statusText(data.workpiece?.status) }}</el-descriptions-item>
        <el-descriptions-item v-if="data.workpiece?.currentProcess" label="当前工位">{{ data.workpiece?.currentProcess }}</el-descriptions-item>
        <el-descriptions-item v-if="data.workpiece?.onlineAt" label="进线时间">{{ fmt(data.workpiece?.onlineAt) }}</el-descriptions-item>
        <el-descriptions-item v-if="data.workpiece?.doneAt" label="完工时间">{{ fmt(data.workpiece?.doneAt) }}</el-descriptions-item>
      </el-descriptions>
      <el-alert type="info" :closable="false" style="margin-bottom:12px"
        title="追溯链路：产品型号（物）→ 工单（批次任务）→ 工件（实例SN）。本页展示单个工件的完整生命周期。" />

      <el-tabs>
        <el-tab-pane label="工位时间线">
          <el-timeline>
            <el-timeline-item v-for="p in (data.processTimeline||[])" :key="p.id"
              :timestamp="p.operator ? (p.operator+' · '+fmt(p.endedAt)) : fmt(p.endedAt)"
              :type="p.result==='NG'?'danger':'success'">
              {{ p.processName }}（工位 {{ p.stationNo || p.processCode }}）— {{ p.result }}
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="步骤考核数据">
          <el-table :data="data.stepData||[]" border size="small">
            <el-table-column prop="stepName" label="步骤" min-width="110" />
            <el-table-column prop="criterionName" label="考核项" min-width="110" />
            <el-table-column prop="value" label="数值" width="100" />
            <el-table-column prop="isOK" label="合格" width="80">
              <template #default="{row}"><el-tag :type="row.isOK?'success':'danger'">{{ row.isOK?'合格':'不合格' }}</el-tag></template>
            </el-table-column>
            <el-table-column prop="operator" label="操作人" width="90" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="拧紧数据">
          <el-table :data="data.torqueRecords||[]" border size="small">
            <el-table-column prop="stationNo" label="工位" width="80" />
            <el-table-column prop="torque" label="扭矩" width="100" />
            <el-table-column prop="angle" label="角度" width="90" />
            <el-table-column prop="result" label="结果" width="80" />
            <el-table-column prop="operator" label="操作人" width="90" />
            <el-table-column prop="time" label="时间" min-width="160" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="成品关联">
          <p>批次号：{{ (data.associationTrace?.batchItems||[]).join(', ') || '无' }}</p>
          <p>电气件SN：{{ (data.associationTrace?.serialItems||[]).join(', ') || '无' }}</p>
        </el-tab-pane>
        <el-tab-pane label="装机绑定">
          <el-alert :type="data.bindTrace?.complete ? 'success' : 'warning'" :closable="false" style="margin-bottom:10px"
            :title="data.bindTrace?.complete ? '装配物料已全部绑齐 ✓' : ('装配物料未绑齐：' + (data.bindTrace?.missing || ''))" show-icon />
          <el-table :data="data.bindTrace?.binds||[]" border size="small">
            <el-table-column prop="processCode" label="工序" width="70" />
            <el-table-column prop="materialCode" label="图号" min-width="110" />
            <el-table-column prop="materialName" label="物料名称" min-width="110" />
            <el-table-column prop="spec" label="规格" min-width="90" />
            <el-table-column prop="bindType" label="类型" width="70">
              <template #default="{row}">{{ row.bindType === 'SN' ? '电气件SN' : '批次' }}</template>
            </el-table-column>
            <el-table-column prop="bindValue" label="绑定值(SN/批次)" min-width="140" />
            <el-table-column prop="operator" label="绑定人" width="90" />
            <el-table-column prop="createdAt" label="绑定时间" min-width="165">
              <template #default="{row}">{{ fmt(row.createdAt) }}</template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </template>
  </el-card>
  <PageHelp :data="helpTrace" page="Trace" />
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import request from '../utils/request'
import { openPrintableHtml } from '../utils/print'
import PageHelp from '../components/PageHelp.vue'
import { helpTrace } from '../help'

const sn = ref('')
const data = ref(null)
const error = ref('')

async function search() {
  if (!sn.value) return
  error.value = ''
  data.value = null
  try {
    data.value = await request.get('/trace', { params: { sn: sn.value } })
  } catch (e) {
    error.value = e.message || '查询失败'
  }
}
async function printCard() {
  if (!sn.value) return
  // 打印前数据完整性预检
  let missing = []
  try {
    const check = await request.get('/process-card', { params: { sn: sn.value, check: 1 } })
    missing = check?.missing || []
  } catch {
    /* 预检失败不阻塞打印 */
  }
  if (missing.length) {
    try {
      await ElMessageBox.confirm(
        `以下数据不完整，是否继续打印？\n\n${missing.map((m) => '· ' + m).join('\n')}`,
        '打印流程卡', {
          type: 'warning',
          confirmButtonText: '继续打印',
          cancelButtonText: '取消'
        })
    } catch {
      return // 用户取消
    }
  }
  // 直接 window.open 带不上 Bearer 头会被 401，改由 axios 取回 HTML 后写入新窗口
  await openPrintableHtml('/process-card', { sn: sn.value })
}
function statusText(st) {
  const map = { CREATED: '已创建', ONLINE: '生产中', DONE: '已完工', SCRAPPED: '已报废' }
  return map[st] || st || '-'
}
function fmt(v) { return v ? String(v).replace('T', ' ').slice(0, 19) : '-' }
</script>