Buen dia,
Sucede que se esta deasrrollando una aplicacion de tipo MVC4 con C#. Hay una vista llamada listado Solicitudes, y esto trae desde la base de datos una tabla dinamica que cambia segun los datos cargados.
El tema es que hay una columna llamada porcentaje de avance, y la idea es mostrar alli en tiempo real tomando la hora actual, el porcentaje de avance de la solicitud.
Esta parte ya la tengo solucionada con una funcion en javascript. Lo que se necesita es mostrar el porcentaje de avance de cada solicitud listada en la tabla.
Para mostrar dicho porcentaje no uso numeros, uso estilo CSS de bootstrap.
Código HTML:
Ver original <div id="progressBar" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em; width:0%;">
<span id="por" class="progress-value"></span>
La tabla esta construida de la sgte. manera:
Código HTML:
Ver original<table id="listadoRequerimiento" class="table table-condensed"> <th>Entrega a Cliente
</th> @foreach (var item in Model)
{
<td>@item.Fecha_Cliente.ToString("dd/MM/yyyy")
</td> <td id="Fecha_Creacion">@item.Fecha_Inicio.ToString("dd/MM/yyyy")
</td> <td id="Hora_Creacion_">@item.Hora_Creacion
</td> <td>@item.Fecha_Entrega.ToString("dd/MM/yyyy")
</td> <td id="Horas_Proyec_">@item.Horas_Proyec
</td> <div id="progressBar" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em; width:0%;">
<span id="por" class="progress-value"></span> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="@item.Porcen_Final" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em; width: @item.Porcen_Final%;">
@item.Porcen_Final%
@switch (item.Estado_Req)
{
case 1:
<span class="label label-danger">@item.Estado_Requerimiento.Nombre
</span> break;
case 2:
<span class="label label-success">@item.Estado_Requerimiento.Nombre
</span> break;
case 3:
<span class="label label-primary">@item.Estado_Requerimiento.Nombre
</span> break;
default:
break;
}
<td>@item.Usuarios.Nombre
<div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"> <ul class="dropdown-menu" role="menu"> <li><a href="@Url.RouteUrl("detalle_requerimiento", new { ID_Req = item.ID_Req })"><i class="fa fa-eye fa-fw"></i>Movimientos
</a></li> }
Tengo esta funcion en javascript, que calcula el porcentaje en tiempo real y por dias desde la fecha de creacion.
Código Javascript
:
Ver originalfunction ActualizarPorcentaje(progressBar) {
var hora_crea_ = [];
var Hora_actual_ = [];
var Minutos;
var Minutos_Crea;
var Hora_Real;
var Hora_CREACION;
var hora_Creacion = document.getElementById('Hora_Creacion_').innerHTML;
var fecha_Creacion = document.getElementById('Fecha_Creacion').innerHTML;
var Hora_Proyectadas_ = document.getElementById('Horas_Proyec_').innerHTML;
var Hora_act_ = String(document.getElementById('reloj').value);
var H_Laboral; //para calcular el valor de dias por hora laboral
var SeLLeva; //para calcular el tiempo que lleva el requerimiento
var Me_queda;
var D_H_parcial;
var f_dia = new Date();
var fecha_actual = f_dia.getDate() + "/" + (f_dia.getMonth()+1 )+ "/" + f_dia.getFullYear();
var total_porcentaje_; //variable de calculo de porcentaje
//se calculan los dias transcurridos
var F_actual = fecha_actual.split('/');
var F_creacion = fecha_Creacion.split('/');
var fFecha2 = Date.UTC(F_actual[2], F_actual[1] - 1, F_actual[0]);
var fFecha1 = Date.UTC(F_creacion[2], F_creacion[1] - 1, F_creacion[0]);
var dif = fFecha2 - fFecha1;
var dias = Math.floor(dif / (1000 * 60 * 60 * 24));
hora_crea_ = hora_Creacion.split(":"); //Arreglo de la hora de creacion del requerimiento
Hora_actual_ = Hora_act_.split(":"); //Arreglo de la hora actual o real del momento.
Minutos = Hora_actual_[1] / 60; //se calcula la cantidad de minutos
Minutos_Crea = hora_crea_[1] / 60; //se calcula la cantidad de minutos hora de creacion reque.
Hora_Real =parseFloat(Hora_actual_[0]) + Minutos; //hora de consulta real. La del momento.
Hora_CREACION =parseFloat(hora_crea_[0]) + Minutos_Crea; //hora en que se creo el requerimiento
if (Hora_Proyectadas_ != 0) {
if (Hora_Real >= 7.75 && Hora_Real <= 17.5) {
H_Laboral = (dias * 9.75); //Se calcula los dias por horas laborales
if (H_Laboral > 0) {
// D_H_parcial = 17.5 - Hora_CREACION;
// SeLLeva = (Hora_Real - 7.75) + D_H_parcial;
Me_queda = (dias * 9.75);
if (Hora_Proyectadas_ < Me_queda) {
total_porcentaje_ = 100;
}
else {
total_porcentaje_ = (Me_queda * 100) / parseInt(Hora_Proyectadas_);
}
}
else {
SeLLeva = Hora_Real - Hora_CREACION;
if (SeLLeva >= Hora_Proyectadas_) {
total_porcentaje_ = 100;
}
else {
total_porcentaje_ = (SeLLeva * 100) / parseInt(Hora_Proyectadas_);
}
}
}
}
else {
total_porcentaje = 0;
hora = 0;
}
//se muestran los resultados
document.getElementById('progressBar').style.width = (total_porcentaje_) + '%';
document.getElementById('por').innerHTML = total_porcentaje_.toFixed(2) + '%';
}
la idea es plantear esta funcion por cada item de solicitud cargado desde la base de datos en la tabla, y que en la columna porcentaje se muestre dicho avance.
Se que podria usarse un ciclo for:
Código Javascript
:
Ver originalvar celdas = document.getElementsByTagName("tr");
for (var i = 0; i < celdas.length; i++) {
}
Pero no se como integrar la funcion a dicho proceso.
Cualquier guia la agradeceria.