feat(wms): 添加次品标签页并优化钢卷统计表格

refactor(LeftList): 移除表单包装简化对话框结构
feat(Perspective): 新增宽度分类统计组件
perf(TrimStatistics): 优化表格宽度分组和过滤逻辑

klp-ui/src/views/wms/coil/panels/Perspective/CategoryWidthStatistics.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="hot-zha-raw">
+    <!-- 使用 el-table 展示数据 -->
+    <el-table
+      v-loading="loading"
+      :data="processedData"
+      border
+      style="width: 100%;"
+      :header-cell-style="{background: '#f2f2f2', fontWeight: 600}"
+    >
+      <!-- 类别列 -->
+      <el-table-column
+        label="类别"
+        prop="category"
+        min-width="180"
+        align="left"
+      />
+
+      <!-- 合并的净边表头 -->
+      <el-table-column
+        label="净边"
+        align="center"
+      >
+        <el-table-column
+          label="1000"
+          prop="width1000"
+          min-width="100"
+          align="center"
+        />
+        <el-table-column
+          label="1200"
+          prop="width1200"
+          min-width="100"
+          align="center"
+        />
+        <el-table-column
+          label="1220"
+          prop="width1220"
+          min-width="100"
+          align="center"
+        />
+        <el-table-column
+          label="1250"
+          prop="width1250"
+          min-width="100"
+          align="center"
+        />
+      </el-table-column>
+
+      <!-- 其他宽度及毛边列 -->
+      <el-table-column
+        label="其他宽度及毛边"
+        prop="otherWidth"
+        min-width="120"
+        align="center"
+      />
+
+      <!-- 合计列 -->
+      <el-table-column
+        label="合计"
+        prop="total"
+        min-width="100"
+        align="center"
+        :cell-style="{fontWeight: 600, color: '#1890ff'}"
+      />
+    </el-table>
+
+    <!-- 无数据提示（el-table 自带空数据提示，这里可保留统一样式） -->
+    <div v-if="!data || data.length === 0" class="empty-data">
+      暂无数据
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HotZhaRaw',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      loading: false // 可根据实际需求控制加载状态
+    };
+  },
+  computed: {
+    processedData() {
+      if (!this.data || !Array.isArray(this.data)) {
+        return [];
+      }
+      console.log(this.data);
+      // 深拷贝避免修改原数据
+      return this.data;
+    }
+  },
+  methods: {
+    // el-table 专用的数字格式化方法
+    formatTableNumber(row, column) {
+      const num = row[column.prop];
+      if (num === null || num === undefined || num === '') return '0.000';
+      return Number(num).toFixed(3);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.hot-zha-raw {
+  width: 100%;
+  min-height: 200px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.empty-data {
+  text-align: center;
+  padding: 40px;
+  color: #999;
+  font-size: 14px;
+}
+
+/* 覆盖 el-table 样式，保持视觉统一 */
+:deep(.el-table) {
+  --el-table-header-text-color: #303133;
+  --el-table-row-hover-bg-color: #f8f9fa;
+}
+
+:deep(.el-table th) {
+  border-right: 1px solid #ddd;
+}
+
+:deep(.el-table td) {
+  border-right: 1px solid #ddd;
+}
+</style>

klp-ui/src/views/wms/coil/panels/Perspective/TrimStatistics.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="trim-statistics-table">
     <el-table
-      :data="tableData"
+      :data="filteredTableData"
       border
       stripe
       :span-method="objectSpanMethod"
@@ -15,7 +15,7 @@
         align="center"
       />
 
-      <!-- 冷硬卷板净边料现货库存 表头组 -->
+      <!-- 冷硬卷板净边料现货库存 独立表头组 -->
       <el-table-column
         label="冷硬卷板净边料现货库存"
         align="center"
@@ -27,18 +27,19 @@
           <el-table-column label="数量(件)" prop="trimmedTotalCount" width="80" align="center" />
           <el-table-column label="重量(吨)" prop="trimmedTotalWeight" width="80" align="center" />
         </el-table-column>
+        <!-- 净边料独立宽度列（合并后的分组） -->
         <el-table-column
-          v-for="width in widthList"
-          :key="'trimmed-' + width"
-          :label="width"
+          v-for="group in trimmedWidthGroups"
+          :key="'trimmed-' + group.key"
+          :label="group.label"
           align="center"
         >
-          <el-table-column label="数量(件)" :prop="`trimmed_${width}_count`" width="80" align="center" />
-          <el-table-column label="重量(吨)" :prop="`trimmed_${width}_weight`" width="80" align="center" />
+          <el-table-column label="数量(件)" :prop="`trimmed_${group.key}_count`" width="80" align="center" />
+          <el-table-column label="重量(吨)" :prop="`trimmed_${group.key}_weight`" width="80" align="center" />
         </el-table-column>
       </el-table-column>
 
-      <!-- 冷硬卷板毛边料现货库存 表头组 -->
+      <!-- 冷硬卷板毛边料现货库存 独立表头组 -->
       <el-table-column
         label="冷硬卷板毛边料现货库存"
         align="center"
@@ -50,14 +51,15 @@
           <el-table-column label="数量(件)" prop="untrimmedTotalCount" width="80" align="center" />
           <el-table-column label="重量(吨)" prop="untrimmedTotalWeight" width="80" align="center" />
         </el-table-column>
+        <!-- 毛边料独立宽度列（合并后的分组） -->
         <el-table-column
-          v-for="width in widthList"
-          :key="'untrimmed-' + width"
-          :label="width"
+          v-for="group in untrimmedWidthGroups"
+          :key="'untrimmed-' + group.key"
+          :label="group.label"
           align="center"
         >
-          <el-table-column label="数量(件)" :prop="`untrimmed_${width}_count`" width="80" align="center" />
-          <el-table-column label="重量(吨)" :prop="`untrimmed_${width}_weight`" width="80" align="center" />
+          <el-table-column label="数量(件)" :prop="`untrimmed_${group.key}_count`" width="80" align="center" />
+          <el-table-column label="重量(吨)" :prop="`untrimmed_${group.key}_weight`" width="80" align="center" />
         </el-table-column>
       </el-table-column>
     </el-table>
@@ -71,69 +73,202 @@ export default {
     data: {
       type: Array,
       default: () => []
+    },
+    // 可配置的宽度分组规则（支持自定义）
+    widthGroupRules: {
+      type: Object,
+      default: () => ({
+        '1000系列': ['1000', '1000~1005', '1010/1015'],
+        '1200基础系列': ['1200/1202', '1200~1215'],
+        '1218基础系列': ['1218/1220', '1218~1235', '1210/1215'],
+        '1240系列': ['1240/1252'],
+        '1225系列': ['1225/1235'],
+        '1250+系列': ['1250~1265', '1260-1265']
+      })
     }
   },
   computed: {
-    // 定义表格中需要展示的宽度规格（与图片中一致）
-    widthList() {
-      return [
-        '1000', '1200/1202', '1218/1220', '1240/1252', 
-        '1010/1015', '1210/1215', '1225/1235', '1260-1265',
-        '1000~1005', '1200~1215', '1218~1235', '1250~1265'
-      ];
+    // ========== 净边料相关计算 ==========
+    // 提取净边料所有原始宽度
+    rawTrimmedWidths() {
+      const widthSet = new Set();
+      this.data.forEach(item => {
+        item.trimmedList.forEach(trimmed => {
+          if (trimmed.width) widthSet.add(trimmed.width);
+        });
+      });
+      return Array.from(widthSet);
     },
-    // 处理后的数据（适配表格列结构）
+    // 净边料宽度分组（合并相近宽度）
+    trimmedWidthGroups() {
+      return this.generateWidthGroups(this.rawTrimmedWidths);
+    },
+
+    // ========== 毛边料相关计算 ==========
+    // 提取毛边料所有原始宽度
+    rawUntrimmedWidths() {
+      const widthSet = new Set();
+      this.data.forEach(item => {
+        item.untrimmedList.forEach(untrimmed => {
+          if (untrimmed.width) widthSet.add(untrimmed.width);
+        });
+      });
+      return Array.from(widthSet);
+    },
+    // 毛边料宽度分组（合并相近宽度）
+    untrimmedWidthGroups() {
+      return this.generateWidthGroups(this.rawUntrimmedWidths);
+    },
+
+    // 处理后的原始表格数据
     tableData() {
       return this.data.map(item => {
         const row = {
           thickness: item.thickness,
-          trimmedTotalCount: 0, // 净边料总计数量
-          trimmedTotalWeight: 0, // 净边料总计重量
-          untrimmedTotalCount: 0, // 毛边料总计数量
-          untrimmedTotalWeight: 0 // 毛边料总计重量
+          trimmedTotalCount: 0,
+          trimmedTotalWeight: 0,
+          untrimmedTotalCount: 0,
+          untrimmedTotalWeight: 0
         };
 
-        // 初始化所有宽度的数量和重量为0
-        this.widthList.forEach(width => {
-          row[`trimmed_${width}_count`] = 0;
-          row[`trimmed_${width}_weight`] = 0;
-          row[`untrimmed_${width}_count`] = 0;
-          row[`untrimmed_${width}_weight`] = 0;
+        // 初始化净边料分组数据
+        this.trimmedWidthGroups.forEach(group => {
+          row[`trimmed_${group.key}_count`] = 0;
+          row[`trimmed_${group.key}_weight`] = 0;
         });
 
-        // 处理净边料数据
+        // 初始化毛边料分组数据
+        this.untrimmedWidthGroups.forEach(group => {
+          row[`untrimmed_${group.key}_count`] = 0;
+          row[`untrimmed_${group.key}_weight`] = 0;
+        });
+
+        // 处理净边料数据（按分组求和）
         item.trimmedList.forEach(trimmed => {
-          const widthKey = trimmed.width;
-          if (this.widthList.includes(widthKey)) {
-            row[`trimmed_${widthKey}_count`] = trimmed.coilCount;
-            row[`trimmed_${widthKey}_weight`] = trimmed.totalWeight;
-            // 累加总计
-            row.trimmedTotalCount += trimmed.coilCount;
-            row.trimmedTotalWeight = (Number(row.trimmedTotalWeight) + Number(trimmed.totalWeight)).toFixed(3);
-          }
+          const width = trimmed.width;
+          const count = Number(trimmed.coilCount) || 0;
+          const weight = Number(trimmed.totalWeight) || 0;
+
+          // 找到宽度所属的分组并累加
+          this.trimmedWidthGroups.forEach(group => {
+            if (group.includesWidth(width)) {
+              row[`trimmed_${group.key}_count`] += count;
+              row[`trimmed_${group.key}_weight`] = (row[`trimmed_${group.key}_weight`] + weight).toFixed(3);
+            }
+          });
+
+          // 累加总计
+          row.trimmedTotalCount += count;
+          row.trimmedTotalWeight = (Number(row.trimmedTotalWeight) + weight).toFixed(3);
         });
 
-        // 处理毛边料数据
+        // 处理毛边料数据（按分组求和）
         item.untrimmedList.forEach(untrimmed => {
-          const widthKey = untrimmed.width;
-          if (this.widthList.includes(widthKey)) {
-            row[`untrimmed_${widthKey}_count`] = untrimmed.coilCount;
-            row[`untrimmed_${widthKey}_weight`] = untrimmed.totalWeight;
-            // 累加总计
-            row.untrimmedTotalCount += untrimmed.coilCount;
-            row.untrimmedTotalWeight = (Number(row.untrimmedTotalWeight) + Number(untrimmed.totalWeight)).toFixed(3);
-          }
+          const width = untrimmed.width;
+          const count = Number(untrimmed.coilCount) || 0;
+          const weight = Number(untrimmed.totalWeight) || 0;
+
+          // 找到宽度所属的分组并累加
+          this.untrimmedWidthGroups.forEach(group => {
+            if (group.includesWidth(width)) {
+              row[`untrimmed_${group.key}_count`] += count;
+              row[`untrimmed_${group.key}_weight`] = (row[`untrimmed_${group.key}_weight`] + weight).toFixed(3);
+            }
+          });
+
+          // 累加总计
+          row.untrimmedTotalCount += count;
+          row.untrimmedTotalWeight = (Number(row.untrimmedTotalWeight) + weight).toFixed(3);
         });
 
         return row;
       });
+    },
+
+    // 过滤掉全0的行
+    filteredTableData() {
+      return this.tableData.filter(row => {
+        let hasNonZeroData = false;
+
+        // 检查净边料总计
+        if (Number(row.trimmedTotalCount) > 0 || Number(row.trimmedTotalWeight) > 0) {
+          hasNonZeroData = true;
+        }
+
+        // 检查毛边料总计
+        if (Number(row.untrimmedTotalCount) > 0 || Number(row.untrimmedTotalWeight) > 0) {
+          hasNonZeroData = true;
+        }
+
+        // 检查净边料分组列
+        if (!hasNonZeroData) {
+          this.trimmedWidthGroups.forEach(group => {
+            if (Number(row[`trimmed_${group.key}_count`]) > 0 || Number(row[`trimmed_${group.key}_weight`]) > 0) {
+              hasNonZeroData = true;
+            }
+          });
+        }
+
+        // 检查毛边料分组列
+        if (!hasNonZeroData) {
+          this.untrimmedWidthGroups.forEach(group => {
+            if (Number(row[`untrimmed_${group.key}_count`]) > 0 || Number(row[`untrimmed_${group.key}_weight`]) > 0) {
+              hasNonZeroData = true;
+            }
+          });
+        }
+
+        return hasNonZeroData;
+      });
     }
   },
   methods: {
-    // 合并表头的跨度方法（可选，若需要合并行/列可扩展）
+    // 生成宽度分组（核心方法）
+    generateWidthGroups(rawWidths) {
+      const groups = [];
+      const usedWidths = new Set();
+
+      // 遍历分组规则，匹配原始宽度
+      Object.entries(this.widthGroupRules).forEach(([groupLabel, widthList]) => {
+        // 筛选出当前分组包含的原始宽度
+        const matchedWidths = rawWidths.filter(width => widthList.includes(width));
+        if (matchedWidths.length === 0) return;
+
+        // 创建分组对象
+        const groupKey = groupLabel.replace(/[^a-zA-Z0-9]/g, '_');
+        groups.push({
+          key: groupKey,
+          label: groupLabel,
+          widths: matchedWidths,
+          includesWidth: function(width) {
+            return this.widths.includes(width);
+          }
+        });
+
+        // 标记已使用的宽度
+        matchedWidths.forEach(width => usedWidths.add(width));
+      });
+
+      // 处理未匹配到分组的宽度（单独成组）
+      rawWidths.forEach(width => {
+        if (!usedWidths.has(width)) {
+          const groupKey = width.replace(/[^a-zA-Z0-9]/g, '_');
+          groups.push({
+            key: groupKey,
+            label: width,
+            widths: [width],
+            includesWidth: function(width) {
+              return this.widths.includes(width);
+            }
+          });
+        }
+      });
+
+      return groups;
+    },
+
+    // 合并表头的跨度方法
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-      // 可根据需求实现行/列合并逻辑，例如合并重复的厚度行
-      // 示例：若需合并相同厚度的行，可在此处返回 { rowspan: n, colspan: m }
       return { rowspan: 1, colspan: 1 };
     }
   }

klp-ui/src/views/wms/coil/perspective/components/LeftList.vue

@@ -55,12 +55,10 @@
 
     <!-- 添加或修改钢卷生产统计对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <div v-for="item in tableType" :key="item.statType" @click="handleCreate(item)" class="type-item">
-          <div class="type-title">{{ item.title }}</div>
-          <div class="type-desc">{{ item.description }}</div>
-        </div>
-      </el-form>
+      <div v-for="item in tableType" :key="item.statType" @click="handleCreate(item)" class="type-item">
+        <div class="type-title">{{ item.title }}</div>
+        <div class="type-desc">{{ item.description }}</div>
+      </div>
       <div slot="footer" class="dialog-footer">
         <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>

klp-ui/src/views/wms/coil/perspective/index.vue

@@ -78,19 +78,7 @@ export default {
       currentRow: {},
     };
   },
-  created() {
-    this.getList();
-  },
   methods: {
-    /** 查询钢卷生产统计列表 */
-    getList() {
-      this.loading = true;
-      listCoilStatisticsSummary(this.queryParams).then(response => {
-        this.coilStatisticsSummaryList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
     // 取消按钮
     cancel() {
       this.open = false;

klp-ui/src/views/wms/coil/views/scrap.vue

@@ -8,6 +8,10 @@
       <BasePage :qrcode="qrcode" :querys="querys" :labelType="labelType" :hideWarehouseQuery="hideWarehouseQuery"
         :hideType="hideType" />
     </el-tab-pane>
+    <el-tab-pane label="次品" name="third">
+      <BasePage :qrcode="qrcode" :querys="query3" :labelType="labelType" :hideWarehouseQuery="hideWarehouseQuery"
+        :hideType="hideType" />
+    </el-tab-pane>
   </el-tabs>
 </template>
 
@@ -34,6 +38,10 @@ export default {
         nextWarehouseId: '2019583429955104769', // 废品仓
         // materialType: '废品'
       },
+      query3: {
+        dataType: 1,
+        OnlyScrap: true,
+      },
       hideWarehouseQuery: true,
       showAbnormal: true,
       labelType: '2',