53 lines
2.1 KiB
Markdown
53 lines
2.1 KiB
Markdown
|
# 电梯状态实时更新修复说明
|
|||
|
|
|
|||
|
|
## 问题分析
|
|||
|
|
电梯详情卡片中的状态字段（连接状态、当前楼层、电梯状态等）没有实时更新，而门区域的详情卡片可以正常实时更新。
|
|||
|
|
|
|||
|
|
## 根本原因
|
|||
|
|
- **门区域**使用`areasTick`计算属性跟踪所有区域状态变化，确保响应式更新
|
|||
|
|
- **电梯点**缺少类似的`pointsTick`机制，导致状态更新时组件无法响应
|
|||
|
|
|
|||
|
|
## 修复方案
|
|||
|
|
参考门区域的实现，为电梯点添加相同的响应式更新机制：
|
|||
|
|
|
|||
|
|
### 1. 添加pointsTick响应式跟踪
|
|||
|
|
```typescript
|
|||
|
|
// 订阅点位集合变化（含设备状态/连接状态），用于触发详情面板的响应式刷新
|
|||
|
|
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计算属性
|
|||
|
|
```typescript
|
|||
|
|
const pen = computed<MapPen | undefined>(() => {
|
|||
|
|
// 引用 pointsTick 以建立依赖关系
|
|||
|
|
void pointsTick.value;
|
|||
|
|
return editor.value.getPenById(props.current);
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 创建响应式状态计算属性
|
|||
|
|
```typescript
|
|||
|
|
// 电梯连接状态、当前楼层、状态文本和颜色都添加响应式支持
|
|||
|
|
const elevatorStatusText = computed(() => {
|
|||
|
|
void pointsTick.value;
|
|||
|
|
// ...状态计算逻辑
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 更新模板绑定
|
|||
|
|
将模板中的电梯状态显示改为使用新的计算属性，确保实时更新。
|
|||
|
|
|
|||
|
|
## 修复效果
|
|||
|
|
- ✅ 电梯连接状态实时更新
|
|||
|
|
- ✅ 当前楼层实时更新
|
|||
|
|
- ✅ 电梯状态（上行/下行/门状态）实时更新
|
|||
|
|
- ✅ 与门区域保持一致的响应式行为
|
|||
|
|
|
|||
|
|
## 技术原理
|
|||
|
|
通过`pointsTick`计算属性，当编辑器中的任何点位状态发生变化时（通过WebSocket更新），都会触发字符串重新计算，进而依赖该计算属性的所有组件都会重新渲染，实现了实时更新的效果。
|
|||
|
|
|
|||
|
|
这种实现方式确保了UI能够实时反映电梯状态的最新数据，解决了状态显示不同步的问题。
|