fest: Aderbruch anzeigen in Iso-Display

- Schriftgröße und Farbe für "Aderbruch" angepasst (kleiner und in Rot)
- Breite des isoDisplay-Bereichs erweitert für bessere Lesbarkeit
This commit is contained in:
ISA
2024-10-27 14:33:39 +01:00
parent 26588ff104
commit c96101b194
2 changed files with 45 additions and 11 deletions

View File

@@ -18,7 +18,10 @@ function Kue705FO({
const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
const [currentModulName, setCurrentModulName] = useState(modulName);
const [activeButton, setActiveButton] = useState("Schleife");
const [displayText, setDisplayText] = useState("Schleifenwiderstand [kOhm]");
const [loopDisplayText, setloopDisplayText] = useState(
"Schleifenwiderstand [kOhm]"
);
const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
const [loading, setLoading] = useState(false);
const [currentDisplayValue, setCurrentDisplayValue] = useState(
schleifenwiderstand || "0"
@@ -269,11 +272,11 @@ function Kue705FO({
const handleButtonClick = (button) => {
if (button === "Schleife") {
setActiveButton("Schleife");
setDisplayText("Schleifenwiderstand [kOhm]");
setloopDisplayText("Schleifenwiderstand [kOhm]");
setCurrentDisplayValue(schleifenwiderstand || "0");
} else if (button === "TDR") {
setActiveButton("TDR");
setDisplayText("Entfernung [Km]");
setloopDisplayText("Entfernung [Km]");
setCurrentDisplayValue(tdrLocation || "0");
}
};
@@ -311,6 +314,24 @@ function Kue705FO({
return () => clearInterval(interval); // Bereinigung bei Entladen der Komponente
}, [slotIndex]);
//-------------------------------------------------
// Intervall für den Wechsel der Anzeige zwischen "Aderbruch" und ">200 MOhm"
useEffect(() => {
if (window.kueCableBreak[slotIndex] === 1) {
const intervalId = setInterval(() => {
setIsoDisplayText((prevText) =>
prevText === "Aderbruch" ? ">200 MOhm" : "Aderbruch"
);
}, 2000);
return () => clearInterval(intervalId);
} else {
setIsoDisplayText(isolationswert || ">200");
}
}, [slotIndex, isolationswert]);
//-------------------------------------------------
return (
<div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
{isModulPresent ? (
@@ -354,11 +375,24 @@ function Kue705FO({
<span className="text-white text-[10px]">Alarm</span>
</div>
</div>
<div className="relative mt-[50px] mx-auto bg-black text-white w-[80px] h-[40px] flex items-center justify-center text-[18px] z-10">
{/* isoDisplay: Zeigt den Isolationswiderstand oder Aderbruch an */}
<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>{isolationswert || ">200"}</span>
<div className="text-[8px]">ISO MOhm</div>
<span
className={
window.kueCableBreak[slotIndex] === 1
? "text-red-500 text-[14px]" // Rot und kleinere Schrift für Aderbruch
: ""
}
>
{/* Aderbruch anzeigen, wenn Aderbruch vorhanden ist isoDisplayText*/}
{window.kueCableBreak[slotIndex] === 1
? "Aderbruch"
: isolationswert || ">200"}
</span>
{window.kueCableBreak[slotIndex] !== 1 && (
<div className="text-[8px]">ISO MOhm</div>
)}
</div>
</div>
@@ -373,10 +407,10 @@ function Kue705FO({
{kueVersion}
</div>
</div>
{/* loopDisplay: Zeigt Schleifenwiderstand oder TDR-Distanz an, je nach Modus */}
<div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
<span className="text-black text-[6px] absolute top-[2px] left-1 mt-1">
{displayText}
{loopDisplayText}
</span>
<div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">