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

refactor(elevator): 优化电梯状态渲染配色方案，统一方向指示器为绿色并简化drawElevatorMinimal调用

Browse Source
This commit is contained in:
xudan 2025-12-11 14:59:03 +08:00
parent ac503ca81b
commit 1fe2df5fc6
2 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/scene-editor.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
// 门区域功能改造：由助手自动插入 // 门区域功能改造：由助手自动插入
import { DOOR_AREA_TYPE } from '@api/map/door-area';
import { MapPointType } from '@api/map'; import { MapPointType } from '@api/map';
import { DOOR_AREA_TYPE } from '@api/map/door-area';
import { message, Modal } from 'ant-design-vue'; import { message, Modal } from 'ant-design-vue';
import JSZip from 'jszip'; import JSZip from 'jszip';
import { computed, onMounted, onUnmounted, provide, ref, type ShallowRef, shallowRef, watch } from 'vue'; import { computed, onMounted, onUnmounted, provide, ref, type ShallowRef, shallowRef, watch } from 'vue';

53
src/services/editor/editor-drawers.ts
View File

@ -60,8 +60,10 @@ function drawDisconnectedIcon(ctx: CanvasRenderingContext2D, cx: number, cy: num
* 3. 响应式设计：所有尺寸基于pen元素宽高动态计算，完美适配画布缩放 * 3. 响应式设计：所有尺寸基于pen元素宽高动态计算，完美适配画布缩放
* 4. 直观色彩： * 4. 直观色彩：
* - 红色虚线：离线状态 * - 红色虚线：离线状态
* - 绿色静态：开关门状态或门已开 * - 蓝色虚线边框：开关门中状态
* - 蓝色静态边框+右侧箭头：上行/下行 * - 实线绿色边框：门已开状态
* - 蓝色实线边框：门已关状态
* - 绿色箭头：上行/下行方向指示
* - 金色：停止 * - 金色：停止
* - 灰色：未知状态 * - 灰色：未知状态
* 5. 静态箭头：上下行时在边框右侧显示静态箭头，简洁清晰 * 5. 静态箭头：上下行时在边框右侧显示静态箭头，简洁清晰
@ -191,54 +193,54 @@ function drawElevatorMinimal(
// 状态渲染逻辑 - 静态显示，无动画 // 状态渲染逻辑 - 根据需求优化配色方案
if (!isConnected) { if (!isConnected) {
// 离线状态 - 红色虚线 // 离线状态 - 红色虚线
drawMinimalFrame('#FF3B30', 0.8, true); drawMinimalFrame('#FF4757', 0.8, true);
} else { } else {
// 在线状态根据具体状态渲染 // 在线状态根据具体状态渲染
switch (elevatorFrontDoorStatus) { switch (elevatorFrontDoorStatus) {
case 2: { // 正在开关门 case 2: { // 正在开关门 - 蓝色虚线边框 + 绿色箭头
// 绿色静态边框，同时显示上行下行箭头 // 蓝色虚线边框表示操作中
drawMinimalFrame('#34C759', 0.8); drawMinimalFrame('#69c6f5', 0.8, true);
if (elevatorDirection === 2) { // 向上 if (elevatorDirection === 2) { // 向上
drawDirectionSide('up', '#007AFF'); // 使用蓝色箭头 drawDirectionSide('up', '#00D26A'); // 绿色箭头
} else if (elevatorDirection === 3) { // 向下 } else if (elevatorDirection === 3) { // 向下
drawDirectionSide('down', '#007AFF'); // 使用蓝色箭头 drawDirectionSide('down', '#00D26A'); // 绿色箭头
} }
break; break;
} }
case 3: { // 门已开 case 3: { // 门已开 - 实线绿色边框 + 绿色箭头
// 绿色静态边框，同时显示上行下行箭头 // 实线绿色边框表示可通行状态
drawMinimalFrame('#34C759', 0.8); drawMinimalFrame('#00D26A', 0.8);
if (elevatorDirection === 2) { // 向上 if (elevatorDirection === 2) { // 向上
drawDirectionSide('up', '#007AFF'); // 使用蓝色箭头 drawDirectionSide('up', '#00D26A'); // 绿色箭头
} else if (elevatorDirection === 3) { // 向下 } else if (elevatorDirection === 3) { // 向下
drawDirectionSide('down', '#007AFF'); // 使用蓝色箭头 drawDirectionSide('down', '#00D26A'); // 绿色箭头
} }
break; break;
} }
case 1: { // 门已关 case 1: { // 门已关 - 根据方向显示
if (elevatorDirection === 2) { // 向上 if (elevatorDirection === 2) { // 向上
// 蓝色静态边框 + 右侧向上箭头 // 蓝色边框 + 绿色向上箭头
drawMinimalFrame('#007AFF', 0.8); drawMinimalFrame('#69c6f5', 0.8);
drawDirectionSide('up', '#007AFF'); drawDirectionSide('up', '#00D26A'); // 绿色箭头
} else if (elevatorDirection === 3) { // 向下 } else if (elevatorDirection === 3) { // 向下
// 蓝色静态边框 + 右侧向下箭头 // 蓝色边框 + 绿色向下箭头
drawMinimalFrame('#007AFF', 0.8); drawMinimalFrame('#69c6f5', 0.8);
drawDirectionSide('down', '#007AFF'); drawDirectionSide('down', '#00D26A'); // 绿色箭头
} else { // 停止 } else { // 停止
// 金色静态边框 // 金色静态边框 - 中性状态
drawMinimalFrame('#FFCC00', 0.7); drawMinimalFrame('#FFB700', 0.7);
} }
break; break;
} }
default: { // 未知状态 default: { // 未知状态
// 灰色静态边框 // 灰色静态边框
drawMinimalFrame('#8E8E93', 0.5); drawMinimalFrame('#8B8B8B', 0.5);
break; break;
} }
} }
@ -483,8 +485,7 @@ export function drawPoint(ctx: CanvasRenderingContext2D, pen: MapPen): void {
if (type === MapPointType.电梯点) { if (type === MapPointType.电梯点) {
// 直接传入包含后端字段的 pen.point 数据 // 直接传入包含后端字段的 pen.point 数据
if (pen.point) { if (pen.point) {
const currentTime = performance.now(); drawElevatorMinimal(ctx, pen, pen.point);
drawElevatorMinimal(ctx, pen, pen.point, currentTime);
} }
} }
break; break;