Ejemplo de La Vista Home Nueva de Metas y Logros

by Luiz Vargas

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!---------------- INICIO DE HOME -------------------->
<div class="container-fluid"> <!-- Inicio Container:  -->
  <div class="col-xs-12 col-sm-12 col-md-12"> <!-- Inicio EL Div:  -->
    <div class="col-xs-12 col-sm-12 col-md-12 card" style="margin-bottom: 15px;margin-top: 15px; color: #ffffff;font-size: 17px; background: #043263;"> <!-- Inicio Div-Días -->
      <div class=" col-sm-4"> <!-- Inicio Días Habiles-->
        <span >Dias hábiles: </span><span id= "habil"> </span>
      </div> <!-- Fin días habiles-->
      <div class=" col-sm-4"> <!-- Inicio Transcurridos -->
        <span> Transcurridos: </span><span id="trans"> </span>
      </div> <!-- Fin transcurridos -->
      <div class=" col-sm-4"> <!-- Inicio Restantes -->
        <span>Restantes:</span><span id="rest"> </span>
      </div> <!-- Fin Restantes -->
    </div> <!-- Fin Div-Días-->
    <div class="row" style="margin-right: 0px;margin-left: 0px;"> <!-- Inicio Row-->
      <!-- Inicio Div en Globa todos los div: -->
      <div class="col-xs-12 col-sm-12 col-md-12 " style="margin-bottom: 15px; padding:  0; "> <!-- Inicio Col-md-12-->
        <div class="row" style="margin-left: 0px;margin-right: 0px; background-color: #ffffff;"> <!-- Inicio Row-->
          <div class="col-xs-12 col-sm-12 col-md-4" style="margin-top: 10px;margin-bottom: 10px;"> <!-- Inicio Div Col-md-4 -->
            <select id="seleDivisiones" class="form-control bbva02"> <!-- Inicio Select -->
              <option value='0'> - Seleccione Opción - </option>
            </select> <!-- Fin Select -->
          </div> <!-- Fin Col-md-4-->
          <div class="col-xs-12 col-sm-12 col-md-4"> <!-- Inicio Div Col-md-4 -->
            <div class="col-sm-12"> <!-- Inicio Div Col-sm-3 -->
              <ul class="nav nav-pills"...

CSS

<style>
  #colorEncabezado {
    background: #2A86CA;
  }
  .encabezado{
    color: #F0F3F4!important;
    margin-top: 0px!important;
    font-size:17px;
  }
  .LetraBody tbody{
    font-size: 14px;
  }
  
  .LetraBodyVentas tbody{
     font-size: 11px;
  }
  
  .LetraBodyLogros tbody{
    font-size: 16px;
  }
  .tamanio_progress{
    width: 40%;
    min-width: 250px;
  }
  .table-striped>tbody>tr:nth-child(even)>td,.table-striped>tbody>tr:nth-child(odd)>th {
    background-color:#E9E9E9;
  } 
  .tituSite{
    text-align:center;border:0;color:#004481; font-size: 35px;
  }
  .EncaTabla1 > thead > tr > th,
  .EncaTabla1 > tbody > tr > th,
  .EncaTabla1 > tfoot > tr > th,
  .EncaTabla1 > thead > tr > td,
  .EncaTabla1 > tbody > tr > td,
  .EncaTabla1 > tfoot > tr > td {
    border: 0px solid #FDFEFE !important;
    font-size::12px !important;
  }  
  .EncaTabla1 thead > tr > th,  
  .EncaTabla1 > tbody > tr > th,
  .EncaTabla1 > tfoot > tr > th{
    border: 1px solid #FDFEFE !important;
    color: white !important;
    background: #49A5E6 !important;
  }
  .EncaTabla2 > thead > tr > th,
  .EncaTabla2 > tbody > tr > th,
  .EncaTabla2 > tfoot > tr > th,
  .EncaTabla2 > thead > tr > td,
  .EncaTabla2 > tbody > tr > td,
  .EncaTabla2 > tfoot > tr > td {
    border: 0px solid #FDFEFE !important;
  }  
  .EncaTabla2 thead > tr > th,  
  .EncaTabla2 > tbody > tr > th,
  .EncaTabla2 > tfoot > tr > th{
    border: 1px solid #FDFEFE !important;
    color: white !important;
    background: #5AC4C4 !important;
  }
  .EncaTabla3 > thead > tr > th,
  .EncaTabla3 > tbody > tr > th,
  .EncaTabla3 > tfoot > tr > th,
  .EncaTabla3 > thead > tr > td,
  .EncaTabla3 > tbody > tr > td,
  .EncaTabla3 > tfoot > tr > td {
    border: 0px solid #FDFEFE !important;
  }  
  .EncaTabla3 thead > tr > th,  
  .EncaTabla3 > tbody > tr > th,
  .EncaTabla3 > tfoot > tr > th{
    border: 1px solid #FDFEFE !important;
    color: white !important;
    background: #5BBEFF !important;
  }
  .EncaTabla4 >...

JavaScript

init: function() {
    google.script.run.withSuccessHandler(function(response) {
      sessionStorage.setItem('local',JSON.stringify(response));
      JS_home1.setHabiles();
      JS_home1.Mes(response);
      JS_home1.events();
      indexHTML.hideModal();
    }).getPrueba();
  },

  /*Función Donde Se Realiza el cambio de Pestaña: */
  events: function() {
    $(".btn-default").click(function() {
      var value= $(this).find("input").attr("id");
      if(value == 'option1') {
        $("#gral1").empty();
        JS_home1.Mes(JSON.parse(sessionStorage.local));
      } else if(value == 'option2') {
        JS_home1.Acum(JSON.parse(sessionStorage.local));
      }
    });

    $('.spanDivs').click(function() {
      var value= $(this).attr("id");
      console.log(value);
      sessionStorage.setItem('chart_Metas',JSON.stringify(value));
      indexHTML.redirectionPage('DetalleProductos');
    });
  },

  /*Función Para Obtener Lo Del Mes: */
  Mes: function(objetos) {
    for(var i in objetos) {
      var valor = objetos[i].IMP_LOGRO_PRES_ESTANCO;
      var porcentaje = valor + '%';
      $("#gral1").append("<div class='col-xs-12 col-md-4 col-sm-4 spanDivs'style='padding-bottom: 9px;padding-left: 5px;padding-right: 5px;' id='" + objetos[i].COD_PRODUCTO + "'>"+"<div class='col-xs-12 col-md-12 col-sm-12 card' style=' background-color: #ffffff;'>" + 
                        "<div class='col-xs-12 col-md-2 col-sm-2' style='text-align: -webkit-center;'><h5 class='EncaGraficas' id='+i+'>Imagen</h5></div>" +
                        "<div class='col-xs-12 col-md-10 col-sm-10 row'><div class='col-xs-12 col-md-12 col-sm-12' style='padding-right: 0px;'><div class='col-xs-12 col-md-10 col-sm-10 graficos' style='padding-right: 0px;'>" +
                        "<h6 id='val' class='nombre'style='font-size: 12px;'> " + objetos[i].DES_PRODUCTO + "</h6></div><div class='col-xs-12 col-md-2 col-sm-2 graficos' style='padding-right: 0px;'>" +
                        "<h6 id='val'...