Onglet rapports

../../../_images/liste_rapports_objets_metier.png

1. Définition

Un rapport sur un objet métier permet de générer des fichiers au format .pdf ou .doc sur les informations relative à un un objet sélectionné dans le panier.

Deux types de rapports sont à distinguer :

  • Les rapports sur un élément ../../../_images/logo_rapport_simple.pnglogo rapport simple
  • Les rapports sur plusieurs éléments ../../../_images/logo_rapport_multi.pnglogo rapport multi

Si un utilisateur sélectionne plusieurs entités et lance un rapport sur un élément, alors plusieurs fichiers sont générés. Inversément, si il lance un rapport sur plusieurs éléments, un seul fichier contenant les informations de chacun des éléments est généré.

../../../_images/exemple_rapport_pdf.png

2. Utilisation

1 - Depuis le panier

Pour générer un rapport sur objet métier depuis le panier, sélectionner un objet sur la carte en cliquant dessus et l”ajouter au panier Une fois dans le panier, sélectionner les objets et générer le rapport voulu à l”aide du bouton « Rapports » (en haut à droite du panier).

../../../_images/creation_rapport_vmap.png

Depuis vMap 2020.02, la création d”un rapport depuis le panier donne la possibilité de sélectionner un style. Il faut néemmoins que ce dernier soit associé au rapport ainsi qu”à l”utilisateur qui est connecté.

Si aucun style n”est associé au rapport, il se génère directement.

../../../_images/rapport_vmap_styles.png

2 - Depuis l”infobulle

../../../_images/rapport_vmap_objet.png ../../../_images/rapport_vmap_objets.png

Pour générer un rapport sur objet métier depuis les infobulles de vMap, sélectionner un objet sur la carte en cliquant dessus puis cliquer pis ouvrir le menu déroulant de l”infobulle permettant de générer un « Rapport sur ces objets ». Si un style est associé à l”utilisateur connecté ainsi qu”au rapport, l”application permettra de choisir le style dans une fenêtre.

../../../_images/rapport_vmap_modal.png

3. Administration

L”onglet Rapports du menu Développement permet la création, l”édition et la suppression de rapports.

Dans l”interface d”administration renseigner les éléments suivants :

  • Nom : nom affiché dans l”interface
  • Format d”impression : A4/A3
  • Orientation : portrait/paysage
  • Format de sortie : pdf/doc
  • Objet métier : objet métier sur lequel le rapport doit être associé
  • Rapport sur plusieurs éléments : pour générer un ou plusieurs documents lors de sélections multiples
  • Active les styles : permet d”ajouter un style à un rapport
  • Définition HTML : permet de configurer la mise en page
  • Objets JSON : permet une configuration plus avancée

../../../_images/administration_rapports.png

3.1. Configuration de la définition HTML

Le bloc de définition HTML permet de configurer la mise en page du rapport. Il est recommandé de procéder en trois parties :

  • le style : balise style qui contiend la définition CSS à utiliser.
  • le corps : balises HTML de mise en page.
  • le script : balise script qui lance du JavaScript lors de la génération (gestion des sauts de page, par exemple).

3.1.1. Utilisation des variables

Dans le corps, la librairie AngularJS est accessible, c”est à dire que l”on peut utiliser la syntaxe suivante pour afficher le contenu d”une variable :

<label class="fichelabel">Nom: {{BO.nom}}</label>

Dans l”exemple ci-dessus, la variable BO est présente par défaut et contient les attributs de l”objet résultant (notez que pour un rapport à plusieurs éléments, elle se compose d”un tableau contenant les divers objets retournés).

Avec la librairie AngularJS, on peut facilement effectuer des boucles, des conditions, des changements de style etc..

Ci-après, un exemple permettant de faire une boucle et lister les lampes d”une route :

<!--Description des lampes de la route-->
<div ng-repeat="oLampe in aLampes" ng-if="oLampe.lampe_id!=undefined" class="description_box border_container">
    <label class="fiche_label">Lampe: {{oLampe.nom}}</label>
    <label class="fiche_label">Id: {{oLampe.lampe_id}}</label>
    <label class="fiche_label">Puissance: {{oLampe.puissance}}</label>
    <label class="fiche_label">Allumée: {{oLampe.allume ? 'Oui' : 'Non'}}</label>
</div>

3.1.2. Affichage de la carte dans un rapport

Si on veut afficher une ou plusieurs cartes dans un rapport, créer dans une première partie, une balise image avec l” »id » de son choix (il est conseillé d”utiliser un fond transparent au cas où les tuiles ne se chargent pas lors de l”impression) :

<img id="map_image" src="images/transparent.png">

La seconde partie de la manipulation consiste à paramétrer un objet JSON pour indiquer à vMap la carte à utiliser et la façon dont l”utiliser. Se référer à la partie 3.2.1. Configuration des cartes à utiliser dans le template HTML

