feat(router): 添加数字钢卷路由

feat(components): 为MutiSelect组件添加collapseTags属性 feat(views): 新增酸连轧系统页面及组件 feat(views): 添加数字钢卷信息展示组件 refactor(views): 重构基础面板组件，支持数字钢卷功能
feat(wms): 新增综合报表模板及分条线报表组件
2026-04-24 17:49:11 +08:00 · 2026-04-24 17:49:01 +08:00
13 changed files with 3110 additions and 7 deletions
--- a/klp-ui/src/components/MutiSelect/index.vue
+++ b/klp-ui/src/components/MutiSelect/index.vue
@@ -11,6 +11,7 @@
        :allow-create="allowAdd"
        :disabled="disabled"
        :size="size"
+        :collapse-tags="collapseTags"
        @change="handleChange"
      >
        <!-- 全选选项 -->
@@ -98,6 +99,10 @@
      showSelectAll: {
        type: Boolean,
        default: true
+      },
+      collapseTags: {
+        type: Boolean,
+        default: true
      }
    },
    // 计算属性捕获实现双向绑定
--- a/klp-ui/src/router/index.js
+++ b/klp-ui/src/router/index.js
@@ -112,6 +112,12 @@ export const constantRoutes = [
        component: () => import('@/views/wms/todo/index'),
        name: 'Task',
        meta: { title: '待办任务', icon: 'checkbox' }
+      },
+      {
+        path: 'coil/:coilId',
+        component: () => import('@/views/wms/coil/info'),
+        name: 'CoilInfo',
+        meta: { title: '数字钢卷', icon: 'checkbox' }
      }
    ],
  },
