产品和原材料配置BOM

klp-ui/src/views/wms/stock/box.vue

@@ -1,18 +1,10 @@
-
 <template>
   <div>
-    <div class="chart-header">
-      <el-radio-group v-model="groupMode" @change="updateChart">
-        <el-radio-button label="warehouse">按仓库汇总</el-radio-button>
-        <el-radio-button label="item">按物品汇总</el-radio-button>
-      </el-radio-group>
-    </div>
-    <div ref="chartContainer" style="width: 100%; height: 600px;"></div>
+    <div ref="chartContainer" style="width: 100%; height: calc(100vh - 100px);"></div>
   </div>
 </template>
 
 <script>
-
 import * as echarts from 'echarts';
 import { listStock } from "@/api/wms/stock";
 import { listWarehouse } from "@/api/wms/warehouse";
@@ -24,7 +16,6 @@ export default {
       chart: null,
       stockData: [],
       warehouseData: [],
-      groupMode: 'warehouse', // 默认按仓库汇总
       warehouseTreeData: []
     };
   },
@@ -45,107 +36,85 @@ export default {
     },
     async loadData() {
       try {
-        // 并行加载仓库结构和库存数据
+        // 显示加载动画
+        this.chart.showLoading();
+        
         const [warehouseRes, stockRes] = await Promise.all([
           listWarehouse(),
           listStock({ pageNum: 1, pageSize: 9999 })
         ]);
         
+        // 隐藏加载动画
+        this.chart.hideLoading();
+        
+        // 处理树结构
         this.warehouseTreeData = this.handleTree(warehouseRes.data, 'warehouseId', 'parentId');
         this.stockData = stockRes.rows;
-        this.updateChart();
+        
+        // 创建层级数据
+        const treeData = this.createTreeData();
+        
+        // 更新图表
+        this.updateChart(treeData);
       } catch (error) {
         console.error('加载数据失败:', error);
+        this.chart.hideLoading();
+        this.$message.error('库存数据加载失败');
       }
     },
     // 处理树结构
     handleTree(data, id, parentId) {
-      const cloneData = JSON.parse(JSON.stringify(data));
-      return cloneData.filter(father => {
-        const branchArr = cloneData.filter(child => father[id] === child[parentId]);
-        if (branchArr.length > 0) father.children = branchArr;
-        return father[parentId] === 0 || father[parentId] === null;
-      });
-    },
-    updateChart() {
-      let treeData;
-      if (this.groupMode === 'warehouse') {
-        treeData = this.getWarehouseTreeData();
-      } else {
-        treeData = this.getItemTreeData();
+      if (!Array.isArray(data)) {
+        console.error('handleTree: data is not array', data);
+        return [];
       }
-
-      const option = {
-        tooltip: {
-          formatter: (params) => {
-            const data = params.data;
-            if (data.stockInfo) {
-              return this.formatTooltip(data);
-            }
-            return `${params.name}<br/>总数量: ${params.value || 0}`;
-          }
-        },
-        series: [{
-          type: 'treemap',
-          data: treeData.children,
-          label: {
-            show: true,
-            formatter: (params) => {
-              const data = params.data;
-              if (data.stockInfo) {
-                return `${params.name}\n${params.value}${data.stockInfo.unit || ''}`;
-              }
-              return `${params.name}\n${params.value || ''}`;
-            }
-          },
-          breadcrumb: {
-            show: true
-          },
-          roam: false,
-          levels: [
-            {
-              itemStyle: {
-                borderColor: '#555',
-                borderWidth: 4,
-                gapWidth: 4
-              }
-            },
-            {
-              itemStyle: {
-                borderColor: '#777',
-                borderWidth: 2,
-                gapWidth: 2
-              }
-            }
-          ]
-        }]
-      };
-
-      this.chart && this.chart.setOption(option);
+      
+      const map = {};
+      const tree = [];
+      
+      // 创建节点映射
+      data.forEach(item => {
+        map[item[id]] = { ...item, children: [] };
+      });
+      
+      // 构建树结构
+      data.forEach(item => {
+        const node = map[item[id]];
+        if (!item[parentId] || item[parentId] === 0) {
+          // 顶级节点（parentId为0或null）
+          tree.push(node);
+        } else if (map[item[parentId]]) {
+          map[item[parentId]].children.push(node);
+        }
+      });
+      
+      return tree;
     },
-    getWarehouseTreeData() {
+    // 创建树形数据
+    createTreeData() {
+      // 递归构建仓库树
       const buildWarehouseTree = (warehouseNode) => {
         const stocks = this.stockData.filter(stock => stock.warehouseId === warehouseNode.warehouseId);
         const children = [];
         let totalQuantity = 0;
-
-        // 处理当前仓库的库存
+        
+        // 添加库存物品
         stocks.forEach(stock => {
           const quantity = Number(stock.quantity) || 0;
           totalQuantity += quantity;
           children.push({
-            name: this.getItemName(stock),
+            name: stock.itemName,
             value: quantity,
-            stockInfo: {
-              itemType: stock.itemType,
-              itemCode: stock.itemCode,
+            itemInfo: {
+              type: stock.itemType,
+              code: stock.itemCode,
               unit: stock.unit,
               batchNo: stock.batchNo
             }
           });
         });
-
-        // 处理子仓库
+        
+        // 递归处理子仓库
         if (warehouseNode.children && warehouseNode.children.length > 0) {
           warehouseNode.children.forEach(child => {
             const childNode = buildWarehouseTree(child);
@@ -155,92 +124,162 @@ export default {
             }
           });
         }
-
+        
         return {
           name: warehouseNode.warehouseName,
           value: totalQuantity,
+          warehouseInfo: {
+            code: warehouseNode.warehouseCode
+          },
           children: children.length > 0 ? children : undefined
         };
       };
-
-      return {
-        name: '库存总览',
-        children: this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse))
-      };
+      
+      // 直接返回顶级仓库节点
+      return this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse));
     },
