Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kabelüberwachung liest aus Redux

Browse Source
This commit is contained in:
ISA
2024-11-05 08:25:18 +01:00
parent 228d8d7a1b
commit 1cdd77be09
8 changed files with 277 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

423
components/modules/Kue705FO.jsx
View File

@@ -2,6 +2,7 @@
import React, { useState, useEffect } from "react";
import ReactModal from "react-modal";
import Chart from "chart.js/auto";
import { useSelector } from "react-redux";
import KueModal from "../modales/KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
@@ -35,107 +36,110 @@ function Kue705FO({
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 [showChartModal, setShowChartModal] = useState(false);
const [chartData, setChartData] = useState(null);
const handleOpenModal = () => {
setShowModal(true);
};
// Redux-Variablen abrufen
const {
kuePSTmMinus96V,
kueCableBreak,
kueGroundFault,
kueAlarm1,
kueAlarm2,
kueOverflow,
kueVersion: reduxKueVersion,
tdrActive,
} = useSelector((state) => state.variables);
const handleCloseModal = () => {
setShowModal(false);
};
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
loadTDRChartData();
} else {
loadLoopChartData(); // Andernfalls lade die Schleifenmessdaten
loadLoopChartData();
}
};
const handleButtonClick = (button) => {
if (button === "Schleife") {
setActiveButton("Schleife");
setloopTitleText("Schleifenwiderstand [kOhm]");
setCurrentDisplayValue(schleifenwiderstand || "0");
} else if (button === "TDR") {
setActiveButton("TDR");
setloopTitleText("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
}
};
const handleCloseChartModal = () => {
setShowChartModal(false);
};
const environment = process.env.NODE_ENV || "production";
let fileData;
// Daten laden und den TDR-Chart erstellen
const handleCloseChartModal = () => setShowChartModal(false);
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
}
const environment = process.env.NODE_ENV || "production";
const fileData =
environment === "production"
? `/CPL?/CPL/lastTDR/slot${slot}.json`
: `/CPLmockData/lastTDR/slot${slot}.json`;
fetch(fileData)
.then((response) => response.json())
.then((data) => {
setChartData(data); // Daten setzen
createTDRChart(data); // Chart für TDR-Messung erstellen
setChartData(data);
createTDRChart(data);
})
.catch((error) => {
console.error("Fehler beim Laden der TDR-Messkurvendaten:", error);
});
.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
}
const environment = process.env.NODE_ENV || "production";
const fileData =
environment === "production"
? `/CPL?/CPL/4000values/slot${slot}.json`
: `/CPLmockData/4000values/slot${slot}.json`;
fetch(fileData)
.then((response) => response.json())
.then((data) => {
setChartData(data); // Daten setzen
createChart(data, "Schleifenmesskurve"); // Chart für Schleifenmessung erstellen
setChartData(data);
createChart(data, "Schleifenmesskurve");
})
.catch((error) => {
console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error);
});
.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
labels: data
.map((row) => new Date(row.t).toLocaleString("de-DE"))
.reverse(),
datasets: [
{
label: "Isolationswiderstand (MOhm)", // Einheit hinzugefügt
label: "Isolationswiderstand (MOhm)",
data: data.map((row) => row.m).reverse(),
borderColor: "#00AEEF",
fill: false,
yAxisID: "y",
},
{
label: "Schleifenwiderstand (kOhm)", // Einheit hinzugefügt
label: "Schleifenwiderstand (kOhm)",
data: data.map((row) => row.n).reverse(),
borderColor: "black",
fill: false,
@@ -148,272 +152,82 @@ function Kue705FO({
y: {
type: "linear",
position: "left",
title: {
display: true,
text: "MOhm", // Einheit für linke Achse hinzugefügt
},
title: { display: true, text: "MOhm" },
},
y1: {
type: "linear",
position: "right",
title: {
display: true,
text: "kOhm", // Einheit für rechte Achse hinzugefügt
},
title: { display: true, text: "kOhm" },
},
},
},
});
};
// 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 + 1} 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 + 1}`);
console.log("TDR erfolgreich gestartet für Slot", slot + 1);
} 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");
setloopTitleText("Schleifenwiderstand [kOhm]");
setCurrentDisplayValue(schleifenwiderstand || "0");
} else if (button === "TDR") {
setActiveButton("TDR");
setloopTitleText("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]);
(kueAlarm1 && kueAlarm1[slotIndex]) ||
(kueAlarm2 && kueAlarm2[slotIndex]) ||
(kueCableBreak && kueCableBreak[slotIndex]) ||
(kueGroundFault && kueGroundFault[slotIndex]);
setCurrentAlarmStatus(alarmStatus); // Aktualisiere den Alarmstatus
setCurrentAlarmStatus(alarmStatus);
};
// Aktualisierung sofort und alle 5 Sekunden
updateAlarmStatus();
const interval = setInterval(updateAlarmStatus, 10000);
return () => clearInterval(interval);
}, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
return () => clearInterval(interval); // Bereinigung bei Entladen der Komponente
}, [slotIndex]);
//------------------------------------------------
// Dynamischer Abruf des kueVersion-Werts für jeden Slot in Intervallen
useEffect(() => {
const intervalId = setInterval(() => {
if (window.kueVersion && window.kueVersion[slotIndex]) {
setKueVersion("V" + window.kueVersion[slotIndex] / 100);
}
}, 10000); // 10000 ms = 10 Sekunden
// Bereinigung der Intervalle beim Entfernen der Komponente
return () => clearInterval(intervalId);
}, [slotIndex]);
//-------------------------------------------------
//-------------------------------------------------
// Priority: Aderbruch - Erdschluss - Isolationsfehler - Schleifenfehler - Overflow (>200 MOhm) - Messwert
// Prioritätsprüfung in updateDisplay
useEffect(() => {
const updateDisplay = () => {
if (
!window.kuePSTmMinus96V ||
!window.kueCableBreak ||
!window.kueGroundFault ||
!window.kueAlarm1 ||
!window.kueAlarm2 ||
!window.kueOverflow
) {
// console.log("Warten auf window Variablen...");
setTimeout(updateDisplay, 1000); // Warte 1 Sekunde und versuche es erneut
return;
}
/* console.log(
"Alle window-Variablen sind verfügbar. Beginne mit den Prioritätsprüfungen..."
); */
// PST-M Ausfall
if (window.kuePSTmMinus96V[slotIndex] === 1) {
if (kuePSTmMinus96V?.[slotIndex] === 1) {
setCurrentDisplayValue("PST-M prüfen");
return;
}
// Aderbruch
if (window.kueCableBreak[slotIndex] === 1) {
// console.log("Aderbruch erkannt für Slot", slotIndex);
if (kueCableBreak?.[slotIndex] === 1) {
setCurrentDisplayValue(isoDisplayText);
return;
}
// Erdschluss
else if (window.kueGroundFault[slotIndex] === 1) {
// console.log("Erdschluss erkannt für Slot", slotIndex);
if (kueGroundFault?.[slotIndex] === 1) {
setCurrentDisplayValue(groundFaultDisplayText);
return;
}
// Isolationsfehler
else if (window.kueAlarm1[slotIndex] === 1) {
// console.log("Isolationsfehler erkannt für Slot", slotIndex);
if (kueAlarm1?.[slotIndex] === 1) {
setCurrentDisplayValue(isoFaultDisplayText);
return;
}
// Schleifenfehler
else if (window.kueAlarm2[slotIndex] === 1) {
// console.log("Schleifenfehler erkannt für Slot", slotIndex);
if (kueAlarm2?.[slotIndex] === 1) {
setCurrentDisplayValue(loopFaultDisplayText);
return;
}
// Overflow (>200 MOhm)
else if (window.kueOverflow[slotIndex] === 1) {
/* console.log(
"Overflow erkannt für Slot",
slotIndex,
"- Anzeige: '>200'"
); */
if (kueOverflow?.[slotIndex] === 1) {
setCurrentDisplayValue(isoGreaterThan200);
return;
}
// Kein Fehler
else {
/* console.log(
"Kein Fehler erkannt, zeige Standardisolationswert an für Slot",
slotIndex
); */
setCurrentDisplayValue(isolationswert); // Nur Isolationswert ohne ">200" als Fallback
}
setCurrentDisplayValue(isolationswert);
};
updateDisplay(); // Initialer Aufruf
const interval = setInterval(updateDisplay, 5000); // Regelmäßige Überprüfung
updateDisplay();
const interval = setInterval(updateDisplay, 5000);
return () => clearInterval(interval);
}, [
slotIndex,
isolationswert,
kuePSTmMinus96V,
kueCableBreak,
kueGroundFault,
kueAlarm1,
kueAlarm2,
kueOverflow,
]);
return () => clearInterval(interval); // Bereinigung bei Entladen der Komponente
}, [slotIndex, isolationswert]);
//-------------------------------------------------
useEffect(() => {
if (reduxKueVersion?.[slotIndex]) {
setKueVersion("V" + reduxKueVersion[slotIndex] / 100);
}
}, [slotIndex, reduxKueVersion]);
return (
<div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
@@ -439,11 +253,8 @@ function Kue705FO({
showModal={showModal}
onClose={handleCloseModal}
slot={slotIndex}
onModulNameChange={handleModulNameChange}
onModulNameChange={setCurrentModulName}
/>
{/*
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>
@@ -452,37 +263,37 @@ function Kue705FO({
<div className="flex items-center mt-1">
<div
className={`w-[10px] h-[10px] rounded-full mr-2 ${
alarmStatus ? "bg-red-500" : "bg-gray-300"
currentAlarmStatus ? "bg-red-500" : "bg-gray-300"
}`}
></div>
<span className="text-white text-[10px]">Alarm</span>
</div>
</div>
{/* Display 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.kuePSTmMinus96V[slotIndex] === 1 ||
window.kueCableBreak[slotIndex] === 1 ||
window.kueGroundFault[slotIndex] === 1 ||
window.kueAlarm1[slotIndex] === 1 ||
window.kueAlarm2[slotIndex] === 1
? "text-red-500 text-[14px]" // Rot und kleinere Schrift für Alarme
: window.kueOverflow[slotIndex] === 1 //Sehr hoher Isolationswiderstand , ein sehr gutes Kabel
? "text-white text-[14px]" // Neutrale Farbe für >200 MOhm-Anzeige
kuePSTmMinus96V?.[slotIndex] === 1 ||
kueCableBreak?.[slotIndex] === 1 ||
kueGroundFault?.[slotIndex] === 1 ||
kueAlarm1?.[slotIndex] === 1 ||
kueAlarm2?.[slotIndex] === 1
? "text-red-500 text-[14px]"
: kueOverflow?.[slotIndex] === 1
? "text-white text-[14px]"
: ""
}
>
{currentDisplayValue}
</span>
{window.kuePSTmMinus96V[slotIndex] !== 1 &&
window.kueCableBreak[slotIndex] !== 1 &&
window.kueGroundFault[slotIndex] !== 1 &&
window.kueAlarm1[slotIndex] !== 1 &&
window.kueAlarm2[slotIndex] !== 1 &&
window.kueOverflow[slotIndex] !== 1 && (
{kuePSTmMinus96V?.[slotIndex] !== 1 &&
kueCableBreak?.[slotIndex] !== 1 &&
kueGroundFault?.[slotIndex] !== 1 &&
kueAlarm1?.[slotIndex] !== 1 &&
kueAlarm2?.[slotIndex] !== 1 &&
kueOverflow?.[slotIndex] !== 1 && (
<div className="text-[8px]">ISO MOhm</div>
)}
</div>
@@ -536,13 +347,13 @@ function Kue705FO({
<button
onClick={() => handleButtonClick("TDR")}
className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
window.tdrActive[slotIndex] === 0
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
disabled={tdrActive[slotIndex] === 0} // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
>
TDR
</button>