xudan/web-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(context-menu): 修复上下文菜单项的格式，确保每个操作的成功状态后面添加逗号

Browse Source
This commit is contained in:
xudan 2025-10-24 11:43:20 +08:00
parent 4576ed4e77
commit 093b48d714
3 changed files with 119 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/context-menu/default-menu.vue
View File

@ -34,7 +34,7 @@ const handleRefresh = () => {
console.log('刷新操作');
emit('actionComplete', {
action: 'refresh',
success: true
success: true,
});
};
@ -43,7 +43,7 @@ const handleViewInfo = () => {
console.log('查看信息操作');
emit('actionComplete', {
action: 'view_info',
success: true
success: true,
});
};
@ -52,7 +52,7 @@ const handleSettings = () => {
console.log('设置操作');
emit('actionComplete', {
action: 'settings',
success: true
success: true,
});
};
</script>

10
src/services/context-menu/menu-config.service.ts
View File

@ -42,7 +42,7 @@ export function getMenuConfig(
services?: {
storageLocationService?: any;
robotService?: any;
}
},
): MenuConfig {
switch (type) {
case 'storage-background':
@ -70,6 +70,8 @@ export function getMenuConfig(
return getAreaMenuConfig(data);
default:
// 对于默认情况，我们不希望显示任何菜单，
// 因此返回一个可以被 processContextMenu 识别并关闭菜单的配置
return {
menuType: 'default' as const,
};
@ -112,7 +114,7 @@ function processContextMenu(
services?: {
storageLocationService?: any;
robotService?: any;
}
},
) {
// 获取菜单配置
const menuConfig = getMenuConfig(parsedData.type, parsedData, services);
@ -148,7 +150,7 @@ export function handleContextMenu(
services?: {
storageLocationService?: any;
robotService?: any;
}
},
) {
// 阻止默认右键菜单
event.preventDefault();
@ -171,7 +173,7 @@ export function handleContextMenuFromPenData(
services?: {
storageLocationService?: any;
robotService?: any;
}
},
) {
// 解析penData并处理
const parsedData = parsePenData(penData);

136
src/services/storage-location.service.ts
View File

@ -4,7 +4,7 @@ import type { StorageLocationInfo, StorageLocationMessage } from '@api/scene';
import { monitorStorageLocationById } from '@api/scene';
import type { EditorService } from '@core/editor.service';
import { isNil } from 'lodash-es';
import { type Ref, ref } from 'vue';
import { reactive, type Ref, ref } from 'vue';
import { createStorageLocationPens } from './draw/storage-location-drawer';
@ -16,7 +16,7 @@ import { createStorageLocationPens } from './draw/storage-location-drawer';
const COLORS = {
OCCUPIED: '#ff4d4f', // 占用状态 - 红色
AVAILABLE: '#52c41a', // 可用状态 - 绿色
DEFAULT: '#f5f5f5' // 默认状态 - 浅灰色
DEFAULT: '#f5f5f5', // 默认状态 - 浅灰色
} as const;
/**
@ -25,7 +25,7 @@ const COLORS = {
const MESSAGE_TYPES = {
BATCH_UPDATE: 'storage_location_update',
SINGLE_UPDATE: 'storage_location_status_change',
GET_STATUS: 'get_status'
GET_STATUS: 'get_status',
} as const;
/**
@ -33,7 +33,7 @@ const MESSAGE_TYPES = {
*/
const DEFAULT_CONFIG = {
MONITOR_INTERVAL: 3, // 默认监控间隔（秒）
POINT_TYPE_ACTION: 15 // 动作点类型
POINT_TYPE_ACTION: 15, // 动作点类型
} as const;
/**
@ -43,14 +43,14 @@ const PEN_TYPES = {
POINT: 'point',
STORAGE_LOCATION: 'storage-location',
STORAGE_MORE: 'storage-more',
STORAGE_BACKGROUND: 'storage-background'
STORAGE_BACKGROUND: 'storage-background',
} as const;
/**
* 标签常量
*/
const TAGS = {
POINT_PREFIX: 'point-'
POINT_PREFIX: 'point-',
} as const;
/**
@ -83,25 +83,25 @@ const DEFAULT_STORAGE_CONFIG: StorageLocationConfig = {
colors: {
occupied: COLORS.OCCUPIED,
available: COLORS.AVAILABLE,
default: COLORS.DEFAULT
default: COLORS.DEFAULT,
},
penTypes: {
point: PEN_TYPES.POINT,
storageLocation: PEN_TYPES.STORAGE_LOCATION,
storageMore: PEN_TYPES.STORAGE_MORE,
storageBackground: PEN_TYPES.STORAGE_BACKGROUND
storageBackground: PEN_TYPES.STORAGE_BACKGROUND,
},
tags: {
pointPrefix: TAGS.POINT_PREFIX
pointPrefix: TAGS.POINT_PREFIX,
},
monitoring: {
defaultInterval: DEFAULT_CONFIG.MONITOR_INTERVAL
}
defaultInterval: DEFAULT_CONFIG.MONITOR_INTERVAL,
},
};
// 提供给绘制层快速查询的全局状态映射：pointId -> (layerName -> { occupied, locked })
export type StorageState = { occupied?: boolean; locked?: boolean };
export const storageStateMap = new Map<string, Map<string, StorageState>>();
// 提供给绘制层快速查询的全局状态映射：pointId -> (layerName -> { occupied, locked, disabled })
export type StorageState = { occupied?: boolean; locked?: boolean; disabled?: boolean };
export const storageStateMap = reactive(new Map<string, Map<string, StorageState>>());
/**
* 库位处理服务类
@ -132,7 +132,7 @@ export class StorageLocationService {
colors: { ...DEFAULT_STORAGE_CONFIG.colors, ...userConfig.colors },
penTypes: { ...DEFAULT_STORAGE_CONFIG.penTypes, ...userConfig.penTypes },
tags: { ...DEFAULT_STORAGE_CONFIG.tags, ...userConfig.tags },
monitoring: { ...DEFAULT_STORAGE_CONFIG.monitoring, ...userConfig.monitoring }
monitoring: { ...DEFAULT_STORAGE_CONFIG.monitoring, ...userConfig.monitoring },
};
}
@ -179,9 +179,9 @@ export class StorageLocationService {
if (!this.editor) return stationToPointIdMap;
// 获取所有动作点
const actionPoints = this.editor.find(this.config.penTypes.point).filter(
(pen) => pen.point?.type === DEFAULT_CONFIG.POINT_TYPE_ACTION
);
const actionPoints = this.editor
.find(this.config.penTypes.point)
.filter((pen) => pen.point?.type === DEFAULT_CONFIG.POINT_TYPE_ACTION);
actionPoints.forEach((pen) => {
const stationName = pen.label; // 如 "AP9"
@ -241,7 +241,6 @@ export class StorageLocationService {
return this.config.colors.default;
}
/**
* 更新单个动作点的边框颜色
* @param pointId 画布点ID
@ -306,10 +305,13 @@ export class StorageLocationService {
// 检查每个库位的状态是否有变化
for (const newLocation of newLocations) {
const currentLocation = currentLocations.find(loc => loc.id === newLocation.id);
if (!currentLocation ||
const currentLocation = currentLocations.find((loc) => loc.id === newLocation.id);
if (
!currentLocation ||
currentLocation.is_occupied !== newLocation.is_occupied ||
currentLocation.is_locked !== newLocation.is_locked) {
currentLocation.is_locked !== newLocation.is_locked ||
currentLocation.is_disabled !== newLocation.is_disabled
) {
return true;
}
}
@ -337,10 +339,13 @@ export class StorageLocationService {
// 检查每个库位的状态是否有变化
for (const newLocation of newLocations) {
const currentLocation = currentLocations.find(loc => loc.id === newLocation.id);
if (!currentLocation ||
const currentLocation = currentLocations.find((loc) => loc.id === newLocation.id);
if (
!currentLocation ||
currentLocation.is_occupied !== newLocation.is_occupied ||
currentLocation.is_locked !== newLocation.is_locked) {
currentLocation.is_locked !== newLocation.is_locked ||
currentLocation.is_disabled !== newLocation.is_disabled
) {
changedPointIds.add(pointId);
break;
}
@ -388,7 +393,11 @@ export class StorageLocationService {
for (const [pointId, list] of locationsByPointId.entries()) {
const inner = new Map<string, StorageState>();
list.forEach((loc) => {
inner.set(loc.layer_name, { occupied: loc.is_occupied, locked: loc.is_locked });
inner.set(loc.layer_name, {
occupied: loc.is_occupied,
locked: loc.is_locked,
disabled: loc.is_disabled,
});
});
storageStateMap.set(pointId, inner);
}
@ -438,6 +447,7 @@ export class StorageLocationService {
inner.set(layerName, {
occupied: new_status.is_occupied,
locked: new_status.is_locked,
disabled: new_status.is_disabled,
});
storageStateMap.set(pointId, inner);
@ -462,7 +472,7 @@ export class StorageLocationService {
// 监控库位状态
const ws = await monitorStorageLocationById(this.sceneId, {
interval: options.interval || this.config.monitoring.defaultInterval
interval: options.interval || this.config.monitoring.defaultInterval,
});
if (isNil(ws)) return;
@ -527,7 +537,7 @@ export class StorageLocationService {
const pens = createStorageLocationPens(pointId, storageLocations, pointRect, storageStateMap);
// 添加所有pen对象到编辑器，但不立即渲染
pens.forEach(pen => {
pens.forEach((pen) => {
this.editor!.addPen(pen, false, true, true);
});
@ -546,17 +556,20 @@ export class StorageLocationService {
public update(
pointId: string,
updates: string | Record<string, { occupied?: boolean; locked?: boolean }> | string[],
state?: { occupied?: boolean; locked?: boolean }
state?: { occupied?: boolean; locked?: boolean },
): void {
if (!this.editor) return;
// 处理库位名称列表更新（用于重新创建时更新状态）
if (Array.isArray(updates)) {
const states = updates.reduce((acc, locationName) => {
const states = updates.reduce(
(acc, locationName) => {
const state = storageStateMap.get(pointId)?.get(locationName) || { occupied: false, locked: false };
acc[locationName] = { occupied: !!state.occupied, locked: !!state.locked };
return acc;
}, {} as Record<string, { occupied: boolean; locked: boolean }>);
},
{} as Record<string, { occupied: boolean; locked: boolean }>,
);
this.update(pointId, states);
return;
}
@ -566,7 +579,7 @@ export class StorageLocationService {
// 同步到storageStateMap
this.syncStorageStateToMap(pointId, updates, {
occupied: state.occupied || false,
locked: state.locked || false
locked: state.locked || false,
});
// 查找并更新pen对象
@ -584,7 +597,7 @@ export class StorageLocationService {
// 批量更新pen对象
const storagePens = this.getStorageLocationPens(pointId);
storagePens.forEach(pen => {
storagePens.forEach((pen) => {
if (pen.storageLocation && pen.id) {
const locationName = pen.storageLocation.locationName;
const state = updates[locationName];
@ -607,17 +620,17 @@ export class StorageLocationService {
const { penTypes, tags } = this.config;
// 分别查找每种类型的库位pen对象
const storageLocationPens = this.editor.find(penTypes.storageLocation).filter(
(pen) => pen.tags?.includes(`${tags.pointPrefix}${pointId}`)
);
const storageLocationPens = this.editor
.find(penTypes.storageLocation)
.filter((pen) => pen.tags?.includes(`${tags.pointPrefix}${pointId}`));
const storageMorePens = this.editor.find(penTypes.storageMore).filter(
(pen) => pen.tags?.includes(`${tags.pointPrefix}${pointId}`)
);
const storageMorePens = this.editor
.find(penTypes.storageMore)
.filter((pen) => pen.tags?.includes(`${tags.pointPrefix}${pointId}`));
const storageBackgroundPens = this.editor.find(penTypes.storageBackground).filter(
(pen) => pen.tags?.includes(`${tags.pointPrefix}${pointId}`)
);
const storageBackgroundPens = this.editor
.find(penTypes.storageBackground)
.filter((pen) => pen.tags?.includes(`${tags.pointPrefix}${pointId}`));
const allStoragePens = [...storageLocationPens, ...storageMorePens, ...storageBackgroundPens];
@ -635,7 +648,7 @@ export class StorageLocationService {
private syncStorageStateToMap(
pointId: string,
locationName: string,
state: { occupied: boolean; locked: boolean }
state: { occupied: boolean; locked: boolean },
): void {
if (!storageStateMap.has(pointId)) {
storageStateMap.set(pointId, new Map());
@ -653,7 +666,7 @@ export class StorageLocationService {
private updatePenStorageState(
penId: string,
storageLocation: any,
state: { occupied?: boolean; locked?: boolean }
state: { occupied?: boolean; locked?: boolean },
): void {
if (!this.editor) return;
// 计算新旧状态，用于比较与更新
@ -686,12 +699,12 @@ export class StorageLocationService {
*/
private batchSyncStorageStateToMap(
pointId: string,
updates: Record<string, { occupied?: boolean; locked?: boolean }>
updates: Record<string, { occupied?: boolean; locked?: boolean }>,
): void {
Object.entries(updates).forEach(([locationName, state]) => {
this.syncStorageStateToMap(pointId, locationName, {
occupied: !!state.occupied,
locked: !!state.locked
locked: !!state.locked,
});
});
}
@ -706,13 +719,9 @@ export class StorageLocationService {
if (!this.editor) return [];
const { penTypes, tags } = this.config;
const searchTypes = includeMore
? `${penTypes.storageLocation},${penTypes.storageMore}`
: penTypes.storageLocation;
const searchTypes = includeMore ? `${penTypes.storageLocation},${penTypes.storageMore}` : penTypes.storageLocation;
return this.editor.find(searchTypes).filter(
(pen) => pen.tags?.includes(`${tags.pointPrefix}${pointId}`)
);
return this.editor.find(searchTypes).filter((pen) => pen.tags?.includes(`${tags.pointPrefix}${pointId}`));
}
/**
@ -723,7 +732,7 @@ export class StorageLocationService {
*/
private findStorageLocationPen(pointId: string, locationName: string): MapPen | undefined {
return this.getStorageLocationPens(pointId, false).find(
(pen) => pen.storageLocation?.locationName === locationName
(pen) => pen.storageLocation?.locationName === locationName,
);
}
@ -734,17 +743,16 @@ export class StorageLocationService {
public createAll(): void {
if (!this.editor) return;
this.editor.find(this.config.penTypes.point)
.filter(pen => pen.point?.type === MapPointType.动作点 && pen.point?.associatedStorageLocations?.length)
.forEach(pen => {
this.editor
.find(this.config.penTypes.point)
.filter((pen) => pen.point?.type === MapPointType.动作点 && pen.point?.associatedStorageLocations?.length)
.forEach((pen) => {
if (pen.id && pen.point?.associatedStorageLocations) {
this.create(pen.id, pen.point.associatedStorageLocations);
}
});
}
/**
* 清理资源
*/
@ -761,17 +769,17 @@ export class StorageLocationService {
* 库位状态类型定义
*/
export interface StorageLocationState {
occupied: boolean
locked: boolean
occupied: boolean;
locked: boolean;
}
/**
* 库位更新操作类型
*/
export interface StorageLocationUpdate {
pointId: string
locationName: string
state: Partial<StorageLocationState>
pointId: string;
locationName: string;
state: Partial<StorageLocationState>;
}
/**
@ -806,7 +814,7 @@ export class StorageLocationUpdater {
update(
pointId: string,
updates: string | Record<string, Partial<StorageLocationState>>,
state?: Partial<StorageLocationState>
state?: Partial<StorageLocationState>,
): this {
this.service.update(pointId, updates, state);
return this;