lhq/FT501-WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

货位分析、库存平面图修改完成

Browse Source
This commit is contained in:
猫猫guowen
2025-05-26 10:41:48 +08:00
parent 892b1b96f1
commit a939e97c3b
2 changed files with 107 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
ruoyi-ui/src/views/kpi/spaceAnalysis/index.vue
View File

@@ -43,22 +43,14 @@ export default {
},
// 图表实例
chart: null,
// 图表数据（模拟数据，注意删除后echarts图初始化会报一下错）
chartData:[
{
"巷道2": 1,
"巷道1": 0,
"status": "出库分配"
}
],
dimensions:[]
// 图表数据（模拟数据）
chartData:[]
}
}
,
created() {
this.getWarehouseList();
this.handleQuery();
}
,
mounted() {
@@ -81,13 +73,18 @@ export default {
,
/** 搜索按钮操作 */
handleQuery() {
// TODO: 调用后端接口获取数据
getSpaceAnalysisList(this.queryParams).then(response => {
this.chartData = response.data.data;
this.updateChart();
if (response.code === 200) {
this.chartData = response.data;
this.updateChart();
} else {
this.$message.error(response.msg);
}
}).catch(error => {
console.error('获取数据失败:', error);
this.$message.error('获取数据失败');
});
}
,
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
@@ -103,12 +100,35 @@ export default {
,
/** 更新图表数据 */
updateChart() {
this.dimensions=[]
if (this.chartData[0].巷道1!=undefined&&this.chartData[0].巷道1!=null){
this.dimensions=['status', '巷道1', '巷道2']
}else {
this.dimensions=['status', '巷道3', '巷道4']
console.log('chartData:', this.chartData);
if (!this.chartData || !this.chartData.data || this.chartData.data.length === 0) {
console.warn('无效的图表数据');
return;
}
// 获取数据中所有的巷道字段
const firstItem = this.chartData.data[0];
const roadwayFields = Object.keys(firstItem).filter(key => key.startsWith('巷道'));
// 准备系列配置
const series = roadwayFields.map(roadway => ({
name: roadway,
type: 'bar',
data: this.chartData.data.map(item => item[roadway]),
barWidth: '30%',
itemStyle: {
color: roadway === '巷道1' ? '#1890ff' :
roadway === '巷道2' ? '#52c41a' :
roadway === '巷道3' ? '#1890ff' :
roadway === '巷道4' ? '#52c41a' : '#1890ff'
},
label: {
show: true,
position: 'top'
}
}));
console.log('生成的系列配置:', series);
const option = {
title: {
text: '货位状态分析',
@@ -125,14 +145,11 @@ export default {
textStyle: {
fontSize: 15,
color: "#292c2c"
}
},
dataset: {
dimensions: this.dimensions,
source: this.chartData
},
},
xAxis: {
type: 'category',
data: this.chartData.data.map(item => item.status),
axisLabel: {
interval: 0,
rotate: 0
@@ -142,33 +159,10 @@ export default {
type: 'value',
name: '数量'
},
series: [
{
type: 'bar',
barWidth: '30%',
itemStyle: {
color: '#1890ff'
},
label: {
show: true,
position: 'top'
}
},
{
type: 'bar',
barWidth: '30%',
itemStyle: {
color: '#52c41a'
},
label: {
show: true,
position: 'top'
}
}
]
series: series
};
this.chart.setOption(option);
}
},
}
}
</script>

105
ruoyi-ui/src/views/kpi/spacePlan/index.vue
View File

@@ -58,8 +58,8 @@ export default {
// 图表实例
normalChart: null,
specialChart: null,
// 提示信息缓存
tooltipCache: {},
// 加载状态记录
loadingKeys: {},
// 图表数据
chartData: {
x: [],
@@ -92,8 +92,6 @@ export default {
this.queryParams.thePlatoon = ''
this.roadwayOptions = []
this.platoonOptions = []
// 清空提示信息缓存
this.tooltipCache = {}
// 获取巷道列表
getRoadways(this.queryParams).then(response => {
const roadways = response.data.data
@@ -109,8 +107,6 @@ export default {
// 重置排号
this.queryParams.thePlatoon = ''
this.platoonOptions = []
// 清空提示信息缓存
this.tooltipCache = {}
// 获取排号列表
getPlatoons(this.queryParams).then(response => {
const platoons = response.data.data
@@ -122,8 +118,6 @@ export default {
})
},
handlePlatoonChange() {
// 清空提示信息缓存
this.tooltipCache = {}
this.loadChartData()
},
// 加载普通仓库图表数据
@@ -251,45 +245,72 @@ export default {
this.normalChart.setOption(option)
},
// 防抖函数
debounce(func, wait) {
let timeout;
return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
},
// 格式化普通仓库提示信息
formatTooltip(params) {
return new Promise((resolve) => {
let str = '';
if (params.seriesName !== '满位') {
str = params.seriesName + '<br>' + this.queryParams.thePlatoon + '排' + (params.data[0] + 1) + '列' + (params.data[1] + 1) + '层';
resolve(str);
} else {
const key = `${this.queryParams.warehouseId}-${this.queryParams.thePlatoon}-${params.data[0] + 1}-${params.data[1] + 1}`;
// 如果缓存中存在数据，直接使用缓存
if (this.tooltipCache && this.tooltipCache[key]) {
str = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>${this.tooltipCache[key]}`;
resolve(str);
return;
}
if (params.seriesName !== '满位') {
return params.seriesName + '<br>' + this.queryParams.thePlatoon + '排' + (params.data[0] + 1) + '列' + (params.data[1] + 1) + '层';
}
const returnData = {
"thePlatoon": this.queryParams.thePlatoon,
"theColumn": params.data[0] + 1,
"theFloor": params.data[1] + 1,
"warehouseId": this.queryParams.warehouseId
};
const returnData = {
"thePlatoon": this.queryParams.thePlatoon,
"theColumn": params.data[0] + 1,
"theFloor": params.data[1] + 1,
"warehouseId": this.queryParams.warehouseId
};
getChartMag(returnData)
.then(response => {
const msg = response.data.msg;
// 缓存响应数据
if (!this.tooltipCache) this.tooltipCache = {};
this.tooltipCache[key] = msg;
str = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>${msg}`;
resolve(str);
})
.catch(error => {
console.error('获取货位信息失败:', error);
str = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>获取详细信息失败`;
resolve(str);
// 生成唯一标识
const key = `${params.seriesName}-${params.data[0]}-${params.data[1]}`;
// 如果已经在加载中，返回基本信息
if (this.loadingKeys && this.loadingKeys[key]) {
return `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层<br>加载中...`;
}
// 返回基本信息
const baseStr = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层`;
// 设置加载状态
if (!this.loadingKeys) this.loadingKeys = {};
this.loadingKeys[key] = true;
// 使用防抖函数包装请求
this.debounce(() => {
getChartMag(returnData)
.then(response => {
const msg = response.data.msg;
const str = `${baseStr}<br>${msg}`;
this.normalChart.setOption({
tooltip: {
formatter: (p) => {
if (p.seriesName === params.seriesName &&
p.data[0] === params.data[0] &&
p.data[1] === params.data[1]) {
return str;
}
return this.formatTooltip(p);
}
}
});
}
});
})
.catch(error => {
console.error('获取货位信息失败:', error);
})
.finally(() => {
// 清除加载状态
delete this.loadingKeys[key];
});
}, 300)();
return baseStr;
},
}
}