From 1258456a8124260c2a071057b16c5d6a5a547493 Mon Sep 17 00:00:00 2001
From: wangyu <823267011@qq.com>
Date: Wed, 8 Jul 2026 14:45:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E5=9E=8Btab=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/acid/components/CoilInfoCard.vue    | 113 ++++++
 .../pages/acid/components/CoilModelTable.vue  | 145 ++++++++
 .../micro/pages/acid/components/Model.vue     | 343 ++----------------
 3 files changed, 298 insertions(+), 303 deletions(-)
 create mode 100644 klp-ui/src/views/micro/pages/acid/components/CoilInfoCard.vue
 create mode 100644 klp-ui/src/views/micro/pages/acid/components/CoilModelTable.vue

diff --git a/klp-ui/src/views/micro/pages/acid/components/CoilInfoCard.vue b/klp-ui/src/views/micro/pages/acid/components/CoilInfoCard.vue
new file mode 100644
index 000000000..5da05ee63
--- /dev/null
+++ b/klp-ui/src/views/micro/pages/acid/components/CoilInfoCard.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="coil-info-card">
+    <div class="card-title">
+      <span>{{ title }}</span>
+      <span v-if="coil" class="status-text">{{ statusText }}</span>
+    </div>
+    <div v-if="!coil" class="empty-tip">暂无数据</div>
+    <div v-else class="info-list">
+      <div class="info-row">
+        <span class="info-label">钢卷号</span>
+        <span class="info-value">{{ coil.coilid || '-' }}</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">钢种</span>
+        <span class="info-value">{{ coil.spec.grade }}</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">来料厚度</span>
+        <span class="info-value">{{ coil.spec.entry_thick }} mm</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">成品厚度</span>
+        <span class="info-value">{{ coil.spec.exit_thick }} mm</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">宽度</span>
+        <span class="info-value">{{ coil.spec.width }} mm</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">压下率</span>
+        <span class="info-value">{{ reductionPct }}%</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const STATUS_TEXT = {
+  PRODUCING: '正在轧',
+  READY: '设定值已生成',
+  ONLINE: '排队待轧',
+  PRODUCT: '已轧完',
+}
+
+export default {
+  name: 'CoilInfoCard',
+  props: {
+    title: { type: String, required: true },
+    coil: { type: Object, default: null },
+  },
+  computed: {
+    statusText() {
+      return STATUS_TEXT[this.coil.status] || this.coil.status || ''
+    },
+    reductionPct() {
+      const s = this.coil && this.coil.spec
+      if (!s || !s.entry_thick) return '-'
+      return (((s.entry_thick - s.exit_thick) / s.entry_thick) * 100).toFixed(1)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.coil-info-card {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 12px 14px;
+
+  & + & {
+    margin-top: 12px;
+  }
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f2f5;
+
+  .status-text {
+    font-size: 12px;
+    font-weight: normal;
+    color: #909399;
+  }
+}
+
+.empty-tip {
+  color: #c0c4cc;
+  font-size: 12px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  line-height: 24px;
+
+  .info-label {
+    color: #909399;
+  }
+
+  .info-value {
+    color: #303133;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/micro/pages/acid/components/CoilModelTable.vue b/klp-ui/src/views/micro/pages/acid/components/CoilModelTable.vue
new file mode 100644
index 000000000..4a9f16ccb
--- /dev/null
+++ b/klp-ui/src/views/micro/pages/acid/components/CoilModelTable.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="coil-model-table">
+    <div class="section-title">{{ title }}</div>
+
+    <div v-if="!coil" class="empty-tip">暂无数据</div>
+
+    <template v-else>
+      <div v-if="coil.l2_note" class="note-line">赛迪：{{ coil.l2_note }}</div>
+      <div v-if="coil.ours_note" class="note-line">FAD：{{ coil.ours_note }}</div>
+
+      <el-table :data="rows" size="mini" border :row-class-name="rowClassName">
+        <el-table-column label="机架" prop="standLabel" width="64" align="center" fixed />
+        <el-table-column
+          v-for="col in columns"
+          :key="col.field"
+          :label="col.label"
+          align="center"
+        >
+          <template slot="header">
+            <div>{{ col.label }}</div>
+            <div class="col-unit">{{ col.unit }}</div>
+          </template>
+          <el-table-column label="赛迪" align="right" min-width="66">
+            <template slot-scope="{ row }">{{ row.idle ? '-' : col.fmt(row.l2[col.field]) }}</template>
+          </el-table-column>
+          <el-table-column label="FAD" align="right" min-width="66">
+            <template slot-scope="{ row }">
+              <span class="fad-value">{{ row.idle ? '-' : col.fmt(row.ours[col.field]) }}</span>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
+    </template>
+  </div>
+</template>
+
+<script>
+function fmtNum(v, digits) {
+  if (v === null || v === undefined || v === '') return '-'
+  const n = Number(v)
+  return Number.isNaN(n) ? '-' : n.toFixed(digits)
+}
+
+// 与 klp-ml-mill/predict.py 的 TABLE_COLUMNS 保持一致
+const COLUMNS = [
+  { label: '入口厚度', unit: 'mm', field: 'setup_enthick', fmt: v => fmtNum(v, 3) },
+  { label: '压下率', unit: '%', field: 'setup_reduct', fmt: v => fmtNum(v, 0) },
+  { label: '轧辊速度', unit: 'm/min', field: 'calc_stand_spd', fmt: v => fmtNum(v, 0) },
+  { label: '前滑', unit: '%', field: 'meas_slip', fmt: v => fmtNum(v, 2) },
+  { label: '轧制力', unit: 'kN', field: 'calc_force', fmt: v => fmtNum(v, 0) },
+  { label: '辊缝', unit: 'mm', field: 'calc_gap_run', fmt: v => fmtNum(v, 2) },
+  { label: '工作辊弯辊', unit: 'kN', field: 'mea_wr_bend', fmt: v => fmtNum(v, 0) },
+  { label: '中间辊弯辊', unit: 'kN', field: 'mea_ir_bend', fmt: v => fmtNum(v, 0) },
+  { label: '张应力', unit: 'MPa', field: 'setup_extension_stress', fmt: v => fmtNum(v, 0) },
+  { label: '出口张力', unit: 'kN', field: 'setup_extension_force', fmt: v => fmtNum(v, 0) },
+  { label: '负荷', unit: '%', field: 'calc_power_ratio', fmt: v => fmtNum(v, 0) },
+]
+
+export default {
+  name: 'CoilModelTable',
+  props: {
+    title: { type: String, required: true },
+    coil: { type: Object, default: null },
+  },
+  data() {
+    return { columns: COLUMNS }
+  },
+  computed: {
+    // 6机架，每行同时带赛迪(L2实测)和FAD(我们预测)两组值，交给嵌套表头对比展示；
+    // 空过机架(真正关闭的机架，不是"没数据")单独一行，不展示任何预测值。
+    rows() {
+      if (!this.coil) return []
+      const l2 = this.coil.l2 || {}
+      const ours = (this.coil.ours && this.coil.ours.predictions) || {}
+      const out = []
+      for (let sid = 0; sid < 6; sid++) {
+        const oursStand = ours['stand' + sid] || {}
+        const active = oursStand.active !== false
+        if (!active) {
+          out.push({ standLabel: '机架' + (sid + 1), idle: true })
+          continue
+        }
+        const oursFlat = {}
+        COLUMNS.forEach(c => {
+          const e = oursStand[c.field]
+          oursFlat[c.field] = e && typeof e === 'object' ? e.value : null
+        })
+        out.push({
+          standLabel: '机架' + (sid + 1), idle: false,
+          l2: l2[sid] || {},
+          ours: oursFlat,
+        })
+      }
+      return out
+    },
+  },
+  methods: {
+    rowClassName({ row }) {
+      return row.idle ? 'idle-row' : ''
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.coil-model-table {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.empty-tip {
+  color: #c0c4cc;
+  font-size: 13px;
+  padding: 12px 0;
+}
+
+.note-line {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 6px;
+}
+
+.col-unit {
+  font-size: 11px;
+  color: #c0c4cc;
+}
+
+.fad-value {
+  color: #409eff;
+}
+
+::v-deep .el-table .idle-row {
+  color: #c0c4cc;
+}
+</style>
diff --git a/klp-ui/src/views/micro/pages/acid/components/Model.vue b/klp-ui/src/views/micro/pages/acid/components/Model.vue
index 29872bbb7..4c696464a 100644
--- a/klp-ui/src/views/micro/pages/acid/components/Model.vue
+++ b/klp-ui/src/views/micro/pages/acid/components/Model.vue
@@ -1,234 +1,44 @@
 <template>
-  <div class="model-page">
-    <el-card shadow="never" class="page-card">
-      <div slot="header" class="card-header">
-        <span>
-          <i class="el-icon-cpu"></i>
-          六机架轧制模型 · 当前卷 / 下一卷预测对照
-        </span>
-        <div class="header-actions">
-          <span v-if="updatedAt" class="updated-at">更新于 {{ updatedAt }}</span>
-          <el-switch
-            v-model="autoRefresh"
-            active-text="自动刷新"
-            inactive-color="#c0c4cc"
-            style="margin: 0 12px;"
-          />
-          <el-button size="mini" icon="el-icon-refresh" :loading="loading" @click="fetchData">刷新</el-button>
-        </div>
+  <div class="model-page" v-loading="loading && !data">
+    <el-alert v-if="errorMsg" :title="errorMsg" type="error" show-icon :closable="false" class="error-alert" />
+    <el-alert v-else-if="data && data.error" :title="data.error" type="warning" show-icon :closable="false" />
+
+    <div v-else-if="data" class="model-layout">
+      <div class="left-panel">
+        <coil-model-table title="当前卷对比" :coil="data.current" />
+        <coil-model-table title="下一卷对比" :coil="data.next" />
       </div>
-
-      <el-alert
-        v-if="errorMsg"
-        :title="errorMsg"
-        type="error"
-        show-icon
-        :closable="false"
-        style="margin-bottom: 16px;"
-      />
-
-      <div v-loading="loading && !data" element-loading-text="正在从模型服务拉取数据...">
-        <el-empty v-if="!data && !loading && !errorMsg" description="暂无数据，点击右上角「刷新」拉取" />
-
-        <template v-if="data && !data.error">
-          <coil-panel title="当前卷" tag-type="success" :coil="data.current" />
-          <coil-panel title="下一卷" tag-type="warning" :coil="data.next" style="margin-top: 20px;" />
-        </template>
-
-        <el-alert
-          v-else-if="data && data.error"
-          :title="data.error"
-          type="warning"
-          show-icon
-          :closable="false"
-        />
+      <div class="right-panel">
+        <coil-info-card title="当前卷" :coil="data.current" />
+        <coil-info-card title="下一卷" :coil="data.next" />
       </div>
-    </el-card>
+    </div>
+
+    <div v-else-if="!loading" class="empty-tip">暂无数据</div>
   </div>
 </template>
 
 <script>
 import { getLatestMillData } from '@/api/l2/mill'
+import CoilModelTable from './CoilModelTable.vue'
+import CoilInfoCard from './CoilInfoCard.vue'
 
-const STATUS_MAP = {
-  PRODUCING: { text: '正在轧', type: 'success' },
-  READY: { text: 'L2已生成设定值', type: 'primary' },
-  ONLINE: { text: '已排队待轧', type: 'warning' },
-  PRODUCT: { text: '已轧完', type: 'info' },
-}
-
-// 与 klp-ml-mill/predict.py 的 TABLE_COLUMNS 保持一致，跟HMI「模型设定」页面列一致
-const COLUMNS = [
-  { label: '入口厚度', unit: 'mm', field: 'setup_enthick', fmt: v => fmtNum(v, 3) },
-  { label: '压下率', unit: '%', field: 'setup_reduct', fmt: v => fmtNum(v, 0) },
-  { label: '轧辊速度', unit: 'm/min', field: 'calc_stand_spd', fmt: v => fmtNum(v, 0) },
-  { label: '前滑', unit: '%', field: 'meas_slip', fmt: v => fmtNum(v, 2) },
-  { label: '轧制力', unit: 'kN', field: 'calc_force', fmt: v => fmtNum(v, 0) },
-  { label: '辊缝', unit: 'mm', field: 'calc_gap_run', fmt: v => fmtNum(v, 2) },
-  { label: '工作辊弯辊', unit: 'kN', field: 'mea_wr_bend', fmt: v => fmtNum(v, 0) },
-  { label: '中间辊弯辊', unit: 'kN', field: 'mea_ir_bend', fmt: v => fmtNum(v, 0) },
-  { label: '张应力', unit: 'MPa', field: 'setup_extension_stress', fmt: v => fmtNum(v, 0) },
-  { label: '出口张力', unit: 'kN', field: 'setup_extension_force', fmt: v => fmtNum(v, 0) },
-  { label: '负荷', unit: '%', field: 'calc_power_ratio', fmt: v => fmtNum(v, 0) },
-]
-
-function fmtNum(v, digits) {
-  if (v === null || v === undefined || v === '') return '-'
-  const n = Number(v)
-  if (Number.isNaN(n)) return '-'
-  return n.toFixed(digits)
-}
-
-// CoilPanel：一个卷(当前/下一)的展示，L2实测 vs 我们的预测，逐机架对照
-const CoilPanel = {
-  name: 'CoilPanel',
-  props: {
-    title: { type: String, required: true },
-    tagType: { type: String, default: 'info' },
-    coil: { type: Object, default: null },
-  },
-  computed: {
-    statusInfo() {
-      const s = this.coil && this.coil.status
-      return STATUS_MAP[s] || { text: s || '未知', type: 'info' }
-    },
-    specText() {
-      const s = this.coil && this.coil.spec
-      if (!s) return '-'
-      return `${s.grade}  ${s.entry_thick} → ${s.exit_thick} mm  宽 ${s.width}`
-    },
-    // 6机架 x 2行(产线/预测)，空过机架单独一行
-    rows() {
-      if (!this.coil) return []
-      const l2 = this.coil.l2 || {}
-      const ours = (this.coil.ours && this.coil.ours.predictions) || {}
-      const out = []
-      for (let sid = 0; sid < 6; sid++) {
-        const oursStand = ours['stand' + sid]
-        const l2Stand = l2[String(sid)] || l2[sid]
-        const active = oursStand ? oursStand.active !== false : !!l2Stand
-        if (!active) {
-          out.push({ standLabel: '机架' + (sid + 1), source: '空过', idle: true, rowspan: 1 })
-          continue
-        }
-        out.push({
-          standLabel: '机架' + (sid + 1), source: '产线(L2)', rowspan: 2, isFirst: true,
-          values: COLUMNS.map(c => (l2Stand ? l2Stand[c.field] : null)),
-        })
-        out.push({
-          standLabel: '机架' + (sid + 1), source: '预测(我们)', rowspan: 0, isFirst: false,
-          values: COLUMNS.map(c => {
-            const e = oursStand && oursStand[c.field]
-            return e && typeof e === 'object' ? e.value : null
-          }),
-        })
-      }
-      return out
-    },
-  },
-  methods: {
-    objectSpanMethod({ row, columnIndex }) {
-      if (columnIndex === 0) {
-        if (row.rowspan === 0) return { rowspan: 0, colspan: 0 }
-        return { rowspan: row.rowspan, colspan: 1 }
-      }
-    },
-    fmt(row, colIndex) {
-      if (row.idle) return '-'
-      const raw = row.values[colIndex]
-      return COLUMNS[colIndex].fmt(raw)
-    },
-  },
-  render(h) {
-    const columns = COLUMNS
-    const header = h('div', { class: 'coil-panel-header' }, [
-      h('span', { class: 'coil-panel-title' }, [
-        h('el-tag', { props: { type: this.tagType, effect: 'dark', size: 'medium' } }, this.title),
-      ]),
-      this.coil
-        ? h('span', { class: 'coil-meta' }, [
-            h('b', this.coil.coilid || '-'),
-            h('el-tag', { props: { type: this.statusInfo.type, size: 'mini' }, style: 'margin: 0 8px;' }, this.statusInfo.text),
-            h('span', { class: 'spec-text' }, this.specText),
-          ])
-        : null,
-    ])
-
-    if (!this.coil) return h('div', { class: 'coil-panel' }, [header, h('el-empty', { props: { description: '暂无数据' } })])
-
-    const notes = []
-    if (this.coil.l2_note) notes.push(h('el-alert', {
-      props: { title: 'L2实测：' + this.coil.l2_note, type: 'info', showIcon: true, closable: false },
-      style: 'margin: 8px 0;',
-    }))
-    if (this.coil.ours_note) notes.push(h('el-alert', {
-      props: { title: '我们的预测：' + this.coil.ours_note, type: 'info', showIcon: true, closable: false },
-      style: 'margin: 8px 0;',
-    }))
-
-    const tableCols = [
-      h('el-table-column', {
-        props: { label: '机架', width: '150', align: 'center' },
-        scopedSlots: {
-          default: ({ row }) => [
-            h('div', { class: 'stand-cell' }, [
-              h('span', row.standLabel),
-              !row.idle ? h('el-tag', {
-                props: { size: 'mini', type: row.isFirst ? 'success' : 'primary', effect: row.isFirst ? 'plain' : 'dark' },
-                style: 'margin-left: 6px;',
-              }, row.source) : h('el-tag', { props: { size: 'mini', type: 'info' } }, '空过'),
-            ]),
-          ],
-        },
-      }),
-      ...columns.map((c, idx) => h('el-table-column', {
-        props: { label: c.label, align: 'right', minWidth: '92' },
-        scopedSlots: {
-          header: () => [h('div', [h('div', c.label), h('div', { class: 'col-unit' }, c.unit)])],
-          default: ({ row }) => [h('span', { class: { 'l2-value': row.isFirst, 'pred-value': row.isFirst === false } }, this.fmt(row, idx))],
-        },
-      })),
-    ]
-
-    return h('div', { class: 'coil-panel' }, [
-      header,
-      ...notes,
-      h('el-table', {
-        props: {
-          data: this.rows, border: true, size: 'mini', stripe: false,
-          spanMethod: this.objectSpanMethod,
-          rowClassName: ({ row }) => (row.idle ? 'idle-row' : (row.isFirst ? 'l2-row' : 'pred-row')),
-        },
-      }, tableCols),
-    ])
-  },
-}
+const REFRESH_INTERVAL = 15000
 
 export default {
   name: 'AcidModel',
-  components: { CoilPanel },
+  components: { CoilModelTable, CoilInfoCard },
   data() {
     return {
       loading: false,
       data: null,
       errorMsg: '',
-      updatedAt: '',
-      autoRefresh: false,
       timer: null,
     }
   },
-  watch: {
-    autoRefresh(val) {
-      if (val) {
-        this.timer = setInterval(this.fetchData, 30000)
-      } else if (this.timer) {
-        clearInterval(this.timer)
-        this.timer = null
-      }
-    },
-  },
   created() {
     this.fetchData()
+    this.timer = setInterval(this.fetchData, REFRESH_INTERVAL)
   },
   beforeDestroy() {
     if (this.timer) clearInterval(this.timer)
@@ -236,10 +46,10 @@ export default {
   methods: {
     async fetchData() {
       this.loading = true
-      this.errorMsg = ''
       try {
-        this.data = await getLatestMillData()
-        this.updatedAt = new Date().toLocaleTimeString('zh-CN', { hour12: false })
+        const res = await getLatestMillData()
+        this.data = res
+        this.errorMsg = ''
       } catch (e) {
         this.errorMsg = (e && e.response && e.response.data && e.response.data.detail) || '获取模型数据失败'
       } finally {
@@ -257,104 +67,31 @@ export default {
   overflow-y: auto;
 }
 
-.page-card {
-  border-radius: 12px;
-  border: none;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+.error-alert {
+  margin-bottom: 12px;
 }
 
-.card-header {
+.model-layout {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 600;
-  font-size: 15px;
-  color: #1f2d3d;
-
-  i {
-    color: #409eff;
-    margin-right: 6px;
-  }
+  gap: 16px;
+  align-items: flex-start;
 }
 
-.header-actions {
-  display: flex;
-  align-items: center;
-
-  .updated-at {
-    font-size: 12px;
-    color: #909399;
-    font-weight: normal;
-  }
+.left-panel {
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
 }
 
-::v-deep .coil-panel {
-  border: 1px solid #ebeef5;
-  border-radius: 10px;
-  padding: 16px;
-  background: #fafbfc;
+.right-panel {
+  width: 260px;
+  flex-shrink: 0;
+}
 
-  .coil-panel-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-
-  .coil-meta {
-    display: flex;
-    align-items: center;
-    font-size: 13px;
-    color: #606266;
-
-    b {
-      color: #1f2d3d;
-      margin-right: 4px;
-    }
-
-    .spec-text {
-      color: #606266;
-      background: #fff;
-      border: 1px solid #ebeef5;
-      border-radius: 4px;
-      padding: 2px 8px;
-    }
-  }
-
-  .stand-cell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-  }
-
-  .col-unit {
-    font-size: 11px;
-    color: #909399;
-    font-weight: normal;
-  }
-
-  .l2-value {
-    color: #1f2d3d;
-  }
-
-  .pred-value {
-    color: #409eff;
-    font-weight: 600;
-  }
-
-  .el-table .l2-row {
-    background-color: #fff;
-  }
-
-  .el-table .pred-row {
-    background-color: #ecf5ff;
-  }
-
-  .el-table .idle-row {
-    background-color: #f4f4f5;
-    color: #c0c4cc;
-  }
+.empty-tip {
+  color: #c0c4cc;
+  font-size: 13px;
+  padding: 40px 0;
+  text-align: center;
 }
 </style>