feat(wms): 新增库存统计模块并优化钢卷选择器逻辑

新增库存统计相关组件，包括物料汇总、仓库统计和树形统计视图，提供可视化数据展示和钻取功能。优化钢卷选择器显示逻辑，移除审核状态判断。调整钻取表格组件，支持实际仓库ID参数传递。

- 新增itemSummary.vue、warehouseBox.vue和warehouseTree.vue组件
- 移除钢卷选择器的审核状态条件判断
- 扩展钻取表格组件支持实际仓库ID参数
- 添加数据汇总展示和图表可视化功能

klp-ui/src/views/wms/coil/Inventory/itemSummary.vue

@@ -0,0 +1,431 @@
+<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>
+    </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>

klp-ui/src/views/wms/coil/Inventory/warehouseBox.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="statistics-container" v-loading="loading">
+    <!-- 统计方式选择 -->
+    <el-form inline>
+      <MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
+    </el-form>
+
+    <!-- 图表展示区域 -->
+    <div class="charts-container">
+      <!-- 矩形树图 -->
+      <div class="chart-item">
+        <h3>{{ queryParams.statType === '1' ? '物料库存分布矩形树图' : '仓库库存分布矩形树图' }}</h3>
+        <div ref="treeChart" class="chart-box"></div>
+      </div>
+
+      <!-- 柱状图 -->
+      <div class="chart-item">
+        <h3>{{ queryParams.statType === '1' ? '物料卷数对比柱状图' : '仓库卷数对比柱状图' }}</h3>
+        <div ref="barChart" class="chart-box"></div>
+      </div>
+
+      <!-- 饼图 -->
+      <div class="chart-item">
+        <h3>{{ queryParams.statType === '1' ? '物料库存占比饼图' : '仓库库存占比饼图' }}</h3>
+        <div ref="pieChart" class="chart-box"></div>
+      </div>
+    </div>
+
+    <!-- 数据表格 -->
+    <div class="table-container">
+      <el-table 
+        max-height="400" 
+        :data="list" 
+        border 
+        stripe 
+        style="width: 100%; margin-top: 20px" 
+        @row-click="handleTableRowClick"
+        row-class-name="table-row-hover"
+      >
+        <!-- 仓库相关列：仅仓库统计时有效 -->
+        <el-table-column 
+          v-if="queryParams.statType === '2'" 
+          prop="warehouseName" 
+          label="仓库名称" 
+          align="center"
+          min-width="150"
+        ></el-table-column>
+
+        <!-- 物料类型列：仅物料统计时有效 -->
+        <el-table-column 
+          v-if="queryParams.statType === '1'" 
+          prop="itemType" 
+          label="物料类型" 
+          align="center" 
+          min-width="120"
+          :formatter="formatItemType"
+        ></el-table-column>
+
+        <!-- 物料ID/名称列：仅物料统计时有效 -->
+        <el-table-column 
+          v-if="queryParams.statType === '1'" 
+          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="总毛重(kg)" align="center" min-width="120"></el-table-column>
+        <el-table-column prop="totalNetWeight" label="总净重(kg)" align="center" min-width="120"></el-table-column>
+      </el-table>
+
+      <!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取 -->
+      <el-dialog 
+        :title="dialogTitle" 
+        :visible.sync="dialogVisible" 
+        width="80%" 
+        :close-on-click-modal="false"
+      >
+        <!-- 使用封装的钻取表格组件 -->
+        <DrillDownTable 
+          :query-params="drillDownQueryParams" 
+          :item-name="drillDownParams.itemName"
+          :warehouse-name="drillDownParams.warehouseName"
+        />
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMaterialCoilDistributionByType, getMaterialCoilDistributionByWarehouse } from "@/api/wms/coil";
+import MaterialSelect from "@/components/KLPService/MaterialSelect";
+import * as echarts from 'echarts';
+import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
+import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
+import { findItemWithBom } from "@/store/modules/category";
+// 导入封装的钻取表格组件
+import DrillDownTable from '../panels/DrillDownTable.vue';
+
+export default {
+  components: {
+    MaterialSelect,
+    RawMaterialInfo,
+    ProductInfo,
+    DrillDownTable // 注册组件
+  },
+  data() {
+    return {
+      queryParams: {
+        statType: '2',
+        itemType: undefined,
+        itemId: undefined,
+      },
+      loading: false,
+      list: [],
+      // 科技风配色方案（蓝色系为主，体现科技感）
+      techColors: [
+        '#165DFF', // 主蓝色
+        '#36CFC9', // 青绿色
+        '#4080FF', // 中蓝色
+        '#0FC6C2', // 深青色
+        '#6AA1FF', // 浅蓝色
+        '#2BBEBA', // 浅青色
+        '#8CAAFF', // 极浅蓝色
+        '#08A8A5'  // 暗青色
+      ],
+      // 图表实例
+      treeChart: null,
+      barChart: null,
+      pieChart: null,
+      // 钻取相关数据
+      dialogVisible: false,
+      dialogTitle: '',
+      drillDownParams: {
+        itemType: null,
+        itemId: null,
+        itemName: '',
+        warehouseId: null,
+        warehouseName: '',
+      },
+      // 传给钻取表格组件的查询参数
+      drillDownQueryParams: {
+        warehouseId: null,
+        itemType: null,
+        itemId: null,
+      }
+    }
+  },
+  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: {
+    getList() {
+      this.loading = true;
+      if (this.queryParams.statType === '1') {
+        // 物料统计：仓库字段无效，以物料为核心
+        getMaterialCoilDistributionByType(this.queryParams).then(res => {
+          this.list = res.data || [];
+          this.updateCharts();
+          this.loading = false;
+        })
+      } else if (this.queryParams.statType === '2') {
+        // 仓库统计：物料字段无效，以仓库为核心
+        getMaterialCoilDistributionByWarehouse(this.queryParams).then(res => {
+          this.list = res.data || [];
+          this.updateCharts();
+          this.loading = false;
+        })
+      }
+    },
+
+    // 初始化图表
+    initCharts() {
+      this.treeChart = echarts.init(this.$refs.treeChart);
+      this.barChart = echarts.init(this.$refs.barChart);
+      this.pieChart = echarts.init(this.$refs.pieChart);
+      this.handleResize = () => {
+        this.treeChart.resize();
+        this.barChart.resize();
+        this.pieChart.resize();
+      };
+      window.addEventListener('resize', this.handleResize);
+    },
+
+    // 更新图表数据
+    updateCharts() {
+      this.updateTreeChart();
+      this.updateBarChart();
+      this.updatePieChart();
+    },
+
+    // 获取科技风颜色（循环使用配色方案）
+    getTechColor(index) {
+      return this.techColors[index % this.techColors.length];
+    },
+
+    // 更新矩形树图
+    updateTreeChart() {
+      let treeData;
+      if (this.queryParams.statType === '1') {
+        // 物料统计：一级为物料，二级为卷数信息
+        treeData = {
+          name: '物料库存总览',
+          children: this.list.map((item, index) => ({
+            name: this.getMaterialName(item), // 物料名称
+            value: item.coilCount,
+            itemType: item.itemType,
+            itemId: item.itemId,
+            itemStyle: { color: this.getTechColor(index) }
+          }))
+        };
+      } else {
+        // 仓库统计：一级为仓库，二级为卷数信息
+        treeData = {
+          name: '仓库库存总览',
+          children: this.list.map((item, index) => ({
+            name: item.warehouseName || '未知仓库',
+            value: item.coilCount,
+            warehouseId: item.warehouseId,
+            warehouseName: item.warehouseName,
+            itemStyle: { color: this.getTechColor(index) }
+          }))
+        };
+      }
+
+      this.treeChart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+          formatter: params => `${params.data.name}<br>卷数: ${params.data.value}`
+        },
+        series: [{
+          type: 'treemap',
+          data: [treeData],
+          roam: false,
+          label: {
+            show: true,
+            color: '#fff', // 文字白色更贴合科技风深色背景
+            fontWeight: 'bold'
+          },
+          emphasis: {
+            focus: 'descendant',
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            }
+          },
+          breadcrumb: {
+            show: true,
+            itemStyle: { color: '#666' }
+          },
+          // 添加点击事件，实现数据钻取
+          itemStyle: {
+            cursor: 'pointer'
+          },
+          select: {
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2,
+              shadowBlur: 10,
+              shadowColor: 'rgba(22, 93, 255, 0.5)'
+            }
+          }
+        }]
+      });
+
+      // 绑定点击事件
+      this.treeChart.off('click');
+      this.treeChart.on('click', params => {
+        // 确保点击的是一级节点而不是子节点
+        if (params.data.children && params.data.children.length > 0) {
+          this.handleChartItemClick(params.data);
+        }
+      });
+    },
+
+    // 更新柱状图
+    updateBarChart() {
+      let xAxisData, seriesData;
+      if (this.queryParams.statType === '1') {
+        // 物料统计：x轴为物料名称，为数据添加额外信息用于钻取
+        xAxisData = this.list.map(item => this.getMaterialName(item));
+        seriesData = this.list.map((item, index) => ({
+          value: item.coilCount,
+          itemType: item.itemType,
+          itemId: item.itemId
+        }));
+      } else {
+        // 仓库统计：x轴为仓库名称，为数据添加额外信息用于钻取
+        xAxisData = this.list.map(item => item.warehouseName || '未知仓库');
+        seriesData = this.list.map((item, index) => ({
+          value: item.coilCount,
+          warehouseId: item.warehouseId,
+          warehouseName: item.warehouseName
+        }));
+      }
+
+      this.barChart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          formatter: params => {
+            const data = params[0];
+            return `${data.name}<br/>卷数: ${data.value}`;
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: xAxisData,
+          axisLabel: { rotate: 30, color: '#666' },
+          axisLine: { lineStyle: { color: '#ddd' } }
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '卷数',
+          minInterval: 1,
+          axisLabel: { color: '#666' },
+          axisLine: { lineStyle: { color: '#ddd' } },
+          splitLine: { lineStyle: { color: '#f0f0f0' } }
+        }],
+        series: [{
+          name: '卷数',
+          type: 'bar',
+          data: seriesData,
+          itemStyle: {
+            // 柱状图使用渐变色增强科技感
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#165DFF' },
+              { offset: 1, color: '#6AA1FF' }
+            ]),
+            cursor: 'pointer'
+          },
+          emphasis: {
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#0E42D2' },
+                { offset: 1, color: '#4080FF' }
+              ])
+            }
+          }
+        }]
+      });
+
+      // 绑定点击事件
+      this.barChart.off('click');
+      this.barChart.on('click', params => {
+        this.handleChartItemClick(params.data);
+      });
+    },
+
+    // 更新饼图
+    updatePieChart() {
+      let pieData;
+      if (this.queryParams.statType === '1') {
+        // 物料统计：按物料分组，为数据添加额外信息用于钻取
+        pieData = this.list.map((item, index) => ({
+          name: this.getMaterialName(item),
+          value: item.coilCount,
+          itemType: item.itemType,
+          itemId: item.itemId,
+          itemStyle: { color: this.getTechColor(index) }
+        }));
+      } else {
+        // 仓库统计：按仓库分组，为数据添加额外信息用于钻取
+        pieData = this.list.map((item, index) => ({
+          name: item.warehouseName || '未知仓库',
+          value: item.coilCount,
+          warehouseId: item.warehouseId,
+          warehouseName: item.warehouseName,
+          itemStyle: { color: this.getTechColor(index) }
+        }));
+      }
+
+      this.pieChart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        // legend: {
+        //   orient: 'vertical',
+        //   left: 10,
+        //   data: pieData.map(item => item.name),
+        //   textStyle: { color: '#666' }
+        // },
+        series: [{
+          name: '库存分布',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 6,
+            borderColor: '#fff',
+            borderWidth: 2,
+            cursor: 'pointer',
+            // 饼图扇区添加光泽感
+            shadowBlur: 10,
+            shadowColor: 'rgba(22, 93, 255, 0.2)'
+          },
+          label: { show: false },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#165DFF'
+            },
+            itemStyle: {
+              shadowBlur: 15,
+              shadowColor: 'rgba(22, 93, 255, 0.5)'
+            }
+          },
+          labelLine: { show: false },
+          data: pieData
+        }]
+      });
+
+      // 绑定点击事件
+      this.pieChart.off('click');
+      this.pieChart.on('click', params => {
+        this.handleChartItemClick(params.data);
+      });
+    },
+
+    // 生成物料名称
+    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] || '未知';
+    },
+
+    // 处理图表项点击，实现数据钻取
+    handleChartItemClick(data) {
+      // 重置钻取参数
+      this.drillDownParams = {
+        itemType: null,
+        itemId: null,
+        itemName: '',
+        warehouseId: null,
+        warehouseName: '',
+      };
+
+      // 重置传给子组件的查询参数
+      this.drillDownQueryParams = {
+        warehouseId: null,
+        itemType: null,
+        itemId: null
+      };
+
+      // 根据数据类型设置钻取参数
+      if (data.itemType && data.itemId) {
+        // 物料统计钻取
+        this.drillDownParams.itemType = data.itemType;
+        this.drillDownParams.itemId = data.itemId;
+        this.drillDownQueryParams.itemType = data.itemType;
+        this.drillDownQueryParams.itemId = data.itemId;
+        
+        // 从store中获取物料名称
+        const item = findItemWithBom(data.itemType, data.itemId);
+        this.drillDownParams.itemName = item ? item.itemName : data.name;
+        this.dialogTitle = `${data.itemType === 'product' ? '成品' : '原材料'}库存明细 - ${this.drillDownParams.itemName}`;
+      } else if (data.warehouseId && data.warehouseName) {
+        // 仓库统计钻取
+        this.drillDownParams.warehouseId = data.warehouseId;
+        this.drillDownParams.warehouseName = data.warehouseName;
+        this.drillDownQueryParams.warehouseId = data.warehouseId;
+        
+        this.dialogTitle = `仓库库存明细 - ${data.warehouseName}`;
+      }
+
+      // 打开弹窗
+      this.dialogVisible = true;
+    },
+
+    // 处理表格行点击
+    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);
+    }
+  }
+}
+</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;
+}
+
+/* 图表项悬停效果增强 */
+:deep(.echarts-tooltip) {
+  border-radius: 6px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+</style>

klp-ui/src/views/wms/coil/Inventory/warehouseTree.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="statistics-container" v-loading="loading">
+    <!-- 统计方式选择 -->
+    <el-form inline>
+      <MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
+    </el-form>
+
+    <!-- 图表展示区域 -->
+    <div class="charts-container">
+      <!-- 矩形树图 -->
+      <div class="chart-item">
+        <h3>{{ queryParams.statType === '1' ? '物料库存分布矩形树图' : '仓库库存分布矩形树图' }}</h3>
+        <div ref="treeChart" class="chart-box"></div>
+      </div>
+
+      <!-- 柱状图 -->
+      <div class="chart-item">
+        <h3>{{ queryParams.statType === '1' ? '物料卷数对比柱状图' : '仓库卷数对比柱状图' }}</h3>
+        <div ref="barChart" class="chart-box"></div>
+      </div>
+
+      <!-- 饼图 -->
+      <div class="chart-item">
+        <h3>{{ queryParams.statType === '1' ? '物料库存占比饼图' : '仓库库存占比饼图' }}</h3>
+        <div ref="pieChart" class="chart-box"></div>
+      </div>
+    </div>
+
+    <!-- 数据表格 -->
+    <div class="table-container">
+      <el-table 
+        max-height="400" 
+        :data="list" 
+        border 
+        stripe 
+        style="width: 100%; margin-top: 20px" 
+        @row-click="handleTableRowClick"
+        row-class-name="table-row-hover"
+      >
+        <!-- 仓库相关列：仅仓库统计时有效 -->
+        <el-table-column 
+          v-if="queryParams.statType === '2'" 
+          prop="actualWarehouseName" 
+          label="仓库名称" 
+          align="center"
+          min-width="150"
+        ></el-table-column>
+
+        <!-- 物料类型列：仅物料统计时有效 -->
+        <el-table-column 
+          v-if="queryParams.statType === '1'" 
+          prop="itemType" 
+          label="物料类型" 
+          align="center" 
+          min-width="120"
+          :formatter="formatItemType"
+        ></el-table-column>
+
+        <!-- 物料ID/名称列：仅物料统计时有效 -->
+        <el-table-column 
+          v-if="queryParams.statType === '1'" 
+          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="总毛重(kg)" align="center" min-width="120"></el-table-column>
+        <el-table-column prop="totalNetWeight" label="总净重(kg)" align="center" min-width="120"></el-table-column>
+      </el-table>
+
+      <!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取 -->
+      <el-dialog 
+        :title="dialogTitle" 
+        :visible.sync="dialogVisible" 
+        width="80%" 
+        :close-on-click-modal="false"
+      >
+        <!-- 使用封装的钻取表格组件 -->
+        <DrillDownTable 
+          :query-params="drillDownQueryParams" 
+          :item-name="drillDownParams.itemName"
+          :warehouse-name="drillDownParams.actualWarehouseName"
+        />
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMaterialCoilDistributionByType, getMaterialCoilDistributionByActualWarehouse } from "@/api/wms/coil";
+import MaterialSelect from "@/components/KLPService/MaterialSelect";
+import * as echarts from 'echarts';
+import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
+import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
+import { findItemWithBom } from "@/store/modules/category";
+// 导入封装的钻取表格组件
+import DrillDownTable from '../panels/DrillDownTable.vue';
+
+export default {
+  components: {
+    MaterialSelect,
+    RawMaterialInfo,
+    ProductInfo,
+    DrillDownTable // 注册组件
+  },
+  data() {
+    return {
+      queryParams: {
+        statType: '2',
+        itemType: undefined,
+        itemId: undefined,
+      },
+      loading: false,
+      list: [],
+      // 科技风配色方案（蓝色系为主，体现科技感）
+      techColors: [
+        '#165DFF', // 主蓝色
+        '#36CFC9', // 青绿色
+        '#4080FF', // 中蓝色
+        '#0FC6C2', // 深青色
+        '#6AA1FF', // 浅蓝色
+        '#2BBEBA', // 浅青色
+        '#8CAAFF', // 极浅蓝色
+        '#08A8A5'  // 暗青色
+      ],
+      // 图表实例
+      treeChart: null,
+      barChart: null,
+      pieChart: null,
+      // 钻取相关数据
+      dialogVisible: false,
+      dialogTitle: '',
+      drillDownParams: {
+        itemType: null,
+        itemId: null,
+        itemName: '',
+        actualWarehouseId: null,
+        actualWarehouseName: '',
+      },
+      // 传给钻取表格组件的查询参数
+      drillDownQueryParams: {
+        actualWarehouseId: null,
+        itemType: null,
+        itemId: null
+      }
+    }
+  },
+  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: {
+    getList() {
+      this.loading = true;
+      if (this.queryParams.statType === '1') {
+        // 物料统计：仓库字段无效，以物料为核心
+        getMaterialCoilDistributionByType(this.queryParams).then(res => {
+          this.list = res.data || [];
+          this.updateCharts();
+          this.loading = false;
+        })
+      } else if (this.queryParams.statType === '2') {
+        // 仓库统计：物料字段无效，以仓库为核心
+        getMaterialCoilDistributionByActualWarehouse(this.queryParams).then(res => {
+          this.list = res.data || [];
+          this.updateCharts();
+          this.loading = false;
+        })
+      }
+    },
+
+    // 初始化图表
+    initCharts() {
+      this.treeChart = echarts.init(this.$refs.treeChart);
+      this.barChart = echarts.init(this.$refs.barChart);
+      this.pieChart = echarts.init(this.$refs.pieChart);
+      this.handleResize = () => {
+        this.treeChart.resize();
+        this.barChart.resize();
+        this.pieChart.resize();
+      };
+      window.addEventListener('resize', this.handleResize);
+    },
+
+    // 更新图表数据
+    updateCharts() {
+      this.updateTreeChart();
+      this.updateBarChart();
+      this.updatePieChart();
+    },
+
+    // 获取科技风颜色（循环使用配色方案）
+    getTechColor(index) {
+      return this.techColors[index % this.techColors.length];
+    },
+
+    // 更新矩形树图
+    updateTreeChart() {
+      let treeData;
+      if (this.queryParams.statType === '1') {
+        // 物料统计：一级为物料，二级为卷数信息
+        treeData = {
+          name: '物料库存总览',
+          children: this.list.map((item, index) => ({
+            name: this.getMaterialName(item), // 物料名称
+            value: item.coilCount,
+            itemType: item.itemType,
+            itemId: item.itemId,
+            itemStyle: { color: this.getTechColor(index) }
+          }))
+        };
+      } else {
+        // 仓库统计：一级为仓库，二级为卷数信息
+        treeData = {
+          name: '仓库库存总览',
+          children: this.list.map((item, index) => ({
+            name: item.actualWarehouseName || '未知仓库',
+            value: item.coilCount,
+            actualWarehouseId: item.actualWarehouseId,
+            actualWarehouseName: item.actualWarehouseName,
+            itemStyle: { color: this.getTechColor(index) }
+          }))
+        };
+      }
+
+      this.treeChart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+          formatter: params => `${params.data.name}<br>卷数: ${params.data.value}`
+        },
+        series: [{
+          type: 'treemap',
+          data: [treeData],
+          roam: false,
+          label: {
+            show: true,
+            color: '#fff', // 文字白色更贴合科技风深色背景
+            fontWeight: 'bold'
+          },
+          emphasis: {
+            focus: 'descendant',
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            }
+          },
+          breadcrumb: {
+            show: true,
+            itemStyle: { color: '#666' }
+          },
+          // 添加点击事件，实现数据钻取
+          itemStyle: {
+            cursor: 'pointer'
+          },
+          select: {
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2,
+              shadowBlur: 10,
+              shadowColor: 'rgba(22, 93, 255, 0.5)'
+            }
+          }
+        }]
+      });
+
+      // 绑定点击事件
+      this.treeChart.off('click');
+      this.treeChart.on('click', params => {
+        // 确保点击的是一级节点而不是子节点
+        if (params.data.children && params.data.children.length > 0) {
+          this.handleChartItemClick(params.data);
+        }
+      });
+    },
+
+    // 更新柱状图
+    updateBarChart() {
+      let xAxisData, seriesData;
+      if (this.queryParams.statType === '1') {
+        // 物料统计：x轴为物料名称，为数据添加额外信息用于钻取
+        xAxisData = this.list.map(item => this.getMaterialName(item));
+        seriesData = this.list.map((item, index) => ({
+          value: item.coilCount,
+          itemType: item.itemType,
+          itemId: item.itemId
+        }));
+      } else {
+        // 仓库统计：x轴为仓库名称，为数据添加额外信息用于钻取
+        xAxisData = this.list.map(item => item.actualWarehouseName || '未知仓库');
+        seriesData = this.list.map((item, index) => ({
+          value: item.coilCount,
+          actualWarehouseId: item.actualWarehouseId,
+          actualWarehouseName: item.actualWarehouseName
+        }));
+      }
+
+      this.barChart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          formatter: params => {
+            const data = params[0];
+            return `${data.name}<br/>卷数: ${data.value}`;
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: xAxisData,
+          axisLabel: { rotate: 30, color: '#666' },
+          axisLine: { lineStyle: { color: '#ddd' } }
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '卷数',
+          minInterval: 1,
+          axisLabel: { color: '#666' },
+          axisLine: { lineStyle: { color: '#ddd' } },
+          splitLine: { lineStyle: { color: '#f0f0f0' } }
+        }],
+        series: [{
+          name: '卷数',
+          type: 'bar',
+          data: seriesData,
+          itemStyle: {
+            // 柱状图使用渐变色增强科技感
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#165DFF' },
+              { offset: 1, color: '#6AA1FF' }
+            ]),
+            cursor: 'pointer'
+          },
+          emphasis: {
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#0E42D2' },
+                { offset: 1, color: '#4080FF' }
+              ])
+            }
+          }
+        }]
+      });
+
+      // 绑定点击事件
+      this.barChart.off('click');
+      this.barChart.on('click', params => {
+        this.handleChartItemClick(params.data);
+      });
+    },
+
+    // 更新饼图
+    updatePieChart() {
+      let pieData;
+      if (this.queryParams.statType === '1') {
+        // 物料统计：按物料分组，为数据添加额外信息用于钻取
+        pieData = this.list.map((item, index) => ({
+          name: this.getMaterialName(item),
+          value: item.coilCount,
+          itemType: item.itemType,
+          itemId: item.itemId,
+          itemStyle: { color: this.getTechColor(index) }
+        }));
+      } else {
+        // 仓库统计：按仓库分组，为数据添加额外信息用于钻取
+        pieData = this.list.map((item, index) => ({
+          name: item.actualWarehouseName || '未知仓库',
+          value: item.coilCount,
+          actualWarehouseId: item.actualWarehouseId,
+          actualWarehouseName: item.actualWarehouseName,
+          itemStyle: { color: this.getTechColor(index) }
+        }));
+      }
+
+      this.pieChart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        // legend: {
+        //   orient: 'vertical',
+        //   left: 10,
+        //   data: pieData.map(item => item.name),
+        //   textStyle: { color: '#666' }
+        // },
+        series: [{
+          name: '库存分布',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 6,
+            borderColor: '#fff',
+            borderWidth: 2,
+            cursor: 'pointer',
+            // 饼图扇区添加光泽感
+            shadowBlur: 10,
+            shadowColor: 'rgba(22, 93, 255, 0.2)'
+          },
+          label: { show: false },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#165DFF'
+            },
+            itemStyle: {
+              shadowBlur: 15,
+              shadowColor: 'rgba(22, 93, 255, 0.5)'
+            }
+          },
+          labelLine: { show: false },
+          data: pieData
+        }]
+      });
+
+      // 绑定点击事件
+      this.pieChart.off('click');
+      this.pieChart.on('click', params => {
+        this.handleChartItemClick(params.data);
+      });
+    },
+
+    // 生成物料名称
+    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] || '未知';
+    },
+
+    // 处理图表项点击，实现数据钻取
+    handleChartItemClick(data) {
+      // 重置钻取参数
+      this.drillDownParams = {
+        itemType: null,
+        itemId: null,
+        itemName: '',
+        actualWarehouseId: null,
+        actualWarehouseName: '',
+      };
+
+      // 重置传给子组件的查询参数
+      this.drillDownQueryParams = {
+        actualWarehouseId: null,
+        itemType: null,
+        itemId: null
+      };
+
+      // 根据数据类型设置钻取参数
+      if (data.itemType && data.itemId) {
+        // 物料统计钻取
+        this.drillDownParams.itemType = data.itemType;
+        this.drillDownParams.itemId = data.itemId;
+        this.drillDownQueryParams.itemType = data.itemType;
+        this.drillDownQueryParams.itemId = data.itemId;
+        
+        // 从store中获取物料名称
+        const item = findItemWithBom(data.itemType, data.itemId);
+        this.drillDownParams.itemName = item ? item.itemName : data.name;
+        this.dialogTitle = `${data.itemType === 'product' ? '成品' : '原材料'}库存明细 - ${this.drillDownParams.itemName}`;
+      } else if (data.actualWarehouseId && data.actualWarehouseName) {
+        // 仓库统计钻取
+        this.drillDownParams.actualWarehouseId = data.actualWarehouseId;
+        this.drillDownParams.actualWarehouseName = data.actualWarehouseName;
+        this.drillDownQueryParams.actualWarehouseId = data.actualWarehouseId;
+        
+        this.dialogTitle = `仓库库存明细 - ${data.actualWarehouseName}`;
+      }
+
+      // 打开弹窗
+      this.dialogVisible = true;
+    },
+
+    // 处理表格行点击
+    handleTableRowClick(row) {
+      // 构建点击数据对象
+      const clickData = {};
+
+      if (this.queryParams.statType === '1') {
+        // 物料统计
+        clickData.itemType = row.itemType;
+        clickData.itemId = row.itemId;
+        clickData.name = this.getMaterialName(row);
+      } else {
+        // 仓库统计
+        clickData.actualWarehouseId = row.actualWarehouseId;
+        clickData.actualWarehouseName = row.actualWarehouseName;
+      }
+
+      // 调用图表点击处理函数
+      this.handleChartItemClick(clickData);
+    }
+  }
+}
+</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;
+}
+
+/* 图表项悬停效果增强 */
+:deep(.echarts-tooltip) {
+  border-radius: 6px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+</style>

klp-ui/src/views/wms/coil/panels/DrillDownTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="drill-down-content">
     <!-- 钻取条件显示 -->
-    <div class="drill-down-header">
+    <!-- <div class="drill-down-header">
       <el-tag size="large" v-if="queryParams.itemType">
         {{ queryParams.itemType === 'product' ? '成品' : '原材料' }}
       </el-tag>
@@ -14,7 +14,7 @@
       <el-tag size="large" v-if="actualWarehouseName" type="info">
         {{ actualWarehouseName }}
       </el-tag>
-    </div>
+    </div> -->
 
     <!-- 加载状态 -->
     <el-skeleton :loading="loading" animated>
@@ -97,6 +97,7 @@ export default {
       type: Object,
       default: () => ({
         warehouseId: null,
+        actualWarehouseId: null,
         itemType: null,
         itemId: null,
         actualWarehouseId: null
@@ -153,7 +154,8 @@ export default {
         pageSize: this.pageSize,
         itemType: this.queryParams.itemType,
         itemId: this.queryParams.itemId,
-        warehouseId: this.queryParams.warehouseId
+        warehouseId: this.queryParams.warehouseId,
+        actualWarehouseId: this.queryParams.actualWarehouseId
       };
 
       // 调用API获取数据

klp-ui/src/views/wms/delivery/plan/index.vue

@@ -79,7 +79,7 @@
         </div>
 
         <div v-else>
-          <coil-selector v-if="currentPlan.auditStatus != 1" ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange"></coil-selector>
+          <coil-selector ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange"></coil-selector>
           <div v-if="selectedCoilList.length > 0 && currentPlan.planId">
             <el-table :data="selectedCoilList" highlight-current-row height="400px" style="width: 100%">
               <el-table-column type="index" width="50" align="center" label="序号" />