From fd6c568d1915bdc720771c5e58ef33ee87d19559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Mon, 22 Jun 2026 17:56:33 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E8=BD=A7?=
 =?UTF-8?q?=E8=BE=8A=E7=A3=A8=E5=89=8A=E9=A1=B5=E9=9D=A2=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E6=8E=92=E7=89=88=E5=8F=AF=E8=AF=BB?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将页面内的模板标签、样式代码统一调整为多行缩进规范，合并冗余的单行代码，统一代码书写格式，提升页面代码的可维护性和阅读体验
---
 klp-ui/src/views/mes/roll/grind/index.vue | 497 ++++++++++++----------
 1 file changed, 278 insertions(+), 219 deletions(-)

diff --git a/klp-ui/src/views/mes/roll/grind/index.vue b/klp-ui/src/views/mes/roll/grind/index.vue
index f16d7982..fa66c566 100644
--- a/klp-ui/src/views/mes/roll/grind/index.vue
+++ b/klp-ui/src/views/mes/roll/grind/index.vue
@@ -4,31 +4,18 @@
 
       <!-- ── 左侧：产线 Tab ── -->
       <div class="line-tabs">
-        <div
-          :class="['lt-item', filterLineId === null ? 'lt-item--active' : '']"
-          @click="handleLineTab(null)"
-        >全部</div>
-        <div
-          v-for="l in sortedProductionLines"
-          :key="l.lineId"
-          :class="['lt-item', filterLineId === l.lineId ? 'lt-item--active' : '']"
-          @click="handleLineTab(l.lineId)"
-        >{{ l.lineName }}</div>
+        <div :class="['lt-item', filterLineId === null ? 'lt-item--active' : '']" @click="handleLineTab(null)">全部</div>
+        <div v-for="l in sortedProductionLines" :key="l.lineId"
+          :class="['lt-item', filterLineId === l.lineId ? 'lt-item--active' : '']" @click="handleLineTab(l.lineId)">{{
+            l.lineName }}</div>
       </div>
 
       <!-- ── 右侧主体 ── -->
       <div class="grind-main">
         <!-- 顶部检索栏 -->
         <div class="search-bar">
-          <el-input
-            v-model="filterNo"
-            size="small"
-            placeholder="辊号检索"
-            prefix-icon="el-icon-search"
-            clearable
-            style="width:180px"
-            @input="filterRolls"
-          />
+          <el-input v-model="filterNo" size="small" placeholder="辊号检索" prefix-icon="el-icon-search" clearable
+            style="width:180px" @input="filterRolls" />
           <el-radio-group v-model="filterType" size="small" @change="filterRolls">
             <el-radio-button label="">全部类型</el-radio-button>
             <el-radio-button label="WR">WR</el-radio-button>
@@ -53,15 +40,12 @@
               <div slot="header" class="card-header">
                 <span class="card-title"><i class="el-icon-s-order" /> 轧辊列表</span>
                 <span class="card-count">{{ filteredRolls.length }}</span>
-                <el-button size="mini" type="text" icon="el-icon-plus" style="margin-left:auto" @click="handleAddRoll">新增轧辊</el-button>
+                <el-button size="mini" type="text" icon="el-icon-plus" style="margin-left:auto"
+                  @click="handleAddRoll">新增轧辊</el-button>
               </div>
               <div v-loading="rollLoading" class="roll-list">
-                <div
-                  v-for="r in filteredRolls"
-                  :key="r.rollId"
-                  :class="['roll-item', selectedRollId === r.rollId ? 'roll-item--active' : '']"
-                  @click="selectRoll(r)"
-                >
+                <div v-for="r in filteredRolls" :key="r.rollId"
+                  :class="['roll-item', selectedRollId === r.rollId ? 'roll-item--active' : '']" @click="selectRoll(r)">
                   <div class="ri-no">{{ r.rollNo }}</div>
                   <div class="ri-meta">
                     <el-tag size="mini" :type="r.rollType === 'WR' ? 'primary' : 'warning'">{{ r.rollType }}</el-tag>
