pickling-mes/frontend/src/views/EntryTracking.vue

<template>
  <div class="entry-page">

    <!-- ─── 上卷鞍座（单个生产工位）─── -->
    <div class="card">
      <div class="card-header">
        上卷鞍座
        <span class="ch-badge">{{ saddle ? statusLabel(saddle.status) : '空闲' }}</span>
        <span style="margin-left:auto;display:flex;gap:8px;align-items:center;">
          <button v-if="saddle && saddle.status !== 'producing'" class="btn btn-primary" @click="commit(saddle)">投入生产</button>
          <button class="btn btn-outline" @click="refreshAll">刷新</button>
        </span>
      </div>

      <div class="card-body">
        <div v-if="saddle" class="saddle-station">
          <div class="saddle-info">
            <div class="si-row"><span class="si-k">冷卷号</span><span class="si-v hl">{{ saddle.cold_coil_no || saddle.plan_no }}</span></div>
            <div class="si-row"><span class="si-k">热卷号</span><span class="si-v">{{ saddle.hot_coil_no || '—' }}</span></div>
            <div class="si-row"><span class="si-k">钢种</span><span class="si-v">{{ saddle.steel_grade || '—' }}</span></div>
            <div class="si-row"><span class="si-k">规格(厚×宽)</span><span class="si-v">{{ fmt(saddle.product_thickness, 2) }} × {{ fmt(saddle.product_width, 0) }}</span></div>
            <div class="si-row"><span class="si-k">来料重量[t]</span><span class="si-v">{{ fmt(saddle.incoming_weight, 3) }}</span></div>
            <div class="si-row"><span class="si-k">轧制模式</span><span class="si-v">{{ saddle.rolling_mode || '—' }}</span></div>
          </div>

          <div class="saddle-run">
            <div class="metric-box">
              <span class="mb-label">线速度</span>
              <span class="mb-value">{{ fmt(saddle.run_speed, 0) }}</span>
              <span class="mb-unit">m/min</span>
            </div>
            <div class="metric-box">
              <span class="mb-label">带头长度 / 目标</span>
              <span class="mb-value">{{ fmt(saddle.run_length_m, 0) }}</span>
              <span class="mb-unit">/ {{ TARGET }} m</span>
            </div>
            <div class="run-prog">
              <div class="rp-head">
                <span>生产进度</span>
                <span class="rp-pct">{{ progPct(saddle).toFixed(1) }}%</span>
              </div>
              <div class="prog-bar-wrap" style="height:10px;">
                <div class="prog-bar-fill" :style="{ width: progPct(saddle) + '%', background: progColor(saddle) }"></div>
              </div>
              <div class="rp-tip">
                <template v-if="saddle.status === 'producing'">带头到达 {{ TARGET }} m 后自动产出实绩并完成</template>
                <template v-else>已在鞍座，等待速度信号；可点「投入生产」手动开始</template>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="saddle-empty">
          上卷鞍座空闲 — 从下方队列点击「移动」把在线计划推到鞍座
        </div>
      </div>
    </div>

    <!-- ─── 待上卷计划卡片 ─── -->
    <div class="card">
      <div class="card-header">
        待上卷计划
        <span class="ch-badge">在线/准备 {{ queuePlans.length }} 条</span>
      </div>
      <div class="card-body">
        <div v-if="queueCards.length" class="card-grid">
          <div v-for="p in queueCards" :key="p.id" :class="['plan-card', { online: p.status === 'online' }]">
            <div class="pc-head">
              <span class="pc-coil">{{ p.cold_coil_no || p.plan_no }}</span>
              <span :class="['badge', p.status === 'online' ? 'badge-green' : 'badge-gray']">{{ statusLabel(p.status) }}</span>
            </div>
            <div class="pc-body">
              <div class="pc-row"><span>钢种</span><b>{{ p.steel_grade || '—' }}</b></div>
              <div class="pc-row"><span>规格</span><b>{{ fmt(p.product_thickness, 2) }}×{{ fmt(p.product_width, 0) }}</b></div>
              <div class="pc-row"><span>重量[t]</span><b>{{ fmt(p.incoming_weight, 3) }}</b></div>
              <div class="pc-row"><span>轧制模式</span><b>{{ p.rolling_mode || '—' }}</b></div>
            </div>
            <button class="btn btn-primary fw" :disabled="saddleOccupied" @click="move(p)">移动到鞍座</button>
          </div>
        </div>
        <div v-else class="td-muted" style="text-align:center;padding:14px;">暂无在线/准备好的计划</div>
      </div>
    </div>

    <!-- ─── 入口队列表 ─── -->
    <div class="card">
      <div class="card-header">
        入口队列
        <span class="ch-badge">{{ queuePlans.length }} 条</span>
      </div>
      <div class="table-scroll">
        <table class="data-table compact">
          <thead>
            <tr>
              <th>序号</th><th>冷卷号</th><th>热卷号</th><th>钢种</th>
              <th>规格(厚×宽)</th><th>来料重量</th><th>轧制模式</th><th>状态</th><th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(p, i) in queuePlans" :key="p.id">
              <td class="td-num">{{ i + 1 }}</td>
              <td class="td-num">{{ p.cold_coil_no || p.plan_no }}</td>
              <td class="td-num">{{ p.hot_coil_no || '—' }}</td>
              <td>{{ p.steel_grade || '—' }}</td>
              <td class="td-num">{{ fmt(p.product_thickness, 2) }} × {{ fmt(p.product_width, 0) }}</td>
              <td class="td-num">{{ fmt(p.incoming_weight, 2) }}</td>
              <td>{{ p.rolling_mode || '—' }}</td>
              <td><span :class="['badge', p.status === 'online' ? 'badge-green' : 'badge-gray']">{{ statusLabel(p.status) }}</span></td>
              <td><span :class="['action-link', { disabled: saddleOccupied }]" @click="!saddleOccupied && move(p)">移动</span></td>
            </tr>
            <tr v-if="!queuePlans.length">
              <td colspan="9" class="td-muted" style="text-align:center;padding:14px;">暂无在线/准备好的计划</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getPlans, getSaddle, moveToSaddle, commitProducing } from '@/api'

