From dd09a83fb8fb789de2145948a1cba00dabb80b4d Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 17 Oct 2024 16:24:52 +0200 Subject: [PATCH] Messkurve mit Chart.js in Modal zeigen , die Daten kommen von json Dateien --- app/json/page.jsx | 20 +++ components/modules/Kue705FO.jsx | 204 ++++++++++++++++++++-------- package-lock.json | 17 +++ package.json | 1 + public/placeholder/de.acp | 3 + public/placeholder/kueData.js | 21 +++ public/placeholder/kueDetailTdr.acp | 17 +++ public/placeholder/start.acp | 1 + public/placeholder/system.acp | 15 ++ utils/loadWindowVariables.js | 1 + 10 files changed, 242 insertions(+), 58 deletions(-) create mode 100644 app/json/page.jsx create mode 100644 public/placeholder/de.acp create mode 100644 public/placeholder/kueData.js create mode 100644 public/placeholder/kueDetailTdr.acp create mode 100644 public/placeholder/start.acp create mode 100644 public/placeholder/system.acp diff --git a/app/json/page.jsx b/app/json/page.jsx new file mode 100644 index 0000000..ffc0dca --- /dev/null +++ b/app/json/page.jsx @@ -0,0 +1,20 @@ +"use client"; // Wichtiger Hinweis, wenn du Next.js App Router verwendest + +import { useEffect } from "react"; + +export default function Json() { + // Beispielvariable + const myVariable = "<%=KIZ0%>"; + + // useEffect, um sicherzustellen, dass die Konsole nach dem Laden der Seite ausgeführt wird + useEffect(() => { + console.log("Die Variable ist: ", myVariable); + }, []); // Der leere Array sorgt dafür, dass es nur einmal beim Laden der Komponente ausgeführt wird + + return ( +
+

Json Page

+

Überprüfe die Konsole, um die Variable zu sehen.