@@ -88,26 +72,43 @@
               <el-card shadow="never" class="detail-card" style="margin-bottom:10px">
                 <div slot="header" class="card-header">
                   <span class="card-title"><i class="el-icon-info" /> 轧辊明细</span>
-                  <el-button size="mini" type="text" icon="el-icon-edit" style="margin-left:auto" @click="handleEditRoll(selectedRoll)">修改</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-delete" style="color:#c5221f" @click="handleDelRoll(selectedRoll)">删除</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" style="margin-left:auto"
+                    @click="handleEditRoll(selectedRoll)">修改</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" style="color:#c5221f"
+                    @click="handleDelRoll(selectedRoll)">删除</el-button>
                 </div>
                 <div class="roll-header-grid">
-                  <div class="rh-item"><span class="rh-k">轧辊编号</span><span class="rh-v bold">{{ selectedRoll.rollNo }}</span></div>
-                  <div class="rh-item"><span class="rh-k">辊型</span><span class="rh-v">{{ { WR: '工作辊', BR: '支撑辊', CR: '中间辊' }[selectedRoll.rollType] || '—' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">机架</span><span class="rh-v">{{ selectedRoll.frame || '—' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">厂家</span><span class="rh-v">{{ selectedRoll.manufacturer || '—' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">材质</span><span class="rh-v">{{ selectedRoll.material || '—' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">初始辊径</span><span class="rh-v">{{ selectedRoll.initialDia != null ? selectedRoll.initialDia + ' mm' : '—' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">当前辊径</span><span class="rh-v bold accent">{{ effectiveCurrentDia != null ? effectiveCurrentDia + ' mm' : '—' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">最小辊径</span><span class="rh-v">{{ selectedRoll.minDia != null ? selectedRoll.minDia + ' mm' : '—' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">磨削次数</span><span class="rh-v">{{ tableData.length ? tableData.length + ' 次' : '0 次' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">粗糙度</span><span class="rh-v">{{ selectedRoll.roughness != null ? selectedRoll.roughness + ' μm' : '—' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">凸度</span><span class="rh-v">{{ selectedRoll.crown != null ? selectedRoll.crown + ' mm' : '—' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">轧辊编号</span><span class="rh-v bold">{{ selectedRoll.rollNo
+                      }}</span></div>
+                  <div class="rh-item"><span class="rh-k">辊型</span><span class="rh-v">{{ {
+                    WR: '工作辊', BR: '支撑辊', CR:
+                      '中间辊'
+                  }[selectedRoll.rollType] || '—' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">机架</span><span class="rh-v">{{ selectedRoll.frame || '—'
+                      }}</span></div>
+                  <div class="rh-item"><span class="rh-k">厂家</span><span class="rh-v">{{ selectedRoll.manufacturer ||
+                      '—' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">材质</span><span class="rh-v">{{ selectedRoll.material || '—'
+                      }}</span></div>
+                  <div class="rh-item"><span class="rh-k">初始辊径</span><span class="rh-v">{{ selectedRoll.initialDia !=
+                    null ? selectedRoll.initialDia + ' mm' : '—' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">当前辊径</span><span class="rh-v bold accent">{{
+                    effectiveCurrentDia != null ? effectiveCurrentDia + ' mm' : '—' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">最小辊径</span><span class="rh-v">{{ selectedRoll.minDia != null ?
+                    selectedRoll.minDia + ' mm' : '—' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">磨削次数</span><span class="rh-v">{{ tableData.length ?
+                    tableData.length + ' 次' : '0 次' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">粗糙度</span><span class="rh-v">{{ selectedRoll.roughness != null
+                    ? selectedRoll.roughness + ' μm' : '—' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">凸度</span><span class="rh-v">{{ selectedRoll.crown != null ?
+                    selectedRoll.crown + ' mm' : '—' }}</span></div>
                   <div class="rh-item"><span class="rh-k">状态</span>
                     <span :class="['rh-v', 'st-' + selectedRoll.status]">{{ statusLabel(selectedRoll.status) }}</span>
                   </div>
-                  <div class="rh-item"><span class="rh-k">制造日期</span><span class="rh-v">{{ selectedRoll.manufactureDate || '—' }}</span></div>
-                  <div class="rh-item"><span class="rh-k">备注</span><span class="rh-v">{{ selectedRoll.remark || '—' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">制造日期</span><span class="rh-v">{{ selectedRoll.manufactureDate
+                      || '—' }}</span></div>
+                  <div class="rh-item"><span class="rh-k">备注</span><span class="rh-v">{{ selectedRoll.remark || '—'
+                      }}</span></div>
                 </div>
               </el-card>
 
@@ -116,52 +117,28 @@
                 <div slot="header" class="card-header">
                   <span class="card-title"><i class="el-icon-document" /> 磨削台账</span>
                   <span style="margin-left:auto;display:flex;gap:8px">
-                    <el-button v-hasPermi="['system:dict:list']" size="mini" type="text" icon="el-icon-setting" @click="openOperatorDict">操作人维护</el-button>
-                    <el-button
-                      type="primary"
-                      size="mini"
-                      icon="el-icon-plus"
-                      :disabled="!!editRow"
-                      @click="startAdd"
-                    >新增磨削记录</el-button>
+                    <el-button v-hasPermi="['system:dict:list']" size="mini" type="text" icon="el-icon-setting"
+                      @click="openOperatorDict">操作人维护</el-button>
+                    <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="!!editRow"
+                      @click="startAdd">新增磨削记录</el-button>
                   </span>
                 </div>
 
-                <el-table
-                  :data="tableData"
-                  size="small"
-                  border
-                  style="width:100%"
-                  :row-class-name="rowClassName"
-                >
+                <el-table :data="tableData" size="small" border style="width:100%" :row-class-name="rowClassName">
                   <el-table-column label="序号" type="index" width="46" align="center" />
 
                   <el-table-column label="磨削时间" align="center" width="200">
                     <template slot-scope="{row}">
-                      <el-date-picker
-                        v-if="isEditing(row)"
-                        v-model="editRow.grindTime"
-                        type="datetime"
-                        size="mini"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        style="width:182px"
-                        placeholder="请选择"
-                      />
+                      <el-date-picker v-if="isEditing(row)" v-model="editRow.grindTime" type="datetime" size="mini"
+                        value-format="yyyy-MM-dd HH:mm:ss" style="width:182px" placeholder="请选择" />
                       <span v-else>{{ row.grindTime }}</span>
                     </template>
                   </el-table-column>
 
                   <el-table-column label="班组" align="center" width="100">
                     <template slot-scope="{row}">
-                      <el-select
-                        v-if="isEditing(row)"
-                        v-model="editRow.team"
-                        size="mini"
-                        placeholder="班组"
-                        clearable
-                        filterable
-                        allow-create
-                      >
+                      <el-select v-if="isEditing(row)" v-model="editRow.team" size="mini" placeholder="班组" clearable
+                        filterable allow-create>
                         <el-option label="甲班" value="甲班" />
                         <el-option label="乙班" value="乙班" />
                       </el-select>
@@ -171,24 +148,14 @@
 
                   <el-table-column label="磨前径(mm)" align="center" width="100">
                     <template slot-scope="{row}">
-                      <el-input
-                        v-if="isEditing(row)"
-                        v-model="editRow.diaBefore"
-                        size="mini"
-                        style="width:80px"
-                      />
+                      <el-input v-if="isEditing(row)" v-model="editRow.diaBefore" size="mini" style="width:80px" />
                       <span v-else>{{ row.diaBefore }}</span>
                     </template>
                   </el-table-column>
 
                   <el-table-column label="磨后径(mm)" align="center" width="100">
                     <template slot-scope="{row}">
-                      <el-input
-                        v-if="isEditing(row)"
-                        v-model="editRow.diaAfter"
-                        size="mini"
-                        style="width:80px"
-                      />
+                      <el-input v-if="isEditing(row)" v-model="editRow.diaAfter" size="mini" style="width:80px" />
                       <span v-else>{{ row.diaAfter }}</span>
                     </template>
                   </el-table-column>
@@ -204,12 +171,7 @@
 
                   <el-table-column label="辊型" align="center" width="100">
                     <template slot-scope="{row}">
-                      <el-select
-                        v-if="isEditing(row)"
-                        v-model="editRow.rollShape"
-                        size="mini"
-                        style="width:84px"
-                      >
+                      <el-select v-if="isEditing(row)" v-model="editRow.rollShape" size="mini" style="width:84px">
                         <el-option label="平" value="平" />
                         <el-option label="凸" value="凸" />
                         <el-option label="凹" value="凹" />
@@ -220,12 +182,7 @@
 
                   <el-table-column label="探伤结果" align="center" width="110">
                     <template slot-scope="{row}">
-                      <el-select
-                        v-if="isEditing(row)"
-                        v-model="editRow.flawResult"
-                        size="mini"
-                        style="width:94px"
-                      >
+                      <el-select v-if="isEditing(row)" v-model="editRow.flawResult" size="mini" style="width:94px">
                         <el-option label="合格" value="合格" />
                         <el-option label="不合格" value="不合格" />
                       </el-select>
@@ -237,59 +194,37 @@
 
                   <el-table-column label="硬度" align="center" width="80">
                     <template slot-scope="{row}">
-                      <el-input
-                        v-if="isEditing(row)"
-                        v-model.number="editRow.hardness"
-                        size="mini"
-                        style="width:64px"
-                      />
+                      <el-input v-if="isEditing(row)" v-model.number="editRow.hardness" size="mini"
+                        style="width:64px" />
                       <span v-else>{{ row.hardness || '—' }}</span>
                     </template>
                   </el-table-column>
 
                   <el-table-column label="操作者" align="center" width="140">
                     <template slot-scope="{row}">
-                      <el-select
-                        v-if="isEditing(row)"
-                        v-model="editRow.operator"
-                        size="mini"
-                        placeholder="选填"
-                        clearable
-                        filterable
-                        allow-create
-                      >
-                        <el-option
-                          v-for="item in dict.type.mes_roll_operator"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        />
+                      <el-select v-if="isEditing(row)" v-model="editRow.operator" size="mini" placeholder="选填" clearable
+                        filterable allow-create>
+                        <el-option v-for="item in dict.type.mes_roll_operator" :key="item.value" :label="item.label"
+                          :value="item.value" />
                       </el-select>
                       <span v-else class="remark-text">{{ row.operator || '' }}</span>
                     </template>
                   </el-table-column>
 
-                  <el-table-column label="复核人" align="center" width="100">
+                  <el-table-column label="复核人" align="center" width="140">
                     <template slot-scope="{row}">
-                      <el-input
-                        v-if="isEditing(row)"
-                        v-model="editRow.reviewer"
-                        size="mini"
-                        style="width:84px"
-                        placeholder="选填"
-                      />
+                      <el-select v-if="isEditing(row)" v-model="editRow.reviewer" size="mini" placeholder="选填" clearable
+                        filterable allow-create>
+                        <el-option v-for="item in dict.type.mes_roll_operator" :key="item.value" :label="item.label"
+                          :value="item.value" />
+                      </el-select>
                       <span v-else class="remark-text">{{ row.reviewer || '' }}</span>
                     </template>
                   </el-table-column>
 
                   <el-table-column label="备注" align="left" width="120">
                     <template slot-scope="{row}">
-                      <el-input
-                        v-if="isEditing(row)"
-                        v-model="editRow.remark"
-                        size="mini"
-                        placeholder="选填"
-                      />
+                      <el-input v-if="isEditing(row)" v-model="editRow.remark" size="mini" placeholder="选填" />
                       <span v-else class="remark-text">{{ row.remark || '' }}</span>
                     </template>
                   </el-table-column>
@@ -297,37 +232,16 @@
                   <el-table-column label="操作" align="center" width="100" fixed="right">
                     <template slot-scope="{row}">
                       <template v-if="isEditing(row)">
-                        <el-button
-                          size="mini"
-                          type="text"
-                          icon="el-icon-check"
-                          :loading="grindSaving"
-                          @click="saveRow"
-                        >保存</el-button>
-                        <el-button
-                          size="mini"
-                          type="text"
-                          icon="el-icon-close"
-                          style="color:#909399"
-                          @click="cancelEdit"
-                        >取消</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-check" :loading="grindSaving"
+                          @click="saveRow">保存</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-close" style="color:#909399"
+                          @click="cancelEdit">取消</el-button>
                       </template>
                       <template v-else>
-                        <el-button
-                          size="mini"
-                          type="text"
-                          icon="el-icon-edit"
-                          :disabled="!!editRow"
-                          @click="startEdit(row)"
-                        >修改</el-button>
-                        <el-button
-                          size="mini"
-                          type="text"
-                          icon="el-icon-delete"
-                          style="color:#c5221f"
-                          :disabled="!!editRow"
-                          @click="handleDelete(row)"
-                        >删除</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-edit" :disabled="!!editRow"
+                          @click="startEdit(row)">修改</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" style="color:#c5221f"
+                          :disabled="!!editRow" @click="handleDelete(row)">删除</el-button>
                       </template>
                     </template>
                   </el-table-column>
@@ -356,7 +270,8 @@
     </div>
 
     <!-- 操作人字典维护对话框 -->
-    <el-dialog title="操作人字典维护" :visible.sync="operatorDictOpen" width="650px" append-to-body :close-on-click-modal="false" @closed="operatorDictList = []">
+    <el-dialog title="操作人字典维护" :visible.sync="operatorDictOpen" width="650px" append-to-body
+      :close-on-click-modal="false" @closed="operatorDictList = []">
       <div style="margin-bottom:10px">
         <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddOperator">新增操作人</el-button>
       </div>
@@ -372,14 +287,16 @@
         <el-table-column label="操作" align="center" width="140">
           <template slot-scope="{row}">
             <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditOperator(row)">编辑</el-button>
-            <el-button size="mini" type="text" icon="el-icon-delete" style="color:#c5221f" @click="handleDeleteOperator(row)">删除</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" style="color:#c5221f"
+              @click="handleDeleteOperator(row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-dialog>
 
     <!-- 操作人新增/修改对话框 -->
-    <el-dialog :title="operatorFormTitle" :visible.sync="operatorFormOpen" width="400px" append-to-body :close-on-click-modal="false" @close="resetOperatorForm">
+    <el-dialog :title="operatorFormTitle" :visible.sync="operatorFormOpen" width="400px" append-to-body
+      :close-on-click-modal="false" @close="resetOperatorForm">
       <el-form ref="operatorForm" :model="operatorForm" :rules="operatorFormRules" label-width="80px" size="small">
         <el-form-item label="姓名" prop="dictLabel">
           <el-input v-model="operatorForm.dictLabel" placeholder="请输入姓名" />
@@ -399,14 +316,8 @@
     </el-dialog>
 
     <!-- 轧辊新增/修改对话框 -->
-    <el-dialog
-      :title="rollFormTitle"
-      :visible.sync="rollFormOpen"
-      width="600px"
-      append-to-body
-      :close-on-click-modal="false"
-      @close="resetRollForm"
-    >
+    <el-dialog :title="rollFormTitle" :visible.sync="rollFormOpen" width="600px" append-to-body
+      :close-on-click-modal="false" @close="resetRollForm">
       <el-form ref="rollForm" :model="rollForm" :rules="rollFormRules" label-width="60px" size="small">
         <el-row :gutter="16">
           <el-col :span="12">
@@ -475,18 +386,14 @@
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="制造日期" prop="manufactureDate">
-              <el-date-picker
-                v-model="rollForm.manufactureDate"
-                type="date"
-                value-format="yyyy-MM-dd"
-                placeholder="请选择制造日期"
-                style="width:100%"
-              />
+              <el-date-picker v-model="rollForm.manufactureDate" type="date" value-format="yyyy-MM-dd"
+                placeholder="请选择制造日期" style="width:100%" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="机架" prop="frame">
-              <el-select v-model="rollForm.frame" placeholder="请输入机架" style="width:100%" clearable filterable allow-create>
+              <el-select v-model="rollForm.frame" placeholder="请输入机架" style="width:100%" clearable filterable
+                allow-create>
                 <el-option v-for="f in frameOptions" :key="f" :label="f" :value="f" />
               </el-select>
             </el-form-item>
@@ -700,7 +607,7 @@ export default {
       const now = new Date()
       const pad = n => String(n).padStart(2, '0')
       const grindTime = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ` +
-                        `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
+        `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
       const lastHardness = this.grindList
         .filter(r => r.hardness != null)
         .sort((a, b) => new Date(b.grindTime) - new Date(a.grindTime))
@@ -905,8 +812,16 @@ export default {
 </script>
 
 <style scoped>
-.grind-page   { background: #f4f5f7; height: 100%; }
-.grind-layout { display: flex; gap: 12px; height: 100%; }
+.grind-page {
+  background: #f4f5f7;
+  height: 100%;
+}
+
+.grind-layout {
+  display: flex;
+  gap: 12px;
+  height: 100%;
+}
 
 /* ── 左侧产线 Tab ── */
 .line-tabs {
@@ -917,6 +832,7 @@ export default {
   gap: 2px;
   padding-top: 2px;
 }
+
 .lt-item {
   padding: 10px 4px;
   text-align: center;
@@ -930,7 +846,13 @@ export default {
   line-height: 1.4;
   transition: all .15s;
 }
-.lt-item:hover { background: #f0f6ff; color: #409eff; border-color: #c6d9f5; }
+
+.lt-item:hover {
+  background: #f0f6ff;
+  color: #409eff;
+  border-color: #c6d9f5;
+}
+
 .lt-item--active {
   background: #409eff;
   color: #fff;
@@ -987,6 +909,7 @@ export default {
   border: 1px solid #dcdee0;
   border-radius: 4px;
 }
+
 .detail-card ::v-deep .el-card__body {
   overflow: auto;
 }
@@ -999,63 +922,199 @@ export default {
   display: flex;
   flex-direction: column;
 }
+
 .panel-card ::v-deep .el-card__body {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
 }
 
-.card-header { display: flex; align-items: center; gap: 8px; }
-.card-title  { font-size: 13px; font-weight: 600; color: #3d4b5c; }
-.card-count  { font-size: 11px; color: #9aa0a6; background: #f0f2f5; padding: 1px 8px; border-radius: 10px; margin-left: auto; }
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #3d4b5c;
+}
+
+.card-count {
+  font-size: 11px;
+  color: #9aa0a6;
+  background: #f0f2f5;
+  padding: 1px 8px;
+  border-radius: 10px;
+  margin-left: auto;
+}
 
 /* 轧辊列表 */
-.roll-list   { padding: 0; }
-.roll-item   { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0f2f5; }
-.roll-item:hover     { background: #f5f7fa; }
-.roll-item--active   { background: #e8f4ff !important; border-left: 3px solid #409eff; }
-.ri-no     { font-family: 'Consolas', monospace; font-size: 13px; font-weight: 600; color: #1f2329; }
-.ri-meta   { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
-.ri-dia    { font-size: 11px; color: #9aa0a6; }
-.ri-manufacturer { font-size: 10px; color: #909399; margin-top: 2px; }
-.ri-line   { font-size: 10px; color: #b0b3bb; margin-top: 2px; }
-.ri-status { font-size: 11px; }
-.roll-empty { text-align: center; color: #c0c4cc; padding: 20px 0; font-size: 12px; }
+.roll-list {
+  padding: 0;
+}
+
+.roll-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.roll-item:hover {
+  background: #f5f7fa;
+}
+
+.roll-item--active {
+  background: #e8f4ff !important;
+  border-left: 3px solid #409eff;
+}
+
+.ri-no {
+  font-family: 'Consolas', monospace;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1f2329;
+}
+
+.ri-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 3px;
+}
+
+.ri-dia {
+  font-size: 11px;
+  color: #9aa0a6;
+}
+
+.ri-manufacturer {
+  font-size: 10px;
+  color: #909399;
+  margin-top: 2px;
+}
+
+.ri-line {
+  font-size: 10px;
+  color: #b0b3bb;
+  margin-top: 2px;
+}
+
+.ri-status {
+  font-size: 11px;
+}
+
+.roll-empty {
+  text-align: center;
+  color: #c0c4cc;
+  padding: 20px 0;
+  font-size: 12px;
+}
 
 /* 状态色 */
-.st-Online   { color: #0a7c42; }
-.st-Standby  { color: #d4860a; }
-.st-Offline  { color: #9aa0a6; }
-.st-Scrapped { color: #c5221f; }
+.st-Online {
+  color: #0a7c42;
+}
+
+.st-Standby {
+  color: #d4860a;
+}
+
+.st-Offline {
+  color: #9aa0a6;
+}
+
+.st-Scrapped {
+  color: #c5221f;
+}
 
 /* 空状态 */
-.grind-empty { display: flex; align-items: center; justify-content: center;
-  height: 300px; color: #c0c4cc; font-size: 14px; gap: 6px; }
+.grind-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: #c0c4cc;
+  font-size: 14px;
+  gap: 6px;
+}
 
 /* 辊头信息格 */
-.roll-header-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; }
-.rh-item { display: flex; flex-direction: column; gap: 2px; }
-.rh-k    { font-size: 11px; color: #9aa0a6; }
-.rh-v    { font-size: 13px; color: #3d4b5c; }
-.rh-v.bold   { font-weight: 600; }
-.rh-v.accent { color: #0a7c42; }
+.roll-header-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px 16px;
+}
+
+.rh-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.rh-k {
+  font-size: 11px;
+  color: #9aa0a6;
+}
+
+.rh-v {
+  font-size: 13px;
+  color: #3d4b5c;
+}
+
+.rh-v.bold {
+  font-weight: 600;
+}
+
+.rh-v.accent {
+  color: #0a7c42;
+}
 
 /* 月度汇总 */
-.monthly-wrap  { margin-top: 16px; border-top: 1px solid #f0f2f5; padding-top: 12px; }
-.monthly-title { font-size: 12px; color: #5f6368; display: flex; align-items: center; }
+.monthly-wrap {
+  margin-top: 16px;
+  border-top: 1px solid #f0f2f5;
+  padding-top: 12px;
+}
+
+.monthly-title {
+  font-size: 12px;
+  color: #5f6368;
+  display: flex;
+  align-items: center;
+}
 
 /* 行内编辑 */
-.computed-val  { color: #409eff; font-weight: 600; font-size: 13px; }
-.remark-text   { font-size: 12px; color: #5f6368; }
+.computed-val {
+  color: #409eff;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.remark-text {
+  font-size: 12px;
+  color: #5f6368;
+}
 
 .el-table :deep(input[type=number]::-webkit-inner-spin-button),
-.el-table :deep(input[type=number]::-webkit-outer-spin-button) { -webkit-appearance: none; }
-.el-table :deep(input[type=number]) { -moz-appearance: textfield; }
+.el-table :deep(input[type=number]::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+}
+
+.el-table :deep(input[type=number]) {
+  -moz-appearance: textfield;
+}
 </style>
 
 <style>
-.el-table .editing-row { background: #fffbf0 !important; }
-.el-table .editing-row:hover > td { background: #fffbf0 !important; }
+.el-table .editing-row {
+  background: #fffbf0 !important;
+}
+
+.el-table .editing-row:hover>td {
+  background: #fffbf0 !important;
+}
 
 .el-table ::v-deep .cell {
   padding: 0;