-    getItemTreeData() {
-      // 按物品类型和物品分组
-      const itemGroups = {};
-      this.stockData.forEach(stock => {
-        const itemType = this.getItemTypeName(stock.itemType);
-        if (!itemGroups[itemType]) {
-          itemGroups[itemType] = {};
-        }
-        
-        const itemKey = stock.itemId + '_' + stock.itemName;
-        if (!itemGroups[itemType][itemKey]) {
-          itemGroups[itemType][itemKey] = {
-            name: stock.itemName,
-            value: 0,
-            children: []
-          };
-        }
-
-        const quantity = Number(stock.quantity) || 0;
-        itemGroups[itemType][itemKey].value += quantity;
-        itemGroups[itemType][itemKey].children.push({
-          name: this.getWarehouseName(stock.warehouseId),
-          value: quantity,
-          stockInfo: {
-            itemType: stock.itemType,
-            itemCode: stock.itemCode,
-            unit: stock.unit,
-            batchNo: stock.batchNo
+    // 获取层级样式配置（参考ECharts官网示例）
+    getLevelOption() {
+      return [
+        // 顶级仓库层级样式（parentId为0或null）
+        {
+          itemStyle: {
+            borderColor: '#555',
+            borderWidth: 4,
+            gapWidth: 3
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: '#333'
+            }
+          },
+          upperLabel: {
+            show: true,
+            height: 35,
+            fontSize: 16,
+            fontWeight: 'bold',
+            color: '#333'
           }
-        });
-      });
-
-      return {
-        name: '库存总览',
-        children: Object.entries(itemGroups).map(([type, items]) => ({
-          name: type,
-          children: Object.values(items)
-        }))
+        },
+        // 子仓库层级样式
+        {
+          itemStyle: {
+            borderColor: '#777',
+            borderWidth: 3,
+            gapWidth: 2
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: '#555'
+            }
+          },
+          upperLabel: {
+            show: true,
+            height: 28,
+            fontSize: 14
+          }
+        },
+        // 物料层级样式
+        {
+          itemStyle: {
+            borderColor: '#999',
+            borderWidth: 2,
+            gapWidth: 1
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: '#777'
+            }
+          }
+        }
+      ];
+    },
+    // 更新图表
+    updateChart(treeData) {
+      const option = {
+        title: {
+          left: 'center',
+          textStyle: {
+            fontSize: 18
+          }
+        },
+        tooltip: {
+          formatter: (info) => {
+            const value = info.value || 0;
+            const treePath = info.treePathInfo || [];
+            let path = '';
+            
+            // 构建完整路径（从第一个节点开始）
+            for (let i = 0; i < treePath.length; i++) {
+              if (treePath[i].name) {
+                path += treePath[i].name;
+                if (i < treePath.length - 1) path += '/';
+              }
+            }
+            
+            const content = [];
+            content.push(`<div class="tooltip-title">${echarts.format.encodeHTML(path)}</div>`);
+            content.push(`库存数量: ${echarts.format.addCommas(value)} ${this.getItemUnit(info.data)}`);
+            
+            // 添加物品详细信息
+            if (info.data.itemInfo) {
+              const item = info.data.itemInfo;
+              content.push(`物料类型: ${this.getItemTypeName(item.type)}`);
+              content.push(`物料编码: ${item.code || '无'}`);
+              if (item.batchNo) content.push(`批次号: ${item.batchNo}`);
+            }
+            
+            return content.join('<br>');
+          }
+        },
+        series: [{
+          name: '库存',
+          type: 'treemap',
+          visibleMin: 300, // 只有当区块面积大于300时才会显示标签
+          leafDepth: 2, // 只在叶子节点显示标签
+          label: {
+            show: true,
+            fontSize: 12,
+            formatter: (params) => {
+              // 对于物料只显示名称和数量
+              if (params.data.itemInfo) {
+                const unit = params.data.itemInfo.unit || '';
+                return `${params.name}\n${params.value}${unit}`;
+              }
+              // 对于仓库只显示名称
+              return params.name;
+            },
+            ellipsis: true // 超出时显示省略号
+          },
+          upperLabel: {
+            show: true,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderColor: '#fff',
+            borderWidth: 1
+          },
+          levels: this.getLevelOption(),
+          data: treeData // 直接使用顶级仓库节点数组
+        }]
       };
+
+      this.chart.setOption(option, true);
     },
