feat(elevator): 在电梯图标右侧添加当前楼层显示,并修复store中楼层属性名以匹配数据字段

This commit is contained in:
xudan 2025-12-12 10:32:05 +08:00
parent 6c0836dfc4
commit 9e1827316a
2 changed files with 48 additions and 1 deletions

View File

@ -439,6 +439,53 @@ function drawElevatorMinimal(
elevatorDirection
);
// 在电梯图标右侧显示当前楼层
const { elevatorFloor } = elevatorData;
if (elevatorFloor && elevatorFloor > 0) {
ctx.save();
// 计算电梯图标的实际尺寸基于最大值48*60的比例
const iconWidth = Math.min(48, w * 0.8);
const iconHeight = Math.min(60, h * 0.8);
// 文字尺寸基于图标的较小边,保持比例
const baseSize = Math.min(iconWidth, iconHeight);
const fontSize = baseSize * 0.45; // 字体大小为图标较小边的45%
// 设置文字样式
ctx.font = `bold ${fontSize}px Arial, sans-serif`;
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
// 文字位置:电梯图标右侧,间距基于图标尺寸
const textX = x + w/2 + iconWidth/2 + iconWidth * 0.15; // 从图标中心右侧开始留15%图标宽度的间距
const textY = y + h/2; // 垂直居中
// 绘制楼层文字背景
const floorText = `${elevatorFloor}F`;
const textMetrics = ctx.measureText(floorText);
const textWidth = textMetrics.width;
const textHeight = fontSize * 1.2; // 文字高度
// 背景矩形尺寸基于字体大小
const bgPadding = fontSize * 0.25; // 背景内边距为字体大小的25%
const bgX = textX - bgPadding;
const bgY = textY - textHeight / 2;
const bgWidth = textWidth + bgPadding * 2;
const bgHeight = textHeight;
// 绘制半透明背景
ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
// 绘制楼层文字
ctx.fillStyle = '#ffffff'; // 白色文字
ctx.fillText(floorText, textX, textY);
ctx.restore();
}
// 状态渲染逻辑 - 只有断连状态才显示边框
if (!isConnected) {
// 离线状态 - 红色虚线(静态,不带动画)

View File

@ -246,7 +246,7 @@ export const useElevatorStore = defineStore('elevator', () => {
point: {
...((editorService.value.getPenById(penId) as any)?.point || {}),
isConnected: elevatorData.isConnected,
currentFloor: elevatorData.elevatorFloor,
elevatorFloor: elevatorData.elevatorFloor,
lastUpdate: elevatorData.lastUpdate,
// 保存原始后端数据
elevatorDirection: elevatorData.elevatorDirection,