电梯状态实时更新修复说明

问题分析

电梯详情卡片中的状态字段（连接状态、当前楼层、电梯状态等）没有实时更新，而门区域的详情卡片可以正常实时更新。

根本原因

门区域使用areasTick计算属性跟踪所有区域状态变化，确保响应式更新
电梯点缺少类似的pointsTick机制，导致状态更新时组件无法响应

修复方案

参考门区域的实现，为电梯点添加相同的响应式更新机制：

1. 添加pointsTick响应式跟踪

// 订阅点位集合变化（含设备状态/连接状态），用于触发详情面板的响应式刷新
const pointsTick = computed<string>(() =>
  editor.value.points.value
    .map((v: any) => `${v.id}:${v?.point?.isConnected ?? ''}:${v?.point?.elevatorDirection ?? ''}:${v?.point?.elevatorFrontDoorStatus ?? ''}:${v?.point?.currentFloor ?? ''}`)
    .join('|'),
);

2. 优化pen计算属性

const pen = computed<MapPen | undefined>(() => {
  // 引用 pointsTick 以建立依赖关系
  void pointsTick.value;
  return editor.value.getPenById(props.current);
});

3. 创建响应式状态计算属性

// 电梯连接状态、当前楼层、状态文本和颜色都添加响应式支持
const elevatorStatusText = computed(() => {
  void pointsTick.value;
  // ...状态计算逻辑
});

4. 更新模板绑定

将模板中的电梯状态显示改为使用新的计算属性，确保实时更新。

修复效果

✅ 电梯连接状态实时更新
✅ 当前楼层实时更新
✅ 电梯状态（上行/下行/门状态）实时更新
✅ 与门区域保持一致的响应式行为

技术原理

通过pointsTick计算属性，当编辑器中的任何点位状态发生变化时（通过WebSocket更新），都会触发字符串重新计算，进而依赖该计算属性的所有组件都会重新渲染，实现了实时更新的效果。

这种实现方式确保了UI能够实时反映电梯状态的最新数据，解决了状态显示不同步的问题。

2.1 KiB Raw Blame History Unescape Escape