You've already forked radiacode_docker_usb
5.4 KiB
5.4 KiB
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<style>
#app > div {
margin: 5px auto;
width: 80%;
text-align: center;
padding: 5px;
border: 1px #aaa dashed;
}
#app fieldset {
display: inline-block;
border: 0;
padding: 0;
margin-left: 20px;
}
</style>
</head>
Оновити спектр
<script>
const common_options = {
chart: {
animations: {enabled: false},
zoom: {autoScaleYaxis: true},
},
tooltip: {intersect: false},
grid: {xaxis: {lines: {show: true}}},
dataLabels: {enabled: false},
};
var app = new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: function() {
return {
ws: null,
spectrum_duration: 0,
rates_autoupdate: true,
rates_series: [],
spectrum_accum: false,
spectrum_series: [],
spectrum_coef: [0, 0, 0],
spectrum_logarithmic: true,
spectrum_energy: true,
ratesChartOptions: {
...common_options,
title: {text: 'Активнсть подій (подій в секунду) і доза'},
xaxis: {type: 'datetime'},
yaxis: [
{seriesName: 'Подій', title: {text: 'ПНС'}, labels: {formatter:(v) => v.toFixed(2) + ' ПНС'}},
{seriesName: 'Доза', title: {text: 'мк3в/г'}, labels: {formatter:(v) => v.toFixed(4) + ' мк3в/г'}, opposite: true},
],
},
};
},
watch: {
spectrum_accum() {
this.updateSpectrum();
}
},
computed: {
spectrumChartOptions() {
const a0 = this.spectrum_coef[0], a1 = this.spectrum_coef[1], a2 = this.spectrum_coef[2];
const fmt = this.spectrum_energy ? ((c) => (a0 + a1*c + a2*c*c).toFixed(0)) : undefined;
const title = this.spectrum_energy ? 'кеВ' : 'канал';
return{
...common_options,
title: {text: `Спектр, ${this.spectrum_duration} секунд`},
xaxis: {type: 'numeric', title: {text: title}, tickAmount: 25, labels: {formatter:fmt}},
yaxis: {logarithmic: this.spectrum_logarithmic, decimalsInFloat: 0},
plotOptions: {bar: {columnWidth: '95%'}},
};
},
},
created() {
this.ws = new WebSocket('wss://' + window.location.host + '/ws')
this.ws.onmessage = this.onmessage;
this.updateSpectrum();
},
beforeDestroy: function() {
this.ws.close();
},
methods: {
onmessage(ev) {
if (!this.rates_autoupdate) {
return;
}
const d = JSON.parse(ev.data);
this.rates_series = d.series;
},
updateSpectrum() {
fetch(`/spectrum?accum=${this.spectrum_accum}`)
.then(response => response.json())
.then(data => (this.spectrum_duration=data.duration, this.spectrum_coef=data.coef, this.spectrum_series=data.series));
},
},
});
</script>
</html>
неРадіоактивна ситуація в Києві.
В реальному часі.
Автооновлення: {{ rates_autoupdate ? "ВКЛ" : "ВИКЛ" }}