From 77f43fa3342c1dc17ffb9e840e1495c8cf9babad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Fri, 31 Oct 2025 15:07:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E6=96=B0=E5=A2=9E=E9=92=A2?=
 =?UTF-8?q?=E5=8D=B7=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86=E5=92=8C=E5=BA=93?=
 =?UTF-8?q?=E4=BD=8D=E6=9F=A5=E8=AF=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(warehouse): 将仓库相关术语统一修改为库位
style(warehouse): 优化库位管理界面表单布局
fix(warehouse): 修复树形组件数据展示问题

新增钢卷状态管理功能，支持在列表中直接修改状态
为钢卷管理添加库位查询条件，优化数据展示逻辑
统一将仓库相关术语修改为库位，保持系统一致性
移除部分无用代码和注释，优化界面布局
---
 .../KLPService/WarehouseTree/index.vue        |   2 +-
 klp-ui/src/views/wms/coil/box.vue             |   6 +-
 klp-ui/src/views/wms/coil/box2.vue            | 715 ++++++++++++++++++
 klp-ui/src/views/wms/coil/panels/base.vue     |  51 +-
 klp-ui/src/views/wms/coil/product.vue         |   5 +-
 klp-ui/src/views/wms/coil/rubbish.vue         |  25 +
 klp-ui/src/views/wms/stock/index.vue          |   9 +-
 klp-ui/src/views/wms/warehouse/index.vue      |  53 +-
 8 files changed, 812 insertions(+), 54 deletions(-)
 create mode 100644 klp-ui/src/views/wms/coil/box2.vue
 create mode 100644 klp-ui/src/views/wms/coil/rubbish.vue

