Carga
Carga
This commit is contained in:
416
templates/sensores_fijos_dianew.html
Normal file
416
templates/sensores_fijos_dianew.html
Normal file
@@ -0,0 +1,416 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% load static %}
|
||||
|
||||
{% load crispy_forms_tags %}
|
||||
|
||||
{% block head %}
|
||||
|
||||
<meta http-equiv="refresh" content="30">
|
||||
<!-- -->
|
||||
|
||||
<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>
|
||||
<!-- < guión src = "/static/lib/Highcharts-10.2.1/modules/offline-exporting.js" > < / guión > -->
|
||||
<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 %}
|
||||
{% if sensor.activo == 'SI' %}
|
||||
<option value="{{ sensor.idsensor }}">{{ sensor.nombre }}</option>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
{% 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 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 }} <br>
|
||||
<code>Fecha: {{ fecha }} <br> Tmin: {{ temmin.temp }} H:{{ temmin.hora }} <br> Tmax: {{ temmax.temp }} H:{{ temmax.hora }}</code>
|
||||
</p>
|
||||
<hr>
|
||||
|
||||
{% if sensort.ver_humedad == 'SI' %}
|
||||
<div id="containert001h"></div>
|
||||
<p class="highcharts-description">
|
||||
HUMEDAD SENSOR {{ sensort.nombre }} <br>
|
||||
<code>Fecha: {{ fecha }} <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 }} Tmin: {{ temmin.temp }} H:{{ temmin.hora }} Tmax: {{ temmax.temp }} H:{{ temmax.hora }}</code> <br>
|
||||
<code>Fecha: {{ fecha }} Hmin: {{ humemin.hume }} Hora:{{ humemin.hora }} Hmax: {{ humemax.hume }} Hora:{{ humemax.hora }}</code>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
</figure>
|
||||
</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 }}'
|
||||
{% else %}
|
||||
text: 'TEMPERATURA SENSOR {{ sensort.nombre }}'
|
||||
{% endif %}
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Fecha: {{ fecha }} <br> Tmin: {{ temmin.temp }} H:{{ temmin.hora }} & Tmax: {{ temmax.temp }} H:{{ temmax.hora }}'
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
{% for dato in datos %}
|
||||
{% if dato.temp == -200 %}
|
||||
'<p style="color:#FF0000";>{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}</p>',
|
||||
{% else %}
|
||||
'{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}',
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
accessibility: {
|
||||
description: ''
|
||||
}
|
||||
},
|
||||
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.nombre }}',
|
||||
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 }}'
|
||||
{% else %}
|
||||
text: 'HUMEDAD SENSOR {{ sensort.nombre }}'
|
||||
{% endif %}
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Fecha: {{ fecha }} <br> Hmin: {{ humemin.hume }} H:{{ humemin.hora }} & Hmax: {{ humemax.hume }} H:{{ humemax.hora }}'
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
{% for dato in datos %}
|
||||
{% if dato.hume == -200 %}
|
||||
'<p style="color:#FF0000";>{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}</p>',
|
||||
{% else %}
|
||||
'{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}',
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
accessibility: {
|
||||
description: 'Meses'
|
||||
}
|
||||
},
|
||||
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: 'diamond'
|
||||
},
|
||||
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 }}'
|
||||
{% else %}
|
||||
text: 'TEMPERATURA Y HUMEDAD SENSOR {{ sensort.nombre }}'
|
||||
{% endif %}
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Fecha: {{ fecha }} <br> Hmin: {{ humemin.hume }} H:{{ humemin.hora }} & Hmax: {{ humemax.hume }} H:{{ humemax.hora }}'
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
{% for dato in datos %}
|
||||
{% if dato.temp == -200 %}
|
||||
'<p style="color:#FF0000";>{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}</p>',
|
||||
{% else %}
|
||||
'{{ dato.fecha|date:'d/m' }}-{{ dato.hora }}',
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
accessibility: {
|
||||
description: 'Meses'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperatura y Humedad'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + '% | °';
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
crosshairs: true,
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
spline: {
|
||||
marker: {
|
||||
radius: 4,
|
||||
lineColor: '#666666',
|
||||
lineWidth: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Temperatura',
|
||||
marker: {
|
||||
symbol: 'square'
|
||||
},
|
||||
data: [
|
||||
{% for dato in datos %}
|
||||
{{ dato.temp }},
|
||||
{% endfor %}
|
||||
]
|
||||
|
||||
} ,
|
||||
{
|
||||
name: 'Humedad',
|
||||
marker: {
|
||||
symbol: 'diamond'
|
||||
},
|
||||
data: [
|
||||
{% for dato in datos %}
|
||||
{{ dato.hume }},
|
||||
{% endfor %}
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
{% block javascript %}
|
||||
|
||||
{% endblock javascript %}
|
||||
|
||||
Reference in New Issue
Block a user