Composantes des graphiques modernes

Février 2020 - Version 1.0.2

Scada-LTS composants graphiques modernes : il s'agit d'un ensemble de nouveaux composants VueJS v2.0 conçus pour la vue graphique en Scada-LTS. Il est basé sur am4chart bibliothèque. Elle génère des graphiques en utilisant JavaScript du côté de l'utilisateur qui est une nouvelle approche des graphiques en Scada (ils ont été générés via des scripts et des bibliothèques côté serveur). Il s'agit plus d'un navigateur charge qu'auparavant, mais l'application serveur devient plus légère et gagne en performance.

Types de graphiques:

Usage:

De nouveaux graphiques pourraient être ajoutés à la vue graphique Scada-LTS en ajoutant un nouveau composant HTML avec un contenu spécifique. Chaque graphique doit être initialisé en utilisant les balises HTML étendues énumérées ci-dessus. Chacune de ces balises prend une propriété spécifique nécessaire pour mettre en place un tableau spécifique. La carte est générée à l'intérieur de cette balise qui a une taille par défaut de 750x500px.


Démarrage rapide:

Créer un graphique linéaire simple pour un point de données [ numérique | multi-états | binaire ] spécifique.

<div id="chart-line-0" point-id="[dataPointID]"/>

ou

<div id="chart-line-0" point-xid="[dataPointExportID]"/>

C'est tout ! Il a rendu un graphique linéaire pour un point spécifique de la dernière heure avec des paramètres par défaut. Donc, si vous voulez surveiller le état du point de la dernière heure, c'est la façon la plus simple de le faire. Ce graphique peut être zoomé et dézoomé en utilisant barre de défilement en bas du composant. Les valeurs des données à un moment donné sont représentées par des points blancs sur le graphique..

Mais il ne s'agit encore que d'un tableau comme ce vieux. Quoique si nous voulons vraiment surveiller l'état de ce point en temps réel ? Pas de problème, il suffit d'ajouter le suivant propriétés.


Données en directs

<div id="chart-line-0" point-id="[dataPointID]" refresh-rate="10000"/>

Nous avons maintenant un graphique en direct ! Il est rafraîchi toutes les 10 minutes (10 000 ms) et lorsqu'un point de données change d'état pour prendre une autre valeur, ce nouveau point est ajouté à la carte et le plus ancien sera supprimé de notre carte. Nous pouvons désormais surveiller l'état du point de données en temps réel avec un taux de rafraîchissement choisi par nous. Pour les données critiques, nous pouvons surveiller l'état du point avec une fréquence élevée de les requêtes au serveur (plus de données en temps réel mais plus gourmandes en ressources) et pour les données non critiques, nous pouvons rafraîchir le graphique après quelques secondes.

Mais qu'en est-il si nous voulons afficher des cartes pour des points de données multiples ?


Multiple points

Il suffit d'ajouter le point de données suivant après la virgule dans âpoint-idâ property.

<div id="chart-step-line-0" point-id="[dataPointID],[anotherDataPointID],[andNextDataPointID"],[fourthDataPointID"]/>


Nous avons maintenant un graphique pour 3 points de données avec les valeurs de la dernière heure. Ces composantes n'ont pas de limites pour un le nombre de points affichés sur un seul graphique, mais j'espère que vous avez l'intuition que 30 points sur un seul graphique est ce n'est pas une bonne idée.

Pouvons-nous afficher des valeurs plus anciennes que de durer une heure ?


Période déterminée

Oui ! Il suffit d'ajouter une nouvelle propriété à notre balise.

<div id="chart-line-0" point-xid="[dataPointExportID]" refresh-rate="10000" start-date="1-day"/>

Comme vous pouvez le voir, c'est un morceau de gâteau. Il suffit de taper à l'intérieur la propriété "date de début", la période à partir de laquelle vous voulez voir les données. Vous pouvez utiliser toutes les combinaisons de chiffres avec une période de temps spécifique [heure(s) | jour(s) | faible(s) | mois ]. (ex. à 2-jours, à 1-semaine, à 3 mois à etc.) Mais ce n'est pas tout ! C'est du temps calculé dynamique à partir de maintenant mais on peut aussi utiliser un date. Si nous voulons voir les données du début de l'année précédente, il suffit de taper date (par exemple â2019/02/01â pour voir les données à partir du 1er février 2019). Il pourrait être utile de limiter les données affichées.

Pour afficher les valeurs d'une période donnée, il suffit d'ajouter le paramètre âend-dateâ..

<div id="chart-line-0" point-xid="[dataPointExportID]" start-date="2019/02/01" end-date="2019/03/01"/>

Et il fonctionne toujours avec plusieurs points de données. C'est formidable ! N'est-ce pas ?
Mais que faire si je veux ajouter une ligne horizontale à la carte pour créer par exemple un niveau d'alerte, lequel d'entre eux est dépassé et pourrait être dangereux ?


Ligne de niveau

Ok, examinons celui-ci:

<div id="chart-line-0" point-id="[dataPointID]" range-value="100" range-color="#FF0000" range-label="boiling"/>

Nous avons maintenant créé une ligne horizontale pour notre carte qui indique le niveau d'ébullition de l'eau. Grâce à cela, nous pouvons rapidement observer que la température de l'eau à l'intérieur du réservoir est bouillant. Il est utile même à l'intérieur de Scada-LTS.

Attendez un instant ! Nous avons décidé de la couleur de cette ligne horizontale. Pourrions-nous faire de même avec les lignes du graphique ?


Couleurs des graphiques

Par exemple, nous avons 3 capteurs. Les couleurs vertes par défaut sont trop similaires. Pouvons-nous mettre en place un jeu de couleurs différent pour nos cartes. Il suffit d'ajouter ce paramètre:

<div id="chart-line-0" point-id="[dpID],[dpID_2],[dpID_3]" color="#FFFC19, #0971B3, #B31212"/>

Nous avons maintenant défini 3 couleurs personnalisées pour nos cartes. Nous pouvons donner une seule valeur de couleur et le reste sera récupéré à partir de ces valeurs par défaut. Ce qui est le plus importantUTILISER DES VALEURS DE CODE COULEUR HEXADÉCIMALES
Des tableaux modernes assez colorés. Mais nous avons toujours la même taille pour le thème Oui, oui, il pourrait aussi être modifié.


Taille du graphique

<div id="chart-step-line-0" point-id="[dpID]" width="1080" height="720"/>

Graphique HD ? Pourquoi pas ! Les valeurs des attributs sont données en Pixels (px). Cela est utile lorsque nous avons défini plusieurs instances de graphique sur une vue graphique. Nous pouvons facilement calculer la position de la carte suivante.

Etiquettes

<div id="chart-step-line-0" point-id="[dpID]" label="Mid season temperature"/>

Cela suffirait à partir de la base. Il est temps de passer à des tâches plus complexes.


Graphiques multiples

Pour générer plusieurs graphiques sur la page Afficher, il suffit d'utiliser des identifiants uniques.

<div id="chart-step-line-0" point-id="[dpID]" label="Outdoor temperature"/>

<div id="chart-step-line-1" point-id="[dpID]" label="Outdoor humidity"/>

<div id="chart-step-line-2" point-id="[dpID]" label="Indoor pressure"/>

Documentation sur les cartes modernes:

Propriétés disponibles en un seul endroit pour tous les types de cartes. Les graphiques (à l'exclusion des graphiques de jauge) peuvent être exportés vers un fichier externe sous forme graphique ou textuelle. Vous pouvez exporter vers des fichiers *.png, *.jpg, *.csv, *.json.

Propriétés pour Step Line, Diagrammes de lignes

Auteur