解决bomId为空时会查询所有bom的bug

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

@@ -1,6 +1,19 @@
 <template>
-  <div>
-    <div ref="chartContainer" style="width: 100%; height: calc(100vh - 100px);"></div>
+  <div style="display: flex; height: calc(100vh - 100px);">
+    <!-- 左侧导航树 -->
+    <div style="width: 280px; min-width: 200px; border-right: 1px solid #eee; padding: 10px 0;">
+      <el-tree
+        :data="warehouseTreeData"
+        node-key="warehouseId"
+        :props="treeProps"
+        highlight-current
+        @node-click="handleTreeNodeClick"
+        :default-expand-all="true"
+        style="height: 100%; overflow-y: auto;"
+      />
+    </div>
+    <!-- 右侧图表 -->
+    <div ref="chartContainer" style="flex: 1; height: 100%;"></div>
   </div>
 </template>
 
@@ -8,6 +21,7 @@
 import * as echarts from 'echarts';
 import { listStock } from "@/api/wms/stock";
 import { listWarehouse } from "@/api/wms/warehouse";
+import 'element-ui/lib/theme-chalk/index.css';
 
 export default {
   name: "StockBox",
@@ -16,7 +30,14 @@ export default {
       chart: null,
       stockData: [],
       warehouseData: [],
-      warehouseTreeData: []
+      warehouseTreeData: [],
+      treeProps: {
+        label: 'warehouseName',
+        children: 'children',
+        isLeaf: 'isLeaf',
+        id: 'id'
+      },
+      currentTreeNode: null
     };
   },
   mounted() {
@@ -93,16 +114,17 @@ export default {
     // 创建树形数据
     createTreeData() {
       // 递归构建仓库树
-      const buildWarehouseTree = (warehouseNode) => {
+      const buildWarehouseTree = (warehouseNode, parentId = '') => {
         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;
+          // 物料节点 id 用 仓库id+物料编码
           children.push({
+            id: `${warehouseNode.warehouseId}_${stock.itemCode || stock.itemName}`,
             name: stock.itemName,
             value: quantity,
             itemInfo: {
@@ -113,19 +135,19 @@ export default {
             }
           });
         });
-        
         // 递归处理子仓库
         if (warehouseNode.children && warehouseNode.children.length > 0) {
           warehouseNode.children.forEach(child => {
-            const childNode = buildWarehouseTree(child);
+            const childNode = buildWarehouseTree(child, warehouseNode.warehouseId);
             if (childNode.value > 0) {
               children.push(childNode);
               totalQuantity += childNode.value;
             }
           });
         }
-        
+        // 仓库节点 id 用 warehouseId
         return {
+          id: String(warehouseNode.warehouseId),
           name: warehouseNode.warehouseName,
           value: totalQuantity,
           warehouseInfo: {
@@ -134,7 +156,6 @@ export default {
           children: children.length > 0 ? children : undefined
         };
       };
-      
       // 直接返回顶级仓库节点
       return this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse));
     },
@@ -282,6 +303,30 @@ export default {
     // 刷新数据
     refresh() {
       this.loadData();
+    },
+    // 导航树点击事件
+    handleTreeNodeClick(node) {
+      this.currentTreeNode = node;
+      // 图表高亮并聚焦对应节点
+      if (node && node.id) {
+        this.highlightChartNode(node.id);
+      }
+    },
+    // 高亮并聚焦图表节点
+    highlightChartNode(id) {
+      if (!this.chart) return;
+      // 高亮节点
+      this.chart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        targetNodeId: id
+      });
+      // 聚焦节点（自动缩放到该节点）
+      this.chart.dispatchAction({
+        type: 'zoomToNode',
+        seriesIndex: 0,
+        targetNodeId: id
+      });
     }
   },
   beforeDestroy() {