7fb289abf3
- Implemented conditional check before removing existing kueData.js script to avoid NotFoundError. - Added dynamic script reloading to fetch the latest alarm status without browser refresh. - Improved update mechanism for alarm status based on latest kueData.js values.
487 lines
17 KiB
JavaScript
487 lines
17 KiB
JavaScript
"use client"; // components/modules/Kue705FO.jsx
|
|
import React, { useState, useEffect } from "react";
|
|
import ReactModal from "react-modal";
|
|
import Chart from "chart.js/auto";
|
|
import KueModal from "../modales/KueModal";
|
|
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
|
|
|
function Kue705FO({
|
|
isolationswert,
|
|
schleifenwiderstand,
|
|
modulName,
|
|
kueVersion = "V4.19",
|
|
kueOnline,
|
|
slotIndex,
|
|
tdrLocation,
|
|
alarmStatus,
|
|
}) {
|
|
const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
|
|
const [currentModulName, setCurrentModulName] = useState(modulName);
|
|
const [activeButton, setActiveButton] = useState("Schleife");
|
|
const [displayText, setDisplayText] = useState("Schleifenwiderstand [kOhm]");
|
|
const [loading, setLoading] = useState(false);
|
|
const [currentDisplayValue, setCurrentDisplayValue] = useState(
|
|
schleifenwiderstand || "0"
|
|
);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [showChartModal, setShowChartModal] = useState(false); // Modal für die Messkurve
|
|
const [chartData, setChartData] = useState(null); // State für die geladene Chart-Daten
|
|
|
|
const handleOpenModal = () => {
|
|
setShowModal(true);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setShowModal(false);
|
|
};
|
|
|
|
// Funktion zum Anzeigen des Chart-Modals
|
|
const handleOpenChartModal = () => {
|
|
setShowChartModal(true);
|
|
if (activeButton === "TDR") {
|
|
loadTDRChartData(); // Lade TDR-Daten, wenn der TDR-Button aktiv ist
|
|
} else {
|
|
loadLoopChartData(); // Andernfalls lade die Schleifenmessdaten
|
|
}
|
|
};
|
|
|
|
const handleCloseChartModal = () => {
|
|
setShowChartModal(false);
|
|
};
|
|
const environment = process.env.NODE_ENV || "production";
|
|
let fileData;
|
|
// Daten laden und den TDR-Chart erstellen
|
|
const loadTDRChartData = () => {
|
|
const slot = slotIndex;
|
|
//const fileData = `../cpl?lastTDR/slot${slot}.json`; // TDR-Daten je nach Slot laden
|
|
if (environment === "production") {
|
|
fileData = `/CPL?/CPL/lastTDR/slot${slot}.json`; // Produktions-Pfad
|
|
} else {
|
|
fileData = `/CPLmockData/lastTDR/slot${slot}.json`; // Mock-Daten-Pfad für Entwicklung
|
|
}
|
|
|
|
fetch(fileData)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setChartData(data); // Daten setzen
|
|
createTDRChart(data); // Chart für TDR-Messung erstellen
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler beim Laden der TDR-Messkurvendaten:", error);
|
|
});
|
|
};
|
|
|
|
// Daten laden und den Schleifenmessungs-Chart erstellen
|
|
const loadLoopChartData = () => {
|
|
const slot = slotIndex;
|
|
//const fileData = `../cpl?4000values/slot${slot}.json`; // Schleifenmessdaten je nach Slot laden
|
|
if (environment === "production") {
|
|
fileData = `/CPL?/CPL/4000values/slot${slot}.json`; // Produktions-Pfad
|
|
} else {
|
|
fileData = `/CPLmockData/4000values/slot${slot}.json`; // Mock-Daten-Pfad für Entwicklung
|
|
}
|
|
|
|
fetch(fileData)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setChartData(data); // Daten setzen
|
|
createChart(data, "Schleifenmesskurve"); // Chart für Schleifenmessung erstellen
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error);
|
|
});
|
|
};
|
|
|
|
// Funktion zum Erstellen des Charts
|
|
// Funktion zum Erstellen des Charts
|
|
const createChart = (data) => {
|
|
const ctx = document.getElementById("myChart").getContext("2d");
|
|
|
|
// Funktion zur Umwandlung des Datums in das deutsche Format
|
|
const formatToGermanDate = (timestamp) => {
|
|
const date = new Date(timestamp);
|
|
return new Intl.DateTimeFormat("de-DE", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
}).format(date);
|
|
};
|
|
// Ausgabe der Chart-Daten in der Konsole mit Slot-Informationen
|
|
console.log(`Chart-Daten für Slot ${slotIndex + 1}:`, data);
|
|
new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
labels: data.map((row) => formatToGermanDate(row.t)).reverse(), // Zeitwerte ins deutsche Format umwandeln und umkehren
|
|
datasets: [
|
|
{
|
|
label: "Isolationswiderstand (MOhm)", // Einheit hinzugefügt
|
|
data: data.map((row) => row.m).reverse(),
|
|
borderColor: "#00AEEF",
|
|
fill: false,
|
|
yAxisID: "y",
|
|
},
|
|
{
|
|
label: "Schleifenwiderstand (kOhm)", // Einheit hinzugefügt
|
|
data: data.map((row) => row.n).reverse(),
|
|
borderColor: "black",
|
|
fill: false,
|
|
yAxisID: "y1",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
type: "linear",
|
|
position: "left",
|
|
title: {
|
|
display: true,
|
|
text: "MOhm", // Einheit für linke Achse hinzugefügt
|
|
},
|
|
},
|
|
y1: {
|
|
type: "linear",
|
|
position: "right",
|
|
title: {
|
|
display: true,
|
|
text: "kOhm", // Einheit für rechte Achse hinzugefügt
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// Funktion zum Erstellen des TDR-Charts
|
|
const createTDRChart = (dataTDR) => {
|
|
const ctx = document.getElementById("myChart").getContext("2d");
|
|
console.log(`TDR-Daten für Slot ${slotIndex + 1}:`, dataTDR);
|
|
new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
labels: dataTDR.map((row) => row.t), // Entfernung oder Zeit auf der x-Achse
|
|
datasets: [
|
|
{
|
|
label: "Pegel",
|
|
data: dataTDR.map((row) => row.m), // Nur Pegel auf der y-Achse
|
|
borderColor: "#00AEEF",
|
|
borderWidth: 1,
|
|
pointBorderWidth: 0,
|
|
pointStyle: false,
|
|
fill: false,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
type: "linear",
|
|
position: "left",
|
|
},
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// Funktion für die TDR-Messung
|
|
const goTDR = () => {
|
|
//-------------------------------------------------
|
|
/* const [isClient, setIsClient] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// This will only run in the client/browser, not on the server
|
|
setIsClient(true);
|
|
}, []);
|
|
|
|
if (!isClient) {
|
|
return null; // or a loading spinner
|
|
} */
|
|
//-------------------------------------------------
|
|
let slot = slotIndex;
|
|
|
|
if (slot >= 32) {
|
|
return;
|
|
}
|
|
|
|
let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
|
|
|
|
setLoading(true);
|
|
alert(`TDR wird für Slot ${slot} gestartet...`);
|
|
fetch(`/CPL?Service/KUEdetailTDR.ACP&KTT${slotFormat}=1&slot=${slot}`, {
|
|
method: "GET",
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
alert(`TDR erfolgreich gestartet für Slot ${slot}`);
|
|
console.log("TDR erfolgreich gestartet für Slot", slot);
|
|
} else {
|
|
console.error("Fehler beim Senden der TDR-Anfrage");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler:", error);
|
|
})
|
|
.finally(() => setLoading(false));
|
|
};
|
|
|
|
// Funktion für die Schleifenmessung
|
|
const goLoop = () => {
|
|
let slot = slotIndex;
|
|
|
|
if (slot >= 32) {
|
|
return;
|
|
}
|
|
|
|
let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
|
|
|
|
setLoading(true); // Setze den Ladezustand auf true
|
|
alert(`Schleifenmessung wird für Slot ${slot} gestartet...`);
|
|
|
|
fetch(`/CPL?Service/KUEdetail.HTML&KS_${slotFormat}=1&slot=${slot}`, {
|
|
method: "GET",
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
alert(`Schleifenmessung erfolgreich gestartet für Slot ${slot}`);
|
|
console.log("Schleifenmessung erfolgreich gestartet für Slot", slot);
|
|
} else {
|
|
alert("Fehler beim Starten der Schleifenmessung.");
|
|
console.error("Fehler beim Senden der Schleifen-Anfrage");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
alert("Ein Fehler ist aufgetreten.");
|
|
console.error("Fehler:", error);
|
|
})
|
|
.finally(() => setLoading(false)); // Ladezustand zurücksetzen
|
|
};
|
|
|
|
const handleModulNameChange = (newName) => {
|
|
setCurrentModulName(newName);
|
|
};
|
|
|
|
// Überprüfe, ob ein Modul im Slot vorhanden ist
|
|
const isModulPresent = kueOnline === 1; // Since you're passing the status directly now
|
|
|
|
const handleButtonClick = (button) => {
|
|
if (button === "Schleife") {
|
|
setActiveButton("Schleife");
|
|
setDisplayText("Schleifenwiderstand [kOhm]");
|
|
setCurrentDisplayValue(schleifenwiderstand || "0");
|
|
} else if (button === "TDR") {
|
|
setActiveButton("TDR");
|
|
setDisplayText("Entfernung [Km]");
|
|
setCurrentDisplayValue(tdrLocation || "0");
|
|
}
|
|
};
|
|
|
|
// Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
|
|
const handleRefreshClick = () => {
|
|
if (activeButton === "Schleife") {
|
|
goLoop(); // Wenn Schleife aktiv ist, starte goLoop
|
|
} else if (activeButton === "TDR") {
|
|
goTDR(); // Wenn TDR aktiv ist, starte goTDR
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
setCurrentModulName(modulName);
|
|
}, [modulName]);
|
|
|
|
useEffect(() => {
|
|
setCurrentDisplayValue(schleifenwiderstand);
|
|
}, [schleifenwiderstand]);
|
|
useEffect(() => {
|
|
const updateAlarmStatus = () => {
|
|
const alarmStatus =
|
|
(window.kueAlarm1 && window.kueAlarm1[slotIndex]) ||
|
|
(window.kueAlarm2 && window.kueAlarm2[slotIndex]) ||
|
|
(window.kueCableBreak && window.kueCableBreak[slotIndex]) ||
|
|
(window.kueGroundFault && window.kueGroundFault[slotIndex]);
|
|
|
|
setCurrentAlarmStatus(alarmStatus); // Aktualisiere den Alarmstatus
|
|
};
|
|
|
|
// Aktualisierung sofort und alle 5 Sekunden
|
|
updateAlarmStatus();
|
|
const interval = setInterval(updateAlarmStatus, 5000);
|
|
|
|
return () => clearInterval(interval); // Bereinigung bei Entladen der Komponente
|
|
}, [slotIndex]);
|
|
|
|
return (
|
|
<div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
|
|
{isModulPresent ? (
|
|
<>
|
|
<div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
|
|
<div className="flex items-start justify-between h-[30px]">
|
|
<div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
|
|
<span className="text-white text-[10px]">{slotIndex + 1}</span>
|
|
</div>
|
|
|
|
<h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>
|
|
|
|
<button
|
|
onClick={handleOpenModal}
|
|
className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
|
|
>
|
|
<span className="text-white text-[20px]">⚙</span>
|
|
</button>
|
|
</div>
|
|
|
|
<KueModal
|
|
showModal={showModal}
|
|
onClose={handleCloseModal}
|
|
slot={slotIndex}
|
|
onModulNameChange={handleModulNameChange}
|
|
/>
|
|
{/*
|
|
Bei Kabelbruch (cableBreak), Erdschluss (groundFault), Isolationsfehler (measure1Alarm) oder Schleifenfehler (measure2Alarm)
|
|
*/}
|
|
<div className="flex flex-col mt-[10px] ml-[10px]">
|
|
<div className="flex items-center">
|
|
<div className="w-[10px] h-[10px] bg-green-500 rounded-full mr-2"></div>
|
|
<span className="text-white text-[10px]">Betrieb</span>
|
|
</div>
|
|
<div className="flex items-center mt-1">
|
|
<div
|
|
className={`w-[10px] h-[10px] rounded-full mr-2 ${
|
|
alarmStatus ? "bg-red-500" : "bg-gray-300"
|
|
}`}
|
|
></div>
|
|
<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">
|
|
<div className="text-center">
|
|
<span>{isolationswert || ">200"}</span>
|
|
<div className="text-[8px]">ISO MOhm</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
|
|
<div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>
|
|
|
|
<div className="absolute bottom-[20px] left-0 right-0 text-black text-[10px] bg-gray-300 p-1 text-center">
|
|
{currentModulName || "Test1"}
|
|
</div>
|
|
|
|
<div className="absolute bottom-1 right-1 text-black text-[8px]">
|
|
{kueVersion}
|
|
</div>
|
|
</div>
|
|
|
|
<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}
|
|
</span>
|
|
|
|
<div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
|
|
<button
|
|
onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
|
|
className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
|
|
disabled={loading} // Disable button while loading
|
|
>
|
|
<span className="text-white text-[18px]">⟳</span>
|
|
</button>
|
|
|
|
<div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2 w-[100px] flex justify-center items-center">
|
|
<div className="text-center text-black text-[10px]">
|
|
<p>{currentDisplayValue + " KOhm"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex mt-2 space-x-1">
|
|
<button
|
|
onClick={() => handleButtonClick("Schleife")}
|
|
className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
|
|
activeButton === "Schleife"
|
|
? "bg-littwin-blue"
|
|
: "bg-gray-400"
|
|
}`}
|
|
>
|
|
Schleife
|
|
</button>
|
|
<button
|
|
onClick={() => handleButtonClick("TDR")}
|
|
className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
|
|
window.tdrActive[slotIndex] === 0
|
|
? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau
|
|
: activeButton === "TDR"
|
|
? "bg-littwin-blue" // Aktiviert: Littwin Blau
|
|
: "bg-gray-400" // Nicht geklickt: Dunkelgrau
|
|
}`}
|
|
disabled={window.tdrActive[slotIndex] === 0} // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
|
|
>
|
|
TDR
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleOpenChartModal} // Öffnet das Chart-Modal
|
|
className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
|
|
>
|
|
Messkurve
|
|
</button>
|
|
</div>
|
|
|
|
{/* Modal für Messkurve */}
|
|
{showChartModal && (
|
|
<ReactModal
|
|
isOpen={showChartModal}
|
|
onRequestClose={handleCloseChartModal}
|
|
ariaHideApp={false}
|
|
style={{
|
|
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "95%",
|
|
maxWidth: "1200px",
|
|
height: "650px",
|
|
padding: "10px",
|
|
},
|
|
}}
|
|
>
|
|
<button
|
|
onClick={handleCloseChartModal}
|
|
style={{
|
|
position: "absolute",
|
|
top: "10px",
|
|
right: "10px",
|
|
background: "transparent",
|
|
border: "none",
|
|
fontSize: "24px",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<i className="bi bi-x-circle-fill"></i>{" "}
|
|
{/* Bootstrap Icon "X" */}
|
|
</button>
|
|
<h2>Messkurve Slot {slotIndex + 1}</h2>
|
|
<canvas
|
|
id="myChart"
|
|
style={{ width: "100%", height: "600px" }}
|
|
></canvas>
|
|
</ReactModal>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="flex items-center justify-center h-full text-gray-500">
|
|
<p>Kein Modul im Slot {slotIndex + 1}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Kue705FO;
|