3.2. Configuration des objets JSON

Pour bien configurer un rapport, il est utile de configurer la partie Objets JSON. Le but est de pouvoir ajouter des cartes au rapport, interroger des webservices ou afficher des images. Pour cela, créer en JSON, un tableau contenant les différentes configurations. Chacune d”elle est typée avec l”argument « type ».

Exemple:

[{
    "type":"map",
    "target":"#map_image",
    "map_id":120,
    "features_zoom":400,
    "scale_target":"map_scale"
}, {
    "type":"webservice",
    "ressource":"vitis/genericquerys",
    "params":{
        "schema":"sig",
        "table":"lampe",
        "filter":"{\"column\":\"route_id\", \"compare_operator\":\"=\", \"value\": \"{{BO.route_id}}\"}"
    },
    "target": "aLampes"
}, {
    "type":"object",
    "content":{
        "company":"Veremes"
    },
    "target": "scope"
}]

3.2.1 Configuration des cartes à utiliser dans le template HTML

On peut inclure des cartes dans les formulaires en utilisant des objets de type « map » avec les paramètres suivants :

  • target : cible sur laquelle doit se poser la carte ( »# » + l”identifiant de votre balise image)
  • map_id : identifiant de la carte à utiliser
  • features_zoom : coefficient de zoom par rapport à la feature où la valeur 100 correspondrait à un zoom maximum.
  • scale_target : nom de la variable qui contient l”échelle de la carte dans le template HTML

Exemple:

{
    "type":"map",
    "target":"#map_image",
    "map_id":120,
    "features_zoom":400,
    "scale_target":"map_scale"
}

Ici on vient afficher le(s) objets métier sur la carte 120 dans la balise image « #map_image » tout en mettant son échelle dans la variable « map_scale ».

3.2.2. Configuration des webservices

On peut demander à effectuer des requêtes vers des webservices vMap (PHP) pour afficher le résultat dans la vue HTML au travers de variables nommées. Il faut, pour cela, utiliser le type « webservice » et utiliser les paramètres suivants :

  • ressource : ressource à interroger
  • params : paramètres à utiliser lors de l”interrogation
  • target : nom de la variable créée qui contiend les informations retournées

Important: tout comme dans la Définition HTML, on peut utiliser des doubles accolades pour utiliser une variable BO.

Exemple:

{
    "type":"webservice",
    "ressource":"vitis/genericquerys",
    "params":{
        "schema":"sig",
        "table":"lampe",
        "filter":"{\"column\":\"route_id\", \"compare_operator\":\"=\", \"value\": \"{{BO.route_id}}\"}"
    },
    "target": "aLampes"
}

Dans cet exemple, une requête au webservice vitis/genericquerys permet d”interroger de façon générique des tables. Avec cet appel et en utilisant les doubles accolades {{BO.route_id}}, l”ensemble des lampes contenues dans la route sont affichées.

3.2.2. Configuration des images

On peut afficher des images pré-définies en utilisant le type image et les paramètres suivants :

  • imageUrl : URL de l”image (peut être une définition base-64)
  • target : cible sur laquelle doit se poser l”image ( »# » + l”identifiant de votre balise image)

Exemple :

{
    "type":"image",
    "imageUrl":"data:image/png;base64,iVBORw0KGgoAAAANSUh...",
    "target":"#img1"
}

4. Exemple complet

Ci-dessous un exemple complet actuellement visible sur https://demo.veremes.net/vmap/?map_id=29. Dans cet exemple, un projet d”éclairage public contient deux entités :

  • les routes
  • les lampes

Chaque lampe est associée à une route

4.1 Définition HTML

<!--Style-->
<style>
    .A4_landscape_page {
      width: 29.7cm;
      height: 21cm;
      padding: 40px;
    }
    #map_legend{
        margin-left: 25px;
        text-align: left;
    }
    #map_image {
        background-color: #DFDFDF;
        width: 100%;
        height: 100%;
    }
    #map_image2 {
        background-color: #DFDFDF;
        width: 100%;
        height: 100%;
    }
    #map_overview {
        background-color: #DFDFDF;
        height: 4cm;
        width: 4cm;
    }
    .border_container{
        border: 1px solid black;
    }
    .description_box{
        text-align: left;
        padding: 5px;
        margin-bottom: 10px;
    }
    .fiche_urb_label {
        font-size: 10px;
        width: 100%;
        margin-bottom: 0px;
    }
    #img1{
        height: 1cm;
        margin-top: 10px;
        margin-bottom: -10px;
    }
    .main_infos_column{
        height:100%;
        width:100%;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .infos_column {
      height: 100%;
      border: 1px solid black;
    }
</style>

<!-- A4 print Template -->
<div id="A4_landscape_template" class="A4_landscape_page" style="text-align: center">

    <div class="row" style="padding-left: 10px;">
        <div class="col-xs-4">
            <div class="border_container main_infos_column infos_column">
                <img id="img1" src="images/transparent.png">
                <hr>
                <h4>Fiche Route</h4>
                <hr>

                <!--Description de la route-->
                <div class="description_box border_container">
                    <label class="fiche_urb_label">Nom: {{BO.nom}}</label>
                    <label class="fiche_urb_label">Id: {{BO.route_id}}</label>
                    <label class="fiche_urb_label">Auteur: {{BO.auteur}}</label>
                    <label class="fiche_urb_label">Date d'édition: {{BO.date_maj}}</label>
                    <label class="fiche_urb_label">Echelle: {{map_scale}}</label>
                </div>

                <br>

                <!--Description des lampes de la route-->
                <div ng-repeat="oLampe in aLampes" ng-if="oLampe.lampe_id!=undefined" class="description_box child_description_box border_container">
                    <label class="fiche_urb_label">Lampe: {{oLampe.nom}}</label>
                    <label class="fiche_urb_label">Id: {{oLampe.lampe_id}}</label>
                    <label class="fiche_urb_label">Puissance: {{oLampe.puissance}}</label>
                    <label class="fiche_urb_label">Allumée: {{oLampe.allume ? 'Oui' : 'Non'}}</label>
                </div>
            </div>
        </div>
        <div class="col-xs-8" style="height: 710px">
            <div style="height: 100%; border: 1px solid black;">
                <img id="map_image" src="images/transparent.png">
            </div>
        </div>
    </div>
</div>

<script>
setTimeout(function () {

  var aElems = $('.child_description_box');
  var aPages = [$('#A4_landscape_template')];
  var currentPage = 0;
  var aBottom = [];
  var iTotalHeight = 0;

  var createPage = function() {
    // Page
    var newPage = document.createElement("div");
    $(newPage).addClass('A4_landscape_page');
    // Zone d'informations
    var newInfosColumn = document.createElement("div");
    $(newInfosColumn).addClass('infos_column');
    $(newInfosColumn).css({
      "padding": "15px"
    });
    // Ajout des éléments
    $(newPage).append(newInfosColumn);
    $('#A4_landscape_template').parent().append(newPage);
    // Sauvegarde de la page
    aPages.push($(newPage));
    currentPage++;
    // Mise à jour de iTotalHeight
    iTotalHeight = getPagesHeight();
    return newPage;
  }

  var getBottomPositions = function(aElems) {
    var aBottoms = [];
    for (var i = 0; i < aElems.length; i++) {
      var iTop = $(aElems[i]).position().top;
      var iHeight = $(aElems[i]).height();
      var iBottom = iTop + iHeight;
      aBottoms.push(iBottom);
    }
    return aBottoms;
  }

  var getPagesHeight = function() {
    var aPagesBotomPositions = getBottomPositions(aPages);
    return aPagesBotomPositions[aPagesBotomPositions.length -1];
  }

  var moveElements = function(aElemsToMove, iPage) {
    for (var i = 0; i < aElemsToMove.length; i++) {
      $(aElemsToMove[i]).appendTo($(aPages[iPage]).find('.infos_column'));
    }
  }

  var pagineChilds = function(){

    aBottom = getBottomPositions(aElems);
    iTotalHeight = getPagesHeight();

    for (var i = 0; i < aElems.length; i++) {

      // Quand un élément est plus bas que la dernière page
      if (aBottom[i] > iTotalHeight - 20) {

        // Crée une nouvelle page
        var newPage = createPage();

        // Déplace les éléments qui suivent sur la nouvelle page
        var aElemsToMove = [];
        for (var ii = i; ii < aElems.length; ii++) {
          aElemsToMove.push(aElems[ii]);
        }
        moveElements(aElemsToMove, aPages.length - 1);

        // Relance la fonction
        pagineChilds();
        return 0;
      }
    }
  }

  pagineChilds();
});
</script>

4.2. Objets JSON

[{
    "type":"map",
    "target":"#map_image",
    "map_id":120,
    "features_zoom":400,
    "scale_target":"map_scale"
}, {
    "type":"webservice",
    "ressource":"vitis/genericquerys",
    "params":{
        "schema":"sig",
        "table":"lampe",
        "filter":"{\"column\":\"route_id\", \"compare_operator\":\"=\", \"value\": \"{{BO.route_id}}\"}"
    },
    "target": "aLampes"
}, {
    "type":"image",
    "imageUrl":"data:image/png;base64,iVBORw0KGgoAAAANSUhE...",
    "target":"#img1"
}, {
    "type":"object",
    "content":{
        "company":"Veremes"
    },
    "target": "scope"
}]