-    formatTooltip(data) {
-      const stockInfo = data.stockInfo;
-      return `${data.name}<br/>
-              数量: ${data.value} ${stockInfo.unit || ''}<br/>
-              类型: ${this.getItemTypeName(stockInfo.itemType)}<br/>
-              编号: ${stockInfo.itemCode || '无'}<br/>
-              批次: ${stockInfo.batchNo || '无'}`;
+    // 获取物料单位
+    getItemUnit(data) {
+      return data.itemInfo?.unit || '';
     },
+    // 获取物料类型名称
     getItemTypeName(type) {
       const typeMap = {
         raw_material: '原材料',
         product: '产品',
+        semi_product: '半成品'
       };
-      return typeMap[type] || type;
-    },
-    getItemName(stock) {
-      return stock.itemName || `${this.getItemTypeName(stock.itemType)}-${stock.itemCode}`;
-    },
-    getWarehouseName(warehouseId) {
-      const findWarehouse = (warehouses) => {
-        for (const warehouse of warehouses) {
-          if (warehouse.warehouseId === warehouseId) {
-            return warehouse.warehouseName;
-          }
-          if (warehouse.children) {
-            const name = findWarehouse(warehouse.children);
-            if (name) return name;
-          }
-        }
-        return null;
-      };
-      return findWarehouse(this.warehouseTreeData) || '未知仓库';
+      return typeMap[type] || type || '未分类';
     },
+    // 刷新数据
     refresh() {
       this.loadData();
     }
@@ -249,11 +288,16 @@ export default {
     window.removeEventListener('resize', this.handleResize);
     if (this.chart) {
       this.chart.dispose();
-      this.chart = null;
     }
   }
 };
 </script>
 
 <style scoped>
-</style>
+/* 图表容器样式 */
+.treemap-container {
+  width: 100%;
+  height: 100%;
+  min-height: 600px;
+}
+</style>

klp-ui/src/views/wms/stock/index.vue

@@ -51,9 +51,9 @@
           <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
             v-hasPermi="['wms:stock:export']">导出</el-button>
         </el-col>
-        <el-col :span="1.5">
+        <!-- <el-col :span="1.5">
           <el-button type="primary" plain icon="el-icon-data-analysis" size="mini" @click="showStockBox">库存分析</el-button>
-        </el-col>
+        </el-col> -->
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
 
@@ -84,11 +84,6 @@
       <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
         @pagination="getList" />
 
-      <!-- 库存分析对话框 -->
-      <el-dialog title="库存统计" :visible.sync="stockBoxVisible" width="80%" append-to-body destroy-on-close>
-        <stock-box ref="stockBoxChart" />
-      </el-dialog>
-
       <!-- 添加或修改库存对话框（保持不变） -->
       <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">