486 lines
20 KiB
QML
486 lines
20 KiB
QML
import QtQuick 2.12
|
|
import QtQuick.Controls 2.12
|
|
import QtQuick.Layouts 1.12
|
|
|
|
import qt.koriolan.shipheart 1.0
|
|
|
|
// ============================================================================
|
|
// detail_batterie.qml - page de détail d'une batterie (valeur + historique).
|
|
// ----------------------------------------------------------------------------
|
|
// Poussée sur le StackView depuis home.qml (clic court sur une batterie).
|
|
// Domaine batteries : sélecteur de variable (8 options simples + "Énergie").
|
|
// "Énergie" (9e bouton) bascule vers une vue différente (barres + tableau
|
|
// comparatif par circuit) plutôt que le graphique de valeur habituel - cf
|
|
// synthèse §22, Phase 4. Version SIMPLIFIÉE par rapport au natif : pas
|
|
// d'intégrale de puissance pour rafraîchir la barre "en cours" (décision
|
|
// explicite, cf §22).
|
|
//
|
|
// Mêmes simplifications volontaires que detail_capteur.qml pour le
|
|
// graphique de valeur (Canvas plutôt que QtCharts, ligne continue plutôt
|
|
// qu'escalier, pas de zoom tactile).
|
|
// ============================================================================
|
|
|
|
Shipheart_page {
|
|
id: page_detail_batterie
|
|
|
|
property int idElement: 0
|
|
property string nomElement: ""
|
|
|
|
property int periodeIndex: 1 // 24 heures par défaut
|
|
readonly property var periodesLibelles: [qsTr("1 heure"), qsTr("24 heures"), qsTr("7 jours"), qsTr("30 jours")]
|
|
|
|
property int variableIndex: 0 // "soc" par défaut
|
|
readonly property var variablesCodes: ["soc", "tension", "temperature", "courant_differentiel", "courant_charge", "courant_decharge", "soh", "autonomie", "energie"]
|
|
readonly property var variablesLibelles: [qsTr("SOC"), qsTr("Tension"), qsTr("Température"), qsTr("I. différentiel"), qsTr("I. charge"), qsTr("I. décharge"), qsTr("SOH"), qsTr("Autonomie"), qsTr("Énergie")]
|
|
readonly property bool modeEnergie: variablesCodes[variableIndex] === "energie"
|
|
|
|
// --- État pour le mode "variable simple" (graphique de valeur) ---
|
|
property var pointsCourbe: []
|
|
property real valeurMin: 0
|
|
property real valeurMax: 0
|
|
property real valeurMoyenne: 0
|
|
property double tempsMin: 0
|
|
property double tempsMax: 0
|
|
property string uniteAffichage: ""
|
|
property int precisionAffichage: 1
|
|
property real valeurActuelle: 0
|
|
|
|
// --- État pour le mode "énergie" (barres + comparatif) ---
|
|
property real totalWh: 0
|
|
property var barresEnergie: []
|
|
property var comparatifEnergie: []
|
|
|
|
property DataProvider dataProvider: DataProvider {}
|
|
|
|
function charger_courbe() {
|
|
if (modeEnergie) dataProvider.get_energie("batteries", idElement, periodeIndex);
|
|
else dataProvider.get_mesures("batteries", idElement, periodeIndex, variablesCodes[variableIndex]);
|
|
}
|
|
|
|
function formater_date(timestampMs) {
|
|
return Qt.formatDateTime(new Date(timestampMs), "dd/MM HH:mm");
|
|
}
|
|
|
|
Connections {
|
|
target: dataProvider
|
|
|
|
function onMesuresRecues(type, id, periode, variable, donnees) {
|
|
if (id !== idElement || periode !== periodeIndex || variable !== variablesCodes[variableIndex]) return;
|
|
|
|
pointsCourbe = donnees.points;
|
|
uniteAffichage = donnees.unite;
|
|
precisionAffichage = donnees.precision;
|
|
valeurActuelle = donnees.valeur_actuelle;
|
|
if (donnees.points.length > 0) {
|
|
valeurMin = donnees.min.v;
|
|
tempsMin = donnees.min.t;
|
|
valeurMax = donnees.max.v;
|
|
tempsMax = donnees.max.t;
|
|
valeurMoyenne = donnees.moyenne;
|
|
}
|
|
graphiqueVariable.requestPaint();
|
|
}
|
|
|
|
function onEnergieRecue(type, id, periode, donnees) {
|
|
if (id !== idElement || periode !== periodeIndex || !modeEnergie) return;
|
|
totalWh = donnees.total_wh;
|
|
barresEnergie = donnees.barres;
|
|
comparatifEnergie = donnees.comparatif;
|
|
graphiqueBarres.requestPaint();
|
|
}
|
|
|
|
function onErreur(message) {
|
|
console.log("DataProvider erreur (détail batterie) : " + message);
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: charger_courbe()
|
|
|
|
Timer {
|
|
interval: 5000
|
|
running: true
|
|
repeat: true
|
|
onTriggered: charger_courbe()
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 20
|
|
spacing: 15
|
|
|
|
Text {
|
|
text: nomElement
|
|
font.pixelSize: 22
|
|
font.bold: true
|
|
color: couleur_gris_pale
|
|
}
|
|
|
|
// Sélecteur de variable (8 valeurs simples + énergie) :
|
|
GridLayout {
|
|
Layout.fillWidth: true
|
|
columns: 4
|
|
columnSpacing: 8
|
|
rowSpacing: 8
|
|
|
|
Repeater {
|
|
model: variablesLibelles
|
|
delegate: Rectangle {
|
|
Layout.fillWidth: true
|
|
height: 34
|
|
radius: 8
|
|
color: (index === variableIndex) ? shipheart_couleur_fond_bouton_actif : shipheart_couleur_fond_bouton
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: modelData
|
|
color: couleur_blanc_casse
|
|
font.pixelSize: 12
|
|
font.bold: (index === variableIndex)
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
onClicked: {
|
|
variableIndex = index;
|
|
charger_courbe();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 20
|
|
opacity: dataProvider.connecte ? 1.0 : 0.45
|
|
|
|
RowLayout {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
spacing: 4
|
|
Text {
|
|
text: modeEnergie
|
|
? (totalWh >= 1000 ? (totalWh / 1000).toFixed(2) : totalWh.toFixed(1))
|
|
: valeurActuelle.toFixed(precisionAffichage)
|
|
font.pixelSize: 64
|
|
font.bold: true
|
|
color: couleur_blanc_casse
|
|
}
|
|
Text {
|
|
text: modeEnergie ? (totalWh >= 1000 ? "kWh" : "Wh") : uniteAffichage
|
|
font.pixelSize: 20
|
|
color: couleur_gris_pale
|
|
Layout.alignment: Qt.AlignTop
|
|
}
|
|
}
|
|
|
|
Item { Layout.fillWidth: true }
|
|
|
|
ColumnLayout {
|
|
visible: !modeEnergie
|
|
spacing: 10
|
|
RowLayout {
|
|
Text { text: qsTr("Max"); color: couleur_gris_pale; Layout.preferredWidth: 90 }
|
|
Text { text: valeurMax.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; Layout.preferredWidth: 100 }
|
|
Text { text: "[" + formater_date(tempsMax) + "]"; color: couleur_gris_moyen }
|
|
}
|
|
RowLayout {
|
|
Text { text: qsTr("Moyen"); color: couleur_gris_pale; Layout.preferredWidth: 90 }
|
|
Text { text: valeurMoyenne.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; Layout.preferredWidth: 100 }
|
|
}
|
|
RowLayout {
|
|
Text { text: qsTr("Min"); color: couleur_gris_pale; Layout.preferredWidth: 90 }
|
|
Text { text: valeurMin.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; Layout.preferredWidth: 100 }
|
|
Text { text: "[" + formater_date(tempsMin) + "]"; color: couleur_gris_moyen }
|
|
}
|
|
RowLayout {
|
|
Text { text: qsTr("Delta (Max - Min)"); color: couleur_gris_pale; Layout.preferredWidth: 160 }
|
|
Text { text: (valeurMax - valeurMin).toFixed(precisionAffichage + 1) + " " + uniteAffichage; color: couleur_blanc_casse }
|
|
}
|
|
}
|
|
|
|
Text {
|
|
visible: modeEnergie
|
|
text: qsTr("Consommation totale sur la période - détail par circuit ci-dessous")
|
|
color: couleur_gris_pale
|
|
font.pixelSize: 13
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
spacing: 15
|
|
opacity: dataProvider.connecte ? 1.0 : 0.45
|
|
|
|
// --- Mode "variable simple" : graphique de valeur habituel ---
|
|
Canvas {
|
|
id: graphiqueVariable
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
visible: !modeEnergie
|
|
|
|
onPaint: {
|
|
var ctx = getContext("2d");
|
|
ctx.reset();
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
if (pointsCourbe.length < 2) {
|
|
ctx.fillStyle = couleur_rouge_transparent;
|
|
ctx.font = "14px sans-serif";
|
|
ctx.fillText(qsTr("Pas assez de données sur cette période."), width / 2 - 110, height / 2);
|
|
return;
|
|
}
|
|
|
|
var marge = 45;
|
|
var largeurUtile = width - 2 * marge;
|
|
var hauteurUtile = height - 2 * marge;
|
|
|
|
var tMin = pointsCourbe[0].t;
|
|
var tMax = pointsCourbe[pointsCourbe.length - 1].t;
|
|
|
|
var padding = (valeurMax - valeurMin) * 0.1 || 1;
|
|
var yMin = valeurMin - padding;
|
|
var yMax = valeurMax + padding;
|
|
|
|
function px(t) { return marge + ((t - tMin) / (tMax - tMin)) * largeurUtile; }
|
|
function py(v) { return marge + hauteurUtile - ((v - yMin) / (yMax - yMin)) * hauteurUtile; }
|
|
|
|
ctx.strokeStyle = "#333333";
|
|
ctx.fillStyle = couleur_gris_pale;
|
|
ctx.font = "11px sans-serif";
|
|
var nbLignesY = 5;
|
|
for (var i = 0; i <= nbLignesY; i++) {
|
|
var v = yMin + (i / nbLignesY) * (yMax - yMin);
|
|
var y = py(v);
|
|
ctx.beginPath();
|
|
ctx.moveTo(marge, y);
|
|
ctx.lineTo(width - marge, y);
|
|
ctx.stroke();
|
|
ctx.fillText(v.toFixed(precisionAffichage), 2, y + 4);
|
|
}
|
|
|
|
// Quadrillage vertical ET étiquettes, ensemble, sur les mêmes
|
|
// paliers ronds - paliers de 5 min (1h), heure pleine (24h) ou
|
|
// minuit (7j/30j). Remplace l'ancien double affichage (quadrillage
|
|
// sans étiquette + étiquettes à des positions non alignées).
|
|
function prochain_palier_rond(instant, periodeIdx) {
|
|
var d = new Date(instant);
|
|
if (periodeIdx >= 2) {
|
|
d.setHours(0, 0, 0, 0);
|
|
if (d.getTime() < instant) d.setDate(d.getDate() + 1);
|
|
} else if (periodeIdx === 1) {
|
|
d.setMinutes(0, 0, 0);
|
|
if (d.getTime() < instant) d.setHours(d.getHours() + 1);
|
|
} else {
|
|
d.setSeconds(0, 0);
|
|
d.setMinutes(Math.ceil(d.getMinutes() / 5) * 5);
|
|
if (d.getTime() < instant) d.setMinutes(d.getMinutes() + 5);
|
|
}
|
|
return d.getTime();
|
|
}
|
|
var pasGrilleMs = (periodeIndex >= 2) ? 86400000 : (periodeIndex === 1) ? 3600000 : 5 * 60000;
|
|
var formatEtiquette = (periodeIndex >= 2) ? "dd/MM" : "HH:mm";
|
|
ctx.strokeStyle = "#2a2a2a";
|
|
ctx.fillStyle = couleur_gris_pale;
|
|
// Une étiquette sur 3 seulement pour 24h/30j (trop chargé sinon,
|
|
// 24-25 ou 30 barres) - à partir de la première, quitte à ce que les
|
|
// 1-2 dernières graduations restent sans étiquette :
|
|
var pasEtiquette = (periodeIndex === 1 || periodeIndex === 3) ? 3 : 1;
|
|
var indexGrille = 0;
|
|
for (var tGrille = prochain_palier_rond(tMin, periodeIndex); tGrille <= tMax; tGrille += pasGrilleMs, indexGrille++) {
|
|
var xGrille = px(tGrille);
|
|
ctx.beginPath();
|
|
ctx.moveTo(xGrille, marge);
|
|
ctx.lineTo(xGrille, marge + hauteurUtile);
|
|
ctx.stroke();
|
|
if (indexGrille % pasEtiquette === 0) {
|
|
ctx.fillText(Qt.formatDateTime(new Date(tGrille), formatEtiquette), xGrille - 18, height - 8);
|
|
}
|
|
}
|
|
|
|
ctx.strokeStyle = couleur_bleu_koriolan;
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
for (var k = 0; k < pointsCourbe.length; k++) {
|
|
var xx = px(pointsCourbe[k].t);
|
|
var yy = py(pointsCourbe[k].v);
|
|
if (k === 0) ctx.moveTo(xx, yy);
|
|
else ctx.lineTo(xx, yy);
|
|
}
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = "lightgreen";
|
|
ctx.beginPath();
|
|
ctx.arc(px(tempsMin), py(valeurMin), 4, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
ctx.beginPath();
|
|
ctx.arc(px(tempsMax), py(valeurMax), 4, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
// --- Mode "énergie" : barres + tableau comparatif ---
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
visible: modeEnergie
|
|
spacing: 10
|
|
|
|
Canvas {
|
|
id: graphiqueBarres
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: parent.height * 0.45
|
|
|
|
onPaint: {
|
|
var ctx = getContext("2d");
|
|
ctx.reset();
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
if (barresEnergie.length === 0) {
|
|
ctx.fillStyle = couleur_rouge_transparent;
|
|
ctx.font = "14px sans-serif";
|
|
ctx.fillText(qsTr("Pas assez de données sur cette période."), width / 2 - 110, height / 2);
|
|
return;
|
|
}
|
|
|
|
var marge = 45;
|
|
var largeurUtile = width - 2 * marge;
|
|
var hauteurUtile = height - 2 * marge;
|
|
|
|
var maxBarre = 0;
|
|
for (var i = 0; i < barresEnergie.length; i++) {
|
|
if (barresEnergie[i].valeur_wh > maxBarre) maxBarre = barresEnergie[i].valeur_wh;
|
|
}
|
|
if (maxBarre <= 0) maxBarre = 1;
|
|
|
|
var largeurBarre = (largeurUtile / barresEnergie.length) * 0.7;
|
|
var pasBarre = largeurUtile / barresEnergie.length;
|
|
|
|
ctx.strokeStyle = "#333333";
|
|
ctx.fillStyle = couleur_gris_pale;
|
|
ctx.font = "10px sans-serif";
|
|
var nbLignesY = 4;
|
|
for (var l = 0; l <= nbLignesY; l++) {
|
|
var v = (l / nbLignesY) * maxBarre;
|
|
var y = marge + hauteurUtile - (v / maxBarre) * hauteurUtile;
|
|
ctx.beginPath();
|
|
ctx.moveTo(marge, y);
|
|
ctx.lineTo(width - marge, y);
|
|
ctx.stroke();
|
|
ctx.fillText(v.toFixed(1), 2, y + 4);
|
|
}
|
|
|
|
ctx.fillStyle = couleur_bleu_koriolan;
|
|
for (var k = 0; k < barresEnergie.length; k++) {
|
|
var hBarre = (barresEnergie[k].valeur_wh / maxBarre) * hauteurUtile;
|
|
var xBarre = marge + k * pasBarre + (pasBarre - largeurBarre) / 2;
|
|
var yBarre = marge + hauteurUtile - hBarre;
|
|
ctx.fillRect(xBarre, yBarre, largeurBarre, hBarre);
|
|
|
|
if (k === 0 || k === barresEnergie.length - 1 || k === Math.floor(barresEnergie.length / 2)) {
|
|
ctx.fillStyle = couleur_gris_pale;
|
|
var dateDebutBarre = new Date(barresEnergie[k].debut);
|
|
var etiquette = (dateDebutBarre.getHours() === 0 && dateDebutBarre.getMinutes() === 0)
|
|
? Qt.formatDateTime(dateDebutBarre, "dd/MM")
|
|
: Qt.formatDateTime(dateDebutBarre, "HH:mm");
|
|
ctx.fillText(etiquette, xBarre - 15, height - 8);
|
|
ctx.fillStyle = couleur_bleu_koriolan;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tableau comparatif par circuit :
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
color: "transparent"
|
|
border.color: "#333333"
|
|
border.width: 1
|
|
radius: 6
|
|
|
|
ListView {
|
|
anchors.fill: parent
|
|
anchors.margins: 8
|
|
clip: true
|
|
model: comparatifEnergie
|
|
spacing: 4
|
|
|
|
delegate: RowLayout {
|
|
width: ListView.view.width
|
|
|
|
Text {
|
|
text: modelData.nom
|
|
color: (modelData.consigne > 0) ? couleur_blanc_casse : couleur_gris_moyen
|
|
font.pixelSize: 13
|
|
Layout.preferredWidth: parent.width * 0.4
|
|
elide: Text.ElideRight
|
|
}
|
|
Text {
|
|
text: modelData.energie_wh.toFixed(2) + " Wh"
|
|
color: couleur_blanc_casse
|
|
font.pixelSize: 13
|
|
Layout.preferredWidth: parent.width * 0.3
|
|
}
|
|
Text {
|
|
text: modelData.pourcentage.toFixed(1) + " %"
|
|
color: couleur_gris_pale
|
|
font.pixelSize: 13
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
spacing: 8
|
|
Repeater {
|
|
model: periodesLibelles
|
|
delegate: Rectangle {
|
|
Layout.preferredWidth: 140
|
|
Layout.preferredHeight: 40
|
|
radius: 8
|
|
color: (index === periodeIndex) ? shipheart_couleur_fond_bouton_actif : shipheart_couleur_fond_bouton
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: modelData
|
|
color: couleur_blanc_casse
|
|
font.bold: (index === periodeIndex)
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
onClicked: {
|
|
periodeIndex = index;
|
|
charger_courbe();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bouton retour :
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 44
|
|
radius: 8
|
|
color: shipheart_couleur_fond_bouton
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: "↩"
|
|
font.pixelSize: 20
|
|
color: couleur_blanc_casse
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
onClicked: stackView.pop()
|
|
}
|
|
}
|
|
}
|
|
}
|