From ca5bb8a8ff8919706123043050ee8612e720a622 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Thu, 26 Feb 2026 13:07:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E6=B7=BB=E5=8A=A0=E9=92=A2?=
 =?UTF-8?q?=E5=8D=B7=E5=BC=82=E5=B8=B8=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=8F=8A=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增异常钢卷列表展示组件CoilList
- 在abnormalDetail.vue中添加异常钢卷显示列
- 创建新的异常钢卷管理页面abnormalCoil.vue
- 实现钢卷列表与异常明细的联动展示
- 优化表单交互，根据场景显示/隐藏钢卷选择器
---
 klp-ui/src/views/wms/coil/abnormalCoil.vue    | 402 ++++++++++++++++++
 klp-ui/src/views/wms/coil/abnormalDetail.vue  |  23 +-
 .../views/wms/coil/components/CoilList.vue    | 196 +++++++++
 3 files changed, 615 insertions(+), 6 deletions(-)
 create mode 100644 klp-ui/src/views/wms/coil/abnormalCoil.vue
 create mode 100644 klp-ui/src/views/wms/coil/components/CoilList.vue

diff --git a/klp-ui/src/views/wms/coil/abnormalCoil.vue b/klp-ui/src/views/wms/coil/abnormalCoil.vue
new file mode 100644
index 00000000..eb989a65
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/abnormalCoil.vue
@@ -0,0 +1,402 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="6" v-loading="coilLoading">
+        <div>
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <el-input v-model="coilQuery.currentCoilNo" placeholder="请输入钢卷号" @change="getCoilList"></el-input>
+            <el-button @click="handleAdd" icon="el-icon-plus"></el-button>
+          </div>
+          <div>
+            <CoilList :coilList="coilList" @click="handleCoilClick" />
+          </div>
+          <pagination v-show="coilTotal > 0" :total="coilTotal" :page.sync="coilQuery.pageNum"
+          :limit.sync="coilQuery.pageSize" @pagination="getCoilList" />
+        </div>
+        <!-- 左侧为有异常的钢卷列表 -->
+        <!-- <el-table :data="coilList" border stripe @row-click="handleCoilClick">
+          <el-table-column label="入场卷号" prop="entryCoilNo" />
+          <el-table-column label="钢卷号" prop="currentCoilNo" />
+          <el-table-column label="逻辑库区" prop="warehouseName" />
+        </el-table> -->
+      </el-col>
+
+      <el-col :span="18" v-if="currentCoilId">
+        <!-- 右侧为钢卷异常明细 -->
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="位置" prop="position">
+            <el-select v-model="queryParams.position" placeholder="请选择位置" clearable>
+              <el-option v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="缺陷代码" prop="defectCode">
+            <el-select v-model="queryParams.defectCode" placeholder="请选择缺陷代码" clearable>
+              <el-option v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="程度" prop="degree">
+            <el-select v-model="queryParams.degree" placeholder="请选择程度" clearable>
+              <el-option v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+             <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddWithCoil">新增</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table v-loading="loading" :data="coilAbnormalList" @selection-change="handleSelectionChange">
+          <!-- <el-table-column type="selection" width="55" align="center" /> -->
+          <el-table-column label="主键ID" align="center" prop="abnormalId" v-if="false" />
+          <!-- <el-table-column label="异常钢卷" align="center" prop="coilId">
+            <template slot-scope="scope">
+              <coil-no :coilId="scope.row.coilId">
+                {{ scope.row.coilNo }}
+              </coil-no>
+            </template>
+          </el-table-column> -->
+          <el-table-column label="位置" align="center" prop="position">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.coil_abnormal_position" :value="scope.row.position" />
+            </template>
+          </el-table-column>
+          <el-table-column label="长度坐标" align="center" prop="lengthCoord" />
+          <el-table-column label="缺陷代码" align="center" prop="defectCode">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
+            </template>
+          </el-table-column>
+          <el-table-column label="程度" align="center" prop="degree">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="判级" align="center" prop="judgeLevel">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.coil_abnormal_level" :value="scope.row.judgeLevel" />
+        </template>
+      </el-table-column>
+      <el-table-column label="判级人" align="center" prop="judgeBy" />
+      <el-table-column label="判级时间" align="center" prop="judgeTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.judgeTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column> -->
+          <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <!-- <el-button size="mini" type="text" icon="el-icon-check" @click="handleJudge(scope.row)">判级</el-button> -->
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </el-col>
+
+      <el-col :span="18" v-else>
+        <el-empty description="请选择钢卷后查看异常明细" />
+      </el-col>
+    </el-row>
+
+    <!-- 添加或修改钢卷异常信息对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="钢卷ID" prop="coilId" v-if="!form.abnormalId && showCoilSelector">
+          <coil-selector v-model="form.coilId"></coil-selector>
+        </el-form-item>
+        <el-form-item label="位置" prop="position">
+          <el-radio-group v-model="form.position">
+            <el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{
+              dict.label }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="长度坐标" prop="lengthCoord">
+          <el-input v-model="form.lengthCoord" placeholder="请输入长度坐标" />
+        </el-form-item>
+        <el-form-item label="缺陷代码" prop="defectCode">
+          <el-radio-group v-model="form.defectCode">
+            <el-radio-button v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.value">{{
+              dict.label }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="程度" prop="degree">
+          <el-radio-group v-model="form.degree">
+            <el-radio-button v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.value">{{
+              dict.label }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 异常判级对话框 -->
+    <el-dialog :title="title" :visible.sync="judgeOpen" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="判级" prop="judgeLevel">
+          <el-radio-group v-model="form.judgeLevel">
+            <el-radio-button v-for="dict in dict.type.coil_abnormal_level" :key="dict.value" :label="dict.value">{{
+              dict.label }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitJudge">确 定</el-button>
+        <el-button @click="judgeOpen = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCoilAbnormal, getCoilAbnormal, delCoilAbnormal, addCoilAbnormal, updateCoilAbnormal, judgeAbnormalLevel } from "@/api/wms/coilAbnormal";
+import { listMaterialCoil } from "@/api/wms/coil";
+import CoilSelector from '@/components/CoilSelector'
+import CoilNo from '@/components/KLPService/Renderer/CoilNo'
+import CoilList from "./components/CoilList.vue";
+
+export default {
+  name: "CoilAbnormal",
+  dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree', 'coil_abnormal_level'],
+  components: {
+    CoilSelector,
+    CoilNo,
+    CoilList
+  },
+  data() {
+    return {
+      coilList: [],
+      currentCoil: {},
+      showCoilSelector: true,
+      coilQuery: {
+        dataType: 1,
+        // 筛选异常数量大于等于1的
+        minAbnormalCount: 1,
+        pageNum: 1,
+        pageSize: 10,
+        currentCoilNo: undefined,
+      },
+      coilTotal: 0,
+      coilLoading: false,
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 钢卷异常信息表格数据
+      coilAbnormalList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        coilId: undefined,
+        position: undefined,
+        lengthCoord: undefined,
+        defectCode: undefined,
+        degree: undefined,
+        judgeLevel: undefined,
+        judgeBy: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      judgeOpen: false,
+    };
+  },
+  computed: {
+    currentCoilId() {
+      return this.currentCoil?.coilId || undefined
+    }
+  },
+  mounted() {
+    this.getCoilList();
+  },
+  methods: {
+    /** 查询钢卷异常信息列表 */
+    getList() {
+      this.loading = true;
+      listCoilAbnormal(this.queryParams).then(response => {
+        this.coilAbnormalList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 查询钢卷列表 */
+    getCoilList() {
+      this.coilLoading = true;
+      listMaterialCoil(this.coilQuery).then(response => {
+        this.coilList = response.rows;
+        this.coilTotal = response.total;
+        this.coilLoading = false;
+      });
+    },
+    /** 点击钢卷列表行 */
+    handleCoilClick(row) {
+      this.currentCoil = row;
+      this.queryParams.coilId = row.coilId;
+      this.handleQuery();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        abnormalId: undefined,
+        coilId: this.$route.query.coilId,
+        position: undefined,
+        lengthCoord: undefined,
+        defectCode: undefined,
+        degree: undefined,
+        judgeLevel: undefined,
+        judgeBy: undefined,
+        judgeTime: undefined,
+        remark: undefined,
+        delFlag: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.abnormalId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.showCoilSelector = true;
+      this.title = "添加钢卷异常信息";
+    },
+    handleAddWithCoil() {
+      this.reset();
+      this.open = true;
+      this.form.coilId = this.currentCoilId;
+      this.showCoilSelector = false;
+      this.title = "添加钢卷异常信息";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const abnormalId = row.abnormalId || this.ids
+      getCoilAbnormal(abnormalId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改钢卷异常信息";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.abnormalId != null) {
+            updateCoilAbnormal(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addCoilAbnormal(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const abnormalIds = row.abnormalId || this.ids;
+      this.$modal.confirm('是否确认删除钢卷异常信息编号为"' + abnormalIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delCoilAbnormal(abnormalIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/coilAbnormal/export', {
+        ...this.queryParams
+      }, `coilAbnormal_${new Date().getTime()}.xlsx`)
+    },
+    /** 异常判级按钮操作 */
+    handleJudge(row) {
+      this.reset();
+      this.form = row
+      this.judgeOpen = true;
+      this.title = "异常判级";
+    },
+    /** 提交异常判级按钮操作 */
+    submitJudge() {
+      this.buttonLoading = true;
+      judgeAbnormalLevel(this.form).then(response => {
+        this.$modal.msgSuccess("判级成功");
+        this.judgeOpen = false;
+        this.getList();
+      }).finally(() => {
+        this.buttonLoading = false;
+      });
+    }
+  }
+};
+</script>
diff --git a/klp-ui/src/views/wms/coil/abnormalDetail.vue b/klp-ui/src/views/wms/coil/abnormalDetail.vue
index 9e933ff0..e9e8a433 100644
--- a/klp-ui/src/views/wms/coil/abnormalDetail.vue
+++ b/klp-ui/src/views/wms/coil/abnormalDetail.vue
@@ -46,6 +46,13 @@
     <el-table v-loading="loading" :data="coilAbnormalList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键ID" align="center" prop="abnormalId" v-if="false" />
+      <el-table-column label="异常钢卷" align="center" prop="coilId">
+        <template slot-scope="scope">
+          <coil-no :coilId="scope.row.coilId">
+            {{ scope.row.coilNo }}
+          </coil-no>
+        </template>
+      </el-table-column>
       <el-table-column label="位置" align="center" prop="position">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.coil_abnormal_position" :value="scope.row.position" />
@@ -62,7 +69,7 @@
           <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
         </template>
       </el-table-column>
-      <el-table-column label="判级" align="center" prop="judgeLevel">
+      <!-- <el-table-column label="判级" align="center" prop="judgeLevel">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.coil_abnormal_level" :value="scope.row.judgeLevel" />
         </template>
@@ -72,10 +79,12 @@
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.judgeTime, '{y}-{m}-{d}') }}</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
+      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-check" @click="handleJudge(scope.row)">判级</el-button>
+          <!-- <el-button size="mini" type="text" icon="el-icon-check" @click="handleJudge(scope.row)">判级</el-button> -->
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
         </template>
@@ -88,7 +97,7 @@
     <!-- 添加或修改钢卷异常信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="钢卷ID" prop="coilId">
+        <el-form-item label="钢卷ID" prop="coilId" v-if="!form.abnormalId">
           <coil-selector v-model="form.coilId"></coil-selector>
         </el-form-item>
         <el-form-item label="位置" prop="position">
@@ -143,12 +152,14 @@
 <script>
 import { listCoilAbnormal, getCoilAbnormal, delCoilAbnormal, addCoilAbnormal, updateCoilAbnormal, judgeAbnormalLevel } from "@/api/wms/coilAbnormal";
 import CoilSelector from '@/components/CoilSelector'
+import CoilNo from '@/components/KLPService/Renderer/CoilNo'
 
 export default {
   name: "CoilAbnormal",
   dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree', 'coil_abnormal_level'],
   components: {
-    CoilSelector
+    CoilSelector,
+    CoilNo
   },
   data() {
     return {
@@ -225,7 +236,7 @@ export default {
     reset() {
       this.form = {
         abnormalId: undefined,
-        coilId: undefined,
+        coilId: this.$route.query.coilId,
         position: undefined,
         lengthCoord: undefined,
         defectCode: undefined,
diff --git a/klp-ui/src/views/wms/coil/components/CoilList.vue b/klp-ui/src/views/wms/coil/components/CoilList.vue
new file mode 100644
index 00000000..64691a40
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/components/CoilList.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="coil-list-container">
+    <!-- 列表空状态提示 -->
+    <div v-if="coilList.length === 0" class="empty-tip">暂无钢卷数据</div>
+    
+    <!-- 钢卷列表 -->
+    <div 
+      v-else 
+      class="coil-list"
+    >
+      <!-- v-for 循环渲染列表项 -->
+      <div 
+        v-for="(coil, index) in coilList" 
+        :key="index" 
+        :class="['coil-item', { 'coil-item--active': currentCoil.coilId === coil.coilId }]"
+        @click="handleCoilClick(coil)"
+      >
+        <!-- 主信息区域 - 突出展示核心字段 -->
+        <div class="main-info">
+          <div class="coil-no-wrapper">
+            <span class="label">钢卷号：</span>
+            <span class="value primary">{{ coil.currentCoilNo || '未知' }}</span>
+          </div>
+          <div class="entry-no-wrapper">
+            <span class="label">入场卷号：</span>
+            <span class="value">{{ coil.enterCoilNo || '未知' }}</span>
+          </div>
+        </div>
+
+        <!-- 次信息区域 - 次要字段 -->
+        <div class="secondary-info">
+          <div class="warehouse-wrapper">
+            <span class="label">逻辑库区：</span>
+            <span class="value">{{ coil.warehouseName || '未知' }}</span>
+          </div>
+          
+          <!-- 钢卷信息 - 动态渲染组件 -->
+          <div class="coil-detail-wrapper">
+            <span class="label">钢卷信息：</span>
+            <div class="detail-content">
+              <ProductInfo 
+                v-if="coil.itemType == 'product'" 
+                :product="coil.product" 
+              />
+              <RawMaterialInfo 
+                v-else-if="coil.itemType === 'raw_material'" 
+                :material="coil.rawMaterial" 
+              />
+              <span v-else class="empty-text">暂无钢卷信息</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
+import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
+
+export default {
+  name: "CoilList",
+  props: {
+    coilList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  components: {
+    ProductInfo,
+    RawMaterialInfo
+  },
+  data() {
+    return {
+      currentCoil: {}
+    };
+  },
+  methods: {
+    handleCoilClick(coil) {
+      this.currentCoil = coil;
+      this.$emit('click', coil);
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 容器样式 */
+.coil-list-container {
+  width: 100%;
+  padding: 6px;
+  box-sizing: border-box;
+  /* background-color: #f9fafb; */
+  border-radius: 8px;
+}
+
+/* 空状态提示 */
+.empty-tip {
+  text-align: center;
+  padding: 40px 0;
+  color: #999;
+  font-size: 14px;
+}
+
+/* 列表容器 */
+.coil-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 列表项样式 */
+.coil-item {
+  background-color: #fff;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  /* 默认上边框（透明），保证布局一致 */
+  border-top: 3px solid transparent;
+}
+
+/* 核心新增：选中状态的样式 */
+.coil-item--active {
+  /* 特殊上边框 - 可自定义颜色/样式 */
+  border-top: 3px solid #1989fa;
+  /* 可选：增加背景色/阴影强化选中效果 */
+  background-color: #f0f7ff;
+  box-shadow: 0 1px 5px rgba(25, 137, 250, 0.15);
+}
+
+/* 列表项 hover 效果 */
+.coil-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 主信息区域 - 突出展示 */
+.main-info {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.main-info .coil-no-wrapper .value.primary {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1989fa; /* 主色调突出钢卷号 */
+}
+
+/* 次信息区域 */
+.secondary-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 通用标签样式 */
+.label {
+  font-size: 14px;
+  color: #666;
+  margin-right: 4px;
+}
+
+/* 通用值样式 */
+.value {
+  font-size: 14px;
+  color: #333;
+}
+
+/* 钢卷信息内容容器 */
+.detail-content {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* 空文本样式 */
+.empty-text {
+  color: #999;
+  font-size: 13px;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .main-info {
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+  }
+}
+</style>
\ No newline at end of file