Zalozky, statistika

This commit is contained in:
2021-01-15 10:49:20 +01:00
parent 076d502b8a
commit 3137697a5f
11 changed files with 402 additions and 99420 deletions

17
resources/js/app.js vendored
View File

@@ -42,6 +42,12 @@ Vue.use(Datetime);
Vue.component('stats-table', require('./components/StatisticsComponent.vue').default);
import { TabsPlugin } from 'bootstrap-vue'
Vue.use(TabsPlugin);
import { CardPlugin } from 'bootstrap-vue'
Vue.use(CardPlugin);
//(function () {
var app = new Vue({
el: '#app',
@@ -53,6 +59,8 @@ Vue.component('stats-table', require('./components/StatisticsComponent.vue').def
startdate: null,
enddate: null,
componentKey: 0,
ti: 0, //Tab Index
graphShow: [],
params: {
data: [],
border: true,
@@ -103,6 +111,15 @@ Vue.component('stats-table', require('./components/StatisticsComponent.vue').def
displayResults: function () {
this.getData();
},
resizeGraph: function (i) {
console.log("RESIZE");
let index = "dg[" + i + "]";
console.log('Change tab:',i);
this.$nextTick(() => {
app.$refs[index]._data._graph.resize();
});
},
getData: function () {
axios.get('/data', {

View File

@@ -1,48 +1,69 @@
<template>
<div>
<vue-table-dynamic :params="params"></vue-table-dynamic>
<vue-table-dynamic :params="params" :key="redraw"></vue-table-dynamic>
</div>
</template>
<script>
export default {
props: ['data'],
props: ['fromdate','todate','type','range'],
name: 'Stats',
data() {
return {
params: {
data: [
['', 'Min', 'Max', 'Avg', 'Current'],
['', 'Min', 'Max', 'Avg', 'Posledná'],
],
header: 'row',
border: true,
stripe: true
}
stripe: true,
height: 0,
},
redraw: 0,
}
},
mounted: function () {
console.log("Mounted");
console.log(this.data);
let min = null;
let max = null;
let avg = 0;
let current = null;
for (var index = 0; index < this.data.length; ++index) {
let row = this.data[index];
let val = row[1];
if (min == null) min = val;
else if (min > val) min = val;
console.log("type=",this.type);
var that = this;
moment.locale('sk_SK');
if (max == null) max = val;
else if (max < val) max = val;
axios.get('/stats/get', {
params: {
type: this.type,
startdate: this.fromdate,
enddate: this.todate,
range: this.range
}
})
.then(function (response) {
console.log("STATS DATA");
console.log(that.type);
that.params.data[0][0] = 'Čas';
if (that.range) {
for (var i = 0; i < response.data.length; i++) {
var row = response.data[i];
let time = moment(row.time).format('LLL');
let mean = null;
if (row.mean != null) {
mean = row.mean.toFixed(2);
that.params.data.push([time,row.min,row.max,mean,row.last]);
}
that.params.height = 400;
}
} else {
that.params.data.push(['Hodnota',response.data[0].min,response.data[0].max,response.data[0].mean.toFixed(2),response.data[0].last]);
};
console.log(that.params.data);
that.redraw += 1;
avg = avg + val;
current = val;
}
avg = avg / this.data.length;
})
.catch(function (error) {
console.log(error);
});
this.params.data.push(['Hodnota',min,max,avg.toFixed(2),current]);
}
}
</script>

View File

@@ -14,3 +14,4 @@
@import '~font-awesome/scss/font-awesome';

View File

@@ -120,14 +120,53 @@
</div>
</div>
</div>
<dygraphs ref="dgt" :graph-data="series['temperature']" :graph-options="options['temperature']"></dygraphs>
<stats-table :data="series['temperature']" :key="componentKey"></stats-table>
<dygraphs ref="dgh" :graph-data="series['humidity']" :graph-options="options['humidity']"></dygraphs>
<stats-table :data="series['humidity']" :key="componentKey"></stats-table>
<dygraphs ref="dgp" :graph-data="series['pressure']" :graph-options="options['pressure']"></dygraphs>
<stats-table :data="series['pressure']" :key="componentKey"></stats-table>
<b-card no-body>
<b-tabs v-model="ti" small card lazy>
<b-tab title="Teplota" @click="resizeGraph(0)">
<dygraphs ref="dg[0]" :graph-data="series['temperature']" :graph-options="options['temperature']"></dygraphs>
<!-- Tabs with card integration -->
<b-card no-body>
<b-tabs small card>
<b-tab title="Celá doba">
<div>Štatistika za celú dobu v grafe</div>
<stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :key="componentKey"></stats-table>
</b-tab>
<b-tab title="Hodina">
<stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :range="'1h'" :key="componentKey"></stats-table>
</b-tab>
</b-tabs>
</b-card>
</b-tab>
<b-tab title="Vlhkosť" @click="resizeGraph(1)">
<dygraphs ref="dg[1]" :graph-data="series['humidity']" :graph-options="options['humidity']"></dygraphs>
<b-card no-body>
<b-tabs small card>
<b-tab title="Celá doba">
<div>Štatistika za celú dobu v grafe</div>
<stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :key="componentKey"></stats-table>
</b-tab>
<b-tab title="Hodina">
<stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :range="'1h'" :key="componentKey"></stats-table>
</b-tab>
</b-tabs>
</b-card>
</b-tab>
<b-tab title="Tlak" @click="resizeGraph(2)">
<dygraphs ref="dg[2]" :graph-data="series['pressure']" :graph-options="options['pressure']"></dygraphs>
<b-card no-body>
<b-tabs small card>
<b-tab title="Celá doba">
<div>Štatistika za celú dobu v grafe</div>
<stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :key="componentKey"></stats-table>
</b-tab>
<b-tab title="Hodina">
<stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :range="'1h'" :key="componentKey"></stats-table>
</b-tab>
</b-tabs>
</b-card>
</b-tab>
</b-tabs>
</b-card>
</div>
</div>