Changeset 4359346 in sicp for static

Timestamp:

Jun 23, 2015, 8:14:05 AM (9 years ago)

Author:

Ing. Roldan D. Vargas G <rvargas@…>

Branches:

master

Children:

c6bbc4d

Parents:

d78f2cd

Message:

se agregan plantillas, funciones y archivos javascript para el proceso de simulación de escenarios

Location:

static

Files:

• css/styles.css (modified) (1 diff)
• js/ajax-request.js (modified) (2 diffs)
• js/layout.js (modified) (1 diff)
• js/simulate_actions.js (added)

static/css/styles.css

@@ -69 +69 @@
 .fuente-10 { font-size: 10px; }
 .disable_btn, .disable_btn > i { color: slategray; cursor: none; }
+
+/** Estilos para los gráficos */
+.graphic-content {width:550px;height:250px;margin:0 auto;}

static/js/ajax-request.js

@@ -45 +45 @@
     $.getJSON(url, {id:id, narriba:narriba, nabajo:nabajo, anho:anho}, function(datos) {
         if (datos.resultado) {
-            alert('archivo generado');
             return true
         }
@@ -54 +53 @@
     });
 }
+
+/**
+ * @brief Función que genera los gráficos como resultado del procesod e simulación
+ *
+ * @author Ing. Roldan Vargas (rvargas at cenditel.gob.ve)
+ * @copyright GNU/GPLv2
+ * @date 10-06-2015
+ * @param url       Variable de tipo string que contiene la URL que procesa la petición
+ * @param nodo_id   Variable de tipo string que contiene el identificador del nodo a consultar para la representación
+ *                  de los correspondientes gráficos
+ * @return Muestra un mensaje de error al usuario en caso de un fallo en la obtención de los datos a graficar, en caso
+ *          contrario muestra los correspondientes gráficos
+ */
+function cargar_datos_sim(url, nodo_id) {
+    $.getJSON(url, {nodo_id: nodo_id}, function(datos) {
+        if (datos.resultado) {
+            /** Asignación de datos en la pestaña de producción */
+            $("#cadena-empresa").html(datos.ue.toUpperCase());
+            $("#cadena-rif").html(datos.rif.toUpperCase());
+            $("#producto-nombre").html(datos.producto.toUpperCase());
+            $("#producto-codigo-arancelario").html(datos.cod_aran);
+
+            /** Instrucción que asigna una etiqueta div para mostrar los mensajes en el gráfico */
+            $("<div id='tooltip' data-toggle='tooltip' class='tip-top'></div>").css({
+                position: "absolute",
+                display: "none",
+                border: "1px solid #4D7299",
+                padding: "2px 10px 2px 10px",
+                "background-color": "#73B6E5",
+                opacity: 0.80,
+                "box-shadow": "rgba(0, 0, 0, 0.3) 20px 20px 20px",
+                "font-size": 10,
+                "font-weight": "bold",
+                color: "#000",
+                "border-radius": "15px"
+            }).appendTo("body");
+
+            var moneda = "Bs.";
+
+            if (datos.attrib_pr == "imports") {
+                moneda = "$";
+            }
+
+            /** Inicialización de variables con los datos obtenidos de la consulta */
+            var r = datos.produccion, e = datos.employees, cost1 = datos.cost1, cost2 = datos.cost2,
+                cost3 = datos.cost3, cost4 = datos.cost4, price = datos.price;
+
+            /** Inicialización de variabes con los datos a representar en el gráfico */
+            var d1 = [['0', r[0]], ['1', r[1]], ['2', r[2]], ['3', r[3]]],
+                d2 = [['0', e[0]], ['1', e[1]], ['2', e[2]], ['3', e[3]]],
+                c1 = [['0', cost1[0]], ['1', cost1[1]], ['2', cost1[2]], ['3', cost1[3]]],
+                c2 = [['0', cost2[0]], ['1', cost2[1]], ['2', cost2[2]], ['3', cost2[3]]],
+                c3 = [['0', cost3[0]], ['1', cost3[1]], ['2', cost3[2]], ['3', cost3[3]]],
+                c4 = [['0', cost4[0]], ['1', cost4[1]], ['2', cost4[2]], ['3', cost4[3]]],
+                p = [['0', price[0]], ['1', price[1]], ['2', price[2]], ['3', price[3]]];
+
+            var axis_data = [
+                {
+                    'graph': '#graph-produccion',
+                    'colors': [datos.linecolor],
+                    'data': [{label: '&#160;'+datos.tipo_pr, data: d1}],
+                    'tabla': {
+                        'id': '#table-produccion',
+                        'campos': "<tr><td>" + datos.tipo_pr.toUpperCase() + " (" + datos.unid_medida + ")" + "</td>" +
+                                  "<td class'text-right'>" + r[0] + "</td>" + "<td class'text-right'>" + r[1] +
+                                  "</td><td class'text-right'>" + r[2] + "</td><td class'text-right'> " + r[3] +
+                                  "</td></tr>"
+                    }
+                },
+                {
+                    'graph': '#graph-empleo',
+                    'colors': [datos.linecolor],
+                    'data': [{label: '&#160;'+datos.empleados_leyenda, data: d2}],
+                    'tabla': {
+                        'id': '#table-empleo',
+                        'campos': "<tr><td>" + GRAPH_TABLE_EMPLEO + "</td><td>" + e[0] + "</td><td>" + e[1] + "</td>" +
+                                  "<td>" + e[2] + "</td><td>" + e[3] + "</td></tr>"
+                    }
+                },
+                {
+                    'graph': '#graph-costos',
+                    'colors': ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d"],
+                    'data': [
+                        {label: '&#160;'+datos.costos_leyenda[0], data: c1},
+                        {label: '&#160;'+datos.costos_leyenda[1], data: c2},
+                        {label: '&#160;'+datos.costos_leyenda[2], data: c3},
+                        {label: '&#160;'+datos.costos_leyenda[3], data: c4}
+                    ],
+                    'tabla': {
+                        'id': '#table-costos',
+                        'campos': "<tr><td>" + GRAPH_TABLE_COSTOS[0] + "</td>" +
+                                  "<td class'text-right'>" + cost1[0] + "</td><td class'text-right'>" + cost1[1] +
+                                  "</td><td class'text-right'>" + cost1[2] + "</td>" +
+                                  "<td class'text-right'>" + cost1[3] + "</td></tr><tr><td>" + GRAPH_TABLE_COSTOS[1] +
+                                  "</td>" + "<td class'text-right'>" + cost2[0] +
+                                  "</td><td class'text-right'>" + cost2[1] + "</td><td class'text-right'>" + cost2[2] +
+                                  "</td>" + "<td class'text-right'>" + cost2[3] + "</td></tr><tr><td>" +
+                                  GRAPH_TABLE_COSTOS[2] + "</td>" + "<td class'text-right'>" + cost3[0] +
+                                  "</td><td class'text-right'>" + cost3[1] + "</td><td class'text-right'>" + cost3[2] +
+                                  "</td>" + "<td class'text-right'>" + cost3[3] + "</td></tr><tr><td>" +
+                                  GRAPH_TABLE_COSTOS[3] + "</td>" + "<td class'text-right'>" + cost4[0] +
+                                  "</td><td class'text-right'>" + cost4[1] + "</td><td class'text-right'>" + cost4[2] +
+                                  "</td>" + "<td class'text-right'>" + cost4[3] + "</td></tr>"
+                    }
+                },
+                {
+                    'graph': '#graph-precios',
+                    'colors': [datos.linecolor],
+                    'data': [{label: '&#160;'+datos.precios_leyenda, data: p}],
+                    'tabla': {
+                        'id': '#table-precios',
+                        'campos': "<tr><td>" + moneda + "</td><td>" + price[0] + "</td><td>" + price[1] + "</td>" +
+                                  "<td>" + price[2] + "</td><td>" + price[3] + "</td></tr>"
+                    }
+                }
+            ];
+
+            for (i=0; i<axis_data.length; i++) {
+                /** Instrucción que muestra el correspondiente gráfico con los datos obtenidos */
+                $.plot(axis_data[i].graph, axis_data[i].data, {
+                    colors: axis_data[i].colors,
+                    series: {
+                        lines: { show: true },
+                        points: { show:true }
+                    },
+                    xaxis: {
+                        ticks: [ [0, GRAPH_YEARS[0]], [1, GRAPH_YEARS[1]], [2, GRAPH_YEARS[2]], [3, GRAPH_YEARS[3]] ]
+                    },
+                    grid: {
+                        backgroundColor: { colors: [ "#fff", "#eee" ] },
+                        borderWidth: {
+                            top: 1,
+                            right: 1,
+                            bottom: 2,
+                            left: 2
+                        },
+                        hoverable: true
+                    }
+                });
+
+                /** Instrucción que captura el evento del cursor cuando se posiciona sobre el gráfico */
+                $(axis_data[i].graph).bind("plothover", function(event, pos, item) {
+                    if (item) {
+                        var x = item.datapoint[0], y = item.datapoint[1].toFixed(2);
+                        $("#tooltip").html(item.series.label + " " + GRAPH_TOOLTIPS + " " + x + " = " + y).css({
+                            top: item.pageY-30, left: item.pageX
+                        }).fadeIn(200);
+                    }
+                    else {
+                        $("#tooltip").hide();
+                    }
+                });
+
+                /** Instrucción que muestra los datos en la tabla de producción */
+                $(axis_data[i].tabla.id).find("tbody").html(axis_data[i].tabla.campos);
+            }
+
+        }
+        else {
+            /** Muestra un mensaje de alerta en caso de no haber obtenido datos de la consulta */
+            bootbox.alert(datos.error);
+        }
+    });
+}

