From 57134e1359a3393ed5f71d8b0d71699ba0167640 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 13 Jan 2026 17:59:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E6=96=B0=E5=A2=9E=E5=8F=91?=
 =?UTF-8?q?=E8=B4=A7=E6=8A=A5=E8=A1=A8=E9=A1=B5=E9=9D=A2=E5=8F=8A=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增发货报表页面，包含时间趋势折线图和维度汇总柱状图
添加报表数据统计展示和明细表格功能
优化库存汇总页面，增加冷硬卷、冷轧卷等分类统计
重构发货报表页面布局和交互逻辑
---
 .../views/wms/coil/Inventory/itemSummary.vue  | 152 +++++-
 klp-ui/src/views/wms/coil/box2.vue            | 492 ------------------
 .../views/wms/delivery/report/charts/bar.vue  | 219 ++++++++
 .../views/wms/delivery/report/charts/line.vue | 204 ++++++++
 .../src/views/wms/delivery/report/index.vue   | 376 +++++++------
 .../views/wms/delivery/report/index_snap.vue  | 220 ++++++++
 6 files changed, 963 insertions(+), 700 deletions(-)
 delete mode 100644 klp-ui/src/views/wms/coil/box2.vue
 create mode 100644 klp-ui/src/views/wms/delivery/report/charts/bar.vue
 create mode 100644 klp-ui/src/views/wms/delivery/report/charts/line.vue
 create mode 100644 klp-ui/src/views/wms/delivery/report/index_snap.vue

diff --git a/klp-ui/src/views/wms/coil/Inventory/itemSummary.vue b/klp-ui/src/views/wms/coil/Inventory/itemSummary.vue
index 885326ff..c8b2a135 100644
--- a/klp-ui/src/views/wms/coil/Inventory/itemSummary.vue
+++ b/klp-ui/src/views/wms/coil/Inventory/itemSummary.vue
@@ -5,31 +5,48 @@
     <el-form inline>
       <MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
 
-      <el-form-item label="逻辑库位">
+      <!-- <el-form-item label="逻辑库位">
         <WarehouseSelect v-model="queryParams.warehouseId" @change="handleWarehouseChange" />
-      </el-form-item>
+      </el-form-item> -->
 
       <!-- 真实库区 -->
-      <el-form-item label="真实库区">
+      <!-- <el-form-item label="真实库区">
         <ActualWarehouseSelect
           v-model="queryParams.actualWarehouseId"
           @change="handleActualWarehouseChange"
           :width="220"
         />
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
 
     <!-- el-descriptions 汇总数据 -->
     <!-- 汇总数据展示 -->
     <div class="summary-container" v-if="list.length > 0">
       <h3>数据汇总</h3>
-      <el-descriptions :column="3" border class="summary-descriptions">
-        <el-descriptions-item label="总卷数">{{ summaryData.totalCoilCount }} 卷</el-descriptions-item>
+      <el-descriptions :column="4" border class="summary-descriptions">
+        <el-descriptions-item label="总卷数" :span="2">{{ summaryData.totalCoilCount }} 卷</el-descriptions-item>
         <el-descriptions-item label="成品卷数">{{ summaryData.productCoilCount }} 卷</el-descriptions-item>
         <el-descriptions-item label="原料卷数">{{ summaryData.rawMaterialCoilCount }} 卷</el-descriptions-item>
-        <el-descriptions-item label="总重(t)">{{ summaryData.totalNetWeight }} / {{ summaryData.totalGrossWeight }}</el-descriptions-item>
-        <el-descriptions-item label="成品总重(t)">{{ summaryData.productTotalNetWeight }} / {{ summaryData.productTotalGrossWeight }}</el-descriptions-item>
-        <el-descriptions-item label="原料总重(t)">{{ summaryData.rawMaterialTotalNetWeight }} / {{ summaryData.rawMaterialTotalGrossWeight }}</el-descriptions-item>
+        <el-descriptions-item label="总重(t)" :span="2">{{ summaryData.totalNetWeight }} / {{ summaryData.totalGrossWeight
+          }}</el-descriptions-item>
+        <el-descriptions-item label="成品总重(t)">{{ summaryData.productTotalNetWeight }} / {{
+          summaryData.productTotalGrossWeight }}</el-descriptions-item>
+        <el-descriptions-item label="原料总重(t)">{{ summaryData.rawMaterialTotalNetWeight }} / {{
+          summaryData.rawMaterialTotalGrossWeight }}</el-descriptions-item>
+
+        <el-descriptions-item label="冷硬卷数">{{ summaryData.lowHardCoilCount }} 卷</el-descriptions-item>
+        <el-descriptions-item label="冷轧卷数">{{ summaryData.coldRollCoilCount }} 卷</el-descriptions-item>
+        <el-descriptions-item label="镀锌卷数">{{ summaryData.zincCoilCount }} 卷</el-descriptions-item>
+        <el-descriptions-item label="热轧卷板数">{{ summaryData.hotRollCoilCount }} 卷</el-descriptions-item>
+
+        <el-descriptions-item label="冷硬卷总重(t)">{{ summaryData.lowHardTotalNetWeight }} / {{
+          summaryData.lowHardTotalGrossWeight }}</el-descriptions-item>
+        <el-descriptions-item label="冷轧卷总重(t)">{{ summaryData.coldRollTotalNetWeight }} / {{
+          summaryData.coldRollTotalGrossWeight }}</el-descriptions-item>
+        <el-descriptions-item label="镀锌卷总重(t)">{{ summaryData.zincTotalNetWeight }} / {{ summaryData.zincTotalGrossWeight
+          }}</el-descriptions-item>
+        <el-descriptions-item label="热轧卷板总重(t)">{{ summaryData.hotRollTotalNetWeight }} / {{
+          summaryData.hotRollTotalGrossWeight }}</el-descriptions-item>
       </el-descriptions>
     </div>
     <!-- 汇总总卷数，成品卷数，原料卷数，总毛重(t)，总净重(t)，成品总毛重(t)，成品总净重(t)，原料总毛重(t)，原料总净重(t) -->
@@ -54,6 +71,68 @@
         <el-table-column prop="itemType" label="物料类型" align="center" min-width="120"
           :formatter="formatItemType"></el-table-column>
       </el-table>
