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

<template>
  <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>

<script>
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",
  data() {
    return {
      chart: null,
      stockData: [],
      warehouseData: [],
      warehouseTreeData: [],
      treeProps: {
        label: 'warehouseName',
        children: 'children',
        isLeaf: 'isLeaf',
        id: 'id'
      },
      currentTreeNode: null
    };
  },
  mounted() {
    this.initChart();
    this.loadData();
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.chartContainer);
      window.addEventListener('resize', this.handleResize);
    },
    handleResize() {
      this.chart && this.chart.resize();
    },
    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;
        
        // 创建层级数据
        const treeData = this.createTreeData();
        
        // 更新图表
        this.updateChart(treeData);
      } catch (error) {
        console.error('加载数据失败:', error);
        this.chart.hideLoading();
        this.$message.error('库存数据加载失败');
      }
    },
    // 处理树结构
    handleTree(data, id, parentId) {
      if (!Array.isArray(data)) {
        console.error('handleTree: data is not array', data);
        return [];
      }
      
      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;
    },
    // 创建树形数据
    createTreeData() {
      // 递归构建仓库树
      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: {
              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, 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: {
            code: warehouseNode.warehouseCode
          },
          children: children.length > 0 ? children : undefined
        };
      };
      // 直接返回顶级仓库节点
      return this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse));
    },
    // 获取层级样式配置（参考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'
          }
        },
        // 子仓库层级样式
        {
          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);
    },
    // 获取物料单位
    getItemUnit(data) {
      return data.itemInfo?.unit || '';
    },
    // 获取物料类型名称
    getItemTypeName(type) {
      const typeMap = {
        raw_material: '原材料',
        product: '产品',
        semi_product: '半成品'
      };
      return typeMap[type] || type || '未分类';
    },
    // 刷新数据
    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() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chart) {
      this.chart.dispose();
    }
  }
};
</script>

<style scoped>
/* 图表容器样式 */
.treemap-container {
  width: 100%;
  height: 100%;
  min-height: 600px;
}
</style>