static/js/layout.js

@@ -118 +118 @@
                 },
                 onNodeSelected: function (event, node) {
-                    $("#cadena-empresa").html(node.tags[0].nombre_ue.toUpperCase());
-                    $("#cadena-rif").html(node.tags[0].rif.toUpperCase());
-                    $("#cadena-nivel").html(node.tags[0].nivel);
-                    $("#cadena-ubicacion").html(node.tags[0].ubicacion.toUpperCase());
-                    $("#producto-nombre").html(node.tags[0].pr_name.toUpperCase());
-                    $("#producto-codigo-arancelario").html(node.tags[0].cod_aran);
-                    /** Instrucciones para determinar la capacidad de produccion si es nacional */
-                    var produccion = "";
-                    var precio_unit = node.tags[0].precio_unit;
-                    if (typeof node.tags[0].produccion != "undefined") {
-                        produccion = node.tags[0].produccion;
+                    if (!$("#type-sim").length) {
+                        $("#cadena-empresa").html(node.tags[0].nombre_ue.toUpperCase());
+                        $("#cadena-rif").html(node.tags[0].rif.toUpperCase());
+                        $("#cadena-nivel").html(node.tags[0].nivel);
+                        $("#cadena-ubicacion").html(node.tags[0].ubicacion.toUpperCase());
+                        $("#producto-nombre").html(node.tags[0].pr_name.toUpperCase());
+                        $("#producto-codigo-arancelario").html(node.tags[0].cod_aran);
+                        /** Instrucciones para determinar la capacidad de produccion si es nacional */
+                        var produccion = "";
+                        var precio_unit = node.tags[0].precio_unit;
+
+                        if (node.tags[0].nacionalidad == "V") {
+                            produccion = node.tags[0].produccion;
+                            precio_unit += " Bs.";
+                        }
+                        else {
+                            produccion = node.tags[0].imports + " (Importado)";
+                            precio_unit += " $";
+                        }
+                        $("#producto-produccion").html(produccion);
+                        $("#producto-unidad-medida").html(node.tags[0].unidad_medida);
+                        $("#producto-precio_unitario").html(precio_unit);
                     }
-                    else {
-                        produccion = parseInt(node.tags[0].request_qty) - parseInt(node.tags[0].imports);
+                    else if ($("#type-sim").val() == 'res') {
+                        cargar_datos_sim(URL_GET_NODE_SIM, node.tags[0].pr_index);
                     }
-                    if (produccion==0) {
-                        produccion += " (Importado)";
-                        precio_unit += " $";
-                    }
-                    else {
-                        precio_unit += " Bs.";
-                    }
-                    $("#producto-produccion").html(produccion);
-                    $("#producto-unidad-medida").html(node.tags[0].unidad_medida);
-                    $("#producto-precio_unitario").html(precio_unit);
                 }
             });
+
+            if ($("#type-sim").length && $("#type-sim").val() == 'res') {
+                $("[id^='graph-']").each(function () {
+                    $.plot(this, GRAPH_INIT_DATA, {
+                        series: {
+                            lines: {show: true},
+                            points: {show:true}
+                        },
+                        xaxis: {
+                            ticks: [
+                                [0, "Año 0"],
+                                [1, "Año 1"],
+                                [2, "Año 2"],
+                                [3, "Año 3"]
+                            ]
+                        },
+                        grid: {
+                            backgroundColor: { colors: [ "#fff", "#eee" ] },
+                            borderWidth: {
+                                top: 1,
+                                right: 1,
+                                bottom: 2,
+                                left: 2
+                            }
+                        }
+                    });
+                });
+
+            }
+
         });
     }