双机架轧辊管理工作绩效粒度分割到每一个辊

klp-ui/src/views/mes/roll/working/index.vue

@@ -85,30 +85,51 @@
         </el-table>
       </el-card>
 
-      <!-- 可用轧辊（离线） -->
-      <el-card shadow="never" class="roll-table-card top-row__aside">
-        <div slot="header" class="card-header">
-          <span class="card-title"><i class="el-icon-files" /> 可用轧辊（离线）</span>
-          <el-button size="mini" icon="el-icon-refresh" style="margin-left:auto" @click="loadOfflineRolls">刷新</el-button>
-        </div>
-        <el-table v-loading="offlineLoading" :data="offlineRolls" size="small" :height="asideTableHeight" style="width:100%">
-          <el-table-column label="辊型" align="center" prop="rollType" width="58">
-            <template slot-scope="scope">
-              <el-tag size="mini" :type="scope.row.rollType === 'WR' ? 'primary' : 'warning'">
-                {{ scope.row.rollType }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="轧辊编号" align="center" prop="rollNo" min-width="110" show-overflow-tooltip />
-          <el-table-column label="辊径(mm)" align="center" width="82">
-            <template slot-scope="scope">
-              {{ scope.row.currentDia != null ? scope.row.currentDia : scope.row.initialDia }}
-            </template>
-          </el-table-column>
-          <el-table-column label="粗糙度" align="center" prop="roughness" width="70" />
-          <el-table-column label="磨削次数" align="center" prop="grindCount" width="70" />
-        </el-table>
-      </el-card>
+      <!-- 右侧：可用辊 + 工作绩效，纵向叠放 -->
+      <div class="top-row__aside aside-col">
+
+        <!-- 可用轧辊（离线） -->
+        <el-card shadow="never" class="roll-table-card aside-panel">
+          <div slot="header" class="card-header">
+            <span class="card-title"><i class="el-icon-files" /> 可用轧辊（离线）</span>
+            <el-button size="mini" icon="el-icon-refresh" style="margin-left:auto" @click="loadOfflineRolls">刷新</el-button>
+          </div>
+          <el-table v-loading="offlineLoading" :data="offlineRolls" size="small" :height="asideHalfH" style="width:100%">
+            <el-table-column label="辊型" align="center" prop="rollType" width="52">
+              <template slot-scope="scope">
+                <el-tag size="mini" :type="scope.row.rollType === 'WR' ? 'primary' : 'warning'">{{ scope.row.rollType }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="轧辊编号" align="center" prop="rollNo" min-width="90" show-overflow-tooltip />
+            <el-table-column label="辊径(mm)" align="center" width="76">
+              <template slot-scope="scope">{{ scope.row.currentDia != null ? scope.row.currentDia : scope.row.initialDia }}</template>
+            </el-table-column>
+            <el-table-column label="粗糙度" align="center" prop="roughness" width="64" />
+          </el-table>
+        </el-card>
+
+        <!-- 工作绩效 -->
+        <el-card shadow="never" class="roll-table-card aside-panel">
+          <div slot="header" class="card-header">
+            <span class="card-title"><i class="el-icon-data-analysis" /> 工作绩效（实时）</span>
+            <el-button size="mini" icon="el-icon-refresh" style="margin-left:auto" @click="loadRollPerformance">刷新</el-button>
+          </div>
+          <el-table v-loading="perfLoading" :data="perfRows" size="small" :height="asideHalfH" border style="width:100%">
+            <el-table-column label="辊位" align="center" prop="label" width="70" />
+            <el-table-column label="1# 机架" align="center" min-width="1">
+              <template slot-scope="scope">
+                <perf-cell :d="scope.row['1#']" />
+              </template>
+            </el-table-column>
+            <el-table-column label="2# 机架" align="center" min-width="1">
+              <template slot-scope="scope">
+                <perf-cell :d="scope.row['2#']" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+
+      </div>
 
     </div>
 
@@ -145,17 +166,36 @@
             <el-tag size="small" :type="scope.row.changeType === '紧急换辊' ? 'danger' : ''">{{ scope.row.changeType }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作人"   align="center" prop="operator"  width="90" />
-        <el-table-column label="上工作辊" align="center" prop="upperWrNo" width="110" />
-        <el-table-column label="下工作辊" align="center" prop="lowerWrNo" width="110" />
-        <el-table-column label="上支撑辊" align="center" prop="upperBrNo" width="110" />
-        <el-table-column label="下支撑辊" align="center" prop="lowerBrNo" width="110" />
-        <el-table-column label="工作长度(m)" align="center" prop="workLength" width="110">
+        <el-table-column label="操作人"   align="center" prop="operator"  width="80" />
+        <el-table-column label="换辊辊组" align="left" min-width="160">
+          <template slot-scope="scope">
+            <div class="roll-group-cell">
+              <span v-if="scope.row.upperBrNo" class="rg-item"><b>上BR</b> {{ scope.row.upperBrNo }}<em v-if="scope.row.upperBrDia"> φ{{ scope.row.upperBrDia }}</em></span>
+              <span v-if="scope.row.upperWrNo" class="rg-item"><b>上WR</b> {{ scope.row.upperWrNo }}<em v-if="scope.row.upperWrDia"> φ{{ scope.row.upperWrDia }}</em></span>
+              <span v-if="scope.row.lowerWrNo" class="rg-item"><b>下WR</b> {{ scope.row.lowerWrNo }}<em v-if="scope.row.lowerWrDia"> φ{{ scope.row.lowerWrDia }}</em></span>
+              <span v-if="scope.row.lowerBrNo" class="rg-item"><b>下BR</b> {{ scope.row.lowerBrNo }}<em v-if="scope.row.lowerBrDia"> φ{{ scope.row.lowerBrDia }}</em></span>
+              <span v-if="!scope.row.upperBrNo && !scope.row.upperWrNo && !scope.row.lowerWrNo && !scope.row.lowerBrNo" style="color:#c0c4cc">—</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="工作长度(m)" align="center" prop="workLength" width="96">
           <template slot-scope="scope">
             <span v-if="scope.row.workLength != null">{{ scope.row.workLength }}</span>
             <span v-else style="color:#c0c4cc">—</span>
           </template>
         </el-table-column>
+        <el-table-column label="过卷数" align="center" prop="coilCount" width="72">
+          <template slot-scope="scope">
+            <span v-if="scope.row.coilCount != null">{{ scope.row.coilCount }}</span>
+            <span v-else style="color:#c0c4cc">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="过卷重量" align="center" prop="totalWeight" width="90">
+          <template slot-scope="scope">
+            <span v-if="scope.row.totalWeight != null">{{ scope.row.totalWeight }}</span>
+            <span v-else style="color:#c0c4cc">—</span>
+          </template>
+        </el-table-column>
         <el-table-column label="备注" align="left" prop="remark" min-width="100" show-overflow-tooltip />
         <el-table-column label="操作" align="center" width="110" fixed="right">
           <template slot-scope="scope">
@@ -338,31 +378,37 @@
 </template>
 
 <script>
-import { getCurrentRolls, listRollChange, addRollChange, updateRollChange, delRollChange, getWorkLength } from '@/api/mes/roll/rollChange'
+import { getCurrentRolls, listRollChange, addRollChange, updateRollChange, delRollChange, getRollPerformance } from '@/api/mes/roll/rollChange'
 import { listRollStandby, addRollStandby, delRollStandby, clearRollStandby } from '@/api/mes/roll/rollStandby'
 import { listRollOptions, listRollInfo } from '@/api/mes/roll/rollInfo'
 
-/**
- * 单元格组件：只显示数值，不展示辊号副文本和删除图标
- * 删除逻辑由外层 div 的 click 事件处理，保证所有单元格高度一致
- */
 const ParamCell = {
   name: 'ParamCell',
-  props: {
-    data: { type: Object, default: null }
-  },
+  props: { data: { type: Object, default: null } },
   render(h) {
     const d = this.data
-    if (!d || d.val == null || d.val === '') {
-      return h('span', { class: 'cell-empty' }, '—')
-    }
+    if (!d || d.val == null || d.val === '') return h('span', { class: 'cell-empty' }, '—')
     return h('span', { class: 'cell-main' }, String(d.val))
   }
 }
 
+/** 绩效单元格：显示辊号 + 三项统计 */
+const PerfCell = {
+  name: 'PerfCell',
+  props: { d: { type: Object, default: null } },
+  render(h) {
+    const d = this.d
+    if (!d || !d.rollNo) return h('span', { class: 'cell-empty' }, '—')
+    return h('div', { class: 'perf-cell' }, [
+      h('div', { class: 'perf-roll' }, d.rollNo),
+      h('div', { class: 'perf-stat' }, `${d.workLength != null ? d.workLength + 'm' : '—'} · ${d.coilCount != null ? d.coilCount + '卷' : '—'} · ${d.totalWeight != null ? d.totalWeight : '—'}`)
+    ])
+  }
+}
+
 export default {
   name: 'WorkingRoll',
-  components: { ParamCell },
+  components: { ParamCell, PerfCell },
   data() {
     return {
       current: { '1#': {}, '2#': {} },
@@ -371,9 +417,6 @@ export default {
       standbyList: { '1#': [], '2#': [] },
       loadingStandby: { '1#': false, '2#': false },
 
-      /** 当前在机轧辊实时工作长度（m） */
-      workLength: { '1#': null, '2#': null },
-
       rollInfoMap: {},
 
       historyLoading: false,
@@ -389,7 +432,11 @@ export default {
 
       offlineRolls: [],
       offlineLoading: false,
-      asideTableHeight: 400,
+
+      perfData: {},
+      perfLoading: false,
+
+      asideHalfH: 200,
 
       changeOpen: false,
       changeSubmitting: false,
@@ -510,12 +557,22 @@ export default {
           cur1: { val: null, sub: null }, cur2: { val: null, sub: null },
           sb1:  { val: null, sub: null }, sb2:  { val: null, sub: null }
         },
-        {
-          label: '工作长度(m)', group: 'pl', rollType: null, position: null,
-          cur1: { val: this.workLength['1#'] }, cur2: { val: this.workLength['2#'] },
-          sb1:  { val: null }, sb2: { val: null }
-        }
       ]
+    },
+
+    /** 工作绩效表数据行：4 辊位 × {label, 1#, 2#} */
+    perfRows() {
+      const POS = [
+        { key: 'upperBr', label: '上支撑辊' },
+        { key: 'upperWr', label: '上工作辊' },
+        { key: 'lowerWr', label: '下工作辊' },
+        { key: 'lowerBr', label: '下支撑辊' }
+      ]
+      return POS.map(p => ({
+        label: p.label,
+        '1#': (this.perfData[p.key] || {})['1#'] || {},
+        '2#': (this.perfData[p.key] || {})['2#'] || {}
+      }))
     }
   },
 
@@ -566,16 +623,17 @@ export default {
       ;['1#', '2#'].forEach(s => {
         this.loadCurrent(s)
         this.loadStandby(s)
-        this.loadWorkLength(s)
       })
       this.loadHistory()
       this.loadOfflineRolls()
+      this.loadRollPerformance()
     },
 
-    loadWorkLength(standNo) {
-      getWorkLength(standNo).then(res => {
-        this.$set(this.workLength, standNo, res.data != null ? res.data : null)
-      }).catch(() => {})
+    loadRollPerformance() {
+      this.perfLoading = true
+      getRollPerformance().then(res => {
+        this.perfData = res.data || {}
+      }).finally(() => { this.perfLoading = false })
     },
 
     loadCurrent(standNo) {
@@ -667,9 +725,9 @@ export default {
         clearRollStandby(standNo).finally(() => {
           this.loadCurrent(standNo)
           this.loadStandby(standNo)
-          this.loadWorkLength(standNo)
           this.loadHistory()
           this.loadOfflineRolls()
+          this.loadRollPerformance()
         })
       }).finally(() => {
         this.changeSubmitting = false
@@ -767,13 +825,15 @@ export default {
       })
     },
 
-    // 让右侧表格高度 = 左侧卡片 body 区域高度
+    // 右侧两个面板各占左侧表格高度的一半（各自减去卡片头高度）
     syncAsideHeight() {
       const el = this.$refs.mainTable && this.$refs.mainTable.$el
       if (!el) return
-      // el-table 的 $el 就是 .el-table 根节点，取其实际渲染高度
-      const h = el.offsetHeight
-      if (h > 0) this.asideTableHeight = h
+      const totalH = el.offsetHeight  // 左侧 el-table 实际高度
+      const gap = 12                  // 两个面板之间的间距
+      const headerH = 48              // 单个卡片 header 高度估值
+      const half = Math.max(100, Math.floor((totalH - gap) / 2) - headerH)
+      this.asideHalfH = half
     }
   }
 }
@@ -792,6 +852,21 @@ export default {
 .top-row__main  { flex: 2; min-width: 0; }
 .top-row__aside { flex: 1; min-width: 0; }
 
+/* 右侧列：两个面板纵向叠放 */
+.aside-col   { display: flex; flex-direction: column; gap: 12px; }
+.aside-panel { flex: 1; min-width: 0; }
+
+/* 绩效单元格 */
+.perf-cell  { padding: 2px 0; line-height: 1.4; }
+.perf-roll  { font-family: 'Consolas', monospace; font-size: 12px; font-weight: 600; color: #1f2329; }
+.perf-stat  { font-size: 11px; color: #8f9099; }
+
+/* 历史换辊辊组 */
+.roll-group-cell { display: flex; flex-wrap: wrap; gap: 4px; line-height: 1.5; }
+.rg-item { font-size: 12px; color: #3d4b5c; }
+.rg-item b { color: #5f6368; font-weight: 600; margin-right: 2px; }
+.rg-item em { font-style: normal; color: #9aa0a6; font-size: 11px; }
+
 .card-header  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 .card-title   { font-size: 13px; font-weight: 600; color: #3d4b5c; white-space: nowrap; }
 .header-meta  { font-size: 11px; color: #8f9099; white-space: nowrap; }