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

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

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

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