+
+ ); +} diff --git a/components/modules/Kue705FO.jsx b/components/modules/Kue705FO.jsx index c3755cb..d2ff9bc 100644 --- a/components/modules/Kue705FO.jsx +++ b/components/modules/Kue705FO.jsx @@ -1,14 +1,16 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; +import ReactModal from "react-modal"; +import Chart from "chart.js/auto"; import KueModal from "../modales/KueModal"; function Kue705FO({ - isolationswert, // Übergabeparameter für den Isolationswert - schleifenwiderstand, // Übergabeparameter für den Schleifenwiderstand - modulName, // Übergabeparameter für den Modulnamen - kueVersion = "V4.19", // Optionaler Parameter für die Version (Standardwert) - kueOnline, // Array für den Modulstatus (1: Modul vorhanden, 0: kein Modul) - slotIndex, // Der Index des Slots, für den die Anzeige gilt - tdrLocation, // Wert für die TDR-Entfernung + isolationswert, + schleifenwiderstand, + modulName, + kueVersion = "V4.19", + kueOnline, + slotIndex, + tdrLocation, }) { const [currentModulName, setCurrentModulName] = useState(modulName); const [activeButton, setActiveButton] = useState("Schleife"); @@ -16,9 +18,11 @@ function Kue705FO({ const [loading, setLoading] = useState(false); const [currentDisplayValue, setCurrentDisplayValue] = useState( schleifenwiderstand || "0" - ); // Wert, der im unteren Display angezeigt wird - //--Modales Fenster + ); 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); }; @@ -26,23 +30,83 @@ function Kue705FO({ const handleCloseModal = () => { setShowModal(false); }; - //---- - // Funktion zum Wechseln der Buttons und Anpassen des Anzeigewerts - 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"); - } + + // Funktion zum Anzeigen des Chart-Modals + const handleOpenChartModal = () => { + setShowChartModal(true); + loadChartData(); // Lade die Daten, wenn das Modal geöffnet wird + }; + + const handleCloseChartModal = () => { + setShowChartModal(false); + }; + + // Daten laden und den Chart erstellen + const loadChartData = () => { + const slot = slotIndex; + const fileData = `../cpl?4000values/slot${slot}.json`; // Je nach Slot wird die entsprechende Datei geladen + + fetch(fileData) + .then((response) => response.json()) + .then((data) => { + setChartData(data); // Daten setzen + createChart(data); + }) + .catch((error) => { + console.error("Fehler beim Laden der Messkurvendaten:", error); + }); + }; + + // Funktion zum Erstellen des Charts + const createChart = (data) => { + const ctx = document.getElementById("myChart").getContext("2d"); + + new Chart(ctx, { + type: "line", + data: { + labels: data.map((row) => row.t), // Zeitwerte + datasets: [ + { + label: "Isolationswiderstand", + data: data.map((row) => row.m), + borderColor: "#00AEEF", + fill: false, + yAxisID: "y", + }, + { + label: "Schleifenwiderstand", + data: data.map((row) => row.n), + borderColor: "black", + fill: false, + yAxisID: "y1", + }, + { + label: "Messung gültig", + data: data.map((row) => row.v), + borderColor: "gray", + fill: false, + yAxisID: "y1", + }, + ], + }, + options: { + scales: { + y: { + type: "linear", + position: "left", + }, + y1: { + type: "linear", + position: "right", + }, + }, + }, + }); }; // Funktion für die TDR-Messung const goTDR = () => { - let slot = slotIndex; // Verwende direkt slotIndex, da Slot 0 der erste Slot ist + let slot = slotIndex; if (slot >= 32) { return; @@ -51,7 +115,7 @@ function Kue705FO({ let slotFormat = slot < 10 ? `0${slot}` : `${slot}`; const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; - setLoading(true); // Ladezustand setzen + setLoading(true); fetch( `${apiUrl}/CPL?Service/KUEdetailTDR.ACP&KTT${slotFormat}=1&slot=${slot}`, { @@ -68,12 +132,12 @@ function Kue705FO({ .catch((error) => { console.error("Fehler:", error); }) - .finally(() => setLoading(false)); // Ladezustand wieder deaktivieren + .finally(() => setLoading(false)); }; // Funktion für die Schleifenmessung const goLoop = () => { - let slot = slotIndex; // Verwende direkt slotIndex + let slot = slotIndex; if (slot >= 32) { return; @@ -82,7 +146,7 @@ function Kue705FO({ let slotFormat = slot < 10 ? `0${slot}` : `${slot}`; const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; - setLoading(true); // Ladezustand setzen + setLoading(true); fetch( `${apiUrl}/CPL?Service/KUEdetail.HTML&KS_${slotFormat}=1&slot=${slot}`, { @@ -99,31 +163,34 @@ function Kue705FO({ .catch((error) => { console.error("Fehler:", error); }) - .finally(() => setLoading(false)); // Ladezustand wieder deaktivieren + .finally(() => setLoading(false)); + }; + + const handleModulNameChange = (newName) => { + setCurrentModulName(newName); }; // Überprüfe, ob ein Modul im Slot vorhanden ist const isModulPresent = kueOnline[slotIndex] === 1; - // 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 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"); } }; - const handleModulNameChange = (newName) => { - setCurrentModulName(newName); // Aktualisiere den Namen direkt in Kue705FO - }; - return (
{isModulPresent ? ( <>
-
+
{slotIndex + 1}
@@ -137,16 +204,13 @@ function Kue705FO({ ⚙
- {/* Modal */} + -

Modul Einstellungen

-

Hier kannst du Einstellungen für {modulName} vornehmen.

- + />
@@ -169,15 +233,6 @@ function Kue705FO({
- {/* Modal zum Ändern des Modulnamens */} - - - {/* Modulname */}
{currentModulName || "Test1"}
@@ -192,12 +247,10 @@ function Kue705FO({ {displayText} - {/* Unterer Bereich, der den dynamischen Wert anzeigt */}
@@ -209,7 +262,6 @@ function Kue705FO({
- {/* Buttons für Schleife und TDR */}
+ + {/* Modal für Messkurve */} + {showChartModal && ( + +

Messkurve Slot {slotIndex + 1}

+ + + + )} ) : (
diff --git a/package-lock.json b/package-lock.json index 12c2bf0..6337144 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@iconify/react": "^5.0.2", "autoprefixer": "^10.4.20", "bootstrap-icons": "^1.11.3", + "chart.js": "^4.4.5", "next": "14.2.13", "react": "^18", "react-dom": "^18", @@ -143,6 +144,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@next/env": { "version": "14.2.13", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.13.tgz", @@ -551,6 +557,17 @@ } ] }, + "node_modules/chart.js": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.5.tgz", + "integrity": "sha512-CVVjg1RYTJV9OCC8WeJPMx8gsV8K6WIyIEQUE3ui4AR9Hfgls9URri6Ja3hyMVBbTF8Q2KFa19PE815gWcWhng==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", diff --git a/package.json b/package.json index d1891c3..f2b663e 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@iconify/react": "^5.0.2", "autoprefixer": "^10.4.20", "bootstrap-icons": "^1.11.3", + "chart.js": "^4.4.5", "next": "14.2.13", "react": "^18", "react-dom": "^18", diff --git a/public/placeholder/de.acp b/public/placeholder/de.acp new file mode 100644 index 0000000..d6e9f3e --- /dev/null +++ b/public/placeholder/de.acp @@ -0,0 +1,3 @@ +var de=[<%=DES80%>,<%=DES81%>,<%=DES82%>,<%=DES83%>]; +var counter=[<%=DEC80%>,<%=DEC81%>,<%=DEC82%>,<%=DEC83%>]; +var flutter=[<%=DEF80%>,<%=DEF81%>,<%=DEF82%>,<%=DEF83%>]; diff --git a/public/placeholder/kueData.js b/public/placeholder/kueData.js new file mode 100644 index 0000000..f472cb1 --- /dev/null +++ b/public/placeholder/kueData.js @@ -0,0 +1,21 @@ + +var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>]; +var kueIso=[<%=KIM80%>,<%=KIM81%>,<%=KIM82%>,<%=KIM83%>]; +var kueValid=[<%=KIV80%>,<%=KIV81%>,<%=KIV82%>,<%=KIV83%>]; +var kueAlarm1=[<%=KIA80%>,<%=KIA81%>,<%=KIA82%>,<%=KIA83%>]; +var kueAlarm2=[<%=KRA80%>,<%=KRA81%>,<%=KRA82%>,<%=KRA83%>]; +var kueRes=[<%=KRM80%>,<%=KRM81%>,<%=KRM82%>,<%=KRM83%>]; +var kueCableBreak=[<%=KSC80%>,<%=KSC81%>,<%=KSC82%>,<%=KSC83%>]; +var kueGroundFault=[<%=KSG80%>,<%=KSG81%>,<%=KSG82%>,<%=KSG83%>]; +var kueLimit1=[<%=KIG80%>,<%=KIG81%>,<%=KIG82%>,<%=KIG83%>]; +var kueLimit2Low=[<%=KRG80%>,<%=KRG81%>,<%=KRG82%>,<%=KRG83%>]; +var kueLimit2High=[<%=KRH80%>,<%=KRH81%>,<%=KRH82%>,<%=KRH83%>]; +var kueDelay1=[<%=KID80%>,<%=KID81%>,<%=KID82%>,<%=KID83%>]; +var kueLoopInterval=[<%=KRI80%>,<%=KRI81%>,<%=KRI82%>,<%=KRI83%>]; +var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>]; +var kueName=[<%=KSA80%>,<%=KSA81%>,<%=KSA82%>,<%=KSA83%>]; +var kueVersion=[<%=KSV80%>,<%=KSV81%>,<%=KSV82%>,<%=KSV83%>]; +var kueOverflow=[<%=KIW80%>,<%=KIW81%>,<%=KIW82%>,<%=KIW83%>]; +var kue100V=[<%=KSS80%>,<%=KSS81%>,<%=KSS82%>,<%=KSS83%>]; +var kueResidence=[<%=KSN80%>,<%=KSN81%>,<%=KSN82%>,<%=KSN83%>]; +var kueBooting=[<%=KSB80%>,<%=KSB81%>,<%=KSB82%>,<%=KSB83%>]; \ No newline at end of file diff --git a/public/placeholder/kueDetailTdr.acp b/public/placeholder/kueDetailTdr.acp new file mode 100644 index 0000000..243f0f5 --- /dev/null +++ b/public/placeholder/kueDetailTdr.acp @@ -0,0 +1,17 @@ +var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>]; +var kueValid=[<%=KIV80%>,<%=KIV81%>,<%=KIV82%>,<%=KIV83%>]; + + +var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>]; +var kueName=[<%=KSA80%>,<%=KSA81%>,<%=KSA82%>,<%=KSA83%>]; +var kueVersion=[<%=KSV80%>,<%=KSV81%>,<%=KSV82%>,<%=KSV83%>]; + + +var tdrAtten=[<%=KTD80%>,<%=KTD81%>,<%=KTD82%>,<%=KTD83%>]; +var tdrPulse=[<%=KTP80%>,<%=KTP81%>,<%=KTP82%>,<%=KTP83%>]; +var tdrSpeed=[<%=KTS80%>,<%=KTS81%>,<%=KTS82%>,<%=KTS83%>]; +var tdrAmp=[<%=KTA80%>,<%=KTA81%>,<%=KTA82%>,<%=KTA83%>]; +var tdrTrigger=[<%=KTE80%>,<%=KTE81%>,<%=KTE82%>,<%=KTE83%>]; +var tdrLocation=[<%=KTF80%>,<%=KTF81%>,<%=KTF82%>,<%=KTF83%>]; +var tdrActive=[<%=KTX80%>,<%=KTX81%>,<%=KTX82%>,<%=KTX83%>]; +var tdrLast=[<%=KTL80%>,<%=KTL81%>,<%=KTL82%>,<%=KTL83%>]; \ No newline at end of file diff --git a/public/placeholder/start.acp b/public/placeholder/start.acp new file mode 100644 index 0000000..9d44048 --- /dev/null +++ b/public/placeholder/start.acp @@ -0,0 +1 @@ +var last20Messages =<%=SAM01%>; \ No newline at end of file diff --git a/public/placeholder/system.acp b/public/placeholder/system.acp new file mode 100644 index 0000000..78636d8 --- /dev/null +++ b/public/placeholder/system.acp @@ -0,0 +1,15 @@ +var deviceName="<%=SAN01%>"; +var mac1="<%=SEM01%>"; +var mac2="<%=SEM02%>"; +var ip="<%=SEI01%>"; +var subnet="<%=SES01%>"; +var gateway="<%=SEG01%>"; +var datetime="<%=SCL01%>"; +var opcState="<%=SOS01%>"; +var opcSessions="<%=SOC01%>"; +var opcName="<%=SON01%>"; +var ntp1="<%=STP01%>"; +var ntp2="<%=STP02%>"; +var ntp3="<%=STP03%>"; +var ntpTimezone="<%=STT00%>"; +var ntpActive="<%=STA00%>"; diff --git a/utils/loadWindowVariables.js b/utils/loadWindowVariables.js index 0806b55..82929a9 100644 --- a/utils/loadWindowVariables.js +++ b/utils/loadWindowVariables.js @@ -67,6 +67,7 @@ export async function loadWindowVariables(apiUrl) { kueResidence: window.kueResidence, tdrLastMeasurement: window.tdrLastMeasurement, kueBooting: window.kueBooting, + k1json: window.k1json, }); resolve();