348 lines
9.7 KiB
Vue
348 lines
9.7 KiB
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.warehouseId) {
|
||
this.highlightChartNode(node.warehouseId);
|
||
}
|
||
},
|
||
// 高亮并聚焦图表节点
|
||
highlightChartNode(id) {
|
||
if (!this.chart) return;
|
||
// 高亮节点
|
||
this.chart.dispatchAction({
|
||
type: 'highlight',
|
||
seriesIndex: 0,
|
||
targetNodeId: id
|
||
});
|
||
// 聚焦节点（自动缩放到该节点）
|
||
this.chart.dispatchAction({
|
||
type: 'treemapRootToNode',
|
||
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> |