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

<template>
  <el-card>
    <el-form inline>
      <el-form-item label="工位">
        <el-select v-model="form.stationNo" placeholder="请选择工位" style="width:110px">
          <el-option v-for="i in 12" :key="i" :value="i" :label="`工位${i}`" />
        </el-select>
      </el-form-item>
      <el-form-item label="工件SN"><el-input v-model="form.sn" style="width:170px" @change="loadSteps" /></el-form-item>
      <el-form-item label="工序号"><el-input-number v-model="form.processCode" :min="1" :max="12" @change="loadSteps" /></el-form-item>
      <el-form-item><el-button type="primary" @click="loadSteps">载入参数模板</el-button></el-form-item>
    </el-form>

    <!-- 参数采集区：按已维护的步骤模板动态渲染 -->
    <el-card v-if="steps.length" shadow="never" style="margin-bottom:12px">
      <div slot="header" style="display:flex;justify-content:space-between;align-items:center">
        <b>工位 {{ form.stationNo }} / 工序 {{ form.processCode }} 参数采集</b>
        <el-button type="primary" size="small" :loading="saving" @click="submit">提交报工</el-button>
      </div>
      <el-table :data="steps" border size="small">
        <el-table-column prop="seq" label="步骤" width="60" align="center" />
        <el-table-column prop="name" label="步骤名称" min-width="130" />
        <el-table-column label="采集方式" width="130" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.collectType === 'AUTO'" type="warning" size="small">拧紧枪自动</el-tag>
            <el-tag v-else-if="row.collectType === 'MANUAL'" type="primary" size="small">手填</el-tag>
            <el-tag v-else type="info" size="small">仅记录</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="采集值" min-width="180">
          <template #default="{ row }">
            <el-input v-if="row.collectType !== 'NONE'" v-model="row.value" placeholder="采集值(可空)" style="width:130px" />
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="判定标准" min-width="200">
          <template #default="{ row }">
            <template v-if="row.criteria.length">
              <el-tag v-for="c in row.criteria" :key="c.id" size="small" style="margin-right:4px">
                {{ c.name }}{{ critText(c) }}
              </el-tag>
            </template>
            <span v-else style="color:#909399">未设标准</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-alert v-else type="info" :closable="false" title="请选择工位、SN 与工序号后点【载入参数模板】" />

    <el-divider content-position="left">报工记录</el-divider>
    <el-form inline>
      <el-form-item label="SN"><el-input v-model="query.sn" clearable style="width:160px" /></el-form-item>
      <el-form-item label="工单号"><el-input v-model="query.orderNo" clearable style="width:160px" /></el-form-item>
      <el-form-item><el-button @click="load">刷新</el-button></el-form-item>
    </el-form>
    <el-table :data="list" border size="small">
      <el-table-column prop="sn" label="SN" min-width="130" />
      <el-table-column prop="orderNo" label="工单号" min-width="130" />
      <el-table-column prop="station" label="工位" width="80" />
      <el-table-column prop="type" label="类型" width="110" />
      <el-table-column prop="processCode" label="工序号" width="80" />
      <el-table-column prop="operator" label="操作人" width="90" />
      <el-table-column prop="time" label="时间" min-width="170" />
    </el-table>
  </el-card>
  <PageHelp :data="helpScan" />
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '../utils/request'
import PageHelp from '../components/PageHelp.vue'
import { helpScan } from '../help'

const form = reactive({ stationNo: 1, sn: '', processCode: 1 })
const steps = ref([])
const saving = ref(false)
const query = reactive({ sn: '', orderNo: '' })
const list = ref([])

function critText(c) {
  switch (c.logic) {
    case 'GE': return ` ≥${c.target}${c.unit}`
    case 'LE': return ` ≤${c.target}${c.unit}`
    case 'GT': return ` >${c.target}${c.unit}`
    case 'LT': return ` <${c.target}${c.unit}`
    case 'RANGE': return ` [${c.min},${c.max}]${c.unit}`
    case 'EQUAL': return ` =${c.target}${c.unit}`
    default: return c.name || ''
  }
}

// 从后端步骤模板构造报工所需字段（value 挂在 row 上，提交时收集）
async function loadSteps() {
  if (!form.sn) return ElMessage.warning('请先输入工件SN')
  if (!form.processCode) return ElMessage.warning('请选择工序号')
  try {
    const data = await request.get('/process-steps', { params: { processCode: form.processCode } }) || []
    steps.value = data.map(s => ({ ...s, value: '', text: '' }))
  } catch { steps.value = [] }
}

async function submit() {
  if (!form.sn) return ElMessage.warning('请输入SN')
  if (!form.processCode) return ElMessage.warning('请选择工序号')
  const stepReq = steps.value
    .filter(s => s.collectType !== 'NONE' && (s.text !== '' || s.value !== ''))
    .map(s => ({
      stepId: s.id,
      name: s.name,
      value: Number(s.value) || 0,
      text: s.text || String(s.value || '')
    }))
  // 手动报工走工序实绩 + 步骤考核
  await request.post('/workpiece/process/report', {
    sn: form.sn,
    processCode: form.processCode,
    stationNo: form.stationNo,
    steps: stepReq
  })
  ElMessage.success('报工成功')
  steps.value = []
  Object.assign(form, { sn: '' })
  load()
}

async function load() {
  list.value = (await request.get('/scan/records', { params: query })) || []
}
onMounted(load)
</script>