jaro/meranie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Zakladna migracia na viacej senzorov

Browse Source
This commit is contained in:
Jaroslav Drzik
2022-10-28 15:16:05 +02:00
parent 997aa81ff9
commit 5e521583af
12 changed files with 128091 additions and 20872 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
resources/js/app.js vendored
View File

@@ -6,7 +6,7 @@
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue';
window.moment = require('moment');
/**
@@ -51,203 +51,227 @@ Vue.use(CardPlugin);
import { BButton } from 'bootstrap-vue'
Vue.component('b-button', BButton);
import { BFormSelect } from 'bootstrap-vue'
Vue.component('b-form-select', BFormSelect)
import VuePictureSwipe from 'vue-picture-swipe';
import { data } from 'jquery';
Vue.component('vue-picture-swipe', VuePictureSwipe);
//(function () {
var app = new Vue({
el: '#app',
data: {
names: { balkon: "balkón", strecha:"strecha", decka: "decká"},
tmin: -10,
tmax: 50,
temperature: null,
time: null,
startdate: null,
enddate: null,
date4search: null,
host: 'balkon',
componentKey: 0,
ti: 0, //Tab Index
graphShow: [],
params: {
data: [],
border: true,
stripe: true
},
options: {
temperature: {
legend: 'always',
title: 'Teplotný graf',
xlabel: 'Dátum',
labels: ['Dátum','Teplota'],
ylabel: 'Stupeň',
fillGraph: true
},
humidity: {
color: 'red',
legend: 'always',
title: 'Vlhkosť graf',
xlabel: 'Dátum',
labels: ['Dátum','Vlhkosť'],
ylabel: 'Percent',
fillGraph: true
},
pressure: {
color: 'blue',
legend: 'always',
title: 'Tlak graf',
xlabel: 'Dátum',
labels: ['Dátum','Tlak'],
ylabel: 'Tlak',
fillGraph: true
}
},
series: { "temperature" : [], "humidity" : [], "pressure": [] },
images: { "0": [], "-1": [], "-2": [], "selected": []},
cameraimage: "upload/images/camera.jpg",
var app = new Vue({
el: '#app',
data: {
names: { balkon: "balkón", strecha: "strecha", decka: "decká", byt: "byt" },
sensormap: [
{ model: 'bme280', host: 'balkon', desc: 'Senzor na balkóne', camera: false },
{ model: 'bme280', host: 'decka', desc: 'Senzor v detskej izbe', camera: false },
{ model: 'bme280', host: 'strecha', desc: 'Senzor na streche', camera: true },
{ model: 'LYWSD03MMC', host: 'byt', desc: 'Senzor Xiaomi v byte', camera: false },
{ model: 'ThermoBeacon', host: 'byt', desc: 'Senzor Beacon v byte', camera: false }],
soptions: [],
si: 0, // Sensor index
tmin: -10,
tmax: 50,
temperature: null,
time: null,
startdate: null,
enddate: null,
date4search: null,
host: 'balkon',
model: 'bme280',
componentKey: 0,
ti: 0, //Tab Index
graphShow: [],
params: {
data: [],
border: true,
stripe: true
},
options: {
temperature: {
legend: 'always',
title: 'Teplotný graf',
xlabel: 'Dátum',
labels: ['Dátum', 'Teplota'],
ylabel: 'Stupeň',
fillGraph: true
},
mounted: function () {
console.log('MOUNTED');
this.getData();
var that = this;
window.setInterval(function(){
console.log("TIMER");
that.getData();
}, 300000);
humidity: {
color: 'red',
legend: 'always',
title: 'Vlhkosť graf',
xlabel: 'Dátum',
labels: ['Dátum', 'Vlhkosť'],
ylabel: 'Percent',
fillGraph: true
},
pressure: {
color: 'blue',
legend: 'always',
title: 'Tlak graf',
xlabel: 'Dátum',
labels: ['Dátum', 'Tlak'],
ylabel: 'Tlak',
fillGraph: true
}
},
series: { "temperature": [], "humidity": [], "pressure": [] },
images: { "0": [], "-1": [], "-2": [], "selected": [] },
cameraimage: "upload/images/camera.jpg",
},
mounted: function () {
console.log('MOUNTED');
for (var i in this.sensormap) {
this.soptions.push({ value: i, text: this.sensormap[i].desc});
}
methods: {
trigger: function () {
app.$refs.ps.$el.click();
},
displayResults: function () {
this.getData();
},
sethost: function (host) {
this.host = host;
this.getData();
console.log(host);
},
resizeGraph: function (i) {
console.log("RESIZE");
let index = "dg[" + i + "]";
console.log('Change tab:',i);
this.$nextTick(() => {
app.$refs[index]._data._graph.resize();
});
console.log('OPTIONS',this.soptions);
},
getImagesForDate: function () {
axios.get('/images/get', {
params: {
date: this.date4search
}
})
.then(function (response) {
console.log("GET DATA Images Selected");
console.log(response.data);
app.images["selected"] = response.data;
})
.catch(function (error) {
console.log(error);
});
},
getData: function () {
this.getData();
var that = this;
window.setInterval(function () {
console.log("TIMER");
that.getData();
}, 300000);
axios.get('/data', {
params: {
host: this.host
}
})
.then(function (response) {
console.log("GET DATA");
console.log(response.data.temperature);
let data = app.params.data = [];
data.push(['Teplota',response.data.temperature,'°C']);
data.push(['Vlhkosť',response.data.humidity,'%']);
data.push(['Tlak',response.data.pressure,'kHPa']);
data.push(['Napätie',response.data.voltage,'V']);
moment.locale('sk_SK');
app.time = moment(response.data.time).format('LLL');
app.temperature = response.data.temperature;
})
.catch(function (error) {
console.log(error);
});
},
axios.get('/images/get', {
params: {
date: "0"
}
})
.then(function (response) {
console.log("GET DATA Images 0");
console.log(response.data);
app.images["0"] = response.data;
})
.catch(function (error) {
console.log(error);
});
methods: {
trigger: function () {
app.$refs.ps.$el.click();
},
displayResults: function () {
this.getData();
},
sethost: function (i) {
this.host = this.sensormap[i].host;
this.model = this.sensormap[i].model;
axios.get('/images/get', {
params: {
date: "-1"
}
})
console.log('GET =',this.host,this.model);
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();
});
},
getImagesForDate: function () {
axios.get('/images/get', {
params: {
date: this.date4search
}
})
.then(function (response) {
console.log("GET DATA Images -1");
console.log(response.data);
app.images["-1"] = response.data;
console.log("GET DATA Images Selected");
console.log(response.data);
app.images["selected"] = response.data;
})
.catch(function (error) {
console.log(error);
console.log(error);
});
axios.get('/images/get', {
params: {
date: "-2"
}
})
},
getData: function () {
axios.get('/data', {
params: {
host: this.host,
model: this.model
}
})
.then(function (response) {
console.log("GET DATA Images -2");
console.log(response.data);
app.images["-2"] = response.data;
console.log("GET DATA");
console.log(response.data.temperature);
let data = app.params.data = [];
data.push(['Teplota', response.data.temperature, '°C']);
data.push(['Vlhkosť', response.data.humidity, '%']);
data.push(['Tlak', response.data.pressure, 'kHPa']);
data.push(['Napätie', response.data.voltage, 'V']);
moment.locale('sk_SK');
app.time = moment(response.data.time).format('LLL');
app.temperature = response.data.temperature;
})
.catch(function (error) {
console.log(error);
console.log(error);
});
let vts = ["temperature","humidity","pressure"];
axios.get('/images/get', {
params: {
date: "0"
}
})
.then(function (response) {
console.log("GET DATA Images 0");
console.log(response.data);
app.images["0"] = response.data;
})
.catch(function (error) {
console.log(error);
});
axios.get('/images/get', {
params: {
date: "-1"
}
})
.then(function (response) {
console.log("GET DATA Images -1");
console.log(response.data);
app.images["-1"] = response.data;
})
.catch(function (error) {
console.log(error);
});
axios.get('/images/get', {
params: {
date: "-2"
}
})
.then(function (response) {
console.log("GET DATA Images -2");
console.log(response.data);
app.images["-2"] = response.data;
})
.catch(function (error) {
console.log(error);
});
let vts = ["temperature", "humidity", "pressure"];
for (var t in vts) {
console.log("t=",vts[t]);
console.log("t=", vts[t]);
axios.get('/data/get', {
params: {
type: vts[t],
startdate: this.startdate,
enddate: this.enddate,
host: this.host
host: this.host,
model: this.model
}
})
.then(function (response) {
.then(function (response) {
console.log("GET DATA");
console.log(response.config.params.type);
let data = response.data.map( x => [moment(x[0]).toDate(),x[1]] );
let data = response.data.map(x => [moment(x[0]).toDate(), x[1]]);
app.series[response.config.params.type] = data;
app.componentKey += 1;
})
.catch(function (error) {
})
.catch(function (error) {
console.log(error);
});
});
};
console.log('new image source');
this.cameraimage = "upload/images/camera.jpg?" + moment().format('YYYYMMDD-HHmm');
this.cameraimage = "upload/images/camera.jpg?" + moment().format('YYYYMMDD-HHmm');
},
}
},
}
});
});
// })();

3
resources/js/components/StatisticsComponent.vue
View File

@@ -35,7 +35,8 @@ export default {
startdate: this.fromdate,
enddate: this.todate,
range: this.range,
host: this.host
host: this.host,
model: this.model
}
})
.then(function (response) {

26
resources/views/welcome.blade.php
View File

@@ -85,7 +85,7 @@
<div class="content" id="app">
<div class="title m-b-md">
Teplomer @{{ names[host] }}
@{{ sensormap[ti].desc }}
</div>
<div>
@@ -93,12 +93,10 @@
<vue-thermometer class="justify-content-center col-sm-3" :value="temperature" :min="tmin" :max="tmax"></vue-thermometer>
<div class="col-sm-9" id="values">
<div>
<b-button variant="primary" v-on:click="sethost('balkon')">Balkón</b-button>
<b-button variant="secondary" v-on:click="sethost('decka')">Decká</b-button>
<b-button variant="success" v-on:click="sethost('strecha')">Strecha</b-button>
<b-form-select v-model="si" :options="soptions" v-on:change="sethost(si)"></b-form-select>
</div>
<vue-table-dynamic :params="params" :key="host"></vue-table-dynamic>
<vue-table-dynamic :params="params" :key="si"></vue-table-dynamic>
<ul>
<li>Čas: @{{time}}</li>
</ul>
@@ -136,13 +134,13 @@
<b-tabs card>
<b-tab title="Celá doba">
<div>Štatistika za celú dobu v grafe</div>
<stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :key="componentKey" :host="host"></stats-table>
<stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :key="componentKey" :host="host" :model="model"></stats-table>
</b-tab>
<b-tab title="Hodina">
<stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :range="'1h'" :key="componentKey" :host="host"></stats-table>
<stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :range="'1h'" :key="componentKey" :host="host" :model="model"></stats-table>
</b-tab>
<b-tab title="Deň" v-if="startdate">
<stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :range="'1d'" :key="componentKey" :host="host"></stats-table>
<stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :range="'1d'" :key="componentKey" :host="host" :model="model"></stats-table>
</b-tab>
</b-tabs>
</b-card>
@@ -153,13 +151,13 @@
<b-tabs card>
<b-tab title="Celá doba">
<div>Štatistika za celú dobu v grafe</div>
<stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :key="componentKey" :host="host"></stats-table>
<stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :key="componentKey" :host="host" :model="model"></stats-table>
</b-tab>
<b-tab title="Hodina">
<stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :range="'1h'" :key="componentKey" :host="host"></stats-table>
<stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :range="'1h'" :key="componentKey" :host="host" :model="model"></stats-table>
</b-tab>
<b-tab title="Deň" v-if="startdate">
<stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :range="'1d'" :key="componentKey" :host="host"></stats-table>
<stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :range="'1d'" :key="componentKey" :host="host" :model="model"></stats-table>
</b-tab>
</b-tabs>
</b-card>
@@ -170,13 +168,13 @@
<b-tabs card>
<b-tab title="Celá doba">
<div>Štatistika za celú dobu v grafe</div>
<stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :key="componentKey" :host="host"></stats-table>
<stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :key="componentKey" :host="host" :model="model"></stats-table>
</b-tab>
<b-tab title="Hodina">
<stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :range="'1h'" :key="componentKey" :host="host"></stats-table>
<stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :range="'1h'" :key="componentKey" :host="host" :model="model"></stats-table>
</b-tab>
<b-tab title="Deň" v-if="startdate">
<stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :range="'1d'" :key="componentKey" :host="host"></stats-table>
<stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :range="'1d'" :key="componentKey" :host="host" :model="model"></stats-table>
</b-tab>
</b-tabs>
</b-card>