diff --git a/klp-ui/src/components/KLPService/WarehouseTree/index.vue b/klp-ui/src/components/KLPService/WarehouseTree/index.vue
index 5a3b19cd..e91be586 100644
--- a/klp-ui/src/components/KLPService/WarehouseTree/index.vue
+++ b/klp-ui/src/components/KLPService/WarehouseTree/index.vue
@@ -38,7 +38,7 @@ export default {
   methods: {
     getWarehouseTree() {
       listWarehouse().then(response => {
-        this.treeData = this.handleTree(response.data, 'warehouseId', 'parentId');
+        this.treeData = [{ warehouseName: '全部', value: undefined },  ...this.handleTree(response.data, 'warehouseId', 'parentId')];
       });
     },
     handleTree(data, id, parentId) {
diff --git a/klp-ui/src/views/wms/coil/box.vue b/klp-ui/src/views/wms/coil/box.vue
index 5238d144..d5e0dfa8 100644
--- a/klp-ui/src/views/wms/coil/box.vue
+++ b/klp-ui/src/views/wms/coil/box.vue
@@ -2,12 +2,12 @@
   <div class="statistics-container" v-loading="loading">
     <!-- 统计方式选择 -->
     <el-form inline>
-      <el-form-item label="统计方式" prop="statType">
+      <!-- <el-form-item label="统计方式" prop="statType">
         <el-radio-group v-model="queryParams.statType" @change="getList">
           <el-radio label="1">物料</el-radio>
           <el-radio label="2">仓库</el-radio>
         </el-radio-group>
-      </el-form-item>
+      </el-form-item> -->
 
       <MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
     </el-form>
@@ -156,7 +156,7 @@ export default {
   data() {
     return {
       queryParams: {
-        statType: '1',
+        statType: '2',
         itemType: undefined,
         itemId: undefined,
       },
diff --git a/klp-ui/src/views/wms/coil/box2.vue b/klp-ui/src/views/wms/coil/box2.vue
new file mode 100644
index 00000000..5adb3fac
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/box2.vue
@@ -0,0 +1,715 @@
+<template>
+  <div class="statistics-container" v-loading="loading">
+    <!-- 统计方式选择 -->
+    <el-form inline>
+      <!-- <el-form-item label="统计方式" prop="statType">
+        <el-radio-group v-model="queryParams.statType" @change="getList">
+          <el-radio label="1">物料</el-radio>
+          <el-radio label="2">仓库</el-radio>
+        </el-radio-group>
+      </el-form-item> -->
+
+      <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="800" :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'" :productId="scope.row.itemId">
+              <template #default="{ product }">
+                {{ product.productName || '未知' }}({{ product.productCode || '无编码' }})
+              </template>
+            </ProductInfo>
+            <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :materialId="scope.row.itemId">
+              <template #default="{ material }">
+                {{ material.rawMaterialName || '未知' }}({{ material.rawMaterialCode || '无编码' }})
+              </template>
+            </RawMaterialInfo>
+          </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>
+
+      <!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取，获取汇总的数据详情，如果当前是物料统计，钻取将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 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'" :productId="scope.row.itemId">
+                    <template #default="{ product }">
+                      {{ product.productName || '未知' }}({{ product.productCode || '无编码' }})
+                    </template>
+                  </ProductInfo>
+                  <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :materialId="scope.row.itemId">
+                    <template #default="{ material }">
+                      {{ material.rawMaterialName || '未知' }}({{ material.rawMaterialCode || '无编码' }})
+                    </template>
+                  </RawMaterialInfo>
+                </template>
+              </el-table-column>
+              <el-table-column label="更新时间" align="center" prop="updateTime" />
+              <el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
+              <el-table-column prop="netWeight" label="净重(kg)" 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, getMaterialCoilDistributionByWarehouse } from "@/api/wms/coil";
+import { listMaterialCoil } 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";
+
+export default {
+  components: {
+    MaterialSelect,
+    RawMaterialInfo,
+    ProductInfo,
+  },
+  data() {
+    return {
+      queryParams: {
+        statType: '1',
+        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: '',
+      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: {
+    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) },
+            // children: [{
+            //   name: `卷数: ${item.coilCount}`,
+            //   value: item.coilCount,
+            //   itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
+            // }]
+          }))
+        };
+      } 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) },
+            // children: [{
+            //   name: `卷数: ${item.coilCount}`,
+            //   value: item.coilCount,
+            //   itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
+            // }]
+          }))
+        };
+      }
+
+      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: '',
+        dataType: 1
+      };
+
+      // 根据数据类型设置钻取参数
+      if (data.itemType && data.itemId) {
+        // 物料统计钻取
+        this.drillDownParams.itemType = data.itemType;
+        this.drillDownParams.itemId = data.itemId;
+        // 从store中获取物料名称
+        const item = findItemWithBom(data.itemType, data.itemId);
+        console.log('item', item, data);
+        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.dialogTitle = `仓库库存明细 - ${data.warehouseName}`;
+      }
+
+      // 重置分页并打开弹窗
+      this.drillDownQueryParams.pageNum = 1;
+      this.dialogVisible = true;
+      // 获取钻取数据
+      this.getDrillDownList();
+    },
+
+    // 处理表格行点击
+    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;
+}
+
+/* 图表项悬停效果增强 */
+:deep(.echarts-tooltip) {
+  border-radius: 6px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/panels/base.vue b/klp-ui/src/views/wms/coil/panels/base.vue
index 88000b39..c84e528c 100644
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -9,11 +9,14 @@
         <el-input v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
           @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="数据状态">
+      <!-- <el-form-item label="数据状态">
         <el-select v-model="queryParams.dataType" placeholder="请选择数据状态" clearable>
           <el-option :value="0" label="历史数据">历史数据</el-option>
           <el-option :value="1" label="当前数据">当前数据</el-option>
         </el-select>
+      </el-form-item> -->
+      <el-form-item label="所在库位" prop="warehouseId" v-if="!hideWarehouseQuery">
+        <warehouse-select v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%; display: inline-block;" clearable />
       </el-form-item>
       <el-form-item label="厂家卷号" prop="supplierCoilNo">
         <el-input v-model="queryParams.supplierCoilNo" placeholder="请输入厂家原料卷号" clearable
@@ -52,7 +55,7 @@
       <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo" />
       <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo" />
       <el-table-column label="厂家卷号" align="center" prop="supplierCoilNo" />
-      <el-table-column label="仓库" align="center" prop="warehouseName" />
+      <el-table-column label="仓库" align="center" prop="warehouseName" v-if="!hideWarehouseQuery"/>
       <el-table-column label="物料类型" align="center" prop="itemType">
         <template slot-scope="scope">
           {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
@@ -72,27 +75,30 @@
           </RawMaterialInfo>
         </template>
       </el-table-column>
-      <el-table-column label="数据类型" align="center" prop="dataType">
+      <!-- <el-table-column label="数据类型" align="center" prop="dataType">
         <template slot-scope="scope">
           {{ scope.row.dataType == 0 ? '历史数据' : '当前数据' }}
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column label="更新时间" align="center" prop="updateTime" />
       <el-table-column label="二维码" v-if="qrcode">
         <template slot-scope="scope">
           <QRCode :content="scope.row.qrcodeRecordId" :size="50" />
         </template>
       </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.status" placeholder="请选择状态" @change="handleStatusChange(scope.row)">
+            <el-option v-for="item in dict.type.product_coil_status" :key="item.value" :value="parseInt(item.value)" :label="item.label" />
+          </el-select>
+        </template>
+      </el-table-column>
       <el-table-column label="班组" align="center" prop="team" />
       <el-table-column label="毛重" align="center" prop="grossWeight" />
       <el-table-column label="净重" align="center" prop="netWeight" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <!-- <el-button size="mini" type="text" icon="el-icon-download" @click="handleDownloadQRCode(scope.row)"
-            v-if="qrcode">
-            下载二维码
-          </el-button> -->
           <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreviewLabel(scope.row)">
             导出标签
           </el-button>
@@ -118,14 +124,14 @@
         <el-form-item v-if="!form.coilId" label="厂家原料卷号" prop="supplierCoilNo">
           <el-input v-model="form.supplierCoilNo" placeholder="请输入厂家原料卷号" />
         </el-form-item>
-        <el-form-item label="所在库区" prop="warehouseId">
+        <el-form-item label="所在库位" prop="warehouseId">
           <warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;" clearable />
         </el-form-item>
         <el-form-item label="班组" prop="team">
           <el-input v-model="form.team" placeholder="请输入班组" />
         </el-form-item>
         <el-form-item label="物料类型" prop="itemType">
-          <el-select v-model="form.itemType" placeholder="请选择库区" @change="form.itemId = undefined">
+          <el-select v-model="form.itemType" placeholder="请选择物料类型" @change="form.itemId = undefined">
             <el-option label="成品" value="product" />
             <el-option label="原料" value="raw_material" />
           </el-select>
@@ -135,7 +141,7 @@
             style="width: 100%;" clearable />
           <raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId" placeholder="请选择原料ID"
             style="width: 100%;" clearable />
-          <div v-else>请先选择产品类型</div>
+          <div v-else>请先选择物料类型</div>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
@@ -167,7 +173,7 @@
 
 <script>
 import { listMaterialCoil, getMaterialCoil, delMaterialCoil, addMaterialCoil, updateMaterialCoilSimple, getMaterialCoilTrace } from "@/api/wms/coil";
-import WarehouseSelect from "@/components/WarehouseSelect";
+import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
 import QRCode from "../../print/components/QRCode.vue";
 import * as XLSX from 'xlsx'
 import { saveAsImage } from '@/utils/klp';
@@ -196,6 +202,7 @@ export default {
     CoilTraceResult,
     LabelRender
   },
+  dicts: ['product_coil_status'],
   props: {
     qrcode: {
       type: Boolean,
@@ -208,6 +215,14 @@ export default {
     labelType: {
       type: String,
       default: '2'
+    },
+    hideWarehouseQuery: {
+      type: Boolean,
+      default: false,
+    },
+    showStatus: {
+      type: Boolean,
+      default: false,
     }
   },
   data() {
@@ -238,7 +253,6 @@ export default {
       traceResult: null,
       // 查询参数
       queryParams: {
-        ...this.querys,
         pageNum: 1,
         pageSize: 10,
         enterCoilNo: undefined,
@@ -253,6 +267,7 @@ export default {
         itemId: undefined,
         status: undefined,
         updateTime: undefined,
+        ...this.querys,
       },
       // 表单参数
       form: {},
@@ -297,6 +312,16 @@ export default {
         this.loading = false;
       });
     },
+    /** 状态改变时触发 */
+    handleStatusChange(row) {
+      updateMaterialCoilSimple(row).then(res => {
+        this.$message.success('状态更新成功');
+        this.getList(); // 刷新列表
+      }).catch(err => {
+        console.error('状态更新失败：', err);
+        this.$message.error('状态更新失败，请重试');
+      });
+    },
     /** 追溯按钮操作 */
     handleTrace(row) {
       this.traceOpen = true;
diff --git a/klp-ui/src/views/wms/coil/product.vue b/klp-ui/src/views/wms/coil/product.vue
index bbcf1367..bc9a8106 100644
--- a/klp-ui/src/views/wms/coil/product.vue
+++ b/klp-ui/src/views/wms/coil/product.vue
@@ -1,5 +1,5 @@
 <template>
-  <BasePage :qrcode="qrcode" :querys="querys" :labelType="labelType" />
+  <BasePage :qrcode="qrcode" :querys="querys" :labelType="labelType" :showStatus="showStatus" />
 </template>
 
 <script>
@@ -16,7 +16,8 @@ export default {
         itemType: 'product',
         // dataType: 0
       },
-      labelType: '3'
+      labelType: '3',
+      showStatus: true,
     }
   }
 }
diff --git a/klp-ui/src/views/wms/coil/rubbish.vue b/klp-ui/src/views/wms/coil/rubbish.vue
new file mode 100644
index 00000000..6fc832ae
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/rubbish.vue
@@ -0,0 +1,25 @@
+<template>
+  <BasePage :qrcode="qrcode" :querys="querys" :labelType="labelType" :hideWarehouseQuery="hideWarehouseQuery" />
+</template>
+
+<script>
+import BasePage from './panels/base.vue';
+
+export default {
+  components: {
+    BasePage
+  },
+  data() {
+    return {
+      qrcode: false,
+      querys: {
+        // itemType: 'rubbish',
+        // dataType: 2
+        warehouseId: 111,
+      },
+      hideWarehouseQuery: true,
+      labelType: '3'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/stock/index.vue b/klp-ui/src/views/wms/stock/index.vue
index 372714ea..ff733b45 100644
--- a/klp-ui/src/views/wms/stock/index.vue
+++ b/klp-ui/src/views/wms/stock/index.vue
@@ -23,11 +23,7 @@
         </el-form-item>
       </el-form>
 
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-
-      <KLPTable v-loading="loading" :data="stockList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="仓库" align="center" prop="warehouseName" />
+      <KLPTable v-loading="loading" :data="stockList">
         <el-table-column label="物料类型" align="center" prop="itemType">
           <template slot-scope="scope">
             <dict-tag :options="dict.type.stock_item_type" :value="scope.row.itemType" />
@@ -53,9 +49,6 @@
           </template> 
         </el-table-column>
         <el-table-column label="库存数量" align="center" prop="totalQuantity" />
-        <!-- <el-table-column label="在途数量" align="center" prop="onTheWay" /> -->
-        <!-- <el-table-column label="单位" align="center" prop="unit" /> -->
-        <!-- <el-table-column label="批次号" align="center" prop="batchNo" /> -->
         <el-table-column label="备注" align="center" prop="remark" />
         <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
diff --git a/klp-ui/src/views/wms/warehouse/index.vue b/klp-ui/src/views/wms/warehouse/index.vue
index 319b0e80..41076f09 100644
--- a/klp-ui/src/views/wms/warehouse/index.vue
+++ b/klp-ui/src/views/wms/warehouse/index.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="60px">
-      <el-form-item label="仓库编码" prop="warehouseCode">
+      <el-form-item label="库位编码" prop="warehouseCode">
         <el-input
           v-model="queryParams.warehouseCode"
-          placeholder="请输入仓库编码"
+          placeholder="请输入库位编码"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="仓库名称" prop="warehouseName">
+      <el-form-item label="库位名称" prop="warehouseName">
         <el-input
           v-model="queryParams.warehouseName"
-          placeholder="请输入仓库名称"
+          placeholder="请输入库位名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <!-- <el-form-item label="仓库类型" prop="warehouseType">
-        <el-select v-model="queryParams.warehouseType" placeholder="请选择仓库类型" clearable>
+      <!-- <el-form-item label="库位类型" prop="warehouseType">
+        <el-select v-model="queryParams.warehouseType" placeholder="请选择库位类型" clearable>
           <el-option
             v-for="dict in dict.type.warehouse_type"
             :key="dict.value"
@@ -47,7 +47,6 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-          
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -71,9 +70,9 @@
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
       <!-- <el-table-column label="上级节点" prop="parentId" /> -->
-      <el-table-column label="仓库编码" align="center" prop="warehouseCode" />
-      <el-table-column label="仓库名称" align="center" prop="warehouseName" />
-      <!-- <el-table-column label="仓库类型" align="center" prop="warehouseType">
+      <el-table-column label="库位编码" align="center" prop="warehouseCode" />
+      <el-table-column label="库位名称" align="center" prop="warehouseName" />
+      <!-- <el-table-column label="库位类型" align="center" prop="warehouseType">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.warehouse_type" :value="scope.row.warehouseType"/>
         </template>
@@ -109,20 +108,20 @@
       </el-table-column>
     </KLPTable>
 
-    <!-- 添加或修改仓库/库区/库位自关联对话框 -->
+    <!-- 添加或修改库位/库区/库位自关联对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="上级节点" prop="parentId">
           <WarehouseSelect v-model="form.parentId" placeholder="请选择上级节点" />
         </el-form-item>
-        <el-form-item label="仓库编码" prop="warehouseCode">
-          <el-input v-model="form.warehouseCode" placeholder="请输入仓库编码" />
+        <el-form-item label="库位编码" prop="warehouseCode">
+          <el-input v-model="form.warehouseCode" placeholder="请输入库位编码" />
         </el-form-item>
-        <el-form-item label="仓库名称" prop="warehouseName">
-          <el-input v-model="form.warehouseName" placeholder="请输入仓库名称" />
+        <el-form-item label="库位名称" prop="warehouseName">
+          <el-input v-model="form.warehouseName" placeholder="请输入库位名称" />
         </el-form-item>
-        <!-- <el-form-item label="仓库类型" prop="warehouseType">
-          <el-select v-model="form.warehouseType" placeholder="请选择仓库类型">
+        <!-- <el-form-item label="库位类型" prop="warehouseType">
+          <el-select v-model="form.warehouseType" placeholder="请选择库位类型">
             <el-option
               v-for="dict in dict.type.warehouse_type"
               :key="dict.value"
@@ -173,9 +172,9 @@ export default {
       loading: true,
       // 显示搜索条件
       showSearch: true,
-      // 仓库/库区/库位自关联表格数据
+      // 库位/库区/库位自关联表格数据
       warehouseList: [],
-      // 仓库/库区/库位自关联树选项
+      // 库位/库区/库位自关联树选项
       warehouseOptions: [],
       // 弹出层标题
       title: "",
@@ -199,10 +198,10 @@ export default {
       // 表单校验
       rules: {
         warehouseCode: [
-          { required: true, message: "仓库/库区编码不能为空", trigger: "blur" }
+          { required: true, message: "库位/库区编码不能为空", trigger: "blur" }
         ],
         warehouseName: [
-          { required: true, message: "仓库/库区名称不能为空", trigger: "blur" }
+          { required: true, message: "库位/库区名称不能为空", trigger: "blur" }
         ],
         warehouseType: [
           { required: true, message: "类型不能为空", trigger: "change" }
@@ -214,7 +213,7 @@ export default {
     this.getList();
   },
   methods: {
-    /** 查询仓库/库区/库位自关联列表 */
+    /** 查询库位/库区/库位自关联列表 */
     getList() {
       this.loading = true;
       listWarehouse(this.queryParams).then(response => {
@@ -233,7 +232,7 @@ export default {
         this.loading = false;
       });
     },
-    /** 转换仓库/库区/库位自关联数据结构 */
+    /** 转换库位/库区/库位自关联数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
         delete node.children;
@@ -244,7 +243,7 @@ export default {
         children: node.children
       };
     },
-	/** 查询仓库/库区/库位自关联下拉树结构 */
+	/** 查询库位/库区/库位自关联下拉树结构 */
     getTreeselect() {
       listWarehouse().then(response => {
         this.warehouseOptions = [];
@@ -296,7 +295,7 @@ export default {
         this.form.parentId = 0;
       }
       this.open = true;
-      this.title = "添加仓库/库区/库位自关联";
+      this.title = "添加库位/库区/库位自关联";
     },
     /** 展开/折叠操作 */
     toggleExpandAll() {
@@ -318,7 +317,7 @@ export default {
 	    this.loading = false;
         this.form = response.data;
         this.open = true;
-        this.title = "修改仓库/库区/库位自关联";
+        this.title = "修改库位/库区/库位自关联";
       });
     },
     /** 提交按钮 */
@@ -353,7 +352,7 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除仓库/库区/库位自关联编号为"' + row.warehouseId + '"的数据项？').then(() => {
+      this.$modal.confirm('是否确认删除库位/库区/库位自关联编号为"' + row.warehouseId + '"的数据项？').then(() => {
         this.loading = true;
         return delWarehouse(row.warehouseId);
       }).then(() => {