feat: Schleifen- und Isolationsfehler-Anzeige mit wechselndem Icon integriert

- Implementiert Schleifenfehler-Anzeige, die den Text zwischen "Schleifenfehler" und einem Warn-Icon wechselt, wenn der Fehler auftritt (kueAlarm2[slotIndex] === 1).
- Isolationsfehler-Anzeige aktualisiert, die zwischen "Isolationsfehler" und einem Warn-Icon wechselt, wenn der Fehler auftritt (kueAlarm1[slotIndex] === 1).
- Priorisierte Anzeige mit rot hervorgehobenem Text für alle Fehlerzustände.
This commit is contained in:
ISA
2024-10-27 16:54:39 +01:00
parent 60aedd96ee
commit a97c093c16
2 changed files with 73 additions and 9 deletions

View File

@@ -24,6 +24,11 @@ function Kue705FO({
const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
const [groundFaultDisplayText, setGroundFaultDisplayText] =
useState("Erdschluss");
const [loopFaultDisplayText, setLoopFaultDisplayText] =
useState("Schleifenfehler");
const [isoFaultDisplayText, setIsoFaultDisplayText] =
useState("Isolationsfehler");
const [loading, setLoading] = useState(false);
const [currentDisplayValue, setCurrentDisplayValue] = useState(
schleifenwiderstand || "0"
@@ -362,6 +367,51 @@ function Kue705FO({
}
}, [slotIndex, isolationswert]);
// Intervall für den Wechsel der Anzeige zwischen "Schleifenfehler" und dem Icon
useEffect(() => {
if (window.kueAlarm2[slotIndex] === 1) {
const intervalId = setInterval(() => {
setLoopFaultDisplayText((prevText) =>
prevText === "Schleifenfehler" ? (
<i
className="bi bi-exclamation-triangle"
style={{ fontSize: "24px" }}
></i>
) : (
"Schleifenfehler"
)
);
}, 2000);
return () => clearInterval(intervalId);
} else {
setLoopFaultDisplayText(isolationswert || ">200");
}
}, [slotIndex, isolationswert]);
// Intervall für den Wechsel der Anzeige zwischen "Isolationsfehler" und dem Icon
useEffect(() => {
if (window.kueAlarm1[slotIndex] === 1) {
const intervalId = setInterval(() => {
setIsoFaultDisplayText((prevText) =>
prevText === "Isolationsfehler" ? (
<i
className="bi bi-exclamation-triangle"
style={{ fontSize: "24px" }}
></i>
) : (
"Isolationsfehler"
)
);
}, 2000);
return () => clearInterval(intervalId);
} else {
setIsoFaultDisplayText(isolationswert || ">200");
}
}, [slotIndex, isolationswert]);
//------------------------------------------------
return (
<div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
{isModulPresent ? (
@@ -405,14 +455,15 @@ function Kue705FO({
<span className="text-white text-[10px]">Alarm</span>
</div>
</div>
{/* Anzeige für Isolationsfehler, Aderbruch oder Erdschluss */}
{/* Anzeige für Isolationsfehler, Aderbruch, Erdschluss oder Schleifenfehler */}
<div className="relative mt-[50px] mx-auto bg-black text-white w-[100px] h-[40px] flex items-center justify-center text-[18px] z-10">
<div className="text-center">
<span
className={
window.kueCableBreak[slotIndex] === 1 ||
window.kueGroundFault[slotIndex] === 1 ||
window.kueAlarm1[slotIndex] === 1
window.kueAlarm1[slotIndex] === 1 ||
window.kueAlarm2[slotIndex] === 1
? "text-red-500 text-[14px]" // Rot und kleinere Schrift für Alarme
: ""
}
@@ -423,12 +474,15 @@ function Kue705FO({
: window.kueGroundFault[slotIndex] === 1
? groundFaultDisplayText // Erdschluss-Anzeige
: window.kueAlarm1[slotIndex] === 1
? "Isolationsfehler" // Isolationsfehler-Anzeige
? isoFaultDisplayText // Isolationsfehler-Anzeige mit Icon
: window.kueAlarm2[slotIndex] === 1
? loopFaultDisplayText // Schleifenfehler-Anzeige mit Icon
: isolationswert || ">200"}{" "}
</span>
{window.kueCableBreak[slotIndex] !== 1 &&
window.kueGroundFault[slotIndex] !== 1 &&
window.kueAlarm1[slotIndex] !== 1 && (
window.kueAlarm1[slotIndex] !== 1 &&
window.kueAlarm2[slotIndex] !== 1 && (
<div className="text-[8px]">ISO MOhm</div>
)}
</div>