diff --git a/src/components/equipments/SevenSegmentDisplay.vue b/src/components/equipments/SevenSegmentDisplay.vue index 327891f..4e80e3b 100644 --- a/src/components/equipments/SevenSegmentDisplay.vue +++ b/src/components/equipments/SevenSegmentDisplay.vue @@ -78,6 +78,7 @@ const pinRefs = ref>({}); interface SevenSegmentDisplayProps { size?: number; color?: string; + AFTERGLOW_DURATION?: number; // 余晖持续时间,单位毫秒 pins?: { pinId: string; constraint: string; @@ -133,40 +134,99 @@ const segmentStates = ref({ dp: false, }); +// 余晖状态 +const afterglowStates = ref({ + a: false, + b: false, + c: false, + d: false, + e: false, + f: false, + g: false, + dp: false, +}); + +// 余晖定时器 +const afterglowTimers = ref>({}); + // 判断段是否激活 function isSegmentActive( segment: "a" | "b" | "c" | "d" | "e" | "f" | "g" | "dp", ): boolean { - return segmentStates.value[segment]; + return segmentStates.value[segment] || afterglowStates.value[segment]; } // 更新引脚状态的函数 function updateSegmentStates() { + // 先获取COM口状态 + const comPin = props.pins.find(p => p.pinId === "COM"); + let comActive = true; + if (comPin && comPin.constraint) { + const comState = getConstraintState(comPin.constraint); + if (props.cathodeType === "anode") { + // anode模式下,COM为高电平则所有段都熄灭 + comActive = comState !== "high"; + } + // 可扩展其他模式 + } + for (const pin of props.pins) { if (["a", "b", "c", "d", "e", "f", "g", "dp"].includes(pin.pinId)) { + // 如果COM未激活,段直接进入熄灭(带余晖效果) + if (!comActive) { + handleSegmentStateChange(pin.pinId, false); + continue; + } + // 如果constraint为空,则默认为未激活状态 if (!pin.constraint) { - segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = - false; + handleSegmentStateChange(pin.pinId, false); continue; } const pinState = getConstraintState(pin.constraint); - - // 根据阴极/阳极类型反转逻辑 + let newState: boolean; if (props.cathodeType === "common") { // 共阴极: 高电平激活段 - segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = - pinState === "high"; + newState = pinState === "high"; } else { // 共阳极: 低电平激活段 - segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = - pinState === "low"; + newState = pinState === "low"; } + handleSegmentStateChange(pin.pinId, newState); } } } +// 处理段状态变化 +function handleSegmentStateChange(segmentId: string, newState: boolean) { + const typedSegmentId = segmentId as keyof typeof segmentStates.value; + const currentState = segmentStates.value[typedSegmentId]; + + // 更新实际状态 + segmentStates.value[typedSegmentId] = newState; + + // 处理余晖效果 + if (currentState && !newState) { + // 从激活变为非激活,启动余晖 + if (afterglowTimers.value[segmentId]) { + window.clearTimeout(afterglowTimers.value[segmentId]); + } + afterglowStates.value[typedSegmentId] = true; + afterglowTimers.value[segmentId] = window.setTimeout(() => { + afterglowStates.value[typedSegmentId] = false; + delete afterglowTimers.value[segmentId]; + }, props.AFTERGLOW_DURATION ?? 700); + } else if (newState) { + // 重新激活,清除余晖 + if (afterglowTimers.value[segmentId]) { + window.clearTimeout(afterglowTimers.value[segmentId]); + delete afterglowTimers.value[segmentId]; + } + afterglowStates.value[typedSegmentId] = false; + } +} + // 监听约束状态变化 function onConstraintChange(constraint: string, level: string) { const affectedPin = props.pins.find((pin) => pin.constraint === constraint); @@ -186,6 +246,10 @@ onMounted(() => { onUnmounted(() => { // 清理约束状态监听 + // 清理所有余晖定时器 + Object.values(afterglowTimers.value).forEach(timerId => { + if (timerId) window.clearTimeout(timerId); + }); }); // 暴露属性和方法