docsForDev update
This commit is contained in:
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.285";
|
const webVersion = "1.6.286";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
@@ -1,12 +0,0 @@
|
|||||||
## Entscheidung: Digitale Ausgänge (da.js)
|
|
||||||
|
|
||||||
**Datum:** 03.04.2025
|
|
||||||
**Gesprächspartner:** Kai
|
|
||||||
|
|
||||||
**Inhalt:**
|
|
||||||
Digitale Ausgänge (da.js) sind aktuell **nicht erforderlich**. Diese Funktion wird in einer späteren Version umgesetzt, weil sie derzeit nicht im Fokus der Deadline steht.
|
|
||||||
|
|
||||||
**Notiz für spätere Version:**
|
|
||||||
Digitale Ausgänge können über eine spätere Erweiterung integriert werden, z. B. nach Version 1.0.0.
|
|
||||||
|
|
||||||
---
|
|
||||||
@@ -1,102 +1,75 @@
|
|||||||
# ⚡ CPLv4.0 – Frontend für das Kabelüberwachungssystem
|
# 📚 Entwicklerdokumentation für CPLv4.0 Frontend
|
||||||
|
|
||||||
Das Frontend von CPLv4.0 stellt verschiedene Systeminformationen, Messdaten und Konfigurationen übersichtlich dar.
|
Willkommen zur technischen Dokumentation des CPLv4.0 Frontends.
|
||||||
Die Benutzeroberfläche ist intuitiv und modular aufgebaut und bietet Zugriff auf digitale sowie analoge Ein-/Ausgänge, TDR-Messungen, Referenzkurven, Systemmeldungen und Einstellungen.
|
Dieses Verzeichnis enthält alle Details zur Architektur, zu den Datenflüssen, zum Redux-Management und zu den verwendeten APIs.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🧭 Seitenübersicht
|
## 📆 Übersicht
|
||||||
|
|
||||||
### 🔹 **Header**
|
Dieses Dokument erklärt die technische Struktur und den Ablauf des Projekts für Entwickler. Es dient als Einstiegspunkt für die detaillierte Dokumentation in den jeweiligen Unterordnern.
|
||||||
|
|
||||||
- Zeigt den Namen der Station / des Geräts (CPL)
|
- **Architektur**: Aufbau des Systems und der Hauptkomponenten
|
||||||
- Abmelden-Button für Admins
|
- **Datenflüsse**: Flowcharts und Sequenzdiagramme wichtiger Abläufe
|
||||||
|
- **Redux**: State-Management über Slices und Thunks
|
||||||
### 🔹 **Footer**
|
- **APIs**: Beschreibung der genutzten API-Endpunkte
|
||||||
|
- **Deployment**: Schritte für Build und Veröffentlichung auf CPL
|
||||||
- Firmenname, Telefonnummer, E-Mail
|
- **Glossar**: Erklärung wichtiger technischer Begriffe
|
||||||
- PDF-Handbücher (Anleitung) als Slider mit Download-Funktion
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 🖥️ **/dashboard** – Übersicht
|
## 📂 Verzeichnisstruktur
|
||||||
|
|
||||||
- Letzten 20 Meldungen aus dem System
|
```plaintext
|
||||||
- Versionsinformationen (Frontend, Backend)
|
/docsForDev/
|
||||||
- Baugruppenträger mit Modulnamen und Statusanzeige (grün = OK, rot = Fehler)
|
├── Architektur/
|
||||||
- Netzwerk-Informationen:
|
│ ├── ArchitekturUebersicht.md
|
||||||
- IP-Adresse
|
│ └── KomponentenDiagramm.md
|
||||||
- Subnetzmaske
|
├── Datenflüsse/
|
||||||
- Gateway
|
│ ├── SystemVoltTempFlow.md
|
||||||
- OPC UA Status (in Betrieb oder offline)
|
│ ├── TDRSequenz.md
|
||||||
- OPC UA Nodeset Name
|
│ └── MeldungenFlow.md
|
||||||
|
├── Redux/
|
||||||
---
|
│ ├── ReduxStateUebersicht.md
|
||||||
|
│ └── WichtigeThunks.md
|
||||||
### 📡 **/kabelueberwachung** – Kabelüberwachung
|
├── APIs/
|
||||||
|
│ ├── SystemAPI.md
|
||||||
- Visualisierung der Slots (KUE 1–32) in 4 Racks
|
│ └── KabelueberwachungAPI.md
|
||||||
- Darstellung von:
|
├── Deployment/
|
||||||
- Isolationswiderstand
|
│ └── DeploymentCPL.md
|
||||||
- Schleifenwiderstand
|
├── Glossar/
|
||||||
- TDR-Messkurven und Vergleich mit Referenzkurve
|
│ └── Begriffe.md
|
||||||
- Alarme (z. B. Erdschluss, Aderbruch)
|
└── README.md # Diese Datei
|
||||||
- Einstellung pro Slot (via Zahnrad → Modal)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 🔌 **/einausgaenge** – Digitale Ein- und Ausgänge
|
|
||||||
|
|
||||||
- Digitale Eingänge (1–32) mit Statusanzeige
|
|
||||||
- Digitale Ausgänge (1–4) mit Umschaltfunktion (Toggle)
|
|
||||||
- Modale für Beschreibung und Konfiguration
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 🌡️ **/analogeEingaenge**
|
|
||||||
|
|
||||||
- Tabelle mit analogen Eingangswerten (z. B. Temperatur, Spannung)
|
|
||||||
- Diagramm zur Visualisierung von Verlauf / Trends
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 📝 **/meldungen**
|
|
||||||
|
|
||||||
- Gesamte Meldungshistorie
|
|
||||||
- Anzeige von Statusfarbe, Zeit, Gewichtung, Nachricht, Quelle
|
|
||||||
- Pagination (10 Meldungen pro Seite)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### ⚙️ **/einstellungen**
|
|
||||||
|
|
||||||
- Allgemeine Systemeinstellungen
|
|
||||||
- OPC UA Konfiguration
|
|
||||||
- Benutzer, Verschlüsselung, Clients
|
|
||||||
- Verbindung & Nodeset-Verwaltung
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔧 Technologien
|
|
||||||
|
|
||||||
- **Next.js** (Pages Router)
|
|
||||||
- **React** (mit funktionalen Komponenten & Hooks)
|
|
||||||
- **Tailwind CSS** für responsives UI-Design
|
|
||||||
- **Redux Toolkit** zur Zustandverwaltung
|
|
||||||
- **Mockdaten** im Verzeichnis `public/CPLmockData/`
|
|
||||||
- **Iconify Icons** & **Bootstrap Icons** für UI-Darstellung
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔧 Installation auf dem CPLv4.0
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git clone http://10.10.0.12:3000/ISA/CPL_V4_Frontend
|
|
||||||
cd cplv4-frontend
|
|
||||||
npm install
|
|
||||||
npm run build
|
|
||||||
|
|
||||||
Danach:
|
|
||||||
Inhalt des out-Verzeichnisses per FTP auf das CPL-Gerät kopieren
|
|
||||||
Ziel: B → WEBS Verzeichnis
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 Inhalte
|
||||||
|
|
||||||
|
- **Technische Zusammenhänge** zwischen Frontend, Backend und Embedded-System
|
||||||
|
- **Redux-Slices** und **Thunks** im Detail beschrieben
|
||||||
|
- **Flowcharts und Sequenzdiagramme** zur Veranschaulichung der Abläufe
|
||||||
|
- **API-Dokumentation** für Datenabrufe und Systembefehle
|
||||||
|
- **Mock-Daten-Strategie** für Entwicklung ohne Hardware
|
||||||
|
- **Deployment-Anleitung** für CPL ("out"-Verzeichnis Upload)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💬 Hinweise für Entwickler
|
||||||
|
|
||||||
|
- Neue Redux-Slices oder Thunks bitte hier in den passenden Dateien dokumentieren.
|
||||||
|
- Anpassungen an Komponenten oder APIs sollten mit neuen Diagrammen oder Updates versehen werden.
|
||||||
|
- Mock-Daten sollten beschrieben werden, wenn neue Felder hinzukommen.
|
||||||
|
- Deployment-Anweisungen aktualisieren, falls sich der Ablauf ändert.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📣 Ziel
|
||||||
|
|
||||||
|
Eine klare, aktuelle und wartbare technische Dokumentation für das gesamte CPLv4.0 Frontend Projekt, die sowohl neue als auch bestehende Entwickler effektiv unterstützt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 👨💼 Kontakt
|
||||||
|
|
||||||
|
Bei Fragen oder Unklarheiten zur Dokumentation bitte an das CPLv4.0 Entwicklungsteam wenden.
|
||||||
|
|||||||
@@ -1,58 +0,0 @@
|
|||||||
## 22.04.2025
|
|
||||||
|
|
||||||
_Test CPL Webseiten V4 am 04.04.2025_
|
|
||||||
|
|
||||||
Fehler:
|
|
||||||
|
|
||||||
- Meldungsseite benutzt noch falsche Funktion zur Darstellung der Meldungen.
|
|
||||||
|
|
||||||
- KÜ: Button Messkurve ist abhängig von der Anzeige. Darstellung noch ein wenig verwirrend. Evtl. so besser:
|
|
||||||
- !image-20250404-105234.png|width=143,height=205,alt="image-20250404-105234.png"!
|
|
||||||
** Beim ersten Aufruf des Messwertfenster den Isolationswiderstand 30 Tage Stündliche Werte anzeigen.
|
|
||||||
** Beim ersten Aufruf einer Messkurve einer Kü wird +keine+ Kurve angezeigt (Ismail bekannt)
|
|
||||||
** KÜ-Einstellungen: Speichern danach Meldefenster „Daten wurden gespeichert“ muss meinetwegen nicht eingeblendet werden.
|
|
||||||
** Bei einem Schleifenfehler evtl. die Schleifenfehlermeldung unten beim Messwert anzeigen? Wenn z.B. Isolationsfehler und Schleifenfehler geleichzeitig anliegt wird nur der Isolationsfehler im schwarzen Feld angezeigt.
|
|
||||||
** Auf kleinen Bildschirmen kann der BGT nicht nach links und rechts gescrollt werden.
|
|
||||||
** Kurvenfenster hat eine relative große Minimalgröße. Es ist eine statische Größe. Dynamisch?
|
|
||||||
\*\* Nodeset-Name kann auf Startseite unten rechts gelöscht werden
|
|
||||||
-
|
|
||||||
- Offene Aufgaben:
|
|
||||||
** Kabelstrecken und Kabelknotenpunkte Anzeige deren Namen und Länge auf KÜ-Seite
|
|
||||||
** Meldungsliste Startseite mit neuer Funktion (fester Zeitraum). Inkl. Prio (Gewichtung) und Quellenangabe.
|
|
||||||
** Digitale Eingänge: Einstellungen der DE’s fehlt noch
|
|
||||||
** Auswahl “Einstellungen” im linken Hauptmenü geht noch nicht.
|
|
||||||
-
|
|
||||||
- Spätere Aufgaben:
|
|
||||||
** Analoge Eingänge
|
|
||||||
** Meldungen auf der Kü-, bzw. DE-Seite
|
|
||||||
|
|
||||||
> ## CPLV4: Webserver erstellen / Stufe 2
|
|
||||||
>
|
|
||||||
> Schlüssel: ENTW-109
|
|
||||||
> URL: https://littwinsystemtechnik.atlassian.net/browse/ENTW-109
|
|
||||||
> Projekt: Entwicklung
|
|
||||||
> Vorgangstyp: LS-UA-Entwicklung
|
|
||||||
> Autor: Jörg Littwin
|
|
||||||
>
|
|
||||||
> Zugewiesene Person: ISA
|
|
||||||
> Anhänge: image-20250404-105234.png
|
|
||||||
>
|
|
||||||
> Benötigte Zeit: 330,75h
|
|
||||||
>
|
|
||||||
> Responsive Webdesign [Ismail]
|
|
||||||
> Anzeigen von Messreihen [Ismail] > _Anmerkung Kai am 13. Februar 2025 (Besprechung mit JOL):_ > _(Funktionen in_ {color:#ff5630}_Rot_{color} _müssen noch von Kai programmiert werden, noch nicht bearbeiten!)_
|
|
||||||
> Aus dem ersten Auftrag Webserver DB fehlen noch einige Punkte sowie weitere, in der Entwicklung aufgetretene Webseiten:
|
|
||||||
>
|
|
||||||
> - (/) Detailseite KÜ: Verlaufskurve Isolationsmesskurve und Schleifenwiderstand. Es soll der Zeitraum konfigurierbar sein. Wir haben drei unterschiedliche Darstellungen:
|
|
||||||
> ** 1.) 15 Minuten-Messwert mit Min- und Maxkurve (bei bis zu 14 Tagen)
|
|
||||||
> ** 2.) Stundendurchschnittswert mit Min- und Maxkurve (bei bis zu 100 Tagen)
|
|
||||||
> \*\* 3.) Tagesdurchschnittswert mit Min- und Maxkurve (bei mehr als 100 Tagen)
|
|
||||||
> - (/) Detailseite KÜ: TDR Funktionen inkl. Auswahl verfügbarer Messkurven (z.B. letzten 6 Monate oder Zeitauswahl). Es soll eine Referenzkurve zusätzlich mit angezeigt werden. {color:#ff5630}Diese Referenzkurve ist noch in Arbeit {color}
|
|
||||||
> - Detailseite KÜ: Anzeige/Konfiguration von 10 Knotenpunkte (ID) und 10 Teilstrecken (ID und Länge) als Liste auf der Detailseite
|
|
||||||
> - Detailseite KÜ: Möglichkeit zum Update der Firmware Modul KÜ
|
|
||||||
> - (/) Detailseite KÜ: Einstellung Loggerinterval
|
|
||||||
> - (/) Meldungen: bisher letzten 20 Meldungen, Hier einen beliebiger Zeitraum zur Auswahl erstellen. ({color:#ff5630}Kai muss noch Anpassungen machen, Text{color})
|
|
||||||
> - 🔨 Detailseite DE (Zustand, Invertierung, Name, Filterzeit) {color:#ff5630}(Daten noch nicht verfügbar){color}
|
|
||||||
> - Detailseite AE ({color:#ff5630}Offset, Faktor{color}, Messwert, {color:#ff5630}Name, Loggerintervall, {color}Messkurve beliebiger Zeitraum, Min/Max/AVG wie bei KÜ) {color:#ff991f}Prio 2{color}
|
|
||||||
> - Detailseite System (Anzeige Spannungen 5V / +15V / -+15V / -98V / CPU- und ADC-Temperaturen ) mit Messkurve wie Kü{color:#ff991f} Prio 2{color}
|
|
||||||
> - (/) Allgemein (Name Standort, {color:#ff5630}Werkseinstellungen{color}, Datenbank leeren)
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
<mxfile host="65bd71144e">
|
|
||||||
<diagram id="95LLT6B1yb-ZXk_jyexu" name="Page-1">
|
|
||||||
<mxGraphModel dx="1732" dy="894" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
|
|
||||||
<root>
|
|
||||||
<mxCell id="0"/>
|
|
||||||
<mxCell id="1" parent="0"/>
|
|
||||||
<mxCell id="2" value="<div style="color: rgb(204, 204, 204); background-color: rgb(31, 31, 31); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><span style="color: #dcdcaa;">handleSetReference</span></div>" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
|
|
||||||
<mxGeometry x="50" y="160" width="120" height="60" as="geometry"/>
|
|
||||||
</mxCell>
|
|
||||||
<mxCell id="3" value="" style="endArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="2" edge="1">
|
|
||||||
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
|
||||||
<mxPoint x="400" y="480" as="sourcePoint"/>
|
|
||||||
<mxPoint x="310" y="190" as="targetPoint"/>
|
|
||||||
</mxGeometry>
|
|
||||||
</mxCell>
|
|
||||||
<mxCell id="6" value="fetch" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="3" vertex="1" connectable="0">
|
|
||||||
<mxGeometry x="0.3333" y="-2" relative="1" as="geometry">
|
|
||||||
<mxPoint x="-20" y="-22" as="offset"/>
|
|
||||||
</mxGeometry>
|
|
||||||
</mxCell>
|
|
||||||
<mxCell id="7" value="<h6 style="font-family: Consolas, &quot;Courier New&quot;, monospace; line-height: 19px; white-space: pre;"><font style="color: rgb(0, 0, 0); background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); font-size: 10px;">fetchReferenceCurveBySlotThunk</font></h6>" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
|
||||||
<mxGeometry x="310" y="152.5" width="190" height="75" as="geometry"/>
|
|
||||||
</mxCell>
|
|
||||||
</root>
|
|
||||||
</mxGraphModel>
|
|
||||||
</diagram>
|
|
||||||
</mxfile>
|
|
||||||
Reference in New Issue
Block a user