441 lines
14 KiB
HTML
441 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% load static %}
|
|
|
|
{% load crispy_forms_tags %}
|
|
|
|
{% block head %}
|
|
|
|
<!-- <meta http-equiv="refresh" content="20"> -->
|
|
|
|
<script src="/static/lib/Highcharts-10.2.1/highcharts.js"></script>
|
|
<script src="/static/lib/Highcharts-10.2.1/modules/data.js"></script>
|
|
<script src="/static/lib/Highcharts-10.2.1/modules/series-label.js"></script>
|
|
<script src="/static/lib/Highcharts-10.2.1/modules/exporting.js"></script>
|
|
<script src="/static/lib/Highcharts-10.2.1/modules/export-data.js"></script>
|
|
<script src="/static/lib/Highcharts-10.2.1/modules/accessibility.js"></script>
|
|
<style type="text/css">
|
|
.highcharts-figure,
|
|
.highcharts-data-table table {
|
|
min-width: 360px;
|
|
max-width: 800px;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
.highcharts-data-table table {
|
|
font-family: Verdana, sans-serif;
|
|
border-collapse: collapse;
|
|
border: 1px solid #ebebeb;
|
|
margin: 10px auto;
|
|
text-align: center;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.highcharts-data-table caption {
|
|
padding: 1em 0;
|
|
font-size: 1.2em;
|
|
color: #555;
|
|
}
|
|
|
|
.highcharts-data-table th {
|
|
font-weight: 600;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.highcharts-data-table td,
|
|
.highcharts-data-table th,
|
|
.highcharts-data-table caption {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.highcharts-data-table thead tr,
|
|
.highcharts-data-table tr:nth-child(even) {
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.highcharts-data-table tr:hover {
|
|
background: #f1f7ff;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
{% endblock head %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="breadcrumbs">
|
|
<div class="breadcrumbs-inner">
|
|
<div class="row m-0">
|
|
<div class="col-sm-12">
|
|
<div class="page-header float-left">
|
|
<div class="page-title">
|
|
<h1>SUBDIRECCIÓN DE INGENIERÍA BIOMÉDICA</h1>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<div class="page-header float-right">
|
|
<form method="POST" action="{% url 'sensoresfijosdia' %}" class="mt-2" autocomplete="off">
|
|
{% csrf_token %}
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<button type="submit" class="btn btn-success">Consultar</button>
|
|
</div>
|
|
<div class="input-group-prepend">
|
|
<label class="input-group-text" for="inputGroupSelect01">Sensor</label>
|
|
</div>
|
|
<div class="input-group-prepend">
|
|
<select class="custom-select" name="sensor" >
|
|
<option selected>Sensor....</option>
|
|
{% for sensor in sensores %}
|
|
<option value="{{ sensor.idsensor }}">{{ sensor.nombre }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="input-group-prepend">
|
|
<label class="input-group-text" for="inputGroupSelect01">INICIO</label>
|
|
</div>
|
|
<div class="input-group-prepend">
|
|
<input name="fecha_ini" type="date" placeholder="" class="form-control" value="" required>
|
|
</div>
|
|
<div class="input-group-prepend">
|
|
<label class="input-group-text" for="inputGroupSelect01">FIN</label>
|
|
</div>
|
|
<div class="input-group-prepend">
|
|
<input name="fecha_fin" type="date" placeholder="" class="form-control" value="" required>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<div class="page-header float-left">
|
|
{% for menu in menus %}
|
|
{% if menu.activo == 'SI' %}
|
|
<a href="{% url 'sensoresfijosdianew' menu.idsensor %}" class="btn btn-success ">{{ menu.nombre }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content">
|
|
<div class="animated fadeIn">
|
|
<div class="row">
|
|
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<strong class="card-title">DATOS OBTENIDOS DE SENSORES</strong>
|
|
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<figure class="highcharts-figure">
|
|
<div id="containert001"></div>
|
|
<p class="highcharts-description">
|
|
TEMPERATURA SENSOR {{ sensort.nombre }} TOTAL REGISTROS {{ count }}<br>
|
|
<code>Fecha: {{ fecha_ini }} hasta {{ fecha_fin }}<br> Tmin: {{ temmin.temp }} H:{{ temmin.hora }} <br> Tmax: {{ temmax.temp }} H:{{ temmax.hora }}</code>
|
|
</p>
|
|
<hr>
|
|
<div id="containert001h"></div>
|
|
<p class="highcharts-description">
|
|
HUMEDAD SENSOR {{ sensort.nombre }} <br>
|
|
<code>Fecha: {{ fecha_ini }} hasta {{ fecha_fin }} <br> Hmin: {{ humemin.hume }} Hora:{{ humemin.hora }} <br> Hmax: {{ humemax.hume }} Hora:{{ humemax.hora }}</code>
|
|
</p>
|
|
<hr>
|
|
<div id="containert001dual"></div>
|
|
<p class="highcharts-description">
|
|
TEMPERATURA SENSOR {{ sensort.nombre }} <br>
|
|
<code>Fecha: {{ fecha_ini }} hasta {{ fecha_fin }} <br> Tmin: {{ temmin.temp }} H:{{ temmin.hora }} <br> Tmax: {{ temmax.temp }} H:{{ temmax.hora }}</code>
|
|
</p>
|
|
<hr>
|
|
|
|
</figure>
|
|
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<div class="page-header float-right">
|
|
<form method="POST" action="{% url 'sensoresrango' %}" class="mt-2" autocomplete="off">
|
|
{% csrf_token %}
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<button type="submit" class="btn btn-success">Ver Tabla</button>
|
|
</div>
|
|
|
|
<div class="input-group-prepend">
|
|
<input name="sensor" type="hidden" placeholder="" class="form-control" value="{{ sensort }}" >
|
|
</div>
|
|
|
|
<div class="input-group-prepend">
|
|
<input name="fecha_ini" type="hidden" placeholder="" class="form-control" value="{{ fecha_ini }}" >
|
|
</div>
|
|
|
|
<div class="input-group-prepend">
|
|
<input name="fecha_fin" type="hidden" placeholder="" class="form-control" value="{{ fecha_fin }}" >
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div><!-- .animated -->
|
|
</div><!-- .content -->
|
|
|
|
|
|
|
|
|
|
<script type="application/javascript">
|
|
Highcharts.chart('containert001', {
|
|
chart: {
|
|
type: 'spline'
|
|
},
|
|
title: {
|
|
{% if sensort.nombre == NULL %}
|
|
text: 'TEMPERATURA SENSOR {{ sensort }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
|
|
{% else %}
|
|
text: 'TEMPERATURA SENSOR {{ sensort.nombre }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
|
|
{% endif %}
|
|
|
|
},
|
|
subtitle: {
|
|
text: 'Fecha: {{ fecha }} <br> Tmin: {{ temmin.temp }} H:{{ temmin.hora }} & Tmax: {{ temmax.temp }} H:{{ temmax.hora }}'
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
{% for dato in datos %}
|
|
|
|
'{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}',
|
|
{% endfor %}
|
|
],
|
|
accessibility: {
|
|
description: 'Months of the year'
|
|
}
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Temperatura'
|
|
},
|
|
labels: {
|
|
formatter: function () {
|
|
return this.value + '°';
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
crosshairs: true,
|
|
shared: true
|
|
},
|
|
plotOptions: {
|
|
spline: {
|
|
marker: {
|
|
radius: 4,
|
|
lineColor: '#666666',
|
|
lineWidth: 1
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '{{ sensort }}',
|
|
marker: {
|
|
symbol: 'square'
|
|
},
|
|
data: [
|
|
{% for dato in datos %}
|
|
{{ dato.temp }},
|
|
{% endfor %}
|
|
]
|
|
|
|
}]
|
|
});
|
|
|
|
|
|
|
|
Highcharts.chart('containert001h', {
|
|
chart: {
|
|
type: 'spline'
|
|
},
|
|
title: {
|
|
{% if sensort.nombre == NULL %}
|
|
text: 'HUMEDAD SENSOR {{ sensort }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
|
|
{% else %}
|
|
text: 'HUMEDAD SENSOR {{ sensort.nombre }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
|
|
{% endif %}
|
|
|
|
},
|
|
subtitle: {
|
|
text: 'Fecha: {{ fecha }} <br> Hmin: {{ humemin.hume }} H:{{ humemin.hora }} & Hmax: {{ humemax.hume }} H:{{ humemax.hora }}'
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
{% for dato in datos %}
|
|
|
|
'{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}',
|
|
{% endfor %}
|
|
],
|
|
accessibility: {
|
|
description: 'Months of the year'
|
|
}
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Humedad'
|
|
},
|
|
labels: {
|
|
formatter: function () {
|
|
return this.value + '%';
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
crosshairs: true,
|
|
shared: true
|
|
},
|
|
plotOptions: {
|
|
spline: {
|
|
marker: {
|
|
radius: 4,
|
|
lineColor: '#666666',
|
|
lineWidth: 1
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '{{ sensort }}',
|
|
marker: {
|
|
symbol: 'square'
|
|
},
|
|
data: [
|
|
{% for dato in datos %}
|
|
{{ dato.hume }},
|
|
{% endfor %}
|
|
]
|
|
|
|
}
|
|
]
|
|
});
|
|
|
|
|
|
Highcharts.chart('containert001dual', {
|
|
chart: {
|
|
type: 'spline'
|
|
},
|
|
title: {
|
|
{% if sensort.nombre == NULL %}
|
|
text: 'TEMPERATURA Y HUMEDAD SENSOR {{ sensort }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
|
|
{% else %}
|
|
text: 'TEMPERATURA Y HUMEDAD SENSOR {{ sensort.nombre }} de {{ fecha_ini }} hasta {{ fecha_fin }}'
|
|
{% endif %}
|
|
|
|
},
|
|
subtitle: {
|
|
text: 'Fecha: {{ fecha }} <br> Hmin: {{ humemin.hume }} H:{{ humemin.hora }} & Hmax: {{ humemax.hume }} H:{{ humemax.hora }}'
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
{% for dato in datos %}
|
|
|
|
'{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}',
|
|
{% endfor %}
|
|
],
|
|
accessibility: {
|
|
description: 'Months of the year'
|
|
}
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Humedad'
|
|
},
|
|
labels: {
|
|
formatter: function () {
|
|
return this.value + '%|°';
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
crosshairs: true,
|
|
shared: true
|
|
},
|
|
plotOptions: {
|
|
spline: {
|
|
marker: {
|
|
radius: 4,
|
|
lineColor: '#666666',
|
|
lineWidth: 1
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '{{ sensort.nombre }}',
|
|
marker: {
|
|
symbol: 'square'
|
|
},
|
|
data: [
|
|
{% for dato in datos %}
|
|
{{ dato.temp }},
|
|
{% endfor %}
|
|
]
|
|
|
|
} ,
|
|
{
|
|
name: '{{ sensort.nombre }}',
|
|
marker: {
|
|
symbol: 'square'
|
|
},
|
|
data: [
|
|
{% for dato in datos %}
|
|
{{ dato.hume }},
|
|
{% endfor %}
|
|
]
|
|
|
|
}
|
|
]
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
|
|
|
|
|
|
{% endblock javascript %}
|
|
|
|
|
|
|