--- a/klp-ui/src/views/micro/pages/acid/components/Inventory.vue
+++ b/klp-ui/src/views/micro/pages/acid/components/Inventory.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="inventory-container">
+    <BasePage 
+      :qrcode="qrcode" 
+      :querys="querys" 
+      :showControl="showControl" 
+      :useWarehouseIds="useWarehouseIds"
+      :warehouseOptions="warehouseOptions"
+      :showMaterialType="showMaterialType"
+    />
+  </div>
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  name: 'AcidInventory',
+  components: {
+    BasePage
+  },
+  data() {
+    return {
+      qrcode: false,
+      querys: {
+        dataType: 1,
+        status: 0
+      },
+      useWarehouseIds: true,
+      warehouseOptions: [
+        {value: '1988150044862377986', label: '酸连轧原料库'},
+        {value: '1988150099140866050', label: '酸连轧成品库'}, 
+        {value: '1988150263284953089', label: '镀锌原料库'}, 
+        {value: '1988150545175736322', label: '脱脂原料库'},
+      ],
+      showControl: false,
+      showMaterialType: true,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.inventory-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/klp-ui/src/views/micro/pages/acid/components/Processing.vue
+++ b/klp-ui/src/views/micro/pages/acid/components/Processing.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="processing-container">
+    <el-tabs v-model="activeTab" type="border-card">
+      <el-tab-pane v-for="tab in tabs" :label="tab.title" :name="tab.name">
+        <DoPage 
+          v-if="activeTab === tab.name"
+          :label="tab.label" 
+          :tabs="tab.tabs" 
+          :useSpecialSplit="tab.useSpecialSplit" 
+        />
+      </el-tab-pane>
+    </el-tabs>
+    
+  </div>
+</template>
+
+<script>
+import DoPage from '@/views/wms/coil/panels/do.vue';
+
+export default {
+  name: 'AcidProcessing',
+  components: {
+    DoPage
+  },
+  data() {
+    return {
+      activeTab: 'typing',
+      tabs: [
+        { 
+          title: '酸轧加工',
+          name: 'typing',
+          label: '酸轧工序',
+          tabs: [
+            {value: '1988150044862377986', label: '酸连轧原料库'},
+            {value: '1988150099140866050', label: '酸连轧成品库'}, 
+            {value: '1988150263284953089', label: '镀锌原料库'}, 
+            {value: '1988150545175736322', label: '脱脂原料库'},
+          ],
+          useSpecialSplit: false,
+        },
+        {
+          title: '酸轧分条',
+          name: 'split',
+          label: '分条',
+          useSpecialSplit: false,
+        },
+        {
+          title: '合卷',
+          name: 'merge',
+          label: '酸轧合卷',
+          useSpecialSplit: false,
+        },
+        { 
+          title: '酸轧修复',
+          name: 'repair',
+          label: '酸轧修复工序',
+          tabs: [
+            {value: '1988150044862377986', label: '酸连轧原料库'},
+            {value: '1988150099140866050', label: '酸连轧成品库'}, 
+            {value: '1988150263284953089', label: '镀锌原料库'}, 
+            {value: '1988150545175736322', label: '脱脂原料库'},
+          ],
+          useSpecialSplit: true,
+        },
+      ]
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.processing-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/klp-ui/src/views/micro/pages/acid/components/Quality.vue
+++ b/klp-ui/src/views/micro/pages/acid/components/Quality.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="quality-container">
+    <el-tabs v-model="activeTab" class="quality-tabs">
+      <el-tab-pane label="异常钢卷" name="abnormal">
+        <div class="tab-content" v-if="activeTab === 'abnormal'">
+          <BasePage 
+            :qrcode="qrcode" 
+            :querys="abnormalQuerys" 
+            :labelType="labelType" 
+            :hideType="hideType" 
+            :showAbnormal="showAbnormal" 
+            :showControl="showControl" 
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="钢卷判级" name="gradeCoil">
+        <div class="tab-content" v-if="activeTab === 'gradeCoil'">
+          <BasePage 
+            :qrcode="false" 
+            :querys="{
+              dataType: 0,
+              status: 1,
+            }" 
+            :hideType="false" 
+            :showControl="false" 
+            :showGrade="true"
+            :showStatus="false"
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  name: 'AcidQuality',
+  components: {
+    BasePage,
+  },
+  data() {
+    return {
+      activeTab: 'abnormal',
+      qrcode: false,
+      abnormalQuerys: {
+        dataType: 1,
+        orderByAbnormal: true,
+      },
+      useWarehouseIds: true,
+      warehouseOptions: [
+        {value: '1988150044862377986', label: '酸连轧原料库'},
+        {value: '1988150099140866050', label: '酸连轧成品库'}, 
+        {value: '1988150263284953089', label: '镀锌原料库'}, 
+        {value: '1988150545175736322', label: '脱脂原料库'},
+      ],
+      labelType: '2',
+      hideType: false,
+      showAbnormal: true,
+      showControl: false,
+      showMaterialType: true,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.quality-container {
+  width: 100%;
+  height: 100%;
+  
+  .quality-tabs {
+    height: 100%;
+    overflow-y: auto;
+  }
+  
+  .tab-content {
+    height: 100%;
+  }
+}
+</style>
--- a/klp-ui/src/views/micro/pages/acid/components/Report.vue
+++ b/klp-ui/src/views/micro/pages/acid/components/Report.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="report-container">
+    <el-tabs v-model="activeTab" class="report-tabs">
+      <el-tab-pane label="综合报表" name="comprehensive">
+        <Comprehensive v-if="activeTab === 'comprehensive'"/>
+      </el-tab-pane>
+      <el-tab-pane label="日报表" name="day">
+        <DayReport v-if="activeTab === 'day'"/>
+      </el-tab-pane>
+      <el-tab-pane label="月报表" name="month">
+        <MonthReport v-if="activeTab === 'month'"/>
+      </el-tab-pane>
+      <el-tab-pane label="年报表" name="year">
+        <YearReport v-if="activeTab === 'year'"/>
+      </el-tab-pane>
+      <el-tab-pane label="损耗报表" name="loss">
+        <LossReport v-if="activeTab === 'loss'"/>
+      </el-tab-pane>
+      <el-tab-pane label="产出报表" name="out">
+        <OutReport v-if="activeTab === 'out'"/>
+      </el-tab-pane>
+      <el-tab-pane label="班报表" name="team">
+        <TeamReport v-if="activeTab === 'team'"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import Comprehensive from '@/views/wms/report/zha/comprehensive.vue';
+import DayReport from '@/views/wms/report/zha/day.vue';
+import MonthReport from '@/views/wms/report/zha/month.vue';
+import YearReport from '@/views/wms/report/zha/year.vue';
+import LossReport from '@/views/wms/report/zha/loss.vue';
+import OutReport from '@/views/wms/report/zha/out.vue';
+import TeamReport from '@/views/wms/report/zha/team.vue';
+
+export default {
+  name: 'AcidReport',
+  components: {
+    Comprehensive,
+    DayReport,
+    MonthReport,
+    YearReport,
+    LossReport,
+    OutReport,
+    TeamReport,
+  },
+  data() {
+    return {
+      activeTab: 'comprehensive',
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.report-container {
+  width: 100%;
+  height: 100%;
+  
+  .report-tabs {
+    height: 100%;
+    overflow-y: auto;
+  }
+}
+</style>
--- a/klp-ui/src/views/micro/pages/acid/components/Shipping.vue
+++ b/klp-ui/src/views/micro/pages/acid/components/Shipping.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="shipping-container">
+    <el-tabs v-model="activeTab" class="shipping-tabs">
+      <el-tab-pane label="配卷情况" name="waybill">
+        <div class="tab-content">
+          <BasePage 
+            :qrcode="qrcode" 
+            :showWaybill="showWaybill"
+            :showNewExport="showNewExport"
+            :querys="waybillQuerys" 
+            :showStatus="showStatus" 
+            :hideType="hideType" 
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="发货记录" name="ship">
+        <div class="tab-content">
+          <BasePage 
+            :qrcode="qrcode" 
+            :querys="shipQuerys" 
+            :showStatus="showStatus" 
+            :hideType="hideType" 
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showControl="false" 
+            :showExportTime="true" 
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  name: 'AcidShipping',
+  components: {
+    BasePage
+  },
+  data() {
+    return {
+      activeTab: 'waybill',
+      qrcode: false,
+      waybillQuerys: {
+        dataType: 1,
+        includeBindInfo: true,
+      },
+      shipQuerys: {
+        dataType: 1,
+        status: 1,
+      },
+      useWarehouseIds: true,
+      warehouseOptions: [
+        {value: '1988150044862377986', label: '酸连轧原料库'},
+        {value: '1988150099140866050', label: '酸连轧成品库'}, 
+        {value: '1988150263284953089', label: '镀锌原料库'}, 
+        {value: '1988150545175736322', label: '脱脂原料库'},
+      ],
+      showControl: false,
+      labelType: '3',
+      showStatus: false,
+      hideType: false,
+      showExportTime: false,
+      showWaybill: true,
+      showNewExport: true,
+      showMaterialType: true,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.shipping-container {
+  width: 100%;
+  height: 100%;
+  
+  .shipping-tabs {
+    height: 100%;
+    overflow-y: auto;
+  }
+  
+  .tab-content {
+    height: 100%;
+  }
+}
+</style>
--- a/klp-ui/src/views/micro/pages/acid/index.vue
+++ b/klp-ui/src/views/micro/pages/acid/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="acid-container">
+    <div class="acid-sidebar">
+      <el-menu
+        :default-active="activeMenu"
+        class="sidebar-menu"
+        @select="handleMenuSelect"
+      >
+        <el-menu-item index="inventory">
+          <i class="el-icon-box"></i>
+          <span slot="title">库存</span>
+        </el-menu-item>
+        <el-menu-item index="processing">
+          <i class="el-icon-s-operation"></i>
+          <span slot="title">加工</span>
+        </el-menu-item>
+        <el-menu-item index="report">
+          <i class="el-icon-document"></i>
+          <span slot="title">报表</span>
+        </el-menu-item>
+        <el-menu-item index="shipping">
+          <i class="el-icon-truck"></i>
+          <span slot="title">发货</span>
+        </el-menu-item>
+        <el-menu-item index="quality">
+          <i class="el-icon-warning-outline"></i>
+          <span slot="title">品质</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div>
+      <component :is="currentComponent" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Inventory from './components/Inventory.vue';
+import Processing from './components/Processing.vue';
+import Report from './components/Report.vue';
+import Shipping from './components/Shipping.vue';
+import Quality from './components/Quality.vue';
+
+export default {
+  name: 'AcidSystem',
+  components: {
+    Inventory,
+    Processing,
+    Report,
+    Shipping,
+    Quality,
+  },
+  data() {
+    return {
+      activeMenu: 'inventory',
+    };
+  },
+  computed: {
+    currentComponent() {
+      const componentMap = {
+        inventory: 'Inventory',
+        processing: 'Processing',
+        report: 'Report',
+        shipping: 'Shipping',
+        quality: 'Quality',
+      };
+      return componentMap[this.activeMenu];
+    },
+  },
+  methods: {
+    handleMenuSelect(index) {
+      this.activeMenu = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.acid-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  height: calc(100vh - 84px);
+  background-color: #f5f7fa;
+}
+
+.acid-sidebar {
+  width: 100px;
+  background-color: #fff;
+  border-right: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
+
+  .sidebar-menu {
+    border: none;
+    background-color: transparent;
+    flex: 1;
+    overflow-y: auto;
+    border-right: none;
+
+    ::v-deep .el-menu-item {
+      color: #606266;
+      padding: 0 20px;
+      font-size: 14px;
+      
+      &:hover {
+        background-color: #ecf5ff;
+        color: #409eff;
+      }
+      
+      &.is-active {
+        background-color: #ecf5ff;
+        color: #409eff;
+        border-right: 3px solid #409eff;
+      }
+      
+      i {
+        font-size: 18px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>
--- a/klp-ui/src/views/wms/coil/components/CoilInfo.vue
+++ b/klp-ui/src/views/wms/coil/components/CoilInfo.vue
@@ -0,0 +1,86 @@
+<template>
+  <el-descriptions
+    :column="column"
+    :border="true"
+    size="small"
+  >
+    <el-descriptions-item label="入场卷号">{{ coilInfo.enterCoilNo || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="当前卷号">{{ coilInfo.currentCoilNo || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="厂家原料号">{{ coilInfo.supplierCoilNo || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="逻辑库位">{{ coilInfo.warehouseName || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="实际库区">{{ coilInfo.actualWarehouseName || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="班组">{{ coilInfo.team || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="材料类型">{{ coilInfo.materialType || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="产品/原料">{{ coilInfo.itemName || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="规格">{{ coilInfo.specification || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="材质">{{ coilInfo.material || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="厂家">{{ coilInfo.manufacturer || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="镀层质量">{{ coilInfo.zincLayer || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="表面处理">{{ coilInfo.surfaceTreatmentDesc || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="质量状态">
+      <span :class="getStatusClass(coilInfo.qualityStatus)">{{ coilInfo.qualityStatus || '-' }}</span>
+    </el-descriptions-item>
+    <el-descriptions-item label="切边要求">{{ coilInfo.trimmingRequirement || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="原料材质">{{ coilInfo.packingStatus || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="包装要求">{{ coilInfo.packagingRequirement || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="实测厚度">{{ coilInfo.actualThickness ? `${coilInfo.actualThickness} m` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="实测宽度">{{ coilInfo.actualWidth ? `${coilInfo.actualWidth} m` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="长度">{{ coilInfo.length ? `${coilInfo.length} m` : '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="毛重">{{ coilInfo.grossWeight ? `${coilInfo.grossWeight} t` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="净重">{{ coilInfo.netWeight ? `${coilInfo.netWeight} t` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="生产开始">{{ coilInfo.productionStartTime || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="生产结束">{{ coilInfo.productionEndTime || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="调制度">{{ coilInfo.temperGrade || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="镀层种类">{{ coilInfo.coatingType || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="表面处理">{{ coilInfo.coilSurfaceTreatment || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="备注" :span="column - 2">{{ coilInfo.remark || '-' }}</el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script>
+export default {
+  name: 'CoilInfo',
+  props: {
+    coilInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    column: {
+      type: Number,
+      default: 5
+    }
+  },
+  methods: {
+    getStatusClass(status) {
+      if (!status) return ''
+      const statusLower = status.toLowerCase()
+      if (statusLower.includes('合格')) return 'status-success'
+      if (statusLower.includes('不合格')) return 'status-danger'
+      if (statusLower.includes('待检')) return 'status-warning'
+      return ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.status-success {
+  color: #67c23a;
+  font-weight: 500;
+}
+
+.status-danger {
+  color: #f56c6c;
+  font-weight: 500;
+}
+
+.status-warning {
+  color: #e6a23c;
+  font-weight: 500;
+}
+</style>
--- a/klp-ui/src/views/wms/coil/info.vue
+++ b/klp-ui/src/views/wms/coil/info.vue
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -1,16 +1,21 @@
 <template>
  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="入场钢卷号" prop="enterCoilNo">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="60px">
+      <el-form-item label="入场卷号" prop="enterCoilNo">
        <el-input v-model="queryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
-      <el-form-item label="当前钢卷号" prop="currentCoilNo">
+      <el-form-item label="当前卷号" prop="currentCoilNo">
        <el-input v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
-      <el-form-item label="逻辑库位" prop="warehouseId" v-if="!hideWarehouseQuery && !leftWarehouseQuery">
-        <warehouse-select v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位"
+      <el-form-item label="逻辑库位" prop="warehouseId" v-if="useWarehouseIds">
+        <muti-select v-model="warehouseIds" placeholder="请选择逻辑库位" 
+          style="width: 100%; display: inline-block;" clearable :options="warehouseOptions">
+        </muti-select>
+      </el-form-item>
+      <el-form-item label="逻辑库位" prop="warehouseId" v-else-if="!hideWarehouseQuery && !leftWarehouseQuery">
+        <warehouse-select v-model="queryParams.warehouseId" placeholder="请选择逻辑库位"
          style="width: 100%; display: inline-block;" clearable />
      </el-form-item>

@@ -20,6 +25,13 @@
          :clearInput="false" :showEmpty="true" />
      </el-form-item>

+      <el-form-item v-if="showMaterialType" label="物料类型" prop="materialType">
+        <el-select v-model="queryParams.materialType" placeholder="请选择物料类型" clearable>
+          <el-option label="原料" value="原料"></el-option>
+          <el-option label="成品" value="成品"></el-option>
+        </el-select>
+      </el-form-item>
+
      <el-form-item label="产品名称" prop="itemName">
        <muti-select v-model="queryParams.itemName" :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
      </el-form-item>
@@ -298,6 +310,9 @@
              <el-button size="mini" type="text" icon="el-icon-printer" @click="handlePrintLabel(scope.row)">
                打印标签
              </el-button>
+              <el-button size="mini" type="text" icon="el-icon-view" @click="handleNumberCoilClick(scope.row)">
+                数字钢卷
+              </el-button>
              <el-button size="mini" v-if="showStatus" type="text" icon="el-icon-upload"
                @click="handleExportCoil(scope.row)">
                发货
@@ -680,7 +695,7 @@ export default {
      type: Boolean,
      default: false,
    },
-    hideType: {
+    showMaterialType: {
      type: Boolean,
      default: false,
    },
@@ -762,6 +777,14 @@ export default {
      type: Boolean,
      default: false,
    },
+    useWarehouseIds: {
+      type: Boolean,
+      default: false,
+    },
+    warehouseOptions: {
+      type: Array,
+      default: () => [],
+    },
  },
  data() {
    return {
@@ -883,6 +906,7 @@ export default {
        loading: false,
        list: [],
      },
+      warehouseIds: '',
      __printOldTitle: document.title,
      floatLayerConfig: {
        columns: [
@@ -974,12 +998,21 @@ export default {
    },
  },
  created() {
-    this.getList();
    if (this.showExportTime) {
      this.getUserList();
    }
+    if (this.useWarehouseIds) {
+      this.warehouseIds = this.warehouseOptions.map(item => item.value).join(',');
+    }
+    this.getList();
  },
  methods: {
+    // 进入数字钢卷页面
+    handleNumberCoilClick(row) {
+      this.$router.push({
+        path: '/wms/coil/' + row.coilId,
+      });
+    },
    // 处理行点击事件
    handleRowClick(row) {
      this.currentCoilId = row.coilId;
@@ -1186,6 +1219,9 @@ export default {
      }
      // 如果没有设置itemType，则设置为raw_material
      query.selectType = this.querys.materialType === '原料' ? 'raw_material' : 'product';
+      if (this.useWarehouseIds) {
+        query.warehouseIds = this.warehouseIds;
+      }
      if (this.showWaybill) {
        const { shipmentTime, ...query } = {
          ...this.queryParams,
--- a/klp-ui/src/views/wms/report/split/and.vue
+++ b/klp-ui/src/views/wms/report/split/and.vue
@@ -0,0 +1,26 @@
+<template>
+  <MandsTemplate
+    :actionTypes="actionTypes"
+    :actionQueryParams="actionQueryParams"
+    :baseQueryParams="baseQueryParams"
+    :warehouseOptions="warehouseOptions"
+    :productionLine="productionLine"
+  />
+</template>
+
+<script>
+import MandsTemplate from '@/views/wms/report/template/mands.vue'
+import { splitConfig } from '@/views/wms/report/js/config.js'
+
+export default {
+  name: 'AndReport',
+  components: {
+    MandsTemplate,
+  },
+  data() {
+    return {
+      ...splitConfig,
+    }
+  }
+}
+</script>
--- a/klp-ui/src/views/wms/report/template/mands.vue
+++ b/klp-ui/src/views/wms/report/template/mands.vue
@@ -0,0 +1,745 @@
+<template>
+  <div class="app-container" v-loading="loading">
+    <!-- 对日期的筛选另起一行 -->
+    <div style="margin-bottom: 10px;">
+      <!-- 单选按钮，用于切换视图，可以使用日视图、月视图、年视图、自定义, 默认使用自定义日期 -->
+      <!-- 日视图时选择一天, 月视图时选择一个月, 年视图时选择一年, 自定义时选择自定义时间范围 -->
+      <el-radio-group v-model="viewType" @change="handleViewTypeChange">
+        <el-radio-button label="day">日视图</el-radio-button>
+        <el-radio-button label="month">月视图</el-radio-button>
+        <el-radio-button label="year">年视图</el-radio-button>
+        <el-radio-button label="custom">自定义</el-radio-button>
+      </el-radio-group>
+
+      <!-- 日视图日期选择器 -->
+      <el-date-picker v-if="viewType === 'day'" style="width: 200px; margin-left: 10px;" v-model="dayDate" type="date"
+        value-format="yyyy-MM-dd" placeholder="选择日期" @change="handleDayDateChange" />
+
+      <!-- 月视图日期选择器 -->
+      <el-date-picker v-if="viewType === 'month'" style="width: 200px; margin-left: 10px;" v-model="monthDate"
+        type="month" value-format="yyyy-MM" placeholder="选择月份" @change="handleMonthDateChange" />
+
+      <!-- 年视图日期选择器 -->
+      <el-date-picker v-if="viewType === 'year'" style="width: 200px; margin-left: 10px;" v-model="yearDate" type="year"
+        value-format="yyyy" placeholder="选择年份" @change="handleYearDateChange" />
+
+      <!-- 自定义日期选择器 -->
+      <span v-if="viewType === 'custom'" style="margin-left: 10px;">
+        <el-date-picker  style="width: 200px;" v-model="queryParams.byCreateTimeStart"
+          type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始日期"></el-date-picker>
+        至
+        <el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeEnd"
+          type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束日期"></el-date-picker>
+      </span>
+    </div>
+    <el-row>
+      <el-form label-width="80px" inline>
+        <el-form-item label="入场钢卷号" prop="enterCoilNo">
+          <el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
+            placeholder="请输入入场钢卷号" clearable @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="当前钢卷号" prop="currentCoilNo">
+          <el-input style="width: 200px;" v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="逻辑库位" prop="warehouseIds">
+          <el-select v-model="warehouseIds" collapse-tags multiple placeholder="请选择逻辑库位" style="width: 200px;">
+            <el-option v-for="item in warehouseOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="产品名称" prop="itemName">
+          <el-input style="width: 200px;" v-model="queryParams.itemName" placeholder="请输入产品名称" clearable
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="规格" prop="itemSpecification">
+          <memo-input style="width: 200px;" v-model="queryParams.itemSpecification" storageKey="coilSpec"
+            placeholder="请选择规格" clearable @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="材质" prop="itemMaterial">
+          <dict-select style="width: 200px;" v-model="queryParams.itemMaterial" dictType="coil_material"
+            placeholder="请选择材质" clearable multiple />
+        </el-form-item>
+        <el-form-item label="厂家" prop="itemManufacturer">
+          <dict-select style="width: 200px;" v-model="queryParams.itemManufacturer" dictType="coil_manufacturer"
+            placeholder="请选择厂家" clearable multiple />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">查询</el-button>
+          <el-button type="primary" @click="exportData">导出产出钢卷</el-button>
+          <el-button type="primary" @click="exportLossData">导出消耗钢卷</el-button>
+          <el-button type="primary" @click="settingVisible = true">列设置</el-button>
+          <el-button type="primary" @click="saveOutputReport">保存产出报表</el-button>
+          <el-button type="primary" @click="saveLossReport">保存消耗报表</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+
+    <el-descriptions title="统计信息" :column="3" border>
+      <el-descriptions-item label="产出数量">{{ summary.outCount }}<span v-if="viewType === 'day' && yesterdaySummary.outCount" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.outCount }})</span></el-descriptions-item>
+      <el-descriptions-item label="产出总重">{{ summary.outTotalWeight }}t<span v-if="viewType === 'day' && yesterdaySummary.outTotalWeight" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.outTotalWeight }}t)</span></el-descriptions-item>
+      <el-descriptions-item label="产出均重">{{ summary.outAvgWeight }}t<span v-if="viewType === 'day' && yesterdaySummary.outAvgWeight" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.outAvgWeight }}t)</span></el-descriptions-item>
+
+      <el-descriptions-item label="消耗数量">{{ summary.lossCount }}<span v-if="viewType === 'day' && yesterdaySummary.lossCount" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.lossCount }})</span></el-descriptions-item>
+      <el-descriptions-item label="消耗总重">{{ summary.lossTotalWeight }}t<span v-if="viewType === 'day' && yesterdaySummary.lossTotalWeight" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.lossTotalWeight }}t)</span></el-descriptions-item>
+      <el-descriptions-item label="消耗均重">{{ summary.lossAvgWeight }}t<span v-if="viewType === 'day' && yesterdaySummary.lossAvgWeight" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.lossAvgWeight }}t)</span></el-descriptions-item>
+
+      <el-descriptions-item label="数量差值">{{ summary.countDiff }}<span v-if="viewType === 'day' && yesterdaySummary.countDiff" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.countDiff }})</span></el-descriptions-item>
+      <el-descriptions-item label="总重差值">{{ summary.weightDiff }}<span v-if="viewType === 'day' && yesterdaySummary.weightDiff" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.weightDiff }})</span></el-descriptions-item>
+      <el-descriptions-item label="均重差值">{{ summary.avgWeightDiff }}t<span v-if="viewType === 'day' && yesterdaySummary.avgWeightDiff" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.avgWeightDiff }}t)</span></el-descriptions-item>
+      <!-- <el-descriptions-item label="合计均重">{{ summary.totalAvgWeight }}t</el-descriptions-item> -->
+
+      <!-- 成品率 -->
+      <el-descriptions-item label="成品率">{{ summary.passRate }}<span v-if="viewType === 'day' && yesterdaySummary.passRate" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.passRate }})</span></el-descriptions-item>
+      <el-descriptions-item label="损耗率">{{ summary.lossRate }}<span v-if="viewType === 'day' && yesterdaySummary.lossRate" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.lossRate }})</span></el-descriptions-item>
+      <!-- 异常率 -->
+      <el-descriptions-item label="异常率">{{ summary.abRate }}<span v-if="viewType === 'day' && yesterdaySummary.abRate" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.abRate }})</span></el-descriptions-item>
+      <!-- 正品率 -->
+      <el-descriptions-item label="正品率">{{ summary.passRate2 }}<span v-if="viewType === 'day' && yesterdaySummary.passRate2" style="margin-left: 10px; font-size: 12px; color: #999;">(昨日: {{ yesterdaySummary.passRate2 }})</span></el-descriptions-item>
+    </el-descriptions>
+
+    <!-- 已处理M统计信息 -->
+    <el-descriptions title="已处理M统计信息" :column="3" border>
+      <el-descriptions-item label="产出数量">{{ mSummary.outCount }}</el-descriptions-item>
+      <el-descriptions-item label="产出总重">{{ mSummary.outTotalWeight }}t</el-descriptions-item>
+      <el-descriptions-item label="产出均重">{{ mSummary.outAvgWeight }}t</el-descriptions-item>
+
+      <el-descriptions-item label="消耗数量">{{ mSummary.lossCount }}</el-descriptions-item>
+      <el-descriptions-item label="消耗总重">{{ mSummary.lossTotalWeight }}t</el-descriptions-item>
+      <el-descriptions-item label="消耗均重">{{ mSummary.lossAvgWeight }}t</el-descriptions-item>
+
+      <el-descriptions-item label="数量差值">{{ mSummary.countDiff }}</el-descriptions-item>
+      <el-descriptions-item label="总重差值">{{ mSummary.weightDiff }}</el-descriptions-item>
+      <el-descriptions-item label="均重差值">{{ mSummary.avgWeightDiff }}t</el-descriptions-item>
+      <!-- 成品率 -->
+      <el-descriptions-item label="成品率">{{ mSummary.passRate }}</el-descriptions-item>
+      <el-descriptions-item label="损耗率">{{ mSummary.lossRate }}</el-descriptions-item>
+      <!-- 异常率 -->
+      <el-descriptions-item label="异常率">{{ mSummary.abRate }}</el-descriptions-item>
+      <!-- 正品率 -->
+      <el-descriptions-item label="正品率">{{ mSummary.passRate2 }}</el-descriptions-item>
+    </el-descriptions>
+
+    <!-- 异常统计 -->
+    <el-descriptions title="异常统计" :column="4" border>
+      <el-descriptions-item v-for="item in abSummary" :key="item.label" :label="item.label">{{ item.value
+        }}</el-descriptions-item>
+    </el-descriptions>
+
+    <!-- 月视图日数据折线图 -->
+    <div v-if="viewType === 'month'" style="margin-top: 20px; height: 400px;">
+      <el-card>
+        <template slot="header">
+          <div class="clearfix">
+            <span>日数据趋势</span>
+          </div>
+        </template>
+        <div ref="monthChart" style="width: 100%; height: 350px;"></div>
+      </el-card>
+    </div>
+
+    <!-- 分条信息统计 -->
+    <split-summary v-if="productionLine == '分条线'" :origin-outputlist="list" :origin-loss-list="lossList"
+      :common-coil-ids="commonCoilIds"></split-summary>
+
+    <el-descriptions title="明细信息" :column="3" border>
+    </el-descriptions>
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="产出钢卷" name="output">
+        <coil-table :columns="outputColumns" :data="list" :highlight-config="{ rows: commonCoilIds }"></coil-table>
+      </el-tab-pane>
+      <el-tab-pane label="投入钢卷" name="loss">
+        <coil-table :columns="lossColumns" :data="lossList" :highlight-config="{ rows: commonCoilIds }"></coil-table>
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog title="列设置" :visible.sync="settingVisible" width="50%">
+      <el-radio-group v-model="activeColumnConfig">
+        <el-radio-button label="coil-report-loss">投入明细配置</el-radio-button>
+        <el-radio-button label="coil-report-output">产出明细配置</el-radio-button>
+      </el-radio-group>
+      <columns-setting :reportType="activeColumnConfig"></columns-setting>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCoilWithIds } from "@/api/wms/coil";
+import {
+  listPendingAction,
+} from '@/api/wms/pendingAction';
+import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
+import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
+import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
+import MemoInput from "@/components/MemoInput";
+import MutiSelect from "@/components/MutiSelect";
+import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
+import { calcSummary, calcAbSummary, calcMSummary } from "@/views/wms/report/js/calc";
+import ColumnsSetting from "@/views/wms/report/components/setting/columns.vue";
+import CoilTable from "@/views/wms/report/components/coilTable/index.vue";
+import SplitSummary from "@/views/wms/report/components/summary/splitSummary.vue";
+import { saveReportFile } from "@/views/wms/report/js/reportFile";
+import * as echarts from 'echarts';
+import { fetchLossList, fetchOutputList } from "@/views/wms/report/js/fetch";
+
+export default {
+  name: 'ComprehensiveTemplate',
+  components: {
+    ProductInfo,
+    RawMaterialInfo,
+    CoilNo,
+    MemoInput,
+    MutiSelect,
+    WarehouseSelect,
+    ColumnsSetting,
+    CoilTable,
+    SplitSummary,
+  },
+  props: {
+    actionTypes: {
+      type: Array,
+      default: () => [],
+    },
+    actionQueryParams: {
+      type: Object,
+      default: () => { },
+    },
+    baseQueryParams: {
+      type: Object,
+      default: () => ({})
+    },
+    warehouseOptions: {
+      type: Array,
+      default: () => []
+    },
+    productionLine: {
+      type: String,
+      default: '',
+    },
+  },
+  dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
+  data() {
+    // 工具函数：个位数补零
+    const addZero = (num) => num.toString().padStart(2, '0')
+
+    // 获取当前日期（默认选中当天）
+    const now = new Date()
+    const currentDate = `${now.getFullYear()}-${addZero(now.getMonth() + 1)}`
+
+    /**
+     * 生成指定日期/月份的时间范围字符串
+     * @param {string} dateStr - 支持格式：yyyy-MM（月份） 或 yyyy-MM-dd（具体日期）
+     * @returns {object} 包含start（开始时间）和end（结束时间）的对象
+     */
+    const getDayTimeRange = (dateStr) => {
+      // 先校验输入格式是否合法
+      const monthPattern = /^\d{4}-\d{2}$/; // yyyy-MM 正则
+      const dayPattern = /^\d{4}-\d{2}-\d{2}$/; // yyyy-MM-dd 正则
+
+      if (!monthPattern.test(dateStr) && !dayPattern.test(dateStr)) {
+        throw new Error('输入格式错误，请传入 yyyy-MM 或 yyyy-MM-dd 格式的字符串');
+      }
+
+      let startDate, endDate;
+
+      if (monthPattern.test(dateStr)) {
+        // 处理 yyyy-MM 格式：获取本月第一天和最后一天
+        const [year, month] = dateStr.split('-').map(Number);
+        // 月份是0基的（0=1月，1=2月...），所以要减1
+        // 第一天：yyyy-MM-01
+        startDate = `${dateStr}-01`;
+        // 最后一天：通过 new Date(year, month, 0) 计算（month是原始月份，比如2代表2月，传2则取3月0日=2月最后一天）
+        const lastDayOfMonth = new Date(year, month, 0).getDate();
+        endDate = `${dateStr}-${lastDayOfMonth.toString().padStart(2, '0')}`;
+      } else {
+        // 处理 yyyy-MM-dd 格式：直接使用传入的日期
+        startDate = dateStr;
+        endDate = dateStr;
+      }
+
+      // 拼接时间部分
+      return {
+        start: `${startDate} 00:00:00`,
+        end: `${endDate} 23:59:59`
+      };
+    };
+
+    const { start, end } = getDayTimeRange(currentDate)
+
+    return {
+      mergeCoils: [],
+      activeTab: 'output',
+      activeColumnConfig: 'coil-report-loss',
+      settingVisible: false,
+      list: [],
+      lossList: [],
+      // 视图类型：day(日视图), month(月视图), year(年视图), custom(自定义)
+      viewType: 'custom',
+      // 日视图日期
+      dayDate: currentDate.split('-').length === 3 ? currentDate : `${currentDate}-01`,
+      // 月视图日期
+      monthDate: currentDate,
+      // 年视图日期
+      yearDate: currentDate.split('-')[0],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 99999,
+        date: currentDate,  // 绑定日期选择器的默认值（当天）
+        byCreateTimeStart: start,  // 默认当天0点
+        byCreateTimeEnd: end,      // 默认当天23:59:59
+        selectType: 'product',
+        enterCoilNo: '',
+        currentCoilNo: '',
+        warehouseId: '',
+        itemName: '',  // 修正原代码的productName为itemName（和表单绑定一致）
+        itemSpecification: '',
+        itemMaterial: '',
+        itemManufacturer: '',
+      },
+      loading: false,
+      warehouseIds: [
+        '1988150099140866050',
+        '1988150263284953089',
+        '1988150545175736322',
+        '1988150150521090049',
+        '2019583656787259393',
+        '2019583325311414274',
+        '2019583429955104769',
+        '2019583137616310273',
+      ],
+      getDayTimeRange,  // 挂载时间范围生成函数
+
+      lossColumns: [],
+      outputColumns: [],
+
+      actionIds: '',
+      // 昨日数据
+      yesterdaySummary: {},
+      // 折线图实例
+      monthChart: null,
+    }
+  },
+  watch: {
+    warehouseOptions: {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.warehouseIds = newVal.map(item => item.value)
+        }
+      },
+      immediate: true,
+    }
+  },
+  computed: {
+    summary() {
+      return calcSummary(this.list, this.lossList)
+    },
+    abSummary() {
+      return calcAbSummary(this.list)
+    },
+    mSummary() {
+      return calcMSummary(this.list, this.lossList)
+    },
+    // 找出list和lossList中id相同的卷
+    commonCoilIds() {
+      if (this.productionLine !== '分条线') {
+        return []
+      }
+
+      // 获取list中的coilId集合
+      const outputCoilIds = new Set(this.list.map(item => item.coilId))
+      // 获取lossList中的coilId集合
+      const lossCoilIds = new Set(this.lossList.map(item => item.coilId))
+
+      // 找出两个集合中相同的coilId
+      const commonIds = []
+      outputCoilIds.forEach(id => {
+        if (lossCoilIds.has(id)) {
+          commonIds.push(id)
+        }
+      })
+      
+      return commonIds
+    },
+  },
+  methods: {
+    // 加载列设置
+    loadColumns() {
+      this.lossColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-loss') || '[]') || []
+      this.outputColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-output') || '[]') || []
+    },
+    // 视图类型变更处理
+    handleViewTypeChange() {
+      switch (this.viewType) {
+        case 'day':
+          // 切换到日视图时，默认选中今天
+          const today = new Date();
+          const year = today.getFullYear();
+          const month = String(today.getMonth() + 1).padStart(2, '0');
+          const day = String(today.getDate()).padStart(2, '0');
+          this.dayDate = `${year}-${month}-${day}`;
+          this.handleDayDateChange();
+          break;
+        case 'month':
+          this.handleMonthDateChange();
+          break;
+        case 'year':
+          this.handleYearDateChange();
+          break;
+        case 'custom':
+          // 自定义视图保持当前日期范围
+          break;
+      }
+    },
+    // 日视图日期变更处理
+    handleDayDateChange() {
+      if (this.dayDate) {
+        const { start, end } = this.getDayTimeRange(this.dayDate);
+        this.queryParams.byCreateTimeStart = start;
+        this.queryParams.byCreateTimeEnd = end;
+        this.handleQuery();
+      }
+    },
+    // 月视图日期变更处理
+    handleMonthDateChange() {
+      if (this.monthDate) {
+        const { start, end } = this.getDayTimeRange(this.monthDate);
+        this.queryParams.byCreateTimeStart = start;
+        this.queryParams.byCreateTimeEnd = end;
+        this.handleQuery();
+      }
+    },
+    // 年视图日期变更处理
+    handleYearDateChange() {
+      if (this.yearDate) {
+        // 年视图：1月1日到12月31日
+        this.queryParams.byCreateTimeStart = `${this.yearDate}-01-01 00:00:00`;
+        this.queryParams.byCreateTimeEnd = `${this.yearDate}-12-31 23:59:59`;
+        this.handleQuery();
+      }
+    },
+    // 日期变更处理：更新开始/结束时间
+    handleDateChange() {
+      if (this.viewType === 'custom') {
+        // 自定义视图下，使用开始和结束日期
+        if (this.queryParams.byCreateTimeStart && this.queryParams.byCreateTimeEnd) {
+          // 确保时间格式正确
+          if (!this.queryParams.byCreateTimeStart.includes(' ')) {
+            this.queryParams.byCreateTimeStart = `${this.queryParams.byCreateTimeStart} 00:00:00`;
+          }
+          if (!this.queryParams.byCreateTimeEnd.includes(' ')) {
+            this.queryParams.byCreateTimeEnd = `${this.queryParams.byCreateTimeEnd} 23:59:59`;
+          }
+          // 日期变更后自动查询
+          this.handleQuery();
+        }
+      }
+    },
+    // 统一查询入口（兼容回车和按钮点击）
+    async handleQuery() {
+      this.loading = true
+      await this.fetchMergeCoil()
+      Promise.all([
+        fetchLossList(this.actionTypes, {
+          ...this.queryParams,
+          ...this.actionQueryParams,
+        }, (ids) => { this.actionIds = ids }),
+        fetchOutputList({
+          ...this.queryParams,
+          ...this.baseQueryParams,
+          warehouseIds: this.warehouseIds.join(','),
+        }),
+      ]).then(([lossList, outputList]) => {
+        // 将mergeCoils中存在的卷剔除
+        this.lossList = lossList.filter(item => !this.mergeCoils.includes(item.coilId))
+        // 找出所有被剔除的卷的id, 
+        const removedCoilIds = lossList.filter(item => this.mergeCoils.includes(item.coilId)).map(item => item.coilId)
+        console.log(removedCoilIds)
+        this.list = outputList.filter(item => !removedCoilIds.includes(item.parentCoilId))
+        // if (this.viewType == 'day') {
+        //   this.getYesterdayData()
+        // }
+        if (this.viewType == 'month') {
+          this.initMonthChart()
+        }
+        this.loading = false
+      })
+    },
+    async fetchMergeCoil() {
+      const mergeActionRes = await listPendingAction({
+        actionTypes: '201,202,203,204,205,206',
+        actionStatus: 2,
+        pageSize: 99999,
+        pageNum: 1,
+      })
+      const mergeCoils = mergeActionRes.rows.map(item => item.processedCoilIds).join(',').split(',')
+      this.mergeCoils = mergeCoils
+    },
+    // 获取昨日数据
+    // getYesterdayData() {
+    //   const yesterday = new Date(this.dayDate)
+    //   yesterday.setDate(yesterday.getDate() - 1)
+    //   const year = yesterday.getFullYear()
+    //   const month = String(yesterday.getMonth() + 1).padStart(2, '0')
+    //   const day = String(yesterday.getDate()).padStart(2, '0')
+    //   const yesterdayDate = `${year}-${month}-${day}`
+    //   const { start, end } = this.getDayTimeRange(yesterdayDate)
+
+    //   Promise.all([
+    //     listCoilWithIds({
+    //       selectType: 'raw_material',
+    //       itemType: 'raw_material',
+    //       warehouseIds: this.warehouseIds.join(','),
+    //       ...this.queryParams,
+    //       ...this.baseQueryParams,
+    //       byCreateTimeStart: start,
+    //       byCreateTimeEnd: end,
+    //     }),
+    //     listCoilWithIds({
+    //       selectType: 'product',
+    //       itemType: 'product',
+    //       warehouseIds: this.warehouseIds.join(','),
+    //       ...this.queryParams,
+    //       ...this.baseQueryParams,
+    //       byCreateTimeStart: start,
+    //       byCreateTimeEnd: end,
+    //     }),
+    //   ]).then((resList) => {
+    //     const list = resList.flatMap(res => res.rows)
+    //     // 按照createTime 降序排序
+    //     const yesterdayList = list.sort(
+    //       (a, b) => new Date(b.createTime) - new Date(a.createTime)
+    //     ).map(item => {
+    //       return item
+    //     })
+
+    //     // 获取昨日消耗数据
+    //     Promise.all(this.actionTypes.map(actionType => {
+    //       return listPendingAction({
+    //         actionStatus: 2,
+    //         warehouseId: this.queryParams.planId,
+    //         actionType,
+    //         pageSize: 99999,
+    //         pageNum: 1,
+    //         startTime: start,
+    //         endTime: end,
+    //         ...this.actionQueryParams,
+    //       })
+    //     })).then((lossResList) => {
+    //       const lossActions = lossResList.flatMap(item => item.rows)
+    //       const lossCoilIds = lossActions.map(item => item.coilId).join(',')
+
+    //       if (lossCoilIds) {
+    //         listCoilWithIds({
+    //           ...this.queryParams,
+    //           byCreateTimeStart: undefined,
+    //           byCreateTimeEnd: undefined,
+    //           coilIds: lossCoilIds,
+    //         }).then(res => {
+    //           const yesterdayLossList = res.rows.filter(item => !this.mergeCoils.includes(item.coilId))
+    //           this.yesterdaySummary = calcSummary(yesterdayList, yesterdayLossList)
+    //         })
+    //       } else {
+    //         this.yesterdaySummary = calcSummary(yesterdayList, [])
+    //       }
+    //     })
+    //   })
+    // },
+    // 初始化月视图折线图
+    initMonthChart() {
+      if (!this.$refs.monthChart) return
+
+      // 销毁旧的图表实例
+      if (this.monthChart) {
+        this.monthChart.dispose()
+      }
+
+      // 创建新的图表实例
+      this.monthChart = echarts.init(this.$refs.monthChart)
+
+      // 处理数据，按日期分组
+      const dailyData = {}
+      this.list.forEach(item => {
+        const date = item.createTime.split(' ')[0]
+        if (!dailyData[date]) {
+          dailyData[date] = {
+            outCount: 0,
+            outTotalWeight: 0,
+            lossCount: 0,
+            lossTotalWeight: 0,
+          }
+        }
+        dailyData[date].outCount++
+        dailyData[date].outTotalWeight += parseFloat(item.netWeight) || 0
+      })
+
+      this.lossList.forEach(item => {
+        const date = item.actionCompleteTime?.split(' ')[0]
+        if (!dailyData[date]) {
+          dailyData[date] = {
+            outCount: 0,
+            outTotalWeight: 0,
+            lossCount: 0,
+            lossTotalWeight: 0,
+          }
+        }
+        dailyData[date].lossCount++
+        dailyData[date].lossTotalWeight += parseFloat(item.netWeight) || 0
+      })
+
+      // 生成日期数组和数据数组
+      const dates = Object.keys(dailyData).sort()
+      const outCountData = dates.map(date => dailyData[date].outCount)
+      const outTotalWeightData = dates.map(date => dailyData[date].outTotalWeight.toFixed(2))
+      const lossCountData = dates.map(date => dailyData[date].lossCount)
+      const lossTotalWeightData = dates.map(date => dailyData[date].lossTotalWeight.toFixed(2))
+
+      // 配置项
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          data: ['产出数量', '产出总重', '消耗数量', '消耗总重']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: dates
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '数量',
+            position: 'left',
+          },
+          {
+            type: 'value',
+            name: '重量(t)',
+            position: 'right',
+          }
+        ],
+        series: [
+          {
+            name: '产出数量',
+            type: 'line',
+            data: outCountData,
+            yAxisIndex: 0,
+          },
+          {
+            name: '产出总重',
+            type: 'line',
+            data: outTotalWeightData,
+            yAxisIndex: 1,
+          },
+          {
+            name: '消耗数量',
+            type: 'line',
+            data: lossCountData,
+            yAxisIndex: 0,
+          },
+          {
+            name: '消耗总重',
+            type: 'line',
+            data: lossTotalWeightData,
+            yAxisIndex: 1,
+          }
+        ]
+      }
+
+      // 应用配置项
+      this.monthChart.setOption(option)
+
+      // 监听窗口大小变化
+      window.addEventListener('resize', () => {
+        this.monthChart.resize()
+      })
+    },
+    // 导出
+    exportData() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据可导出')
+        return
+      }
+      // 格式化日期用于文件名
+      const startDate = this.queryParams.byCreateTimeStart.split(' ')[0];
+      const endDate = this.queryParams.byCreateTimeEnd.split(' ')[0];
+      this.download('wms/materialCoil/export', {
+        coilIds: this.list.map(item => item.coilId).join(',')
+      }, `materialCoil_${startDate}_${endDate}_${new Date().getTime()}.xlsx`)
+    },
+    exportLossData() {
+      if (this.lossList.length === 0) {
+        this.$message.warning('暂无数据可导出')
+        return
+      }
+      // 格式化日期用于文件名
+      const startDate = this.queryParams.byCreateTimeStart.split(' ')[0];
+      const endDate = this.queryParams.byCreateTimeEnd.split(' ')[0];
+      this.download('wms/materialCoil/export', {
+        coilIds: this.lossList.map(item => item.coilId).join(',')
+      }, `materialCoil_${startDate}_${endDate}_${new Date().getTime()}.xlsx`)
+    },
+    // 保存产出报表
+    saveOutputReport() {
+      this.loading = true
+      saveReportFile(this.list.map(item => item.coilId).join(','), {
+        reportParams: this.queryParams,
+        reportType: '产出报表,综合报表',
+        productionLine: this.productionLine,
+      }).then(res => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+        })
+      }).catch(err => {
+        this.$message({
+          message: '保存失败',
+          type: 'error',
+        })
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 保存消耗报表
+    saveLossReport() {
+      this.loading = true
+      saveReportFile(this.lossList.map(item => item.coilId).join(','), {
+        reportParams: this.queryParams,
+        reportType: '消耗报表,综合报表',
+        productionLine: this.productionLine,
+      }).then(res => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+        })
+      }).catch(err => {
+        this.$message({
+          message: '保存失败',
+          type: 'error',
+        })
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+  },
+  mounted() {
+    this.handleQuery()
+    this.loadColumns()
+  }
+}
+</script>
+
+<style scoped></style>