feat: 增强库位信息展示，添加禁用和空托盘状态，优化状态逻辑和样式
This commit is contained in:
parent
930df2a6f7
commit
1c41c73cd2
@ -22,6 +22,14 @@
|
||||
<span class="status-indicator locked" :class="{ active: location.isLocked }"></span>
|
||||
<span class="status-text">{{ location.isLocked ? '已锁定' : '未锁定' }}</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span class="status-indicator disabled" :class="{ active: location.isDisabled }"></span>
|
||||
<span class="status-text">{{ location.isDisabled ? '已禁用' : '未禁用' }}</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span class="status-indicator empty-tray" :class="{ active: location.isEmptyTray }"></span>
|
||||
<span class="status-text">{{ location.isEmptyTray ? '空托盘' : '非空托盘' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow-icon">▶</div>
|
||||
@ -191,7 +199,20 @@ const handleStorageAction = async (action: string, actionName: string) => {
|
||||
try {
|
||||
// 直接调用API，不需要勾选
|
||||
const { StorageActionService } = await import('../../services/storageActionService');
|
||||
await StorageActionService.handleStorageAction(action, selectedLocation.value, actionName);
|
||||
|
||||
// 转换类型以匹配API期望的格式
|
||||
const apiLocation = {
|
||||
id: selectedLocation.value.id,
|
||||
name: selectedLocation.value.name,
|
||||
isOccupied: selectedLocation.value.isOccupied,
|
||||
isLocked: selectedLocation.value.isLocked,
|
||||
isDisabled: selectedLocation.value.isDisabled,
|
||||
isEmptyTray: selectedLocation.value.isEmptyTray,
|
||||
status: selectedLocation.value.status,
|
||||
layer_name: selectedLocation.value.name
|
||||
};
|
||||
|
||||
await StorageActionService.handleStorageAction(action, apiLocation, actionName);
|
||||
|
||||
// 发送操作完成事件
|
||||
emit('actionComplete', {
|
||||
@ -216,7 +237,9 @@ const getStorageItemClass = (location: StorageLocationInfo) => {
|
||||
return {
|
||||
'storage-occupied': location.isOccupied,
|
||||
'storage-locked': location.isLocked,
|
||||
'storage-available': !location.isOccupied && !location.isLocked,
|
||||
'storage-disabled': location.isDisabled,
|
||||
'storage-empty-tray': location.isEmptyTray,
|
||||
'storage-available': !location.isOccupied && !location.isLocked && !location.isDisabled,
|
||||
};
|
||||
};
|
||||
|
||||
@ -224,7 +247,9 @@ const getStorageItemClass = (location: StorageLocationInfo) => {
|
||||
const getStorageTooltip = (location: StorageLocationInfo) => {
|
||||
const occupiedText = location.isOccupied ? '已占用' : '未占用';
|
||||
const lockedText = location.isLocked ? '已锁定' : '未锁定';
|
||||
return `${location.name} - 占用: ${occupiedText}, 锁定: ${lockedText}`;
|
||||
const disabledText = location.isDisabled ? '已禁用' : '未禁用';
|
||||
const emptyTrayText = location.isEmptyTray ? '空托盘' : '非空托盘';
|
||||
return `${location.name} - 占用: ${occupiedText}, 锁定: ${lockedText}, 禁用: ${disabledText}, 空托盘: ${emptyTrayText}`;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -235,6 +260,9 @@ const getStorageTooltip = (location: StorageLocationInfo) => {
|
||||
|
||||
/* 库位项样式 */
|
||||
.storage-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.2s;
|
||||
@ -295,6 +323,22 @@ const getStorageTooltip = (location: StorageLocationInfo) => {
|
||||
background-color: #faad14; /* 锁定时橙色 */
|
||||
}
|
||||
|
||||
.status-indicator.disabled {
|
||||
background-color: #d9d9d9; /* 默认灰色 */
|
||||
}
|
||||
|
||||
.status-indicator.disabled.active {
|
||||
background-color: #8c8c8c; /* 禁用时深灰色 */
|
||||
}
|
||||
|
||||
.status-indicator.empty-tray {
|
||||
background-color: #d9d9d9; /* 默认灰色 */
|
||||
}
|
||||
|
||||
.status-indicator.empty-tray.active {
|
||||
background-color: #13c2c2; /* 空托盘时青色 */
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
@ -311,6 +355,16 @@ const getStorageTooltip = (location: StorageLocationInfo) => {
|
||||
border-left-color: #faad14;
|
||||
}
|
||||
|
||||
.storage-disabled {
|
||||
background-color: #f5f5f5;
|
||||
border-left-color: #8c8c8c;
|
||||
}
|
||||
|
||||
.storage-empty-tray {
|
||||
background-color: #e6fffb;
|
||||
border-left-color: #13c2c2;
|
||||
}
|
||||
|
||||
.storage-available {
|
||||
background-color: #f6ffed;
|
||||
border-left-color: #52c41a;
|
||||
@ -318,10 +372,10 @@ const getStorageTooltip = (location: StorageLocationInfo) => {
|
||||
|
||||
/* 箭头图标 */
|
||||
.arrow-icon {
|
||||
margin-left: auto;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
transition: color 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.storage-item:hover .arrow-icon {
|
||||
|
||||
@ -12,7 +12,9 @@ export interface StorageLocationInfo {
|
||||
name: string;
|
||||
isOccupied: boolean; // 是否占用
|
||||
isLocked: boolean; // 是否锁定
|
||||
status: 'available' | 'occupied' | 'locked' | 'unknown';
|
||||
isDisabled: boolean; // 是否禁用
|
||||
isEmptyTray: boolean; // 是否空托盘
|
||||
status: 'available' | 'occupied' | 'locked' | 'disabled' | 'unknown';
|
||||
}
|
||||
|
||||
export interface StorageMenuConfig {
|
||||
@ -77,46 +79,30 @@ export function findStorageLocationsByPointId(pointId: string, storageLocationSe
|
||||
name: location.layer_name || location.locationName || location.name || '未知库位',
|
||||
isOccupied: location.is_occupied || location.occupied || false,
|
||||
isLocked: location.is_locked || location.locked || false,
|
||||
status: (location.is_locked || location.locked)
|
||||
? 'locked'
|
||||
: (location.is_occupied || location.occupied)
|
||||
? 'occupied'
|
||||
: 'available',
|
||||
isDisabled: location.is_disabled || location.disabled || false,
|
||||
isEmptyTray: location.is_empty_tray || location.emptyTray || false,
|
||||
status: (location.is_disabled || location.disabled)
|
||||
? 'disabled'
|
||||
: (location.is_locked || location.locked)
|
||||
? 'locked'
|
||||
: (location.is_occupied || location.occupied)
|
||||
? 'occupied'
|
||||
: 'available',
|
||||
};
|
||||
console.log(`转换库位数据: ${location.layer_name} -> ${converted.name}, 占用: ${converted.isOccupied}, 锁定: ${converted.isLocked}, 状态: ${converted.status}`);
|
||||
console.log(`转换库位数据: ${location.layer_name} -> ${converted.name}, 占用: ${converted.isOccupied}, 锁定: ${converted.isLocked}, 禁用: ${converted.isDisabled}, 空托盘: ${converted.isEmptyTray}, 状态: ${converted.status}`);
|
||||
return converted;
|
||||
});
|
||||
return convertedLocations;
|
||||
} else {
|
||||
console.log(`点 ${pointId} 没有关联的库位数据`);
|
||||
}
|
||||
} else {
|
||||
console.log('StorageLocationService未提供或不可用');
|
||||
}
|
||||
|
||||
// 回退到模拟数据
|
||||
console.log('使用模拟数据');
|
||||
const mockStorageLocations: StorageLocationInfo[] = [
|
||||
{
|
||||
id: `storage-${pointId}-0`,
|
||||
name: 'GSA-1-1-1', // 模拟库位名称
|
||||
isOccupied: false,
|
||||
isLocked: false,
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
id: `storage-${pointId}-1`,
|
||||
name: 'GSA-1-1-2',
|
||||
isOccupied: true,
|
||||
isLocked: false,
|
||||
status: 'occupied',
|
||||
},
|
||||
{
|
||||
id: `storage-${pointId}-2`,
|
||||
name: 'GSA-1-1-3',
|
||||
isOccupied: false,
|
||||
isLocked: true,
|
||||
status: 'locked',
|
||||
},
|
||||
];
|
||||
|
||||
return mockStorageLocations;
|
||||
// 没有真实数据时返回空数组，不使用模拟数据
|
||||
console.log('没有库位数据，返回空数组');
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -4,7 +4,9 @@ export interface StorageLocationInfo {
|
||||
name: string;
|
||||
isOccupied: boolean;
|
||||
isLocked: boolean;
|
||||
status: 'available' | 'occupied' | 'locked' | 'unknown';
|
||||
isDisabled: boolean;
|
||||
isEmptyTray: boolean;
|
||||
status: 'available' | 'occupied' | 'locked' | 'disabled' | 'unknown';
|
||||
layer_name?: string;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user