+
+      <!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取，获取汇总的数据详情，如果当前是物料统计，钻取将itemType和itemId作为条件查询list；
+       如果当前是仓库统计，将仓库id作为筛选条件 -->
+      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
+        <div class="drill-down-content">
+          <!-- 钻取条件显示 -->
+          <div class="drill-down-header">
+            <el-tag size="large" v-if="drillDownParams.itemType">
+              {{ drillDownParams.itemType === 'product' ? '成品' : '原材料' }}
+            </el-tag>
+            <el-tag size="large" v-if="drillDownParams.itemName" type="primary">
+              {{ drillDownParams.itemName }}
+            </el-tag>
+            <el-tag size="large" v-if="drillDownParams.warehouseName" type="success">
+              {{ drillDownParams.warehouseName }}
+            </el-tag>
+          </div>
+
+          <!-- 加载状态 -->
+          <el-skeleton :loading="drillDownLoading" animated>
+            <template #template>
+              <div class="demo-skeleton">
+                <el-skeleton-item variant="p" style="width: 80%" />
+                <el-skeleton-item variant="text" style="width: 30%" />
+                <el-skeleton-item variant="text" style="width: 60%" />
+              </div>
+            </template>
+
+            <!-- 钻取表格 -->
+            <el-table max-height="400" v-loading="drillDownLoading" :data="drillDownList" border stripe
+              style="width: 100%" v-if="!drillDownLoading">
+              <el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
+              <el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
+              <el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
+              <el-table-column prop="supplierCoilNo" label="厂家卷号" align="center" min-width="180"></el-table-column>
+              <el-table-column label="物料类型" align="center" prop="itemType">
+                <template slot-scope="scope">
+                  {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
+                </template>
+              </el-table-column>
+              <el-table-column label="产品类型" align="center" min-width="250">
+                <template slot-scope="scope">
+                  <ProductInfo v-if="scope.row.itemType === 'product'" :product="scope.row.product" />
+                  <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'"
+                    :material="scope.row.rawMaterial" />
+                </template>
+              </el-table-column>
+              <el-table-column label="更新时间" align="center" prop="updateTime" />
+              <el-table-column prop="grossWeight" label="毛重(t)" align="center" min-width="100"></el-table-column>
+              <el-table-column prop="netWeight" label="净重(t)" align="center" min-width="100"></el-table-column>
+            </el-table>
+          </el-skeleton>
+
+          <!-- 分页 -->
+          <div class="pagination-container" v-if="!drillDownLoading && drillDownList.length > 0">
+            <el-pagination background :current-page.sync="drillDownQueryParams.pageNum"
+              :page-size.sync="drillDownQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper" :total="drillDownTotal"
+              @size-change="handleDrillDownSizeChange" @current-change="handleDrillDownCurrentChange"></el-pagination>
+          </div>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -89,7 +168,22 @@ export default {
             productTotalGrossWeight: 0, // 成品总毛重(t)
             productTotalNetWeight: 0, // 成品总净重(t)
             rawMaterialTotalGrossWeight: 0, // 原料总毛重(t)
-            rawMaterialTotalNetWeight: 0 // 原料总净重(t)
+            rawMaterialTotalNetWeight: 0, // 原料总净重(t)
+
+            lowHardCoilCount: 0, // 冷硬卷数
+            coldRollCoilCount: 0, // 冷轧卷数
+            zincCoilCount: 0, // 镀锌卷数
+            hotRollCoilCount: 0, // 热轧卷数
+
+            lowHardTotalNetWeight: 0, // 冷硬卷总净重(t)
+            coldRollTotalNetWeight: 0, // 冷轧卷总净重(t)
+            zincTotalNetWeight: 0, // 镀锌卷总净重(t)
+            hotRollTotalNetWeight: 0, // 热轧卷总净重(t)
+
+            lowHardTotalGrossWeight: 0, // 冷硬卷总毛重(t)
+            coldRollTotalGrossWeight: 0, // 冷轧卷总毛重(t)
+            zincTotalGrossWeight: 0, // 镀锌卷总毛重(t)
+            hotRollTotalGrossWeight: 0, // 热轧卷总毛重(t)
           }
         }
       },
@@ -161,7 +255,22 @@ export default {
         productTotalGrossWeight: 0,
         productTotalNetWeight: 0,
         rawMaterialTotalGrossWeight: 0,
-        rawMaterialTotalNetWeight: 0
+        rawMaterialTotalNetWeight: 0,
+
+        lowHardCoilCount: 0, // 冷硬卷数
+        coldRollCoilCount: 0, // 冷轧卷数
+        zincCoilCount: 0, // 镀锌卷数
+        hotRollCoilCount: 0, // 热轧卷数
+
+        lowHardTotalNetWeight: 0, // 冷硬卷总净重(t)
+        coldRollTotalNetWeight: 0, // 冷轧卷总净重(t)
+        zincTotalNetWeight: 0, // 镀锌卷总净重(t)
+        hotRollTotalNetWeight: 0, // 热轧卷总净重(t)
+
+        lowHardTotalGrossWeight: 0, // 冷硬卷总毛重(t)
+        coldRollTotalGrossWeight: 0, // 冷轧卷总毛重(t)
+        zincTotalGrossWeight: 0, // 镀锌卷总毛重(t)
+        hotRollTotalGrossWeight: 0, // 热轧卷总毛重(t)
       };
 
       // 遍历列表数据累加计算
@@ -180,13 +289,32 @@ export default {
 
         summary.totalGrossWeight += grossWeight;
         summary.totalNetWeight += netWeight;
-
+        let itemName = '';
         if (item.itemType === 'product') {
           summary.productTotalGrossWeight += grossWeight;
           summary.productTotalNetWeight += netWeight;
+          itemName = item.product.productName;
         } else if (item.itemType === 'raw_material') {
           summary.rawMaterialTotalGrossWeight += grossWeight;
           summary.rawMaterialTotalNetWeight += netWeight;
+          itemName = item.rawMaterial.rawMaterialName;
+        }
+        if (itemName == '冷轧卷') {
+          summary.coldRollCoilCount += item.coilCount || 0;
+          summary.coldRollTotalNetWeight += netWeight;
+          summary.coldRollTotalGrossWeight += grossWeight;
+        } else if (itemName == '镀锌卷') {
+          summary.zincCoilCount += item.coilCount || 0;
+          summary.zincTotalNetWeight += netWeight;
+          summary.zincTotalGrossWeight += grossWeight;
+        } else if (itemName == '热轧卷板') {
+          summary.hotRollCoilCount += item.coilCount || 0;
+          summary.hotRollTotalNetWeight += netWeight;
+          summary.hotRollTotalGrossWeight += grossWeight;
+        } else if (itemName == '冷硬卷') {
+          summary.lowHardCoilCount += item.coilCount || 0;
+          summary.lowHardTotalNetWeight += netWeight;
+          summary.lowHardTotalGrossWeight += grossWeight;
         }
       });
 