const STATUS_LABEL = { ready: '准备好', online: '在线', producing: '生产中', produced: '生产完成' }
const TARGET = 2000

export default {
  name: 'EntryTracking',
  data() {
    return { plans: [], saddle: null, TARGET, timer: null, fastTimer: null }
  },
  computed: {
    queuePlans() {
      // 在线 + 准备好，且不在鞍座上；在线排前
      return this.plans
        .filter(p => (p.status === 'online' || p.status === 'ready') && p.on_saddle !== 1)
        .sort((a, b) => (a.status === 'online' ? -1 : 1) - (b.status === 'online' ? -1 : 1))
    },
    queueCards() { return this.queuePlans.slice(0, 8) },
    saddleOccupied() { return !!this.saddle && this.saddle.status !== 'produced' },
  },
  created() {
    this.refreshAll()
    this.fastTimer = setInterval(this.fetchSaddle, 2000)   // 鞍座实时进度
    this.timer = setInterval(this.fetchPlans, 5000)        // 队列
  },
  beforeDestroy() { clearInterval(this.timer); clearInterval(this.fastTimer) },
  methods: {
    refreshAll() { this.fetchPlans(); this.fetchSaddle() },
    async fetchPlans() {
      try {
        const res = await getPlans({ page: 1, page_size: 100 })
        this.plans = res.data.items || []
      } catch (e) { /* ignore */ }
    },
    async fetchSaddle() {
      try {
        const res = await getSaddle()
        this.saddle = res.data || null
      } catch (e) { /* ignore */ }
    },
    fmt(v, n = 2) { return v != null && v !== '' ? Number(v).toFixed(n) : '—' },
    statusLabel(s) { return STATUS_LABEL[s] || s || '—' },
    progPct(p) { return Math.max(0, Math.min(100, (p.run_length_m || 0) / TARGET * 100)) },
    progColor(p) {
      const pct = this.progPct(p)
      return pct >= 100 ? 'var(--accent-green)' : 'var(--sms-teal)'
    },
    async move(p) {
      if (this.saddleOccupied) { this.$message.warning('鞍座已被占用，请等待当前钢卷生产完成'); return }
      try {
        await moveToSaddle(p.id)
        this.$message.success('已移动到上卷鞍座')
        this.refreshAll()
      } catch (e) {
        this.$message.error(e?.response?.data?.detail || '操作失败')
      }
    },
    async commit(p) {
      try {
        await commitProducing(p.id)
        this.$message.success('已投入生产')
        this.fetchSaddle()
      } catch (e) {
        this.$message.error(e?.response?.data?.detail || '操作失败')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables';

.entry-page { display: flex; flex-direction: column; gap: 12px; }

// ── 鞍座工位 ──
.saddle-station { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.saddle-info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
  align-content: start;
  border-right: 1px solid $border; padding-right: 16px;
}
.si-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; }
.si-k { color: $text-muted; }
.si-v { color: $text-primary; font-family: $font-mono; font-weight: 600; &.hl { color: $sms-teal; } }

.saddle-run { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.saddle-run .metric-box { min-width: 0; }
.run-prog { grid-column: 1 / -1; }
.rp-head { display: flex; justify-content: space-between; font-size: 12px; color: $text-secondary; margin-bottom: 5px; }
.rp-pct { font-family: $font-mono; font-weight: 700; color: $sms-teal; }
.rp-tip { font-size: 11px; color: $text-muted; margin-top: 6px; }

.saddle-empty { text-align: center; padding: 30px; color: $text-muted; font-size: 13px; }

// ── 待上卷卡片 ──
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.plan-card {
  background: $bg-panel; border: 1px solid $border; border-radius: 6px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  &.online { border-color: $accent-green; box-shadow: 0 0 0 1px rgba($accent-green, .25) inset; }
}
.pc-head { display: flex; align-items: center; justify-content: space-between; }
.pc-coil { font-family: $font-mono; font-weight: 700; color: $sms-teal; font-size: 13px; }
.pc-body { display: flex; flex-direction: column; gap: 3px; }
.pc-row { display: flex; justify-content: space-between; font-size: 11.5px; span { color: $text-muted; } b { color: $text-primary; font-family: $font-mono; } }

.action-link {
  color: $accent-green; cursor: pointer; font-size: 12px;
  &:hover { text-decoration: underline; }
  &.disabled { color: $text-muted; cursor: not-allowed; text-decoration: none; }
}
</style>