Zalozky, statistika
This commit is contained in:
17
resources/js/app.js
vendored
17
resources/js/app.js
vendored
@@ -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', {
|
||||
|
||||
@@ -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>
|
||||
1
resources/sass/app.scss
vendored
1
resources/sass/app.scss
vendored
@@ -14,3 +14,4 @@
|
||||
|
||||
@import '~font-awesome/scss/font-awesome';
|
||||
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user