diff --git a/klp-ui/src/views/wms/coil/box2.vue b/klp-ui/src/views/wms/coil/box2.vue
deleted file mode 100644
index ce914309..00000000
--- a/klp-ui/src/views/wms/coil/box2.vue
+++ /dev/null
@@ -1,492 +0,0 @@
-<template>
-  <div class="statistics-container" v-loading="loading">
-    <!-- 按照物料类型盘点 -->
-    <!-- 统计方式选择 -->
-    <el-form inline>
-      <MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
-
-      <!-- <el-form-item label="逻辑库位">
-        <WarehouseSelect v-model="queryParams.warehouseId" @change="handleWarehouseChange" />
-      </el-form-item> -->
-
-      <!-- 真实库区 -->
-      <!-- <el-form-item label="真实库区">
-        <ActualWarehouseSelect
-          v-model="queryParams.actualWarehouseId"
-          @change="handleActualWarehouseChange"
-          :width="220"
-        />
-      </el-form-item> -->
-    </el-form>
-
-    <!-- el-descriptions 汇总数据 -->
-    <!-- 汇总数据展示 -->
-    <div class="summary-container" v-if="list.length > 0">
-      <h3>数据汇总</h3>
-      <el-descriptions :column="3" border class="summary-descriptions">
-        <el-descriptions-item label="总卷数">{{ summaryData.totalCoilCount }} 卷</el-descriptions-item>
-        <el-descriptions-item label="成品卷数">{{ summaryData.productCoilCount }} 卷</el-descriptions-item>
-        <el-descriptions-item label="原料卷数">{{ summaryData.rawMaterialCoilCount }} 卷</el-descriptions-item>
-        <el-descriptions-item label="总重(t)">{{ summaryData.totalNetWeight }} / {{ summaryData.totalGrossWeight }}</el-descriptions-item>
-        <el-descriptions-item label="成品总重(t)">{{ summaryData.productTotalNetWeight }} / {{ summaryData.productTotalGrossWeight }}</el-descriptions-item>
-        <el-descriptions-item label="原料总重(t)">{{ summaryData.rawMaterialTotalNetWeight }} / {{ summaryData.rawMaterialTotalGrossWeight }}</el-descriptions-item>
-      </el-descriptions>
-    </div>
-    <!-- 汇总总卷数，成品卷数，原料卷数，总毛重(t)，总净重(t)，成品总毛重(t)，成品总净重(t)，原料总毛重(t)，原料总净重(t) -->
-
-    <!-- 数据表格 -->
-    <div class="table-container">
-      <el-table max-height="800" :data="list" border stripe style="width: 100%; margin-top: 20px"
-        @row-click="handleTableRowClick" row-class-name="table-row-hover">
-        <!-- 物料ID/名称列：仅物料统计时有效 -->
-        <el-table-column label="物料信息" align="center" min-width="250">
-          <template slot-scope="scope">
-            <ProductInfo v-if="scope.row.itemType === 'product'" :product="scope.row.product" />
-            <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
-          </template>
-        </el-table-column>
-
-        <!-- 通用列 -->
-        <el-table-column prop="coilCount" label="卷数" align="center" min-width="80"></el-table-column>
-        <el-table-column prop="totalGrossWeight" label="总毛重(t)" align="center" min-width="120"></el-table-column>
-        <el-table-column prop="totalNetWeight" label="总净重(t)" align="center" min-width="120"></el-table-column>
-        <!-- 物料类型列：仅物料统计时有效 -->
-        <el-table-column prop="itemType" label="物料类型" align="center" min-width="120"
-          :formatter="formatItemType"></el-table-column>
-      </el-table>
-
-      <!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取，获取汇总的数据详情，如果当前是物料统计，钻取将itemType和itemId作为条件查询list；
-       如果当前是仓库统计，将仓库id作为筛选条件 -->
-      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
-        <div class="drill-down-content">
-          <!-- 钻取条件显示 -->
-          <div class="drill-down-header">
-            <el-tag size="large" v-if="drillDownParams.itemType">
-              {{ drillDownParams.itemType === 'product' ? '成品' : '原材料' }}
-            </el-tag>
-            <el-tag size="large" v-if="drillDownParams.itemName" type="primary">
-              {{ drillDownParams.itemName }}
-            </el-tag>
-            <el-tag size="large" v-if="drillDownParams.warehouseName" type="success">
-              {{ drillDownParams.warehouseName }}
-            </el-tag>
-          </div>
-
-          <!-- 加载状态 -->
-          <el-skeleton :loading="drillDownLoading" animated>
-            <template #template>
-              <div class="demo-skeleton">
-                <el-skeleton-item variant="p" style="width: 80%" />
-                <el-skeleton-item variant="text" style="width: 30%" />
-                <el-skeleton-item variant="text" style="width: 60%" />
-              </div>
-            </template>
-
-            <!-- 钻取表格 -->
-            <el-table max-height="400" v-loading="drillDownLoading" :data="drillDownList" border stripe
-              style="width: 100%" v-if="!drillDownLoading">
-              <el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
-              <el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
-              <el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
-              <el-table-column prop="supplierCoilNo" label="厂家卷号" align="center" min-width="180"></el-table-column>
-              <el-table-column label="物料类型" align="center" prop="itemType">
-                <template slot-scope="scope">
-                  {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
-                </template>
-              </el-table-column>
-              <el-table-column label="产品类型" align="center" min-width="250">
-                <template slot-scope="scope">
-                  <ProductInfo v-if="scope.row.itemType === 'product'" :product="scope.row.product" /> 
-                  <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
-                </template>
-              </el-table-column>
-              <el-table-column label="更新时间" align="center" prop="updateTime" />
-              <el-table-column prop="grossWeight" label="毛重(t)" align="center" min-width="100"></el-table-column>
-              <el-table-column prop="netWeight" label="净重(t)" align="center" min-width="100"></el-table-column>
-            </el-table>
-          </el-skeleton>
-
-          <!-- 分页 -->
-          <div class="pagination-container" v-if="!drillDownLoading && drillDownList.length > 0">
-            <el-pagination background :current-page.sync="drillDownQueryParams.pageNum"
-              :page-size.sync="drillDownQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
-              layout="total, sizes, prev, pager, next, jumper" :total="drillDownTotal"
-              @size-change="handleDrillDownSizeChange" @current-change="handleDrillDownCurrentChange"></el-pagination>
-          </div>
-        </div>
-      </el-dialog>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getMaterialCoilDistributionByType, distributionByActualItemType } from "@/api/wms/coil";
-import { listMaterialCoil } from "@/api/wms/coil";
-import MaterialSelect from "@/components/KLPService/MaterialSelect";
-import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
-import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
-import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
-import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
-
-export default {
-  components: {
-    MaterialSelect,
-    RawMaterialInfo,
-    ProductInfo,
-    WarehouseSelect,
-    ActualWarehouseSelect,
-  },
-  data() {
-    return {
-      data() {
-        return {
-          // 原有变量保持不变...
-          summaryData: {
-            totalCoilCount: 0, // 总卷数
-            productCoilCount: 0, // 成品卷数
-            rawMaterialCoilCount: 0, // 原料卷数
-            totalGrossWeight: 0, // 总毛重(t)
-            totalNetWeight: 0, // 总净重(t)
-            productTotalGrossWeight: 0, // 成品总毛重(t)
-            productTotalNetWeight: 0, // 成品总净重(t)
-            rawMaterialTotalGrossWeight: 0, // 原料总毛重(t)
-            rawMaterialTotalNetWeight: 0 // 原料总净重(t)
-          }
-        }
-      },
-      queryParams: {
-        statType: '1',
-        itemType: undefined,
-        itemId: undefined,
-        warehouseId: undefined,
-        actualWarehouseId: undefined,
-      },
-      loading: false,
-      list: [],
-      // 科技风配色方案（蓝色系为主，体现科技感）
-      techColors: [
-        '#165DFF', // 主蓝色
-        '#36CFC9', // 青绿色
-        '#4080FF', // 中蓝色
-        '#0FC6C2', // 深青色
-        '#6AA1FF', // 浅蓝色
-        '#2BBEBA', // 浅青色
-        '#8CAAFF', // 极浅蓝色
-        '#08A8A5'  // 暗青色
-      ],
-      // 图表实例
-      treeChart: null,
-      barChart: null,
-      pieChart: null,
-      // 钻取相关数据
-      dialogVisible: false,
-      dialogTitle: '',
-      drillDownLoading: false,
-      drillDownList: [],
-      drillDownTotal: 0,
-      drillDownParams: {
-        itemType: null,
-        itemId: null,
-        itemName: '',
-        warehouseId: null,
-        warehouseName: '',
-        dataType: 1
-      },
-      drillDownQueryParams: {
-        pageNum: 1,
-        pageSize: 20
-      }
-    }
-  },
-  mounted() {
-    // this.initCharts();
-    this.getList();
-  },
-  beforeDestroy() {
-    // 销毁图表实例
-    if (this.treeChart) this.treeChart.dispose();
-    if (this.barChart) this.barChart.dispose();
-    if (this.pieChart) this.pieChart.dispose();
-    window.removeEventListener('resize', this.handleResize);
-  },
-  methods: {
-    // 计算汇总数据
-    calculateSummary() {
-      // 初始化汇总数据为0
-      const summary = {
-        totalCoilCount: 0,
-        productCoilCount: 0,
-        rawMaterialCoilCount: 0,
-        totalGrossWeight: 0,
-        totalNetWeight: 0,
-        productTotalGrossWeight: 0,
-        productTotalNetWeight: 0,
-        rawMaterialTotalGrossWeight: 0,
-        rawMaterialTotalNetWeight: 0
-      };
-
-      // 遍历列表数据累加计算
-      this.list.forEach(item => {
-        // 卷数统计
-        summary.totalCoilCount += item.coilCount || 0;
-        if (item.itemType === 'product') {
-          summary.productCoilCount += item.coilCount || 0;
-        } else if (item.itemType === 'raw_material') {
-          summary.rawMaterialCoilCount += item.coilCount || 0;
-        }
-
-        // 重量统计（保留2位小数）
-        const grossWeight = Number(item.totalGrossWeight) || 0;
-        const netWeight = Number(item.totalNetWeight) || 0;
-
-        summary.totalGrossWeight += grossWeight;
-        summary.totalNetWeight += netWeight;
-
-        if (item.itemType === 'product') {
-          summary.productTotalGrossWeight += grossWeight;
-          summary.productTotalNetWeight += netWeight;
-        } else if (item.itemType === 'raw_material') {
-          summary.rawMaterialTotalGrossWeight += grossWeight;
-          summary.rawMaterialTotalNetWeight += netWeight;
-        }
-      });
-
-      // 格式化重量数据为2位小数
-      Object.keys(summary).forEach(key => {
-        if (key.includes('Weight')) {
-          summary[key] = Number(summary[key].toFixed(2));
-        }
-      });
-
-      this.summaryData = summary;
-    },
-    // 处理逻辑库位选择变化
-    handleWarehouseChange() {
-      this.queryParams.actualWarehouseId = null; // 清空真实库区
-      this.queryParams.statType = '1'; // 切换为逻辑库位统计
-      this.getList();
-    },
-    // 处理真实库区选择变化
-    handleActualWarehouseChange() {
-      this.queryParams.warehouseId = null; // 清空逻辑库区
-      this.queryParams.statType = '2'; // 切换为真实库位统计
-      this.getList();
-    },
-    getList() {
-      this.loading = true;
-      if (this.queryParams.statType === '1') {
-        getMaterialCoilDistributionByType(this.queryParams).then(res => {
-          this.list = res.data || [];
-          this.calculateSummary(); // 新增：计算汇总数据
-          this.loading = false;
-        })
-      } else if (this.queryParams.statType === '2') {
-        distributionByActualItemType(this.queryParams).then(res => {
-          this.list = res.data || [];
-          this.calculateSummary(); // 新增：计算汇总数据
-          this.loading = false;
-        })
-      }
-    },
-
-    // 获取科技风颜色（循环使用配色方案）
-    getTechColor(index) {
-      return this.techColors[index % this.techColors.length];
-    },
-
-    // 生成物料名称（简化版，实际可根据组件返回值优化）
-    getMaterialName(item) {
-      if (item.itemType === 'product') {
-        return `成品(${item.itemId.slice(-6)})`; // 取ID后6位简化显示
-      } else if (item.itemType === 'raw_material') {
-        return `原材料(${item.itemId.slice(-6)})`;
-      }
-      return '未知物料';
-    },
-
-    // 格式化物料类型
-    formatItemType(row) {
-      const typeMap = {
-        'raw_material': '原材料',
-        'product': '成品'
-      };
-      return typeMap[row.itemType] || '未知';
-    },
-
-    // 处理表格行点击
-    handleTableRowClick(row) {
-      // 构建点击数据对象
-      const clickData = {};
-
-      if (this.queryParams.statType === '1') {
-        // 物料统计
-        clickData.itemType = row.itemType;
-        clickData.itemId = row.itemId;
-        clickData.name = this.getMaterialName(row);
-      } else {
-        // 仓库统计
-        clickData.warehouseId = row.warehouseId;
-        clickData.warehouseName = row.warehouseName;
-      }
-
-      // 调用图表点击处理函数
-      this.handleChartItemClick(clickData);
-    },
-
-    // 获取钻取数据列表
-    getDrillDownList() {
-      this.drillDownLoading = true;
-
-      // 构建查询参数
-      const params = {
-        ...this.drillDownQueryParams,
-        itemType: this.drillDownParams.itemType,
-        itemId: this.drillDownParams.itemId,
-        warehouseId: this.drillDownParams.warehouseId
-      };
-
-      // 调用API获取数据
-      listMaterialCoil(params).then(res => {
-        this.drillDownList = res.rows || [];
-        this.drillDownTotal = res.total || 0;
-        this.drillDownLoading = false;
-      }).catch(error => {
-        console.error('获取钻取数据失败:', error);
-        this.drillDownLoading = false;
-        this.$message.error('获取明细数据失败');
-      });
-    },
-
-    // 处理钻取分页大小变化
-    handleDrillDownSizeChange(val) {
-      this.drillDownQueryParams.pageSize = val;
-      this.getDrillDownList();
-    },
-
-    // 处理钻取当前页变化
-    handleDrillDownCurrentChange(val) {
-      this.drillDownQueryParams.pageNum = val;
-      this.getDrillDownList();
-    },
-
-    // 格式化卷材状态
-    formatCoilStatus(status) {
-      const statusMap = {
-        'IN_STOCK': '在库',
-        'OUT_STOCK': '出库',
-        'TRANSFERING': '转移中',
-        'MAINTAINING': '维护中'
-      };
-      return statusMap[status] || '未知';
-    },
-
-    // 获取卷材状态标签类型
-    getCoilStatusTagType(status) {
-      const typeMap = {
-        'IN_STOCK': 'success',
-        'OUT_STOCK': 'info',
-        'TRANSFERING': 'warning',
-        'MAINTAINING': 'danger'
-      };
-      return typeMap[status] || 'default';
-    }
-  }
-}
-</script>
-
-<style scoped>
-.statistics-container {
-  padding: 20px;
-  background-color: #fafafa;
-}
-
-.charts-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.chart-item {
-  flex: 1;
-  min-width: 300px;
-  background: #fff;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.chart-box {
-  width: 100%;
-  height: 300px;
-}
-
-.table-container {
-  margin-top: 20px;
-  background: #fff;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-h3 {
-  margin: 0 0 15px 0;
-  font-size: 16px;
-  color: #1D2129;
-  font-weight: 500;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-/* 表格行悬停效果 */
-.table-row-hover:hover {
-  background-color: #f5f7fa;
-  cursor: pointer;
-}
-
-/* 钻取弹窗样式 */
-.drill-down-content {
-  padding: 10px 0;
-}
-
-.drill-down-header {
-  margin-bottom: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.drill-down-header .el-tag {
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
-
-.pagination-container {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-/* 骨架屏样式 */
-.demo-skeleton {
-  padding: 20px 0;
-}
-
-/* 汇总区域样式 */
-.summary-container {
-  background: #fff;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  margin-top: 20px;
-}
-
-.summary-descriptions {
-  margin-top: 10px;
-}
-
-.el-descriptions-item__content {
-  font-weight: 500;
-  color: #165DFF;
-  /* 科技蓝强调汇总数据 */
-}
-</style>
diff --git a/klp-ui/src/views/wms/delivery/report/charts/bar.vue b/klp-ui/src/views/wms/delivery/report/charts/bar.vue
new file mode 100644
index 00000000..37c5a54c
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/report/charts/bar.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="category-bar-chart-container" style="position: relative;">
+    <!-- 维度筛选下拉框 - 选择要汇总的维度 -->
+    <div class="chart-select" style="position: absolute; top: 10px; right: 10px; z-index: 10; text-align: right;">
+      <select v-model="selectedType" @change="renderChart">
+        <option value="itemName">按物料名称汇总</option>
+        <option value="specification">按规格汇总</option>
+        <option value="material">按材质汇总</option>
+        <option value="manufacturer">按厂家汇总</option>
+      </select>
+    </div>
+    <!-- 柱状图容器 -->
+    <div class="chart-content" ref="chartRef"></div>
+  </div>
+</template>
+
+<script>
+// 引入ECharts，全局引入的项目可删除该行
+import * as echarts from 'echarts'
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chartInstance: null, // ECharts实例
+      selectedType: 'itemName', // 默认选中：按物料名称汇总
+      // 维度名称映射 - 用于图表标题/提示框展示
+      typeLabel: {
+        itemName: '物料名称',
+        specification: '规格',
+        material: '材质',
+        manufacturer: '厂家'
+      }
+    }
+  },
+  watch: {
+    // 监听数据源变化，深度监听，数据更新重新渲染
+    data: {
+      deep: true,
+      handler() {
+        this.renderChart()
+      }
+    }
+  },
+  mounted() {
+    // 挂载后初始化图表
+    this.renderChart()
+    // 窗口大小变化，图表自适应
+    window.addEventListener('resize', this.resizeChart)
+  },
+  beforeDestroy() {
+    // 销毁资源，防止内存泄漏
+    window.removeEventListener('resize', this.resizeChart)
+    this.chartInstance && this.chartInstance.dispose()
+  },
+  methods: {
+    /**
+     * 核心处理方法：按选择的维度 + itemType自动匹配字段，汇总数据
+     * ✅ 核心规则：itemType=product → 取嵌套的product对象内的对应字段
+     * ✅ 其他itemType → 取根级的对应字段
+     */
+    formatChartData() {
+      const sourceData = this.data || []
+      if (sourceData.length === 0) return { xData: [], yData: [] }
+
+      // 分组汇总的核心对象
+      const countObj = {}
+      sourceData.forEach(item => {
+        if (!item) return
+        let targetValue = ''
+        const { itemType } = item
+        
+        // ✅ 核心判断：根据itemType决定取值来源
+        switch (this.selectedType) {
+          case 'itemName':
+            targetValue = itemType === 'product' 
+              ? (item.product?.productName || item.product?.name || '无名称') 
+              : (item.itemName || '无名称')
+            break
+          case 'specification':
+            targetValue = itemType === 'product' 
+              ? (item.product?.specification || '无规格') 
+              : (item.specification || '无规格')
+            break
+          case 'material':
+            targetValue = itemType === 'product' 
+              ? (item.product?.material || '无材质') 
+              : (item.material || '无材质')
+            break
+          case 'manufacturer':
+            targetValue = itemType === 'product' 
+              ? (item.product?.manufacturer || '无厂家') 
+              : (item.manufacturer || '无厂家')
+            break
+        }
+
+        // 空值统一处理为【无数据】，避免图表展示空字符串
+        const key = targetValue || '无数据'
+        countObj[key] = countObj[key] ? countObj[key] + 1 : 1
+      })
+
+      // 转为数组并按【数量倒序】排列，数量多的柱子在前，更直观
+      const sortArr = Object.entries(countObj).sort((a, b) => b[1] - a[1])
+      // 分离x轴类目 和 y轴数量
+      const xData = sortArr.map(item => item[0])
+      const yData = sortArr.map(item => item[1])
+
+      return { xData, yData }
+    },
+
+    // 初始化渲染柱状图
+    renderChart() {
+      const { xData, yData } = this.formatChartData()
+      const chartDom = this.$refs.chartRef
+      if (!chartDom) return
+
+      // 初始化ECharts实例
+      this.chartInstance = echarts.init(chartDom)
+      const option = {
+        grid: { left: '8%', right: '8%', bottom: '8%', top: '8%' },
+        // 图表标题，根据选中维度动态变化
+        title: {
+          text: `${this.typeLabel[this.selectedType]} 数据汇总`,
+          left: 'center',
+          textStyle: { fontSize: 16 }
+        },
+        // 悬浮提示框
+        tooltip: {
+          trigger: 'axis',
+          formatter: `{b}<br/>数量：{c} 条`,
+          axisPointer: { type: 'shadow' }
+        },
+        // x轴：类目轴（名称/规格/材质/厂家）
+        xAxis: [
+          {
+            type: 'category',
+            data: xData,
+            axisLabel: {
+              rotate: 30, // 文字旋转，防止类目名称过长重叠
+              fontSize: 12,
+              overflow: 'truncate'
+            },
+            axisTick: { alignWithLabel: true }
+          }
+        ],
+        // y轴：数量轴，最小值为0
+        yAxis: [
+          {
+            type: 'value',
+            name: '数据数量',
+            min: 0,
+            axisLabel: { formatter: '{value}' }
+          }
+        ],
+        // 柱状图核心配置
+        series: [
+          {
+            name: '数据数量',
+            type: 'bar',
+            barWidth: '60%', // 柱子宽度
+            data: yData,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#0088ff' },
+                { offset: 1, color: '#0055bb' }
+              ])
+            },
+            // 柱子上显示具体数值
+            label: {
+              show: true,
+              position: 'top',
+              fontSize: 12
+            }
+          }
+        ]
+      }
+
+      // 设置配置项渲染
+      this.chartInstance.setOption(option, true)
+    },
+
+    // 窗口大小变化，图表自适应
+    resizeChart() {
+      this.chartInstance && this.chartInstance.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 外层容器样式 */
+.category-bar-chart-container {
+  width: 100%;
+  height: 550px;
+}
+/* 筛选下拉框样式 */
+.chart-select {
+  width: 100%;
+  padding: 8px 0;
+  text-align: center;
+}
+.chart-select select {
+  padding: 6px 12px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #dcdcdc;
+  cursor: pointer;
+}
+/* 图表容器样式 */
+.chart-content {
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/delivery/report/charts/line.vue b/klp-ui/src/views/wms/delivery/report/charts/line.vue
new file mode 100644
index 00000000..a771246b
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/report/charts/line.vue
@@ -0,0 +1,204 @@
+<template>
+  <!-- 折线图容器，必须设置宽高，ref用于挂载ECharts实例 -->
+  <div class="export-time-line-chart" ref="chartRef"></div>
+</template>
+
+<script>
+// 引入ECharts核心，项目如果全局引入了ECharts可删除此行
+import * as echarts from 'echarts'
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chartInstance: null, // 保存ECharts实例，防止重复创建
+    }
+  },
+  watch: {
+    // 监听数据变化，数据更新时重新渲染图表
+    data: {
+      deep: true,
+      handler() {
+        this.renderChart()
+      }
+    }
+  },
+  mounted() {
+    // 组件挂载后初始化图表
+    this.renderChart()
+    // 监听窗口大小变化，图表自适应
+    window.addEventListener('resize', this.resizeChart)
+  },
+  beforeDestroy() {
+    // 销毁前释放资源，防止内存泄漏
+    window.removeEventListener('resize', this.resizeChart)
+    this.chartInstance && this.chartInstance.dispose()
+  },
+  methods: {
+    /**
+     * 核心方法：处理原始数据，按exportTime分组汇总 + 智能分组粒度
+     * 根据数据的时间跨度 自动决定分组方式：分钟/小时/天，完美匹配你的需求
+     */
+    formatChartData() {
+      const sourceData = this.data || []
+      // 1. 边界处理：无数据直接返回空结构
+      if (sourceData.length === 0) {
+        return { xAxisData: [], seriesData: [] }
+      }
+
+      // 2. 过滤有效数据 + 提取exportTime并转成Date对象，过滤无exportTime的脏数据
+      const validData = sourceData.filter(item => item.exportTime)
+      if (validData.length === 0) {
+        return { xAxisData: [], seriesData: [] }
+      }
+
+      // 3. 提取所有时间戳 + 获取【时间范围】：最早时间、最晚时间
+      const timeList = validData.map(item => {
+        return {
+          time: new Date(item.exportTime),
+          originItem: item
+        }
+      })
+      const minTime = new Date(Math.min(...timeList.map(item => item.time.getTime()))) // 最早导出时间
+      const maxTime = new Date(Math.max(...timeList.map(item => item.time.getTime()))) // 最晚导出时间
+      const timeDiff = maxTime.getTime() - minTime.getTime() // 时间跨度(毫秒)
+
+      // 4. ✅ 核心逻辑：根据时间跨度 智能决定分组粒度 + 分组格式
+      let groupFormat = '' // 分组格式化规则
+      let groupFn = null    // 分组匹配函数
+
+      const oneHour = 60 * 60 * 1000        // 1小时毫秒数
+      const oneDay = 24 * oneHour           // 1天毫秒数
+      const threeDay = 3 * oneDay           // 3天毫秒数
+      const sevenDay = 7 * oneDay           // 7天毫秒数
+
+      // 🔸 时间跨度 < 1小时 → 按【分钟】分组 (粒度:5分钟/组，分组数量自动适配)
+      if (timeDiff < oneHour) {
+        groupFormat = 'yyyy-MM-dd HH:mm'
+        groupFn = (date) => `${date.getFullYear()}-${this.addZero(date.getMonth()+1)}-${this.addZero(date.getDate())} ${this.addZero(date.getHours())}:${this.addZero(Math.floor(date.getMinutes()/5)*5)}`
+      }
+      // 🔸 1小时 ≤ 跨度 < 1天 → 按【小时】分组 (粒度:1小时/组)
+      else if (timeDiff >= oneHour && timeDiff < oneDay) {
+        groupFormat = 'yyyy-MM-dd HH:00'
+        groupFn = (date) => `${date.getFullYear()}-${this.addZero(date.getMonth()+1)}-${this.addZero(date.getDate())} ${this.addZero(date.getHours())}:00`
+      }
+      // 🔸 1天 ≤ 跨度 < 7天 → 按【自然日】分组 (粒度:1天/组)
+      else if (timeDiff >= oneDay && timeDiff < sevenDay) {
+        groupFormat = 'yyyy-MM-dd'
+        groupFn = (date) => `${date.getFullYear()}-${this.addZero(date.getMonth()+1)}-${this.addZero(date.getDate())}`
+      }
+      // 🔸 时间跨度 ≥7天 → 按【日期】分组，粒度自动放宽，分组数量控制在10-20组内
+      else {
+        groupFormat = 'yyyy-MM-dd'
+        groupFn = (date) => `${date.getFullYear()}-${this.addZero(date.getMonth()+1)}-${this.addZero(date.getDate())}`
+      }
+
+      // 5. 按规则分组汇总数据，默认汇总：每组的【数据条数】
+      const groupObj = {}
+      timeList.forEach(item => {
+        const groupKey = groupFn(item.time)
+        if (!groupObj[groupKey]) {
+          groupObj[groupKey] = 0
+        }
+        groupObj[groupKey] += 1 // 【核心汇总】统计每组数量，如需汇总净重可修改此行
+      })
+
+      // 6. 对分组后的时间排序（正序），保证折线图时间轴正确
+      const xAxisData = Object.keys(groupObj).sort((a, b) => new Date(a) - new Date(b))
+      const seriesData = xAxisData.map(key => groupObj[key])
+
+      return { xAxisData, seriesData }
+    },
+
+    // 补零工具函数：格式化 月/日/时/分 为 两位数（如：01、09）
+    addZero(num) {
+      return num < 10 ? `0${num}` : num
+    },
+
+    // 初始化并渲染折线图
+    renderChart() {
+      const { xAxisData, seriesData } = this.formatChartData()
+      const chartDom = this.$refs.chartRef
+      if (!chartDom) return
+
+      // 初始化ECharts实例
+      this.chartInstance = echarts.init(chartDom)
+      const option = {
+        // 图表内边距，优化视觉
+        grid: { left: '8%', right: '8%', bottom: '8%', top: '8%' },
+        // 标题
+        title: {
+          text: '时间趋势',
+          left: 'center',
+          textStyle: { fontSize: 16 }
+        },
+        // 提示框：hover显示详情
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{b}<br/>数据量：{c} 条',
+          axisPointer: { type: 'shadow' }
+        },
+        // 图例
+        // legend: { data: ['数据条数'], left: 'left' },
+        // x轴：时间轴
+        xAxis: {
+          type: 'category',
+          data: xAxisData,
+          // axisLabel: {
+          //   rotate: 30, // 时间文字旋转30度，防止重叠
+          //   fontSize: 12
+          // },
+          boundaryGap: false // 折线图紧贴坐标轴
+        },
+        // y轴：数量轴，必须是正数
+        yAxis: {
+          type: 'value',
+          name: '数据条数',
+          min: 0,
+          axisLabel: { formatter: '{value}' }
+        },
+        // 折线图核心数据
+        series: [
+          {
+            name: '数据条数',
+            type: 'line',
+            data: seriesData,
+            smooth: true, // 平滑折线，美观
+            symbol: 'circle', // 拐点显示圆点
+            symbolSize: 6, // 拐点大小
+            lineStyle: { width: 2 }, // 线条宽度
+            itemStyle: { color: '#1677ff' }, // 折线/拐点颜色
+            areaStyle: { // 折线下方渐变背景，增强视觉效果
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(22, 119, 255, 0.3)' },
+                { offset: 1, color: 'rgba(22, 119, 255, 0)' }
+              ])
+            }
+          }
+        ]
+      }
+
+      // 设置配置项并渲染
+      this.chartInstance.setOption(option)
+    },
+
+    // 窗口大小变化时，图表自适应
+    resizeChart() {
+      this.chartInstance && this.chartInstance.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 图表容器必须设置宽高，否则图表无法显示 */
+.export-time-line-chart {
+  width: 100%;
+  height: 500px;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/delivery/report/index.vue b/klp-ui/src/views/wms/delivery/report/index.vue
index b247e723..4ce8fd1d 100644
--- a/klp-ui/src/views/wms/delivery/report/index.vue
+++ b/klp-ui/src/views/wms/delivery/report/index.vue
@@ -1,220 +1,204 @@
 <template>
-  <div class="delivery-report" v-loading="loading">
-    <!-- 时间筛选 -->
-    <div class="filter-container">
-      <el-date-picker
-        v-model="dateRange"
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        value-format="yyyy-MM-dd"
-        :default-time="['00:00:00', '23:59:59']"
-        @change="handleDateChange"
-      />
-      <el-button type="primary" @click="getReport">查询</el-button>
-      <el-button @click="resetDate">重置</el-button>
-    </div>
+  <div class="app-container" v-loading="loading">
+    <el-row>
+      <el-form label-width="80px" inline>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeStart" type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeEnd" type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="入场钢卷号" prop="endTime">
+          <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="endTime">
+          <el-input style="width: 200px;" v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="逻辑库位" prop="endTime">
+          <warehouse-select v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位"
+            style="width: 100%; display: inline-block; width: 200px;" clearable />
+        </el-form-item>
+        <el-form-item label="产品名称" prop="endTime">
+          <el-input style="width: 200px;" v-model="queryParams.itemName" placeholder="请输入产品名称" clearable
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="规格" prop="endTime">
+          <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="endTime">
+          <muti-select style="width: 200px;" v-model="queryParams.itemMaterial" :options="dict.type.coil_material"
+            placeholder="请选择材质" clearable @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="厂家" prop="endTime">
+          <muti-select style="width: 200px;" v-model="queryParams.itemManufacturer"
+            :options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item prop="endTime">
+          <el-button type="primary" @click="getList">查询</el-button>
+          <el-button type="primary" @click="exportData">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
 
-    <!-- 汇总信息 -->
-    <el-card class="summary-card" v-if="summary">
-      <template #header>
-        <div class="card-header">
-          <span>发货报表汇总</span>
-        </div>
-      </template>
-      <el-descriptions :column="3" border>
-        <el-descriptions-item label="总运单数">{{ summary.waybillCount || 0 }}</el-descriptions-item>
-        <el-descriptions-item label="总卷数">{{ summary.coilCount || 0 }}</el-descriptions-item>
-        <el-descriptions-item label="总重量(吨)">{{ formatWeight(summary.totalWeight) }}</el-descriptions-item>
-        <el-descriptions-item label="日均运单数">{{ formatDailyValue(summary.dailyWaybillCount) }}</el-descriptions-item>
-        <el-descriptions-item label="日均卷数">{{ formatDailyValue(summary.dailyCoilCount) }}</el-descriptions-item>
-        <el-descriptions-item label="日均重量(吨)">{{ formatWeight(summary.dailyWeight) }}</el-descriptions-item>
-        <el-descriptions-item label="开始时间" :span="2">{{ summary.startTime || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="结束时间" :span="2">{{ summary.endTime || '-' }}</el-descriptions-item>
-      </el-descriptions>
-    </el-card>
+    <el-descriptions title="统计信息" :column="3" border>
+      <el-descriptions-item label="总钢卷数量">{{ summary.totalCount }}</el-descriptions-item>
+      <el-descriptions-item label="总重">{{ summary.totalWeight }}t</el-descriptions-item>
+      <el-descriptions-item label="均重">{{ summary.avgWeight }}t</el-descriptions-item>
+    </el-descriptions>
 
-    <!-- 详细数据表格 -->
-    <el-card class="table-card" v-if="details && details.length > 0">
-      <template #header>
-        <div class="card-header">
-          <span>产品发货明细</span>
-          <span>共 {{ details.length }} 种产品</span>
-        </div>
-      </template>
-      <el-table
-        :data="details"
-        style="width: 100%"
-        stripe
-        v-loading="loading"
-      >
-        <el-table-column prop="productName" label="产品名称" min-width="120" fixed="left" />
-        <!-- <el-table-column prop="waybillCount" label="运单数量" min-width="100" align="center">
-          <template #default="{ row }">
-            <span>{{ row.waybillCount || 0 }}</span>
-          </template>
-        </el-table-column> -->
-        <el-table-column prop="coilCount" label="卷数" min-width="100" align="center">
-          <template #default="{ row }">
-            <span>{{ row.coilCount || 0 }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="totalWeight" label="总重量(吨)" min-width="120" align="right">
-          <template #default="{ row }">
-            <span>{{ formatWeight(row.totalWeight) }}</span>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column prop="dailyWaybillCount" label="日均运单数" min-width="120" align="right">
-          <template #default="{ row }">
-            <span>{{ formatDailyValue(row.dailyWaybillCount) }}</span>
-          </template>
-        </el-table-column> -->
-        <el-table-column prop="dailyCoilCount" label="日均卷数" min-width="120" align="right">
-          <template #default="{ row }">
-            <span>{{ formatDailyValue(row.dailyCoilCount) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="dailyWeight" label="日均重量(吨)" min-width="120" align="right">
-          <template #default="{ row }">
-            <span>{{ formatWeight(row.dailyWeight) }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
+    <el-row :gutter="20" style="margin-top: 20px; margin-bottom: 20px;">
+      <el-col :span="12">
+        <line-chart :data="list"></line-chart>
+      </el-col>
+      <el-col :span="12">
+        <bar-chart :data="list"></bar-chart>
+      </el-col>
+    </el-row>
 
-    <!-- 空状态 -->
-    <el-card v-else-if="!loading">
-      <el-empty description="暂无数据" />
-    </el-card>
+    <el-descriptions title="明细信息" :column="3" border>
+    </el-descriptions>
+    <el-table :data="list" border height="calc(100vh - 320px)">
+      <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
+        <template slot-scope="scope">
+          <coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
+        </template>
+      </el-table-column>
+      <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
+        <template slot-scope="scope">
+          <coil-no :coil-no="scope.row.currentCoilNo"></coil-no>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <el-table-column label="逻辑库位" align="center" prop="warehouseName" />
+      <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
+      <el-table-column label="产品类型" align="center" width="250">
+        <template slot-scope="scope">
+          <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
+          <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
+        </template>
+      </el-table-column>
+      <el-table-column label="重量 (吨)" align="center" prop="netWeight" />
+      <el-table-column label="长度 (米)" align="center" prop="length" />
+      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+      <el-table-column label="发货时间" align="center" prop="exportTime" />
+      <el-table-column label="出库状态" align="center" prop="status">
+        <!-- 0在库，1已出库 -->
+        <template slot-scope="scope">
+          {{ scope.row.status === 0 ? '在库' : '已出库' }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="更新人" align="center" prop="updateByName" />
+      <el-table-column label="更新时间" align="center" prop="updateTime" />
+    </el-table>
   </div>
 </template>
 
 <script>
-import { getDeliveryReport } from '@/api/wms/deliveryPlan'
+import { listCoilWithIds } from "@/api/wms/coil";
+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 BarChart from "./charts/bar.vue";
+import LineChart from "./charts/line.vue";
 
 export default {
-  name: 'DeliveryReport',
+  components: {
+    ProductInfo,
+    RawMaterialInfo,
+    CoilNo,
+    MemoInput,
+    MutiSelect,
+    WarehouseSelect,
+    BarChart,
+    LineChart,
+  },
+  dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
   data() {
+    // 工具函数：个位数补零，保证格式统一（比如 9 → 09，5 → 05）
+    const addZero = (num) => num.toString().padStart(2, '0')
+
+    const now = new Date() // 当前本地北京时间
+    // 核心：获取【昨天】的日期对象（自动处理跨月/跨年，无边界问题）
+    const yesterday = new Date(now)
+    yesterday.setDate(yesterday.getDate() - 1)
+
+    // 昨天的年、月、日（补零格式化）
+    const yesYear = yesterday.getFullYear()
+    const yesMonth = addZero(yesterday.getMonth() + 1)
+    const yesDay = addZero(yesterday.getDate())
+
+    // 今天的年、月、日（补零格式化）
+    const nowYear = now.getFullYear()
+    const nowMonth = addZero(now.getMonth() + 1)
+    const nowDay = addZero(now.getDate())
+
+    // ✅ 目标时间区间：昨天早上6点 至 今天早上6点
+    const startTime = `${yesYear}-${yesMonth}-${yesDay} 06:00:00`
+    const endTime = `${nowYear}-${nowMonth}-${nowDay} 06:00:00`
     return {
-      summary: null,
-      details: [],
-      dateRange: [],
-      loading: false
+      list: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 9999,
+        status: 1,
+        byExportTimeStart: startTime,
+        byExportTimeEnd: endTime,
+        selectType: 'product',
+        enterCoilNo: '',
+        currentCoilNo: '',
+        warehouseId: '',
+        productName: '',
+        itemSpecification: '',
+        itemMaterial: '',
+        itemManufacturer: '',
+      },
+      loading: false,
     }
   },
-  mounted() {
-    this.initDateRange()
-    this.getReport()
+  computed: {
+    summary() {
+      // 总钢卷数量、总重、均重
+      const totalCount = this.list.length
+      const totalWeight = this.list.reduce((acc, cur) => acc + parseFloat(cur.netWeight), 0)
+      const avgWeight = totalCount > 0 ? (totalWeight / totalCount).toFixed(2) : 0
+      return {
+        totalCount,
+        totalWeight: totalWeight.toFixed(2),
+        avgWeight,
+      }
+    }
   },
   methods: {
-    // 初始化日期范围（当月）
-    initDateRange() {
-      const now = new Date()
-      const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
-      // const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
-      const today = new Date()
-      
-      this.dateRange = [
-        this.formatDate(firstDay),
-        this.formatDate(today)
-      ]
-    },
-
-    // 格式化日期为 YYYY-MM-dd
-    formatDate(date) {
-      const year = date.getFullYear()
-      const month = String(date.getMonth() + 1).padStart(2, '0')
-      const day = String(date.getDate()).padStart(2, '0')
-      return `${year}-${month}-${day}`
-    },
-
-    // 处理日期变化
-    handleDateChange() {
-      this.getReport()
-    },
-
-    // 重置日期
-    resetDate() {
-      this.initDateRange()
-      this.getReport()
-    },
-
-    // 获取报表数据
-    async getReport() {
-      if (!this.dateRange || this.dateRange.length !== 2) {
-        this.$message.warning('请选择日期范围')
-        return
-      }
-
+    getList() {
       this.loading = true
-      try {
-        const query = {
-          startTime: `${this.dateRange[0]} 00:00:00`,
-          endTime: `${this.dateRange[1]} 23:59:59`
-        }
-
-        const res = await getDeliveryReport(query)
-        this.summary = res.data?.summary || null
-        this.details = res.data?.details || []
-      } catch (error) {
-        console.error('获取发货报表失败:', error)
-        this.$message.error('获取数据失败')
-        this.summary = null
-        this.details = []
-      } finally {
+      listCoilWithIds({
+        ...this.queryParams
+      }).then(res => {
+        this.list = res.rows
         this.loading = false
-      }
+      })
     },
-
-    // 格式化重量显示
-    formatWeight(weight) {
-      if (!weight && weight !== 0) return '0.000'
-      const num = Number(weight)
-      return isNaN(num) ? '0.000' : num.toFixed(3)
+    // 导出
+    exportData() {
+      this.download('wms/materialCoil/export', {
+        coilIds: this.list.map(item => item.coilId).join(','),
+        status: 1
+      }, `materialCoil_${new Date().getTime()}.xlsx`)
     },
-
-    // 格式化日均值显示
-    formatDailyValue(value) {
-      if (!value && value !== 0) return '0.00'
-      const num = Number(value)
-      return isNaN(num) ? '0.00' : num.toFixed(2)
-    }
+  },
+  mounted() {
+    this.getList()
   }
 }
 </script>
 
-<style scoped>
-.delivery-report {
-  padding: 20px;
-}
-
-.filter-container {
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.summary-card {
-  margin-bottom: 20px;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.table-card {
-  margin-bottom: 20px;
-}
-
-:deep(.el-descriptions__label) {
-  font-weight: bold;
-}
-
-:deep(.el-descriptions__content) {
-  font-weight: normal;
-}
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/klp-ui/src/views/wms/delivery/report/index_snap.vue b/klp-ui/src/views/wms/delivery/report/index_snap.vue
new file mode 100644
index 00000000..b247e723
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/report/index_snap.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="delivery-report" v-loading="loading">
+    <!-- 时间筛选 -->
+    <div class="filter-container">
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        :default-time="['00:00:00', '23:59:59']"
+        @change="handleDateChange"
+      />
+      <el-button type="primary" @click="getReport">查询</el-button>
+      <el-button @click="resetDate">重置</el-button>
+    </div>
+
+    <!-- 汇总信息 -->
+    <el-card class="summary-card" v-if="summary">
+      <template #header>
+        <div class="card-header">
+          <span>发货报表汇总</span>
+        </div>
+      </template>
+      <el-descriptions :column="3" border>
+        <el-descriptions-item label="总运单数">{{ summary.waybillCount || 0 }}</el-descriptions-item>
+        <el-descriptions-item label="总卷数">{{ summary.coilCount || 0 }}</el-descriptions-item>
+        <el-descriptions-item label="总重量(吨)">{{ formatWeight(summary.totalWeight) }}</el-descriptions-item>
+        <el-descriptions-item label="日均运单数">{{ formatDailyValue(summary.dailyWaybillCount) }}</el-descriptions-item>
+        <el-descriptions-item label="日均卷数">{{ formatDailyValue(summary.dailyCoilCount) }}</el-descriptions-item>
+        <el-descriptions-item label="日均重量(吨)">{{ formatWeight(summary.dailyWeight) }}</el-descriptions-item>
+        <el-descriptions-item label="开始时间" :span="2">{{ summary.startTime || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="结束时间" :span="2">{{ summary.endTime || '-' }}</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <!-- 详细数据表格 -->
+    <el-card class="table-card" v-if="details && details.length > 0">
+      <template #header>
+        <div class="card-header">
+          <span>产品发货明细</span>
+          <span>共 {{ details.length }} 种产品</span>
+        </div>
+      </template>
+      <el-table
+        :data="details"
+        style="width: 100%"
+        stripe
+        v-loading="loading"
+      >
+        <el-table-column prop="productName" label="产品名称" min-width="120" fixed="left" />
+        <!-- <el-table-column prop="waybillCount" label="运单数量" min-width="100" align="center">
+          <template #default="{ row }">
+            <span>{{ row.waybillCount || 0 }}</span>
+          </template>
+        </el-table-column> -->
+        <el-table-column prop="coilCount" label="卷数" min-width="100" align="center">
+          <template #default="{ row }">
+            <span>{{ row.coilCount || 0 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="totalWeight" label="总重量(吨)" min-width="120" align="right">
+          <template #default="{ row }">
+            <span>{{ formatWeight(row.totalWeight) }}</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="dailyWaybillCount" label="日均运单数" min-width="120" align="right">
+          <template #default="{ row }">
+            <span>{{ formatDailyValue(row.dailyWaybillCount) }}</span>
+          </template>
+        </el-table-column> -->
+        <el-table-column prop="dailyCoilCount" label="日均卷数" min-width="120" align="right">
+          <template #default="{ row }">
+            <span>{{ formatDailyValue(row.dailyCoilCount) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="dailyWeight" label="日均重量(吨)" min-width="120" align="right">
+          <template #default="{ row }">
+            <span>{{ formatWeight(row.dailyWeight) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 空状态 -->
+    <el-card v-else-if="!loading">
+      <el-empty description="暂无数据" />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getDeliveryReport } from '@/api/wms/deliveryPlan'
+
+export default {
+  name: 'DeliveryReport',
+  data() {
+    return {
+      summary: null,
+      details: [],
+      dateRange: [],
+      loading: false
+    }
+  },
+  mounted() {
+    this.initDateRange()
+    this.getReport()
+  },
+  methods: {
+    // 初始化日期范围（当月）
+    initDateRange() {
+      const now = new Date()
+      const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
+      // const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
+      const today = new Date()
+      
+      this.dateRange = [
+        this.formatDate(firstDay),
+        this.formatDate(today)
+      ]
+    },
+
+    // 格式化日期为 YYYY-MM-dd
+    formatDate(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+
+    // 处理日期变化
+    handleDateChange() {
+      this.getReport()
+    },
+
+    // 重置日期
+    resetDate() {
+      this.initDateRange()
+      this.getReport()
+    },
+
+    // 获取报表数据
+    async getReport() {
+      if (!this.dateRange || this.dateRange.length !== 2) {
+        this.$message.warning('请选择日期范围')
+        return
+      }
+
+      this.loading = true
+      try {
+        const query = {
+          startTime: `${this.dateRange[0]} 00:00:00`,
+          endTime: `${this.dateRange[1]} 23:59:59`
+        }
+
+        const res = await getDeliveryReport(query)
+        this.summary = res.data?.summary || null
+        this.details = res.data?.details || []
+      } catch (error) {
+        console.error('获取发货报表失败:', error)
+        this.$message.error('获取数据失败')
+        this.summary = null
+        this.details = []
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 格式化重量显示
+    formatWeight(weight) {
+      if (!weight && weight !== 0) return '0.000'
+      const num = Number(weight)
+      return isNaN(num) ? '0.000' : num.toFixed(3)
+    },
+
+    // 格式化日均值显示
+    formatDailyValue(value) {
+      if (!value && value !== 0) return '0.00'
+      const num = Number(value)
+      return isNaN(num) ? '0.00' : num.toFixed(2)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delivery-report {
+  padding: 20px;
+}
+
+.filter-container {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.summary-card {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.table-card {
+  margin-bottom: 20px;
+}
+
+:deep(.el-descriptions__label) {
+  font-weight: bold;
+}
+
+:deep(.el-descriptions__content) {
+  font-weight: normal;
+}
+</style>
\ No newline at end of file